:root{--bg-gradient-1: radial-gradient(1200px 900px at 10% 10%, rgba(148, 163, 255, .28), rgba(148, 163, 255, 0) 60%), radial-gradient(1000px 800px at 90% 20%, rgba(255, 163, 214, .28), rgba(255, 163, 214, 0) 60%), radial-gradient(1200px 900px at 20% 80%, rgba(140, 255, 212, .25), rgba(140, 255, 212, 0) 60%);--bg-gradient-2: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255,255,255,.2));--panel-bg: rgba(255, 255, 255, .12);--panel-border: rgba(255, 255, 255, .28);--panel-shadow: 0 8px 40px rgba(0,0,0,.22), 0 2px 10px rgba(0,0,0,.12);--panel-radius: 16px;--card-radius: 14px;--text: rgba(15, 23, 42, .92);--text-muted: rgba(15, 23, 42, .65);--text-strong: rgba(15, 23, 42, .98);--ring: rgba(99, 102, 241, .55);--surface-tint: rgba(255,255,255,.55);--input-bg: rgba(255, 255, 255, .18);--input-border: rgba(255, 255, 255, .36);--btn-bg: rgba(255, 255, 255, .22);--btn-bg-hover: rgba(255, 255, 255, .34);--grid-gap: clamp(14px, 2vw, 22px);--max-panel-w: 520px;--max-content-w: 1100px;--phone-w: 480px;--overlay-bg: rgba(10, 14, 22, .46);--transition-fast: .14s cubic-bezier(.2,.8,.2,1);--transition-slow: .28s cubic-bezier(.2,.8,.2,1);--error: #b91c1c;--ok: #16a34a;--icon-size: 18px;--countdown-size: 15px;--section-gap: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--countdown-hero-size: clamp(22px, 8.5vw, 30px);--hint-size: clamp(11px, 3.3vw, 13px);--accent-far: #60a5fa;--accent-approaching: #8b5cf6;--accent-soon: #f59e0b;--accent-imminent: #f43f5e;--accent-live: #22c55e;--accent-past: #94a3b8;--accent-color: var(--accent-far);--accent-tab-w: 8px;--accent-tab-offset-x: 0;--accent-tab-inset-y: 0}@media (prefers-color-scheme: dark){:root{--bg-gradient-2: linear-gradient(180deg, rgba(20,20,26, .8), rgba(20,20,26, .35));--panel-bg: rgba(18, 18, 24, .36);--panel-border: rgba(255, 255, 255, .16);--text: rgba(247, 248, 252, .92);--text-muted: rgba(247, 248, 252, .68);--text-strong: rgba(247, 248, 252, .98);--input-bg: rgba(255,255,255,.08);--input-border: rgba(255,255,255,.22);--btn-bg: rgba(255,255,255,.1);--btn-bg-hover: rgba(255,255,255,.18)}}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg-gradient-1),var(--bg-gradient-2);background-attachment:fixed,fixed;background-size:cover;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45}@media (prefers-reduced-motion: no-preference){body{animation:ambientDrift 26s ease-in-out infinite alternate}@keyframes ambientDrift{0%{background-position:0% 0%,0% 0%}to{background-position:10% 6%,0% 0%}}}a{color:inherit;text-decoration:none}a.skip-link{position:absolute;left:50%;transform:translate(-50%);top:-40px;padding:10px 14px;background:var(--btn-bg);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border:1px solid var(--panel-border);border-radius:10px;box-shadow:var(--panel-shadow);color:var(--text);transition:top var(--transition-fast)}a.skip-link:focus{top:16px;outline:2px solid var(--ring)}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.glass{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.glass{background:color-mix(in oklab,var(--surface-tint),transparent 38%)}}main#app{min-height:100dvh;display:grid;align-items:center;justify-items:center;padding:6vh 18px}.view{width:min(100%,var(--max-content-w))}.view[hidden]{display:none}.panel{width:min(100%,var(--max-panel-w));padding:clamp(20px,4.6vw,34px);position:relative;isolation:isolate}.panel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--panel-radius);background:radial-gradient(120% 100% at 0% 0%,rgba(255,255,255,.32),transparent 52%),radial-gradient(120% 100% at 100% 0%,rgba(255,255,255,.18),transparent 50%);pointer-events:none;mix-blend-mode:soft-light}h1,h2,h3{margin:0 0 10px;letter-spacing:-.02em}h1{font-size:clamp(28px,4.2vw,38px);font-weight:700;color:var(--text-strong)}h2{font-size:clamp(20px,3.6vw,28px);font-weight:650}p{margin:0;color:var(--text-muted)}.lede{margin-block:12px 18px;font-size:1.02rem;color:var(--text)}.feature-list{margin:0 0 18px;padding-left:18px;color:var(--text-muted);font-size:.94rem;line-height:1.5}.feature-list li{margin-bottom:6px}form.code-form{display:grid;gap:16px;margin-top:18px}.input-row{display:grid;gap:10px}.field{position:relative;display:grid;gap:8px}label{font-size:14px;color:var(--text-muted)}input[type=text],input[type=password],input[type=datetime-local]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:14px;font-size:16px;color:var(--text-strong);background:var(--input-bg);border:1px solid var(--input-border);border-radius:12px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}input[type=text]::placeholder,input[type=password]::placeholder,input[type=datetime-local]::placeholder{color:color-mix(in oklab,var(--text-muted),transparent 38%)}input[type=text]:focus,input[type=password]:focus,input[type=datetime-local]:focus{box-shadow:0 0 0 4px color-mix(in oklab,var(--ring),transparent 65%);border-color:var(--ring)}input[type=datetime-local]::-webkit-calendar-picker-indicator{margin-right:4px}.help{font-size:13px;color:var(--text-muted)}.error{font-size:13px;color:var(--error);min-height:1.25em}.actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}.sort-mode-control{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 4px;font-size:14px;color:var(--text-muted)}.sort-mode-control label{font-size:14px}.sort-mode-control select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:12px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-strong);padding:10px 12px;font-size:14px;min-width:180px}.sort-mode-control select:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:1px solid var(--input-border);background:var(--btn-bg);padding:12px 16px;border-radius:12px;font-weight:600;font-size:15px;color:var(--text-strong);transition:transform var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px)}.btn:hover{background:var(--btn-bg-hover)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.btn.primary{border-color:color-mix(in oklab,var(--ring),white 30%);box-shadow:inset 0 1px #ffffff47,0 8px 24px #6366f12e}.btn.icon{width:40px;height:40px;padding:10px;display:inline-flex;align-items:center;justify-content:center;line-height:0}.btn.icon.small{width:32px;height:32px;padding:8px;line-height:0}.btn.icon,.btn.icon.small{font-size:var(--icon-size)}.btn.icon svg{width:1em;height:1em;display:block;transform:translateY(-.5px)}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3);padding:10px 12px;margin-bottom:20px;position:sticky;top:16px;z-index:10;border-radius:14px}.topbar h2{margin:0;justify-self:center;text-align:center;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar>.btn.icon{justify-self:start}.topbar .right-actions{justify-self:end;display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:nowrap;align-items:center}.chip{display:inline-flex;align-items:center;gap:8px;background:#ffffff2e;border:1px solid var(--panel-border);padding:6px 10px;border-radius:999px;font-size:13px;line-height:1;backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%)}.chip svg{width:14px;height:14px;opacity:.9;display:block}.chip-row{display:grid;gap:8px}.countdown-stack{display:grid;justify-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.countdown-hero{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-height:calc(var(--countdown-hero-size) * 1.25 + 18px);font-weight:900;font-size:var(--countdown-hero-size);line-height:1.1;letter-spacing:.02em;border:2px solid var(--panel-border);border-radius:999px;padding:10px 14px;background:color-mix(in oklab,var(--panel-bg),white 5%);font-variant-numeric:tabular-nums;-moz-font-feature-settings:"tnum";font-feature-settings:"tnum";text-align:center;white-space:nowrap;overflow:hidden;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.countdown-hero .herotext{display:inline-block;white-space:nowrap;line-height:1.1}.countdown-hero:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,color-mix(in oklab,var(--accent-color),white 42%) 0 calc(var(--progress, 0) * 100%),transparent calc(var(--progress, 0) * 100%) 100%);mix-blend-mode:screen;opacity:calc(.06 + .18 * var(--progress, 0));transition:opacity var(--transition-fast)}.countdown-hint{min-height:1.2em;font-size:var(--hint-size);color:var(--text-muted);text-align:center;width:100%}.hinttext{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hint-anim{animation:fadeInUp .26s ease both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.cards{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(1,minmax(0,1fr))}.card{padding:16px;border-radius:var(--card-radius);border:1px solid var(--panel-border);background:color-mix(in oklab,var(--panel-bg),white 3%);box-shadow:var(--panel-shadow);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);display:grid;gap:var(--section-gap);transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);position:relative;min-inline-size:0}.card:hover{transform:translateY(-2px);box-shadow:0 10px 36px #0000002e}.card--event{padding-top:34px;overflow:hidden;border-left-color:transparent}.card--event:before{content:"";position:absolute;left:var(--accent-tab-offset-x);top:var(--accent-tab-inset-y);bottom:var(--accent-tab-inset-y);width:var(--accent-tab-w);background:linear-gradient(180deg,color-mix(in oklab,var(--accent-color),white 16%),color-mix(in oklab,var(--accent-color),black 6%));box-shadow:inset -1px 0 color-mix(in oklab,var(--accent-color),black 10%),inset 0 1px #ffffff47,0 8px 22px color-mix(in oklab,var(--accent-color),transparent 90%);border-top-left-radius:var(--card-radius);border-bottom-left-radius:var(--card-radius);border-top-right-radius:calc(var(--accent-tab-w) / 2 + 3px);border-bottom-right-radius:calc(var(--accent-tab-w) / 2 + 3px);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);pointer-events:none;transition:background var(--transition-fast),width var(--transition-fast)}.card--event:after{content:"";position:absolute;left:var(--accent-tab-offset-x);top:var(--accent-tab-inset-y);bottom:var(--accent-tab-inset-y);width:var(--accent-tab-w);border-top-left-radius:var(--card-radius);border-bottom-left-radius:var(--card-radius);border-top-right-radius:calc(var(--accent-tab-w) / 2 + 3px);border-bottom-right-radius:calc(var(--accent-tab-w) / 2 + 3px);pointer-events:none;background:linear-gradient(180deg,color-mix(in oklab,var(--accent-color),transparent 88%),color-mix(in oklab,var(--accent-color),transparent 94%)),repeating-linear-gradient(to bottom,color-mix(in oklab,var(--accent-color),white 38%) 0 2px,transparent 2px 14.285%);-webkit-mask:linear-gradient(to bottom,#000 0%,#000 calc(var(--progress, 0) * 100%),transparent calc(var(--progress, 0) * 100%));mask:linear-gradient(to bottom,#000 0%,#000 calc(var(--progress, 0) * 100%),transparent calc(var(--progress, 0) * 100%));opacity:calc(.1 + .2 * var(--progress, 0));mix-blend-mode:screen;transition:opacity var(--transition-fast)}.card-fab{position:absolute;top:8px;right:8px;display:inline-flex;gap:6px;align-items:center}.card-handle{position:absolute;top:8px;left:8px;font-weight:700;opacity:.7;cursor:grab;-webkit-user-select:none;user-select:none;line-height:1}.card-title-center{text-align:center;font-weight:800;letter-spacing:-.01em;font-size:clamp(20px,5vw,28px);margin:0}.card-meta-row,.card-meta-edit{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.meta{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px}.meta .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta-right{justify-self:end;text-align:right}.card-meta-edit .meta-left,.card-meta-edit .meta-right{min-width:0}.card-meta-edit .dt-input{width:min(260px,60vw);text-align:right}.editlike{background:transparent;border:1px solid transparent;padding:6px 8px;border-radius:10px;width:100%;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.editlike:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring),transparent 70%);background:color-mix(in oklab,var(--panel-bg),white 6%);outline:none}.editlike.invalid{border-color:var(--error);box-shadow:0 0 0 3px color-mix(in oklab,var(--error),transparent 78%)}.name-input{font-size:18px;font-weight:700;letter-spacing:-.01em}.meta-grid{display:grid;gap:8px;grid-template-columns:1fr}.dt-input,.loc-input{font-size:14px;color:var(--text-strong)}.hint{font-size:12px;color:var(--text-muted)}.footer-hint{margin-top:12px;font-size:12px;color:var(--text-muted);text-align:center}.toast{position:fixed;left:50%;transform:translate(-50%);bottom:20px;padding:10px 14px;border-radius:12px;border:1px solid var(--panel-border);background:color-mix(in oklab,var(--panel-bg),white 4%);box-shadow:var(--panel-shadow);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);font-size:14px;z-index:100;opacity:0;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.sheet{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:end center;z-index:50}.sheet[hidden]{display:none}.sheet .backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%)}.sheet .panel{width:min(100%,var(--max-panel-w));margin:0 16px 16px;padding:16px}@media (prefers-reduced-motion: no-preference){.sheet .panel{animation:sheetIn var(--transition-slow)}@keyframes sheetIn{0%{transform:translateY(12%);opacity:.98}to{transform:translateY(0);opacity:1}}}.muted{color:var(--text-muted)}.hidden{display:none!important}.phone{width:min(100%,var(--phone-w));margin-inline:auto;position:relative}.card[data-prox=far]{--accent-color: var(--accent-far)}.card[data-prox=approaching]{--accent-color: var(--accent-approaching)}.card[data-prox=soon]{--accent-color: var(--accent-soon)}.card[data-prox=imminent]{--accent-color: var(--accent-imminent)}.card[data-prox=live]{--accent-color: var(--accent-live)}.card[data-prox=past]{--accent-color: var(--accent-past)}.card[data-prox=far]{background:color-mix(in oklab,var(--panel-bg),var(--accent-far) 4%)}.card[data-prox=approaching]{background:color-mix(in oklab,var(--panel-bg),var(--accent-approaching) 6%)}.card[data-prox=soon]{background:color-mix(in oklab,var(--panel-bg),var(--accent-soon) 8%)}.card[data-prox=imminent]{background:color-mix(in oklab,var(--panel-bg),var(--accent-imminent) 10%)}.card[data-prox=live]{background:color-mix(in oklab,var(--panel-bg),var(--accent-live) 8%)}.card[data-prox=past]{background:color-mix(in oklab,var(--panel-bg),var(--accent-past) 3%);filter:saturate(.9)}.card[data-prox] .countdown-hero{border-color:color-mix(in oklab,var(--accent-color),white 52%);box-shadow:inset 0 0 0 .5px color-mix(in oklab,var(--accent-color),transparent 60%),0 8px 22px color-mix(in oklab,var(--accent-color),transparent 90%)}@keyframes ringPulse{0%{box-shadow:0 0 color-mix(in oklab,var(--accent-color),transparent 62%)}to{box-shadow:0 0 0 10px color-mix(in oklab,var(--accent-color),transparent 100%)}}.card[data-prox=imminent] .countdown-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;animation:ringPulse 2.6s ease-out infinite;pointer-events:none}@media (prefers-reduced-motion: no-preference){@keyframes cardFlareSweep{0%{background-position:-150% 0;opacity:0}15%{opacity:.25}to{background-position:150% 0;opacity:0}}}.card--event.is-flare{position:relative;overflow:hidden}.card--event.is-flare .flare-layer{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,color-mix(in oklab,var(--accent-color),transparent 100%),color-mix(in oklab,var(--accent-color),white 40%),color-mix(in oklab,var(--accent-color),transparent 100%));background-size:200% 100%;animation:cardFlareSweep .9s ease-out both;mix-blend-mode:screen}