@scope(.workbench){*{box-sizing:border-box;margin:0;padding:0}:scope{--paper:#f5f2ec;--ink:#111110;--mute:#66645d;--line:#dcd8cd;--wash:#ece8df;--lime:#d7ff3a;--teal:#7fc7c0;--pink:#f2a7b6;--lav:#c9b6e8;--sand:#e9e4d6;--coral:#ff7a59;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.mono{font-family:var(--font-mono), monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-size:11.5px}.wrap{max-width:1280px;margin:0 auto;padding:0 64px}:scope.still *,:scope.still :before,:scope.still :after{animation-play-state:paused!important}:scope.still .swap{opacity:1;transform:none;animation:none!important}:scope.still h1 em{background-size:100% 100%}:scope.still .obj .par{transition:none}:scope.still .reveal{opacity:1;transition:none;transform:none}:scope.still .bottle{opacity:1;animation:none;transform:none}:scope.still .steps .line{width:100%;transition:none}.hero{grid-template-columns:1fr 1.05fr;align-items:center;gap:48px;padding-top:56px;padding-bottom:48px;display:grid}h1{letter-spacing:-.045em;margin:18px 0 26px;font-size:clamp(48px,5vw,70px);font-weight:900;line-height:1}h1 em{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 0/0% 100%;animation:swipe .8s .3s var(--ease) forwards;margin-left:-4px;padding:0 10px;font-style:normal}@keyframes swipe{to{background-size:100% 100%}}.lede{color:#3a3935;max-width:520px;font-size:18px}.facts{border-top:1px solid var(--line);gap:44px;margin-top:36px;padding-top:22px;display:flex}.facts b{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:38px;font-weight:900;line-height:1.1;display:block}.hint{align-items:center;gap:10px;margin-top:28px;display:flex}.hint i{background:var(--lime);border:2px solid var(--ink);border-radius:50%;width:10px;height:10px;animation:1.6s ease-out infinite ping}@keyframes ping{0%{box-shadow:0 0 #11111059}to{box-shadow:0 0 0 12px #11111000}}.bench{border:2px solid var(--ink);background:#fff;border-radius:6px;overflow:hidden}.stage{aspect-ratio:600/470;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/40px 40px, linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/40px 40px,#fbfaf6;position:relative}.stage svg{width:100%;height:100%;position:absolute;inset:0}.stage .corner{z-index:2;position:absolute;top:12px;left:14px}.stage .corner2{z-index:2;position:absolute;top:12px;right:14px}.obj{cursor:pointer;outline:none}.obj .par{transition:transform .5s var(--ease)}.obj .flo{transform-box:fill-box;transform-origin:50%;animation:float var(--d,6s) ease-in-out infinite;animation-delay:var(--dl,0s)}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-10px) rotate(var(--r,2deg))}}.obj .ring{fill:none;stroke:var(--ink);stroke-width:2px;stroke-dasharray:6 7;opacity:0;transform-box:fill-box;transform-origin:50%;transition:opacity .3s;animation:14s linear infinite spin}.obj.on .ring,.obj:hover .ring,.obj:focus-visible .ring{opacity:1}.obj .tag{opacity:0;transition:opacity .3s}.obj.on .tag{opacity:1}@keyframes spin{to{transform:rotate(360deg)}}.led{animation:2.8s ease-in-out infinite led}@keyframes led{0%,to{opacity:.25}50%{opacity:1}}.drop{animation:2.4s ease-in infinite drop}@keyframes drop{0%,20%{opacity:0;transform:translateY(0)}30%{opacity:1}85%{opacity:1;transform:translateY(46px)}to{opacity:0;transform:translateY(52px)}}.wave{stroke-dasharray:8 6;animation:1.2s linear infinite dash}@keyframes dash{to{stroke-dashoffset:-28px}}.roll{animation:.9s linear infinite dash}.shine{animation:4s ease-in-out infinite shine}@keyframes shine{0%,60%,to{opacity:0}70%{opacity:.9}}.readout{background:var(--ink);color:var(--paper);border-top:2px solid var(--ink);grid-template-columns:auto 1fr auto;align-items:center;gap:22px;min-height:132px;padding:20px 24px;display:grid}.readout .num{letter-spacing:-.05em;color:var(--lime);font-variant-numeric:tabular-nums;min-width:150px;font-size:68px;font-weight:900;line-height:.9}.readout .num small{letter-spacing:0;margin-left:4px;font-size:20px}.readout .mono{color:#a19f97}.readout h3{letter-spacing:-.02em;margin:2px 0 4px;font-size:20px;font-weight:800}.readout p{color:#cfccc3;font-size:14px;line-height:1.45}.readout a{background:var(--lime);width:44px;height:44px;color:var(--ink);transition:transform .25s var(--ease);border-radius:50%;place-items:center;font-weight:900;display:grid}.readout a:hover{transform:rotate(-45deg)}.readout .swap{animation:swap .45s var(--ease)}@keyframes swap{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.dots{background:var(--ink);border-top:1px solid #2c2c2a;gap:6px;padding:12px 24px;display:flex}.dots button{background:#3a3a37;border-radius:2px;flex:1;height:3px;position:relative;overflow:hidden}.dots button.on:after{content:"";background:var(--lime);transform-origin:0;transform:scaleX(var(--p,1));position:absolute;inset:0}:scope:not(.motion-ready) .dots button.on:after,.bench.hold .dots button.on:after{transform:none}@keyframes fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.marq{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--lime);white-space:nowrap;overflow:hidden}.marq .track{animation:38s linear infinite marq;display:inline-flex}.marq:hover .track{animation-play-state:paused}.marq span{letter-spacing:-.01em;align-items:center;gap:14px;padding:14px 26px;font-size:17px;font-weight:800;display:inline-flex}.marq span b{font-size:22px;font-weight:900}.marq span:after{content:"";background:var(--ink);border-radius:50%;width:8px;height:8px;margin-left:26px}@keyframes marq{to{transform:translate(-50%)}}.sec{padding-top:88px;padding-bottom:12px}.sec-head{justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px;display:flex}.sec-head h2{letter-spacing:-.04em;margin-top:10px;font-size:48px;font-weight:900;line-height:1}.sec-head p{color:#4a4944;max-width:420px;font-size:15px}.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}:scope.motion-ready:not(.still) .reveal:not(.in){opacity:0;transform:translateY(28px)}.reveal.in{opacity:1;transform:none}.idle *{animation-play-state:paused!important}.tabs{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}.tab{border:2px solid var(--ink);border-radius:999px;align-items:center;gap:8px;padding:9px 16px;font-size:14px;font-weight:700;transition:background .2s;display:flex}.tab:hover{background:var(--wash)}.tab[aria-selected=true]{background:var(--ink);color:var(--paper)}.tab[aria-selected=true] .mono{color:var(--lime)}.tab .mono{font-size:10.5px}.grid{grid-template-rows:auto auto;grid-template-columns:1.35fr 1fr 1fr;gap:18px;display:grid}.card{border:2px solid var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease);background:#fff;border-radius:6px;flex-direction:column;display:flex;position:relative;overflow:hidden}.card:hover{box-shadow:8px 8px 0 var(--ink);transform:translate(-4px,-4px)}.card.big{grid-row:span 2}.card .art{border-bottom:2px solid var(--ink);background:var(--bg,var(--wash));height:170px;position:relative;overflow:hidden}.card.big .art{height:330px}.card .art svg{width:100%;height:100%;transition:transform .6s var(--ease);position:absolute;inset:0}.card:hover .art svg{transform:scale(1.06)rotate(-2deg)}.card .art .stat{letter-spacing:-.05em;background:var(--paper);border:2px solid var(--ink);border-radius:4px;padding:4px 10px 6px;font-size:44px;font-weight:900;line-height:1;position:absolute;bottom:12px;left:16px}.card.big .art .stat{font-size:72px}.card .art .stat small{letter-spacing:0;margin-left:4px;font-size:.32em}.card .body{flex-direction:column;flex:1;padding:18px 20px 20px;display:flex}.card h3{letter-spacing:-.02em;margin:8px 0;font-size:19px;font-weight:800;line-height:1.2}.card.big h3{letter-spacing:-.035em;font-size:30px}.card p{color:#4a4944;font-size:14px}.card .take{justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;font-size:14px;font-weight:700;display:flex}.card .take i{border:2px solid var(--ink);width:34px;height:34px;transition:.3s var(--ease);border-radius:50%;place-items:center;font-style:normal;display:grid}.card:hover .take i{background:var(--lime);transform:rotate(-45deg)}.grid.swap .card{animation:cardin .5s var(--spring) both}.grid.swap .card:nth-child(2){animation-delay:60ms}.grid.swap .card:nth-child(3){animation-delay:.12s}.grid.swap .card:nth-child(4){animation-delay:.18s}.grid.swap .card:nth-child(5){animation-delay:.24s}@keyframes cardin{0%{opacity:0;transform:translateY(22px)scale(.97)}to{opacity:1;transform:none}}.lab{border:2px solid var(--ink);background:#fff;border-radius:6px;grid-template-columns:repeat(5,1fr);display:grid;overflow:hidden}.spec{border-right:2px solid var(--ink);flex-direction:column;transition:background .25s;display:flex}.spec:last-child{border-right:0}.spec:hover{background:var(--wash)}.spec .pic{border-bottom:1px solid var(--line);height:190px;position:relative}.spec .pic svg{width:100%;height:100%}.spec .info{padding:16px 18px 20px}.spec b{letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin:8px 0 6px;font-size:40px;font-weight:900;line-height:1;display:block}.spec b small{letter-spacing:0;color:var(--mute);margin-left:4px;font-size:14px;font-weight:600}.spec h3{font-size:17px;font-weight:800;line-height:1.2}.spec p{color:#4a4944;margin-top:6px;font-size:13px}.spec .verdict{font:500 10.5px var(--font-mono), monospace,monospace;text-transform:uppercase;border:1.5px solid var(--ink);margin-top:12px;padding:5px 8px;display:inline-block}.spec .verdict.good{background:var(--lime)}.spec .verdict.none{background:var(--ink);color:var(--paper)}.lab-note{margin-top:12px}.shelf-tabs{gap:8px;display:flex}.chip{border:2px solid var(--ink);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700}.chip:hover{background:var(--wash)}.chip[aria-selected=true]{background:var(--ink);color:var(--lime)}.shelfwrap{position:relative}.shelf{scroll-snap-type:x proximity;cursor:grab;scrollbar-width:thin;gap:18px;padding:4px 4px 26px;display:flex;overflow-x:auto}.shelf.drag{cursor:grabbing;scroll-snap-type:none}.shelf.drag a{pointer-events:none}.plank{background:var(--ink);z-index:-1;border-radius:3px;height:14px;margin-top:-30px;position:relative}.tube{scroll-snap-align:start;border:2px solid var(--ink);min-height:380px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);background:#fff;border-radius:6px;flex-direction:column;flex:0 0 280px;padding:22px;display:flex;position:relative}.tube:hover{box-shadow:8px 8px 0 var(--ink);transform:translate(-4px,-4px)}.tube .shape{border-bottom:1px solid var(--line);justify-content:center;align-items:end;height:168px;margin-bottom:18px;padding-top:38px;display:flex}.bottle{border:2px solid var(--ink);background:var(--paper);border-radius:8px 8px 22px 22px;width:64px;height:110px;position:relative}:scope.motion-ready:not(.still) .reveal:not(.in) .bottle{opacity:0;transform:translateY(-120px)}:scope.motion-ready:not(.still) .in .bottle{animation:land .9s var(--spring) backwards;animation-delay:calc(var(--i)*90ms)}@keyframes land{0%{opacity:0;transform:translateY(-120px)}to{opacity:1;transform:none}}.bottle .cap{border:2px solid var(--ink);background:var(--ink);width:28px;height:18px;transition:transform .4s var(--spring);border-bottom:0;margin-left:-14px;position:absolute;top:-18px;left:50%}.bottle .lbl{background:var(--c);height:24px;position:absolute;top:32px;left:8px;right:8px}.bottle:after{content:"";opacity:.7;background:#fff;border-radius:3px;width:6px;height:70px;position:absolute;top:10px;left:8px}.tube:hover .bottle .cap{transform:translateY(-10px)rotate(-18deg)}.tube:hover .bottle{animation:.6s wobble}@keyframes wobble{0%,to{transform:none}30%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}.bottle.wand{border-radius:6px;width:34px;height:120px}.bottle.wand .cap{border-radius:6px 6px 0 0;width:34px;height:44px;margin-left:-17px;top:-46px}.bottle.wand .lbl{height:30px;top:40px;left:5px;right:5px}.bottle.wand:after{width:4px;height:60px;left:5px}.tube .score{letter-spacing:-.05em;font-variant-numeric:tabular-nums;font-size:54px;font-weight:900;line-height:1}.tube .score small{letter-spacing:0;color:var(--mute);margin-left:4px;font-size:16px;font-weight:600}.tube h3{margin:10px 0 6px;font-size:18px;font-weight:800;line-height:1.25}.tube p{color:#4a4944;font-size:13.5px}.tube .flag{font:500 10px/1 var(--font-mono), monospace,monospace;text-transform:uppercase;border:1.5px solid var(--ink);background:var(--lime);padding:6px 8px;position:absolute;top:14px;left:14px}.tube .flag.warn{background:var(--ink);color:var(--paper)}.shelf-set{display:none}.shelf-set.on{display:block}.drag-hint{align-items:center;gap:10px;margin-top:6px;display:flex}.drag-hint i{background:var(--ink);width:26px;height:2px;animation:1.6s ease-in-out infinite nudge;display:inline-block;position:relative}@keyframes nudge{50%{transform:translate(8px)}}.steps{counter-reset:s;grid-template-columns:repeat(3,1fr);display:grid;position:relative}.steps .line{background:var(--ink);width:100%;height:2px;transition:width 1.4s var(--ease);position:absolute;top:0;left:0}:scope.motion-ready:not(.still) .reveal:not(.in) .steps .line{width:0}.step{counter-increment:s;padding:28px 28px 32px 0;position:relative}.step+.step{border-left:1px solid var(--line);padding-left:28px}.step:before{content:"0" counter(s);letter-spacing:-.05em;color:#0000;-webkit-text-stroke:2px var(--ink);font-size:72px;font-weight:900;line-height:1;transition:color .3s;display:block}.step:hover:before{color:var(--lime)}.step h3{letter-spacing:-.02em;margin:14px 0 8px;font-size:22px;font-weight:800;line-height:1.2}.step p{color:#4a4944;font-size:15px}.step .go{border-bottom:2px solid var(--lime);margin-top:14px;font-weight:700;display:inline-block}.index{grid-template-columns:260px 1fr;gap:40px;padding-bottom:96px;display:grid}.filters{flex-direction:column;align-self:start;gap:6px;display:flex;position:sticky;top:20px}.filters button{text-align:left;border-radius:3px;justify-content:space-between;padding:10px 14px;font-weight:600;display:flex}.filters button:hover{background:var(--wash)}.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.search{border:2px solid var(--ink);width:100%;font:inherit;background:#fff;border-radius:3px;margin-bottom:10px;padding:12px 14px}.rows a{border-bottom:1px solid var(--line);grid-template-columns:140px 1fr 110px;align-items:baseline;gap:20px;padding:15px 0;display:grid}.rows a h4{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 85%/0% 40%;transition:background-size .3s var(--ease);font-size:17px;font-weight:700;display:inline}.rows a:hover h4{background-size:100% 40%}.rows a .mono:last-child{text-align:right}.rows a.hide{display:none}footer{background:var(--ink);color:#bdbab1;padding:40px 0;font-size:14px}footer b{color:var(--paper)}@media (max-width:900px){.wrap{padding:0 18px}nav ul{display:none}.hero{grid-template-columns:1fr;gap:28px;padding-top:32px}h1{font-size:50px}.readout{grid-template-columns:1fr auto;gap:12px}.readout .num{grid-column:1/-1;font-size:54px}.sec{padding-top:64px}.sec-head{flex-direction:column;align-items:start}.sec-head h2{font-size:36px}.grid{grid-template-columns:1fr}.card.big{grid-row:auto}.card.big .art{height:230px}.lab{scroll-snap-type:x mandatory;grid-template-columns:repeat(5,78%);overflow-x:auto}.spec{scroll-snap-align:start}.tube{flex-basis:78%}.steps{grid-template-columns:1fr}.step+.step{border-left:0;padding-left:0}.index{grid-template-columns:1fr}.filters{flex-flow:wrap;position:static}.rows a{grid-template-columns:1fr}.rows a .mono:last-child{text-align:left}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}h1 em{background-size:100% 100%}.reveal,.reveal:not(.in),.bottle{opacity:1!important;transform:none!important}.steps .line{width:100%!important}.dots button.on:after,.obj .par{transform:none!important}}.tab[aria-pressed=true]{background:var(--ink);color:var(--paper)}.chip[aria-pressed=true]{background:var(--ink);color:var(--lime)}.dots button{border-radius:2px;height:24px}.dots button:before{content:"";background:#3a3a37;height:3px;position:absolute;inset:10px 0}.dots button.on:after{inset:10px 0}.motion-bar{justify-content:flex-end;padding-top:16px;display:flex}.pause{border:2px solid var(--ink);font:500 11px var(--font-mono);text-transform:uppercase;border-radius:999px;padding:6px 12px}.pause:hover{background:var(--ink);color:var(--lime)}.shelf{touch-action:pan-x pan-y}.shelf-set[hidden]{display:none}:scope{font:16px/1.6 var(--font-sans),sans-serif;word-spacing:normal}h1,h2,h3{word-spacing:normal}.mono{font-family:var(--font-mono),monospace}.big{color:var(--ink);font-size:inherit;line-height:inherit;margin:0}.card.big h3{font-size:30px}.shelf-tabs{flex-wrap:wrap}.rows h3{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 85%/0% 40%;transition:background-size .3s var(--ease);margin:0;font-size:17px;font-weight:700;display:inline}.rows a:hover h3{background-size:100% 40%}.shelf-set:not([hidden]){display:block}.search{color:var(--ink)}}
