/* Circuit Quest: a local logic game with no real device connections. */
.quest-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; padding-block: 50px 64px; }
.quest-intro .eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 27px; }
.quest-intro h1 { font-size: clamp(60px, 6vw, 86px); }
.quest-intro h1 > span:first-of-type { color: #4a5c45; }
.quest-intro-copy { max-width: 390px; padding-bottom: 7px; justify-self: end; }
.quest-intro-copy > p { font-size: 17px; color: var(--muted); line-height: 1.8; }
.quest-intro-note { display: flex; gap: 10px; align-items: center; margin-top: 26px; font-size: 11px; color: var(--muted); }
.quest-intro-note .signal-dot { background: #6a8148; }
.quest-intro-copy .text-link { margin-top: 18px; font-size: 12px; gap: 12px; }
#quest-station { scroll-margin-top: 110px; }
#primary-nav a[aria-current="page"]::after { width: 100%; }
.quest-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 66px; align-items: start; padding-bottom: 82px; }
.quest-guide { min-width: 0; }
.quest-device { padding: 27px 31px 25px; border-radius: 14px; background: #e8eddf; transition: background .4s; }
.device-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.device-card-top .eyebrow { font-size: 8px; }
.device-state { font-size: 8px; color: #516048; letter-spacing: .08em; padding: 5px 8px; border: 1px solid #c1ccb4; border-radius: 4px; }
.quest-light { width: 134px; margin-block: 26px 11px; margin-inline: -7px; }
.quest-light svg { width: 100%; stroke: #718163; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bulb-body { fill: #f2f4eb; transition: fill .4s, stroke .4s; }
.bulb-halo { fill: #d5f36b; opacity: 0; stroke: none; transition: opacity .4s; }
.bulb-rays { opacity: .4; transition: opacity .4s; }
.quest-device h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.045em; margin-bottom: 19px; }
.quest-device > p { font-size: 12px; line-height: 1.85; color: #536148; max-width: 310px; }
.quest-device > p strong { font-weight: 600; color: var(--ink); }
.device-card-bottom { display: flex; align-items: center; gap: 9px; border-top: 1px solid #c9d1be; margin-top: 26px; padding-top: 17px; color: #58654e; font-size: 9px; }
.device-card-bottom .signal-dot { background: #849572; width: 5px; height: 5px; }
.quest-device.is-powered { background: #e2edc6; }
.quest-device.is-powered .bulb-body { fill: var(--lime); stroke: #435333; }
.quest-device.is-powered .bulb-halo { opacity: .55; }
.quest-device.is-powered .bulb-rays { opacity: 1; stroke: #435333; }
.quest-device.is-powered .device-state { color: var(--ink); background: var(--lime); border-color: #a5bc5e; }
.quest-device.is-powered .device-card-bottom .signal-dot { background: #526a30; }
.quest-how { margin-top: 31px; }
.quest-how .eyebrow { font-size: 8px; color: var(--muted); }
.quest-how ol { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 19px; }
.quest-how li { display: flex; align-items: start; gap: 16px; }
.quest-step { font: 10px/1.8 ui-monospace, monospace; color: var(--muted); margin-top: 2px; }
.quest-how li strong { display: block; font-size: 13px; font-weight: 500; }
.quest-how li p { font-size: 11px; line-height: 1.75; color: var(--muted); margin-top: 4px; max-width: 300px; }
.keyboard-note { display: flex; gap: 11px; border-top: 1px solid var(--line); padding-top: 19px; font-size: 10px; line-height: 1.8; color: var(--muted); }
.keyboard-note strong { color: var(--ink); font-weight: 500; }
.keyboard-note .icon { width: 21px; height: 21px; color: #647755; margin-top: 3px; }
.quest-station { min-width: 0; }
.quest-station-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 23px; }
.quest-station-top .eyebrow { font-size: 8px; }
.mode-description { font-size: 10px; color: var(--muted); margin-top: 5px; max-width: 200px; }
.quest-modes { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; }
.quest-modes button { border: 0; border-radius: 5px; background: transparent; font-size: 11px; padding: 8px 12px; min-height: 48px; }
.quest-modes button span { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; }
.quest-modes button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.quest-modes button[aria-pressed="true"] span { color: #c7d6b6; }
.quest-modes button[aria-pressed="false"]:hover { background: #e9edde; }
.quest-modes button:disabled { cursor: default; opacity: .5; }
.quest-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-block: 20px; gap: 16px; }
.quest-metrics > div { display: flex; flex-direction: column; gap: 5px; }
.quest-metrics span { font-size: 7px; color: var(--muted); letter-spacing: .07em; line-height: 1.5; }
.quest-metrics strong { font-size: 24px; line-height: 1.1; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.quest-complete { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 19px; background: #e3edcd; border: 1px solid #b5c98e; border-radius: 10px; margin-bottom: 14px; }
.quest-complete strong { display: block; font-weight: 500; font-size: 15px; line-height: 1.4; }
.quest-complete p { font-size: 10px; line-height: 1.7; color: #4a5d3c; margin-top: 4px; }
.quest-complete .button { min-height: 44px; padding: 11px 16px; font-size: 11px; gap: 13px; flex-shrink: 0; }
.circuit-frame { position: relative; overflow: hidden; border-radius: 14px; padding: 20px; background: var(--ink); }
.circuit-frame-top, .circuit-frame-bottom { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 8px; line-height: 1.5; letter-spacing: .075em; color: #b8c8ab; }
.circuit-frame-top { padding: 1px 3px 16px; }
.circuit-frame-top > span:first-child { display: flex; align-items: center; gap: 8px; }
.circuit-frame-top .signal-dot { width: 5px; height: 5px; }
.circuit-frame-bottom { padding: 16px 3px 1px; }
.circuit-output, .circuit-input { color: var(--lime); }
.quest-board { display: grid; grid-template-columns: repeat(var(--board-size, 4), minmax(0, 1fr)); gap: 7px; }
.circuit-tile { padding: 0; aspect-ratio: 1; position: relative; background: #2b352e; border: 1px solid #56614e; border-radius: 8px; color: #9baa91; overflow: hidden; cursor: pointer; transition: background .2s, border-color .2s, color .2s; touch-action: manipulation; }
.circuit-tile > svg { width: 100%; height: 100%; overflow: visible; }
.tile-connections { transform-origin: 50% 50%; transition: transform .22s ease; }
.tile-wire { stroke: currentColor; stroke-width: 6; stroke-linecap: round; fill: none; }
.tile-hub { stroke: currentColor; stroke-width: 4; fill: #2b352e; transition: fill .2s; }
.tile-port { fill: currentColor; }
.tile-route { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-dasharray: 4 4; stroke-linecap: round; opacity: 0; pointer-events: none; }
.route-step { position: absolute; left: 5px; top: 5px; min-width: 17px; height: 17px; display: none; align-items: center; justify-content: center; padding-inline: 3px; font-size: 8px; line-height: 1; font-weight: 600; color: var(--paper); background: var(--ink); border: 1px solid #a8b892; border-radius: 3px; pointer-events: none; }
.circuit-tile.is-route .tile-route { opacity: 1; }
.circuit-tile.is-route .route-step { display: inline-flex; }
.circuit-tile.is-route-mismatch { box-shadow: inset 0 0 0 1px #d9e2c9; }
.circuit-tile:hover { border-color: #b9c99e; background: #364332; }
.circuit-tile.is-powered { color: var(--lime); border-color: #809754; background: #3c4c32; }
.circuit-tile.is-powered .tile-hub { fill: #3c4c32; }
.circuit-tile.is-source, .circuit-tile.is-target { border-color: var(--lime); border-width: 2px; }
.circuit-tile:focus-visible { z-index: 2; outline: 3px solid var(--paper); outline-offset: -5px; }
.endpoint-label { position: absolute; font-size: 8px; font-weight: 600; letter-spacing: .05em; color: var(--ink); background: var(--lime); border-radius: 2px; padding: 2px 4px; line-height: 1; pointer-events: none; }
.is-source .endpoint-label { bottom: 5px; left: 5px; }
.is-target .endpoint-label { top: 5px; right: 5px; }
.circuit-tile.is-hinted { animation: hint-ring .7s ease-out; }
.quest-feedback { display: flex; gap: 10px; align-items: start; margin-top: 20px; }
.quest-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6e8253; flex-shrink: 0; margin-top: 6px; }
.quest-feedback p { font-size: 12px; font-weight: 500; line-height: 1.7; }
.quest-board-tip { margin: 7px 0 0 17px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.quest-controls { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; padding-top: 21px; }
.quest-control { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 2px; border: 0; background: none; min-height: 44px; font-size: 11px; border-radius: 4px; }
.quest-control .icon { width: 17px; height: 17px; color: #566b44; }
.quest-control:hover { color: #587039; }
.quest-control span { font-size: 8px; color: var(--muted); margin-left: 2px; }
#quest-route-label { font-size: inherit; color: inherit; margin-left: 0; }
.quest-control[aria-pressed="true"] { color: #41582b; background: #e6edda; padding-inline: 9px; }
.quest-control:disabled { cursor: default; opacity: .4; }
.quest-controls .button { min-height: 44px; padding: 11px 16px; font-size: 11px; gap: 15px; }
.quest-fair-play { font-size: 9px; line-height: 1.8; color: var(--muted); margin-top: 12px; max-width: 520px; }
.quest-celebration { position: absolute; inset: 0; pointer-events: none; display: none; }
.circuit-frame.is-solved .quest-celebration { display: block; }
.quest-celebration i { position: absolute; top: 42%; left: 50%; width: 6px; height: 13px; border-radius: 2px; background: var(--lime); opacity: 0; animation: circuit-spark .9s ease-out both; }
.quest-celebration i:nth-child(2) { --spark-x: 105px; --spark-y: -120px; animation-delay: .03s; }
.quest-celebration i:nth-child(3) { --spark-x: 140px; --spark-y: 10px; animation-delay: .06s; }
.quest-celebration i:nth-child(4) { --spark-x: 88px; --spark-y: 120px; animation-delay: .09s; }
.quest-celebration i:nth-child(5) { --spark-x: -65px; --spark-y: 150px; animation-delay: .02s; }
.quest-celebration i:nth-child(6) { --spark-x: -140px; --spark-y: 30px; animation-delay: .05s; }
.quest-celebration i:nth-child(7) { --spark-x: -120px; --spark-y: -95px; animation-delay: .08s; }
.quest-celebration i:nth-child(8) { --spark-x: -28px; --spark-y: -170px; animation-delay: .04s; }
.quest-no-script { padding: 16px; border-radius: 8px; background: #e9edde; font-size: 13px; margin-top: 18px; }
.quest-closing { border-top: 1px solid var(--line); padding-block: 54px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 66px; align-items: start; }
.quest-closing .eyebrow { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.quest-closing h2 { grid-row: 2 / 4; font-size: 36px; }
.quest-closing p { color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 350px; }
.quest-closing .text-link { justify-self: start; gap: 14px; font-size: 12px; }
@keyframes hint-ring { 0%, 40% { box-shadow: inset 0 0 0 4px var(--paper); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes circuit-spark { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--spark-x, 15px), var(--spark-y, -160px)) rotate(140deg); } }
@media (max-width: 1150px) {
  .quest-layout { gap: 35px; grid-template-columns: .7fr 1.3fr; }
  .quest-device { padding-inline: 24px; }
  .quest-station-top { flex-wrap: wrap; align-items: start; }
  .quest-station-top > div:first-child { flex: 1 1 150px; }
  .quest-modes button { padding-inline: 10px; }
  .quest-controls { gap: 8px 13px; }
}
@media (max-width: 900px) {
  #quest-station { scroll-margin-top: 90px; }
  .quest-intro { gap: 35px; padding-block: 35px 47px; }
  .quest-intro h1 { font-size: 67px; }
  .quest-intro-copy > p { font-size: 14px; }
  .quest-layout { grid-template-columns: 1fr; gap: 35px; max-width: 690px; }
  .quest-station { order: -1; }
  .quest-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
  .quest-device { padding: 21px 24px; }
  .quest-light { width: 85px; margin-block: 14px 8px; }
  .quest-device h2 { font-size: 24px; margin-bottom: 12px; }
  .quest-device > p { font-size: 10px; }
  .device-card-bottom { margin-top: 17px; font-size: 8px; padding-top: 13px; }
  .quest-how { margin-top: 8px; }
  .quest-how ol { gap: 14px; margin-block: 16px 19px; }
  .quest-how li { gap: 11px; }
  .quest-how li p { font-size: 10px; }
  .quest-how li strong { font-size: 12px; }
  .keyboard-note { font-size: 9px; padding-top: 14px; }
  .quest-station-top { flex-wrap: nowrap; }
  .quest-modes button { padding-inline: 15px; }
  .quest-closing { gap: 22px 35px; }
  .quest-closing h2 { font-size: 31px; }
}
@media (max-width: 600px) {
  .quest-intro { grid-template-columns: 1fr; gap: 24px; padding-block: 24px 35px; }
  .quest-intro .eyebrow { font-size: 8px; margin-bottom: 21px; }
  .quest-intro h1 { font-size: clamp(49px, 13vw, 68px); }
  .quest-intro-copy { justify-self: start; max-width: 360px; padding-bottom: 0; }
  .quest-intro-copy > p { font-size: 14px; line-height: 1.7; }
  .quest-intro-note { margin-top: 17px; font-size: 10px; }
  .quest-layout { gap: 26px; padding-bottom: 47px; }
  .quest-guide { display: block; }
  .quest-device { padding: 21px 22px; display: grid; grid-template-columns: 80px 1fr; gap: 0 17px; }
  .device-card-top { grid-column: 1 / -1; margin-bottom: 17px; }
  .quest-light { width: 80px; margin: 0; grid-column: 1; grid-row: 2 / 4; }
  .quest-device h2 { grid-column: 2; font-size: 23px; margin-bottom: 11px; }
  .quest-device > p { grid-column: 2; font-size: 10px; }
  .device-card-bottom { grid-column: 1 / -1; margin-top: 17px; }
  .quest-how { margin-top: 21px; }
  .quest-how .eyebrow { font-size: 7px; }
  .quest-how ol { gap: 10px; }
  .quest-how li p { max-width: none; margin-top: 1px; }
  .quest-how li strong { font-size: 11px; }
  .quest-how li { gap: 12px; }
  .keyboard-note { font-size: 9px; }
  .quest-station-top { gap: 10px; margin-bottom: 17px; }
  .quest-station-top .eyebrow { font-size: 7px; }
  .mode-description { font-size: 9px; max-width: 120px; }
  .quest-modes button { font-size: 10px; padding-inline: 9px; min-height: 46px; }
  .quest-modes button span { font-size: 8px; }
  .quest-metrics { gap: 9px; padding-block: 16px; }
  .quest-metrics span { font-size: 6px; }
  .quest-metrics strong { font-size: 21px; }
  .quest-complete { padding: 13px 14px; gap: 10px; }
  .quest-complete strong { font-size: 12px; }
  .quest-complete p { font-size: 9px; }
  .quest-complete .button { padding-inline: 11px; font-size: 10px; gap: 9px; }
  .circuit-frame { padding: 13px; border-radius: 11px; }
  .circuit-frame-top, .circuit-frame-bottom { font-size: 7px; }
  .circuit-frame-top { padding-bottom: 12px; }
  .circuit-frame-bottom { padding-top: 12px; }
  .quest-board { gap: 5px; }
  .circuit-tile { border-radius: 6px; }
  .endpoint-label { font-size: 6px; padding: 2px 3px; }
  .is-source .endpoint-label { bottom: 3px; left: 3px; }
  .is-target .endpoint-label { top: 3px; right: 3px; }
  .route-step { left: 3px; top: 3px; min-width: 14px; height: 14px; font-size: 7px; }
  .quest-feedback { margin-top: 15px; }
  .quest-feedback p { font-size: 11px; }
  .quest-board-tip { font-size: 9px; }
  .quest-controls { padding-top: 15px; gap: 5px 13px; }
  .quest-control { font-size: 10px; gap: 6px; }
  .quest-control span { font-size: 7px; }
  .quest-control .icon { width: 15px; height: 15px; }
  .quest-fair-play { font-size: 8px; }
  .quest-closing { display: block; padding-block: 32px 46px; }
  .quest-closing .eyebrow { display: block; margin-bottom: 17px; font-size: 7px; }
  .quest-closing h2 { font-size: 31px; margin-bottom: 20px; }
  .quest-closing p { font-size: 12px; }
  .quest-closing .text-link { margin-top: 23px; font-size: 11px; }
}
@media (max-width: 370px) {
  .quest-station-top > div:first-child { flex-basis: 110px; }
  .quest-modes button { padding-inline: 7px; }
  .quest-complete { flex-wrap: wrap; }
  .circuit-frame { padding: 10px; }
  .quest-board { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-connections, .bulb-body, .bulb-halo, .bulb-rays, .quest-device { transition: none; }
  .quest-celebration { display: none !important; }
  .circuit-tile.is-hinted { animation: none; box-shadow: inset 0 0 0 3px var(--paper); }
}