:root{--bg:#0b1017;--panel:#141b24;--panel-2:#1c2531;--text:#e8edf3;--dim:#97a3b3;--accent:#3fa7ff;--primary:#1f9d6b;--danger:#d6455d;--line:#2a3542;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif}#app{position:fixed;inset:0;overflow:hidden}.hidden{display:none!important}.spacer{flex:1}.dim{color:var(--dim)}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:12px;min-height:48px;padding:12px 18px;font-size:16px;font-weight:600}.btn:active{transform:scale(.97)}.btn.small{min-height:40px;padding:8px 12px;font-size:14px}.btn.tiny{min-height:32px;padding:4px 10px;font-size:13px}.btn.ghost{background:0 0}.btn.primary{background:var(--primary);border-color:var(--primary)}.btn.danger{background:var(--danger);border-color:var(--danger)}.btn.big{border-radius:32px;min-width:150px;min-height:64px;font-size:20px}.btn-placeholder{width:84px}.view{position:absolute;inset:0}.panel-view{background:var(--bg);z-index:20;padding-top:var(--safe-t);padding-bottom:var(--safe-b);flex-direction:column;display:none}.panel-view.active{display:flex}.panel-view>*{min-width:0}.bar{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}footer.bar{border-bottom:0;border-top:1px solid var(--line)}.bar h1{margin:0 4px;font-size:17px}.camera-view{background:#000}.cam-stage{position:absolute;inset:0}.cam-video,.cam-overlay{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.cam-overlay{pointer-events:none}.cam-top{top:calc(var(--safe-t) + 8px);z-index:5;align-items:center;gap:8px;display:flex;position:absolute;left:8px;right:8px}.chip{white-space:nowrap;text-overflow:ellipsis;border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0e14bf;border-radius:999px;min-width:0;padding:6px 12px;font-size:14px;overflow:hidden}.chip[data-state=watching]{border-color:var(--accent)}.chip[data-state=throwing]{border-color:var(--danger);background:#d6455dd9}.chip[data-state=analyzing]{color:#111;background:#ffc233d9}.chip.dim{color:var(--dim);flex:none;font-size:12px}.cam-bottom{left:0;right:0;bottom:calc(var(--safe-b) + 16px);z-index:5;justify-content:space-around;align-items:center;display:flex;position:absolute}.cam-message{border:1px solid var(--line);z-index:6;background:#141b24f2;border-radius:14px;padding:16px;position:absolute;top:30%;left:16px;right:16px}.mini-lane{right:8px;top:calc(var(--safe-t) + 60px);bottom:calc(var(--safe-b) + 100px);border:1px solid var(--line);z-index:4;cursor:pointer;border-radius:10px;width:min(30vw,150px);position:absolute;overflow:hidden}.lane-canvas{width:100%;height:100%;display:block}.lane-setup{z-index:10;padding-top:var(--safe-t);padding-bottom:var(--safe-b);background:#000;flex-direction:column;display:flex;position:absolute;inset:0}.setup-info{background:var(--panel);padding:10px 12px;font-size:15px}.setup-canvas{flex:1;width:100%;min-height:0;display:block}.setup-bar{background:var(--panel);flex-wrap:wrap;justify-content:center;gap:6px;padding:8px;display:flex}.shot-list{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.shot-item{border-bottom:1px solid var(--line);cursor:pointer;align-items:center;gap:10px;padding:10px 12px;display:flex}.shot-item .thumb{object-fit:cover;background:var(--panel-2);border-radius:6px;flex:none;width:54px;height:72px}.shot-meta{flex:1;min-width:0}.shot-date{font-weight:600}.shot-nums{color:var(--dim);margin-top:4px;font-size:13px}.shot-check{width:22px;height:22px}.empty{color:var(--dim);text-align:center;margin-top:40px}.detail-body{flex:1;min-height:0;display:flex}.detail-lane{flex:1;min-width:0;min-height:0;position:relative}.detail-lane .lane-canvas{position:absolute;inset:0}.metrics{min-width:0;max-width:100%;padding:8px;font-size:13px;overflow:auto}.metrics table{border-collapse:collapse;width:100%}.metrics th,.metrics td{border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;padding:6px}.metrics th{color:var(--dim);font-weight:500}.swatch{border-radius:3px;width:14px;height:14px;display:inline-block}.note{color:var(--dim);font-size:12px}@media (orientation:portrait){.detail-body{flex-direction:column}.metrics{max-height:34%}}@media (orientation:landscape){.metrics{width:46%}}.settings-form{flex-direction:column;gap:14px;padding:12px;display:flex;overflow-y:auto}.set-row{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:6px;padding:12px;display:flex}.set-label{font-weight:600}.set-row small{color:var(--dim)}select,input[type=range]{min-height:40px;font-size:16px}select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px}input[type=range]{flex:1}#toast{left:50%;bottom:calc(var(--safe-b) + 100px);border:1px solid var(--line);color:var(--text);opacity:0;pointer-events:none;z-index:50;background:#141b24f5;border-radius:12px;max-width:90vw;padding:10px 16px;font-size:14px;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%)translateY(20px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}