@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/nunito-latin-700-normal-Dort48En.woff2) format("woff2"),url(/assets/nunito-latin-700-normal-OcDqTBcA.woff) format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:800;src:url(/assets/nunito-latin-800-normal-Dz8SOQK_.woff2) format("woff2"),url(/assets/nunito-latin-800-normal-D-J0wlBY.woff) format("woff")}:root{--felt: #2f4f3a;--felt-2: #24402e;--wood: #b07d4f;--wood-2: #8a5e36;--wood-3: #c99a6b;--cream: #f1e6cf;--cream-2: #e2d3b3;--ink: #26201a;--brass: #cfae5a;--led: #ffb347;--mark-ink: var(--cream);--sans: Nunito, "Segoe UI Rounded", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.06),transparent 60%),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 6px),linear-gradient(180deg,var(--felt),var(--felt-2));background-attachment:fixed;color:var(--cream);font:700 16px/1.45 var(--sans);display:flex;flex-direction:column;align-items:center}.hero{padding:84px 20px 0;text-align:center}.plate{display:inline-flex;align-items:center;gap:18px;padding:10px 18px;background:linear-gradient(180deg,#e2c57a,var(--brass) 55%,#a8883e);border-radius:8px;box-shadow:0 2px #6e5620,0 8px 20px -10px #000000b3,inset 0 1px #ffffff80;color:#3a2c0c}.plate h1{margin:0;font:800 clamp(30px,5.4vw,46px)/1 var(--sans);letter-spacing:.06em;text-transform:lowercase;text-shadow:0 1px 0 rgba(255,255,255,.45)}.screw{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d6,#7c6324);box-shadow:inset 0 0 0 1px #00000040;position:relative}.screw:after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:#5a4616;transform:rotate(-30deg)}.mixer{width:100%;max-width:1040px;padding:22px 20px 0;display:flex;flex-direction:column;align-items:center}.scope{width:100%;padding:12px 12px 8px;background:linear-gradient(180deg,var(--wood-3),var(--wood));border-radius:16px 16px 4px 4px;box-shadow:0 10px 30px -18px #000c,inset 0 1px #ffffff40;position:relative;z-index:1}.glass{position:relative;height:150px;border-radius:10px 10px 3px 3px;background:radial-gradient(120% 100% at 50% 100%,#1a1408,#0b0906 70%);box-shadow:inset 0 0 0 2px #00000059,inset 0 0 40px #000c;overflow:hidden}.glass canvas{width:100%;height:100%;display:block}.grille{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,#0000 0 3px,#0000002e 3px 4px),radial-gradient(70% 50% at 30% 10%,rgba(255,255,255,.08),transparent 70%)}.rim{height:8px;margin:8px -18px -14px;background:linear-gradient(180deg,var(--wood-3),var(--wood-2));border-radius:4px;box-shadow:0 4px 10px -4px #0009}.box{width:100%;margin-top:16px;display:grid;grid-template-columns:1fr 130px;gap:16px;padding:20px 18px 24px;border-radius:18px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 3px,transparent 3px 9px),linear-gradient(180deg,var(--wood-3),var(--wood) 20%,var(--wood-2));box-shadow:0 30px 60px -30px #000000e6,inset 0 2px #ffffff59,inset 0 -4px #00000040;position:relative}.strips{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:14px 6px}.strip{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}.led{width:9px;height:9px;border-radius:50%;background:#3a2a16;box-shadow:inset 0 1px 2px #0009;transition:background .2s ease,box-shadow .2s ease}.on .strip .led,.poster .strip .led{background:color-mix(in srgb,var(--led) calc(var(--v) * 100%),#3a2a16);box-shadow:0 0 calc(var(--v) * 12px) calc(var(--v) * 2px) #ffb347bf,inset 0 1px 2px #0006}.track{position:relative;width:34px;height:150px;border-radius:7px;background:linear-gradient(180deg,#2a1d10,#1d140b);box-shadow:inset 0 2px 6px #000c,0 1px #ffffff40}.track .fill{position:absolute;left:14px;width:6px;bottom:10px;height:calc(var(--v) * 130px);border-radius:3px;background:linear-gradient(180deg,var(--led),#d98c1f);opacity:.85;box-shadow:0 0 10px #ffb34780}.track .knob{position:absolute;left:3px;width:28px;height:22px;bottom:calc(var(--v) * 130px - 1px);border-radius:5px;background:linear-gradient(180deg,#fff8e8,var(--cream) 50%,var(--cream-2));box-shadow:0 3px #9c8c6c,0 6px 10px -4px #000000b3,inset 0 1px #fff;pointer-events:none}.track .knob:after{content:"";position:absolute;left:5px;right:5px;top:9px;height:3px;background:#5a4a30;border-radius:2px}.track input{position:absolute;left:50%;top:50%;width:150px;height:34px;margin:0;transform:translate(-50%,-50%) rotate(-90deg);opacity:0;cursor:grab}.track input:active{cursor:grabbing}.label{text-align:center;line-height:1.1;max-width:100%}.label b{display:block;font-size:12px;color:#2a1d10;text-shadow:0 1px 0 rgba(255,255,255,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side{display:flex;flex-direction:column;align-items:center;gap:18px;justify-content:flex-start;padding-top:6px}.power{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:#2a1d10;font:800 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer}.power .toggle{width:54px;height:96px;border-radius:12px;background:linear-gradient(180deg,#2a1d10,#1d140b);box-shadow:inset 0 2px 6px #000c,0 1px #ffffff40;position:relative;display:block}.power .toggle i{position:absolute;left:5px;right:5px;height:40px;top:48px;border-radius:8px;background:linear-gradient(180deg,#fff8e8,var(--cream) 50%,var(--cream-2));box-shadow:0 3px #9c8c6c,inset 0 1px #fff;transition:top .15s ease}.power[aria-pressed=true] .toggle i{top:8px;background:linear-gradient(180deg,#ffd17a,var(--led) 50%,#d98c1f);box-shadow:0 3px #7a4d0c,0 0 14px #ffb34799}.power:disabled{cursor:default}.timer{text-align:center}.timer small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#2a1d10;margin-bottom:6px}.timer-keys{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.timer-keys button{font:800 12px/1 var(--sans);padding:7px 0;border:0;border-radius:6px;background:linear-gradient(180deg,#fff8e8,var(--cream-2));color:#2a1d10;box-shadow:0 2px #9c8c6c;cursor:pointer}.timer-keys button[aria-pressed=true]{background:linear-gradient(180deg,#ffd17a,var(--led));box-shadow:0 1px #7a4d0c;transform:translateY(1px)}.feet{position:absolute;left:24px;right:24px;bottom:-10px;display:flex;justify-content:space-between}.feet i{width:24px;height:10px;border-radius:0 0 6px 6px;background:#1d140b}.notes{max-width:640px;padding:34px 20px 100px;text-align:center;color:var(--cream-2);font-weight:700;font-size:14px;opacity:.85}.poster .hero{padding-top:16px}.poster .plate h1{font-size:32px}.poster .mixer{padding-top:10px;max-width:770px}.poster .scope{padding:8px 8px 6px}.poster .glass{height:86px}.poster .box{margin-top:10px;grid-template-columns:1fr 80px;padding:12px 12px 16px;gap:10px}.poster .strips{gap:8px 4px}.poster .track{height:96px;width:24px}.poster .track .fill{height:calc(var(--v) * 80px);left:9px;bottom:8px}.poster .track .knob{width:20px;left:2px;height:16px;bottom:calc(var(--v) * 80px - 1px)}.poster .track .knob:after{top:6px;left:4px;right:4px;height:2px}.poster .label b{font-size:9px}.poster .led{width:6px;height:6px}.poster .power .toggle{width:36px;height:60px}.poster .power .toggle i{height:24px;top:30px}.poster .power[aria-pressed=true] .toggle i{top:5px}.poster .power b{font-size:10px}.poster .timer{display:none}@media(max-width:900px){.strips{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 6px}}@media(max-width:700px){.hero{padding-top:70px}.box{grid-template-columns:1fr}.strips{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px}.track{height:120px}.track .fill{height:calc(var(--v) * 100px)}.track .knob{bottom:calc(var(--v) * 100px - 1px)}.track input{width:120px}.side{flex-direction:row;justify-content:center;gap:28px}.power .toggle{height:76px}.power .toggle i{top:32px;height:32px}.power[aria-pressed=true] .toggle i{top:6px}.glass{height:110px}}.poster .strips{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px 4px}.poster .strip:nth-child(n+11){display:none}.poster .box{grid-template-columns:1fr 80px}
