:root {
    color-scheme: light;
    --pip-line:#8a968b; --control-line:#d5d9cf; --control-hover:#e7eae1;
    --target-line:#aeb9ad; --mini-line:#bac7b8; --empty:#a4ada1; --stamp-empty:#8b9f8f;
    --board-empty:#b2b9ac; --anchor:#a7b2a4; --won-board:#e5ecdf; --won-line:#7c9a80;
    --accent-hover:#315f50; --dialog-shadow:#27382d16; --backdrop:#263c3440;
    --paper:#f5f3ed; --board:#ebe9e1; --ink:#34453f; --muted:#68736b;
    --line:#cfd3c9; --accent:#3f7563; --soft:#e0e9df;
    --board-size:min(360px, calc(100vw - 40px), calc(100svh - 290px));
    font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  * {box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  body {margin:0; background:var(--paper); color:var(--ink); min-height:100svh;}
  button {font:inherit; touch-action:manipulation; cursor:pointer; border:0; color:inherit;}
  button:focus-visible, #board:focus-visible {outline:2px solid var(--accent); outline-offset:5px;}
  button:disabled {cursor:default;}
  .app {min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:18px 20px; gap:0;}
  .top {width:min(360px, calc(100vw - 40px)); min-width:224px; height:36px; display:flex; align-items:center;
    justify-content:center; position:relative; margin-bottom:10px;}
  .levels {display:flex; gap:0; align-items:center;}
  .level {height:34px; width:34px; border-radius:50%; background:transparent; display:grid; place-items:center; position:relative;}
  .level::after {content:""; position:absolute; inset:5px; border:1px solid transparent; border-radius:50%; transition:border-color .2s;}
  .level[aria-current="step"]::after {border-color:var(--accent);}
  .pip {width:7px; height:7px; border:1px solid var(--pip-line); border-radius:50%; background:transparent; transition:background .2s; display:grid; place-items:center;}
  .level[aria-current="step"] .pip {background:var(--accent); border-color:var(--accent);}
  .level.complete .pip {width:13px; height:13px; background:var(--accent); border-color:var(--accent);}
  .pip svg {width:9px; height:9px; stroke:var(--paper); visibility:hidden;}
  .complete .pip svg {visibility:visible;}
  .icon {width:46px; height:46px; border:1px solid var(--control-line); border-radius:50%; background:transparent;
    display:grid; place-items:center; transition:background .16s, color .16s, opacity .16s, transform .16s;}
  .icon svg {width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .icon:not(:disabled):hover {background:var(--control-hover);}
  .icon:not(:disabled):active {transform:scale(.95);}
  .icon:disabled {opacity:.27;}
  .help-open {position:absolute; right:0; width:32px; height:32px; border-color:transparent; color:var(--muted);}
  .help-open svg {width:18px; height:18px;}
  .reference {width:var(--board-size); min-width:224px; display:flex; align-items:flex-start; justify-content:space-between;
    padding:0 24px; margin-bottom:18px;}
  .reference figure {margin:0; text-align:center; width:106px; position:relative;}
  .reference figcaption {font-size:12px; line-height:18px; color:var(--muted); margin-bottom:8px; letter-spacing:.01em;}
  .mini {width:76px; height:76px; display:block; margin:auto; overflow:visible;}
  #target {width:76px; height:76px;}
  #stamp {width:76px; height:76px;}
  .target-frame {fill:none; stroke:var(--target-line); stroke-width:1.5; stroke-dasharray:3.5 4;}
  .stamp-frame {fill:var(--soft); stroke:var(--accent); stroke-width:1.5;}
  .mini-line {stroke:var(--mini-line); stroke-width:1; opacity:.65;}
  .mark {fill:var(--ink); transition:opacity .1s;}
  .empty {fill:var(--empty);}
  #stamp .empty {fill:var(--stamp-empty);}
  #goal-check {position:absolute; top:43px; right:-7px; width:20px; height:20px; border-radius:50%; background:var(--accent);
    color:var(--paper); display:grid; place-items:center; opacity:0; transform:scale(.8); transition:opacity .25s,transform .25s;}
  #goal-check svg {width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .won #goal-check {opacity:1; transform:scale(1);}
  .board-wrap {width:var(--board-size); height:var(--board-size); min-width:224px; min-height:224px; position:relative;}
  #board {width:100%; height:100%; display:block; overflow:visible; touch-action:none; cursor:pointer; user-select:none; -webkit-user-select:none; border-radius:13px;}
  .board-bg {fill:var(--board); stroke:var(--line); stroke-width:1; transition:fill .3s,stroke .3s;}
  .board-line {stroke:var(--line); stroke-width:1;}
  #board .empty {fill:var(--board-empty);}
  .anchor {fill:none; stroke:var(--anchor); stroke-width:1.15; stroke-linecap:round; opacity:.62;}
  .select-tint {fill:var(--accent); opacity:.055;}
  .select-outline {fill:none; stroke:var(--accent); stroke-width:2;}
  #selection {opacity:0; transition:opacity .1s; pointer-events:none;}
  #selection.visible {opacity:1;}
  .won .board-bg {fill:var(--won-board); stroke:var(--won-line);}
  .won .anchor {opacity:0;}
  .won #board {cursor:default;}
  .exchange-hidden {opacity:0 !important; transition:none !important;}
  .instructions {text-align:center; font-size:13px; line-height:1.65; color:var(--muted); margin:17px 0 15px; max-width:380px;}
  .instructions span {display:block;}
  .solve-title {color:var(--accent); font-weight:600;}
  .controls {display:flex; gap:12px; align-items:center; justify-content:center; height:54px; flex-shrink:0;}
  .controls .icon {width:60px; height:54px; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:11px/1.2 system-ui,sans-serif;}
  .controls #next {width:132px; flex-direction:row; gap:8px; font-size:13px; white-space:nowrap;}
  .controls #next svg {width:18px; height:18px; flex-shrink:0;}
  #next.ready {background:var(--accent); border-color:var(--accent); color:var(--paper); opacity:1;}
  #next.ready:hover {background:var(--accent-hover);}
  #flights {position:fixed; inset:0; width:100vw; height:100vh; overflow:visible; pointer-events:none; z-index:5;}
  dialog {border:1px solid var(--line); color:var(--ink); background:var(--paper); border-radius:18px;
    padding:30px 28px 25px; max-width:380px; width:calc(100vw - 36px); box-shadow:0 12px 70px var(--dialog-shadow);}
  dialog::backdrop {background:var(--backdrop); backdrop-filter:blur(3px);}
  .help-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
  .help-head h1 {font-size:17px; font-weight:550; margin:0;}
  .help-head .icon {width:32px; height:32px; border:0;}
  dialog p {font-size:14px; line-height:1.65; margin:0 0 14px;}
  .help-foot {font-size:12px; color:var(--muted); padding-top:14px; border-top:1px solid var(--line); margin-bottom:0;}
  kbd {font-family:inherit; font-size:11px; border:1px solid var(--line); border-radius:4px; padding:1px 4px; white-space:nowrap;}
  .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;}
  @media (max-height:650px) {
    :root {--board-size:min(328px, calc(100vw - 40px), calc(100svh - 264px));}
    .app {padding:10px 20px;}
    .top {height:32px; margin-bottom:4px;}
    .reference {margin-bottom:12px;}
    .reference figcaption {margin-bottom:5px; font-size:11px;}
    .mini, #target, #stamp {width:64px; height:64px;}
    .instructions {margin:11px 0 11px; font-size:12px; line-height:1.55;}
    #goal-check {top:37px;right:0;}
  }
  @media (max-width:350px) {.reference {padding:0 8px;} .instructions {font-size:11.5px;}}
  @media (prefers-reduced-motion:reduce) {* {transition:none !important;}}

  .transfer-mark {fill:var(--ink);}
  .material-defs {position:absolute; width:0; height:0; pointer-events:none;}
  .masthead {display:none;}
  #board {outline:none;}
  #board:focus-visible {outline:2px solid var(--accent); outline-offset:5px;}
  dialog {max-height:calc(100svh - 32px); overflow:auto;}

  /* A brief, steady paired highlight acknowledges an identical exchange. */
  #same-pattern-area {opacity:0; pointer-events:none;}
  #same-pattern-area rect {fill:var(--accent); fill-opacity:.12; stroke:var(--accent); stroke-width:2.8;}
  .same-pattern #same-pattern-area {opacity:1;}
  .same-pattern #stamp .stamp-frame {fill:var(--accent); fill-opacity:.12; stroke:var(--accent); stroke-width:3;}
  .same-pattern #instruction-primary {color:var(--accent); font-weight:600;}