:root{--color-bg: #10222e;--color-panel: #101a21;--color-panel-2: #16222b;--color-border: #2c3a44;--color-border-2: #34434e;--color-text: #e8e4da;--color-text-sub: #cfe3ef;--color-muted: #8fa4b2;--color-accent: #2a7fb8;--color-accent-2: #58a6d6;--color-cta: #d96a24;--color-cta-hover: #ec7c33;--z-instruments: 5;--z-controls: 6;--z-top-bar: 10;--z-rotate-hint: 50;--z-toast: 100}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none;background:#10222e;color:#e8e4da;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif}#root{height:100%}button,label,.slider,.stars{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}.start-btn{font-size:1.2rem;padding:12px 40px;background:#2a7fb8;border:none;border-radius:8px;color:#fff;cursor:pointer}.start-btn:hover{background:#3590cc}.view-btn{background:#1b2831;color:#cfe3ef;border:1px solid #34434e;border-radius:5px;padding:4px 10px;cursor:pointer;font-size:.8rem}.view-btn.active{background:#2a7fb8;border-color:#58a6d6;color:#fff}.abort-btn,.play-view-btn{pointer-events:auto;background:#0006;color:#e8e4da;border:1px solid rgba(255,255,255,.25);border-radius:6px;padding:6px 14px;cursor:pointer}.play-view-btn{margin-left:8px;font-size:.8rem;padding:6px 10px;white-space:nowrap}.cta-btn{font-size:1.05rem;font-weight:700;letter-spacing:.06em;padding:13px 36px;background:var(--color-cta);border:none;border-radius:10px;color:#fff;cursor:pointer;box-shadow:0 4px 14px #d96a2459;transition:background .12s,transform .08s}.cta-btn:hover{background:var(--color-cta-hover)}.cta-btn:active{transform:translateY(1px)}.ghost-btn{font-size:.88rem;padding:12px 18px;background:none;border:1px solid var(--color-border-2);border-radius:10px;color:var(--color-text-sub);cursor:pointer}.ghost-btn:hover{border-color:var(--color-accent-2)}.setup-bar{position:sticky;bottom:0;z-index:2;background:#0d161de0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--color-border);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.setup-bar-inner{width:min(880px,100%);margin:0 auto;display:flex;align-items:center;gap:12px}.mission-line{flex:1;min-width:0;font-size:.78rem;color:var(--color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setup-bar-actions{display:flex;gap:10px;flex-shrink:0}@media(max-width:700px){.setup-bar-inner{flex-direction:column;align-items:stretch;gap:6px}.mission-line{text-align:center;white-space:normal}.setup-bar-actions{width:100%}.setup-bar-actions .cta-btn{flex:1}}.hint{color:#9fb3c0;font-size:.8rem;max-width:480px}.stars{color:#f2c14e;font-size:1.4rem;letter-spacing:2px}.stars.empty{color:#48545e}.stars.small{color:#f2c14e;font-size:.85rem;letter-spacing:1px;margin-left:6px}.ref-play-badge{background:#7a4a1e;color:#ffd9a8;border-radius:4px;padding:2px 8px;font-size:.72rem}.cond-row{display:grid;grid-template-columns:4em 1fr;gap:8px;padding:4px;font-size:.9rem}.result-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);max-width:calc(100vw - 32px);overflow-wrap:anywhere;background:#1b2831;border:1px solid #34434e;border-radius:8px;padding:10px 20px;animation:toast-out 2.5s forwards;z-index:var(--z-toast)}@keyframes toast-out{0%,80%{opacity:1}to{opacity:0}}.rotate-hint{display:none;position:fixed;inset:0;z-index:var(--z-rotate-hint);background:#0a1218f2;color:#e8e4da;font-size:1.3rem;align-items:center;justify-content:center}@media(orientation:landscape)and (pointer:coarse)and (max-height:600px){.rotate-hint{display:flex}}.play-root{position:fixed;inset:0;height:100%;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}.top-bar{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;height:40px;display:flex;align-items:center;padding:0 8px;z-index:var(--z-top-bar);pointer-events:none}.play-canvas-area{position:relative;flex:1;min-height:0}.play-canvas-host{position:absolute;inset:0}.play-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.instruments{position:absolute;bottom:12px;left:0;right:0;width:fit-content;margin-inline:auto;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;justify-content:center;min-height:42px;padding:4px 18px;max-width:min(92vw,1000px);white-space:nowrap;background:#0d141aa8;border:1px solid rgba(70,88,100,.45);border-radius:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;z-index:var(--z-instruments)}@media(max-width:1360px){.instruments{bottom:auto;top:8px;max-width:calc(100vw - 170px)}}@media(max-width:1000px){.instruments{min-height:36px;gap:2px 10px;padding:3px 12px}.instruments .inst-value{font-size:.82rem}.instruments .inst-label{font-size:.56rem}.instruments .rpm-bar,.instruments .steer-indicator{display:none}}.inst{display:flex;align-items:center;gap:6px;white-space:nowrap}.inst-label{font-size:.62rem;color:#8fa4b2}.inst-value{font-size:.95rem;font-variant-numeric:tabular-nums}.inst-value--speed-kt{min-width:6ch;text-align:right}.inst-value--speed-ms,.inst-value--wind{min-width:7ch;text-align:right}.inst-value--rpm{min-width:4ch;text-align:right}.inst-value--steer{min-width:2.6em;text-align:center}.shift-F,.shift-N,.shift-R{min-width:1.5ch;text-align:center}.shift-F{color:#7fd47f}.shift-N{color:#d4c77f}.shift-R{color:#d47f7f}.transiting{animation:blink .6s step-start infinite}@keyframes blink{50%{opacity:.2}}.rpm-bar{display:inline-block;width:50px;height:6px;background:#26333c;border-radius:3px;overflow:hidden}.rpm-bar span{display:block;height:100%;background:#2a7fb8}.steer-indicator{position:relative;display:inline-block;width:52px;height:8px;background:#26333c;border-radius:4px}.steer-indicator:after{content:"";position:absolute;left:50%;top:-2px;width:1px;height:12px;background:#5d707d}.steer-needle{position:absolute;left:50%;top:-1px;width:4px;height:10px;margin-left:-2px;background:#e8b23c;border-radius:2px}.wind-dial{position:relative;display:inline-block;width:22px;height:22px;border:1px solid #46586475;border-radius:50%}.wind-needle{position:absolute;left:50%;top:50%;width:2px;height:9px;margin-left:-1px;transform-origin:50% 0;background:#e8b23c}.touch-controls{position:absolute;inset:0;pointer-events:none;z-index:var(--z-controls)}.tc-left,.tc-right{position:absolute;bottom:16px;display:flex;gap:10px;align-items:flex-end;pointer-events:auto}.tc-left{left:14px}.tc-right{right:14px}.touch-deck{position:relative;z-index:var(--z-controls);flex:none;height:50%;display:flex;gap:12px;align-items:stretch;padding:8px 14px calc(10px + env(safe-area-inset-bottom));pointer-events:auto}.touch-deck .instruments{position:static;width:fit-content;max-width:100%;margin-inline:auto;flex:none}.deck-levers{display:flex;gap:10px;align-items:stretch}.deck-levers .lever-wrap{height:100%}.deck-levers .lever-wrap .slider-v{flex:1;height:auto;min-height:0}.deck-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:12px}.deck-center{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}.thruster-buttons.deck-thrusters{gap:12px;align-self:center}.touch-deck .thr-btn{width:72px;height:56px;font-size:1.15rem}.deck-steer{width:100%;max-width:300px}.deck-steer .slider-h{width:100%}.engine-readout{display:flex;align-items:center;justify-content:center;gap:6px;min-height:24px;padding:1px 8px;background:#0d141aa8;border:1px solid rgba(70,88,100,.45);border-radius:8px;white-space:nowrap;pointer-events:none}.steer-track-bar{position:absolute;top:5px;bottom:5px;width:6px;margin-left:-3px;background:#e8b23c;border-radius:3px;pointer-events:none}.steer-track-value{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;font-size:.85rem;font-variant-numeric:tabular-nums;color:#e8f0f6;text-shadow:0 1px 3px rgba(0,0,0,.85);white-space:nowrap;pointer-events:none}.slider{position:relative;background:#1420299e;border:1px solid rgba(78,100,116,.55);border-radius:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:none}.slider-v{width:52px;height:160px}.slider-h{width:190px;height:52px;align-self:flex-end}.slider-center-mark{position:absolute;background:#46586475}.slider-v .slider-center-mark{left:4px;right:4px;top:50%;height:2px}.slider-h .slider-center-mark{top:4px;bottom:4px;left:50%;width:2px}.slider-detent-band{position:absolute;background:#7896aa29}.slider-v .slider-detent-band{left:3px;right:3px;top:46%;height:8%}.slider-h .slider-detent-band{top:3px;bottom:3px;left:46%;width:8%}.slider-knob{position:absolute;background:#2a7fb8;border:1px solid #58a6d6;border-radius:6px}.slider-v .slider-knob{left:4px;width:42px;height:24px;margin-top:-12px;top:50%}.slider-h .slider-knob{top:4px;height:42px;width:24px;margin-left:-12px;left:50%}.lever-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.lever-label{font-size:.6rem;color:#8fa4b2}.engine-controls{display:flex;flex-direction:column;align-items:center;gap:10px}.lever-row{display:flex;gap:10px;align-items:flex-end}.thruster-buttons{display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:auto}.thruster-buttons-row{display:flex;gap:8px;align-items:center}.thruster-buttons-row .thr-label{min-width:3.2em;text-align:center}.thr-btn{width:56px;height:44px;background:#1420299e;color:#e8e4da;border:1px solid rgba(78,100,116,.55);border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:1rem;touch-action:none}.thr-label{font-size:.6rem;color:#8fa4b2}.thr-btn--on{background:#2a7fb8;border-color:#58a6d6;color:#fff}.time-warning{pointer-events:none;margin-left:auto;background:#96281ebf;color:#ffd9a8;border-radius:6px;padding:6px 12px;font-variant-numeric:tabular-nums}.boundary-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px 30px #c8281e8c;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;color:#ffb0a0;font-size:1.1rem;text-shadow:0 1px 4px #000}.hold-indicator{position:absolute;bottom:122px;left:50%;transform:translate(-50%);width:180px;height:8px;background:#00000073;border-radius:4px;overflow:hidden;pointer-events:none}.hold-bar{height:100%;background:#7fd47f;transition:width .1s linear}@media(orientation:portrait){.hold-indicator{bottom:12px}}.title-root{height:100%;overflow-y:auto;background:radial-gradient(120% 90% at 50% -20%,#16354a 0%,var(--color-bg) 62%)}.title-hero{position:relative;overflow:hidden;text-align:center;padding:calc(40px + env(safe-area-inset-top)) 16px 30px}.hero-compass{position:absolute;top:50%;left:50%;width:300px;transform:translate(-50%,-52%);color:#9fc4d8;opacity:.09;pointer-events:none;animation:compass-drift 60s linear infinite}@keyframes compass-drift{0%{transform:translate(-50%,-52%) rotate(0)}to{transform:translate(-50%,-52%) rotate(360deg)}}@media(prefers-reduced-motion:reduce){.hero-compass{animation:none}}.hero-eyebrow{margin:0 0 6px;font-size:.72rem;font-weight:600;letter-spacing:.42em;text-indent:.42em;color:var(--color-muted)}.title-hero h1{margin:0;font-size:clamp(1.55rem,4.6vw,2.3rem);font-weight:800;letter-spacing:.06em;color:var(--color-text)}.hero-sub{margin:10px 0 0;font-size:.86rem;color:var(--color-muted);letter-spacing:.08em}.setup{width:min(880px,100%);margin:0 auto;padding:4px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:26px}.setup-heading{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:.95rem;font-weight:700;letter-spacing:.12em;color:var(--color-text-sub)}.setup-step{flex-shrink:0;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border-2);border-radius:50%;font-size:.72rem;color:var(--color-muted)}.setup-heading:after{content:"";flex:1;height:1px;background:var(--color-border)}.card-grid{display:grid;gap:10px}.ship-grid{grid-template-columns:repeat(2,1fr)}.berth-grid{grid-template-columns:repeat(4,1fr)}@media(max-width:700px){.berth-grid{grid-template-columns:repeat(2,1fr)}}.select-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 14px;background:var(--color-panel);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);cursor:pointer;text-align:center;transition:border-color .12s,background .12s,transform .12s}@media(hover:hover){.select-card:hover{border-color:var(--color-border-2);transform:translateY(-2px)}}.select-card.selected{background:#14293a;border-color:var(--color-accent-2);box-shadow:0 0 0 1px var(--color-accent-2),0 6px 18px #00000059}.select-card:focus-visible,.level-btn:focus-visible,.seg-btn:focus-visible,.cta-btn:focus-visible,.ghost-btn:focus-visible{outline:2px solid var(--color-accent-2);outline-offset:2px}.card-title{font-size:.92rem;font-weight:700}.card-desc{font-size:.74rem;color:var(--color-muted);line-height:1.5}.card-spec{font-size:.7rem;color:var(--color-text-sub);letter-spacing:.04em}.ship-silhouette{height:128px;width:auto}.ship-card{padding-top:16px}.berth-chart{width:100%;max-width:150px;border-radius:6px;border:1px solid #2e546b}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.level-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;background:var(--color-panel);border:1px solid var(--color-border);border-radius:10px;color:var(--color-text);cursor:pointer;transition:border-color .12s,background .12s}.level-btn.selected{background:#14293a;border-color:var(--color-accent-2);box-shadow:0 0 0 1px var(--color-accent-2)}.level-no{font-size:.98rem;font-weight:800;letter-spacing:.04em}.level-name{font-size:.66rem;color:var(--color-muted);white-space:nowrap}.level-readout{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.cond-chip{font-size:.76rem;padding:4px 10px;border-radius:999px;border:1px solid var(--color-border-2);background:var(--color-panel-2);color:var(--color-text-sub)}.cond-chip.off{color:var(--color-muted);border-style:dashed}.cond-chip.warn{color:#ffd9a8;border-color:#7a4a1e;background:#2a2013}.cond-chip.note{color:var(--color-muted);background:none;border-color:transparent}.settings-row{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:2px}.settings-label{font-size:.78rem;color:var(--color-muted)}.seg-group{display:inline-flex;border:1px solid var(--color-border-2);border-radius:8px;overflow:hidden}.seg-btn{min-width:52px;padding:6px 12px;background:var(--color-panel);border:none;color:var(--color-muted);font-size:.8rem;cursor:pointer}.seg-btn+.seg-btn{border-left:1px solid var(--color-border-2)}.seg-btn.selected{background:var(--color-accent);color:#fff}@media(min-width:701px)and (max-height:1000px){.title-hero{padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:16px}.hero-compass{width:220px}.setup{gap:18px}.ship-silhouette{height:104px}.berth-chart{max-width:128px}.select-card{padding:10px 10px 12px}.level-btn{padding:8px 4px}}.briefing-root{height:100%;overflow-y:auto;display:flex;flex-direction:column;background:radial-gradient(120% 90% at 50% -20%,#143043 0%,var(--color-bg) 60%)}.briefing-top{width:min(880px,100%);margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 16px 4px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.briefing-back{padding:8px 14px;font-size:.82rem;flex-shrink:0}.briefing-title{min-width:0}.briefing-eyebrow{display:block;font-size:.62rem;font-weight:600;letter-spacing:.38em;color:var(--color-muted)}.briefing-title h2{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:.05em}.mission-chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}.mission-chip{font-size:.74rem;padding:4px 10px;border-radius:999px;border:1px solid var(--color-border-2);background:var(--color-panel-2);color:var(--color-text-sub);white-space:nowrap}@media(max-width:700px){.mission-chips{margin-left:0;width:100%}.briefing-hint{display:none}}.briefing-grid{flex:1;width:min(880px,100%);margin:0 auto;padding:10px 16px 24px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;align-content:start}@media(max-width:700px){.briefing-grid{grid-template-columns:1fr}}.briefing-section{background:var(--color-panel);border:1px solid var(--color-border);border-radius:12px;padding:14px 16px 16px}.section-heading{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:.84rem;font-weight:700;letter-spacing:.12em;color:var(--color-text-sub)}.section-heading:after{content:"";flex:1;height:1px;background:var(--color-border)}.section-caption{margin:8px 0 0;font-size:.74rem;color:var(--color-muted);line-height:1.6}.briefing-diagram{display:block;width:100%;max-width:360px;margin:0 auto;height:auto;aspect-ratio:280 / 180;border:1px solid #2e546b;border-radius:8px}.forecast-note{color:#d4a04f;font-size:.76rem;margin:0 0 10px;line-height:1.6}.cond-stat{margin:0 0 12px}.cond-stat-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}.cond-stat-label{font-size:.78rem;color:var(--color-muted);letter-spacing:.08em}.cond-stat-value{font-size:.95rem;font-weight:700;color:var(--color-text-sub)}.strength-meter{position:relative;height:8px;border-radius:4px;background:#0d1822;border:1px solid var(--color-border);overflow:hidden}.strength-fill{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#2a7fb8,#d96a24)}.ship-notes{margin:0;padding-left:20px;font-size:.86rem;line-height:1.7}.ship-notes li{margin:4px 0}.windsock-legend{display:block;width:100%;max-width:340px;margin:4px 0 0;border:1px solid #2e546b;border-radius:6px}.kbd-map{--kbd-u: 38px;--kbd-gap: 4px;display:flex;gap:14px;align-items:flex-end;margin:8px 0 6px}.kbd-main,.kbd-arrows{display:flex;flex-direction:column;gap:var(--kbd-gap)}.kbd-row{display:flex;gap:var(--kbd-gap)}.kbd-row-2{margin-left:calc(var(--kbd-u) * .3)}.kbd-row-3{margin-left:calc(var(--kbd-u) * .65)}.kbd-arrows-top{margin-left:calc(var(--kbd-u) + var(--kbd-gap))}.kbd-key{width:var(--kbd-u);height:calc(var(--kbd-u) + 6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#16232d;border:1px solid #46586475;border-radius:6px;box-shadow:inset 0 -2px 0 var(--gc, transparent)}.kbd-cap{font-size:.72rem;font-weight:600;color:#e8e4da;line-height:1}.kbd-fn{font-size:.44rem;color:var(--gc);line-height:1;white-space:nowrap}.kbd-off{opacity:.28}.kbd-lever{--gc: #69d2ff}.kbd-port{--gc: #7fd47f}.kbd-stbd{--gc: #e8b45f}.kbd-steer{--gc: #c792ea}.kbd-bow{--gc: #5fd8c9}.kbd-stern{--gc: #f2879b}.kbd-mod{--gc: #8fa4b2}.kbd-view{--gc: #7fb3a0}@media(max-width:1000px){.kbd-map{display:none}}.result-root{height:100%;overflow-y:auto;display:flex;justify-content:center;align-items:flex-start;padding:calc(24px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom))}.result-card{width:min(680px,100%);background:#101a21;border:1px solid #2c3a44;border-radius:10px;padding:20px}@media(max-width:700px){.result-card{background:none;border:none;border-radius:0;padding:4px 2px}}.result-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;border-bottom:1px solid #2c3a44;padding-bottom:12px}.outcome{font-size:1.3rem}.outcome.ok{color:#7fd47f}.outcome.failed{color:#d47f7f}.total-score{font-size:1.6rem;font-variant-numeric:tabular-nums}.fail-reason{color:#ffb0a0;margin:10px 0 0}.feedback-comment{margin:12px 0 0;padding:10px 12px;background:#16222b;border-left:3px solid #f2c14e;border-radius:4px;color:#d8e2e8;line-height:1.6}.score-main{margin:18px 0;padding:14px;background:#16222b;border:1px solid #34434e;border-radius:8px}.score-main-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:10px}.score-main-label{font-size:1.05rem}.score-main-value{font-size:1.7rem;font-variant-numeric:tabular-nums}.score-main-points{margin-left:auto;font-size:1.1rem;color:#cfe3ef}.drift-timeline{position:relative;height:16px;background:#0c141a;border-radius:4px;overflow:hidden}.drift-seg{position:absolute;top:0;bottom:0}.drift-seg.neglected{background:#a3552f}.drift-seg.corrected{background:#7fd47f}.score-row{display:grid;grid-template-columns:9em 1fr auto;gap:8px;padding:7px 4px;border-bottom:1px solid #1c2831;font-size:.92rem}.score-row>span:last-child{font-variant-numeric:tabular-nums;color:#cfe3ef}@media(max-width:700px){.score-row{grid-template-columns:1fr auto}.score-row>span:nth-child(2){grid-column:1 / -1;grid-row:2;color:#9fb3c0}}.conditions{margin-top:16px}.conditions h3{font-size:.95rem;color:#8fa4b2;margin:0 0 6px}.replay-root{position:fixed;inset:0;display:flex;flex-direction:column;background:#10222e}.replay-top{min-height:44px;display:flex;align-items:center;gap:12px;padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top));background:#101a21;border-bottom:1px solid #2c3a44;font-size:.8rem;overflow-x:auto;white-space:nowrap}.view-switch{display:flex;gap:4px;align-items:center;color:#8fa4b2}.overlay-toggles{display:flex;gap:8px;color:#9fb3c0;font-size:.72rem}.overlay-toggles label{display:flex;align-items:center;gap:2px;cursor:pointer}.replay-main{flex:1;display:flex;min-height:0}.replay-canvas{flex:1;min-width:0;min-height:0;display:block}.replay-graphs{width:260px;display:flex;flex-direction:column;border-left:1px solid #2c3a44}.graph-canvas{flex:1;width:100%;min-height:0}.replay-transport{min-height:48px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;padding-bottom:calc(6px + env(safe-area-inset-bottom));background:#101a21;border-top:1px solid #2c3a44}.seek-wrap{flex:1 1 240px;min-width:200px;position:relative;display:flex;align-items:center}.seek-bar{width:100%}.seek-markers{position:absolute;left:0;right:0;top:-6px;height:8px;pointer-events:none}.marker{position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;margin-left:-4px}.marker.drift{border-top:7px solid #e0813a}.marker.corrected{border-top:7px solid #7fd47f}.marker.contact{border-top:7px solid #ff5f56}.time-label{font-variant-numeric:tabular-nums;color:#cfe3ef}@media(orientation:portrait){.replay-top{flex-wrap:wrap;white-space:normal;row-gap:4px;overflow-x:visible}.overlay-toggles{flex-wrap:wrap}.replay-main{flex-direction:column}.replay-graphs{width:100%;flex:none;height:200px;border-left:none;border-top:1px solid #2c3a44}}.records-root{height:100%;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));gap:10px}.records-header{display:flex;align-items:center;gap:14px}.records-header h2{margin:0;font-size:1.1rem;flex:1}.records-table-wrap{flex:1;overflow:auto}.records-table{width:100%;border-collapse:collapse;font-size:.82rem}.records-table th,.records-table td{padding:6px 8px;border-bottom:1px solid #1c2831;text-align:left;white-space:nowrap}.records-table th{color:#8fa4b2;font-weight:400;position:sticky;top:0;background:#10222e}.records-table .em{color:#ffd166}.records-table .empty{text-align:center;color:#5d707d;padding:30px}.record-actions{display:flex;gap:4px}.records-cards{display:none;flex:1;overflow-y:auto;flex-direction:column;gap:8px}.record-card{background:#101a21;border:1px solid #2c3a44;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:.82rem}.record-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#cfe3ef}.record-card-date{color:#8fa4b2}.record-card-body{display:flex;flex-wrap:wrap;gap:2px 14px;color:#9fb3c0}.record-card .em{color:#ffd166}.records-cards .empty{text-align:center;color:#5d707d;padding:30px}@media(max-width:700px){.records-table-wrap{display:none}.records-cards{display:flex}}