@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--font-mono: "IBM Plex Mono", monospace;--cell-size: 9vw;--bg-cream: #ffffff;--bg-board: #ffffff;--text-primary: #000000;--text-secondary: #666666;--border-color: #000000;--cell-default: #c0c0c0}[data-theme=dark]{--bg-cream: #1a1a1a;--bg-board: #222222;--text-primary: #ffffff;--text-secondary: #888888;--border-color: #444444;--cell-default: #333333}*{margin:0;padding:0;box-sizing:border-box}.tetris-piece,.tetris-piece *{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.tetris-board>div{touch-action:manipulation;-webkit-tap-highlight-color:transparent}html,body{width:100%;overflow-x:hidden}a{color:inherit;text-decoration:none}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bg-cream);border-bottom:2px solid var(--border-color)}.header-name{font-size:14px;font-weight:500}.header-nav a{font-size:10px;color:var(--text-secondary);margin-left:16px}.theme-toggle{background:none;border:1px solid var(--border-color);padding:4px 8px;font-size:10px;font-family:inherit;cursor:pointer}.tetris-board{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);align-content:end;gap:1px;width:100%;max-width:500px;margin:10px auto;padding:0 10px;background:var(--bg-board);contain:layout;aspect-ratio:10 / 10}@media(max-width:600px){.tetris-board{max-width:calc(100vw - 20px);gap:.5px}}@media(max-width:400px){.tetris-board{gap:0;padding:0 4px}.tetris-piece{border:none!important}.header-tagline{display:none}}@media(max-width:500px){.header-tagline{display:none}.footer{width:100%!important;max-width:100%;padding:8px 16px}}@media(max-width:360px){.header{padding:8px 12px}.header-name{font-size:12px}}html,body{width:100%;overflow-x:hidden;height:100%}body{font-family:var(--font-mono);background:var(--bg-cream)}.tetris-piece{display:block;width:100%;height:100%;transition:background .15s ease;opacity:0;animation:dropIn .5s ease-out forwards;animation-fill-mode:forwards;border:none!important;outline:none!important;box-shadow:none!important;border-radius:0}.tetris-piece *{border:none!important;outline:none!important;box-shadow:none!important}.tetris-piece.show{animation:dropIn .5s ease-out forwards;animation-fill-mode:forwards}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@media(max-width:500px){@keyframes blink{0%,3%{opacity:.15}8%,12%{opacity:1}18%,to{opacity:.15}}.tetris-board>div:not([style*="dropIn 0.5s ease-out forwards"]){animation-duration:.5s,8s!important}}@keyframes dropIn{0%{opacity:0}to{opacity:1}}.footer{padding:10px 20px;font-size:10px;color:var(--text-secondary);width:calc(10 * var(--cell-size));margin:auto auto 0;text-align:center}
