:root{--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--tex-metal: url(/assets/brushed-metal.webp);--tex-rosewood: url(/assets/rosewood.webp);--tex-desk: url(/assets/walnut-desk.webp);--tex-desk-light: url(/assets/walnut-light.webp);--tex-kraft: url(/assets/kraft.webp);--tex-paper: url(/assets/paper.webp);--tex-cardboard: url(/assets/cardboard.webp);--desk-tint: rgba(28, 14, 6, .62);--lamp: rgba(255, 190, 110, .3);--txt: #f3e6cf;--soft: rgba(243, 230, 207, .72);--ink: #1f1a16;--orange: #ff6a13;--red: #e3311d;--teal: #1fb3a0;--yellow: #ffc531;--blue: #2f68e6;--pen: #1b2a6b;color-scheme:dark}:root[data-lamp=on]{--desk-tint: rgba(255, 236, 205, .12);--lamp: rgba(255, 244, 220, .55);--txt: #2b1a0e;--soft: rgba(43, 26, 14, .78);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html{background:#2a160a;overflow-x:clip}body{margin:0;min-height:100vh;color:var(--txt);overflow-x:hidden;font:16px/1.5 Space Mono,ui-monospace,monospace;background:radial-gradient(1100px 760px at 50% 140px,var(--lamp),transparent 72%),linear-gradient(var(--desk-tint),var(--desk-tint)),var(--tex-desk) center top / 1400px auto repeat;transition:background-color .4s}:root[data-lamp=on] body{background:radial-gradient(1100px 760px at 50% 140px,var(--lamp),transparent 72%),linear-gradient(var(--desk-tint),var(--desk-tint)),var(--tex-desk-light) center top / 1400px auto repeat}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.42))}a{color:inherit}[hidden]{display:none!important}:focus-visible{outline:3px dashed var(--orange);outline-offset:4px}.mat-metal{background-color:#c9c7c1;background-image:linear-gradient(180deg,#ffffff8c,#fff0 18%,#0000000d 70%,#0000002e),var(--tex-metal);background-size:auto,900px auto;background-blend-mode:normal,multiply}.mat-metal-dark{background-color:#2a2a2d;background-image:linear-gradient(180deg,rgba(255,255,255,.1),transparent 14%,rgba(0,0,0,.35)),var(--tex-metal);background-size:auto,900px auto;background-blend-mode:normal,multiply}.mat-rosewood{background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 30%,rgba(0,0,0,.4)),var(--tex-rosewood) center / 600px auto}.mat-paper{background-color:#f3ecda;background-image:var(--noise),linear-gradient(#faf2de8c,#e8dcbe8c),var(--tex-paper);background-size:auto,auto,600px auto}.mat-kraft{background-color:#c79c62;background-image:var(--noise),var(--tex-kraft);background-size:auto,500px auto}.mat-cardboard{background-color:#d8c49d;background-image:var(--noise),linear-gradient(#f0e2c48c,#f0e2c48c),var(--tex-cardboard);background-size:auto,auto,700px auto}.silk{font:700 11px/1 Barlow Condensed,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#26221e}.screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fafafa,#9b9b9b 55%,#4a4a4a);box-shadow:0 1px 1px #0009,inset 0 -1px 1px #0006}.screw:after{content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;margin-top:-1px;background:#3a3a3a;transform:rotate(var(--r, 30deg));box-shadow:0 1px #ffffff80}.jack{display:inline-block;width:30px;height:30px;border-radius:50%;position:relative;isolation:isolate;background:radial-gradient(circle,#050505 0 26%,#555 28% 33%,#d9d9d9 36% 46%,#8b8b8b 50% 60%,transparent 62%)}.jack:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#eee,#777);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);z-index:-1}.masking{display:inline-block;color:#2a2018;font:700 22px/1.2 Caveat,cursive;padding:9px 18px 7px;box-shadow:0 2px 4px #0006;background-color:#eadfbe;background-image:var(--noise),linear-gradient(#f6eed4b3,#e2d5b0b3),var(--tex-paper);clip-path:polygon(0 6%,4% 0,40% 4%,70% 0,100% 3%,97% 50%,100% 96%,60% 100%,30% 96%,0 100%,3% 50%)}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;transition:all .25s;z-index:90;pointer-events:none;background:#06100f;color:#7ff8e6;font:22px VT323,monospace;padding:8px 16px;border-radius:4px;text-shadow:0 0 6px #4fe9d2;box-shadow:0 0 0 2px #000,0 10px 20px #00000080;max-width:calc(100vw - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.knob{--size: 60px;position:relative;width:var(--size);height:var(--size);border-radius:50%;cursor:grab;touch-action:none;flex:none}.knob:active{cursor:grabbing}.knob.big{--size: 96px}.knob>span{position:absolute;border-radius:50%;pointer-events:none}.k-skirt{inset:-14%;background:repeating-radial-gradient(circle,#ffffff12 0 1px,#0000000f 1px 2px),conic-gradient(from 210deg,#7d7d7d,#f2f2f2 10%,#a4a4a4 22%,#e6e6e6,#8a8a8a,#d9d9d9,#7f7f7f 78%,#ededed 90%,#7d7d7d);box-shadow:0 3px 4px #00000073,0 8px 14px #00000040,inset 0 0 0 1px #0000004d,inset 0 1px #ffffffb3}.k-knurl{inset:0;background:radial-gradient(circle,transparent 0 60%,rgba(0,0,0,.55) 100%),repeating-conic-gradient(#0b0b0b 0 2.2deg,#3a3a3a 2.2deg 3.4deg,#0b0b0b 3.4deg 4.5deg);box-shadow:0 2px 2px #0009}.k-cap{inset:15%;background:radial-gradient(circle at 50% 30%,#3b3b3b,#1b1b1b 62%,#101010);box-shadow:inset 0 1px 1px #ffffff38,inset 0 -2px 3px #000000b3,0 0 0 1px #000000b3,0 2px 3px #00000080}.k-line{inset:-14%;border-radius:0!important;background:linear-gradient(#f4f0e6,#f4f0e6) 50% 0 / max(2px,calc(var(--size) * .04)) 42% no-repeat}.k-light{inset:-14%;background:radial-gradient(circle at 34% 24%,#ffffff52,#fff0 38%),radial-gradient(circle at 68% 82%,#00000047,#0000 50%)}.knob.big .k-cap{inset:13%;background:radial-gradient(circle,rgba(255,255,255,.12) 0 6%,transparent 7%),repeating-radial-gradient(circle,#ffffff1a 0 1px,#00000014 1px 2px),conic-gradient(from 200deg,#8a8a8a,#f7f7f7 12%,#a9a9a9,#eee 40%,#8c8c8c 52%,#dedede,#828282 80%,#f2f2f2 92%,#8a8a8a)}.knob.big .k-line{background:linear-gradient(var(--orange),var(--orange)) 50% 0 / 4px 44% no-repeat;filter:drop-shadow(0 0 2px rgba(255,106,19,.6))}.knob:focus-visible{outline:none}.knob:focus-visible .k-skirt{box-shadow:0 0 0 3px var(--orange),0 3px 4px #00000073}.knob.big .k-skirt,.knob.big .k-line,.knob.big .k-light{inset:-9%}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
