:root{--paper:#f4ecdc;--paper-2:#ebe0c9;--card:#fbf7ee;--ink:#1f1a17;--ink-2:#5b5047;--ink-3:#8a7d70;--rule:#d8cab0;--accent:#8c2f2b;--accent-2:#b5432f;--brass:#a8834a;--ok:#3f7a4a;--bad:#a3372e;--sea:#b9cdd6;--sea-line:#9ab3bf;--land:#ede1c6;--land-line:#a48e6c;--neutral:#d2c8b5;--map-label:#6a5b4a;--sea-label:#567585;--shadow:0 1px 2px #28190a14, 0 6px 24px #28190a14;--serif:"Cormorant Garamond", "EB Garamond", Georgia, serif;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#17130f;--paper-2:#211b16;--card:#231d18;--ink:#efe6d6;--ink-2:#c2b5a2;--ink-3:#8f8371;--rule:#3a3129;--accent:#d0675c;--accent-2:#e07b62;--brass:#c8a46a;--ok:#7dbb84;--bad:#e2786b;--sea:#1f3440;--sea-line:#2c4855;--land:#3a3226;--land-line:#6d5c44;--neutral:#2b2621;--map-label:#cdbb9c;--sea-label:#8fb3c4;--shadow:0 1px 2px #0000004d, 0 6px 24px #0000004d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--paper);color:var(--ink);font:15.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--serif);letter-spacing:.01em;margin:0 0 .4em;font-weight:600}h2{font-size:1.65rem;line-height:1.15}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}code{background:var(--paper-2);border:1px solid var(--rule);white-space:nowrap;border-radius:4px;padding:.12em .35em;font:600 .82em/1 ui-monospace,Cascadia Mono,Consolas,monospace}select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:.3em .5em;font-size:.88rem}.primary,.ghost{border:1px solid #0000;border-radius:999px;padding:.5em 1.15em;font-size:.92rem;font-weight:600;transition:background .15s,transform 50ms}.primary{background:var(--accent);color:#fff8ef}.primary:not(:disabled):hover{background:var(--accent-2)}.primary:not(:disabled):active{transform:translateY(1px)}.ghost{border-color:var(--rule);background:0 0}.ghost:not(:disabled):hover{background:var(--paper-2)}.ghost.sm{padding:.25em .8em;font-size:.85rem}.link{color:var(--accent);background:0 0;border:none;padding:0;font-size:.88rem;font-weight:600}.link:hover{text-decoration:underline}.row{flex-wrap:wrap;align-items:center;gap:.6rem;margin:.9rem 0;display:flex}.small{font-size:.82rem}.muted{color:var(--ink-3)}.home{color:#f4ead6;background:#120a08;min-height:100vh;position:relative;overflow:hidden}.backdrop{width:100%;height:100%;position:absolute;inset:0}.home:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0e0806eb 0%,#0e0806c7 34%,#0e08061a 70%,#0e080600 100%);position:absolute;inset:0}.seal-letter{font-family:var(--serif);fill:#00000059;font-weight:700}.menu{z-index:1;max-width:560px;padding:9vh 5vw 4rem;position:relative}.crest{font-family:var(--serif);letter-spacing:.35em;text-transform:uppercase;color:#c9a86a;font-size:.82rem}.menu h1{color:#f8efdc;margin:.35em 0 .25em;font-size:clamp(2.6rem,6vw,4.4rem);font-weight:600;line-height:1}.lede{font-family:var(--serif);color:#d8c8aa;margin:0 0 2.2rem;font-size:1.3rem;font-style:italic}.menu-list,.lesson-list{flex-direction:column;gap:.85rem;margin:0;padding:0;list-style:none;display:flex}.menu-item,.lesson-list button{text-align:left;color:#f4ead6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#f4ead60f;border:1px solid #c9a86a47;border-radius:10px;align-items:center;gap:1rem;width:100%;padding:1rem 1.15rem;transition:background .15s,border-color .15s,transform .15s;display:flex}.menu-item:hover,.lesson-list button:hover{background:#f4ead61f;border-color:#c9a86a99;transform:translate(4px)}.menu-seal{background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal) 75%, white), var(--seal) 55%, color-mix(in srgb, var(--seal) 70%, black));width:52px;height:52px;font-family:var(--serif);color:#fff0dcd9;border-radius:50%;flex:none;place-items:center;font-size:1.3rem;font-weight:700;display:grid;box-shadow:inset 0 0 0 4px #0000002e,0 3px 8px #00000080}.menu-text{flex-direction:column;flex:1;gap:.1rem;min-width:0;display:flex}.menu-title{font-family:var(--serif);font-size:1.55rem;font-weight:600;line-height:1.1}.menu-sub{color:#cbbb9e;font-size:.88rem}.menu-progress,.lcheck{color:#c9a86a;font-variant-numeric:tabular-nums;font-size:.8rem}.lnum{width:34px;height:34px;font-family:var(--serif);color:#c9a86a;border:1px solid #c9a86a99;border-radius:50%;flex:none;place-items:center;font-weight:700;display:grid}.lesson-list button.done .lnum{color:#1a100c;background:#c9a86a}.menu.track h1{font-size:clamp(2.2rem,5vw,3.4rem)}.fine{color:#9b8b72;max-width:420px;margin-top:3rem;font-size:.75rem}.back{color:var(--ink-2);background:0 0;border:none;padding:0;font-size:.9rem}.back.light{color:#c9a86a;margin-bottom:1.6rem}.back:hover{text-decoration:underline}.lesson{flex-direction:column;min-height:100vh;display:flex}.lesson-head{border-bottom:1px solid var(--rule);background:var(--card);align-items:center;gap:1.2rem;padding:.7rem 1.4rem;display:flex}.lesson-title{font-family:var(--serif);flex:1;font-size:1.25rem;font-weight:600}.dots{flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:45%;display:flex}.dots span{background:var(--rule);border-radius:50%;width:8px;height:8px}.dots span.done{background:var(--brass)}.dots span.on{background:var(--accent);transform:scale(1.3)}.stage{flex:1;grid-template-columns:minmax(0,1fr) 430px;min-height:0;display:grid}.map-wrap{background:var(--paper-2);justify-content:center;align-items:center;min-height:0;padding:1rem;display:flex}.panel{border-left:1px solid var(--rule);background:var(--card);flex-direction:column;max-height:calc(100vh - 54px);display:flex}.panel-body{flex:1;padding:1.4rem 1.5rem 1rem;overflow-y:auto}.panel-nav{border-top:1px solid var(--rule);padding:.75rem 1.5rem}.nav{align-items:center;gap:.8rem;display:flex}.nav .primary{margin-left:auto}.step-count{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:.82rem}.phase-tag,.task-label{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;font-size:.72rem;font-weight:700;display:inline-block}.rich p{margin:0 0 .75em}.rich ul,.rich ol{margin:0 0 .75em;padding-left:1.25em}.rich li{margin:.2em 0}.chip{background:color-mix(in srgb, var(--brass) 22%, transparent);color:var(--ink);cursor:help;border:1px solid color-mix(in srgb, var(--brass) 45%, transparent);border-radius:4px;padding:.22em .4em;font:700 .76em/1 ui-monospace,Consolas,monospace;display:inline-block}.picked{flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem;display:flex}.choices{flex-direction:column;gap:.55rem;margin:1rem 0;display:flex}.choice button{text-align:left;background:var(--paper);border:1px solid var(--rule);border-radius:10px;align-items:flex-start;gap:.75rem;width:100%;padding:.7rem .85rem;transition:border-color .15s,background .15s;display:flex}.choice button .rich p{margin:0}.choice button:not(:disabled):hover{border-color:var(--brass);background:var(--card)}.choice-letter{border:1px solid var(--rule);width:1.6rem;height:1.6rem;font-family:var(--serif);color:var(--ink-2);border-radius:50%;flex:none;place-items:center;font-size:.95rem;font-weight:700;display:grid}.choice.right button{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 10%, var(--card));opacity:1}.choice.right .choice-letter{background:var(--ok);color:#fff;border-color:var(--ok)}.choice.wrong button{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 8%, var(--card));opacity:1}.choice.wrong .choice-letter{background:var(--bad);color:#fff;border-color:var(--bad)}.choice.dim button{opacity:.5}.why{color:var(--ink-2);padding:.55rem .85rem .1rem 3.2rem;font-size:.92rem}.verdict{margin:.8rem 0;font-weight:700}.verdict.ok{color:var(--ok)}.verdict.bad{color:var(--bad)}.hint{border-left:3px solid var(--brass);background:color-mix(in srgb, var(--brass) 10%, transparent);border-radius:0 8px 8px 0;margin:.7rem 0;padding:.55rem .8rem;font-size:.92rem}.hint .rich p:last-child{margin:0}.reveal-cap{font-family:var(--serif);margin:.5rem 0 .2rem;font-size:1.15rem;font-style:italic}.order-list{flex-wrap:wrap;gap:.35rem;margin:.4rem 0;padding:0;list-style:none;display:flex}.fails{color:var(--bad);padding-left:1.1em;font-size:.9rem}.tasks{flex-direction:column;gap:.45rem;margin:1rem 0;padding:0;list-style:none;display:flex}.tasks li{border:1px solid var(--rule);background:var(--paper);cursor:pointer;border-radius:10px;align-items:center;gap:.7rem;padding:.55rem .75rem;display:flex}.tasks li .rich p{margin:0}.tasks li code{margin-left:auto}.tasks li.current{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}.tasks li.done{opacity:.75;cursor:default}.tick{border:1px solid var(--rule);width:1.55rem;height:1.55rem;color:var(--ink-2);border-radius:50%;flex:none;place-items:center;font-size:.8rem;font-weight:700;display:grid}.tasks li.done .tick{background:var(--ok);border-color:var(--ok);color:#fff}.tasks li.current .tick{border-color:var(--accent);color:var(--accent)}.orderpad{flex-direction:column;gap:.35rem;margin:.9rem 0;display:flex}.orow{cursor:pointer;border:1px solid #0000;border-radius:8px;flex-wrap:wrap;align-items:center;gap:.55rem;padding:.45rem .6rem;display:flex}.orow.focus{border-color:var(--rule);background:var(--paper)}.dot{border-radius:50%;flex:none;width:10px;height:10px;box-shadow:0 0 0 1px #0003}.results{border:1px solid var(--rule);border-radius:10px;margin-top:.8rem;overflow:hidden}.results-head{background:var(--paper-2);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);justify-content:space-between;align-items:center;padding:.45rem .7rem;font-size:.75rem;font-weight:700;display:flex}.results ul{margin:0;padding:.3rem 0;list-style:none}.results li{grid-template-columns:auto auto 1fr;align-items:baseline;gap:.5rem;padding:.3rem .7rem;font-size:.86rem;display:grid}.results li .rich p{margin:0}.results li.bad code{text-decoration:line-through;-webkit-text-decoration-color:var(--bad);text-decoration-color:var(--bad)}.results .note{color:var(--ink-2)}.far{border-top:1px solid var(--rule)}.far summary{cursor:pointer;color:var(--ink-3);padding:.45rem .7rem;font-size:.8rem}.debrief{margin:.2rem 0 1rem}.seg{border:1px solid var(--rule);border-radius:999px;display:inline-flex;overflow:hidden}.seg button{letter-spacing:.02em;text-transform:none;background:0 0;border:none;padding:.2em .75em;font-size:.75rem;font-weight:600}.seg button.on{background:var(--ink);color:var(--card)}.seg.scen{margin:.4rem 0}.seg.scen .fail:not(.on){color:var(--bad)}.dispatches{flex-direction:column;gap:.7rem;margin:.4rem 0 1rem;display:flex}.dispatch{color:#2b2117;box-shadow:var(--shadow);border-left:4px solid var(--pc);background:linear-gradient(135deg,#f8efd9,#efe2c3);border-radius:4px;padding:.8rem 1rem .9rem;position:relative}.dispatch p{font-family:var(--serif);margin:.3rem 0 0;font-size:1.12rem;font-style:italic;line-height:1.35}.dispatch-from{letter-spacing:.1em;text-transform:uppercase;color:#6b5843;align-items:center;gap:.5rem;font-size:.72rem;display:flex}.seal{background:var(--pc);border-radius:50%;width:14px;height:14px;box-shadow:inset 0 0 0 2px #0003}.ending{border:1px solid var(--rule);background:var(--paper);border-radius:10px;margin-top:1rem;padding:1rem}.ending.good{border-color:var(--ok)}.ending.bad{border-color:var(--bad)}.ending-tag{font-family:var(--serif);margin-bottom:.4rem;font-size:1.4rem;font-weight:700}.ending.good .ending-tag{color:var(--ok)}.ending.bad .ending-tag{color:var(--bad)}.map-box{width:100%;height:calc(100vh - 54px - 2rem)}.map{width:100%;height:100%;box-shadow:var(--shadow);border-radius:8px;display:block}.sea-bg{fill:var(--sea)}.prov{stroke-width:.9px;stroke-linejoin:round;transition:fill .15s}.prov.sea{fill:var(--sea);stroke:var(--sea-line)}.prov.land,.prov.coast{fill:var(--land);stroke:var(--land-line)}.prov[data-owned]{fill:color-mix(in srgb, var(--own) 32%, var(--land))}.prov.impassable{fill:url(#hatch);stroke:var(--land-line)}.hatch-line{stroke:var(--land-line);stroke-width:1.2px}.neutral{fill:var(--neutral);stroke:var(--land-line);stroke-width:.5px}.coastline{fill:none;stroke:color-mix(in srgb, var(--land-line) 80%, black);stroke-width:1.1px;pointer-events:none}.prov.clickable{cursor:pointer}.prov.clickable:hover{filter:brightness(1.06)}.prov.hl{stroke:#f0b429;stroke-width:2px;fill:color-mix(in srgb, #f3c552 40%, var(--land))!important}.prov.sea.hl{fill:color-mix(in srgb, #f0b429 35%, var(--sea))!important}.prov.sel{stroke:#fff4cf;stroke-width:3px;fill:color-mix(in srgb, #f6d77a 75%, var(--land))!important}.prov.sea.sel{fill:color-mix(in srgb, #f6d77a 55%, var(--sea))!important}.sc{fill:var(--card);stroke:var(--ink);stroke-width:1.2px;pointer-events:none}.plabel{font:700 9.5px var(--sans);fill:var(--map-label);text-anchor:middle;pointer-events:none;letter-spacing:.04em}.plabel.sea{fill:var(--sea-label);font-style:italic;font-weight:600}.unit{pointer-events:none}.unit circle,.unit path{stroke:#fff;stroke-width:1.6px}.unit-letter{font:800 10px var(--sans);fill:#fff;text-anchor:middle}.unit.dislodged{opacity:.85}.dislodged-x{stroke:var(--bad);stroke-width:3px;fill:none}.unit-focus{stroke-dasharray:4 3;animation:6s linear infinite spin;fill:none!important;stroke:var(--accent)!important;stroke-width:2.5px!important}@keyframes spin{to{transform:rotate(360deg)}}.arrow line,.arrow path{stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round}.arrow.convoyed path{stroke-dasharray:9 5}.convoy-ring{fill:none;stroke-width:2px;stroke-dasharray:2 4}.arrow.support line{stroke-width:2px;stroke-dasharray:5 4}.arrow.convoy line{stroke-width:2px;stroke-dasharray:1 5}.arrow.failed line,.arrow.failed path{opacity:.85;stroke:var(--ink-3)!important}.hold-ring{fill:none;stroke-width:2.2px}.arrow.failed.hold-ring{stroke:var(--ink-3)!important}.fail-head{fill:var(--ink-3)}.fail-x{fill:var(--bad);font:800 13px var(--sans);text-anchor:middle}@media (width<=900px){.stage{grid-template-columns:1fr}.map-wrap{z-index:2;padding:.5rem;position:sticky;top:0}.map-box{height:46vh}.panel{border-left:none;border-top:1px solid var(--rule);max-height:none}.panel-nav{background:var(--card);position:sticky;bottom:0}.lesson-head{gap:.7rem;padding:.6rem 1rem}.dots{display:none}.menu{padding:7vh 16px 3rem}.home:after{background:linear-gradient(#0e080699,#0e0806e6)}}.map-box{position:relative}.map-status{z-index:3;background:color-mix(in srgb, var(--card) 92%, transparent);max-width:calc(100% - 24px);color:var(--ink);border:1px solid var(--rule);box-shadow:var(--shadow);pointer-events:none;text-align:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:999px;padding:.35rem .9rem;font-size:.85rem;font-weight:600;position:absolute;top:10px;left:50%;transform:translate(-50%)}.map-dock{z-index:4;max-width:calc(100% - 20px);position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.order-menu .who{color:var(--ink-3);white-space:nowrap;align-self:center;padding:0 .6rem 0 .4rem;font-size:.8rem}.order-menu{background:var(--card);border:1px solid var(--rule);border-radius:10px;flex-wrap:wrap;justify-content:center;gap:2px;padding:3px;animation:.12s ease-out pop;display:flex;box-shadow:0 6px 22px #00000047}@keyframes pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}.order-menu button{white-space:nowrap;background:0 0;border:none;border-radius:7px;align-items:center;gap:.35rem;padding:.38rem .6rem;font-size:.85rem;font-weight:600;display:flex}.order-menu button:not(:disabled):hover{background:var(--paper-2)}.order-menu button.on{background:var(--ink);color:var(--card);cursor:default}.order-menu button.on kbd{color:var(--card);border-color:color-mix(in srgb, var(--card) 40%, transparent)}.order-menu button.x{color:var(--ink-3);padding:.3rem .5rem;font-size:1rem}.order-menu kbd{color:var(--ink-3);border:1px solid var(--rule);border-radius:4px;padding:.12rem .25rem;font:700 .68rem/1 ui-monospace,Consolas,monospace}.howto{background:color-mix(in srgb, var(--accent) 7%, transparent);border:1px dashed color-mix(in srgb, var(--accent) 35%, transparent);border-radius:10px;margin:0 0 .6rem;padding:.55rem .8rem;font-size:.92rem}.howto .rich p{margin:0}.unorder{color:var(--ink-3);background:0 0;border:none;margin-left:auto;padding:0 .3rem;font-size:1.1rem}.unorder:hover{color:var(--bad)}.prov.hl.clickable:hover{filter:brightness(1.12)}
