:root{--paper:#f7f5ef;--ink:#272d28;--muted:#62675f;--line:#dedfd5;--purple:#4c3564;--green:#dbeaac;--radius:22px;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #5c3d91;outline-offset:5px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.page-shell{max-width:1320px;padding:0 56px;margin:auto}.site-header{height:114px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:26px;font-weight:750;letter-spacing:-1.3px}.brand-light{font-weight:400}.brand-period{color:var(--purple)}.brand-mark{display:grid;grid-template-columns:12px 12px;gap:4px;transform:rotate(-10deg)}.brand-mark i{width:12px;height:12px;border-radius:50%;background:#8ca56c}.brand-mark i:nth-child(2){background:#d6b95c}.brand-mark i:nth-child(3){background:#bb8299}.brand-mark i:nth-child(4){background:#e2ded1;border:1px solid #cbc6b8}.header-actions{display:flex;align-items:center;gap:12px}.icon-button{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:22px}.icon-button:hover{background:#eeece3}.icon-button svg{width:20px;height:20px}.connection{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-right:16px;max-width:240px}.status-dot{width:6px;height:6px;background:#8b8a77;border-radius:50%;flex-shrink:0}.connection.ready .status-dot{background:#567d40}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;padding:65px 0 62px;align-items:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.1px;margin:0 0 24px;display:flex;gap:10px;align-items:center}.eyebrow>span{width:19px;height:1px;background:var(--ink)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(44px,5.3vw,72px);font-weight:400;letter-spacing:-3.5px;line-height:1.08;margin-bottom:23px}.hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:var(--purple)}.hero-description{color:var(--muted);font-size:15px;line-height:1.8;margin-bottom:22px}.text-button{display:inline-flex;align-items:center;gap:9px;border:0;border-bottom:1px solid #b3b4a8;padding:7px 0;background:transparent;font-size:12px;font-weight:600}.text-button svg{width:17px;height:17px}.text-button:hover{color:var(--purple);border-color:var(--purple)}.mat-scene{height:290px;position:relative;display:flex;align-items:center;justify-content:center}.mat{width:310px;height:221px;border:12px solid #c797af;border-right-color:#d8bf67;border-top-color:#f2eee4;border-bottom-color:#8b9d6b;border-radius:14px;background:#e8e5d9;box-shadow:0 20px 34px -17px #5f664b50,0 0 0 1px #ded8ca;transform:rotate(-12deg);padding:13px;position:relative}.mat-dots{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:9px;height:100%}.mat-dot{border-radius:50%;box-shadow:inset 0 -2px 3px #0000000c}.mat-dot.furry{background:radial-gradient(ellipse at center,#f9f7f1,#ddd9cd);outline:2px dotted #e7e2d6;outline-offset:-3px}.mat-dot.rough{background-color:#c695ae;background-image:radial-gradient(#8c55784d .7px,transparent .9px);background-size:3px 3px}.mat-dot.ridged{background:repeating-linear-gradient(0deg,#d7ba5f 0 2px,#e0c76f 2px 4px)}.mat-dot.smooth{background:linear-gradient(135deg,#aaba85,#8e9e6b)}.scene-note{position:absolute;font-family:Georgia,serif;font-style:italic;font-size:14px;color:#707260}.note-top{right:20px;top:0;transform:rotate(6deg)}.note-bottom{bottom:1px;left:23px;transform:rotate(-5deg)}.scene-spark{position:absolute;right:8px;bottom:39px;width:35px;stroke:#7d8e59;stroke-width:1.3}.mode-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.mode-heading .eyebrow{margin-bottom:11px}.mode-heading h2{font-size:26px;letter-spacing:-.7px;font-weight:500;margin-bottom:0}.mode-hint{color:var(--muted);font-size:11px;margin-bottom:4px}.mode-hint span{display:inline-block;font-size:22px;margin-left:9px}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.mode-card{position:relative;display:flex;flex-direction:column;align-items:start;min-height:251px;padding:24px 23px 20px;border:1px solid transparent;border-radius:var(--radius);text-align:left;transition:transform .18s,box-shadow .18s}.mode-card:hover{transform:translateY(-4px);box-shadow:0 8px 18px #272d2810}.mode-card.classic{background:#e9e1f0}.mode-card.easy{background:#e2eadb}.mode-card.medium{background:#f3e9c8}.mode-card.hard{background:#f1dfe1}.card-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:25px}.mode-symbol{width:36px;height:36px;color:#4e3b63}.easy .mode-symbol{color:#506949}.medium .mode-symbol{color:#8c6b27}.hard .mode-symbol{color:#8d5660}.mode-symbol svg{height:100%;width:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.card-number{font-size:10px;color:#64635e;letter-spacing:1px}.mode-card h3{font-size:19px;letter-spacing:-.5px;font-weight:600;line-height:1.25;margin-bottom:10px}.mode-card p{font-size:12px;line-height:1.7;color:#555b51;margin-bottom:22px}.card-bottom{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;font-size:10px;color:#53574d}.card-arrow{font-size:20px}.prototype-note{display:flex;align-items:center;gap:11px;font-size:11px;color:var(--muted);margin:23px 0 32px}.prototype-note>span{font-size:16px;color:#8c8977}.prototype-note p{margin:0;line-height:1.7}.prototype-note strong{font-weight:600}.site-footer{border-top:1px solid var(--line);padding:23px 0 28px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#62675f}.site-footer span:last-child{display:flex;align-items:center;gap:11px}.site-footer span span{font-size:20px;color:#7d8e59}#game{padding-top:26px}.game-heading{display:flex;justify-content:space-between;align-items:center}.back-button{border:0;background:transparent;padding:10px 0;font-size:13px;color:var(--muted)}.back-button span{margin-right:8px}.level-badge{border:1px solid #d7d3c9;border-radius:20px;padding:6px 12px;font-size:11px}.game-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0}.game-title-row h1{font-size:30px;font-weight:500;letter-spacing:-1px;margin:0}.orientation{font-size:13px;line-height:1.7;color:var(--muted);border-left:2px solid #9c7ca3;padding-left:15px}.instruction-panel{padding:21px 25px;background:#eeece4;border:1px solid #e5e2d7;border-radius:15px;margin-bottom:16px}.instruction-meta{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1.7px;color:#65695d;margin-bottom:12px}.instruction-panel p{font-size:clamp(20px,2.2vw,29px);line-height:1.4;margin:0;min-height:40px}.play-controls{display:grid;grid-template-rows:1fr 1fr;gap:12px}.play-button{position:relative;display:flex;align-items:center;gap:28px;border:0;border-radius:20px;text-align:left;padding:26px 38px;min-height:155px;width:100%;font-size:clamp(26px,3.5vw,42px);font-weight:500;letter-spacing:-1px}.next-button{background:var(--green);color:#293b24}.next-button:hover{background:#d0e19b}.repeat-button{background:var(--purple);color:#fff}.repeat-button:hover:not(:disabled){background:#5a4075}.repeat-button:disabled{background:#ded9e3;color:#6b6275}.control-icon{font-size:55px;font-weight:300;width:59px;text-align:center}.play-button small{display:block;font-size:13px;font-weight:400;letter-spacing:0;margin-top:10px;opacity:.85}.control-position{margin-left:auto;align-self:start;font-size:11px;letter-spacing:1px;opacity:1}.play-footer{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.play-footer .text-button{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}.skip-link{position:fixed;left:10px;top:-100px;z-index:5;background:var(--purple);color:white;padding:12px}.skip-link:focus{top:10px}dialog{border:1px solid #d3d0c3;border-radius:24px;max-width:620px;width:calc(100% - 32px);max-height:85dvh;background:var(--paper);color:var(--ink);padding:30px;line-height:1.75}dialog::backdrop{background:#282d2866;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.dialog-heading h2{margin:0;font-weight:500;letter-spacing:-1px}dialog h3{font-size:16px;margin-top:25px;margin-bottom:8px}dialog p{font-size:14px}.fine-print{font-size:12px!important;color:var(--muted);margin-top:20px}.primary-small{padding:12px 18px;border:0;border-radius:10px;background:var(--purple);color:white;margin:4px 8px 4px 0;font-size:13px}@media(min-width:1500px){.hero{padding-top:80px;padding-bottom:80px}.mode-card{min-height:270px}}@media(max-width:1000px){.page-shell{padding:0 32px}.hero h1{font-size:55px}.hero{gap:10px}.mat{width:265px;height:195px;padding:10px;border-width:10px}.mat-dots{gap:7px}.mode-grid{grid-template-columns:repeat(2,1fr)}.mode-card{min-height:230px}.connection{margin-right:0;font-size:10px}.mat-scene{height:260px}.scene-note{font-size:12px}.note-top{right:0}.note-bottom{left:10px}.card-top{margin-bottom:20px}}@media(max-width:640px){.page-shell{padding:0 22px}.site-header{height:86px;gap:10px}.brand{font-size:23px;gap:10px}.header-actions{gap:7px}.connection{position:absolute;top:95px;left:22px;font-size:10px;max-width:calc(100vw - 44px)}.icon-button{width:38px;height:38px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:54px 0 36px;gap:24px}.hero h1{font-size:52px;letter-spacing:-2.9px}.eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:19px}.hero-description{font-size:14px}.desktop-break{display:none}.mat-scene{height:225px;max-width:340px;width:100%;align-self:center}.mat{width:250px;height:180px;padding:9px;border-width:9px}.mat-dots{gap:6px}.note-top{right:0;top:0}.note-bottom{bottom:-3px;left:4px}.scene-spark{right:0;bottom:21px;width:25px}.mode-heading{align-items:start}.mode-heading h2{font-size:25px}.mode-hint{display:none}.mode-grid{gap:12px}.mode-card{padding:19px 16px;min-height:242px;border-radius:18px}.card-top{margin-bottom:22px}.mode-card h3{font-size:18px}.mode-card p{font-size:12px}.card-number{font-size:9px}.card-bottom{font-size:9px}.prototype-note{align-items:start;font-size:10px;margin:22px 0 26px}.site-footer{font-size:9px;flex-direction:column;gap:9px;padding:19px 0}#game{padding-top:44px}.game-title-row h1{font-size:26px}.game-title-row{align-items:start;flex-direction:column;gap:10px;margin:18px 0}.game-title-row .text-button{font-size:11px}.instruction-panel{padding:18px}.instruction-panel p{font-size:22px}.instruction-meta{font-size:9px;letter-spacing:1px}.play-button{padding:24px 22px;min-height:160px;font-size:30px;gap:15px;border-radius:17px}.play-button small{font-size:12px;max-width:210px;line-height:1.5}.control-icon{font-size:42px;width:43px}.control-position{position:absolute;right:17px;top:17px;font-size:9px}.play-footer{font-size:10px;gap:15px}.play-footer .text-button{font-size:11px}dialog{padding:22px}.dialog-heading h2{font-size:23px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}@media(forced-colors:active){.mode-card,.play-button{border:2px solid ButtonText}.mat{border:2px solid CanvasText}.status-dot{background:CanvasText}}

/* Gameplay is the viewport itself: every point in either half activates it,
   apart from the deliberately small menu entry in the top-right corner. */
.playing{overflow:hidden}
.playing .page-shell{position:fixed;inset:0;width:100%;max-width:none;padding:0;margin:0;height:100dvh}
.playing .site-header,.playing .site-footer{display:none}
.playing #main,.playing #game{height:100%;width:100%;padding:0;margin:0}
.playing .play-controls{height:100%;width:100%;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:0}
.playing .play-button{display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:16px;min-height:0;height:100%;border:0;border-radius:0;margin:0;padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left));text-align:center;letter-spacing:0;overflow:auto;touch-action:manipulation}
.playing .play-button:active:not(:disabled){transform:none}
.playing .play-button:focus-visible{outline:4px solid currentColor;outline-offset:-8px}
.playing .next-button{padding-top:max(64px,env(safe-area-inset-top));border-bottom:2px solid #293b24}
.playing .repeat-button{padding-bottom:max(24px,env(safe-area-inset-bottom))}
.half-label{font-size:clamp(28px,5.5vmin,64px);font-weight:700;flex-shrink:0}
.half-instruction{font-size:clamp(17px,2.7vmin,30px);line-height:1.4;max-width:50ch;font-weight:400;flex-shrink:0}
.half-hint{font-size:clamp(12px,1.8vmin,18px);font-weight:400;flex-shrink:0}
.game-menu-toggle{position:fixed;z-index:2;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));min-width:48px;min-height:44px;border:1px solid #293b24;border-radius:10px;background:#f7f5ef;color:#272d28;padding:10px 14px;font-size:16px}
.menu-actions{display:grid;gap:8px}
.menu-actions button{margin:0;min-height:48px}
@media(max-height:500px){.playing .play-button{gap:8px;padding-top:12px;padding-bottom:12px}.playing .next-button{padding-right:100px;padding-left:100px}.half-label{font-size:26px}.half-instruction{font-size:16px}.half-hint{display:none}}
@media(forced-colors:active){.playing .play-button{border:2px solid ButtonText}}

.reader-preference{display:flex;align-items:center;gap:12px;min-height:48px;font-size:15px;line-height:1.5;margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:10px}
.reader-preference input{width:24px;height:24px;flex-shrink:0;accent-color:var(--purple)}
.reader-preference input:focus-visible{outline:3px solid #5c3d91;outline-offset:3px}
.reader-help{font-size:13px;line-height:1.6;color:var(--muted);max-width:75ch}