:root{font-family:Inter,SF Pro Display,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--background)}#root{min-height:100vh}button{font-family:inherit;cursor:pointer}[data-theme=light],[data-theme=dark]{color:var(--text-primary);background:var(--background)}.theme-toggle{position:fixed;top:2rem;right:2rem;display:flex;background:var(--toggle-background);border:1px solid var(--toggle-border);border-radius:8px;overflow:hidden;z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 16px #0000001a}.toggle-option{padding:.5rem .75rem;background:none;border:none;color:var(--toggle-text);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease;position:relative;white-space:nowrap;display:flex;align-items:center;gap:.375rem}.toggle-option:hover{background:var(--toggle-hover)}.toggle-option.active{background:var(--toggle-active-bg);color:var(--toggle-active-text);font-weight:600}.toggle-icon{display:flex;align-items:center;flex-shrink:0}.toggle-label{line-height:1}:root{--toggle-background: rgba(255, 255, 255, .8);--toggle-border: rgba(0, 0, 0, .06);--toggle-text: #666666;--toggle-hover: rgba(0, 0, 0, .04);--toggle-active-bg: #000000;--toggle-active-text: #ffffff}[data-theme=light]{--toggle-background: rgba(255, 255, 255, .8);--toggle-border: rgba(0, 0, 0, .06);--toggle-text: #666666;--toggle-hover: rgba(0, 0, 0, .04);--toggle-active-bg: #000000;--toggle-active-text: #ffffff}[data-theme=dark]{--toggle-background: rgba(0, 0, 0, .4);--toggle-border: rgba(255, 255, 255, .08);--toggle-text: #999999;--toggle-hover: rgba(255, 255, 255, .04);--toggle-active-bg: #ffffff;--toggle-active-text: #000000}@media(max-width:768px){.theme-toggle{top:1rem;right:1rem;border-radius:6px}.toggle-option{padding:.4rem .6rem;font-size:.75rem;gap:.25rem}.toggle-icon svg{width:12px;height:12px}}.app{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,3rem);background:var(--background);background-size:320% 320%;background-position:50% 50%;animation:backgroundDrift 120s ease-in-out infinite alternate;position:relative;overflow:hidden;isolation:isolate}.time-since-app{width:min(1100px,100%);color:var(--text-primary)}.time-since-shell{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(1.5rem,3vw,2.5rem);box-shadow:0 20px 60px #0000001f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;z-index:1}.hero{margin-bottom:1.75rem}.eyebrow{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:999px;background:var(--pill-bg);border:1px solid var(--border);color:var(--text-secondary);font-size:.85rem;letter-spacing:.03em;text-transform:uppercase}.hero h1{font-size:clamp(2.2rem,4vw,3rem);margin:.35rem 0 .4rem;letter-spacing:-.03em}.lede{margin:0;color:var(--text-secondary);font-size:1rem}.panel-grid{display:flex;justify-content:center;gap:1rem}.panel-grid .timer-card{width:100%;max-width:650px}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:inset 0 1px #ffffff05}.timer-card{position:relative;overflow:hidden}.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:999px;background:var(--pill-bg);border:1px solid var(--border);color:var(--text-secondary);font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;margin-bottom:.75rem}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem}.time-block{border:1px solid var(--border);border-radius:14px;padding:.9rem;background:var(--time-bg);text-align:center}.time-value{font-size:clamp(2.2rem,5vw,2.8rem);font-weight:700;letter-spacing:-.03em}.time-label{margin-top:.35rem;color:var(--text-secondary);font-weight:600}.muted{margin-top:.75rem;color:var(--text-secondary);line-height:1.5}.stat-grid{margin-top:1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}.stat{border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;background:var(--panel)}.stat-label{color:var(--text-secondary);font-weight:600}.stat-value{margin-top:.25rem;font-size:1.6rem;font-weight:700}.app:before{content:"";position:absolute;top:-25%;right:-25%;bottom:-25%;left:-25%;background:radial-gradient(circle at 18% 32%,rgba(255,255,255,.12),transparent 35%),radial-gradient(circle at 82% 68%,rgba(0,0,0,.18),transparent 30%),linear-gradient(120deg,#ffffff14,#fff0,#ffffff1a 60%,#fff0);filter:blur(36px);opacity:.85;pointer-events:none;animation:slowPulse 90s ease-in-out infinite alternate,streakShift 120s ease-in-out infinite}.app:after{content:"";position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;background:linear-gradient(135deg,#ffffff38,#7c93ff47 30%,#fff0 55%,#ffc30038 70%,#fff0),radial-gradient(circle at 40% 60%,rgba(124,147,255,.2),transparent 35%),radial-gradient(circle at 70% 30%,rgba(0,0,0,.18),transparent 40%);mix-blend-mode:screen;background-size:280% 280%;filter:blur(48px);opacity:.7;pointer-events:none;animation:driftOrbit 100s ease-in-out infinite alternate,sheenSweep 80s linear infinite}:root{--background: radial-gradient(circle at 20% 20%, rgba(100, 108, 255, .08), transparent 25%), radial-gradient(circle at 80% 10%, rgba(64, 199, 255, .08), transparent 22%), radial-gradient(circle at 50% 80%, rgba(128, 0, 255, .07), transparent 24%), #0f1116;--surface: rgba(18, 20, 28, .9);--panel: rgba(255, 255, 255, .02);--border: rgba(255, 255, 255, .08);--text-primary: #f8fafc;--text-secondary: rgba(248, 250, 252, .72);--accent: #7c93ff;--accent-soft: rgba(124, 147, 255, .25);--pill-bg: rgba(255, 255, 255, .04);--time-bg: rgba(255, 255, 255, .04)}@media(prefers-color-scheme:light){:root{--background: radial-gradient(circle at 20% 20%, rgba(83, 91, 242, .08), transparent 25%), radial-gradient(circle at 80% 10%, rgba(64, 199, 255, .08), transparent 22%), radial-gradient(circle at 50% 80%, rgba(255, 195, 0, .08), transparent 24%), #f4f4ec;--surface: rgba(255, 255, 255, .82);--panel: rgba(255, 255, 255, .88);--border: rgba(0, 0, 0, .08);--text-primary: #1f2733;--text-secondary: rgba(31, 39, 51, .72);--accent: #4a60ff;--accent-soft: rgba(74, 96, 255, .2);--pill-bg: rgba(0, 0, 0, .04);--time-bg: rgba(255, 255, 255, .86)}}[data-theme=light]{--background: radial-gradient(circle at 20% 20%, rgba(83, 91, 242, .08), transparent 25%), radial-gradient(circle at 80% 10%, rgba(64, 199, 255, .08), transparent 22%), radial-gradient(circle at 50% 80%, rgba(255, 195, 0, .08), transparent 24%), #f4f4ec;--surface: rgba(255, 255, 255, .82);--panel: rgba(255, 255, 255, .88);--border: rgba(0, 0, 0, .08);--text-primary: #1f2733;--text-secondary: rgba(31, 39, 51, .72);--accent: #4a60ff;--accent-soft: rgba(74, 96, 255, .2);--pill-bg: rgba(0, 0, 0, .04);--time-bg: rgba(255, 255, 255, .86)}[data-theme=dark]{--background: radial-gradient(circle at 20% 20%, rgba(100, 108, 255, .08), transparent 25%), radial-gradient(circle at 80% 10%, rgba(64, 199, 255, .08), transparent 22%), radial-gradient(circle at 50% 80%, rgba(128, 0, 255, .07), transparent 24%), #0f1116;--surface: rgba(18, 20, 28, .9);--panel: rgba(255, 255, 255, .02);--border: rgba(255, 255, 255, .08);--text-primary: #f8fafc;--text-secondary: rgba(248, 250, 252, .72);--accent: #7c93ff;--accent-soft: rgba(124, 147, 255, .25);--pill-bg: rgba(255, 255, 255, .04);--time-bg: rgba(255, 255, 255, .04)}@media(max-width:640px){.app{padding:1rem}.time-value{font-size:clamp(2rem,9vw,2.4rem)}}@keyframes backgroundDrift{0%{background-position:10% 30%}50%{background-position:95% 80%}to{background-position:10% 30%}}@keyframes slowPulse{0%{transform:scale(1);opacity:.55}to{transform:scale(1.08) translateY(-2%);opacity:.8}}@keyframes streakShift{0%{background-position:0% 0%}50%{background-position:40% 30%}to{background-position:-10% 0%}}@keyframes driftOrbit{0%{transform:translate3d(-2%,1%,0) scale(1);opacity:.45}50%{transform:translate3d(4%,-3%,0) scale(1.08);opacity:.65}to{transform:translate3d(-2%,1%,0) scale(1);opacity:.45}}@keyframes sweep{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes sheenSweep{0%{background-position:-30% 30%}50%{background-position:80% 60%}to{background-position:130% 30%}}
