@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root { --ink:#f7f4ed; --muted:rgba(244,245,244,.7); --gold:#f5c85c; --glass:rgba(5,13,20,.47); --line:rgba(241,224,193,.21); }
* { box-sizing:border-box; }
body { margin:0; overflow:hidden; background:#07121d; color:var(--ink); font-family:"DM Sans",sans-serif; }
.dashboard,.screen-track,.screen { height:100svh; width:100%; }
@media (display-mode: standalone) { .dashboard,.screen-track,.screen { height:100dvh; } }
.dashboard { isolation:isolate; position:relative; overflow:hidden; }
.background,.shade { position:absolute; inset:0; z-index:-2; }
.background { background:var(--wallpaper,url("assets/mountain-sunset.png")) center center / cover no-repeat; transform:scale(1.015); transition:background-image 1.2s ease; }
.shade { z-index:-1; background:linear-gradient(90deg,rgba(2,10,17,.37),rgba(2,9,16,.08) 55%,rgba(1,6,11,.32)), linear-gradient(0deg,rgba(0,5,10,.43),transparent 42%); }
.screen-track { display:flex; transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.screen { min-width:100%; position:relative; padding:clamp(20px,4vh,56px) clamp(30px,4.6vw,80px); }
.home-screen { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(370px,1fr); gap:clamp(30px,5vw,96px); align-items:center; }
.focus-copy { height:min(82vh,850px); display:flex; flex-direction:column; justify-content:center; padding-left:clamp(0px,1.2vw,24px); text-shadow:0 2px 18px rgba(0,0,0,.25); }
.eyebrow { margin:0; white-space:pre-line; text-transform:uppercase; letter-spacing:.32em; font-size:clamp(10px,.85vw,15px); line-height:1.85; color:rgba(255,255,255,.76); }
.accent-line { width:44px; height:2px; margin:28px 0 48px; display:block; background:var(--gold); box-shadow:0 0 16px rgba(245,200,92,.36); }
.time-row { display:flex; align-items:flex-end; gap:clamp(13px,1.5vw,24px); }
.flip-clock { display:flex; align-items:center; gap:clamp(5px,.65vw,12px); line-height:1; }
.flip-card { position:relative; display:grid; place-items:center; width:clamp(86px,10.8vw,182px); height:clamp(124px,14.9vw,250px); overflow:hidden; perspective:900px; border:1px solid rgba(255,255,255,.16); border-radius:clamp(10px,1vw,18px); background:linear-gradient(155deg,rgba(43,51,62,.96),rgba(6,11,17,.98)); box-shadow:inset 0 1px rgba(255,255,255,.11), inset 0 -20px 38px rgba(0,0,0,.34), 0 14px 30px rgba(0,0,0,.28); color:#f9f8f2; font:600 clamp(91px,11.8vw,200px)/.9 "DM Sans",sans-serif; letter-spacing:-.09em; text-indent:-.07em; }
.flip-card::after { content:""; position:absolute; z-index:4; top:50%; left:0; right:0; height:2px; background:rgba(0,0,0,.78); box-shadow:0 1px rgba(255,255,255,.12); }
.flip-top,.flip-bottom,.flip-leaf,.flip-bottom-leaf { position:absolute; left:0; right:0; height:50%; overflow:hidden; backface-visibility:hidden; transform-style:preserve-3d; }
.flip-top,.flip-leaf { top:0; }
.flip-bottom,.flip-bottom-leaf { bottom:0; }
.flip-value { position:absolute; left:0; right:0; height:200%; display:grid; place-items:center; }
.flip-top .flip-value,.flip-leaf .flip-value { top:0; }
.flip-bottom .flip-value,.flip-bottom-leaf .flip-value { bottom:0; }
.flip-top { z-index:1; background:linear-gradient(rgba(255,255,255,.045),transparent); }
.flip-bottom { z-index:1; background:linear-gradient(transparent,rgba(0,0,0,.34)); }
.flip-leaf { display:none; z-index:3; transform:rotateX(0deg); transform-origin:bottom; background:linear-gradient(155deg,#343c46,#10161d); }
.flip-card.flipping .flip-leaf { display:block; animation:flip-down .29s cubic-bezier(.28,.75,.42,1) forwards; }
.flip-bottom-leaf { display:none; z-index:2; transform:rotateX(90deg); transform-origin:top; background:linear-gradient(transparent,rgba(0,0,0,.35)); }
.flip-card.bottom-flipping .flip-bottom-leaf { display:block; animation:flip-up .29s cubic-bezier(.28,.75,.42,1) forwards; }
@keyframes flip-down { from { transform:rotateX(0); filter:brightness(1); } to { transform:rotateX(-90deg); filter:brightness(.62); } }
@keyframes flip-up { from { transform:rotateX(90deg); filter:brightness(.55); } to { transform:rotateX(0); filter:brightness(1); } }
.flip-separator { align-self:center; margin:-.06em clamp(0px,.25vw,5px) 0; color:var(--gold); font:300 clamp(68px,8vw,140px)/1 "DM Sans",sans-serif; text-shadow:0 0 18px rgba(245,200,92,.25); }
.meridiem-stack { display:flex; flex-direction:column; align-items:center; gap:clamp(7px,.7vw,12px); padding-bottom:clamp(5px,.7vw,13px); }
.seconds-card { display:flex; width:clamp(46px,4.6vw,76px); height:clamp(38px,3.9vw,66px); position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:clamp(6px,.55vw,10px); background:linear-gradient(155deg,rgba(43,51,62,.96),rgba(6,11,17,.98)); box-shadow:inset 0 1px rgba(255,255,255,.1), 0 7px 16px rgba(0,0,0,.2); color:#f9f8f2; }
.seconds-card::after { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:rgba(0,0,0,.75); box-shadow:0 1px rgba(255,255,255,.12); }
.seconds-card .flip-card { width:50%; height:100%; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:clamp(23px,2.35vw,39px); letter-spacing:-.07em; text-indent:-.04em; }
.seconds-card .flip-card::after { display:none; }
.seconds-card .flip-card:first-child { border-right:1px solid rgba(255,255,255,.07); }
.time-row .meridiem-stack #meridiem { font-size:clamp(18px,1.6vw,28px); color:rgba(255,255,255,.55); }
.date { font-size:clamp(23px,2.25vw,42px); margin:30px 0 0; letter-spacing:-.04em; }
blockquote { margin:auto 0 0; font:italic clamp(25px,2vw,39px)/1.32 "Playfair Display",serif; letter-spacing:-.035em; }
.quote-line { margin:24px 0 0 2px; }
.world-clocks { display:flex; align-items:flex-start; justify-content:space-between; width:min(100%,680px); gap:24px; margin:auto 0 2px; }.world-clock { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:clamp(88px,7.5vw,128px); text-align:center; }.world-clock strong,.world-clock time { display:block; }.world-clock strong { font-size:clamp(13px,1.02vw,17px); font-weight:500; letter-spacing:.02em; }.world-clock time { margin-top:4px; color:rgba(255,255,255,.68); font-size:clamp(13px,.98vw,16px); font-variant-numeric:tabular-nums; }.analog-face { position:relative; flex:0 0 auto; width:clamp(88px,7.3vw,122px); height:clamp(88px,7.3vw,122px); border:1px solid rgba(241,224,193,.36); border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(7,14,22,.12)); box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -14px 24px rgba(0,0,0,.09),0 10px 25px rgba(0,0,0,.14); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }.analog-face::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.13); border-radius:50%; pointer-events:none; }.clock-number { position:absolute; z-index:2; color:rgba(247,244,237,.72); font:500 clamp(9px,.76vw,13px)/1 "DM Sans",sans-serif; text-shadow:0 1px 3px rgba(0,0,0,.45); transform:translate(-50%,-50%); }.clock-hand { position:absolute; z-index:3; left:50%; bottom:50%; width:2px; border-radius:4px; background:rgba(249,248,242,.92); box-shadow:0 1px 3px rgba(0,0,0,.38); transform-origin:50% 100%; transform:translateX(-50%) rotate(var(--angle)); }.hour-hand { height:21%; width:3px; }.minute-hand { height:31%; width:2px; }.second-hand { height:23%; width:1px; background:var(--gold); }.analog-face b { position:absolute; z-index:4; top:50%; left:50%; width:7px; height:7px; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(245,200,92,.42); transform:translate(-50%,-50%); }
.widgets { display:flex; flex-direction:column; gap:clamp(12px,2vh,20px); width:100%; max-width:590px; justify-self:end; }
.glass-card { background:linear-gradient(135deg,rgba(8,18,28,.43),rgba(7,10,14,.16)); border:1px solid rgba(241,224,193,.25); border-radius:25px; box-shadow:inset 0 1px rgba(255,255,255,.06),0 22px 60px rgba(0,0,0,.10); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.weather-card { padding:clamp(20px,3vh,30px) clamp(26px,3vw,36px); }
.weather-title { display:flex; align-items:center; gap:17px; font-size:clamp(18px,1.5vw,27px); letter-spacing:-.02em; }
.weather-title small { margin-left:auto; font-size:clamp(13px,1.05vw,18px); color:var(--muted); }
.pin { color:var(--ink); font-size:32px; transform:rotate(-18deg); }
.weather-main { display:grid; grid-template-columns:120px 1fr minmax(90px,.7fr); align-items:center; margin-top:31px; gap:18px; }
.weather-main strong { font-size:clamp(46px,4vw,74px); font-weight:400; letter-spacing:-.08em; white-space:nowrap; }
.weather-main p { margin:4px 0 0; font-size:17px; color:var(--muted); white-space:nowrap; }
dl { border-left:1px solid rgba(255,255,255,.35); padding-left:27px; margin:0; display:grid; gap:14px; font-size:16px; } dl div { display:flex; gap:13px; } dt { color:var(--muted); } dd { margin:0; }.status-dot { width:13px; height:13px; margin-top:4px; border-radius:50%; background:#79c49e; }
.sun-icon { width:104px; height:104px; overflow:visible; filter:drop-shadow(0 0 14px rgba(255,198,66,.22)); }
.calendar-card { padding:37px 38px 30px; min-height:430px; }.calendar-card header { display:flex; align-items:center; justify-content:space-between; }.calendar-card h1 { margin:0; font-size:clamp(23px,1.8vw,34px); font-weight:500; letter-spacing:-.045em; }.month-actions { display:flex; gap:24px; }.month-actions button,.screen-pagination button { border:0; color:var(--ink); background:transparent; cursor:pointer; }.month-actions button { font-size:42px; line-height:.5; font-weight:200; padding:2px 0; }.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }.calendar-weekdays { border-bottom:1px solid rgba(255,255,255,.11); margin-top:45px; padding-bottom:15px; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.72); }.calendar-grid { row-gap:20px; padding-top:15px; }.calendar-grid time { width:40px; height:40px; display:grid; place-items:center; margin:auto; font-size:18px; border-radius:50%; }.calendar-grid time.outside { color:rgba(255,255,255,.4); }.calendar-grid time.today { color:#2f2614; font-weight:600; background:linear-gradient(135deg,#fff0b3,#f2be4c); box-shadow:0 3px 17px rgba(242,190,76,.3); }
.calendar-card { padding:clamp(24px,3.4vh,34px) clamp(28px,3.1vw,38px) 24px; min-height:0; }
.calendar-weekdays { margin-top:clamp(26px,4vh,42px); padding-bottom:12px; }
.calendar-grid { row-gap:clamp(10px,1.7vh,18px); padding-top:12px; }
.focus-screen { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(16px,2.4vh,30px); }.focus-screen-heading { padding-left:clamp(0px,1.2vw,24px); }.focus-screen-heading .eyebrow { font-size:clamp(9px,.72vw,12px); }.focus-screen-heading h1 { margin:8px 0 0; font:500 clamp(48px,5.6vw,96px)/.95 "Playfair Display",serif; letter-spacing:.04em; }.focus-screen-heading .accent-line { margin:18px 0 0; }.focus-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.8fr); gap:clamp(18px,2.6vw,40px); min-height:0; padding:0 clamp(0px,1.2vw,24px); }.timer-card { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; padding:clamp(22px,3vh,42px); }.section-kicker { margin:0; color:rgba(255,255,255,.64); font-size:clamp(10px,.76vw,13px); font-weight:600; letter-spacing:.22em; }.focus-title-input { width:100%; max-width:430px; margin:10px 0 clamp(12px,2vh,24px); padding:0; border:0; background:transparent; color:var(--ink); font:500 clamp(28px,2.5vw,45px)/1.15 "Playfair Display",serif; text-align:center; outline:none; }.focus-title-input:focus { border-bottom:1px solid rgba(245,200,92,.65); }.timer-ring { --timer-progress:0deg; position:relative; display:grid; place-items:center; width:clamp(190px,23vw,365px); aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--gold) var(--timer-progress),rgba(255,255,255,.17) var(--timer-progress) 360deg); box-shadow:0 0 32px rgba(245,200,92,.12); }.timer-ring::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.13); border-radius:50%; background:rgba(4,12,19,.28); }.timer-ring time { position:relative; z-index:1; font-size:clamp(50px,6.4vw,105px); font-weight:400; letter-spacing:-.075em; font-variant-numeric:tabular-nums; }.timer-actions { display:flex; align-items:center; gap:13px; margin-top:clamp(16px,2.4vh,30px); }.focus-button { min-width:clamp(180px,16vw,252px); padding:15px 24px; border:1px solid rgba(255,236,177,.56); border-radius:999px; background:linear-gradient(135deg,#fff0b3,#e8b850); color:#302713; font:600 clamp(14px,1.05vw,17px) "DM Sans",sans-serif; cursor:pointer; box-shadow:0 8px 24px rgba(245,200,92,.18); }.focus-button:hover { filter:brightness(1.06); }.timer-reset { width:45px; height:45px; border:1px solid rgba(255,255,255,.24); border-radius:50%; background:rgba(5,13,20,.2); color:var(--ink); font-size:25px; cursor:pointer; }.focus-side-panel { display:grid; grid-template-rows:1fr 1fr; gap:clamp(12px,1.8vh,20px); min-height:0; }.priorities-card,.timeline-card { padding:clamp(18px,2.4vh,30px); overflow:hidden; }.priorities-card header,.timeline-card header { display:flex; justify-content:space-between; align-items:center; margin-bottom:clamp(14px,2vh,23px); }.priorities-card header span { color:rgba(255,255,255,.56); font-size:clamp(12px,.9vw,15px); font-variant-numeric:tabular-nums; }.priority-row { display:flex; align-items:center; gap:13px; min-height:clamp(43px,5.2vh,59px); padding:0 13px; border:1px solid rgba(255,255,255,.11); border-radius:13px; background:rgba(4,12,19,.18); cursor:pointer; }.priority-row + .priority-row { margin-top:10px; }.priority-row > input[type="checkbox"] { position:absolute; opacity:0; }.priority-check { width:21px; height:21px; flex:0 0 auto; border:1px solid rgba(255,255,255,.48); border-radius:50%; }.priority-row > input:checked + .priority-check { border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 5px rgba(5,13,20,.72); }.priority-input { width:100%; border:0; background:transparent; color:var(--ink); font:inherit; outline:0; }.priority-row:has(input:checked) .priority-input { color:rgba(255,255,255,.45); text-decoration:line-through; }.timeline-row { display:grid; grid-template-columns:48px 14px 1fr; align-items:center; gap:10px; min-height:clamp(30px,4.1vh,45px); }.timeline-row time { color:rgba(255,255,255,.58); font-size:clamp(11px,.86vw,14px); font-variant-numeric:tabular-nums; }.timeline-row span { width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(245,200,92,.4); }.timeline-row:nth-of-type(2) span { background:#7fa9ff; box-shadow:0 0 12px rgba(127,169,255,.35); }.timeline-row:nth-of-type(3) span { background:#79c49e; box-shadow:0 0 12px rgba(121,196,158,.35); }.timeline-row:nth-of-type(4) span { background:#b393f6; box-shadow:0 0 12px rgba(179,147,246,.35); }.timeline-row p { margin:0; padding:clamp(7px,1vh,11px) 12px; border-left:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.8); font-size:clamp(12px,.94vw,16px); }.focus-progress { display:flex; align-items:center; gap:clamp(24px,4vw,64px); margin:0 clamp(0px,1.2vw,24px); padding:clamp(14px,2vh,23px) clamp(20px,2.5vw,34px); }.focus-progress strong { display:block; margin-top:6px; font-size:clamp(15px,1.2vw,20px); font-weight:500; }.progress-track { flex:1; height:10px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.16); }.progress-track span { display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f1b744,#ffe099); box-shadow:0 0 16px rgba(245,200,92,.45); transition:width .35s ease; }
.focus-screen { padding-bottom:clamp(58px,8vh,92px); }
.focus-screen-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.compact-clock-wrap { display:flex; align-items:flex-end; gap:8px; padding:clamp(3px,.6vh,8px) clamp(0px,1vw,16px) 0 0; }
.compact-flip-clock { display:flex; align-items:center; gap:3px; line-height:1; }
.compact-flip-card { width:clamp(30px,3vw,48px); height:clamp(42px,4.1vw,66px); border-radius:7px; font-size:clamp(33px,3.45vw,55px); }
.compact-flip-separator { color:var(--gold); font:300 clamp(27px,2.7vw,42px)/1 "DM Sans",sans-serif; }
.compact-clock-wrap > span { padding-bottom:3px; color:rgba(255,255,255,.58); font-size:clamp(10px,.82vw,13px); letter-spacing:.08em; }
.focus-screen-heading h1 { margin:0; font-size:clamp(38px,4.1vw,68px); }
.focus-screen-heading .accent-line { margin-top:13px; }
.timer-card { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); justify-items:center; align-items:center; gap:clamp(12px,2vh,22px); padding:clamp(18px,2.5vh,30px) clamp(72px,8vw,112px); }
.focus-title-input { margin:0; line-height:1.3; }
.timer-presets { position:absolute; top:50%; left:clamp(12px,1.7vw,26px); display:flex; flex-direction:column; justify-content:center; gap:8px; transform:translateY(-50%); }
.timer-presets button { min-width:clamp(52px,4.7vw,72px); padding:7px 9px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(4,12,19,.2); color:rgba(255,255,255,.7); font:500 clamp(10px,.75vw,12px) "DM Sans",sans-serif; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.timer-presets button.active { border-color:rgba(255,236,177,.7); background:rgba(245,200,92,.2); color:#fff0b3; }
.timeline-row { grid-template-columns:122px 14px 1fr; }
.timeline-time { width:122px; padding:0; border:0; background:transparent; color:rgba(255,255,255,.58); color-scheme:dark; font:inherit; font-size:clamp(11px,.86vw,14px); outline:0; }
.timeline-input { width:100%; margin:0; padding:clamp(7px,1vh,11px) 12px; border:0; border-left:1px solid rgba(255,255,255,.14); background:transparent; color:rgba(255,255,255,.8); font:inherit; font-size:clamp(12px,.94vw,16px); outline:0; }
.timeline-time:focus,.timeline-input:focus { color:var(--ink); border-color:rgba(245,200,92,.65); }
.timer-ring { width:clamp(260px,29vw,420px); max-width:47vh; padding:0; overflow:visible; background:transparent; }
.timer-ring::before { inset:0; z-index:0; padding:8px; border:0; background:conic-gradient(var(--gold) var(--timer-progress),rgba(255,255,255,.17) var(--timer-progress) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.timer-ring time { z-index:1; letter-spacing:-.02em; }
.timer-actions { position:absolute; top:50%; right:clamp(15px,2vw,30px); display:flex; flex-direction:column; margin:0; transform:translateY(-50%); }
.timer-icon-button,.timer-reset { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid rgba(255,236,177,.62); border-radius:50%; background:linear-gradient(135deg,#fff0b3,#e8b850); color:#342914; cursor:pointer; box-shadow:0 8px 24px rgba(245,200,92,.18); }
.timer-icon-button svg { width:20px; height:20px; fill:currentColor; }
.timer-reset { font-size:25px; }
.future-screen { display:grid; place-content:center; text-align:center; background:rgba(1,7,12,.35); }.future-screen p { font:italic 58px "Playfair Display"; margin:0; }.future-screen span { margin-top:14px; color:var(--muted); }
.fullscreen-toggle { position:absolute; z-index:3; top:22px; right:25px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(5,13,20,.38); color:var(--ink); font-size:21px; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }.fullscreen-toggle:hover { background:rgba(5,13,20,.65); }
.wallpaper-shuffle { position:absolute; z-index:3; left:24px; bottom:20px; width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.20); border-radius:50%; background:rgba(5,13,20,.34); color:rgba(255,255,255,.76); cursor:pointer; opacity:.82; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:opacity .2s ease,background .2s ease,transform .2s ease; }.wallpaper-shuffle:hover,.wallpaper-shuffle:focus-visible { opacity:1; background:rgba(5,13,20,.65); transform:rotate(10deg); outline:none; }.wallpaper-shuffle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.screen-pagination { position:absolute; z-index:2; display:flex; bottom:22px; left:50%; transform:translateX(-50%); gap:9px; }.screen-pagination button { width:7px; height:7px; padding:0; border-radius:50%; background:rgba(255,255,255,.38); }.screen-pagination button.active { width:28px; border-radius:5px; background:var(--gold); }
@media (max-width:850px) { body { overflow:auto; }.dashboard { min-height:100svh; overflow:hidden; }.home-screen { grid-template-columns:1fr; padding:48px 26px 74px; overflow-y:auto; align-content:start; gap:38px; }.focus-copy { height:auto; min-height:500px; }.widgets { justify-self:stretch; max-width:none; }.flip-card { width:clamp(62px,18vw,116px); height:clamp(90px,25vw,164px); font-size:clamp(68px,20vw,118px); }.flip-separator { font-size:clamp(48px,13vw,84px); }.world-clocks { gap:16px; margin-top:38px; flex-wrap:wrap; }.world-clock { min-width:130px; }.weather-main { grid-template-columns:80px 1fr; }.weather-main dl { grid-column:1/-1; border-left:0; border-top:1px solid rgba(255,255,255,.2); padding:15px 0 0; grid-template-columns:repeat(4,1fr); }.weather-main dl div { justify-content:center; }.sun-icon { width:80px; height:80px; }.calendar-card { min-height:390px; }.focus-screen { height:auto; min-height:100svh; padding:42px 26px 74px; overflow-y:auto; }.focus-layout { grid-template-columns:1fr; padding:0; }.timer-card { min-height:520px; }.focus-side-panel { grid-template-rows:auto auto; }.focus-progress { margin:0; flex-direction:column; align-items:stretch; }.fullscreen-toggle { top:14px; right:16px; }.wallpaper-shuffle { left:16px; bottom:16px; } blockquote,.quote-line { display:none; } }