:root{--ivory:#fff8df;--blue:#0871c9;--ink:#183b32;--sans:'DM Sans',sans-serif;--serif:'Instrument Serif',Georgia,serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--blue)}body{font-family:var(--sans);color:var(--ivory);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--ivory);outline-offset:7px}a{color:inherit;text-decoration:none}.hero{height:100svh;min-height:760px;position:relative;overflow:hidden;isolation:isolate;background:#1175d0}.landscape{position:absolute;inset:0;z-index:-3;overflow:hidden;transform-origin:50% 76%}.landscape :is(img, video){width:100%;height:100%;display:block;object-fit:cover;object-position:50% 100%}.sky-shade{position:absolute;inset:0;z-index:-2;background:rgba(0,0,0,.2);pointer-events:none}.header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:30px 4%;gap:24px}.wordmark{display:inline-flex;align-items:center;gap:8px;font-size:21px;letter-spacing:-.8px;font-weight:500;white-space:nowrap}.wordmark svg{width:25px;height:29px;fill:var(--ivory)}.wordmark-dot{opacity:.55}.header-note{font-size:9px;letter-spacing:2px;display:flex;gap:9px;align-items:center;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;opacity:.8}.status-dot{width:4px;height:4px;border-radius:50%;background:currentColor}.sound-toggle{height:38px;width:38px;border:1px solid #fff8df55;border-radius:50%;background:transparent;color:var(--ivory);cursor:pointer;display:grid;place-items:center;transition:background .2s}.sound-toggle:hover{background:#fff8df22}.sound-toggle svg{width:16px;height:16px}.sound-on{display:none}.sound-toggle[aria-pressed=true] .sound-on{display:block}.sound-toggle[aria-pressed=true] .sound-off{display:none}.hero-copy{position:absolute;top:12%;left:0;right:0;text-align:center;padding:0 20px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:500;margin:0 0 20px;display:flex;align-items:center;justify-content:center;gap:11px}.eyebrow span{font-size:15px}h1{font-family:var(--serif);font-weight:400;font-size:clamp(68px,6.7vw,104px);line-height:.94;letter-spacing:-2.7px;margin:0}h1 em{font-weight:400}.description{font-size:13px;font-weight:400;line-height:1.6;letter-spacing:.15px;margin:22px 0 24px;color:#fff8dfe0}.move-button{position:relative;display:inline-flex;gap:15px;align-items:center;border:1px solid #fff8df;background:var(--ivory);color:var(--ink);padding:9px 16px 9px 9px;border-radius:5px;cursor:pointer;box-shadow:0 4px 0 #003c5622;transition:transform .25s,box-shadow .25s,background .25s;min-height:52px;overflow:hidden}.move-button:hover{transform:translateY(-3px);box-shadow:0 7px 0 #003c5622;background:#fffdf2}.move-button:active{transform:translateY(0);box-shadow:0 1px 0 #003c5622}.move-button:disabled{cursor:wait}.button-label{font-weight:500;font-size:12px;letter-spacing:.05px}.button-icon{height:32px;width:32px;display:grid;place-items:center;background:#e7e9d8;border-radius:2px;font-size:23px;font-weight:400;transition:transform .45s}.move-button:hover .button-icon{transform:rotate(45deg)}.button-chess{height:20px;width:20px;margin-left:9px;opacity:.75}.interaction-hint{font-size:9px;letter-spacing:.3px;margin:12px 0 0;opacity:.66}.footer{position:absolute;bottom:26px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-shadow:0 1px 8px #123f24;font-size:9px;letter-spacing:1.5px}.footer-caption{opacity:.9}.move-indicator{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;font-size:8px}.indicator-line{height:1px;width:23px;background:#fff8df88}.move-count{font-size:16px;font-family:var(--serif);letter-spacing:0}.footer-right{font-size:11px;letter-spacing:0;display:flex;align-items:center;gap:17px}.footer-right span{font-size:25px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.hero.is-animating .button-chess{animation:piece-hint 1.6s ease-in-out}.hero.is-moving .indicator-line{animation:line-pulse 1.6s ease-in-out}@keyframes scene-drift{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.025) translateY(-9px)}}@keyframes piece-hint{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-5px) rotate(-14deg)}65%{transform:translateY(-3px) rotate(12deg)}}@keyframes line-pulse{50%{width:40px;opacity:.4}}@media(min-aspect-ratio:19/10){.hero{min-height:680px}.hero-copy{top:15%}h1{font-size:clamp(65px,6vw,100px)}.eyebrow{margin-bottom:12px}.description{margin:16px 0}.landscape :is(img, video){object-position:center 80%}}@media(max-width:700px){.hero{min-height:640px;background:linear-gradient(#0b78d6,#1175d0)}.header{padding:22px 23px}.wordmark{font-size:19px}.header-note{display:none}.hero-copy{top:19%}.eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:22px}h1{font-size:clamp(48px,12vw,78px);letter-spacing:-1.9px;line-height:.98}.description{font-size:12px;margin:24px 0}.landscape{top:auto;bottom:0;height:auto;width:100%;aspect-ratio:1.12}.landscape :is(img, video){height:100%;width:100%;object-fit:cover;object-position:50% 100%;mask-image:linear-gradient(transparent,black 34%);-webkit-mask-image:linear-gradient(transparent,black 34%)}.sky-shade{background:rgba(0,0,0,.2);}.footer{left:23px;right:23px;bottom:22px}.footer-caption{font-size:7px;max-width:115px;line-height:1.6;letter-spacing:1px}.move-indicator{position:static;transform:none;margin-left:auto}.footer-right{display:none}.move-button{min-height:54px}.interaction-hint{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.landscape{will-change:auto}}@media(max-height:760px) and (min-width:701px){.hero{min-height:650px}.hero-copy{top:16%}h1{font-size:82px}.eyebrow{margin-bottom:16px}.description{margin:16px 0}}

/* Space between title and action after removing the supporting paragraph. */
.hero-copy > .move-button { margin-top: 28px; }

/* Both video directions share exactly the still image framing. */
.landscape > :is(img, video) { position: absolute; inset: 0; }
.scene-video { opacity: 0; pointer-events: none; }
.scene-video.is-active { opacity: 1; }

/* Initial load only; interaction buttons never display a loading cursor. */
[hidden]{display:none!important}.move-button,.move-button:disabled,.play-button,.play-button:disabled{cursor:pointer}.button-icon{display:none}.button-chess{margin:0;width:22px;height:22px;opacity:1}.hero.is-animating .button-chess{animation:none}.move-button{padding:14px 21px;gap:11px}.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}.hero-copy>.move-button{margin-top:0}.play-button{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid #fff8df77;border-radius:5px;color:var(--ivory);font-size:12px;min-height:52px;padding:12px 18px;transition:background .2s}.play-button:hover{background:#fff8df18}.play-button svg{width:20px;height:20px}.is-preloading{overflow:hidden}.preloader{position:fixed;inset:0;z-index:100;background:#0d70c7;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--ivory);transition:opacity .45s ease,visibility .45s;gap:18px}.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}.preloader-piece{font-family:Georgia,serif;font-size:64px;line-height:1;animation:preloader-float 2s ease-in-out infinite}.preloader-brand{font-family:var(--serif);font-size:36px;margin:0}.preloader-track{width:150px;height:1px;background:#fff8df35;overflow:hidden;margin-top:7px}.preloader-track span{height:100%;width:0;display:block;background:var(--ivory);transition:width .3s}.preloader-caption{font:9px var(--sans);letter-spacing:1.5px;display:flex;justify-content:space-between;gap:22px;opacity:.7;margin:0}@keyframes preloader-float{50%{transform:translateY(-9px)}}
.game-open{overflow:hidden}.chess-dialog{border:0;border-radius:16px;padding:26px;width:min(550px,calc(100vw - 28px));max-height:calc(100svh - 32px);overflow:auto;background:#f7f1df;color:#173c32;box-shadow:0 24px 100px #062d3866}.chess-dialog::backdrop{background:#082c3da6;backdrop-filter:blur(9px)}.game-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.game-kicker{font-size:8px;letter-spacing:1.7px;margin:0 0 5px;color:#68776a}.game-header h2{font:40px/.95 var(--serif);margin:0;font-weight:400}.close-round{width:32px;height:32px;border:1px solid #173c3225;border-radius:50%;background:transparent;color:inherit;font-size:22px;cursor:pointer}.game-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;margin-bottom:12px}.game-toolbar select{font:11px var(--sans);color:inherit;background:#eee8d6;border:0;border-radius:4px;padding:8px;max-width:180px}.game-status{min-height:18px;font-size:12px;margin:0 0 12px}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:5px solid #254a3d;border-radius:5px;overflow:hidden;box-shadow:0 3px 12px #183b3215}.chess-square{position:relative;display:grid;place-items:center;padding:0;aspect-ratio:1;border:0;border-radius:0;cursor:pointer;min-width:0}.chess-square.light{background:#ece5cc}.chess-square.dark{background:#87a17c}.chess-square.last-move{background:#d0cc83}.chess-square.selected{background:#b6bd69;box-shadow:inset 0 0 0 3px #345d37}.chess-square.in-check{background:#c28168}.chess-square:focus-visible{outline:3px solid #0b6158;outline-offset:-3px;z-index:2}.chess-piece{font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,6vw,47px);line-height:1;position:relative;z-index:1;pointer-events:none;user-select:none}.chess-piece.w{color:#fff9e9;-webkit-text-stroke:.6px #243d32;text-shadow:0 2px 2px #14362755}.chess-piece.b{color:#173c32;-webkit-text-stroke:.3px #e8e2cc;text-shadow:0 2px 2px #14362733}.legal-target:after{content:'';position:absolute;width:22%;height:22%;border-radius:50%;background:#214c3c55}.legal-capture:after{content:'';position:absolute;inset:3px;border:3px solid #214c3c88;border-radius:50%}.chess-square small{position:absolute;font:8px var(--sans);color:#1a3f37;opacity:.8}.file-tag{bottom:2px;right:3px}.rank-tag{top:2px;left:3px}.game-controls{display:flex;justify-content:space-between;margin-top:15px;gap:10px}.game-controls button,.promotion-picker button{border:1px solid #183b3230;border-radius:4px;padding:9px 14px;background:transparent;color:#173c32;font:11px var(--sans);cursor:pointer}.game-controls button:last-child{background:#183b32;color:#fff8df}.game-controls button:disabled{opacity:.35;cursor:default}.game-help{font-size:10px;color:#6b7768;line-height:1.6;margin:14px 0 0}.promotion-picker{padding:12px 0;font-size:12px}.promotion-picker p{margin:0 0 8px}.promotion-picker button{font-size:25px}.chess-dialog button:focus-visible,.chess-dialog select:focus-visible{outline:2px solid #16735f;outline-offset:3px}@media(max-width:540px){.hero-actions{gap:8px;flex-wrap:wrap}.move-button{padding:12px 14px}.play-button{padding:12px 13px}.chess-dialog{padding:18px}.game-header h2{font-size:35px}.game-toolbar{font-size:9px}.game-toolbar select{max-width:155px}}@media(prefers-reduced-motion:reduce){.preloader-piece{animation:none}.preloader{transition:none}}

/* Distinct, purpose-drawn chess icons; the button title stays fixed. */
.move-button .motion-icon{width:27px;height:27px;flex:none}
.play-button .game-icon{width:27px;height:27px;flex:none}

/* Only the game button shows a loading state while its opening animation plays. */
.play-button .game-spinner{display:none;width:27px;height:27px;flex:none;border:2px solid #fff8df55;border-top-color:var(--ivory);border-radius:50%;animation:game-loading .8s linear infinite}
.play-button.is-loading .game-spinner{display:inline-block}
.play-button.is-loading .game-icon{display:none}
.play-button.is-loading{cursor:pointer}
@keyframes game-loading{to{transform:rotate(360deg)}}