:root{--ink-900: #070e1a;--ink-800: #0b1526;--ink-700: #121f36;--ink-600: #1c2b48;--parchment: #efe3c6;--parchment-dim: #c9bb9a;--brass: #d4a548;--brass-deep: #9a7320;--foam: #5ed3b8;--tide: #1a7f8a;--danger: #f0604d;--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;--font-body: "Atkinson Hyperlegible", "Avenir Next", "Segoe UI", sans-serif;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 600px at 80% -10%,rgba(26,127,138,.28),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(212,165,72,.14),transparent 60%),repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.025) 46px 47px),repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.025) 46px 47px),var(--ink-900);color:var(--parchment);font-family:var(--font-body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior:none}a{color:var(--foam)}.page{min-height:100%;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));margin:0 auto;max-width:720px;display:flex;flex-direction:column;gap:20px}.masthead{padding-top:24px;animation:rise .7s cubic-bezier(.2,.7,.2,1) both}.eyebrow{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--parchment-dim)}.wordmark{margin:4px 0 10px;font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(56px,14vw,104px);line-height:.9;letter-spacing:-.03em;color:var(--parchment);text-shadow:0 2px 0 rgba(0,0,0,.4)}.wordmark:first-letter{color:var(--brass);font-style:normal}.rule{height:2px;background:linear-gradient(90deg,var(--brass),transparent 70%)}.card{border-radius:var(--radius);padding:20px;animation:rise .6s .1s cubic-bezier(.2,.7,.2,1) both}.card h2{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.01em}.card-parchment{background:linear-gradient(160deg,#f3e8cd,#e2d2ab);color:#2b2113;box-shadow:inset 0 0 0 1px #0000001a,0 20px 40px -24px #000c}.card-parchment .error{color:#9b2d1f}.card-ink{background:linear-gradient(160deg,var(--ink-700),var(--ink-800));box-shadow:inset 0 0 0 1px #efe3c614,0 20px 40px -24px #000000e6}.hail-name{font-style:italic;font-weight:400}.ledger{margin:14px 0 0;display:grid;gap:10px}.ledger dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--parchment-dim)}.ledger dd{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:8px}.tier-chip{display:inline-flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:999px;background:#d4a54824;border:1px solid rgba(212,165,72,.4);color:var(--brass)}.tier-chip small,.muted{color:var(--parchment-dim)}.small{font-size:14px}.status{margin:0;color:var(--parchment-dim);font-style:italic}.status-warn{color:var(--brass)}.error{color:var(--danger);margin:0}.stack{display:flex;flex-direction:column;gap:10px;margin-top:12px}.field{display:grid;gap:6px;font-size:14px}.field input{font:inherit;font-size:18px;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.25);background:#fff9;color:#1b150c}.btn{font:inherit;font-weight:700;font-size:17px;padding:14px 18px;border-radius:12px;border:0;cursor:pointer;text-align:center;text-decoration:none;transition:transform .08s ease,filter .15s ease;touch-action:manipulation}.btn:active{transform:translateY(1px) scale(.99)}.btn[disabled]{opacity:.45;cursor:not-allowed}.btn-brass{background:linear-gradient(180deg,#e9bd63,var(--brass) 55%,var(--brass-deep));color:#1b150c;box-shadow:inset 0 1px #ffffff59,0 10px 24px -12px #d4a548e6}.btn-brass:hover:not([disabled]){filter:brightness(1.06)}.btn-ghost{background:transparent;color:var(--parchment);box-shadow:inset 0 0 0 1px #efe3c64d}.section-title{margin:0 0 10px;font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--parchment-dim)}.practice-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.practice-grid li:first-child{grid-column:1 / -1}.practice-grid li{min-width:0}.practice-tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"glyph title" "glyph blurb";column-gap:14px;padding:16px;border-radius:var(--radius);text-decoration:none;color:inherit;min-height:92px;position:relative;overflow:hidden;animation:rise .6s .2s cubic-bezier(.2,.7,.2,1) both}.practice-tile.live{background:linear-gradient(135deg,#1a7f8a73,#0b1526e6 60%);box-shadow:inset 0 0 0 1px #5ed3b859}.practice-tile.live:hover{box-shadow:inset 0 0 0 1px var(--foam)}.practice-tile.soon{grid-template-areas:"title title" "blurb blurb";background:#ffffff08;box-shadow:inset 0 0 0 1px #efe3c61a;color:var(--parchment-dim)}.tile-glyph{grid-area:glyph;align-self:center}.tile-title{grid-area:title;min-width:0;font-family:var(--font-display);font-size:24px;font-weight:600;overflow-wrap:anywhere}.tile-blurb{grid-area:blurb;font-size:14px;color:var(--parchment-dim)}.colophon{margin-top:auto;font-size:12px;color:var(--parchment-dim);text-align:center;padding-top:20px}.puzzle{gap:10px;max-width:560px;height:100%;min-height:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}.puzzle-bar{display:grid;grid-template-columns:44px 1fr auto 44px;align-items:center;gap:10px}.icon-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;text-decoration:none;color:var(--parchment);background:#ffffff0d;box-shadow:inset 0 0 0 1px #efe3c614;cursor:pointer;transition:background .15s ease,transform .08s ease;touch-action:manipulation}.icon-btn:hover{background:#ffffff17}.icon-btn:active{transform:scale(.95)}.icon-btn[aria-pressed=true]{color:var(--parchment-dim)}.puzzle-title{margin:0;font-family:var(--font-display);font-weight:500;font-style:italic;font-size:28px;line-height:1}.pip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:5px 11px 5px 9px;border-radius:999px;letter-spacing:.04em;white-space:nowrap}.pip i{width:7px;height:7px;border-radius:50%;background:currentColor}.pip-live{color:var(--foam);background:#5ed3b81f}.pip-live i{box-shadow:0 0 #5ed3b899;animation:ping 2.4s ease-out infinite}.pip-wait{color:var(--parchment-dim);background:#efe3c614}.pip-wait i{animation:pulse .9s ease-in-out infinite}.pip-off{color:var(--brass);background:#d4a5481f}.hud{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px 14px;padding:12px 14px;border-radius:var(--radius);background:linear-gradient(160deg,#1c2b48bf,#0b1526bf);box-shadow:inset 0 0 0 1px #efe3c612,0 14px 30px -20px #000000e6}.stat{display:grid;gap:3px;align-content:start;min-width:0}.stat-wide{grid-column:span 3;grid-template-columns:64px 1fr;align-items:center}.stat-label{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--parchment-dim)}.stat-value{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:28px;font-weight:600;line-height:1}.stat-score .stat-value{font-size:34px;color:#fff6dc}.stat-value small{font-size:14px;color:var(--parchment-dim);font-weight:400}.bump{display:inline-block;animation:bump .32s cubic-bezier(.3,1.6,.5,1)}.bar{display:block;height:4px;margin-top:3px;border-radius:999px;background:#efe3c61a;overflow:hidden}.bar i{display:block;height:100%;border-radius:inherit;background:var(--parchment-dim);transition:width .25s linear}.stat-urgent .bar i{background:var(--danger)}.bar-moves i{background:#d4a548bf}.urgent{color:var(--danger);animation:pulse .8s ease-in-out infinite}.combo-meter{display:flex;gap:4px;align-items:center;height:18px}.combo-meter i{width:16px;height:10px;border-radius:3px;background:#efe3c61f;transform:skew(-14deg);transition:background .15s ease,box-shadow .15s ease}.combo-meter i.lit{background:linear-gradient(180deg,#ffe39a,var(--brass));box-shadow:0 0 10px #d4a548b3;animation:pip-in .25s cubic-bezier(.3,1.6,.5,1)}.combo-meter.hot i.lit{background:linear-gradient(180deg,#ffd1a8,#ff8a5b);box-shadow:0 0 12px #ff8a5bcc}.combo-meter b{margin-left:8px;font-size:13px;color:var(--brass);white-space:nowrap;animation:bump .3s cubic-bezier(.3,1.6,.5,1)}.combo-meter.hot b{color:#ff9a6b}.water-meter{display:block;height:10px;border-radius:999px;background:#efe3c61a;overflow:hidden}.water-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--tide),var(--foam));transition:width .5s ease,background .3s ease}.water-meter.danger i{background:linear-gradient(90deg,var(--tide),var(--danger));animation:pulse 1s ease-in-out infinite}.water-row{display:flex;align-items:center;gap:10px}.water-row .water-meter{flex:1}.water-warn{font-style:normal;white-space:nowrap;animation:pulse 1s ease-in-out infinite;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--danger)}.board-wrap{position:relative;flex:1 1 auto;min-height:360px;border-radius:18px;overflow:hidden}.board-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 #f0604d00;transition:box-shadow .3s ease}.board-wrap.low-time:after{animation:low-time 1s ease-in-out infinite}.board-host{position:absolute;inset:0}.board-host canvas{display:block;width:100%;height:100%}.splash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:var(--font-display);font-style:italic;font-weight:900;font-size:clamp(48px,16vw,84px);color:#ffe39a;text-shadow:0 3px 0 #070e1a,0 0 24px rgba(212,165,72,.6);-webkit-text-stroke:2px #070e1a;animation:splash .9s cubic-bezier(.2,.9,.3,1) both}.board-veil{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 40%,#070e1a8c,#070e1ad9);backdrop-filter:blur(5px);animation:fade .25s ease both}.veil-card{width:min(100%,380px);max-height:100%;overflow:auto;padding:22px;border-radius:var(--radius);background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.35),transparent 60%),linear-gradient(160deg,#f3e8cd,#e2d2ab);color:#2b2113;box-shadow:inset 0 0 0 1px #00000014,inset 0 -3px #00000014,0 30px 60px -30px #000000e6;animation:rise .4s cubic-bezier(.2,.7,.2,1) both}.veil-card .eyebrow{color:#8a6a2a;font-weight:700;font-size:11px}.veil-card h2{margin:2px 0 10px;font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.05}.veil-card .how{margin:0 0 8px}.tile-row{display:flex;gap:6px;margin:0 0 14px}.tile-row span{display:block;animation:bob 2.4s ease-in-out infinite}.tile-row img{width:30px;height:30px}.how-kbd{color:#6b5a3a;font-size:14px}.best-line{margin:4px 0 0;font-weight:700;color:var(--brass-deep)}.note{margin:8px 0 0;padding:8px 10px;border-radius:10px;font-size:14px;background:#9a732024;color:#6b4f15}.veil-card .btn-ghost{color:#2b2113;box-shadow:inset 0 0 0 1px #2b211359}.veil-card .muted{color:#6b5a3a}.veil-card .error{color:#9b2d1f}.result-score{margin:0;font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700;font-size:64px;line-height:1;letter-spacing:-.02em;color:#2b2113}.best-badge{display:inline-block;margin:8px 0 0;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;background:linear-gradient(180deg,#e9bd63,var(--brass));color:#2b2113;animation:bump .5s .6s cubic-bezier(.3,1.6,.5,1) both}.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin:14px 0 10px}.result-stats div{padding:8px 10px;border-radius:10px;background:#2b211312}.result-stats dt{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b5a3a}.result-stats dd{margin:2px 0 0;font-family:var(--font-display);font-size:22px;font-weight:600}.tier-line{margin:0 0 4px;color:var(--brass-deep);font-weight:700}.tier-up{color:#1f7a4d}.tier-down{color:#9b2d1f}.veil-card p.small{margin:0}.status{display:inline-flex;align-items:center;gap:10px}.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(239,227,198,.25);border-top-color:var(--brass);animation:spin .8s linear infinite}.legend{font-size:13px;border-radius:var(--radius);background:#ffffff08;box-shadow:inset 0 0 0 1px #efe3c612}.legend summary{padding:10px 14px;cursor:pointer;font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--parchment-dim);list-style:none;display:flex;align-items:center;gap:8px}.legend summary::-webkit-details-marker{display:none}.legend summary:before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}.legend[open] summary:before{transform:rotate(45deg)}.legend[open]{padding-bottom:12px}.legend ul{list-style:none;margin:0;padding:0 14px;display:flex;flex-wrap:wrap;gap:6px 14px}.legend li{display:flex;align-items:center;gap:6px}.legend .specials{display:grid;gap:6px;margin-bottom:10px}.legend .specials li{align-items:flex-start}.legend .specials svg{flex:none;margin-top:1px}.legend .specials b{color:var(--brass)}.legend .toggle{display:flex;gap:10px;align-items:center;margin:12px 14px 0;cursor:pointer}.legend .toggle input{width:20px;height:20px;accent-color:var(--brass)}.puzzle-compact{gap:6px;padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom));max-width:none}.puzzle-bar-compact{grid-template-columns:40px 1fr 40px 40px;gap:6px}.puzzle-bar-compact .icon-btn{width:40px;height:40px}.hud-strip{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:8px;align-items:center;min-width:0;padding:0 4px}.hud-strip .stat{gap:1px}.hud-strip .stat-label{font-size:9px;letter-spacing:.14em}.hud-strip .stat-value,.hud-strip .stat-score .stat-value{font-size:21px;white-space:nowrap}.hud-strip .stat-value small{font-size:11px}.hud-strip .bar{height:3px;margin-top:1px}.combo-chip{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:6px;vertical-align:3px;font-family:var(--font-body);font-size:11px;font-weight:700;color:#1b150c;background:linear-gradient(180deg,#ffe39a,var(--brass));animation:bump .3s cubic-bezier(.3,1.6,.5,1)}.combo-chip.hot{background:linear-gradient(180deg,#ffd1a8,#ff8a5b)}.details-btn{position:relative}.details-btn .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:currentColor}.details-btn .dot.pip-live{color:var(--foam)}.details-btn .dot.pip-wait{color:var(--parchment-dim)}.details-btn .dot.pip-off{color:var(--brass)}.details-btn.warn{color:var(--danger);box-shadow:inset 0 0 0 1px #f0604d80}.puzzle-compact .board-wrap{min-height:0;border-radius:12px}.hud-scrim{position:absolute;inset:0;z-index:4;border:0;padding:0;background:#070e1a73;cursor:pointer;animation:fade .2s ease both}.hud-panel{position:absolute;top:0;left:0;right:0;z-index:5;max-height:100%;overflow:auto;display:grid;gap:10px;justify-items:start;padding:14px;border-radius:12px;background:linear-gradient(160deg,#1c2b48f7,#0b1526f7);box-shadow:inset 0 0 0 1px #efe3c61a,0 20px 40px -16px #000000e6;animation:drop .22s cubic-bezier(.2,.8,.2,1) both}.hud-panel .stat-wide{width:100%;grid-column:auto}.legend-inline{width:100%;background:none;box-shadow:none}.legend-inline ul,.legend-inline .toggle{padding:0;margin-left:0;margin-right:0}@keyframes drop{0%{opacity:0;transform:translateY(-12px)}}@media(max-width:420px){.puzzle-title{font-size:24px}.hud{padding:10px 12px;gap:8px 10px}.stat-value{font-size:24px}.stat-score .stat-value{font-size:28px}}@media(min-width:900px){.how-kbd{display:block}.puzzle{max-width:980px;display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"bar bar" "board hud" "board legend";gap:14px 24px}.puzzle-bar{grid-area:bar}.hud{grid-area:hud;align-self:start}.board-wrap{grid-area:board;min-height:560px}.legend{grid-area:legend;align-self:start}}@media(hover:none){.how-kbd{display:none}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes pulse{50%{opacity:.55}}@keyframes ping{0%{box-shadow:0 0 #5ed3b899}70%,to{box-shadow:0 0 0 7px #5ed3b800}}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes pip-in{0%{transform:skew(-14deg) scale(1.6)}}@keyframes bob{50%{transform:translateY(-3px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes splash{0%{opacity:0;transform:scale(.4) rotate(-8deg)}25%{opacity:1;transform:scale(1.08) rotate(-4deg)}70%{opacity:1;transform:scale(1) rotate(-4deg)}to{opacity:0;transform:scale(1.25) rotate(-4deg)}}@keyframes low-time{50%{box-shadow:inset 0 0 40px 6px #f0604d73}}@media(prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}.next-pair{display:inline-flex;gap:6px;align-items:center;min-height:28px}.legend-note{margin:4px 0 0}.hud .stat-wide .next-pair{padding-top:2px}.legend .shapes li{gap:4px}