@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--mint:#8af0cd;--bg:#0b1017;--line:#2b3542}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#edf2f7;font-family:'Space Grotesk',sans-serif}header,main{max-width:1120px;margin:auto;padding:0 28px}header{height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}header>a:first-child{font-size:24px;font-weight:700}header>a:last-child{font-size:12px;color:#a1aebc}header span,h1 span{color:var(--mint)}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint);margin-top:48px}h1{font-size:clamp(44px,7vw,76px);letter-spacing:-3px;margin:18px 0}.intro{font-size:15px;line-height:1.8;color:#a1aebc;margin-bottom:35px}.layout{display:grid;grid-template-columns:minmax(0,680px) 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#111923}.game{padding:24px;min-width:0}.bar{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;margin-bottom:22px}.bar>span{color:var(--mint)}#board{position:relative;width:100%;aspect-ratio:7/6;--cell:calc(100% / 7);background-color:#0c131c;background-image:linear-gradient(#26344366 1px,transparent 1px),linear-gradient(90deg,#26344366 1px,transparent 1px);background-size:calc(100% / 7) calc(100% / 6);border:1px solid var(--line);border-radius:10px;overflow:hidden}.shape{position:relative;display:block;padding:0;border:0;background:transparent;color:inherit;cursor:grab;touch-action:none;user-select:none}.cell{position:absolute;width:calc(100% / var(--cols) - 4px);height:calc(100% / var(--rows) - 4px);left:calc(var(--x) * 100% / var(--cols) + 2px);top:calc(var(--y) * 100% / var(--rows) + 2px);background:var(--colour);border-radius:7px;border:1px solid #ffffff45;box-shadow:inset 0 -5px 0 #0002;pointer-events:none}.slot{position:absolute;cursor:pointer}.slot .cell{background:color-mix(in srgb,var(--colour) 7%,transparent);border:2px dashed color-mix(in srgb,var(--colour) 50%,transparent);box-shadow:none}.slot.placed .cell{background:var(--colour);border:1px solid #ffffff45;box-shadow:inset 0 -5px 0 #0002}.slot.hover .cell{border-color:white;background:color-mix(in srgb,var(--colour) 35%,transparent)}.shape:focus-visible{outline:2px solid white;outline-offset:4px;border-radius:6px}.piece.selected{filter:drop-shadow(0 0 8px var(--colour))}.piece[disabled]{opacity:.13;cursor:default}.piece.dragging{opacity:.25}#tray{display:flex;justify-content:space-around;gap:16px;align-items:center;min-height:130px;padding:15px 0}.piece{width:calc(var(--cols) * 35px);height:calc(var(--rows) * 35px);flex-shrink:0}.tray-heading{font-size:9px;letter-spacing:1px;color:#a1aebc;margin-top:25px;display:flex;justify-content:space-between;gap:14px}.tray-heading span{letter-spacing:0;font-size:9px}.bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:15px}.bottom p{font-size:12px;line-height:1.5;color:var(--mint);margin:0}.bottom button{background:#202d3b;border:1px solid #394b60;color:#edf2f7;padding:9px 13px;border-radius:6px;cursor:pointer;white-space:nowrap}aside{padding:28px;background:#16202b;border-left:1px solid var(--line)}aside .eyebrow{margin-top:0}h2{font-size:28px;line-height:1.2;letter-spacing:-1px}aside p,aside li{font-size:12px;line-height:1.8;color:#aab8c6}ol{padding-left:18px;margin:25px 0}li{padding:4px}.note{border:1px solid #344251;border-radius:8px;padding:15px}.note strong{font-size:12px}.note p{margin-bottom:0}.details{margin-top:28px}.details>span{font-size:8px;letter-spacing:1px;color:var(--mint)}.details p{margin-top:6px}footer{margin:32px 0;font-size:9px;letter-spacing:1px;color:#7e8b9b;display:flex;justify-content:space-between;gap:20px}.ghost{position:fixed;z-index:1000;pointer-events:none;opacity:.9;filter:drop-shadow(0 8px 12px #0008)}.won{box-shadow:0 0 28px #8af0cd20}.slot.placed{animation:snap .25s ease-out}@keyframes snap{50%{filter:brightness(1.35)}}@media(max-width:760px){.layout{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid var(--line)}header,main{padding-left:18px;padding-right:18px}.game{padding:16px}.piece{width:calc(var(--cols)*28px);height:calc(var(--rows)*28px)}.tray-heading{flex-direction:column;gap:5px}#tray{gap:8px;min-height:110px}.bottom p{font-size:10px}footer{font-size:7px}.eyebrow{font-size:8px}.cell{border-radius:5px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

.demo-links{display:flex;gap:18px;font-size:11px;margin:20px 0;color:#a1aebc}.demo-links [aria-current]{color:var(--mint)}
#board{background-color:#172028}.slot{border:2px dashed var(--colour);border-radius:8px;background:#ffffff06;display:grid;place-items:center}.slot .cell{display:none}.bay-label{font:600 14px 'Space Grotesk',sans-serif;color:var(--colour);pointer-events:none}.slot.placed{border-style:solid;background:color-mix(in srgb,var(--colour) 20%,#172028)}
.car-body{position:absolute;inset:4px;border-radius:12px;background:var(--colour);box-shadow:inset 0 0 0 3px #ffffff30,0 3px 6px #0005;color:#15232c;display:grid;place-items:center;font-weight:700;font-size:15px;pointer-events:none}.car-body:before,.car-body:after{content:'';position:absolute;background:#1c3448;border:2px solid #ffffff30;border-radius:3px;left:22%;right:22%;height:16%}.car-body:before{top:15%}.car-body:after{bottom:15%}.horizontal .car-body:before,.horizontal .car-body:after{top:22%;bottom:22%;width:16%;height:auto;left:15%;right:auto}.horizontal .car-body:after{left:auto;right:15%}.reserved{position:absolute;background:repeating-linear-gradient(45deg,#e6b55c35 0 7px,#172028 7px 15px);border:1px solid #e6b55c75;display:grid;place-items:center;border-radius:6px;color:#f3cb86;font-size:10px;letter-spacing:1px;pointer-events:none}.reserved span{background:#172028;padding:5px}
/* Keep garage cars comfortable to grab on touch screens. */
.piece{width:calc(var(--cols) * 44px);height:calc(var(--rows) * 44px)}

.demo-links{flex-wrap:wrap}