:root{color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#153c4d;background:#153c4d;font-synthesis:none;--paper:#f4ead4;--ink:#153c4d;--green:#9cafa0;--gold:#d99852}*{box-sizing:border-box}body{margin:0;min-height:100svh}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #568fae;outline-offset:4px}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-underline-offset:4px}button{touch-action:manipulation;user-select:none}.app{max-width:1120px;margin:auto;padding:25px 35px 18px;color:var(--paper)}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;padding-bottom:17px;border-bottom:1px solid #ffffff28}.brand{font-family:Georgia,serif;font-size:36px;line-height:1;text-decoration:none;letter-spacing:-1.4px}.brand span{display:inline-block;vertical-align:middle;margin-left:20px;font-family:system-ui,sans-serif;font-size:13px;font-weight:450;letter-spacing:.03em;color:#bdc9bd}.prototype{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#bdc9bd}.layout{display:grid;grid-template-columns:minmax(0,690px) minmax(210px,1fr);gap:38px;align-items:start}.room-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.eyebrow{font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;color:#9cafa0}h1{font-family:Georgia,serif;font-size:28px;font-weight:400;line-height:1.1;margin:3px 0 0;letter-spacing:-.025em}.toolbar{display:flex;gap:7px}.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;background:transparent;color:var(--paper);font-size:24px;position:relative;line-height:1}.icon-button:hover{background:#ffffff10}.sound-off{position:absolute;right:7px;top:7px;font-size:14px}.icon-button[aria-pressed=true] .sound-off{display:none}.board-wrap{position:relative;line-height:0;border-radius:12px;overflow:hidden;background:#e9d8b7;border:1px solid #ffffff20;box-shadow:0 14px 30px #051e2c35}canvas{display:block;width:100%;height:auto;aspect-ratio:1;touch-action:none;user-select:none}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#f4ead4;color:#153c4d;font:17px Georgia,serif;line-height:1.5}.loading[hidden]{display:none}.below{display:flex;align-items:baseline;gap:20px;padding:12px 2px 0;min-height:58px}.below>span{font-size:12px;white-space:nowrap;color:#c5d0c4}.below strong{font-size:17px;margin-left:7px;color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums}#status{font-size:12px;color:#c5d0c4;line-height:1.5;margin:0}.side{padding-top:17px}.intro h2{font-family:Georgia,serif;font-size:36px;font-weight:400;line-height:1.08;letter-spacing:-.035em;margin:14px 0 18px}.intro>p:not(.eyebrow){color:#c5d0c4;font-size:14px;line-height:1.65;margin:0}.controls{margin-top:26px}.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,44px);gap:5px;width:max-content;margin:0 auto}.dpad button{border:1px solid #ffffff36;border-radius:9px;background:#ffffff08;color:var(--paper);font-size:25px;line-height:1;touch-action:none}.dpad button:hover,.dpad button:active,.dpad button.held{background:#d99852;color:var(--ink);border-color:#d99852}.dpad [data-direction=up]{grid-column:2}.dpad [data-direction=left]{grid-column:1;grid-row:2}.dpad span{grid-row:2;grid-column:2;align-self:center;text-align:center;font-size:24px;color:#9cafa0}.dpad [data-direction=right]{grid-row:2;grid-column:3}.dpad [data-direction=down]{grid-row:3;grid-column:2}#instructions{font-size:11px;line-height:1.8;color:#bbc9bd;text-align:center;margin:14px 0 0}.rooms{margin-top:26px;border-top:1px solid #ffffff26;padding-top:18px}.rooms h3{font-size:13px;font-weight:550;margin:0 0 12px}#levels{display:flex;gap:7px}#levels button{width:37px;height:37px;border:1px solid #ffffff35;background:transparent;color:var(--paper);border-radius:50%;font-size:13px;position:relative}#levels button[aria-current=true]{background:var(--paper);color:var(--ink);border-color:var(--paper)}#levels button.completed::after{content:'';width:4px;height:4px;border-radius:50%;background:#d99852;position:absolute;bottom:4px;left:calc(50% - 2px)}.small,.best{font-size:11px;line-height:1.6;color:#aebfaf}.small{margin-bottom:0}.best{min-height:18px;margin-top:12px}footer{display:flex;justify-content:space-between;gap:20px;margin-top:24px;padding-top:16px;border-top:1px solid #ffffff26;font-size:11px;color:#aebfaf}footer a{text-decoration:none}footer a:hover{text-decoration:underline}dialog{border:none;border-radius:16px;width:min(390px,calc(100% - 32px));padding:0;background:var(--paper);color:var(--ink);box-shadow:0 20px 100px #06233080}dialog::backdrop{background:#092b3fbd;backdrop-filter:blur(3px)}.dialog-content{padding:30px;text-align:center}.dialog-content h2{font:400 36px/1.1 Georgia,serif;letter-spacing:-.035em;margin:10px 0 16px}.dialog-content>p:not(.eyebrow){font-size:14px;line-height:1.6}.dialog-content .eyebrow{color:#5f7d71}.cat-picture{margin:-10px -12px 16px}.cat-picture svg{display:block;width:100%;height:auto}.cat-picture[hidden]{display:none}.primary,.secondary{width:100%;padding:13px 16px;border-radius:7px;font-size:14px}.primary{border:1px solid var(--ink);background:var(--ink);color:var(--paper);margin-top:10px}.secondary{border:0;background:transparent;margin-top:7px}.secondary:hover{text-decoration:underline}@media(max-width:760px){.app{padding:18px 18px 16px;max-width:620px}.top{margin-bottom:20px;padding-bottom:13px}.brand{font-size:30px}.brand span{font-size:12px;margin-left:13px}.prototype{font-size:9px}.layout{grid-template-columns:1fr;gap:8px}.room-bar{margin-bottom:13px}h1{font-size:24px}.icon-button{width:36px;height:36px;font-size:22px}.side{padding-top:0;display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.intro{display:none}.controls{grid-column:1;grid-row:1 / 3;margin-top:5px}.dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,39px);gap:4px;margin:0}.rooms{grid-column:2;margin-top:6px;border-top:0;padding-top:0}.rooms h3{margin:0 0 10px}#levels{gap:5px;flex-wrap:wrap}#levels button{width:31px;height:31px}.rooms .small{font-size:10px;max-width:150px}.best{grid-column:2;margin-top:8px;align-self:start;max-width:160px}#instructions{text-align:left;font-size:10px;line-height:1.7;margin-top:9px;max-width:180px}.below{gap:14px;min-height:48px;padding-top:10px}#status{font-size:11px}.below>span{font-size:11px}.below strong{font-size:15px}footer{margin-top:18px;font-size:10px}footer>span{display:none}.dialog-content{padding:25px}}@media(max-width:360px){.app{padding:14px 12px}.prototype{font-size:8px}.side{column-gap:10px}.dpad{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,38px)}#levels button{width:28px;height:28px}.toolbar{gap:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}
/* Box-puzzle controls and progress. */
.mobile-rule{display:none}.dpad .undo{grid-column:2;grid-row:2;font-size:23px;color:#bdc9bd}.dpad .undo:disabled{opacity:.25}.below{flex-wrap:wrap;row-gap:7px;min-height:65px}.below #status{flex:1;min-width:200px}@media(max-width:760px){.mobile-rule{display:block;grid-column:1 / -1;font-size:12px;line-height:1.6;color:#c5d0c4;margin:0 0 13px}.controls{grid-row:2 / 4}.rooms{grid-row:2}.best{grid-row:3}.below #status{flex-basis:100%;min-width:0}.below{padding-bottom:11px;min-height:65px}}
.choose-level{padding:10px 14px;background:transparent;color:var(--paper);border:1px solid #ffffff50;border-radius:7px;font-size:13px}.choose-level:hover{background:#ffffff15}#level-picker{width:min(560px,calc(100% - 28px));max-height:85svh;overflow:auto}.level-picker-content{padding:25px}.level-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:18px}.level-picker-head h2{font:400 32px/1.1 Georgia,serif;margin:0}.level-picker-head button{border:0;background:transparent;font-size:30px;min-width:40px}#level-picker #levels{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}#level-picker #levels button{width:100%;height:38px;border:1px solid #153c4d50;color:#153c4d;background:transparent;border-radius:6px}#level-picker #levels button[aria-current=true]{background:#153c4d;color:#f4ead4}#level-picker p{font-size:12px;color:#607466;line-height:1.5;margin-bottom:0}@media(max-width:600px){#level-picker #levels{grid-template-columns:repeat(5,1fr)}.level-picker-content{padding:20px}.choose-level{font-size:12px;padding:9px 11px}}
