:root{color-scheme:dark;font-family:Inter,Segoe UI,sans-serif;background:#101719;color:#e6e3d6;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#263934,transparent 55%)}main{max-width:1540px;margin:auto;padding:32px 34px}header a{color:#94c5bb;text-decoration:none;font-size:.84rem}.eyebrow{color:#dabb78;letter-spacing:.15em;font-size:.7rem;font-weight:700;margin:25px 0 10px}h1{font:500 clamp(2rem,3.3vw,3.5rem)/1.13 Georgia,serif;margin:0 0 16px}h2{font:500 1.7rem Georgia,serif;margin:0 0 10px}.intro{max-width:850px;color:#b7c5c4;line-height:1.6;margin-bottom:28px}button,select,.file{background:#1a272a;color:#e3e6de;border:1px solid #536d66;border-radius:7px;padding:9px 12px;font:inherit;font-size:.83rem}button,.file{cursor:pointer}button:hover,.file:hover{border-color:#e0c98e;background:#243637}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e5c778;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:13px 15px;border:1px solid #415750;border-radius:10px;background:#141f22;margin-bottom:9px}.controls label{display:flex;align-items:center;gap:9px;font-size:.8rem;color:#c2cdcc}.file input{display:none}#status{font-size:.76rem;color:#a3c4ba;margin-left:auto}#density-value{width:2ch;font-variant-numeric:tabular-nums}input[type=range]{accent-color:#9bcac0;width:120px}.views{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}figure{margin:0;min-width:0;border:1px solid #4a625a;border-radius:14px;overflow:hidden;background:#0c1317}.frame{position:relative;aspect-ratio:1.5;display:grid;place-items:center;background:#091317}.frame canvas{width:100%;height:100%;display:block}.frame canvas[hidden]{display:none}.output #curves{position:absolute;inset:0;background:#0a1519}figcaption{padding:13px 16px;display:flex;gap:12px;justify-content:space-between;font-size:.76rem;flex-wrap:wrap;border-top:1px solid #31433e}figcaption b{color:#e8cf97}figcaption span{color:#a9bbb8;overflow-wrap:anywhere}.explanation{min-height:3em;line-height:1.6;color:#bfd0ca;font-size:.87rem;padding:0 3px}.error{padding:15px;background:#471e21;border:1px solid #ce7777;white-space:pre-wrap}.export{border:1px solid #7a7151;border-radius:14px;display:grid;grid-template-columns:1fr auto;gap:36px;padding:22px 26px;background:linear-gradient(125deg,#292820,#152125)}.export .eyebrow{margin:0 0 12px}.export p:not(.eyebrow){max-width:720px;color:#bdc8c2;font-size:.86rem;line-height:1.6;margin:0}.export-actions{display:flex;flex-direction:column;gap:10px;justify-content:center;min-width:240px}.export-actions label{font-size:.74rem;color:#b8c9c4}.export-actions span{max-width:280px;font-size:.74rem;color:#d6c38f}#export{background:#514b32;border-color:#a38d55}#svg{border-color:#577970}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:30px 0}.notes span{color:#cfbb83;font-size:.65rem;letter-spacing:.14em}.notes h3{font-size:1rem;margin:12px 0}.notes p,footer{font-size:.79rem;line-height:1.6;color:#aebeb8}footer{border-top:1px solid #34453e;padding-top:18px}code{color:#d7c597}@media(max-width:900px){main{padding:23px 18px}.views,.notes,.export{grid-template-columns:1fr}.export{gap:20px}.notes{gap:12px}#status{width:100%;margin:0}.export-actions{min-width:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.controls[hidden]{display:none}.output canvas{position:absolute;inset:0}.output #advanced{cursor:grab;touch-action:none}.output #advanced:active{cursor:grabbing}.metrics{font:12px/1.5 ui-monospace,monospace;color:#9fbfb5;min-height:18px}#volume-controls span,#beam-controls span{font-size:.72rem;color:#98afa6}#machine-inputs input[type=number]{width:90px}a{color:#a6cec0}#rive-output{background:#061217}

.showcases{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:20px 0}.showcases button{min-height:86px;text-align:left;border-color:#797248;background:linear-gradient(120deg,#2d3023,#162929)}.showcases b{display:block;color:#e5d39d;font-size:.83rem;margin-bottom:7px}.showcases span{font-size:.71rem;line-height:1.4;color:#acc3b8}.showcases button[aria-pressed=true]{outline:2px solid #d6c58a;box-shadow:0 0 18px #b9b67633}.credit{font-size:.75rem;color:#9bbdb1;line-height:1.5;margin:9px 4px 16px}.ready-exports{padding:24px 0;border-top:1px solid #54624b}.ready-exports p{font-size:.82rem;color:#aebeb8;max-width:900px;line-height:1.6}.ready-exports div{display:flex;flex-wrap:wrap;gap:12px}.ready-exports a{padding:12px 16px;border:1px solid #708577;border-radius:8px;text-decoration:none;background:#152727}@media(max-width:1150px){.showcases{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.showcases{grid-template-columns:repeat(2,1fr)}}

.embedded main{padding:14px 16px}.embedded header .eyebrow,.embedded header .intro{display:none}.embedded h1{font-size:1.55rem;margin:6px 0 10px}.embedded header a{font-size:.68rem}.embedded .showcases{gap:7px;margin:10px 0;grid-template-columns:repeat(6,1fr)}.embedded .showcases button{min-height:58px;padding:7px}.embedded .showcases b{font-size:.72rem;margin-bottom:4px}.embedded .showcases span{font-size:.62rem}.embedded .controls{padding:8px 10px;gap:10px;margin-bottom:6px}.embedded .controls button,.embedded .controls select,.embedded .file{font-size:.73rem;padding:6px 9px}.embedded .credit{margin:6px 0 9px;font-size:.66rem}.embedded .views{margin-top:10px;gap:12px}.embedded #sample,.embedded #glass{display:none}.embedded .explanation{font-size:.76rem;min-height:0}.embedded #status{font-size:.67rem}@media(max-width:740px){.embedded .showcases{grid-template-columns:repeat(3,1fr)}}

.fit-controls p{flex-basis:100%;font-size:.75rem;color:#a9beb5;line-height:1.5;margin:0}.fit-readout{display:flex;gap:12px;align-items:center}.fit-readout canvas{width:96px;height:64px;border:1px solid #617565;background:#071014;image-rendering:pixelated}.fit-readout span{max-width:460px;font:12px/1.6 ui-monospace,monospace;color:#e2cb8d}.lens-controls span{font-size:.72rem;color:#a7beb3;max-width:500px}.output #lens{cursor:grab;touch-action:none}.output #lens:active{cursor:grabbing}.capability-note{font-size:.77rem;line-height:1.5;color:#bcd3c6;padding:10px 14px;border-left:2px solid #af985b;background:#1a2727}.controls select{max-width:100%}@media(max-width:500px){.controls label{max-width:100%;flex-wrap:wrap}.fit-readout{align-items:flex-start}.fit-readout span{max-width:200px}.controls input[type=range]{width:96px}}

.controls label[hidden],.controls button[hidden]{display:none}