:root{--ink:#263b33;--muted:#6e786d;--paper:#f7f3e9;--gold:#b97927;--green:#3b6651}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif}header,footer{display:flex;justify-content:space-between;align-items:center;max-width:1160px;margin:auto;padding:28px 36px;border-bottom:1px solid #dcded1;font:12px Arial,sans-serif;letter-spacing:1.8px}.brand{color:var(--ink);text-decoration:none;font-size:24px;display:flex;gap:12px;align-items:center}.brand span{font-size:11px;font-weight:700}.edition{letter-spacing:0;color:var(--muted)}main{max-width:1080px;margin:auto;padding:48px 36px}.intro{text-align:center;margin-bottom:42px}.eyebrow,.small{font:10px Arial,sans-serif;letter-spacing:2px;font-weight:700;color:var(--muted)}h1{font-weight:400;font-size:clamp(42px,6vw,68px);letter-spacing:-2.5px;margin:14px 0}h1 span{color:var(--gold)}.intro p{font-size:19px;line-height:1.55;color:var(--muted);margin:0}.experience{display:grid;grid-template-columns:minmax(0,600px) minmax(240px,1fr);gap:58px}.boardtop{display:flex;justify-content:space-between;font:11px Arial,sans-serif;letter-spacing:1px;margin-bottom:14px}.boardtop strong{font-size:19px;color:var(--green)}.boardwrap{position:relative;margin-right:32px;margin-bottom:32px;box-shadow:0 14px 35px #233b3310}#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:5px solid #314b3e;border-radius:2px;overflow:hidden}.square{position:relative;border:0;border-radius:0;padding:0;aspect-ratio:1;background:#e6e6d5;color:#244035;font:clamp(11px,1.4vw,17px) Arial,sans-serif;display:grid;place-items:center;cursor:pointer}.square.dark{background:#64816c;color:white}.square.visited{background:#dcd7b9}.square.dark.visited{background:#5e7561}.square .number{z-index:2;background:inherit;border-radius:100%;min-width:24px;padding:3px}.square.current{background:#d9aa59!important;color:#263b33!important}.square.current .number{position:absolute;right:4px;top:4px;font-size:10px;min-width:0;padding:0;background:transparent}.knight{font-size:clamp(23px,4vw,43px);z-index:2;line-height:1}.square.legal:after{content:'';width:23%;height:23%;border-radius:50%;background:#e7bd74;box-shadow:0 0 0 5px #e7bd7430;position:absolute}.square.highlight{background:#e9bc62!important;color:#263b33}.square:focus-visible{outline:3px solid #d28b26;outline-offset:-4px;z-index:3}#path{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);pointer-events:none}#trace{stroke:#d5a04e;stroke-width:5;opacity:.8}.rows{position:absolute;left:100%;top:5px;height:calc(100% - 10px);display:grid;grid-template-rows:repeat(8,1fr);width:32px}.cols{position:absolute;top:100%;left:5px;width:calc(100% - 10px);display:grid;grid-template-columns:repeat(8,1fr);height:32px}.sum{padding:0;border:0;background:transparent;color:var(--muted);font:10px Arial,sans-serif;cursor:pointer}.sum.complete{color:var(--green);font-weight:bold}.sum:hover,.sum:focus-visible{background:#e9bc62;outline:none}.progress{height:3px;background:#dddccd;margin-top:16px}#bar{height:100%;background:var(--green);transition:width .2s}#status{min-height:36px;font:13px/1.5 Arial,sans-serif;color:var(--muted);margin:17px 0 10px}.controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}button{font:12px Arial,sans-serif;border:1px solid #cdd2c5;background:transparent;color:var(--ink);border-radius:5px;padding:11px 15px;cursor:pointer;transition:background .15s}button:hover{background:#e5e8dc}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.toggle{display:flex;gap:7px;align-items:center;font:11px Arial,sans-serif;color:var(--muted)}.controls .toggle{margin-left:auto}input{accent-color:var(--green)}aside{padding-top:26px}h2{font-size:29px;font-weight:400;line-height:1.15;margin:14px 0 18px}aside p{font:13px/1.7 Arial,sans-serif;color:var(--muted)}.hop{height:69px;display:flex;align-items:center;gap:22px;color:var(--green);font-size:55px}.hop span{font:23px/1 monospace;color:var(--gold)}.hop i{font-size:12px;color:var(--gold);align-self:flex-end;padding-bottom:12px}.legend{font:11px Arial,sans-serif;color:var(--muted);display:flex;align-items:center;gap:9px;margin-top:20px}.legend span{width:8px;height:8px;background:#d5a04e;border-radius:50%}.examples{margin-top:33px;padding-top:28px;border-top:1px solid #d8dccf}.examples h2{font-size:24px}.examplebuttons{display:grid;gap:9px;margin-top:20px}.examplebuttons button{text-align:left;padding:14px 17px}.examplebuttons span{float:right}#magic{background:var(--ink);color:var(--paper);border-color:var(--ink)}#magic:hover{background:var(--green)}#playback{margin-top:14px}.transport{display:flex;gap:5px}.transport button{padding:9px;font-size:11px}.speed{display:flex;gap:10px;align-items:center;font:11px Arial,sans-serif;margin:14px 0;color:var(--muted)}.speed input{width:100%;min-width:30px}.secret{border-top:1px solid #d8dccf;margin-top:65px;padding-top:35px;display:grid;grid-template-columns:1fr 1.1fr;gap:60px}.secret h2{font-size:34px}.secret p{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 16px}.secret strong{color:var(--gold);font-size:22px}.secret .footnote{font:11px/1.8 Arial,sans-serif}.footnote a{display:block;color:var(--green);margin-top:9px}footer{border-top:1px solid #dcded1;border-bottom:0;color:var(--muted);font-size:10px;margin-top:15px;padding-bottom:35px}footer span:last-child{letter-spacing:0} @media(max-width:760px){header{padding:22px}.edition{display:none}main{padding:30px 20px}.intro{margin-bottom:30px}.experience{grid-template-columns:1fr;gap:20px}.play{max-width:600px;width:100%;margin:auto}aside{padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.examples{border-top:0;margin-top:0;padding-top:0}.secret{gap:20px;margin-top:40px}.square{font-size:14px}.knight{font-size:36px}.secret h2{font-size:27px}}@media(max-width:460px){aside,.secret{grid-template-columns:1fr}.examples{padding-top:20px;border-top:1px solid #d8dccf}.controls .toggle{margin-left:0}footer{padding:20px;gap:15px}.square .number{min-width:19px;padding:2px}.knight{font-size:29px}.secret{gap:0}.sum{font-size:9px}}

/* Appearance follows the existing Towers of Hanoi / Idle Delights page. */
:root{--ink:#f0f0f0;--muted:#aaa;--paper:#1a1a1a;--gold:#e5c100;--green:#e5c100;--border:#444;--card-bg:#252525}
[hidden]{display:none!important}
body{line-height:1.6}
.puzzle-content{--puzzle-content-width:1100px}
main{max-width:none;padding:0}
a,a:visited{color:#ffd700;text-decoration:none;border-bottom:1px dotted #ffd700}
a:hover{color:#fff200;border-bottom-color:#fff200}
.site-header{margin:2rem 0 3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
h1{font-size:2.4rem;font-weight:700;letter-spacing:normal;margin:.5rem 0;color:var(--gold)}
h1 span{display:none}
.intro p{font-size:1rem;line-height:1.6}
.eyebrow,.small{color:var(--muted);letter-spacing:1.2px}
.intro .eyebrow{margin-top:1rem}
.experience{grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:1.3rem;align-items:start}
.play,.guide,.examples,.secret{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:1.4rem;min-width:0}
aside{padding:0;min-width:0}
.examples{margin-top:1.3rem}
h2,.examples h2,.secret h2{font-size:1.3rem;font-weight:700;line-height:1.4;color:var(--gold);margin:0 0 .7rem}
.small{display:block;margin-bottom:.7rem}
aside p,.secret p{font:1rem/1.6 Georgia,'Times New Roman',serif;margin:0 0 .7rem}
.boardtop{gap:.5rem;flex-wrap:wrap;letter-spacing:.5px;line-height:1.6}
.boardwrap{box-shadow:none;margin-right:32px;margin-bottom:32px}
#board{border-color:#716451}
.square{background:#ece3cc;color:#242424}
.square.dark{background:#65594a;color:#fff}
.square.visited{background:#ded2b4}
.square.dark.visited{background:#62533e}
.square.current,.square.highlight{background:#e5c100!important;color:#1a1a1a!important}
.square.legal:after{background:#ffd700;box-shadow:0 0 0 4px #ffd70040}
.square:focus-visible{outline-color:#fff200}
#trace{stroke:#e5c100}
.sum{color:#ccc;font-size:11px}
.sum.complete{color:#ffd700}
.sum:hover,.sum:focus-visible{background:#e5c100;color:#111}
.progress{background:#444}
#status{font: .95rem/1.6 Georgia,'Times New Roman',serif;min-height:3.2rem}
button{font:inherit;background:#252525;color:#f0f0f0;border:1px solid #444;border-radius:6px;min-height:44px;padding:.6rem 1rem}
button:hover:not(:disabled){background:#333;border-color:#e5c100;color:#e5c100}
button:disabled{opacity:.5}
.square,.sum{min-height:0}
.square:hover:not(:disabled){background:#ece3cc;color:#242424;border:0}
.square.dark:hover:not(:disabled){background:#65594a;color:#fff}
.square.visited:hover:not(:disabled){background:#ded2b4}
.square.dark.visited:hover:not(:disabled){background:#62533e}
.sum:hover:not(:disabled){background:#e5c100;color:#111;border:0}
#magic{background:#252525;color:#e5c100;border-color:#e5c100}
#magic:hover{background:#333}
.toggle,.legend,.speed{font:.85rem/1.5 Georgia,'Times New Roman',serif}
.toggle{min-height:44px}
.controls .toggle{margin-left:0}
.transport{flex-wrap:wrap}
.transport button{font-size:.85rem;padding:.45rem .6rem}
.legend span{background:#e5c100}
.secret{margin-top:1.3rem;gap:1.5rem;grid-template-columns:1fr 1.5fr}
.secret .footnote{font:.85rem/1.6 Georgia,'Times New Roman',serif}
.footnote a{color:#ffd700}
footer{display:block;max-width:none;margin-top:3rem;padding:1.5rem 0 0;border-color:#444;text-align:center;font:.9rem/1.6 Georgia,'Times New Roman',serif;letter-spacing:normal}
@media(max-width:850px){.experience{grid-template-columns:1fr;gap:1.3rem}.play{max-width:620px;margin:auto;width:100%}aside{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}.examples{margin:0}.secret{grid-template-columns:1fr 1.5fr}}
@media(max-width:600px){.site-header{margin:.5rem 0 1.5rem}h1{font-size:2rem}.play,.guide,.examples,.secret{padding:.8rem}aside,.secret{grid-template-columns:1fr}.secret{gap:.7rem}.boardtop{font-size:10px}.square{font-size:12px}.square .number{min-width:18px;padding:2px}.knight{font-size:28px}.square.current .number{right:2px;top:2px;font-size:9px}.sum{font-size:10px}.controls{gap:.5rem}.controls button{flex:1}.controls .toggle{width:100%}footer{padding:1.5rem 0 0}.secret strong{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){button,#bar{transition:none}}