/* Puzzle cards and bold color grouping informed by the NYT Games Mobbin reference.
   https://mobbin.com/screens/a577ad95-251d-4cc4-8939-3921a8639115 */
:root { --ink:#20242c; --paper:#faf9f6; --muted:#626974; --blue:#4778ed; }
header { height:76px; padding:0 max(28px,calc((100vw - 1120px)/2)); background:#fff; border-color:#e1e2e5; }
.brand { letter-spacing:-.5px; font-size:17px; gap:8px; }
.brand-mark { background:#ffda58; color:var(--ink); border:2px solid var(--ink); border-radius:8px; transform:rotate(-5deg); }
.brand>span:last-child { font-weight:500; }
.edition { color:#606670; letter-spacing:1px; }
.icon-button { width:38px; height:38px; border-color:#bfc3ca; font-weight:700; }
main { max-width:1180px; padding:28px 28px 0; }
.intro { background:var(--blue); border-radius:20px; padding:34px 40px; margin-bottom:30px; color:white; gap:24px; position:relative; overflow:hidden; }
.intro .eyebrow { color:#fff; font-size:10px; letter-spacing:1.6px; }
h1 { font-size:54px; line-height:1.04; font-weight:700; letter-spacing:-2.8px; margin-bottom:16px; }
h1 em { color:#ffdf61; font:inherit; }
p.lede { color:#fff; font-size:14px; }
.progress-box { background:#fff; color:var(--ink); width:200px; flex-shrink:0; padding:20px 24px; border:1px solid #284fba; border-radius:12px; box-shadow:0 5px 0 #2c56bc; margin:0; align-self:center; transform:rotate(2deg); }
.progress-box .progress-icon { display:block; color:#20242c; font-size:38px; line-height:1; margin-bottom:14px; }
.progress-box #totalStars { font-size:30px; font-weight:700; }
.progress-box small { color:#626974; font-weight:700; letter-spacing:1px; margin:7px 0 14px; }
.progress-track { height:8px; border-radius:5px; background:#eceef2; overflow:hidden; }
.progress-track i { background:var(--blue); border-radius:5px; }
.completed-count { font-size:11px; color:#626974; margin:12px 0 0; }
.workspace { grid-template-columns:290px minmax(0,1fr); gap:28px; align-items:start; }
.section-label { color:#3a404a; padding:2px 0 16px; letter-spacing:1.2px; }
.section-label span { color:#68707d; font-size:9px; }
.levels { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.level-button { min-height:104px; padding:13px 8px 10px; flex-direction:column; justify-content:center; text-align:center; gap:6px; border:1px solid #d6d8de; background:#fff; border-radius:10px; color:#343b46; box-shadow:0 3px 0 #e0e1e6; transition:transform .15s,background .15s; }
.level-button:hover { background:#f0f4ff; transform:translateY(-2px); }
.level-button .num { font-size:22px; font-weight:700; color:#404957; letter-spacing:-1px; }
.level-button .level-name { font-size:11px; font-weight:600; }
.level-button .medals { margin:0; color:#715600; font-size:14px; letter-spacing:2px; line-height:1; }
.level-button.active { background:#ffdf61; color:#20242c; border-color:#20242c; box-shadow:0 3px 0 #20242c; }
.level-button.active .num { color:#20242c; }
.aside-note { color:#626974; border-color:#dbdde2; padding:18px 4px; }
.aside-note>span { color:#4778ed; }
.game-panel { background:#fff; border:1px solid #d6d8de; border-radius:16px; padding:26px; box-shadow:0 4px 0 #e5e5e8; }
.level-heading .eyebrow { color:#526078; letter-spacing:1.4px; }
h2 { font-weight:700; font-size:27px; color:#20242c; }
.status-pill { color:#3658a6; background:#edf2ff; }
.brief { color:#626974; line-height:1.6; margin-bottom:18px; }
.floor-wrap { background:#232e43; box-shadow:none; border:1px solid #172034; padding:18px 22px; border-radius:12px; }
.floor-label { color:#b0bed5; }
.board { max-width:420px; gap:6px; }
.cell { background:#303e56; border-color:#4b5c76; color:#b5c3da; border-radius:7px; }
.cell.empty:after { color:#8295b2; }
.cell:not(.fixed):hover { background:#4b607f; }
.cell.belt { background:#526887; border-color:#92a7c7; color:#fff; box-shadow:inset 0 -4px #3f536e; }
.cell.belt:before { border-color:#d5dff560; }
.cell.block { background:repeating-linear-gradient(135deg,#1c2639,#1c2639 4px,#293449 4px,#293449 6px); border-color:#35435a; }
.cell.source,.cell.target { background:color-mix(in srgb,var(--color) 12%,#232e43); }
.cell.lit { background:#677d50; }
.cell.error { background:#633d3d; }
.floor-legend { color:#ccd5e4; }
.directions button { height:40px; width:40px; border-color:#cdd2db; color:#455064; background:#f5f6f8; border-radius:7px; }
.directions button.selected { background:#4778ed; color:#fff; border-color:#315cc4; box-shadow:0 2px 0 #284eaa; }
.secondary-tools { align-items:center; }
.secondary-tools button,#replay { min-height:40px; color:#4e5869; border-color:#cdd2db; border-radius:7px; }
.instruction { color:#626974; font-size:11px; line-height:1.6; }
.run-row { border-color:#e2e4e9; }
.run-row div>span { color:#626974; }
.primary { background:#20242c; color:#fff; border-radius:24px; padding:14px 23px; }
.primary:hover { background:#364664; }
.feedback { background:#f3f5f9; color:#4d5c73; padding:12px 14px; border-radius:8px; margin-bottom:0; }
.feedback.failure { background:#fff0e8; color:#914326; }
.feedback.success { background:#e9f5ec; color:#2d6940; }
footer { color:#626974; border-color:#dcdfe5; }
dialog { background:#fff; border-color:#d6d8de; }
dialog::backdrop { background:#172034b8; }
dialog .eyebrow { color:#4778ed; }
.big-stars { color:#9b7200; background:#ffdf61; border-radius:12px; padding:18px 10px; }
#winText,.muted { color:#626974; }
button:focus-visible,a:focus-visible { outline:3px solid #4778ed; outline-offset:4px; }
.cell:focus-visible { outline-color:#ffdf61; }
@media(min-width:1450px) { main { padding-top:28px; } }
@media(max-width:800px) {
  header { padding:0 22px; height:66px; }
  main { padding:18px 18px 0; }
  .intro { padding:28px; gap:18px; }
  h1 { font-size:43px; }
  .workspace { grid-template-columns:1fr; gap:22px; }
  .levels { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
  .level-button { min-height:68px; padding:9px 4px; gap:7px; }
  .level-button .level-name { display:none; }
  .level-button .num { font-size:18px; }
  .level-button .medals { font-size:11px; letter-spacing:0; }
  .progress-box { width:160px; padding:16px; }
  .progress-box #totalStars { font-size:25px; }
  .game-panel { padding:22px; }
}
@media(max-width:480px) {
  header { padding:0 16px; }
  .brand { font-size:13px; }
  main { padding:14px 12px 0; }
  .intro { border-radius:14px; padding:24px 20px; flex-wrap:wrap; gap:20px; margin-bottom:24px; }
  .intro .eyebrow { font-size:8px; }
  h1 { font-size:43px; letter-spacing:-2px; }
  p.lede { font-size:13px!important; }
  .progress-box { width:100%; padding:14px 16px; transform:none; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:5px 14px; border:0; box-shadow:0 3px 0 #2c56bc; }
  .progress-box .progress-icon { display:none; }
  .progress-box #totalStars { font-size:23px; grid-column:1; grid-row:1; }
  .progress-box small { grid-column:1; grid-row:2; margin:0; font-size:8px; }
  .progress-track { grid-column:2; grid-row:1; }
  .completed-count { grid-column:2; grid-row:2; margin:0; font-size:10px; }
  .levels { gap:6px; }
  .level-button { min-height:62px; }
  .game-panel { padding:16px; }
  .floor-wrap { padding:14px 10px; }
  .board { gap:4px; }
  .floor-legend { gap:12px; font-size:7px; }
  .directions button { width:36px; height:40px; }
  .secondary-tools { gap:4px; }
  .secondary-tools button { min-width:32px; padding:6px; }
  .secondary-tools button span { display:none; }
  .tool-row { gap:8px; }
  h2 { font-size:24px; }
  .primary { padding:13px 16px; }
  .primary>span { margin-left:10px; }
}

/* Original vector identity: sawtooth factory, conveyor rollers, and a routed parcel. */
.brand { gap:10px; letter-spacing:0; }
.factory-mark { width:64px; height:64px; display:block; flex-shrink:0; }
.brand .brand-wordmark { display:flex; flex-direction:column; gap:5px; margin:0; }
.brand-wordmark strong { font:700 30px/.88 'Space Grotesk',sans-serif; letter-spacing:-1.6px; }
.brand-wordmark>span { font:700 10px/1 'DM Sans',sans-serif; letter-spacing:4.1px; padding-left:2px; }
@media(max-width:480px) {
  .factory-mark { width:52px; height:52px; }
  .brand { gap:8px; }
  .brand-wordmark strong { font-size:26px; letter-spacing:-1.3px; }
  .brand-wordmark>span { font-size:8px; letter-spacing:3.8px; }
}