:root{--bg-gradient-1: #1a1a2e;--bg-gradient-2: #16213e;--bg-gradient-3: #0f3460;--tetromino-i: #77aaff;--tetromino-o: #fed340;--tetromino-t: #c48efd;--tetromino-s: #21c36f;--tetromino-z: #fa6e79;--tetromino-j: #f37a48;--tetromino-l: #77aaff;--colon-color: #77aaff;--scrollbar-thumb: #77aaff;--scrollbar-thumb-hover: #99bbff;--scrollbar-track: rgba(10, 20, 40, .8);--text-primary: rgb(220, 220, 220);--text-white: white;--link-color: white;--settings-bg: rgba(15, 52, 96, .95);--settings-border: rgba(119, 170, 255, .3);--settings-button-bg: rgba(119, 170, 255, .1);--settings-button-hover-bg: rgba(119, 170, 255, .2);--settings-button-active-bg: rgba(119, 170, 255, .3);--settings-button-border: rgba(119, 170, 255, .3);--settings-button-border-hover: rgba(119, 170, 255, .5);--settings-button-border-active: #77aaff;--settings-text: rgba(255, 255, 255, .7);--settings-text-active: #fff;--settings-value-text: #77aaff;--cell-empty-bg: rgba(255, 255, 255, .05);--cell-grid-bg: rgba(0, 0, 0, .3);--cell-size: 24px;--cell-gap: 2px;--grid-padding: 8px;--colon-dot-size: 16px;--colon-gap: 40px;--cell-radius: 4px}*{margin:0;padding:0;box-sizing:border-box}html{background:linear-gradient(135deg,var(--bg-gradient-1) 0%,var(--bg-gradient-2) 50%,var(--bg-gradient-3) 100%);background-attachment:fixed}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px;border:2px solid var(--scrollbar-track)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}body{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#made{margin:auto 0 0;padding:20px 0;text-align:center;line-height:1.8;font-family:monospace;font-size:10px;color:var(--text-primary)}#made a{color:var(--link-color);text-decoration:none;border-bottom:1px solid var(--link-color)}.clock-container{margin:auto 16px 16px;position:relative;display:inline-block}.digit-grid{display:grid;gap:var(--cell-gap);background:var(--cell-grid-bg);padding:var(--grid-padding);border-radius:8px}.cell{width:var(--cell-size);height:var(--cell-size);border-radius:var(--cell-radius);will-change:background-color,opacity;transform:translateZ(0);contain:strict}@media(max-width:1100px){:root{--cell-size: 20px;--cell-gap: 2px;--grid-padding: 6px;--colon-dot-size: 14px;--colon-gap: 32px;--cell-radius: 3px}}@media(max-width:900px){:root{--cell-size: 16px;--cell-gap: 2px;--grid-padding: 5px;--colon-dot-size: 12px;--colon-gap: 26px;--cell-radius: 3px}}@media(max-width:720px){:root{--cell-size: 12px;--cell-gap: 1px;--grid-padding: 4px;--colon-dot-size: 10px;--colon-gap: 20px;--cell-radius: 2px}}@media(max-width:540px){:root{--cell-size: 9px;--cell-gap: 1px;--grid-padding: 3px;--colon-dot-size: 8px;--colon-gap: 15px;--cell-radius: 2px}}@media(max-width:400px){:root{--cell-size: 7px;--cell-gap: 1px;--grid-padding: 2px;--colon-dot-size: 6px;--colon-gap: 12px;--cell-radius: 1px}}@media(max-height:500px){:root{--cell-size: 12px;--cell-gap: 1px;--grid-padding: 4px;--colon-dot-size: 10px;--colon-gap: 20px;--cell-radius: 2px}}@media(max-height:400px){:root{--cell-size: 10px;--cell-gap: 1px;--grid-padding: 3px;--colon-dot-size: 8px;--colon-gap: 16px;--cell-radius: 2px}}@media(max-height:320px){:root{--cell-size: 8px;--cell-gap: 1px;--grid-padding: 2px;--colon-dot-size: 6px;--colon-gap: 12px;--cell-radius: 1px}}.cell.empty{background:var(--cell-empty-bg)}.colon{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--colon-gap);pointer-events:none;opacity:0;transition:opacity 1s ease-in}.colon.visible{opacity:1}.colon-dot{width:var(--colon-dot-size);height:var(--colon-dot-size);background:var(--colon-color);border-radius:50%}.cell.I{background:var(--tetromino-i)}.cell.O{background:var(--tetromino-o)}.cell.T{background:var(--tetromino-t)}.cell.S{background:var(--tetromino-s)}.cell.Z{background:var(--tetromino-z)}.cell.J{background:var(--tetromino-j)}.cell.L{background:var(--tetromino-l)}.cell.dropping{animation:drop .1s ease-out}@keyframes drop{0%{transform:translateY(-24px);opacity:.7}to{transform:translateY(0);opacity:1}}.loading{color:var(--text-white);font-size:24px}.settings-menu{position:fixed;top:20px;right:20px;z-index:1000}.settings-toggle{background:transparent;border:none;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;opacity:.7;transition:opacity .2s ease,transform .3s ease}.settings-toggle:hover{opacity:1}.settings-toggle.active{transform:rotate(90deg)}.settings-toggle svg{width:18px;height:18px;fill:var(--colon-color)}.settings-dropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--settings-bg);border:1px solid var(--settings-border);border-radius:8px;padding:12px;min-width:200px;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.settings-dropdown.active{opacity:1;transform:translateY(0);pointer-events:auto}.settings-section{margin-bottom:16px}.settings-section:last-child{margin-bottom:0}.settings-label{display:block;color:var(--settings-text);font-size:10px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.settings-buttons{display:flex;gap:6px}.settings-button{flex:1;background:var(--settings-button-bg);border:1px solid var(--settings-button-border);border-radius:4px;color:var(--settings-text);font-size:11px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:6px 10px;cursor:pointer;transition:all .2s ease}.settings-button:hover{background:var(--settings-button-hover-bg);border-color:var(--settings-button-border-hover)}.settings-button.active{background:var(--settings-button-active-bg);border-color:var(--settings-button-border-active);color:var(--settings-text-active)}.speed-controls{display:flex;gap:6px;align-items:center}.speed-button{background:var(--settings-button-bg);border:1px solid var(--settings-button-border);border-radius:4px;color:var(--settings-text);font-size:14px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;width:28px;height:28px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.speed-button:hover:not(:disabled){background:var(--settings-button-hover-bg);border-color:var(--settings-button-border-hover)}.speed-button:disabled{opacity:.3;cursor:not-allowed}.speed-value{color:var(--settings-value-text);font-size:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-width:40px;text-align:center}