:root{--ink:#162f3d;--sea:#254b58;--blue:#316d7f;--paper:#f1e9d3;--cream:#fff9e9;--red:#ae4936;--line:#b4b7a6;font-size:16px}*{box-sizing:border-box}body{margin:0;background:#d7ded3;color:var(--ink);font-family:ui-monospace,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;line-height:1.6}button,select,textarea{font:inherit}button,a,summary,select{min-height:44px}button{border:1px solid var(--ink);background:var(--cream);color:var(--ink);padding:.55rem .8rem;cursor:pointer;box-shadow:2px 2px 0 #9faeaa}button:hover{background:#e1eadc}button:disabled{opacity:.55;cursor:default;box-shadow:none}button.primary{background:var(--red);color:#fff8e7}a{color:var(--ink);display:inline-flex;align-items:center;padding:.35rem .2rem}button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #bc523b;outline-offset:3px}.frame{max-width:1240px;margin:auto;padding:1rem}header{display:flex;gap:1rem;align-items:center;justify-content:space-between;border-bottom:3px double var(--ink);padding-bottom:.65rem}.brand small{display:block;letter-spacing:.16em;font-size:.75rem}.brand h1{font-size:1.7rem;margin:0;letter-spacing:.07em}nav{display:flex;gap:.35rem;flex-wrap:wrap;margin:1rem 0}nav button[aria-current=page]{background:var(--ink);color:var(--cream)}.paper{background:var(--paper);border:1px solid var(--line);padding:1rem;box-shadow:3px 3px 0 #bac5b9}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem}.side{display:grid;gap:1rem;align-content:start}.headline{display:flex;gap:1rem;justify-content:space-between;align-items:start}h2{font-size:1.25rem;margin:0 0 .65rem}h3{font-size:1rem;margin:.2rem 0}.caption{font-size:.875rem}.stamp{display:inline-block;border:2px solid var(--red);color:var(--red);padding:.3rem .65rem;font-weight:bold;white-space:nowrap}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:1rem 0}.stat{background:var(--cream);padding:.55rem;border-top:2px solid var(--blue)}.stat span{font-size:.75rem;display:block}.stat strong{font-size:1.15rem}.chart{height:300px;background:var(--sea);position:relative;color:var(--cream);overflow:hidden;border:4px solid #719591}.chart svg{position:absolute;width:100%;height:100%}.port{position:absolute;transform:translate(-50%,-50%);text-align:center;font-size:.75rem;max-width:6rem}.port b{display:block;padding:.1rem .4rem;background:var(--ink)}.port.current b{background:var(--red)}.dot{display:block;width:16px;height:16px;border:3px solid #e8dfb8;background:#558a8a;margin:auto;border-radius:50%}.routes{display:grid;gap:.6rem;margin-top:1rem}.route{border:1px solid var(--line);padding:.75rem;background:var(--cream);display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}.route p{margin:.2rem 0;font-size:.875rem}.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.package{padding:.75rem;border:1px solid var(--line);background:var(--cream);margin:.6rem 0}.package label{display:flex;gap:.65rem;align-items:center;min-height:44px}.package input{width:22px;height:22px;flex-shrink:0}.package p{margin:.2rem 0;font-size:.875rem}.muted{color:#526b70}.notice{padding:.75rem;border-left:4px solid var(--red);background:#fff9e9;margin:.8rem 0}.log{padding-left:1.25rem;font-size:.875rem}textarea{width:100%;min-height:220px;background:var(--cream);color:var(--ink);border:1px solid var(--line);padding:.7rem;resize:vertical;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:3px double var(--ink);margin-top:1.5rem;padding-top:.75rem;font-size:.75rem}p{overflow-wrap:anywhere}.illustration{width:100%;aspect-ratio:3/2;object-fit:cover;image-rendering:pixelated;display:block}.tiny{font-size:.75rem}details summary{cursor:pointer;padding:.5rem 0}.sea-note{color:var(--cream);padding:.5rem;font-size:.75rem;background:var(--ink)}@media(max-width:800px){.layout{grid-template-columns:1fr}.side{grid-template-columns:repeat(2,minmax(0,1fr))}.chart{height:280px}}@media(max-width:520px){.frame{padding:.65rem}header{align-items:start;flex-direction:column;gap:.5rem}.brand h1{font-size:1.35rem}.stats{grid-template-columns:repeat(2,1fr)}.side{grid-template-columns:1fr}.route{grid-template-columns:1fr}.route button{width:100%}.chart{height:260px}.paper{padding:.8rem}.headline{flex-direction:column}.actions>*{flex-grow:1}nav button{flex:1 0 auto}.port{font-size:.7rem}}body.big .chart{display:none}body.big .route{grid-template-columns:1fr}body.big .stats{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:520px){body.big .stats{grid-template-columns:1fr}body.big .side{grid-template-columns:1fr}}
:root{--sea:#123a41}.header-links{display:flex;gap:1rem;align-items:center}.eyebrow{font-size:.75rem;letter-spacing:.08em}.introgrid{display:grid;grid-template-columns:1fr .9fr;gap:1.5rem;align-items:center}.introgrid figure{margin:0}.introgrid figcaption{font-size:.75rem;padding:.5rem;border-bottom:1px solid var(--line)}.introgrid h2{font-size:1.8rem}.atlas{background-size:300% 200%;display:block;width:90px;height:90px;image-rendering:pixelated;flex-shrink:0}.port .atlas{width:76px;height:76px;margin:auto}.port{max-width:110px;width:110px}.port b{font-size:12px;border:1px solid #658b8b}.port.current b{outline:2px solid #ebc788}.chart{height:300px}.boat-current{display:flex;gap:.6rem;align-items:center;padding:.5rem}.boat-current p{margin:0}.boat-current .atlas{width:85px;height:85px}.tide{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}.tide span{font-size:.75rem;border-bottom:2px solid #a6b8a4;padding:.2rem .55rem}.tide .now{color:var(--red);border-color:var(--red);font-weight:bold}.routes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.route{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between}.route h3{font-size:1.05rem}.route p{font-size:.875rem}.route button{margin-top:.5rem}.received{border-left:3px solid var(--red)}.on-time{color:#2d6d5e}.late{color:#9b3e32}.cargo-total{display:flex;flex-direction:column;margin:.7rem 0}.jobgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.jobgrid .package{margin:0;display:flex;flex-direction:column}.jobgrid .package button{margin-top:auto}.jobgrid .package p{font-size:.875rem}.chapter{padding:.7rem 0;margin-top:.8rem;border-top:3px double var(--ink)}.chosen{outline:2px solid var(--blue);outline-offset:-3px}.boats .atlas{width:100%;height:auto;aspect-ratio:1;max-width:180px;margin:auto}.reportline{display:flex;gap:1rem;align-items:center}.reportline .atlas{width:150px;height:150px}.portbook{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;margin-top:1rem}.portbook .atlas{width:100%;height:auto;aspect-ratio:1}.portbook strong{font-size:.875rem}.notice p{margin:.4rem 0}.notice button{margin:.5rem}.log{line-height:1.7}.package button{align-self:start}footer .actions{margin:0;align-items:center}body.big .jobgrid{grid-template-columns:repeat(2,minmax(0,1fr))}body.big .layout{grid-template-columns:1fr}body.big .side{grid-template-columns:1fr 1fr}body.big .introgrid{grid-template-columns:1fr}body.big .routes{grid-template-columns:repeat(2,minmax(0,1fr))}body.big .portbook{grid-template-columns:repeat(3,minmax(0,1fr))}body.big .route{display:block}body.big .header-links{flex-wrap:wrap}@media(max-width:800px){.jobgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.portbook{grid-template-columns:repeat(3,minmax(0,1fr))}.introgrid{grid-template-columns:1fr}.introgrid figure{max-width:460px}.side .boat-current{grid-column:1/-1}.chart{height:300px}}@media(max-width:520px){.routes,.jobgrid,body.big .routes,body.big .jobgrid,body.big .side{grid-template-columns:1fr}.portbook,body.big .portbook{grid-template-columns:repeat(2,minmax(0,1fr))}.reportline{flex-direction:column;align-items:start}.brand small{letter-spacing:.1em}.port .atlas{width:55px;height:55px}.port{width:85px}.port b{font-size:10px}.chart{height:280px}.introgrid h2{font-size:1.4rem}.header-links{gap:.65rem;flex-wrap:wrap}body.big .headline{display:block}body.big .stamp{white-space:normal}body.big .paper{padding:.65rem}body.big .frame{padding:.5rem}.notice button{margin:.4rem 0}body.big .boat-current{flex-direction:column;align-items:start}.package label{flex-wrap:wrap}.package label input{min-height:22px}.route button{width:100%}}
@media(prefers-reduced-motion:no-preference){.received{animation:seal .3s ease-out}@keyframes seal{from{background:#ead5bd}to{background:var(--cream)}}}
.textchart{display:none}body.big .textchart{display:block;background:var(--cream);border:1px solid var(--line);padding:.6rem}.textchart ul{padding-left:1rem;font-size:.875rem}.textchart li{margin:.7rem 0}button,summary,label,strong,h1,h2,h3{overflow-wrap:anywhere}body.big .jobgrid button{max-width:100%}