:root{color:#e4e8e2;font-synthesis:none;--muted:#88918b;--line:#2b3230;--orange:#ef916e;--blue:#87cbd2;background:#101313;font-family:Inter,Helvetica Neue,Noto Sans JP,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:360px;margin:0}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}main{max-width:1440px;margin:auto;padding:0 48px}button{border:1px solid var(--line);background:0 0}button:hover{background:#26302c}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:76px;display:flex}.brand{color:inherit;letter-spacing:-1px;align-items:center;gap:12px;font-size:21px;font-weight:600;text-decoration:none;display:flex}.brand-mark{color:var(--orange);font-size:34px;line-height:1}.brand-version{color:var(--muted);margin-left:6px;font:11px monospace}.topbar-note,.eyebrow,.stage-label,.vector-legend,.viewport-footer,.ramp-labels,.page-footer{letter-spacing:.08em;font:10px ui-monospace,SFMono-Regular,monospace}.topbar-note{color:var(--muted)}.intro{justify-content:space-between;align-items:flex-end;gap:30px;padding:56px 0 38px;display:flex}.eyebrow{color:var(--muted);letter-spacing:.16em;margin-bottom:19px;display:block}.intro h1{letter-spacing:-.04em;margin:0;font-size:clamp(32px,4vw,53px);font-weight:500;line-height:1.35}.intro h1 em{color:var(--orange);font-style:normal}.intro p{color:var(--muted);margin:0 30px 6px 0;font-size:13px;line-height:2}.workspace{border:1px solid var(--line);grid-template-columns:minmax(0,1fr) 310px;display:grid}.viewport{background:radial-gradient(at 50% 40%,#1e2623,#131817 70%);flex-direction:column;min-width:0;display:flex}.viewport-header{z-index:1;justify-content:space-between;align-items:center;gap:10px;padding:19px 22px;display:flex}.mode-switch{background:#111715;border:1px solid #39413d;padding:3px;display:flex}.mode-switch button{color:var(--muted);border:0;padding:8px 12px;font-size:11px}.mode-switch button[aria-pressed=true]{color:#101313;background:#e3e8de}.quiet-button{color:var(--muted);border:0;padding:8px;font-size:11px}.viewport-stage{flex:1;min-height:480px;position:relative}.sphere-view{position:absolute;inset:0}.sphere-view canvas{touch-action:none;display:block}.stage-label{color:#89978e;pointer-events:none;line-height:1.9;position:absolute;top:8px;left:24px}.stage-label b{color:#57675c;font-weight:400}.vector-legend{color:#a4afa6;pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;bottom:21px;left:24px}.light-dot,.normal-dot{background:var(--orange);border-radius:50%;width:7px;height:7px}.normal-dot{background:var(--blue);margin-left:14px}.viewport-footer{border-top:1px solid var(--line);color:var(--muted);letter-spacing:0;justify-content:space-between;gap:12px;padding:17px 23px;font-size:9px;display:flex}.controls{border-left:1px solid var(--line);background:#151a18}.control-section{padding:25px 25px 22px}.control-section+.control-section{border-top:1px solid var(--line)}h2{font-weight:500}.control-section h2{align-items:center;gap:13px;margin:0 0 21px;font-size:13px;display:flex}.control-section h2>span{color:#68776e;font:10px monospace}.presets{gap:5px;margin-bottom:22px;display:flex}.presets button{color:var(--muted);flex:1;padding:8px 0;font-size:10px}.presets button[aria-pressed=true]{border-color:var(--orange);color:var(--orange);background:#ef916e0d}.slider{margin-top:18px;display:block}.slider>span{color:#b4bfb6;justify-content:space-between;font-size:11px;display:flex}.slider output{color:#e5e9e1;font:12px ui-monospace,monospace}.slider input{width:100%;height:3px;accent-color:var(--orange);cursor:pointer;margin:16px 0 10px;display:block}.hint{color:#6f7e74;font-size:10px;line-height:1.9}.control-section .hint{margin:18px 0 0}.toggle{color:#a5b2a8;justify-content:space-between;align-items:center;margin-top:17px;font-size:11px;display:flex}.toggle input{accent-color:var(--orange);width:15px;height:15px;margin:0}.value-ramp{border:1px solid #536056;height:13px;margin-top:24px;display:flex}.value-ramp i{flex:1}.ramp-labels{color:var(--muted);justify-content:space-between;margin-top:7px;font-size:9px;display:flex}.reset-button{color:#a5b2a8;width:100%;margin-top:20px;padding:10px;font-size:10px}.inspection{border:1px solid var(--line);border-top:0;grid-template-columns:1.1fr 1fr 1fr 1fr;display:grid}.inspection>div{padding:29px 26px}.inspection>div+div{border-left:1px solid var(--line)}.inspection .eyebrow{margin-bottom:12px;font-size:9px}.inspection h2{margin:0;font-size:15px}.inspection p{color:var(--muted);margin:9px 0 0;font-size:10px;line-height:1.7}.patch-navigation{gap:5px;margin-top:13px;display:flex}.patch-navigation button{color:#a9b6ad;padding:6px 10px;font-size:10px}.metric>span{color:#a4b2a8;font-size:11px}.metric strong{letter-spacing:-.06em;align-items:center;gap:12px;margin-top:22px;font:38px ui-monospace,monospace;display:flex}.metric strong small{color:#7b8a80;font-size:20px}.sample-swatch{border:1px solid #59655c;width:23px;height:23px;display:inline-block}.explanation{grid-template-columns:1.1fr 2fr;gap:40px;padding:48px 0;display:grid}.explanation h2{margin:0;font-size:20px;line-height:1.8}.formula{color:var(--orange);letter-spacing:-.04em;margin:8px 0 18px;font:20px ui-monospace,monospace}.formula span{color:#85988c;font-size:16px}.explanation p{color:#a5b2a8;font-size:12px;line-height:1.9}.explanation .hint{color:#6f7e74;font-size:10px}.page-footer{border-top:1px solid var(--line);color:#66766b;justify-content:space-between;padding:21px 0 30px;font-size:9px;display:flex}.webgl-error{color:var(--orange);padding:100px 30px;font-size:14px}@media (width>=1400px){.viewport-stage{min-height:540px}}@media (width<=1000px){main{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 270px}.control-section{padding:23px 18px}.viewport-header{padding:15px 12px}.mode-switch button{padding:8px}.viewport-footer{flex-wrap:wrap}.inspection>div{padding:25px 18px}.metric strong{font-size:30px}.intro p{margin-right:0}.explanation{grid-template-columns:1fr 1.5fr}.formula span{margin-top:10px;display:block}}@media (width<=760px){main{padding:0 18px}.topbar{height:64px}.topbar-note{font-size:8px}.intro{padding:34px 0 26px;display:block}.intro h1{font-size:36px}.intro p{margin-top:18px;font-size:12px}.intro p br.desktop-break{display:none}.workspace{grid-template-columns:1fr}.controls{border-left:0;border-top:1px solid var(--line);grid-template-columns:1fr 1fr;display:grid}.control-section:last-child{grid-column:1/-1}.control-section:nth-child(2){border-top:0;border-left:1px solid var(--line)}.viewport-stage{min-height:410px}.viewport-header{gap:2px}.mode-switch button{padding:8px;font-size:10px}.quiet-button{padding:5px;font-size:10px}.inspection{grid-template-columns:1fr 1fr}.inspection>div:nth-child(3){border-left:0}.inspection>div:nth-child(n+3){border-top:1px solid var(--line)}.metric strong{margin-top:17px}.explanation{grid-template-columns:1fr;gap:22px;padding:35px 0}.formula span{font-size:14px;display:inline}.page-footer{gap:10px;font-size:8px}.eyebrow,.vector-legend{font-size:9px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}.cosine-panel{border:1px solid var(--line);border-top:0;grid-template-columns:minmax(260px,1fr) 2fr;align-items:center;gap:35px;padding:24px 26px;display:grid}.cosine-plot svg{width:100%;max-width:400px;margin:auto;display:block;overflow:visible}.cosine-axis{fill:none;stroke:#536159;stroke-width:1px}.cosine-circle{fill:none;stroke:#8a9c90;stroke-width:1.5px}.cosine-ticks{fill:var(--muted);font:10px ui-monospace,monospace}.cosine-projection{stroke:#77978c;stroke-width:1px;stroke-dasharray:4 4}.cosine-radius{stroke:var(--blue);stroke-width:2px}.cosine-angle{fill:none;stroke:var(--blue);stroke-width:1px}.cosine-theta{fill:var(--blue);font:13px ui-monospace,monospace}.cosine-value{stroke:var(--orange);stroke-width:5px;stroke-linecap:round}.cosine-point{fill:var(--blue)}.cosine-foot{fill:var(--orange)}.cosine-value-label{fill:var(--orange);font:12px ui-monospace,monospace}.cosine-description .eyebrow{margin-bottom:12px}.cosine-description h2{margin:0;font-size:17px}.cosine-description p{color:#a5b2a8;font-size:12px;line-height:1.9}.cosine-description .hint{color:var(--muted);font-size:10px}.cosine-readout{flex-wrap:wrap;gap:24px;margin:18px 0;font:15px ui-monospace,monospace;display:flex}.cosine-readout span:last-child{color:var(--orange)}.cosine-description .cosine-empty{color:var(--orange);font-size:11px}@media (width<=760px){.cosine-panel{grid-template-columns:1fr;gap:12px;padding:22px 18px}.cosine-plot svg{max-width:340px}}.ambient-heading{color:#b4bfb6;justify-content:space-between;align-items:center;font-size:11px;display:flex}.ambient-heading i{border:1px solid #59655c;width:22px;height:22px;display:block}.axis-dot{background:#b9a3df;border-radius:50%;width:7px;height:7px;margin-left:14px}.slider>span{align-items:center}.slider-actions{align-items:center;gap:10px;display:inline-flex}.slider-zero{color:var(--muted);padding:4px 7px;font:10px ui-monospace,monospace}