/* Shared chrome for /lab pages (toys also inline their own styles). Loads after /styles.css. */
.labnav{border-bottom:1.5px solid var(--line);background:var(--paper)}
.labnav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.labnav a{text-decoration:none}
.labnav__links{display:flex;gap:18px;font:600 15px/1 var(--body)}
.labnav__links a:hover{text-decoration:underline;text-underline-offset:5px}
.labhead{padding:clamp(48px,7vw,88px) 0 24px}
.labhead .h2{margin-bottom:16px}
.labhead p{max-width:60ch;color:var(--ink-2)}
.labgrid{list-style:none;margin:0;padding:0 0 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.toy{padding:clamp(32px,5vw,64px) 0 72px}
.toy__card{background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);padding:clamp(20px,4vw,40px);max-width:760px;margin:0 auto}
.toy__meta{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.toy__title{font:800 clamp(30px,5vw,48px)/1.02 var(--display);letter-spacing:-.03em;margin:0 0 12px}
.toy__sub{color:var(--ink-2);margin:0 0 28px}
.toy__foot{max-width:760px;margin:24px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:500 14px/1.5 var(--mono);color:var(--muted)}
.toy__foot a{color:var(--ink);font-weight:700}
.labfoot{border-top:1.5px solid var(--line);padding:24px 0 40px;font:500 13px/1.5 var(--mono);color:var(--muted)}
.labnav__links a{white-space:nowrap}
@media (max-width:480px){.labnav .brand__name{display:none}.labnav__links{gap:14px;font-size:14px}}
.hd{margin:22px 0 0;padding:16px 18px;border:1.5px dashed var(--ink);border-radius:16px;background:var(--paper);text-align:left}
.hd__kicker{font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.hd__trail{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hd__step{display:grid;grid-template-columns:28px 1fr;gap:8px;font:500 14px/1.45 var(--body);animation:hdIn .3s ease}
.hd__icon{font-size:18px;line-height:22px}
.hd__final{margin:12px 0 0;font:700 17px/1.35 var(--display);background:var(--yellow);border-radius:10px;padding:10px 12px}
.hd__conf{margin:8px 0 0;font:500 12px var(--mono);color:var(--muted)}
.hd__link{font:600 13px var(--mono);color:var(--ink)}
@keyframes hdIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.labcard__by,.toy__by{font:600 12px/1.3 var(--mono);color:var(--muted)}
.toy__by{margin:-18px 0 24px}

/* ===================== Lab index: mad-scientist lab ===================== */
.lab{--yellow-l:#F4E04D;--pink-l:#FF9DB2;--blue-l:#8EA2FF;--green-l:#9BE38B;--glass:rgba(255,255,255,.55)}
.fine{font:500 12px/1.5 var(--mono);color:var(--muted);margin:14px 0 0}
.sechead{margin-bottom:26px}
.labhero{padding:clamp(40px,6vw,80px) 0 clamp(28px,4vw,48px);background:radial-gradient(1200px 400px at 80% 0,rgba(244,224,77,.35),transparent 60%)}
.labhero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.labhero__title{font:800 clamp(40px,6.4vw,76px)/.98 var(--display);letter-spacing:-.04em;margin:0 0 18px}
.labhero__sub{max-width:52ch;color:var(--ink-2);margin:0 0 26px}
.labhero__cta{display:flex;flex-wrap:wrap;gap:12px}
/* apparatus */
.apparatus{position:relative;height:300px;display:flex;align-items:flex-end;justify-content:center;gap:18px;padding-bottom:26px}
.apparatus__base{position:absolute;left:4%;right:4%;bottom:12px;height:16px;background:var(--ink);border-radius:8px}
.apparatus__label{position:absolute;left:0;right:0;bottom:-18px;margin:0;text-align:center;font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tube{position:relative;width:38px;border:3px solid var(--ink);border-top:0;border-radius:0 0 22px 22px;background:var(--glass);overflow:hidden}
.tube::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h,60%);background:var(--c,var(--pink));border-top:3px solid var(--ink);animation:slosh 3.2s ease-in-out infinite}
.tube--a{height:170px;--c:var(--pink-l);--h:58%}
.tube--b{height:210px;--c:var(--blue-l);--h:44%}
.tube--c{height:140px;--c:var(--green-l);--h:70%}
.tube i,.flask__body i,.jar__glass span{position:absolute;bottom:6px;width:9px;height:9px;border:2px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.7);animation:bubble 2.6s ease-in infinite;opacity:0;z-index:1}
.tube i:nth-child(1){left:6px;animation-delay:.2s}.tube i:nth-child(2){left:16px;animation-delay:1.1s;width:6px;height:6px}.tube i:nth-child(3){left:10px;animation-delay:1.9s}
.flask{position:relative;width:150px;height:240px;display:flex;flex-direction:column;align-items:center}
.flask__neck{width:44px;height:78px;border:3px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;background:var(--glass)}
.flask__body{position:relative;width:150px;height:162px;border:3px solid var(--ink);border-radius:50% 50% 30px 30px/40% 40% 30px 30px;background:linear-gradient(to top,var(--yellow-l) 0 58%,var(--glass) 58%);overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.flask__body::after{content:"";position:absolute;left:0;right:0;top:42%;height:10px;background:repeating-radial-gradient(circle at 10px -4px,transparent 0 8px,var(--yellow-l) 8px 9px);opacity:.9}
.flask__body i:nth-child(1){left:30px;animation-delay:0s}.flask__body i:nth-child(2){left:62px;animation-delay:.7s;width:13px;height:13px}.flask__body i:nth-child(3){left:96px;animation-delay:1.3s}.flask__body i:nth-child(4){left:48px;animation-delay:1.9s;width:6px;height:6px}.flask__body i:nth-child(5){left:112px;animation-delay:2.3s}
.flask__egg{position:absolute;top:50px;left:50%;font-size:40px;transform:translateX(-50%);animation:wobble 2.2s ease-in-out infinite;filter:drop-shadow(2px 3px 0 var(--ink))}
@keyframes bubble{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-150px) scale(1.1);opacity:0}}
@keyframes slosh{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes wobble{0%,100%{transform:translateX(-50%) rotate(-8deg)}50%{transform:translateX(-50%) rotate(8deg) translateY(-4px)}}
/* crown */
.crown{padding:8px 0 24px}
.crown__card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--ink);color:#fff;border-radius:24px;padding:22px 26px;box-shadow:6px 6px 0 var(--yellow)}
.crown__card .kicker{color:var(--yellow);margin-bottom:8px}
.crown__icon{font-size:48px;line-height:1;animation:crownbob 2.4s ease-in-out infinite}
.crown__title{font:800 clamp(22px,3vw,32px)/1.08 var(--display);letter-spacing:-.02em;margin:0}
.crown__why{margin:6px 0 0;font:500 13px/1.45 var(--mono);color:#cfc9b8}
@keyframes crownbob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-3px)}}
/* specimen jars */
.shelf{padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px)}
.jars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px 22px}
.jar{position:relative;padding-top:18px;animation:hatch .8s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i) * 110ms + 150ms)}
.jar__lid{position:absolute;top:0;left:18%;right:18%;height:22px;background:var(--ink);border-radius:8px 8px 3px 3px;z-index:2;animation:lidpop .8s ease both;animation-delay:calc(var(--i) * 110ms + 100ms)}
.jar__lid::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-6px;height:8px;background:var(--ink-2);border-radius:4px}
.jar__glass{position:absolute;inset:18px 0 0;border:2.5px solid var(--ink);border-radius:26px 26px 34px 34px;background:linear-gradient(to top,var(--liquid) 0 16%,rgba(255,255,255,.75) 16%);overflow:hidden;box-shadow:6px 6px 0 var(--ink)}
.jar__glass::before{content:"";position:absolute;top:14px;left:12px;width:10px;height:60%;border-radius:10px;background:rgba(255,255,255,.9)}
.jar__glass span:nth-child(1){left:14%;animation-delay:.3s}.jar__glass span:nth-child(2){left:38%;animation-delay:1.2s;width:6px;height:6px}.jar__glass span:nth-child(3){left:66%;animation-delay:.8s}.jar__glass span:nth-child(4){left:86%;animation-delay:2s;width:12px;height:12px}
.jar__toy{position:relative;z-index:1;padding:26px 24px 30px 30px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.jar__day{font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0}
.jar__title{font:800 22px/1.12 var(--display);letter-spacing:-.02em;margin:0}
.jar__title a{text-decoration:none}.jar__title a:hover{text-decoration:underline;text-underline-offset:4px}
.jar__joke{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.jar__by{margin:0;font:600 12px/1.4 var(--mono);color:var(--ink)}
.jar__by span{display:inline-block;background:var(--yellow);border:1.5px solid var(--ink);border-radius:999px;padding:2px 8px;margin-right:4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.jar__row{display:flex;align-items:center;gap:12px;margin-top:4px}
.jar__row .btn{flex:0 0 auto}
.jar__plays{font:600 12px var(--mono);color:var(--muted)}
.jar.is-crowned .jar__glass{box-shadow:6px 6px 0 var(--ink),0 0 0 4px var(--yellow)}
.jar.is-crowned .jar__lid::before{content:"👑";position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:26px}
@keyframes hatch{0%{opacity:0;transform:translateY(36px) scale(.82) rotate(-2deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes lidpop{0%{transform:translateY(40px)}55%{transform:translateY(-16px) rotate(-6deg)}100%{transform:none}}
/* receipt */
.receipt{margin-top:6px;font:500 12px/1.45 var(--mono)}
.receipt summary{cursor:pointer;font-weight:700;list-style:none;display:inline-flex;align-items:center;gap:6px;color:var(--ink);padding:4px 0}
.receipt summary::-webkit-details-marker{display:none}
.receipt summary::before{content:"🧾"}
.receipt summary::after{content:"▾";transition:transform .2s}
.receipt[open] summary::after{transform:rotate(180deg)}
.receipt__paper{margin-top:8px;background:#fffdf6;border:1.5px dashed var(--ink);padding:12px 14px 16px;position:relative;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) bottom/12px 8px repeat-x}
.receipt__head,.receipt__foot{text-align:center;font-weight:700;letter-spacing:.06em;margin:0 0 8px}
.receipt__foot{margin:10px 0 4px;color:var(--muted)}
.receipt__kv{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:0 0 8px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.receipt__kv dt{color:var(--muted)}.receipt__kv dd{margin:0;text-align:right;font-weight:700}
.receipt__trail{margin:0;padding-left:18px;display:grid;gap:4px}
.receipt__total{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed var(--line);margin:10px 0 0;padding-top:8px;font-weight:800}
/* leaderboard + vote */
.board{padding:clamp(56px,7vw,96px) 0}
.board__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:start}
.board__col{background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);padding:clamp(20px,3vw,32px)}
.leaders{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:lb}
.leaders li{counter-increment:lb;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;font:600 15px/1.3 var(--body)}
.leaders li::before{content:counter(lb);width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:800 14px var(--display);background:var(--paper)}
.leaders li.is-top::before{background:var(--yellow);content:"👑";font-size:15px}
.leaders a{text-decoration:none}.leaders a:hover{text-decoration:underline}
.leaders__bar{grid-column:2/4;height:8px;border-radius:8px;background:var(--paper-2);overflow:hidden;margin-top:-4px}
.leaders__bar i{display:block;height:100%;background:var(--ink);border-radius:8px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.leaders__n{font:700 13px var(--mono);color:var(--muted)}
.leaders li.leaders__empty{display:block;color:var(--muted);font:500 14px var(--mono)}
.leaders li.leaders__empty::before{display:none}
.vote__rules{margin:0 0 16px;color:var(--ink-2);font-size:15px}
.ballot{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ballot__item{position:relative;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;border:2px solid var(--ink);border-radius:16px;padding:12px 12px 12px 14px;background:var(--paper);overflow:hidden}
.ballot__fill{position:absolute;inset:0 auto 0 0;width:0;background:rgba(244,224,77,.55);transition:width .9s cubic-bezier(.2,.8,.2,1);z-index:0}
.ballot__item>*:not(.ballot__fill){position:relative;z-index:1}
.ballot__title{font:700 15px/1.3 var(--body);overflow-wrap:anywhere}
.ballot__meta{grid-column:1;font:500 12px/1.3 var(--mono);color:var(--muted)}
.ballot__btn{grid-row:1/3;grid-column:2;font:700 14px/1 var(--display);border:2px solid var(--ink);background:#fff;border-radius:999px;padding:10px 14px;cursor:pointer;white-space:nowrap;min-height:40px}
.ballot__btn:hover:not(:disabled){background:var(--yellow)}
.ballot__btn:disabled{cursor:default;opacity:.55}
.ballot__item.is-mine{background:#fff7c2}
.ballot__item.is-mine .ballot__btn{opacity:1;background:var(--ink);color:#fff}
.ballot__new{display:inline-block;font:700 10px/1 var(--mono);text-transform:uppercase;background:var(--pink);border:1.5px solid var(--ink);border-radius:999px;padding:3px 6px;margin-left:6px;vertical-align:2px}
.ballot__empty{color:var(--muted);font:500 14px var(--mono)}
.vote__msg{min-height:1.4em;margin:12px 0 0;font:600 14px/1.4 var(--mono)}
.vote__msg.is-bad{color:#b3261e}.vote__msg.is-good{color:#1d6b2f}
.suggest{margin-top:20px;border-top:1.5px dashed var(--line);padding-top:18px}
.suggest label{display:block;font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.suggest__row{display:flex;gap:10px}
.suggest__row input{flex:1;min-width:0;font:500 16px/1.3 var(--body);padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);color:var(--ink)}
.suggest__row .btn{flex:0 0 auto}
.suggest__hint{margin:8px 0 0;font:500 12px/1.45 var(--mono);color:var(--muted)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
@media (max-width:900px){.labhero__inner{grid-template-columns:1fr}.apparatus{height:230px;transform:scale(.85);transform-origin:center bottom}.board__grid{grid-template-columns:1fr}}
@media (max-width:560px){.crown__card{grid-template-columns:auto 1fr;padding:18px}.crown__card .btn{grid-column:1/3}.jars{grid-template-columns:1fr}.apparatus{height:200px;gap:12px;transform:scale(.75)}.suggest__row{flex-direction:column}.ballot__btn{padding:9px 12px}}
@media (prefers-reduced-motion:reduce){.jar,.jar__lid,.tube::before,.tube i,.flask__body i,.jar__glass span,.flask__egg,.crown__icon{animation:none!important}.tube i,.flask__body i,.jar__glass span{display:none}}
/* liquid gravity (/assets/liquid.js): canvas liquid replaces the CSS gradients/bubbles once JS is running */
.lq-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.tube.lq-on,.flask__body.lq-on{background:var(--glass,rgba(255,255,255,.55))}
.jar__glass.lq-on{background:rgba(255,255,255,.75)}
.jar__glass.lq-on::before{z-index:1}
.tube.lq-on::before,.flask__body.lq-on::after,.lq-on>i,.lq-on>span:not(.lq-float){display:none}
.lq-float{position:absolute;left:0;top:0;z-index:2;font-size:34px;line-height:1;pointer-events:none;filter:drop-shadow(2px 2px 0 var(--ink));will-change:transform}
.lq-wake{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--yellow);background:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:11px 16px;box-shadow:3px 3px 0 var(--yellow);cursor:pointer;white-space:nowrap;animation:lqIn .35s ease both;transition:opacity .3s,transform .3s}
.lq-wake span{font-size:16px;animation:lqJig 1.6s ease-in-out infinite}
.lq-wake.is-gone{opacity:0;transform:translate(-50%,12px);pointer-events:none}
@keyframes lqIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes lqJig{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.lq-wake,.lq-wake span{animation:none}}
.flask__body:not(.lq-on) .lq-float{left:50%;top:38%;transform:translate(-50%,-50%)}