@font-face{font-family:"Space Grotesk";font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-display:swap;src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2")}
:root{--bg:#0b0b0d;--amber:#ffb000;--steel:#7a7a82;--line:rgba(255,255,255,.12);--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--text:"Space Grotesk",system-ui,sans-serif}
html,body{margin:0;height:100%;background:var(--bg);color:#e8e8ec;font-family:var(--text);overflow:hidden}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#panel{position:fixed;left:16px;top:16px;width:290px;max-height:calc(100% - 32px);overflow:auto;padding:14px 16px;background:rgba(11,11,13,.82);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px)}
#panel h1{font-size:15px;margin:0 0 10px;letter-spacing:.02em}#panel h1 small{display:block;color:var(--steel);font-weight:400;font-size:12px}
.j{display:grid;grid-template-columns:86px 1fr 52px;gap:8px;align-items:center;margin:6px 0;font-size:12px}
.j .n{color:#cfcfd6}.j .v{font-family:var(--mono);color:var(--amber);text-align:right}
.j input{width:100%;accent-color:var(--amber);height:3px}
.j.head .n::before{content:"● ";color:var(--amber)}
#presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
button{background:transparent;color:#e8e8ec;border:1px solid var(--line);border-radius:8px;padding:5px 10px;font:12px var(--text);cursor:pointer}
button:hover{border-color:var(--amber);color:var(--amber)}button.on{background:var(--amber);color:#0b0b0d;border-color:var(--amber)}
.row{font-size:12px;color:#cfcfd6;display:flex;gap:8px;align-items:center}.row input{accent-color:var(--amber)}
.row{margin-top:4px}.ax{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle}.ax.pan{background:#6a8cff}.ax.tilt{background:var(--amber)}
.hint{font-size:11px;color:var(--steel);margin:10px 0 0;line-height:1.6}
.hint kbd{font:inherit;font-family:var(--mono,ui-monospace,monospace);border:1px solid rgba(138,138,147,.45);border-radius:3px;padding:0 4px;margin:0 1px;color:var(--bone,#e6e1d6)}
#pip{position:fixed;right:16px;bottom:16px;width:min(34vw,300px);aspect-ratio:4/3;border:1px solid var(--amber);border-radius:10px;overflow:hidden;background:#000}
#pip canvas{width:100%;height:100%;display:block}#pip span{position:absolute;left:8px;bottom:6px;font:11px var(--mono);color:var(--amber)}
@media (max-width:640px){#panel{left:8px;width:calc(100% - 16px);max-height:44%;bottom:8px;top:auto;padding:10px 12px}#pip{top:8px;right:8px;bottom:auto;width:40vw}.j{grid-template-columns:78px 1fr 44px;margin:4px 0}.j input{height:6px}button{padding:8px 12px;font-size:13px}}
@media (hover:none){button:hover{border-color:var(--line);color:#e8e8ec}}

/* the touched axis glows in the panel too (set by viewer.js --glow 0..1) */
.j.head{--glow:0;border-radius:6px;transition:background .2s cubic-bezier(.2,.8,.2,1)}
.j.head[data-j="wrist_roll"]{background:rgba(106,140,255,calc(var(--glow)*.22))}
.j.head[data-j="tilt"]{background:rgba(255,176,0,calc(var(--glow)*.22))}
.j.head[data-j="wrist_roll"] .n::before{color:#6a8cff}

/* empty state: shown until the glb and the kinematics arrive, replaced by an error line if they never do */
#loading{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;font:12px var(--mono);letter-spacing:.06em;color:var(--steel)}
#loading .dots::after{content:"";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
#loading.err{color:var(--amber);pointer-events:auto;padding:0 24px;text-align:center}
@media (prefers-reduced-motion:reduce){#loading .dots::after{content:"...";animation:none}}

/* hero mode (landing iframe): the panel is gone, the eye sits top-right under the hint, the loading line rides low */
body.hero #panel{display:none}
body.hero #pip{top:56px;right:16px;bottom:auto;width:min(22vw,240px)}
body.hero #loading{align-items:end;padding-bottom:12vh}
@media (max-width:640px){body.hero #pip{display:none}}
/* the way out: a full-page viewer is a dead end without it (hidden with the panel in hero mode) */
#panel .out{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font:500 11px/1.6 var(--mono);letter-spacing:.04em}
#panel .out a{color:var(--steel);text-decoration:none}#panel .out a:hover,#panel .out a:focus-visible{color:#fff}