:root{--background: #ffffff;--foreground: #111111;--border: #111111;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--foreground);background:var(--background);font-synthesis:none}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-width:320px;background:var(--background)}h1,h2,h3,p{margin:0}ul{padding:0;margin:0;list-style:none}button,input{font:inherit}:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}.page-shell{width:min(100%,80rem);min-height:100vh;padding:clamp(2rem,4vw,4rem) clamp(1.5rem,5vw,4rem);margin:0 auto}.stack{display:flex;flex-direction:column}.page-header{align-items:center;gap:.75rem;text-align:center}h1{font-size:clamp(2.25rem,7vw,5rem);font-weight:700;letter-spacing:-.065em;line-height:.95}.subtitle{font-size:clamp(1rem,2vw,1.2rem);font-weight:450;line-height:1.5}.clock-section{margin-top:clamp(2rem,4vw,3rem)}.clock-toolbar{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.button{padding:.72rem 1rem;border:1px solid var(--border);border-radius:.5rem;color:var(--background);background:var(--foreground);cursor:pointer;font-size:.92rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;transition:background-color .18s ease,color .18s ease,transform .18s ease}.button:not(:disabled):hover{color:var(--foreground);background:var(--background);transform:translateY(-1px)}.button:not(:disabled):active{transform:translateY(1px)}.button:disabled,.city-option:disabled{cursor:not-allowed;opacity:.4}.button-secondary{color:var(--foreground);background:var(--background)}.button-secondary:not(:disabled):hover{color:var(--background);background:var(--foreground)}.clock-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.5rem)}.clock-grid>li{min-width:0}.clock-card{position:relative;align-items:center;justify-content:center;gap:2.25rem;min-height:24rem;padding:2.25rem 2rem;border:1px solid var(--border);border-radius:1rem;text-align:center;transition:transform .2s ease}.remove-clock{position:absolute;top:.8rem;right:.8rem;display:grid;width:1.8rem;height:1.8rem;padding:0;place-items:center;border:1px solid transparent;border-radius:50%;color:var(--foreground);background:var(--background);cursor:pointer;font-size:1.25rem;line-height:1;transition:background-color .18s ease,color .18s ease,transform .18s ease}.remove-clock:hover{color:var(--background);background:var(--foreground);transform:rotate(90deg)}.remove-clock:active{transform:scale(.9)}.analog-clock{width:min(100%,11.5rem);aspect-ratio:1;display:block;flex:0 0 auto;margin-inline:auto}.clock-face,.clock-markers,.clock-hand,.clock-pin{fill:none;stroke:var(--foreground)}.clock-face{stroke-width:.75}.clock-markers{stroke-width:1}.clock-hand{stroke-linecap:round}.clock-hand-hour{stroke-width:2}.clock-hand-minute{stroke-width:1.5}.clock-hand-second{stroke-width:.75}.clock-pin{fill:var(--foreground);stroke:none}.clock-details{gap:.4rem}.clock-details h3{font-size:1.4rem;font-weight:650;letter-spacing:-.035em;line-height:1.15}.timezone{font-size:.82rem;font-weight:500;letter-spacing:.025em;line-height:1.5}.digital-time{margin-top:.9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:1.12rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.055em;line-height:1.2}.clock-dialog{width:min(calc(100% - 3rem),30rem);padding:0;border:1px solid var(--border);border-radius:1rem;color:var(--foreground);background:var(--background);opacity:0;transform:scale(.97);transition:opacity .2s ease,transform .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}.clock-dialog[open]{opacity:1;transform:scale(1)}@starting-style{.clock-dialog[open]{opacity:0;transform:scale(.97)}}.clock-dialog::backdrop{background:#0003;opacity:0;transition:opacity .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}.clock-dialog[open]::backdrop{opacity:1}@starting-style{.clock-dialog[open]::backdrop{opacity:0}}.dialog-content{gap:1.25rem;padding:clamp(1.25rem,4vw,1.75rem)}.dialog-content h2{font-size:1.5rem;font-weight:650;letter-spacing:-.035em;line-height:1.15}.city-search{width:100%;padding:.78rem;border:1px solid var(--border);border-radius:.5rem;color:var(--foreground);background:var(--background);line-height:1.2}.city-list{max-height:18rem;overflow-y:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.city-option{display:flex;justify-content:space-between;width:100%;padding:.9rem .25rem;border:0;border-bottom:1px solid var(--border);color:var(--foreground);background:var(--background);text-align:left;cursor:pointer;transition:background-color .18s ease,color .18s ease,padding .18s ease}.city-option:not(:disabled):hover{padding-inline:.5rem;color:var(--background);background:var(--foreground)}.city-option:not(:disabled):active{padding-inline:.4rem}.city-list li:last-child .city-option{border-bottom:0}.city-option span:last-child{font-size:.85rem}.empty-state{padding:1rem .25rem}.dialog-actions{display:flex;justify-content:flex-end}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(hover:hover){.clock-card:hover{transform:translateY(-4px)}}@media(max-width:56rem){.clock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:38rem){.page-shell{padding-inline:1.25rem}.clock-section{margin-top:3.5rem}.clock-grid{grid-template-columns:1fr}.clock-card{min-height:25rem;padding:2rem 1.5rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}@media(max-height:800px){.page-shell{padding:1.5rem clamp(1.5rem,5vw,4rem)}.clock-section{margin-top:1.5rem}.clock-card{min-height:21rem}.analog-clock{width:11rem;height:11rem}}