:root { color-scheme:dark; --bg:#141413; --text:#f4f0e8; --secondary:#a8a59d; --accent:#edd1a3; --line:#36362f; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.ambient { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 15% 68%,#2b2922 0%,#181816 46%,#111110 100%); }
.dashboard { position:relative; height:100vh; height:100svh; height:100dvh; min-height:300px; max-width:1440px; margin:0 auto; padding:max(24px,env(safe-area-inset-top)) max(38px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(38px,env(safe-area-inset-left)); display:flex; flex-direction:column; gap:18px; -webkit-user-select:none; user-select:none; }
.dashboard-main { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,6vw,90px); flex:1; min-height:0; align-items:center; }
@media (orientation:landscape) {
  html,body { height:100%; overflow:hidden; overscroll-behavior:none; }
  body { position:fixed; inset:0; width:100%; }
  .dashboard { overflow:hidden; touch-action:none; }
}
.clock-section { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,3vh,26px); min-width:0; }
.clock { display:block; width:min(34vw,67vh,420px); width:min(34vw,67dvh,420px); max-width:100%; flex-shrink:0; overflow:visible; }
.dial-rim { stroke:#47483f; stroke-width:.75; }
.clock-tick { stroke:#6b6b60; stroke-width:1.2; stroke-linecap:round; }
.clock-tick.major { stroke:#d4d1c7; stroke-width:2.7; }
.clock-number { fill:#dfd9cd; font-size:20px; font-weight:400; text-anchor:middle; dominant-baseline:central; }
.hour-hand,.minute-hand { stroke:#f9f7f1; stroke-linecap:round; }
.hour-hand { stroke-width:9; }
.minute-hand { stroke-width:5.5; }
.clock-pin { fill:var(--accent); }
.today-label { margin:0; font-size:clamp(16px,1.85vw,25px); color:#d9d3c7; text-align:center; }
.details-section { display:flex; flex-direction:column; gap:clamp(15px,3.5vh,30px); min-width:0; }
.calendar-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:0 calc(7px + env(safe-area-inset-right)) 0 7px; margin-bottom:clamp(8px,2vh,20px); }
.calendar-header h1 { font-size:clamp(22px,2.55vw,34px); font-weight:500; letter-spacing:-.025em; margin:0; }
#year-label { color:var(--secondary); font-size:clamp(13px,1.45vw,20px); }
.weekdays,.calendar-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; text-align:center; }
.weekdays { color:var(--secondary); font-size:clamp(11px,1.3vw,17px); margin-bottom:5px; }
.calendar-days { display:grid; gap:clamp(2px,.75vh,8px); font-size:clamp(14px,1.85vw,25px); font-variant-numeric:tabular-nums; }
.calendar-day { display:flex; justify-content:center; align-items:center; height:clamp(22px,6vh,42px); height:clamp(22px,6dvh,42px); }
.calendar-day span { display:flex; align-items:center; justify-content:center; width:clamp(24px,6vh,42px); width:clamp(24px,6dvh,42px); aspect-ratio:1; border-radius:50%; }
.calendar-day.outside { color:#656259; }
.calendar-day.weekend { color:#b7b2a7; }
.calendar-day.today { color:#211d16; font-weight:500; }
.calendar-day.today span { background:var(--accent); }
.weather-section { border-top:1px solid var(--line); padding-top:clamp(10px,2.5vh,22px); }
.weather-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(12px,2.5vw,38px); }
.weather-day { display:flex; gap:clamp(8px,1.4vw,18px); align-items:center; min-width:0; }
.weather-icon { width:clamp(28px,3.8vw,48px); flex-shrink:0; color:var(--accent); }
.weather-icon svg { display:block; width:100%; height:auto; }
.weather-content { min-width:0; }
.weather-heading { color:var(--secondary); font-size:clamp(11px,1.3vw,17px); display:flex; flex-wrap:wrap; }
#city-label { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.weather-values { display:flex; align-items:baseline; gap:8px; margin-top:3px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.weather-values strong { font-size:clamp(25px,3.1vw,42px); font-weight:400; letter-spacing:-.04em; }
.weather-values > span { font-size:clamp(10px,1.1vw,14px); color:var(--secondary); }
.weather-content p { font-size:clamp(11px,1.2vw,15px); color:#c6c0b5; margin:3px 0 0; }
.weather-footer { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:9px; font-size:clamp(10px,1vw,12px); color:#939084; }
.weather-footer a { color:inherit; text-decoration:none; }
.weather-footer a:hover { text-decoration:underline; }
.quote-section { display:flex; gap:10px; align-items:center; justify-content:center; flex-shrink:0; min-height:24px; text-align:center; }
.quote-section svg { width:20px; height:20px; color:var(--accent); flex-shrink:0; }
.quote-section p { font-size:clamp(14px,1.8vw,22px); line-height:1.4; letter-spacing:-.015em; margin:0; max-width:920px; text-wrap:pretty; color:#d9d3c7; }
.icon-button { background:transparent; border:0; color:var(--secondary); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.icon-button:hover { background:#ffffff09; color:var(--text); }
.settings-button { position:absolute; z-index:1; right:max(3px,env(safe-area-inset-right)); top:max(3px,env(safe-area-inset-top)); opacity:.5; }
.settings-button:focus-visible,.settings-button:hover { opacity:1; }
.settings-button svg { width:20px; height:20px; }
dialog { width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:24px; border:1px solid #4a483d; border-radius:26px; background:#252520; color:var(--text); box-shadow:0 24px 90px #0008; overflow-y:auto; touch-action:pan-y pinch-zoom; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
dialog::backdrop { background:#090a0b99; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.dialog-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.dialog-header h2 { font-size:26px; font-weight:500; letter-spacing:-.03em; margin:5px 0 0; }
.dialog-header .icon-button { font-size:30px; }
.eyebrow { color:var(--accent); font-size:10px; letter-spacing:.17em; margin:0; }
label { display:block; font-size:14px; }
.search-row { display:flex; gap:8px; margin-top:8px; }
input,select { border:1px solid #4a483f; background:#191a16; color:var(--text); border-radius:12px; min-height:44px; padding:10px 12px; font-size:16px; min-width:0; }
input { flex:1; width:100%; }
.primary-button,.secondary-button { min-height:44px; border-radius:12px; padding:10px 15px; border:1px solid #4a483f; font-size:14px; }
.primary-button { color:#252017; background:var(--accent); border-color:var(--accent); }
.secondary-button { color:var(--text); background:#33332b; width:100%; margin-top:8px; }
button:disabled { opacity:.55; cursor:wait; }
.help-text { font-size:13px; line-height:1.5; margin:12px 0 6px; color:var(--secondary); }
.help-text:empty { display:none; }
.city-results { display:flex; flex-direction:column; gap:4px; }
.city-result { text-align:left; background:#ffffff06; color:var(--text); border:0; border-radius:10px; padding:12px; min-height:44px; }
.city-result small { display:block; color:var(--secondary); margin-top:4px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:24px 0; border-bottom:1px solid #444236; }
.setting-row select { max-width:180px; }
.setting-note { margin-top:20px; }
.setting-note h3 { margin:0 0 6px; font-weight:500; font-size:15px; }
.setting-note p { color:var(--secondary); font-size:13px; line-height:1.6; margin:6px 0; }
.privacy-note { font-size:11px; color:#8e8b80; line-height:1.6; margin:22px 0 0; }
.app-version { margin:16px 0 0; font-size:11px; color:#8e8b80; }
noscript { position:fixed; bottom:20px; padding:12px; background:#252520; }
@media(orientation:landscape) and (max-height:450px) {
  .dashboard { padding-top:18px; padding-bottom:max(14px,env(safe-area-inset-bottom)); gap:12px; }
  .dashboard-main { gap:5vw; }
  .clock { width:min(32vw,66dvh); }
  .clock-section { gap:12px; }
  .calendar-header { margin-bottom:8px; }
  .details-section { gap:13px; }
  .calendar-days { gap:2px; }
  .calendar-day { height:5.7dvh; }
  .calendar-day span { width:5.7dvh; }
  .weather-section { padding-top:9px; }
  .weather-footer { margin-top:5px; }
  .weather-content p { font-size:11px; }
  .quote-section p { font-size:15px; }
}
@media(orientation:portrait), (max-width:540px) {
  .dashboard { height:auto; min-height:100svh; padding:48px 24px max(28px,env(safe-area-inset-bottom)); gap:28px; }
  .dashboard-main { display:flex; flex-direction:column; gap:32px; }
  .clock { width:min(68vw,300px); }
  .clock-section { gap:16px; }
  .today-label { font-size:18px; }
  .details-section { width:100%; max-width:420px; gap:22px; }
  .calendar-header h1 { font-size:26px; }
  .calendar-header { margin-bottom:18px; }
  .weekdays { font-size:12px; }
  .calendar-days { font-size:18px; gap:6px; }
  .calendar-day,.calendar-day span { height:34px; }
  .calendar-day span { width:34px; }
  .weather-section { padding-top:20px; }
  .weather-values strong { font-size:30px; }
  .weather-values { gap:6px; }
  .weather-heading { font-size:12px; }
  .weather-content p { font-size:11px; }
  .weather-icon { width:30px; }
  .weather-day { gap:8px; }
  .weather-footer { font-size:10px; }
  .quote-section { max-width:420px; margin:0 auto; }
  .quote-section p { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }