:root{--basalt: #232326;--basalt-deep: #17171a;--night: #0b0b0d;--snow: #f3f1ee;--ash: #d6d3cf;--rule: #5a5a5e;--rule-soft: #8a8a8e;--web: #f0746a;--music: #a68bd6;--photo: #7cc8d1;--sun: #f4b04a;--ui: "Bricolage Grotesque", system-ui, sans-serif;--body: "Newsreader", Georgia, serif;--gutter: 56px;--cell: 32px}*,*:before,*:after{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:var(--basalt);color:var(--snow);font-family:var(--body);font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid var(--sun);outline-offset:4px}@view-transition{navigation: auto;}@keyframes drop{0%{transform:translateY(-130%) rotate(-14deg);opacity:0}55%{transform:translateY(7%) rotate(2deg);opacity:1}80%{transform:translateY(-3%) rotate(-1deg)}}@keyframes pop{0%{transform:translateY(-22px) scale(.6);opacity:0}}@keyframes land{0%{transform:translateY(-640px);opacity:0}60%{opacity:1}}@keyframes fall{0%{transform:translateY(0);opacity:1;animation-timing-function:steps(9)}70%{transform:translateY(324px);opacity:1}90%{transform:translateY(324px);opacity:1}to{transform:translateY(324px);opacity:0}}@keyframes bob{0%{transform:translateY(0)}to{transform:translateY(-4px)}}@keyframes rise{0%{transform:translateY(24px);opacity:0}}@keyframes pulse{0%{opacity:.35}to{opacity:1}}@keyframes nav-slide-in{0%{transform:translate(var(--slide, 58px)) rotate(var(--tilt, 3deg))}to{transform:none}}@keyframes nav-slide-out{0%{transform:none}to{transform:translate(var(--slide, 58px)) rotate(var(--tilt, 3deg))}}@keyframes nav-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nav-fade-out{0%{opacity:1}to{opacity:0}}.page-head{background:linear-gradient(180deg,var(--night) 0%,#15110f 55%,var(--basalt) 100%)}.site-header{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;padding:28px var(--gutter);background:var(--night);transition:background-color .7s ease,padding .7s ease,-webkit-backdrop-filter .7s ease,backdrop-filter .7s ease}body.scrolled .site-header{padding-top:16px;padding-bottom:16px;background:#101012b8;-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%)}.burger{display:none}.brand{font-family:var(--ui);font-weight:700;font-size:22px;letter-spacing:-.01em;display:inline-block;transition:transform .35s cubic-bezier(.3,1.9,.5,1);animation:pop .6s cubic-bezier(.3,1.6,.5,1) backwards}.brand:hover{transform:rotate(-3deg) scale(1.06)}.nav{display:flex;flex-wrap:wrap;gap:8px 32px;font-family:var(--ui);font-weight:500;font-size:16px}.nav a{padding:10px 2px;display:flex;align-items:center;gap:10px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 2px) / 0 2px no-repeat;transition:background-size .35s cubic-bezier(.2,.8,.2,1);animation:pop .6s cubic-bezier(.3,1.6,.5,1) backwards}.nav a:nth-child(1){animation-delay:.1s}.nav a:nth-child(2){animation-delay:.18s}.nav a:nth-child(3){animation-delay:.26s}.nav a:nth-child(4){animation-delay:.34s}.nav a:nth-child(5){animation-delay:.42s}.nav a:hover,.nav a:focus-visible,.nav a[aria-current]{background-size:100% 2px}.nav a[aria-current]{color:var(--snow)}.nav .dot{width:10px;height:10px;border-radius:50%;transition:transform .35s cubic-bezier(.3,1.9,.5,1)}.nav a:hover .dot{transform:scale(1.9)}.page-title-wrap{padding:56px var(--gutter) 64px}.page-title{margin:0;font-family:var(--ui);font-weight:300;font-size:132px;line-height:.95;letter-spacing:-.04em}.ch{display:inline-block;animation:drop 1s cubic-bezier(.25,.8,.3,1) backwards;animation-delay:calc(.3s + var(--i) * .08s);transition:transform .35s cubic-bezier(.3,1.9,.5,1),color .2s;cursor:default}.ch:hover{transform:translateY(-.12em) rotate(-5deg) scale(1.06)}.ch:nth-of-type(5n+1):hover{color:var(--web)}.ch:nth-of-type(5n+2):hover{color:var(--music)}.ch:nth-of-type(5n+3):hover{color:var(--photo)}.ch:nth-of-type(5n+4):hover{color:var(--sun)}.game{display:flex;flex-wrap:wrap;gap:48px 80px;justify-content:center;align-items:flex-start;padding:24px var(--gutter) 120px}.panel{display:flex;flex-direction:column;gap:32px}.panel--stats{flex:0 1 300px}.panel--side{flex:0 1 340px}@media (min-width: 1181px){.panel--stats,.panel--side{position:sticky;top:88px;align-self:flex-start}}.label{font-family:var(--ui);font-weight:500;font-size:16px;color:var(--ash)}.score{font-family:var(--ui);font-weight:800;font-size:72px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.stat-row{display:flex;gap:40px}.stat{font-family:var(--ui);font-weight:700;font-size:36px;font-variant-numeric:tabular-nums}.next-block .label{margin-bottom:12px}.nx{display:grid;grid-template-columns:repeat(4,28px);grid-auto-rows:28px;gap:3px}.nx-cell{background:transparent;border-radius:2px}.nx-cell.on{background:var(--c);animation:bob 1.4s ease-in-out infinite alternate}.nx-cell.on:nth-child(2n){animation-delay:.25s}.board-wrap{position:relative;flex:0 0 auto;padding:12px;background:var(--basalt-deep);border-top:4px solid var(--sun);overflow:hidden}.board{display:grid;grid-template-columns:repeat(10,var(--cell));grid-auto-rows:var(--cell);gap:2px;background:var(--basalt-deep)}.cell{background:var(--basalt);border-radius:2px}.cell.on{background:var(--c)}.cell.ghost{background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent)}.board.landing .cell.on{animation:land .7s cubic-bezier(.3,1.1,.5,1) backwards}.trail{position:absolute;top:12px;left:12px;display:grid;grid-template-columns:repeat(10,var(--cell));grid-auto-rows:var(--cell);gap:2px;pointer-events:none;z-index:1}.trail-tile{background:var(--c);border-radius:2px;opacity:.6;box-shadow:0 0 4px color-mix(in srgb,var(--c) 60%,transparent);will-change:opacity,transform;animation:trailfade 1s ease-out forwards}@keyframes trailfade{0%{opacity:.6;transform:scale(1)}40%{opacity:.4}to{opacity:0;transform:scale(.82)}}.fall{position:absolute;left:12px;top:12px;margin-left:calc(3 * (var(--cell) + 2px));display:grid;grid-template-columns:repeat(3,var(--cell));grid-auto-rows:var(--cell);gap:2px;pointer-events:none;animation:fall 5s linear 2.6s infinite backwards}.fall i{background:var(--sun);border-radius:2px}.fall i.e{background:transparent}.board-wrap.playing .fall{display:none}.board-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:color-mix(in srgb,var(--basalt-deep) 72%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.board-overlay[hidden]{display:none}.overlay-msg{margin:0;font-family:var(--ui);font-weight:500;font-size:22px;color:var(--snow)}.overlay-msg strong{font-weight:800}.controls-row{display:flex;gap:12px;flex-wrap:wrap}.btn{min-height:48px;padding:0 28px;font-family:var(--ui);font-weight:700;font-size:18px;cursor:pointer;border:0;transition:transform .25s cubic-bezier(.3,1.9,.5,1),background .2s,color .2s}.btn:hover{transform:translateY(-4px) rotate(-1.5deg)}.btn:active{transform:scale(.94)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn--primary{background:var(--snow);color:var(--basalt)}.btn--ghost{background:transparent;color:var(--snow);border:2px solid var(--snow)}.panel-h{margin:0 0 12px;font-family:var(--ui);font-weight:700;font-size:24px}.scores{margin:0;padding:0;list-style:none}.scores li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule);font-size:20px;transition:transform .3s cubic-bezier(.3,1.9,.5,1),color .2s;animation:rise .6s ease-out backwards}.scores li:hover{transform:translate(12px);color:var(--sun)}.scores li .s-rank{color:var(--ash);font-family:var(--ui);font-weight:500;font-size:16px}.scores li .s-name{flex:1 1 auto}.scores li .s-score{font-family:var(--ui);font-weight:700;font-variant-numeric:tabular-nums}.scores li.is-you{color:var(--sun)}.scores li.is-you .s-name:after{content:" ←"}.scores-empty{color:var(--ash);border-top:1px solid var(--rule);padding:12px 0}.controls-text{margin:0;font-size:20px;line-height:1.6;color:var(--ash)}.site-footer{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:space-between;padding:32px var(--gutter) 48px;border-top:1px solid var(--rule);font-family:var(--ui);font-size:15px;color:var(--ash)}.site-footer .footer-mail{color:var(--snow);border-bottom:1px solid var(--rule-soft)}.social{display:flex;gap:28px}.social a{display:inline-block;transition:transform .3s cubic-bezier(.3,1.9,.5,1),color .2s}.social a:hover{transform:translateY(-5px) rotate(-4deg)}.social a:nth-child(1):hover{color:var(--web)}.social a:nth-child(2):hover{color:var(--music)}.social a:nth-child(3):hover{color:var(--photo)}.social a:nth-child(4):hover{color:var(--sun)}.dialog{border:0;padding:0;background:transparent;color:var(--snow);max-width:420px}.dialog::backdrop{background:color-mix(in srgb,var(--night) 78%,transparent)}.dialog form{background:var(--basalt-deep);border-top:4px solid var(--sun);padding:32px;display:flex;flex-direction:column;gap:16px}.dialog-h{margin:0;font-family:var(--ui);font-weight:800;font-size:32px;letter-spacing:-.02em}.dialog-summary{margin:0;font-size:20px;color:var(--ash)}.dialog-label{font-family:var(--ui);font-weight:500;font-size:16px;color:var(--ash)}.dialog-input{font-family:var(--ui);font-weight:700;font-size:24px;padding:12px 16px;background:var(--basalt);color:var(--snow);border:2px solid var(--rule);text-transform:uppercase}.dialog-input:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-color:var(--sun)}.dialog-status{margin:0;min-height:1.4em;font-size:16px;color:var(--sun)}.dialog-status.is-error{color:var(--web)}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap}.mplay{display:none}.mplay:not([hidden]){display:block}body.touch-play{overflow:hidden;position:fixed;top:0;right:0;bottom:0;left:0;width:100%}body.touch-play .page-head,body.touch-play .site-footer,body.touch-play .panel--stats,body.touch-play .panel--side{display:none}body.touch-play .game{position:fixed;top:var(--vv-top, 0);left:0;width:100%;height:var(--vv-h, 100dvh);z-index:50;margin:0;padding:calc(var(--hud-h, 72px) + 8px) 12px 20px;gap:0;align-items:center;justify-content:center;background:var(--basalt);overflow:hidden}body.touch-play .board-wrap{touch-action:none;-webkit-user-select:none;user-select:none}.mplay{position:fixed;top:var(--vv-top, 0);left:0;right:0;z-index:60;background:color-mix(in srgb,var(--basalt-deep) 94%,transparent);border-bottom:1px solid var(--rule);padding:10px 16px env(safe-area-inset-top,0) 16px;padding-top:max(10px,env(safe-area-inset-top))}.mplay-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}.mplay-stats{display:flex;gap:20px;font-family:var(--ui)}.mplay-stats span{display:flex;flex-direction:column;line-height:1.1}.mplay-stats b{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}.mplay-stats small{font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ash)}.mplay-actions{display:flex;gap:8px}.btn-mini{font-family:var(--ui);font-weight:700;font-size:15px;min-height:40px;padding:0 16px;border:0;background:var(--snow);color:var(--basalt);cursor:pointer}.btn-mini--ghost{background:transparent;color:var(--snow);border:2px solid var(--snow)}.mplay-hint{margin:8px 0 0;font-family:var(--ui);font-size:13px;color:var(--ash);text-align:center;transition:opacity .4s}.mplay-hint.is-faded{opacity:0}@media (max-width: 1180px){.game{gap:40px}.panel--stats{flex-basis:100%;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:24px 48px}.panel--stats .score{font-size:36px;line-height:1}.stat-row{gap:48px}}@media (max-width: 900px){:root{--cell: 28px}.page-title{font-size:92px}.burger{display:inline-flex;position:relative;z-index:50;width:48px;height:48px;margin:-10px -10px -10px 0;padding:0;background:none;border:0;cursor:pointer;color:inherit;align-items:center;justify-content:center}.burger-box{position:relative;width:26px;height:14px}.burger-bar{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.76,0,.24,1),background-color .3s ease}.burger-bar:nth-child(1){top:0}.burger-bar:nth-child(2){bottom:0}body.nav-open .burger-bar{background:var(--snow)}body.nav-open .burger-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}body.nav-open .burger-bar:nth-child(2){transform:translateY(-6px) rotate(-45deg)}html:has(body.nav-open){overflow:hidden}body.nav-open .site-header,body.nav-closing .site-header{z-index:60;transition:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}.nav{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:6px;padding:0 max(var(--gutter),32px);color:var(--snow);background:#10101200;-webkit-backdrop-filter:blur(0px) saturate(100%);backdrop-filter:blur(0px) saturate(100%);visibility:hidden;transition:-webkit-backdrop-filter .5s ease .35s,backdrop-filter .5s ease .35s,background-color .5s ease .35s,visibility 0s linear .85s}.nav a{font-size:clamp(34px,9vw,52px);line-height:1.1;padding:8px 0;gap:16px;transform-origin:left center;animation:none;opacity:0}.nav a:nth-child(odd){--slide: 62px;--tilt: 3.4deg}.nav a:nth-child(2n){--slide: 52px;--tilt: 2.2deg}.nav a:nth-child(3n){--slide: 58px;--tilt: 4deg}.nav .dot{width:14px;height:14px}body.nav-open .nav{background:#10101238;-webkit-backdrop-filter:blur(28px) saturate(130%);backdrop-filter:blur(28px) saturate(130%);visibility:visible;transition:-webkit-backdrop-filter .5s ease,backdrop-filter .5s ease,background-color .5s ease}body.nav-open .nav a{color:var(--snow);animation:nav-slide-in .72s cubic-bezier(.3,1.7,.5,1) both,nav-fade-in .4s ease both;animation-delay:calc(.45s + var(--n) * .12s)}body.nav-closing .nav a{color:var(--snow);animation:nav-slide-out .5s cubic-bezier(.5,0,.75,.4) both,nav-fade-out .46s ease both;animation-delay:calc((var(--count) - 1 - var(--n)) * .08s)}}@media (max-width: 700px){:root{--gutter: 20px;--cell: 7.6vw}body{font-size:18px}.site-header{padding:20px var(--gutter)}.page-title-wrap{padding:36px var(--gutter) 44px}.page-title{font-size:68px}.game{padding:20px var(--gutter) 80px;gap:32px}.score{font-size:56px}.panel--side{flex-basis:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}.fall,.trail{display:none}}