:root{color-scheme:dark;--fg:#dfdfda;--dim:#969691;--line:#333}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0a0a0a;color:var(--fg);font:11px 'Courier New',monospace}.page{max-width:1420px;margin:auto;padding:0 48px}a{color:inherit;text-decoration:none}button,.load{font:inherit;letter-spacing:.04em;cursor:pointer}button:focus-visible,a:focus-visible,.load:focus-within{outline:2px solid #eee;outline-offset:5px}header{height:110px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:17px}.brand img{width:56px;height:40px;object-fit:contain}.brand span{font:600 23px Arial,sans-serif;letter-spacing:-1px}.jump{font-size:10px;letter-spacing:.06em}.jump span{margin-left:28px}.caption{display:flex;gap:28px;font-size:10px;letter-spacing:.1em;padding:16px 0;color:#aaa}.right{margin-left:auto}.monitor{position:relative;background:#292929;background-image:linear-gradient(113deg,#ffffff05,transparent 30%,#0005),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff02 3px 4px);padding:20px 25px 15px;border:1px solid #555;box-shadow:inset 2px 2px 2px #ffffff13,inset -3px -3px 6px #000,0 24px 55px #0009;border-radius:5px 5px 9px 9px}.case-label{display:flex;justify-content:space-between;align-items:center;padding:0 7px 17px}.tape{background:#bcbab0;color:#252525;padding:6px 15px;font-size:11px;font-weight:bold;transform:rotate(-1deg);clip-path:polygon(1% 0,99% 3%,100% 95%,0 100%);box-shadow:1px 2px 3px #000}.indicator{font-size:9px;color:#b0b0aa;letter-spacing:.15em}.indicator b{display:inline-block;width:5px;height:5px;border-radius:50%;background:#dba363;margin-left:9px;box-shadow:0 0 5px #e0913944}.bezel{padding:18px;background:linear-gradient(155deg,#090909,#343434 40%,#121212 70%,#414141);border-radius:37px;box-shadow:inset 0 6px 10px #000,inset 0 -1px 2px #9996,0 1px 1px #9993}.glass{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:25px;background:#030303;box-shadow:0 0 12px #000}.glass canvas{display:block;width:100%;height:100%}.glass-shade{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 35px 12px #000b;background:linear-gradient(125deg,#ffffff08,transparent 36%,transparent 80%,#ffffff03)}.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#999,#282828);box-shadow:0 1px 2px #000}.screw:after{content:'';position:absolute;left:1px;right:1px;top:4px;height:1px;background:#111;transform:rotate(-30deg)}.a{left:7px;top:8px}.b{right:7px;top:8px}.c{left:7px;bottom:8px}.d{right:7px;bottom:8px}.transport{display:flex;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid #111;box-shadow:0 1px #ffffff0b}.sources,.actions{display:flex;gap:6px;align-items:center}button,.load{border:1px solid #555;background:#1b1b1b;color:#ccc;padding:10px 13px;border-bottom:3px solid #101010;box-shadow:inset 0 1px #ffffff0b;font-size:10px}button:hover,.load:hover{background:#393939;color:#fff}button[aria-pressed=true]{background:#c2c0b8;color:#171717;border-color:#8a8881;border-bottom-color:#666}.load input{position:absolute;width:1px;height:1px;opacity:0}.control-row{display:flex;align-items:center;padding:22px 0 18px;gap:24px}.knobs{display:grid;grid-template-columns:repeat(4,1fr);flex:1}.control{text-align:center;border-right:1px solid #ffffff0c}.control:last-child{border:0}.control-name{display:block;font-size:10px;letter-spacing:.1em;color:#bdbdb7}.dial{position:relative;display:block;width:83px;height:83px;margin:10px auto;background:repeating-conic-gradient(from -135deg,#999 0deg 1deg,transparent 1deg 22.5deg);border-radius:50%}.disc{position:absolute;inset:9px;border-radius:50%;background:repeating-conic-gradient(#242424 0deg 4deg,#303030 4deg 7deg);box-shadow:0 4px 6px #000a,inset 1px 2px 2px #aaa5;transform:rotate(var(--angle,0deg))}.disc:before{content:'';position:absolute;inset:6px;border-radius:50%;background:linear-gradient(140deg,#424242,#1b1b1b);border:1px solid #111}.disc:after{content:'';position:absolute;top:8px;left:calc(50% - 1px);width:2px;height:16px;background:#deded4}.dial input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ns-resize;touch-action:none}.dial:focus-within{outline:1px solid #eee;outline-offset:5px}output{font-size:10px;color:#aaa}.instructions{min-width:215px;border-left:1px solid #ffffff13;padding-left:28px;font-size:10px}.instructions p{font-size:8px;color:#999;margin:10px 0 16px}.instructions button{padding:7px 0;background:none;border:0;box-shadow:none;text-decoration:underline;text-underline-offset:4px}.plate{border-top:1px solid #111;box-shadow:inset 0 1px #ffffff0c;padding:16px 6px 0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;color:#888}.vents{color:#111;letter-spacing:2px}.under{display:flex;justify-content:space-between;align-items:center;color:#999;padding:20px 0 38px;gap:20px}.under p{margin:0;font-size:11px}.under>span{font-size:8px;letter-spacing:.06em}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2c2c2c;padding:23px 0 30px;font-size:9px;color:#777}.color-strip{width:75px;height:5px;background:linear-gradient(90deg,#eee 0 14%,#ffed00 14% 28%,#00ddeb 28% 42%,#00cf19 42% 56%,#e700e7 56% 70%,#ff2000 70% 84%,#2419ff 84%)}#exit{display:none}.monitor:fullscreen,.monitor.expanded{padding:26px;background-color:#222;display:flex;flex-direction:column;justify-content:center}.monitor:fullscreen .bezel,.monitor.expanded .bezel{width:min(100%,calc((100vh - 110px)*16/9));margin:auto}.monitor:fullscreen .transport,.monitor:fullscreen .control-row,.monitor:fullscreen .plate,.monitor.expanded .transport,.monitor.expanded .control-row,.monitor.expanded .plate{display:none}.monitor:fullscreen #exit,.monitor.expanded #exit{display:block;position:absolute;right:30px;bottom:12px}.monitor.expanded{position:fixed;inset:0;z-index:10}.monitor:fullscreen .case-label,.monitor.expanded .case-label{position:absolute;top:15px;left:32px;right:32px}@media(max-width:760px){.page{padding:0 18px}header{height:85px}.brand span{font-size:20px}.right{display:none}.caption{justify-content:space-between;font-size:8px}.monitor{padding:16px 12px}.bezel{padding:12px;border-radius:25px}.glass{border-radius:17px}.transport{flex-wrap:wrap}.actions{width:100%;justify-content:space-between}.control-row{display:block}.instructions{border:0;padding:20px 0 0;display:flex;align-items:center;justify-content:space-between}.instructions p{display:none}.dial{width:64px;height:64px}.control-name{font-size:8px}.under{display:block;line-height:2}.under>span{display:block;margin-top:8px}.jump{font-size:8px}.jump span{margin-left:8px}.vents{display:none}.plate{font-size:8px}footer{font-size:8px}}

/* Wordmark treatment shared with Mask and Stripe. */
.brand span{font-family:"Arial Black",Arial,sans-serif;font-size:28px;font-weight:1000;letter-spacing:-1.8px;line-height:1;transform:scaleX(1.2);transform-origin:left center;margin-right:38px}.monitor{margin-top:16px;margin-bottom:38px}#status:not([hidden]){color:#bbb;margin:-15px 0 28px}@media(max-width:760px){.brand{gap:10px}.brand img{width:43px;height:32px}.brand span{font-size:20px;letter-spacing:-1.3px;margin-right:25px}.jump{font-size:7px}}@media(max-width:420px){.jump{display:none}}

.case-label{justify-content:flex-end;min-height:23px}.plate{justify-content:center}footer{position:relative}.color-strip{position:absolute;left:50%;transform:translateX(-50%)}

/* Fit the complete desktop composition to the available window. */
@media(min-width:761px){
  .page{width:min(1420px,100vw);max-width:none;zoom:var(--page-scale,1)}
}

/* Compact lower housing gives the picture more of the window. */
.monitor{margin-bottom:14px;padding-bottom:12px}
.transport{padding:11px 0}
.control-row{padding:12px 0 4px}
.dial{width:70px;height:70px;margin:7px auto}
footer{padding:12px 0 14px}
@media(max-width:760px){
  .dial{width:64px;height:64px}
  .instructions{padding-top:10px}
}