@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#080d1b;--text:#e8eef7;--muted:#8c9bb3;--mint:#94f3da;--line:#253148}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px 'DM Sans',sans-serif;min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{color:inherit}#space{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.app{max-width:1280px;margin:auto;padding:0 54px}header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26314770}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--text);font:700 22px 'Space Grotesk',sans-serif;letter-spacing:1.6px}.brand-light{font-weight:400;color:#8ca0b9;margin-left:7px}.header-actions{display:flex;align-items:center;gap:12px}.mode{font-size:11px;letter-spacing:2px;color:#8494ac;margin-right:22px}.icon-button{height:40px;min-width:40px;border:1px solid #334058;border-radius:50%;background:#101828aa;display:inline-flex;align-items:center;justify-content:center;font-size:20px}.icon-button:hover{background:#243046;border-color:#8ba5bd}#sound{border-radius:22px;gap:8px;padding:0 14px}#sound-state{font-size:10px;letter-spacing:1px}main{display:grid;grid-template-columns:330px minmax(0,620px);gap:65px;align-items:center;justify-content:center;min-height:760px;padding:32px 0 38px}.intro{align-self:center;padding-bottom:22px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint);display:flex;align-items:center;gap:10px}.eyebrow span{width:19px;height:1px;background:var(--mint)}h1{font:500 45px/1.18 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:22px 0}.intro>p{font-size:16px;line-height:1.8;color:var(--muted)}.how{margin-top:48px}.tiny-label{font-size:11px;letter-spacing:1.8px;color:#8fa0b8;font-weight:600}.how>div{display:flex;align-items:center;gap:20px;margin:19px 0}.how b{font:400 12px 'Space Grotesk';color:#68acb0;border:1px solid #2a414e;width:31px;height:31px;display:grid;place-items:center;border-radius:9px}.how p{font-size:14px;line-height:1.6;color:#9aa9bf;margin:0}.no-rush{display:block;color:#657993;font-size:12px;margin-top:36px}.game{width:100%;max-width:620px;position:relative}.scoreboard{display:flex;align-items:center;justify-content:space-between;padding:0 28px}.scoreboard strong{display:block;font:500 36px 'Space Grotesk';margin-top:7px}.score-center{text-align:center}.score-center strong{font-size:27px;color:#f0ce89}.score-center .tiny-label{color:#bdad8e;font-size:10px}.restart{display:flex;align-items:center;gap:8px;background:none;border:0;color:#98a9c0;font-size:13px;padding:10px 0}.restart span{font-size:23px}.restart:hover{color:var(--mint)}.board-wrap{position:relative;margin-top:0}#board{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;filter:drop-shadow(0 20px 35px #0006)}.board-coordinate{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:3px;color:#536783;white-space:nowrap}.bay-heading{display:flex;justify-content:space-between;padding:0 26px;margin-top:-3px;margin-bottom:14px}#bay-status{font-size:11px;color:#698399}.tray{display:flex;gap:14px;padding:0 20px}.piece{position:relative;flex:1;min-width:0;height:102px;border:1px solid #29354c;border-radius:15px;background:linear-gradient(150deg,#18243a99,#0e1626aa);touch-action:none;transition:border-color .15s,background .15s,transform .15s}.piece:not(:disabled):hover{border-color:#617d9a;transform:translateY(-3px)}.piece.selected{border-color:#7de2d0;background:#19373870;box-shadow:0 0 24px #5acfb415}.piece:disabled{opacity:.26;cursor:default}.piece canvas{width:100%;height:100%;display:block;pointer-events:none}.piece kbd{position:absolute;bottom:7px;left:10px;color:#74849b;font:10px 'DM Sans';opacity:.7}.controls{text-align:center;font-size:12px;color:#8394ad;margin:17px 0 24px}.session-stats{border-top:1px solid #25314999;padding:21px 18px 0;display:flex;justify-content:space-between;font-size:11px;color:#7d8da6}.session-stats i{font-style:normal;color:#74b9b6;margin-right:5px;font-size:16px}.session-stats b{color:#c5d0df;font-weight:500}footer{display:flex;justify-content:space-between;border-top:1px solid #26314770;padding:26px 0 30px;color:#52637d;font-size:9px;letter-spacing:1.7px}footer i{margin:0 7px;color:#497c85;font-style:normal}#toast{position:absolute;top:39%;left:50%;transform:translate(-50%,10px);opacity:0;pointer-events:none;text-align:center;white-space:nowrap;color:white;text-shadow:0 3px 15px #000;font:600 25px 'Space Grotesk';transition:.2s}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{width:min(440px,calc(100% - 36px));background:#111d30;color:var(--text);border:1px solid #385169;border-radius:22px;padding:34px;text-align:center;box-shadow:0 30px 100px #000a}dialog::backdrop{background:#030914aa;backdrop-filter:blur(8px)}dialog h2{font:500 30px 'Space Grotesk';letter-spacing:-1px}.dialog-symbol{font-size:45px;color:var(--mint)}#dialog-body{color:#a6b5c8;font-size:15px;line-height:1.8}.primary{background:var(--mint);border:0;border-radius:10px;padding:14px 24px;color:#0b282a;font-weight:700;margin-top:24px;min-width:160px}.primary:hover{background:#c0ffef}.close{position:absolute;right:15px;top:15px;width:32px;height:32px;min-width:32px;font-size:20px;border:0}.result{display:block;font:500 54px 'Space Grotesk';color:var(--mint);margin:10px}.key-help{font-size:12px;color:#8197b3;border-top:1px solid #2a3c55;padding-top:14px;margin-top:20px}@media(min-width:1450px){main{min-height:calc(100vh - 184px)}}@media(max-width:1050px){.app{padding:0 30px}main{grid-template-columns:250px minmax(0,580px);gap:24px}h1{font-size:37px}.eyebrow{font-size:9px;letter-spacing:1.3px}.intro>p{font-size:14px}.mode{display:none}}@media(max-width:760px){.app{padding:0 18px}header{height:80px}.brand{font-size:17px;letter-spacing:1px;gap:9px}.brand svg{width:29px}.brand-light{margin-left:5px}.header-actions{gap:8px}.icon-button{min-width:34px;height:34px}.intro{display:none}main{display:block;min-height:0;padding:27px 0 30px}.game{margin:auto;max-width:560px}.scoreboard{padding:0 16px}.scoreboard strong{font-size:32px}.score-center strong{font-size:25px}.tiny-label{font-size:10px}.score-center .tiny-label{font-size:9px}.restart{font-size:12px}.tray{padding:0 7px;gap:10px}.piece{height:90px}.bay-heading{padding:0 10px}.controls{font-size:11px}.session-stats{padding:18px 4px 0;font-size:10px}footer{font-size:8px;letter-spacing:1px;padding:22px 0}footer span:first-child{max-width:165px;line-height:1.8}.board-coordinate{bottom:16px;font-size:8px}.board-wrap{margin-top:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer a{color:#8299b5;text-decoration:none}footer a:hover{color:var(--mint)}