:root{--bg: #15100d;--bg-elev: #1f1815;--bg-elev-2: #2a201b;--border: #382a23;--border-hi: #4a382e;--fg: #f5ece1;--fg-dim: #b8a896;--fg-muted: #8a7868;--accent: #d49447;--accent-dim: #7a5424;--accent-fg: #1a0e06;--subject: #e8c896;--subject-ring: #c8a570;--fov: #8a6a52;--danger: #e86b5a;--cup-body: #2e251f;--cup-stroke: #d8c5a8;--cup-rim: #e8d4b2;--liquid: #6b3a1a;--liquid-light: #8a4f24;--crema: #d49447;--water: #6ea8c8;--grounds: #4a2a18;--muted: #5a4838;--cam-body: #2e251f;--cam-stroke: #d8c5a8;--cam-lens: #4a382e;--cam-iris: #15100d;--radius: 10px;--radius-sm: 6px;--track-h: 6px;--thumb-d: 22px;--ease-out: cubic-bezier(.2, .8, .2, 1);--dur: .22s}@media (prefers-color-scheme: light){:root{--bg: #faf6f1;--bg-elev: #ffffff;--bg-elev-2: #f1ebe2;--border: #e6dccc;--border-hi: #d4c8b4;--fg: #1f1815;--fg-dim: #5a4a3c;--fg-muted: #8a7864;--accent: #a16018;--accent-dim: #d4af7a;--accent-fg: #ffffff;--subject: #6a4520;--subject-ring: #4a2e10;--fov: #7a5a42;--cup-body: #f0e6d6;--cup-stroke: #2a1f18;--cup-rim: #5a4a3c;--liquid: #6b3a1a;--liquid-light: #8a4f24;--crema: #c08540;--water: #4a8aaa;--grounds: #3a2210;--muted: #b4a892;--cam-body: #f0e6d6;--cam-stroke: #2a1f18;--cam-lens: #d4c8b4;--cam-iris: #1f1815}}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;font-feature-settings:"cv11","ss01";font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}a{color:inherit}button{font:inherit;color:inherit}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 32px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg-elev),var(--bg));flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;color:var(--accent)}.brand-mark{width:28px;height:28px}.brand-name{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--fg);margin:0}.brand-dot{color:var(--fg-muted);font-weight:500}.tabs{display:flex;gap:2px;padding:4px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius)}.tab{padding:8px 14px;border:none;background:transparent;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;font-weight:500;color:var(--fg-dim);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dur),color var(--dur)}.tab:hover:not(.disabled){color:var(--fg);background:var(--bg-elev)}.tab.active{background:var(--bg);color:var(--fg);box-shadow:0 0 0 1px var(--border-hi)}.tab.disabled{color:var(--fg-muted);cursor:not-allowed}.tab.disabled:after{content:" · soon";font-size:11px;color:var(--fg-muted);opacity:.7}.lang-toggle{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev-2);color:var(--fg-dim);font-family:inherit;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}.lang-toggle:hover{background:var(--bg-elev);color:var(--fg);border-color:var(--border-hi)}.lang-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{display:grid;grid-template-columns:minmax(320px,360px) 1fr;gap:24px;padding:24px 32px;max-width:1280px;margin:0 auto}@media (max-width: 900px){.app{grid-template-columns:1fr}.site-header{padding:14px 16px}.app{padding:16px}}.controls{display:flex;flex-direction:column;gap:20px;padding:24px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);align-self:start;position:sticky;top:24px}@media (max-width: 900px){.controls{position:static;padding:18px}}.control{display:flex;flex-direction:column;gap:10px}.control-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.label-text{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim)}.label-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg);line-height:1}.label-value .unit{color:var(--fg-muted);font-size:13px;font-weight:500;margin-left:2px}.label-value .unit.prefix{margin-left:0;margin-right:1px}.label-equiv{display:block;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;font-weight:500;color:var(--fg-muted);letter-spacing:.02em;margin-top:4px;text-align:right;font-variant-numeric:tabular-nums}.slider-row{display:flex;align-items:center;gap:8px}.slider-row .slider{flex:1;min-width:0}.nudge-btn{flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--bg-elev);color:var(--fg-dim);font-size:18px;font-weight:600;line-height:1;cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}.nudge-btn:hover{background:var(--bg-elev-2);color:var(--fg)}.nudge-btn:active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:var(--thumb-d);background:transparent;cursor:pointer;margin:0}.slider:focus{outline:none}.slider::-webkit-slider-runnable-track{height:var(--track-h);background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--pct, 0%),var(--border) var(--pct, 0%),var(--border) 100%);border-radius:999px}.slider::-moz-range-track{height:var(--track-h);background:var(--border);border-radius:999px}.slider::-moz-range-progress{height:var(--track-h);background:var(--accent);border-radius:999px}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--thumb-d);height:var(--thumb-d);border-radius:50%;background:var(--fg);border:3px solid var(--accent);margin-top:calc((var(--thumb-d) - var(--track-h)) / -2);box-shadow:0 1px 3px #0006;transition:transform .12s var(--ease-out)}.slider:hover::-webkit-slider-thumb{transform:scale(1.08)}.slider:active::-webkit-slider-thumb{transform:scale(1.15)}.slider::-moz-range-thumb{width:var(--thumb-d);height:var(--thumb-d);border-radius:50%;background:var(--fg);border:3px solid var(--accent);box-shadow:0 1px 3px #0006;transition:transform .12s var(--ease-out)}.slider:hover::-moz-range-thumb{transform:scale(1.08)}.slider:active::-moz-range-thumb{transform:scale(1.15)}.ticks{display:flex;justify-content:space-between;font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;color:var(--fg-muted);padding:0 4px;margin-top:-4px;pointer-events:none;font-variant-numeric:tabular-nums}.sensor-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.sensor-btn{padding:10px 8px;font-size:12px;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg-dim);cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}.sensor-btn:hover{background:var(--bg-elev-2);color:var(--fg)}.lock-btn{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;border:1px solid var(--border);border-radius:999px;background:var(--bg-elev);color:var(--fg-dim);cursor:pointer;vertical-align:middle;transition:background var(--dur),color var(--dur),border-color var(--dur)}.lock-btn:hover{background:var(--bg-elev-2);color:var(--fg)}.lock-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.sensor-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}.share{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border-hi);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-size:13px;font-weight:500;cursor:pointer;transition:background var(--dur),border-color var(--dur)}.share:hover{background:var(--bg-elev-2);border-color:var(--accent)}.share.copied{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.viz{display:flex;flex-direction:column;gap:16px}.scene-wrap{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:12px}.scene{display:block;width:100%;height:auto;overflow:visible}#subject,#near-plane,#far-plane,#dof-band{transition:transform var(--dur) var(--ease-out)}#subject-slab{transition:x var(--dur) var(--ease-out),width var(--dur) var(--ease-out)}.plane-label,.plane-dist,.subject-label{font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;font-weight:600;fill:var(--accent);font-variant-numeric:tabular-nums}.subject-label{fill:var(--subject)}.plane-dist{fill:var(--fg-dim);font-weight:500}.ruler-tick-label{font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;fill:var(--fg-muted);font-variant-numeric:tabular-nums}.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;padding:4px}.readout-item{display:flex;flex-direction:column;padding:14px 16px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--dur)}.readout-item[data-accent=true]{border-color:var(--accent-dim)}.readout-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim);margin-bottom:6px}.readout-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg);line-height:1}.readout-item[data-accent=true] .readout-value{color:var(--accent)}.readout-unit{font-size:12px;color:var(--fg-muted);margin-left:2px;font-weight:500}.readout-unit.prefix{margin-left:0;margin-right:1px}.warning{padding:12px 14px;background:#e86b6b14;border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);font-size:13px;line-height:1.5}.warning strong{color:var(--fg);font-weight:600}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 32px;border-top:1px solid var(--border);font-size:12px;color:var(--fg-muted)}.about-toggle{padding:6px 10px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--fg-dim);cursor:pointer;transition:color var(--dur),border-color var(--dur)}.about-toggle:hover{color:var(--fg);border-color:var(--border-hi)}.footer-note{color:var(--fg-muted)}.footer-copy{color:var(--fg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.about-panel{max-width:900px;margin:0 auto;padding:24px 32px 48px;color:var(--fg-dim)}.about-panel h2{color:var(--fg);font-size:18px;margin:0 0 16px}.about-panel dt{color:var(--fg);font-weight:600;margin-top:16px}.about-panel dd{margin:6px 0 0;line-height:1.6}.about-panel code{font-family:JetBrains Mono,ui-monospace,monospace;background:var(--bg-elev);padding:2px 6px;border-radius:4px;border:1px solid var(--border);font-size:13px}.share-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:4px}.share-btn{padding:7px 12px;font-size:12px;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev);color:var(--fg-dim);cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}.share-btn:hover:not(:disabled){background:var(--bg-elev-2);color:var(--fg);border-color:var(--border-hi)}.share-btn:disabled{opacity:.5;cursor:progress}.share-btn.copied{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.share-err{font-size:12px;color:var(--danger);margin-left:6px}.brand-home{background:transparent;border:0;padding:0;cursor:pointer}.brand-home:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.seg-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm)}.seg-btn{padding:8px 10px;font-size:12px;font-weight:500;border:none;background:transparent;color:var(--fg-dim);border-radius:4px;cursor:pointer;transition:background var(--dur),color var(--dur)}.seg-btn:hover{background:var(--bg-elev);color:var(--fg)}.seg-btn.active{background:var(--accent);color:var(--accent-fg);font-weight:600}.preset-row{display:flex;flex-wrap:wrap;gap:4px}.preset-btn{padding:5px 10px;font-size:11px;font-weight:500;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--fg-dim);cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur)}.preset-btn:hover{background:var(--bg-elev-2);color:var(--fg);border-color:var(--border-hi)}.preset-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:700}.cat-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-muted);margin-top:6px;margin-bottom:2px}.cat-label:first-of-type{margin-top:0}.landing{max-width:1080px;margin:0 auto;padding:32px 32px 48px}@media (max-width: 900px){.landing{padding:20px 16px 32px}}.landing-hero{text-align:center;padding:16px 0 32px}.landing-hero h2{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 12px;color:var(--fg)}.landing-hero p{margin:0;font-size:14px;color:var(--fg-dim)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.card{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--dur),background var(--dur),transform var(--dur)}.card:hover{border-color:var(--accent-dim);background:var(--bg-elev-2);transform:translateY(-2px)}.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card-art{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;overflow:hidden}.card-art svg{display:block;width:100%;height:auto}.card-title{font-size:16px;font-weight:700;margin:4px 0 0;color:var(--fg)}.card-blurb{margin:0;font-size:13px;color:var(--fg-dim);line-height:1.5}@media (prefers-reduced-motion: no-preference){.card-art .art-near,.card-art .art-far{transition:transform var(--dur) var(--ease-out)}.card:hover .card-art .art-near{transform:translate(-6px)}.card:hover .card-art .art-far{transform:translate(6px)}.card-art .art-band{transition:transform var(--dur) var(--ease-out);transform-origin:center}.card:hover .card-art .art-band{transform:scaleX(1.1)}.card-art .art-subj{transition:transform var(--dur) var(--ease-out);transform-origin:center}.card:hover .card-art .art-subj{transform:scale(1.2)}.card-art .art-focus{transition:transform var(--dur) var(--ease-out)}.card:hover .card-art .art-focus{transform:translate(8px)}.card-art .art-edge{transition:transform var(--dur) var(--ease-out)}.card:hover .card-art .art-person .art-edge:first-of-type{transform:translate(-4px)}.card:hover .card-art .art-person .art-edge:last-of-type{transform:translate(4px)}.card-art .art-h{transition:transform var(--dur) var(--ease-out)}.card:hover .card-art .art-h{transform:translate(-12px)}.card-art .art-trail{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .6s var(--ease-out)}.card:hover .card-art .art-trail{stroke-dashoffset:0}.card-art .art-liquid{transition:transform var(--dur) var(--ease-out);transform-origin:bottom center}.card:hover .card-art .art-liquid{transform:scaleY(1.06)}.card-art .art-stream{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s var(--ease-out)}.card:hover .card-art .art-stream{stroke-dashoffset:0}.card-art .art-pour{transition:transform var(--dur) var(--ease-out);transform-origin:top center}.card:hover .card-art .art-pour{transform:scaleY(1.15)}.card-art .art-crema{transition:opacity var(--dur) var(--ease-out)}.card:hover .card-art .art-crema{opacity:.85}.card-art .art-layer-foam,.card-art .art-layer-milk,.card-art .art-layer-espresso{transition:transform var(--dur) var(--ease-out);transform-origin:center}.card:hover .card-art .art-layer-foam{transform:translateY(-2px)}.card:hover .card-art .art-layer-espresso{transform:translateY(2px)}}.placeholder{max-width:540px;margin:80px auto;padding:32px;text-align:center;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius)}.placeholder h2{margin-top:0}.placeholder p{color:var(--fg-dim);margin-bottom:24px}@media (max-width: 720px){.site-header{gap:10px;padding:12px 16px}.tabs{order:3;flex-basis:100%}}@media (max-width: 720px){.tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}.tab{flex-shrink:0}}@media (max-width: 600px){.app{padding:12px;gap:16px}.controls{padding:14px;gap:16px}.scene-wrap{padding:8px}.readout-item{padding:12px 14px}.readout-value{font-size:19px}.label-value{font-size:17px}.landing-hero h2{font-size:24px}.landing-hero p{font-size:14px}.about-panel{padding:18px 16px 32px}}@media (max-width: 600px){.sensor-buttons{grid-template-columns:repeat(2,1fr)}}@media (pointer: coarse){.nudge-btn{width:40px;height:40px;font-size:22px}:root{--thumb-d: 28px}.slider::-webkit-slider-thumb{border-width:4px}.slider::-moz-range-thumb{border-width:4px}.tab{padding:10px 14px}.sensor-btn{padding:12px 8px}.preset-btn{padding:8px 12px;font-size:12px}.share-btn{padding:10px 14px}.about-toggle{padding:8px 12px}}.site-footer{flex-wrap:wrap}@media (max-width: 600px){.site-footer{gap:12px;padding:14px 16px;justify-content:flex-start}.site-footer span{font-size:11px}}.scene{min-height:200px}@media (max-width: 480px){.scene{min-height:180px}}