html,body,#root{height:100%;margin:0;background:#7e6363;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}.surface{position:fixed;inset:0;display:grid;place-content:center;pointer-events:none}:root{--tile: 250px;--cols: 4;--rows: 2;--radius: 63px;--warp-ms: .92s;--iris-ms: 2s}.board{width:calc(var(--tile) * var(--cols));height:calc(var(--tile) * var(--rows));position:relative;pointer-events:auto}.grid{display:grid;grid-template-columns:repeat(var(--cols),var(--tile));grid-template-rows:repeat(var(--rows),var(--tile));gap:0;transform-origin:50% 50%;will-change:transform,filter,opacity}.grid.is-warping{animation:warpPulse var(--warp-ms) ease-out forwards;pointer-events:none}@keyframes warpPulse{0%{transform:perspective(900px) translateZ(0) scale(1);filter:none;opacity:1}40%{transform:perspective(900px) translateZ(-40px) scale(.985);filter:contrast(1.08) saturate(1.08);opacity:1}to{transform:perspective(900px) translateZ(0) scale(1);filter:none;opacity:1}}.tile{position:relative;width:var(--tile);height:var(--tile);border-radius:var(--radius);cursor:pointer;transition:transform .25s ease,filter .25s ease;isolation:isolate;background:linear-gradient(180deg,#fff3,#ffffff14),#ffffff14;backdrop-filter:blur(22px) saturate(170%) brightness(1.05);-webkit-backdrop-filter:blur(22px) saturate(170%) brightness(1.05);border:1px solid rgba(255,255,255,.3);box-shadow:0 22px 38px #00000059,0 6px 14px #00000047,inset 0 1px #ffffff4d,inset 0 -8px 20px #0000002e;animation:breathe 3s ease-in-out infinite}.tile:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(80% 60% at 20% 15%,#ffffff47,#fff0 60%),linear-gradient(180deg,#ffffff1a,#fff0 45%);mix-blend-mode:screen}.tile:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff14,inset 0 18px 28px #00000024}.tile:nth-child(2n){animation-delay:1.5s}@keyframes breathe{0%,to{transform:translateZ(0) scale(1);filter:brightness(1)}50%{transform:translateZ(18px) scale(1.04);filter:brightness(1.02)}}.panel{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#ffffff2e,#ffffff14),#ffffff0f;backdrop-filter:blur(28px) saturate(170%) brightness(1.05);-webkit-backdrop-filter:blur(28px) saturate(170%) brightness(1.05);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 0 60px #ffffff26,0 18px 36px #00000073;clip-path:var(--clip, inset(0 0 0 0 round var(--radius)));transition:clip-path var(--iris-ms) cubic-bezier(.2,.8,.2,1)}.panel:before,.panel:after{content:"";position:absolute;inset:-20%;background:radial-gradient(35% 28% at 20% 25%,#ffffff40,#fff0 60%),radial-gradient(28% 24% at 70% 60%,#fff3,#fff0 65%),radial-gradient(22% 20% at 40% 80%,#ffffff29,#fff0 70%);filter:blur(14px);mix-blend-mode:screen;animation:drift 18s linear infinite}.panel:after{animation-duration:26s;animation-direction:reverse;opacity:.7}@keyframes drift{0%{transform:translate3d(-4%,0,0) rotate(0) scale(1)}50%{transform:translate3d(6%,-2%,0) rotate(180deg) scale(1.03)}to{transform:translate3d(-4%,0,0) rotate(360deg) scale(1)}}.panel-content{position:relative;z-index:1;height:100%;width:100%;display:grid;place-items:center}.backBtn{appearance:none;border:0;padding:12px 18px;border-radius:14px;background:#00000052;color:#fff;font-weight:700;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.backBtn:hover{transform:translateY(-1px)}.logo{position:absolute;top:-10%;right:30px;width:300px;height:auto;z-index:1000;pointer-events:none}.clock{position:absolute;top:30%;left:24px;z-index:1000;pointer-events:none;display:flex;flex-direction:column;align-items:center;line-height:1;gap:6px;font-family:Orbitron,sans-serif}.clock-hours,.clock-minutes{font-size:clamp(80px,14vw,150px);font-weight:800;letter-spacing:-.02em;background:linear-gradient(180deg,#fffffff2,#ffffff26);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);text-shadow:0 18px 36px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.25),0 -2px 6px rgba(255,255,255,.25)}html,body,#root{height:100%;margin:0}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}