@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --ink:#0b120e;
  --kelp:#152420;
  --kelp2:#1d332b;
  --bone:#ece4cf;
  --bone-dim:#b9b09a;
  --foam:#9fd8cb;
  --foam-deep:#2e6f64;
  --rust:#d96f3c;
  --moss:#8aa860;
  --line:#2c443b;
  --card:#101a16;
  --good:#9fd8cb;
  --bad:#d96f3c;
  --focus:#ffd166;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:"Space Mono",ui-monospace,monospace;
  background-image:
    radial-gradient(1100px 500px at 85% -5%, #1c3a30 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 30%, #2a1f14 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 46px, #ffffff08 46px 47px);
  min-height:100vh;
}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");}
.skip{position:absolute;left:12px;top:-60px;background:var(--focus);color:#111;padding:10px 16px;border-radius:10px;z-index:50;font-weight:700;transition:top .15s}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

.mast{max-width:1060px;margin:0 auto;padding:56px 22px 10px;position:relative}
.kicker{letter-spacing:.28em;text-transform:uppercase;font-size:11px;color:var(--foam);border-bottom:3px solid var(--foam-deep);display:inline-block;padding-bottom:8px}
.mast h1{
  font-family:Fraunces,serif;font-weight:800;line-height:.92;letter-spacing:-.02em;
  font-size:clamp(52px,10vw,118px);margin:18px 0 10px;text-wrap:balance;
}
.mast h1 span{font-style:italic;font-weight:340;color:var(--foam);
  text-shadow:4px 4px 0 var(--rust);}
.sub{font-size:clamp(14px,2.4vw,19px);color:var(--bone-dim);max-width:60ch}
.live-line{display:inline-block;margin-top:14px;background:var(--kelp2);border:2px solid var(--line);
  padding:8px 14px;border-radius:999px;font-size:13px;color:var(--foam)}
.live-line .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rust);margin-right:8px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

#app{max-width:1060px;margin:0 auto;padding:18px 22px 80px;display:grid;gap:26px}
.slab{background:linear-gradient(180deg,#12211b,#0e1815);border:3px solid var(--bone);
  border-radius:var(--r);box-shadow:8px 8px 0 var(--rust), 16px 16px 0 #00000055;
  padding:clamp(18px,3.5vw,34px);position:relative;overflow:hidden}
.slab::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;
  background:repeating-linear-gradient(90deg,var(--foam) 0 26px,transparent 26px 40px,var(--rust) 40px 52px,transparent 52px 66px);opacity:.8}
.slab-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:6px 0 18px}
.slab h2{font-family:Fraunces,serif;font-size:clamp(24px,4vw,36px);margin:0;font-weight:700}
.slab h2::first-letter{color:var(--rust)}
.hint{margin:0;color:var(--bone-dim);font-size:13px}
kbd{background:#00000066;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:6px;
  padding:1px 7px;font:inherit;font-size:.85em;color:var(--foam);white-space:nowrap}

/* dials */
.dials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dial-card{background:var(--card);border:2.5px solid var(--line);border-radius:16px;padding:16px 12px 14px;
  text-align:center;transition:transform .18s,border-color .18s}
.dial-card:hover{transform:translateY(-3px) rotate(-.4deg);border-color:var(--foam)}
.dial{width:100%;max-width:220px;height:auto}
.ring{fill:none;stroke:var(--line);stroke-width:6}
.hub{fill:var(--rust);stroke:var(--bone);stroke-width:2.5}
.needle{stroke-width:5;stroke-linecap:round;transform-origin:100px 100px;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.tide-n{stroke:var(--foam)} .moon-n{stroke:var(--bone-dim)} .day-n{stroke:var(--rust)}
.dial-cap{fill:var(--bone-dim);font-size:12px;letter-spacing:.3em;text-anchor:middle;font-family:"Space Mono",monospace}
.moon-glyph{fill:var(--bone);font-size:44px;text-anchor:middle}
.loop-arc{fill:none;stroke:var(--rust);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:439.8;stroke-dashoffset:439.8;transform:rotate(-90deg);transform-origin:100px 100px}
.dial-card figcaption{display:grid;gap:2px;margin-top:6px}
.dial-card strong{font-size:19px;color:var(--bone)}
.dial-card span{font-size:13px;color:var(--foam)}
.micro{font-size:12px!important;color:var(--bone-dim)!important}

/* transport */
.transport{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-bottom:18px}
.big-btn{font:inherit;font-weight:700;font-size:17px;color:#0d1512;background:var(--foam);
  border:3px solid var(--bone);border-radius:14px;padding:14px 22px;cursor:pointer;
  box-shadow:5px 5px 0 var(--rust);transition:transform .12s,box-shadow .12s}
.big-btn:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--rust)}
.big-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--rust)}
.big-btn[aria-pressed="true"]{background:var(--rust);color:#fff8ea}
.big-btn.ghost{background:transparent;color:var(--foam);box-shadow:5px 5px 0 #000}
.loop-len{display:flex;align-items:center;gap:8px;background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:8px 12px}
.loop-len .lbl{font-size:12px;letter-spacing:.2em;color:var(--bone-dim)}
.loop-len button{font:inherit;font-weight:700;background:transparent;color:var(--bone);border:2px solid var(--line);
  border-radius:9px;padding:8px 14px;cursor:pointer}
.loop-len button[aria-pressed="true"]{background:var(--bone);color:#111;border-color:var(--bone)}
.tempo{flex:1;min-width:200px;display:grid;gap:6px;background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:10px 14px;font-size:13px}
.tempo label{display:flex;justify-content:space-between;color:var(--bone-dim)}
input[type="range"]{width:100%;accent-color:var(--rust);height:32px;cursor:pointer}

.stems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stem{background:var(--card);border:2.5px solid var(--line);border-radius:14px;padding:14px 16px;border-left:10px solid var(--foam)}
.stem:nth-child(2){border-left-color:var(--foam-deep)}
.stem:nth-child(3){border-left-color:var(--moss)}
.stem:nth-child(4){border-left-color:var(--rust)}
.stem.muted{opacity:.55;border-left-color:#555}
.stem-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stem strong{font-family:Fraunces,serif;font-size:19px;font-weight:700}
.stem .key{font-size:11px;color:var(--bone-dim)}
.stem p{margin:4px 0 10px;font-size:12.5px;color:var(--bone-dim)}
.stem-ctl{display:flex;gap:10px;align-items:center}
.stem-ctl button{font:inherit;font-size:12px;font-weight:700;background:transparent;color:var(--foam);
  border:2px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.stem-ctl button[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:#fff}

/* history */
#tideChart{width:100%;height:auto;display:block;background:#0a120f;border:2.5px solid var(--line);border-radius:14px}
.scrub-row{display:grid;gap:4px;margin-top:14px;font-size:14px}
.scrub-row label{display:flex;justify-content:space-between;color:var(--bone-dim)}
.scrub-row output{color:var(--foam);font-weight:700}
.scrub-info{color:var(--foam);font-size:13px;margin:8px 0 0}
.breed-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:14px}
.breed-row .micro{flex:1;min-width:220px}

/* exports */
.exports{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.exports button{font:inherit;font-weight:700;background:var(--card);color:var(--bone);border:2.5px solid var(--line);
  border-radius:12px;padding:12px 16px;cursor:pointer;transition:transform .12s,border-color .12s}
.exports button:hover{border-color:var(--foam);transform:translateY(-2px)}
.exports button.hot{background:var(--rust);border-color:var(--bone);color:#fff}
.exports button:disabled{opacity:.5;cursor:wait}
#expStatus{margin-top:12px}

.foot{color:var(--bone-dim);font-size:12.5px;display:grid;gap:4px}
.foot p{margin:0}

/* keymap dialog */
.keymap{position:fixed;inset:0;background:#000000aa;display:grid;place-items:center;z-index:40;padding:20px}
.keymap[hidden]{display:none}
.keymap-card{background:var(--kelp2);border:3px solid var(--bone);border-radius:16px;box-shadow:8px 8px 0 var(--rust);
  padding:26px;max-width:420px;width:100%}
.keymap-card h2{font-family:Fraunces,serif;margin:0 0 12px;font-size:30px}
.keymap-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 18px;font-size:14px}
.keymap-card dd{margin:0;color:var(--bone-dim)}

@media (max-width:760px){
  .dials{grid-template-columns:1fr}
  .dial{max-width:190px}
  .stems{grid-template-columns:1fr}
  .mast{padding-top:36px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}