:root{color-scheme:dark;--bg:#081823;--panel:#102936;--line:#29414e;--text:#ecf0e6;--muted:#a2b4ba;--a:#70ddd3;--b:#ffd178;--danger:#ff9690;font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 5%,#15313c 0,transparent 60%),var(--bg);color:var(--text);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:5px}button:disabled{cursor:default;opacity:.43}button:not(:disabled):active{transform:translateY(2px)}[hidden]{display:none!important}#app{max-width:1080px;margin:auto;padding:0 36px}.masthead{display:flex;align-items:center;justify-content:space-between;min-height:105px;border-bottom:1px solid var(--line);gap:15px}.brand{display:flex;gap:13px;text-decoration:none;color:var(--text);font-size:19px;font-weight:700;align-items:center}.brand-mark{font-size:39px;color:var(--b);transform:rotate(-90deg)}.brand small{display:block;letter-spacing:.24em;font-size:9px;color:var(--muted);margin-top:5px}.tools{display:flex;gap:8px}.quiet{color:var(--text);border:1px solid var(--line);border-radius:7px;background:transparent;min-height:42px;padding:8px 16px;font-size:13px}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--a);margin:0 0 18px;font-weight:700}.title-screen{display:grid;grid-template-columns:1fr 1fr;gap:15px 28px;padding-top:62px}.intro h1{font-family:serif;font-weight:500;font-size:clamp(45px,5.9vw,74px);letter-spacing:.08em;line-height:1.3;margin:0 0 22px}.intro h1 em{font-style:normal;color:var(--b)}.lead{font-size:16px;line-height:1.95;color:var(--muted);margin-bottom:30px}.primary{display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--a);color:#092a30;font-weight:700;padding:20px 25px;border-radius:7px;min-height:60px;font-size:16px}.primary span{font-size:24px}.session-note{color:var(--muted);font-size:11px;letter-spacing:.04em;margin-top:14px}.hero-art{align-self:center}.hero-art svg{width:100%;display:block}.art-caption{display:block;text-align:center;font-size:11px;color:var(--muted);letter-spacing:.15em}.rules{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--line);margin-top:40px;padding-top:30px}.rules b{color:var(--a);font-size:11px}.rules b span{color:var(--text);font-size:15px;margin-left:12px}.rules p{font-size:13px;line-height:1.9;color:var(--muted)}footer{display:flex;justify-content:space-between;color:#78929e;letter-spacing:.1em;font-size:9px;padding:32px 0 22px;margin-top:25px;border-top:1px solid var(--line);gap:10px}.voyage-heading{display:flex;justify-content:space-between;align-items:center;padding-top:25px}.voyage-heading .eyebrow{margin-bottom:7px}.voyage-heading h1{font-size:26px;font-weight:500;letter-spacing:.05em;margin:0}.progress-stats{display:flex;gap:38px}.progress-stats>span{color:var(--muted);font-size:11px}.progress-stats strong{display:block;color:var(--text);font-size:29px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}.progress-stats small{font-size:14px;color:var(--muted);margin-left:3px}.progress-track{height:3px;background:#213742;margin-top:18px}.progress-track>div{height:100%;background:var(--a);transition:width .2s;width:0}.next-strip{display:flex;justify-content:space-between;margin:11px 0 18px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.dock-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dock{background:linear-gradient(135deg,#14333e,#0e2632);border:1px solid #284851;border-radius:10px;padding:17px 22px;position:relative;min-height:140px}.dock-b{background:linear-gradient(135deg,#2e3029,#172b30);border-color:#4d4b3a}.dock-heading{display:flex;justify-content:space-between;align-items:center;gap:6px}.dock h2{font-size:15px;font-weight:500;margin:0}.dock h2 span{color:var(--a);font-size:12px;border:1px solid #467d7c;padding:3px 7px;border-radius:4px;margin-right:8px}.dock-b h2 span{color:var(--b);border-color:#8d784d}.dock-heading>span{font-size:11px;color:var(--muted)}.deadline{font-size:34px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--a);margin-top:10px}.deadline small{font-size:13px;margin-left:5px;color:var(--muted)}.dock-b .deadline{color:var(--b)}.dock p{font-size:11px;color:var(--muted);margin:4px 0 0}.dock.urgent .deadline,.dock.urgent p{color:var(--danger)}.waiting{position:absolute;right:20px;bottom:18px;display:flex;gap:4px}.waiting i{display:block;width:7px;height:13px;background:var(--a);border-radius:3px}.dock-b .waiting i{background:var(--b)}.sea-panel{position:relative;margin-top:14px;border:1px solid #24404c;border-radius:12px;overflow:hidden;background:#091f2c}canvas{width:100%;display:block;aspect-ratio:1000/280}.crossing-status{position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#0a1b26e8;border:1px solid #385563;border-radius:30px;font-size:11px;padding:7px 12px;color:var(--a);display:flex;gap:7px;align-items:center}.crossing-status i{height:6px;width:6px;border-radius:50%;background:currentColor}.crossing-status.busy{color:var(--b)}#pauseLayer{position:absolute;inset:0;background:#091e2bf2;display:flex;flex-direction:column;align-items:center;justify-content:center}#pauseLayer strong{font-size:25px;font-weight:500}#pauseLayer p{font-size:13px;color:var(--muted);margin:12px 0 20px}#pauseLayer .primary{padding:10px 25px;min-height:45px;font-size:14px}#notice{font-size:13px;color:var(--b);min-height:40px;margin:12px 0 0;line-height:1.65}.controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}.release{min-height:78px;padding:13px 23px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;color:#092930;background:var(--a);text-align:left}.release.b{background:var(--b);color:#382c13}.release>span{font-size:19px;font-weight:700}.release small{font-size:11px;opacity:.9}.release kbd{margin-left:8px;font:inherit;border:1px solid currentColor;border-radius:3px;padding:2px 5px}.keyboard-help{font-size:10px;color:var(--muted);text-align:center;margin:14px 0 0}.result-screen{text-align:center;padding:50px 0 25px}.result-screen .eyebrow{margin-bottom:20px}#medal{font-size:80px;color:var(--b);line-height:1.2}.result-screen h1{font-size:40px;font-weight:500;margin:14px 0}.result-screen>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.8}.result-stats{display:flex;justify-content:center;gap:65px;margin:35px 0;padding:28px 15px;border-block:1px solid var(--line)}.result-stats>div{font-size:12px;color:var(--muted)}.result-stats strong{display:block;font-weight:500;font-size:32px;color:var(--text);margin-top:8px;font-variant-numeric:tabular-nums}.result-tip{margin:10px auto 30px;max-width:520px}.result-screen>.primary{margin:auto;min-width:300px}.text-button{display:block;margin:20px auto 0;background:none;color:var(--muted);text-decoration:underline;padding:12px;font-size:13px}@media(max-width:650px){#app{padding:0 18px}.masthead{min-height:76px}.brand{font-size:15px;gap:8px}.brand-mark{font-size:29px}.brand small{font-size:7px}.quiet{padding:7px 10px;font-size:11px;min-height:40px}.tools{gap:5px}.title-screen{padding-top:35px;gap:20px;grid-template-columns:1fr}.intro{position:relative;z-index:1}.intro .eyebrow{font-size:8px}.intro h1{font-size:53px;margin-bottom:15px}.lead{font-size:14px;margin-bottom:20px}.intro .primary{width:100%}.hero-art{position:absolute;right:0;top:125px;width:50%;opacity:.38;pointer-events:none;z-index:0}.art-caption{display:none}.rules{grid-column:1;grid-template-columns:1fr;gap:9px;padding-top:22px;margin-top:10px}.rules article{border-bottom:1px solid #1a3542;padding-bottom:8px}.rules p{font-size:12px;margin:8px 0}.rules b span{font-size:14px}footer{font-size:8px;letter-spacing:0;margin-top:20px;padding-top:20px;padding-bottom:max(18px,env(safe-area-inset-bottom))}.voyage-heading{padding-top:19px}.voyage-heading h1{font-size:22px}.voyage-heading .eyebrow{font-size:8px}.progress-stats{gap:22px}.progress-stats strong{font-size:25px}.progress-stats small{font-size:12px}.dock-grid,.controls{gap:10px}.dock{padding:12px;min-height:132px}.dock h2{font-size:12px}.dock h2 span{font-size:10px;margin-right:4px;padding:2px 5px}.dock-heading>span{font-size:9px}.deadline{font-size:30px}.dock p{font-size:10px}.waiting{bottom:11px;right:12px}.waiting i{width:5px;height:8px}canvas{aspect-ratio:1000/470}.crossing-status{top:9px;font-size:10px;padding:6px 10px}#notice{font-size:11px;min-height:44px}.release{min-height:78px;padding:12px 14px;display:block}.release>span{font-size:18px}.release small{display:block;margin-top:5px;font-size:10px}.release kbd{display:none}.keyboard-help{font-size:9px;line-height:1.7}.next-strip{font-size:10px;margin-bottom:13px}#pauseLayer strong{font-size:21px}#pauseLayer p{font-size:11px;margin:8px 0 12px}.result-screen{padding-top:32px}.result-screen h1{font-size:30px}.result-stats{gap:35px;margin:25px 0}.result-stats strong{font-size:27px}.result-screen>p:not(.eyebrow){font-size:12px}.result-screen>.primary{min-width:0;width:100%}}@media(max-height:760px) and (min-width:651px){.masthead{min-height:75px}.voyage-heading{padding-top:16px}.dock{min-height:115px;padding:11px 20px}.deadline{font-size:28px;margin-top:6px}canvas{aspect-ratio:1000/235}.release{min-height:65px}footer{margin-top:16px;padding:15px 0}.title-screen{padding-top:35px}.intro h1{font-size:58px}.rules{margin-top:20px;padding-top:20px}}
