:root{
--vat:#170B22;        /* deep plum-black base */
--vat-2:#241033;      /* raised divs */
--elixir:#FF3D8A;     /* magenta */
--venom:#C2FF42;      /* chartreuse */
--brass:#E8A93C;      /* gold */
--phial:#34D2C3;      /* teal/blue */
--potion:#B84FFF;     /* neon purple */
--bone:#F3E9D2;       /* cream text */ 
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
    background:var(--vat);
    color:var(--bone);
    font-family:"Bricolage Grotesque", system-ui, sans-serif;
    line-height:1.5;
    overflow-x:hidden;
    background-image:
    radial-gradient(120% 120% at 30% 10%, #FF3D8A10, transparent 50%),
    radial-gradient(150% 150% at 50% 30%, #B84FFF10, transparent 30%),
    radial-gradient(180% 180% at 70% 60%, #C2FF4210, transparent 30%);
}

.wrap{ position:relative; z-index:1; max-width:640px; margin:0 auto; padding:10dvh 24px; }

.eyebrow{
    font-family:"Space Mono", monospace;
    font-size:10px;
    letter-spacing:.25em;
    color:var(--brass);
    text-align:center;
    margin-bottom:15px;
}

h1{
    font-family:"Space Mono", monospace;
    font-weight:700;
    font-size:clamp(52px,10vw,88px);
    letter-spacing:-.02em;
    text-align:center;
    margin:0 0 15px;
    background:linear-gradient(96deg,
    var(--elixir) 0%,
    var(--brass) 20%, 
    var(--venom) 40%,
    var(--phial) 60%,
    var(--potion) 80%,
    var(--elixir) 100%);
    background-size:220% auto;
    background-size: 300% auto;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:shimmer 9s ease-in-out infinite alternate;
    filter:drop-shadow(0 4px 30px #FF3D8A40);
}

@keyframes shimmer{ to{ background-position:180% center; } }

.tagline{
    font-size:18px;
    color:var(--potion);
    text-align:center;
    margin-bottom:35px;
}

.status{
    display:block;
    width:fit-content;
    margin:0 auto 56px;
    color:var(--venom);
    font-family:"Space Mono", monospace;
    font-size:15px;
    line-height:1.6;
    text-align:center;
    border:1px dashed #C2FF4266;
    border-radius:999px;
    padding:16px 28px;
}

.shelf{ display:flex; flex-direction:column; gap:20px; margin-bottom:50px; }

a.beaker-label{
    display:block;
    text-decoration:none;
    color:inherit;
    border:1px solid;
    border-radius:20px;
    padding:20px 20px;
    background:var(--vat-2);
    transition:border-color .100s ease-in, transform .100s ease-in, box-shadow .100s ease-in;
}
a.beaker-label:hover{
    transform:translateY(-5px);
}

.shelf a.beaker-label:nth-child(5n+1){ border-color: #E8A93C40; }
.shelf a.beaker-label:nth-child(5n+2){ border-color: #FF3D8A40; }
.shelf a.beaker-label:nth-child(5n+3){ border-color: #34D2C340; }
.shelf a.beaker-label:nth-child(5n+4){ border-color: #C2FF4240; }
.shelf a.beaker-label:nth-child(5n+5){ border-color: #B84FFF40; }

.shelf a.beaker-label:nth-child(5n+1):hover{ border-color: var(--brass); box-shadow:0 12px 70px 4px #E8A93C50; }
.shelf a.beaker-label:nth-child(5n+2):hover{ border-color: var(--elixir); box-shadow:0 12px 70px 4px #FF3D8A50; }
.shelf a.beaker-label:nth-child(5n+3):hover{ border-color: var(--phial); box-shadow:0 12px 70px 4px #34D2C350; }
.shelf a.beaker-label:nth-child(5n+4):hover{ border-color: var(--venom); box-shadow:0 12px 70px 4px #C2FF4250; }
.shelf a.beaker-label:nth-child(5n+5):hover{ border-color: var(--potion); box-shadow:0 12px 70px 4px #FF3D8A50; }

.beaker-top{ display:flex; justify-content:space-between; align-items:center; }

.formula{
    font-family:"Space Mono", monospace;
    font-size:11px;
    color:var(--elixir);
    letter-spacing:.1em;
    margin-bottom:6px;
}

.beaker-name{ font-weight:700; font-size:16px; color:var(--phial); }


.status-stable,
.status-testing,
.status-in-progress,
.status-planning{
    font-family:"Space Mono", monospace;
    font-size:11px;
    letter-spacing:.12em;
    padding:2px 10px;
    border-radius:800px;
    border:1px solid;
}
.status-stable{ color:var(--venom); border-color:#C2FF4250; }
.status-testing{ color:var(--phial); border-color:#34D2C350; }
.status-in-progress{ color:var(--elixir); border-color:#FF3D8A50; }
.status-planning{ color:var(--brass); border-color:#E8A93C50; }

.beaker-about{ font-size:14px; color:var(--bone); margin-top:4px; }

.stirred{
    font-family:"Space Mono", monospace;
    font-size:10px;
    color:var(--bone);
    margin-top:8px;
    font-style:italic;
}

hr{ border:none; border-top:1px dashed var(--venom); margin:0 0 40px; }


.about-blurb{
    font-size:14px;
    line-height:1.7;
    color:var(--bone);
    max-width:440px;
    margin:0 auto 28px;
    text-align:center;
}

.signature{ font-family:"Space Mono", monospace; font-size:14px; color:var(--bone); text-align:center; margin-bottom:24px; }

.email{ display:block; text-align:center; color:var(--phial); text-decoration:none; font-family:"Space Mono", monospace; font-size:14px; }
.email:hover{ color:var(--brass); text-decoration:underline; }

.dots{ display:flex; justify-content:center; gap:8px; margin-top:28px; }
.dot{ width:12px; height:12px; border-radius:50%; }

.github{ margin-top:20px; text-align:center; font-family:"Space Mono", monospace; font-size:13px; }
.github a { 
    color:var(--potion); 
    text-decoration:none; 
    border-bottom:1px 
    dotted var(--venom); }
.github a:hover{ color:var(--venom); border-color:var(--venom); }

:focus-visible{ outline:2px solid var(--venom); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }