:root{--paper:#f5f0e4;--cream:#fffbef;--ink:#303e3d;--muted:#8b9189;--line:#dedacf;--yellow:#f5cd55;--ochre:#b97543;--green:#4d7870;--cloud:#edf1e7;--shadow:#d9d5c7}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Avenir Next",Avenir,"Trebuchet MS",system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}.hidden{display:none!important}
.app{width:min(100%,520px);margin:auto;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 28px) 23px calc(env(safe-area-inset-bottom) + 20px)}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px}.birdmark{color:#fff;text-shadow:2px 2px var(--ink),-2px 2px var(--ink),2px -2px var(--ink),-2px -2px var(--ink);background:#f4c952;width:35px;height:35px;display:flex;align-items:center;justify-content:center;clip-path:polygon(15% 0%,85% 0%,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0 85%,0 15%,15% 15%);font-size:15px}
.brand strong{font-size:25px;letter-spacing:-1.6px;line-height:1;display:block}.branddot{color:var(--ochre)}.brand small{display:block;letter-spacing:1.4px;font-size:9px;color:var(--muted);margin-top:6px;text-transform:uppercase;font-weight:700}.mastdate{font-weight:800;font-size:10px;letter-spacing:1px;color:var(--muted);text-align:right}.hairline{height:1px;background:var(--line);margin:23px 0 19px}
.timehero{text-align:center;padding:8px 0 11px}.overline,.eyebrow,.field-caption,.top-note,.timer-label,.time-label,.dialog-eyebrow,.ring-eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800}.overline{color:#7c8983;display:flex;align-items:center;justify-content:center;gap:8px}.live-dot{width:7px;height:7px;background:#7ca38a;box-shadow:0 0 0 3px #d6e7d6;border-radius:100%}.bigtime{font-family:"Courier New",ui-monospace,monospace;font-size:clamp(54px,14.2vw,75px);font-weight:700;letter-spacing:-6px;line-height:1.23;white-space:nowrap;font-variant-numeric:tabular-nums}.bigtime span{font-family:"Avenir Next",system-ui,sans-serif;font-weight:800;font-size:14px;letter-spacing:1px;margin-left:11px;vertical-align:middle;color:var(--ochre)}.greeting{font-size:14px;color:#7f8982;font-style:italic;font-family:Georgia,serif}
.bird-stage{height:206px;border:2px solid var(--ink);background:#e5efea;box-shadow:5px 5px 0 var(--shadow);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:18px 5px 24px 0}.bird-stage:before{content:"";position:absolute;inset:10px;border:1px dashed #afc5b8;pointer-events:none}.bird-stage:after{content:"";position:absolute;left:-15px;right:-15px;bottom:-30px;height:66px;border-radius:50% 50% 0 0;background:#d1e4d0}.bird-stage canvas{position:relative;z-index:2;width:256px;height:224px;image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain;margin-top:-9px;filter:drop-shadow(3px 3px 0 #c7d5c5)}.stage-cloud{position:absolute;height:9px;background:#f9f7ed;opacity:.75;box-shadow:12px -6px #f9f7ed,25px 0 #f9f7ed}.cloud-one{top:40px;left:37px;width:36px}.cloud-two{right:44px;top:67px;width:29px}.scene-caption{position:absolute;bottom:15px;z-index:3;font-family:Georgia,serif;color:#677a6e;font-size:11px;font-style:italic;background:#e3eee1dd;padding:2px 8px}
.tabbar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:29px}.tab{min-height:64px;border:1px solid var(--line);background:#faf7ef;color:#88938c;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-size:11px;font-weight:800;letter-spacing:.2px;transition:background .15s,color .15s}.tab.active{background:var(--ink);border-color:var(--ink);color:var(--cream);box-shadow:3px 3px 0 #c8c6b9}.tab-symbol{font-family:Georgia,serif;line-height:1;font-size:23px;color:var(--ochre)}.tab.active .tab-symbol{color:var(--yellow)}
.panel{animation:show .2s ease}@keyframes show{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;min-height:58px}.eyebrow{color:var(--ochre);margin-bottom:5px}.panel-head h1{font-size:28px;font-weight:750;letter-spacing:-1.3px;line-height:1;margin:0}.plus-button{width:43px;height:43px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);font-size:27px;line-height:1}
.alarm-list{display:flex;flex-direction:column;gap:11px}.alarm-card{display:flex;align-items:center;gap:12px;background:var(--cream);border:1.5px solid var(--line);padding:15px 13px;min-height:92px;transition:opacity .15s}.alarm-card.off .alarm-time{color:#9aa29d}.alarm-details{flex:1;min-width:0;cursor:pointer}.alarm-time{font-family:"Courier New",monospace;letter-spacing:-2px;font-weight:700;font-size:37px;line-height:1}.alarm-time small{font-family:system-ui,sans-serif;letter-spacing:.3px;font-size:11px;color:var(--ochre);font-weight:800;margin-left:5px}.alarm-label{font-size:12px;color:#63736c;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alarm-days{font-size:10px;color:var(--muted);margin-top:3px}.alarm-edit{background:none;border:0;padding:7px;color:var(--ochre);font-size:18px}
.toggle{border:2px solid #89968d;border-radius:20px;width:45px;height:27px;position:relative;flex:none;background:#d6dcd3;padding:0;transition:background .15s}.toggle:before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #5555;transition:left .15s}.toggle.on{background:#5f8778;border-color:#486d60}.toggle.on:before{left:21px}
.empty-state{background:var(--cream);border:1px dashed #c5c8b7;text-align:center;padding:26px 16px 28px}.empty-spark{font-size:29px;color:var(--ochre);padding-bottom:8px}.empty-state h2{font-size:17px;margin:0 0 4px}.empty-state p{font-size:13px;color:var(--muted);margin:0 0 18px}.empty-state button{padding:11px 16px;border:1px solid var(--ink);background:var(--yellow);font-weight:800}
.helper-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:15px}.subtle-button{border:0;border-bottom:1px dashed #c9bdaa;background:none;font-size:11px;color:#7e7667;padding:7px 0}.important{display:flex;align-items:flex-start;gap:12px;margin-top:22px;border-top:1px solid var(--line);padding:15px 0}.important .info-symbol{background:#e5ddc9;border:1px solid #b7ad95;color:#8a7860;width:20px;height:20px;text-align:center;flex:none;font-weight:800;font-size:13px}.important p{margin:0;font-size:11px;line-height:1.65;color:#888879}.important strong{color:#777c71}
.timer-box{border:1px solid var(--line);background:var(--cream);padding:28px 18px 23px;text-align:center}.timer-ring{--degree:360deg;width:min(242px,66vw);height:min(242px,66vw);border-radius:50%;margin:0 auto 23px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border:10px solid #ece8db;outline:2px dashed #cad2c0;outline-offset:7px}.timer-ring:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:10px solid transparent;border-top-color:var(--yellow);border-right-color:var(--yellow);transform:rotate(-45deg);opacity:.9;pointer-events:none}.timer-label{color:#8c998f;font-size:8px}.timer-readout{font-size:52px;font-weight:800;letter-spacing:-5px;font-family:"Courier New",monospace;margin-top:9px;line-height:1.1;font-variant-numeric:tabular-nums}.timer-status{font:italic 12px Georgia,serif;color:#819083;margin-top:8px}.timer-actions{display:flex;gap:8px;max-width:320px;margin:0 auto}.primary-button,.secondary-button{border:1.5px solid var(--ink);padding:12px 16px;font-size:12px;font-weight:800;min-height:44px}.primary-button{background:var(--yellow);flex:1;box-shadow:3px 3px 0 #ddd4b9}.secondary-button{background:var(--cream);color:var(--ink)}.field-caption{color:#9a8875;margin:24px 0 11px}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.presets button{background:var(--cream);border:1px solid var(--line);padding:12px 3px;font-size:11px;color:var(--ink)}.presets button b{display:block;font-family:"Courier New",monospace;font-size:15px;margin-top:5px}.presets button.selected{background:#f6e6b7;border-color:#d6ae60}.timer-edit{display:flex;align-items:flex-end;gap:10px}.timer-edit label{font-size:10px;letter-spacing:.5px;color:#8d9189;font-weight:800;flex:1;min-width:0}.timer-edit input{display:block;margin-top:5px;width:100%;background:var(--cream);border:1px solid var(--line);padding:9px 6px;text-align:center;font-family:"Courier New",monospace;font-size:20px;color:var(--ink);border-radius:0}.timer-edit .colon{font-size:24px;padding-bottom:8px;color:#8d9189}.timer-edit button{padding-inline:19px}
.top-note{font-family:Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0;color:#a6a195;font-weight:400}
.world-list{display:flex;flex-direction:column;gap:9px}.city-card{background:var(--cream);border:1px solid var(--line);padding:14px;display:flex;align-items:center;gap:13px}.city-daylight{height:36px;width:36px;border:1px solid var(--line);background:#e4e9d8;position:relative;flex:none;display:flex;align-items:center;justify-content:center}.city-daylight .sun{width:14px;height:14px;display:block;background:#eebf61;box-shadow:0 -8px 0 -5px #eebf61,0 8px 0 -5px #eebf61,8px 0 0 -5px #eebf61,-8px 0 0 -5px #eebf61}.city-daylight.night{background:#424f60}.city-daylight.night .sun{width:16px;height:16px;border-radius:100%;box-shadow:5px -3px 0 1px #424f60;background:#e7ddad}.city-info{flex:1;min-width:0}.city-name{font-size:15px;font-weight:800;white-space:nowrap}.city-relative{font-size:11px;color:#8a998b;margin-top:4px}.city-time{font-family:"Courier New",monospace;font-size:25px;letter-spacing:-2px;font-weight:800;white-space:nowrap}.city-time small{font-family:system-ui,sans-serif;font-weight:800;color:var(--ochre);font-size:9px;letter-spacing:.2px}.remove-city{border:0;background:none;color:#c1afa1;padding:4px;font-size:16px}.add-city{margin-top:25px}.add-city label{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#9a8875;display:block;margin-bottom:9px}.city-picker{display:flex;gap:8px}.city-picker select{width:100%;min-width:0;background:var(--cream);color:var(--ink);border:1px solid var(--line);padding:10px;font-size:14px;border-radius:0}.city-picker button{white-space:nowrap}
footer{font-size:9px;letter-spacing:1.3px;font-weight:800;color:#b0b0a3;text-align:center;padding:35px 0 7px}.footer-bird{color:var(--ochre);padding-left:5px}
.alarm-dialog{border:2px solid var(--ink);background:var(--paper);box-shadow:7px 7px 0 #a8b4a8;width:calc(100% - 30px);max-width:440px;padding:23px;color:var(--ink);border-radius:0}.alarm-dialog::backdrop{background:#24352fb5}.dialog-eyebrow{color:var(--ochre)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head h2{font-size:27px;letter-spacing:-1px;margin:5px 0}.close-button{border:0;background:none;font-size:28px;color:#87958c}.time-label{color:#8d8b7c;display:block;margin:16px 0 8px}.alarm-dialog input[type=time],.alarm-dialog input[type=text]{width:100%;background:var(--cream);border:1px solid var(--line);border-radius:0;padding:12px;color:var(--ink)}.alarm-dialog input[type=time]{font-family:monospace;font-size:28px}.weekday-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.weekday-picker button{border:1px solid var(--line);background:var(--cream);aspect-ratio:1;font-size:12px;font-weight:800;color:#768478}.weekday-picker button.selected{background:#587c6c;color:#fff;border-color:#587c6c}.dialog-actions{display:flex;gap:9px;margin-top:26px}.dialog-actions .primary-button{flex:1}.ring-overlay{position:fixed;inset:0;background:#273d37e8;display:flex;justify-content:center;align-items:center;z-index:20;padding:24px}.ring-card{width:min(100%,400px);background:var(--cream);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--yellow);padding:36px 27px;text-align:center}.ring-eyebrow{color:var(--ochre)}.ring-illustration{font-size:70px;color:var(--ochre);margin:16px 0}.ring-card h2{font-size:32px;margin:4px 0}.ring-card p{color:#829084;font:italic 14px Georgia,serif;margin:10px 0 28px}.ring-card .primary-button{width:100%}.toast{position:fixed;left:50%;transform:translate(-50%,20px);bottom:calc(25px + env(safe-area-inset-bottom));background:var(--ink);color:var(--cream);padding:12px 20px;font-size:12px;box-shadow:4px 4px 0 #b7b9ad;z-index:40;opacity:0;visibility:hidden;transition:.2s;white-space:nowrap;max-width:calc(100vw - 28px);text-overflow:ellipsis;overflow:hidden}.toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:390px){.app{padding-left:17px;padding-right:17px}.bird-stage{height:185px}.bird-stage canvas{width:236px;height:207px}.mastdate{font-size:9px}.alarm-time{font-size:33px}.city-time{font-size:22px}.tab{min-height:61px}.panel-head h1{font-size:25px}.timer-ring{width:214px;height:214px}.timer-readout{font-size:45px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.timer-ring{border:0;background:conic-gradient(var(--ochre) 0deg var(--degree),#e8e4d6 var(--degree) 360deg)}.timer-ring:before{content:"";position:absolute;inset:11px;background:var(--cream);border-radius:50%}.timer-ring>*{position:relative;z-index:1}.timer-ring:after{display:none}

/* Keep all three controls usable even on the narrow iPhone mini. */
.tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}.tab{min-width:0;padding:4px}.mastdate{min-width:0;max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.birdmark{object-fit:cover;image-rendering:pixelated;background:none;text-shadow:none}