*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #F2EDE4;--text: #2A2A2A;--text-sub: rgba(42, 42, 42, .38);--accent: #3B82F6;--radius: 14px;--ease: cubic-bezier(.16, 1, .3, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;font-family:IBM Plex Mono,monospace}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(circle,rgba(42,42,42,.04) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}#app{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:0 28px}.entrance{opacity:0;filter:blur(14px);transform:scale(1.04);animation:focusIn .9s var(--ease) forwards;animation-delay:calc(var(--stagger, 0) * 80ms)}@keyframes focusIn{to{opacity:1;filter:blur(0);transform:scale(1)}}.site-header{text-align:center;padding:100px 0 56px}.logo{font-family:IBM Plex Mono,monospace;font-weight:700;font-size:clamp(60px,12vw,96px);letter-spacing:-3px;color:var(--text);line-height:1;cursor:default;-webkit-user-select:none;user-select:none}.logo .dot{color:var(--accent);display:inline-block;animation:dotBreathe 3s ease-in-out infinite}@keyframes dotBreathe{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.88)}}.tagline{font-weight:300;font-size:clamp(12px,1.6vw,15px);color:var(--text-sub);margin-top:14px;letter-spacing:.08em}.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(220px,auto);grid-template-areas:"a a b c" "d e e f" "g h i i";gap:14px;padding-bottom:32px}.card{background:var(--card-bg, #fff);border-radius:var(--radius);text-decoration:none;color:inherit;display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:pointer;transition:box-shadow .5s var(--ease),transform .5s var(--ease);will-change:transform;border:1px solid rgba(0,0,0,.05)}.card-dark{color:#e8e8e8;border-color:#ffffff0f}.card-light{color:var(--text)}.card:hover{box-shadow:0 20px 60px #0000001a,0 2px 8px #0000000a}.card-dark:hover{box-shadow:0 20px 60px #0000004d}.card:active{transform:perspective(800px) scale(.97)!important;transition-duration:.1s}.card-a{grid-area:a}.card-b{grid-area:b}.card-c{grid-area:c}.card-d{grid-area:d}.card-e{grid-area:e}.card-f{grid-area:f}.card-g{grid-area:g}.card-h{grid-area:h}.card-i{grid-area:i}.card-info{padding:16px 20px 18px;margin-top:auto;position:relative;z-index:2}.card-dark .card-info{background:linear-gradient(to top,var(--card-bg) 60%,transparent)}.card-title{font-weight:700;font-size:14px;line-height:1.3;margin-bottom:3px}.card-dark .card-title{color:#f0f0f0}.card-desc{font-weight:300;font-size:11px;line-height:1.5;font-style:italic;opacity:.5}.vis{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-height:130px}.vis-pb{padding:16px}.pb-receipt{background:#f7f4ed;color:#2a2a2a;border-radius:4px;padding:12px 14px 8px;width:85%;max-width:200px;font-size:9px;font-family:IBM Plex Mono,monospace;border-bottom:2px dashed #d4d0c8;box-shadow:0 2px 12px #0000004d;transition:transform .4s var(--ease)}.card:hover .pb-receipt{transform:translateY(-4px) rotate(-1deg)}.pb-header{text-align:center;font-weight:700;font-size:8px;letter-spacing:.15em;text-transform:uppercase;opacity:.5}.pb-amount{text-align:center;font-size:16px;font-weight:700;margin:6px 0}.pb-divider{text-align:center;font-size:7px;color:#bbb;margin-bottom:6px;letter-spacing:2px}.pb-row{display:flex;align-items:center;gap:6px;margin-bottom:3px}.pb-label{font-size:7px;width:32px;opacity:.5;flex-shrink:0}.pb-bar{flex:1;height:4px;background:#0000000f;border-radius:2px;overflow:hidden}.pb-fill{height:100%;background:#6fcf97;border-radius:2px;width:0;transition:width .6s var(--ease) var(--d)}.card:hover .pb-fill{width:var(--w, 100%)}.pb-barcode{margin-top:8px;height:14px;background:repeating-linear-gradient(90deg,#2A2A2A 0px,#2A2A2A 1px,transparent 1px,transparent 3px);opacity:.15}.vis-gtf{flex-direction:column;gap:10px;padding:18px 14px}.gtf-sample{font-family:Futura,Century Gothic,sans-serif;font-size:20px;font-weight:400;letter-spacing:-.02em;color:#2a2a2a;text-align:center}.gtf-choices{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%}.gtf-btn{font-family:IBM Plex Mono,monospace;font-size:8px;padding:5px 6px;border:1px solid rgba(0,0,0,.08);border-radius:6px;text-align:center;background:#fff;color:#666;transition:all .3s var(--ease)}.card:hover .gtf-correct{background:#34d399;color:#fff;border-color:#34d399}.gtf-pips{display:flex;gap:4px;justify-content:center}.pip{width:6px;height:6px;border-radius:50%;background:#00000014}.pip.done{background:#34d399}.pip.active{background:#2a2a2a;transform:scale(1.3)}.vis-ke{flex-direction:column;gap:6px;padding:12px}.ke-vessel{width:90px;height:100px}.ke-crack{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s var(--ease);filter:drop-shadow(0 0 3px rgba(197,165,90,.4))}.card:hover .ke-crack{stroke-dashoffset:0}.card:hover .c2{transition-delay:.2s}.card:hover .c3{transition-delay:.35s}.ke-counter{font-size:10px;font-weight:300;color:#8a7a6a;opacity:0;transition:opacity .4s var(--ease) .5s}.card:hover .ke-counter{opacity:1}.vis-tav{padding:16px}.jar{position:relative;width:70px}.jar-glass{width:70px;height:90px;border-radius:0 0 12px 12px;border:2px solid rgba(139,115,85,.15);border-top:none;position:relative;overflow:hidden;background:#fffffa66}.jar-brine{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,#8b73551f,#8b73550a);transition:height .8s var(--ease)}.card:hover .jar-brine{height:70%}.jar-lid{width:76px;height:12px;margin-left:-3px;background:#8b7355;border-radius:3px 3px 0 0;position:relative;top:0}.jar-word{position:absolute;font-size:8px;font-weight:300;color:#8b73554d;white-space:nowrap;animation:jarFall 3s ease-in var(--d) infinite;opacity:0}.card:hover .jar-word{color:#8b7355b3}@keyframes jarFall{0%{top:-10%;opacity:0;transform:rotate(0)}20%{opacity:1}80%{opacity:1}to{top:85%;opacity:0;transform:rotate(8deg)}}.vis-hoid{flex-direction:column;gap:10px;padding:16px}.hoid-mockup{width:90%;border-radius:6px;border:1px solid rgba(0,0,0,.08);overflow:hidden;background:#fff}.hoid-chrome{height:18px;background:#e8e8e8;display:flex;align-items:center;gap:3px;padding:0 6px}.hoid-dot{width:5px;height:5px;border-radius:50%}.hoid-dot.r{background:#ff6058}.hoid-dot.y{background:#ffbd2e}.hoid-dot.g{background:#27ca40}.hoid-url{font-size:6px;color:#999;margin-left:6px}.hoid-page{height:55px;padding:6px;display:flex;flex-direction:column;gap:4px}.hoid-el{border-radius:2px}.hoid-el.e1{height:8px;width:60%;background:#0000000f}.hoid-el.e2{height:20px;width:100%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0px,rgba(0,0,0,.03) 30%,transparent 30%,transparent 33%)}.hoid-el.e3{height:6px;width:40%;background:#4a90d933;border-radius:3px}.hoid-guess{display:flex;align-items:center;gap:8px;width:90%}.hoid-year{font-size:18px;font-weight:700;color:#4a90d9;min-width:48px}.hoid-slider{flex:1;height:3px;background:#0000000f;border-radius:2px;position:relative}.hoid-thumb{width:10px;height:10px;border-radius:50%;background:#4a90d9;position:absolute;top:-3.5px;left:30%;transition:left .6s var(--ease);box-shadow:0 1px 4px #4a90d94d}.card:hover .hoid-thumb{left:65%}.vis-ng{position:relative;width:100%;height:100%;overflow:hidden}.ng-sky{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#d4e7f7,#f2ede4 70%)}.ng-ground{position:absolute;bottom:0;left:0;right:0;height:25%;background:linear-gradient(to top,#c5d4a0,#d8e4bc);border-radius:0 0 var(--radius) var(--radius)}.ng-plant{position:absolute;bottom:22%}.p1{left:15%}.p2{left:30%}.p3{left:50%}.p4{left:68%}.p5{left:82%}.ng-stem{width:2px;height:0;background:#6b8a5e;margin:0 auto;transition:height .7s var(--ease);transform-origin:bottom}.ng-stem.s-tall,.ng-stem.s-med,.ng-stem.s-short{height:0}.card:hover .ng-stem{height:30px}.card:hover .s-tall{height:45px;transition-delay:.1s}.card:hover .s-med{height:25px;transition-delay:.15s}.card:hover .s-short{height:15px;transition-delay:.2s}.ng-flower{width:8px;height:8px;border-radius:50%;position:absolute;top:-4px;left:-3px;transform:scale(0);transition:transform .4s var(--ease-bounce)}.card:hover .ng-flower{transform:scale(1);transition-delay:.5s}.f-pink{background:#ffb7c5}.f-yellow{background:#ffe082}.f-purple{background:#ce93d8}.ng-leaf{width:8px;height:5px;background:#7cb342;border-radius:0 60% 60% 0;position:absolute;top:40%;left:3px;transform:scale(0);transition:transform .4s var(--ease-bounce) .4s}.ng-leaf.r{left:auto;right:3px;border-radius:60% 0 0 60%;transform-origin:right}.card:hover .ng-leaf{transform:scale(1)}.ng-butterfly{position:absolute;top:25%;right:20%;font-size:14px;opacity:0;transition:opacity .5s var(--ease) .7s;animation:flutter 2s ease-in-out infinite}.card:hover .ng-butterfly{opacity:1}@keyframes flutter{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}.ng-counter{position:absolute;top:10px;right:12px;font-size:9px;color:#6b8a5e;font-weight:400;opacity:0;transition:opacity .4s var(--ease) .3s}.ng-num{font-weight:700;font-size:16px}.card:hover .ng-counter{opacity:.7}.vis-ct{flex-direction:column;gap:12px;padding:16px}.ct-crosshair{font-size:32px;color:#ffffff1f;font-weight:200;transition:color .4s var(--ease),text-shadow .4s var(--ease);line-height:1}.card:hover .ct-crosshair{color:#ffffff80;text-shadow:0 0 20px rgba(255,107,107,.3)}.ct-swatches{display:flex;gap:6px}.ct-swatch{width:22px;height:22px;border-radius:6px;background:var(--c);opacity:.3;transition:opacity .3s var(--ease),transform .3s var(--ease-bounce),box-shadow .3s var(--ease)}.card:hover .ct-swatch{opacity:1;transform:scale(1.1)}.card:hover .ct-swatch:first-child{box-shadow:0 0 16px #ff6b6b66}.ct-hex{font-size:10px;font-weight:400;color:#ffffff26;transition:color .3s var(--ease)}.card:hover .ct-hex{color:#ffffff80}.vis-wait{flex-direction:column;gap:10px;padding:16px}.wait-time{font-size:28px;font-weight:700;color:#e67e22;text-align:center}.wait-tl{position:relative;display:flex;flex-direction:column;gap:5px;padding-left:16px}.wait-tl-line{position:absolute;left:6px;top:0;bottom:0;width:2px;background:#e67e2226}.wait-item{display:flex;align-items:center;gap:6px;font-size:9px;opacity:0;transform:translate(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}.card:hover .wait-item{opacity:1;transform:translate(0)}.card:hover .wait-item:nth-child(2){transition-delay:.1s}.card:hover .wait-item:nth-child(3){transition-delay:.2s}.card:hover .wait-item:nth-child(4){transition-delay:.3s}.wait-emoji{font-size:14px}.wait-label{color:var(--text-sub)}.vis-rest{flex-direction:column;gap:10px;padding:16px}.rest-wave{display:flex;gap:2px;align-items:center;height:50px}.rest-bar{width:3px;height:var(--h);background:#ffffff1f;border-radius:1.5px;transition:height .8s var(--ease) var(--d),background .5s var(--ease);animation:restPulse 2.5s ease-in-out var(--d) infinite alternate}.card:hover .rest-bar{height:3px!important;background:#ffffff0f;animation:none}@keyframes restPulse{0%{height:var(--h)}to{height:calc(var(--h) * .3)}}.rest-dots{display:flex;gap:8px;justify-content:center}.rest-dot{width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.4;transition:opacity .3s var(--ease) var(--d),transform .3s var(--ease-bounce) var(--d)}.card:hover .rest-dot{opacity:1;transform:scale(1.3)}.rest-label{font-size:10px;color:#fff3;text-align:center;font-weight:300}.site-footer{text-align:center;padding:36px 0 28px;font-size:11px;font-weight:300;color:var(--text-sub);display:flex;align-items:center;justify-content:center;gap:20px}.site-footer .dot{color:var(--accent)}.footer-link{color:var(--text-sub);text-decoration:none;transition:color .3s var(--ease)}.footer-link:hover{color:var(--text)}@media(max-width:768px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(200px,auto);grid-template-areas:"a a" "b c" "d e" "f g" "h i";gap:12px}.site-header{padding:72px 0 40px}.card-title{font-size:13px}}@media(max-width:480px){#app{padding:0 14px}.bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h" "i"}.site-header{padding:52px 0 28px}}::selection{background:var(--accent);color:#fff}