:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101412;color:#f4f7f5;--surface:#1a201d;--raised:#232b27;--selected:#1f372d;--text2:#a9b5af;--border:#52635b;--accent:#8fcdb3;--on:#0d1c16}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% -20%,#26352e 0,#101412 38%);overscroll-behavior:none}button,input{font:inherit}button{min-height:48px;border:1px solid var(--border);border-radius:16px;padding:0 18px;background:var(--raised);color:#f4f7f5;font-weight:650;touch-action:manipulation}button:active{background:#314139}button:focus-visible,input:focus-visible,.stage:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button:disabled{opacity:.45}main{width:min(100%,980px);margin:auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}header{display:flex;align-items:center;gap:10px;padding:8px 2px 24px}.dot{width:12px;height:12px;background:var(--accent);border-radius:50%;box-shadow:0 0 18px #8fcdb380}header small{margin-left:auto;color:var(--text2)}section{background:var(--surface);border:1px solid #344039;border-radius:24px;padding:20px}.eyebrow{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.14em;margin:0 0 6px}h1{font-size:clamp(28px,7vw,38px);margin:0}p{color:var(--text2);line-height:1.6}form label{display:block;margin:22px 0 8px;font-weight:650}input{width:100%;min-height:56px;border:1px solid var(--border);border-radius:16px;padding:12px 16px;background:var(--raised);color:#f4f7f5;font-size:24px;letter-spacing:.22em}form button{width:100%;margin-top:12px;background:var(--accent);color:var(--on);border-color:var(--accent)}.toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.mode{display:grid;grid-template-columns:1fr 1fr;background:#121714;border:1px solid #344039;border-radius:18px;padding:4px;flex:1;max-width:390px}.mode button{border:0;background:transparent;min-height:48px}.mode button.active{background:var(--accent);color:var(--on)}#reset{min-width:76px}.stage{position:relative;background:#000;aspect-ratio:4/3;border-radius:20px;overflow:hidden;display:grid;place-items:center;touch-action:none;user-select:none}.stage canvas,.stage img{position:absolute;width:100%;height:100%;object-fit:contain}.stage img{display:none}.stage.raw img{display:block}.stage.raw canvas{display:none}.stage #waiting{z-index:4;color:var(--text2);pointer-events:none}.compass{position:absolute;z-index:3;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;border:1px solid #ffffff2e;border-radius:99px;background:#101412c9;backdrop-filter:blur(12px);padding:8px 13px}.compass span{color:var(--text2);font-variant-numeric:tabular-nums}.hint{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#dfe9e4;background:#101412b8;border-radius:99px;padding:7px 12px;font-size:12px;transition:opacity .2s}.stage.touched .hint{opacity:0}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}nav button{padding:0 8px}nav button.active{background:var(--selected);border-color:var(--accent);color:var(--accent)}footer{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}#leave{color:#f1b0ad}.note{font-size:12px;margin-bottom:0}#status{font-size:14px;padding:0 4px;margin-bottom:0}[hidden]{display:none!important}@media(orientation:landscape) and (max-height:700px){main{padding-top:max(8px,env(safe-area-inset-top));max-width:1120px}header{padding-bottom:10px}#watch{padding:12px}.stage{aspect-ratio:auto;height:calc(100dvh - 190px);min-height:260px}.note{display:none}.toolbar{position:absolute;z-index:6;left:28px;right:28px;pointer-events:none}.toolbar>*{pointer-events:auto;background:#101412db}nav{position:absolute;z-index:5;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(430px,55vw);margin:0}footer{position:absolute;z-index:5;right:max(24px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));grid-template-columns:auto auto;margin:0}#status{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}