*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;font-family:system-ui,-apple-system,sans-serif}#root{min-height:100vh}.app-container{--bg:#050505;--text-title:#ffffff80;--text-main:#ffffffe6;--text-sub:#ffffff80;--text-muted:#ffffff40;--gradient-top:#fff;--gradient-bot:#ffffff59;--progress-bg:#ffffff1a;--progress-fill:#fffc;--border:#ffffff1a;--btn-hover:#fffc;--input-bg:#ffffff0d}.app-container.light{--bg:#f5f5f7;--text-title:#00000080;--text-main:#000000d9;--text-sub:#00000080;--text-muted:#0000004d;--progress-bg:#00000014;--progress-fill:#000000b3;--border:#0000001a;--btn-hover:#000c;--input-bg:#00000008}.app-container{background:var(--bg);min-height:100vh;color:var(--text-main);flex-direction:column;transition:background .6s,color .6s;display:flex;position:relative;overflow:hidden}.header{flex-shrink:0;justify-content:flex-end;align-items:center;height:50px;padding:0 20px;display:flex}.content{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.footer{flex-direction:column;justify-content:flex-start;align-items:center;min-height:80px;display:flex}.header-actions{flex-direction:row;justify-content:flex-end;align-items:center;width:100%;padding:16px;display:flex}.btn-theme{color:var(--text-muted);cursor:pointer;letter-spacing:1px;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px 8px;font-size:.65rem;transition:all .2s;display:flex}.btn-theme:hover{color:var(--btn-hover);border:1px solid var(--text-muted)}.title{color:var(--text-main);text-transform:uppercase;text-align:center;margin-bottom:8px;font-size:1.5rem;font-weight:500;transition:color .6s}.subtitle{color:var(--text-muted);text-align:center;font-size:.8rem;transition:color .6s}.days-display{justify-content:center;align-items:baseline;display:flex}.days-wrapper{font-size:clamp(80px,28vw,220px);font-weight:600}.app-container:not(.light) .days-wrapper{background:linear-gradient(180deg, var(--gradient-top) 0%, var(--gradient-bot) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.app-container.light .days-wrapper{color:var(--text-main);-webkit-text-fill-color:var(--text-main)}.days-label{color:var(--text-sub);text-transform:uppercase;text-align:left;min-width:30px;margin-left:-12px;font-size:.9rem;transition:color .6s}.time-footer{align-items:baseline;gap:12px;margin-top:24px;display:flex}.time-unit{color:var(--text-muted);letter-spacing:2px;font-size:.75rem;transition:color .6s}.sep{color:var(--text-muted);transition:color .6s}.progress-section{width:100%;max-width:min(400px,90vw);margin:48px auto;padding:0 20px}.progress-label{color:var(--text-muted);justify-content:space-between;margin-bottom:8px;font-size:.75rem;transition:color .6s;display:flex}.progress-bar{background:var(--progress-bg);height:2px;transition:background .6s}.progress-fill{background:var(--text-main);height:100%;transition:width .5s,background .6s}.born-row{align-items:center;gap:16px;display:flex}.born-info{color:var(--text-muted);letter-spacing:1px;font-size:.7rem;transition:color .6s}.btn-settings{color:var(--text-muted);cursor:pointer;letter-spacing:1px;text-underline-offset:3px;background:0 0;border:none;padding:4px 12px;font-size:.7rem;text-decoration:underline;transition:color .2s}.btn-settings:hover{color:var(--btn-hover)}.settings-panel{border:1px solid var(--border);border-radius:8px;margin-top:24px;padding:24px;transition:border-color .6s}.settings-panel label{color:var(--text-sub);margin:16px 0;font-size:.8rem;transition:color .6s;display:block}.settings-panel input{background:var(--input-bg);border:1px solid var(--border);width:100%;color:var(--text-main);border-radius:4px;margin-top:8px;padding:12px;font-size:1rem;transition:all .6s;display:block}.settings-panel input:focus{border-color:var(--text-sub);outline:none}.app-container:not(.light) .settings-panel input[type=date]::-webkit-calendar-picker-indicator{filter:invert();opacity:.5}.app-container.light .settings-panel input[type=date]::-webkit-calendar-picker-indicator{filter:none;opacity:.5}@media (width<=600px){.days-wrapper{font-size:clamp(60px,25vw,120px)}.days-display{gap:10px}.time-wrapper{font-size:1.5rem}.time-unit{font-size:.5rem}}