/* v0.46 r2: safe-area boundaries and compact-height layout. */
:root{
  --solar-left-inset:28px;
  --solar-left-edge:max(var(--solar-left-inset),calc(var(--solar-safe-left) + 6px));
  --solar-safe-top:env(safe-area-inset-top,0px);
  --solar-safe-bottom:env(safe-area-inset-bottom,0px);
  --solar-safe-left:env(safe-area-inset-left,0px);
  --solar-safe-right:env(safe-area-inset-right,0px);
}
@supports(height:100dvh){html{height:100dvh;min-height:100dvh}body{height:100dvh;min-height:100dvh}}

/* Safe areas are minimum boundaries, not extra padding. */
.masthead{top:max(23px,calc(var(--solar-safe-top) + 6px))}
.clock-face{top:max(56px,calc(var(--solar-safe-top) + 8px))}
body.zen .clock-face{top:max(56px,calc(var(--solar-safe-top) + 8px))}
.settings-panel{top:max(87px,calc(var(--solar-safe-top) + 10px))}
.timezone-readout{pointer-events:auto;cursor:pointer;padding:4px 6px;margin:-4px -6px;border-radius:6px;transition:color .18s ease,background .18s ease}
.timezone-readout:hover{color:var(--accent);background:rgba(233,200,141,.07);outline:none}
.timezone-readout:focus-visible{color:var(--accent);background:rgba(233,200,141,.07);outline:none}
.timezone-readout:focus-visible{box-shadow:0 0 0 1px rgba(233,200,141,.55)}
.date-line .timezone-reset{position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);width:13px;height:13px;margin:0;padding:0;letter-spacing:0}

@media(min-width:1800px){
  .clock-face{top:max(70px,calc(var(--solar-safe-top) + 8px))}
  body.zen .clock-face{top:max(70px,calc(var(--solar-safe-top) + 8px))}
}
@media(max-width:1050px){
  :root{--solar-left-inset:20px}
  .masthead{top:max(25px,calc(var(--solar-safe-top) + 6px))}
}
@media(max-width:680px){
  :root{--solar-left-inset:21px}
  .masthead{
    top:max(19px,calc(var(--solar-safe-top) + 6px));
    left:var(--solar-left-edge);
    right:max(17px,calc(var(--solar-safe-right) + 6px))
  }
  .clock-face{top:max(56px,calc(var(--solar-safe-top) + 8px))}
  body.zen .clock-face{top:max(56px,calc(var(--solar-safe-top) + 8px))}
  .settings-panel{top:max(61px,calc(var(--solar-safe-top) + 8px))}
  .footer{
    bottom:max(8px,var(--solar-safe-bottom));
    left:var(--solar-left-edge);
    right:max(20px,calc(var(--solar-safe-right) + 6px))
  }
  .playback{bottom:max(74px,calc(var(--solar-safe-bottom) + 42px))}
  #view-controls{right:max(5px,var(--solar-safe-left),var(--solar-safe-right))}
  .body-panel{left:max(16px,calc(var(--solar-safe-left) + 6px))}
}

/* Browser zoom around 150% and phone landscape both enter this compact-height path. */
@media(max-height:630px) and (min-width:681px){
  .masthead{
    top:max(8px,calc(var(--solar-safe-top) + 4px));
    left:var(--solar-left-edge);
    right:max(16px,calc(var(--solar-safe-right) + 6px))
  }
  .clock-face{top:max(17px,calc(var(--solar-safe-top) + 4px))}
  body.zen .clock-face{top:max(17px,calc(var(--solar-safe-top) + 4px))}
  .settings-panel{top:max(60px,calc(var(--solar-safe-top) + 8px))}
  .footer{
    bottom:max(8px,var(--solar-safe-bottom));
    left:var(--solar-left-edge);
    right:max(12px,calc(var(--solar-safe-right) + 6px))
  }
  .playback{bottom:max(42px,calc(var(--solar-safe-bottom) + 8px))}
  #view-controls{right:max(15px,calc(var(--solar-safe-left) + 4px),calc(var(--solar-safe-right) + 4px))}
}

/* Coarse-pointer tablets keep the timeline and planet list as one bottom
   group. Reduce only the free space below that group; retain the existing
   distance between both controls and every device safe-area boundary. */
@media(any-pointer:coarse) and (min-width:681px) and (min-height:631px) and (max-width:1280px){
  .footer{bottom:max(12px,var(--solar-safe-bottom))}
  .playback{bottom:calc(max(12px,var(--solar-safe-bottom)) + 41px)}
}

/* Planet and constellation cards share #body-panel. In coarse-pointer
   landscape layouts, keep that shared card clear of the notch and the bottom
   playback/navigation group. The global -11px optical offset is intended for
   desktop pointers and otherwise cancels the compact left inset. */
@media(any-pointer:coarse) and (orientation:landscape){
  .body-panel{
    left:max(18px,calc(var(--solar-safe-left) + 6px));
    margin-left:0;
    max-height:calc(100dvh - var(--body-panel-top,87px) - max(72px,calc(var(--solar-safe-bottom) + 60px)))
  }
}
@media(any-pointer:coarse) and (orientation:landscape) and (max-height:630px){
  .body-panel{
    max-height:calc(100dvh - var(--body-panel-top,70px) - max(120px,calc(var(--solar-safe-bottom) + 88px)))
  }
}

@media(max-width:350px){
  :root{--solar-left-inset:12px}
  .masthead{align-items:flex-start}
  .brand p{position:absolute;top:calc(100% + 8px);left:0;margin:0;transform:none}
}

/* Orbit brightness, star density and clock size are one continuous display group. */
#star-density-control,#clock-size-control{border-top:0;margin-top:0;padding-top:5px}

/* Keep simulation status anchored under the date at every clock scale. */
.clock-face .scene-status{position:static;left:auto;transform:none;justify-content:center;margin-top:12px}

/* One phone-layout flag is shared by CSS and the sky renderer.
   Keep the approved top boundaries and the home-indicator safety inset. */
:root{--solar-layout-revision:r9}
html.solar-phone-layout .edge-shade{display:none}
html.solar-phone-layout .footer{bottom:max(4px,var(--solar-safe-bottom))}
html.solar-phone-layout .planet-nav{padding-top:0;padding-bottom:0}
html.solar-phone-layout .playback{bottom:calc(max(4px,var(--solar-safe-bottom)) + 30px)}
.solar-layout-diagnostics{
  width:min(430px,calc(100vw - 24px))}
.solar-layout-diagnostics pre{font:11px/1.45 monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}


/* v0.46 r5: one visible viewport for standalone loading, canvases and main UI.
   display:contents keeps the browser-tab layout exactly as it was. No translate
   or containment here: native top-layer dialogs keep viewport coordinates. */
#solar-viewport{display:contents}
html.solar-standalone{height:100%;min-height:0;overscroll-behavior:none}
html.solar-standalone body{height:100%;min-height:0;overscroll-behavior:none}
html.solar-standalone #solar-viewport{
  display:block;position:fixed;
  left:var(--solar-viewport-left,0px);top:var(--solar-viewport-top,0px);
  width:var(--solar-viewport-width,100%);height:var(--solar-viewport-height,100%);
  overflow:hidden;
}
html.solar-standalone #starfield{position:absolute}
html.solar-standalone #planet-layer{position:absolute}
html.solar-standalone #universe{position:absolute}
html.solar-standalone .edge-shade{position:absolute}
html.solar-standalone .loading{position:absolute}
html.solar-standalone .fatal-error{position:absolute}
html.solar-standalone .view-controls{max-height:calc(var(--solar-viewport-height,100dvh) - 24px)}
html.solar-standalone .modal{
  top:calc(var(--solar-viewport-top,0px) + var(--solar-viewport-height,100dvh)/2);
  left:calc(var(--solar-viewport-left,0px) + var(--solar-viewport-width,100vw)/2);
}

/* Timer panel shares the settings card language but owns its countdown controls. */
.timer-panel{right:40px;top:max(87px,calc(var(--solar-safe-top) + 10px));z-index:9;width:292px;padding:0;max-height:calc(100dvh - 100px);overflow:hidden}
.timer-panel.card-surface{display:flex;flex-direction:column}
.timer-panel>.panel-heading{flex:none;margin:0;padding:23px 23px 2px}
.timer-scroll{padding:0 23px 23px}
.setting-row input[type=checkbox]:disabled{cursor:not-allowed;opacity:.35}
.timer-section{padding:2px 0 15px}
.timer-section+.timer-section{padding-top:1.5px;border-top:1px solid var(--line)}
.timer-duration{display:flex;align-items:center;gap:8px;margin:3px 0 8px}
.timer-duration label{display:flex;align-items:center;gap:5px;color:#8592a2;font-size:10px}
.timer-duration input{box-sizing:border-box;width:54px;height:34px;padding:5px 7px;border:1px solid rgba(171,188,212,.16);border-radius:7px;outline:0;background:rgba(3,7,13,.42);color:#e1d3b8;font:12px/1 inherit;text-align:center;font-variant-numeric:tabular-nums}
.timer-duration input:focus{border-color:rgba(232,199,131,.46);box-shadow:0 0 0 2px rgba(232,199,131,.06)}
.timer-duration input:disabled{opacity:.34}
.timer-duration input::-webkit-inner-spin-button{opacity:.35}
.timer-target{display:block;min-height:18px;color:#778596;font-size:10px;line-height:1.6;font-variant-numeric:tabular-nums}
.timer-section.is-active .timer-target{color:#cbb486}
.timer-sound-options{display:grid;gap:3px;margin:1px 0 0;padding:0;border:0}
.timer-sound-options legend{margin:0 0 5px;color:#748293;font-size:9px}
.timer-radio-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;min-height:31px}
.timer-radio{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:7px;min-width:0;color:#9ba7b5;font-size:10px;cursor:pointer}
.timer-radio>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.timer-radio-mark{position:relative;width:14px;height:14px;border:1px solid rgba(171,188,212,.3);border-radius:50%;background:rgba(3,7,13,.36);transition:border-color .18s,box-shadow .18s}
.timer-radio-mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.45);transition:opacity .18s,transform .18s}
.timer-radio>input:checked+.timer-radio-mark{border-color:rgba(232,199,141,.7);box-shadow:0 0 9px rgba(232,199,141,.12)}
.timer-radio>input:checked+.timer-radio-mark::after{opacity:1;transform:scale(1)}
.timer-radio:focus-within .timer-radio-mark{outline:1px solid rgba(232,199,141,.62);outline-offset:3px}
.timer-radio-row-custom{grid-template-columns:max-content max-content minmax(23px,1fr)}
.timer-radio-row-custom>#alarm-sound-choose{align-self:center;padding:5px 2px;background:transparent;color:#758292;font-size:9px}
.timer-radio-row-custom>#alarm-sound-choose:hover{color:#d8c49e}
.timer-radio-row-custom>#alarm-preview-custom{justify-self:end}
.timer-sound-preview{position:relative;display:grid;place-items:center;width:23px;height:23px;padding:0;border:1px solid rgba(171,188,212,.17);border-radius:7px;background:rgba(3,7,13,.26);color:#9ca9b8;transition:border-color .18s,color .18s,background .18s,box-shadow .18s}
.timer-sound-preview>span{display:block;width:0;height:0;margin-left:1px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid currentColor}
.timer-sound-preview[aria-pressed=true]{border-color:rgba(232,199,141,.44);background:rgba(188,154,91,.1);color:#dfc582;box-shadow:0 0 9px rgba(223,197,130,.08)}
.timer-sound-preview[aria-pressed=true]>span{width:7px;height:7px;margin-left:0;border:0;border-radius:1px;background:currentColor}
.timer-sound-preview:disabled{cursor:not-allowed;opacity:.28}
.timer-sound-preview:not(:disabled):hover,.timer-sound-preview:not(:disabled):focus-visible{border-color:rgba(232,199,141,.48);color:#e4ca8d;outline:0}
.region-navigation{display:grid;grid-template-columns:23px minmax(0,1fr) 23px;align-items:center;gap:8px;min-height:42px;margin-top:10px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:#ffffff04}
.region-navigation[hidden]{display:none}
.region-navigation:not(.country-navigation){grid-template-columns:minmax(0,1fr)}
.region-view-button{min-width:0;padding:6px 3px;overflow:hidden;background:transparent;color:var(--accent);font-size:11px;line-height:1.35;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.region-view-button:not(:disabled):hover,.region-view-button:not(:disabled):focus-visible{color:#f0d7a5;outline:0}
.region-view-button:disabled,.region-nav-button:disabled{cursor:not-allowed;opacity:.28}
.region-nav-button{width:23px;height:23px}
.region-previous>span{transform:rotate(180deg)}
.timer-sound-name{display:block;width:calc(100% - 23px);max-width:100%;margin:2px 0 0 23px;padding:0;border:0;background:transparent;text-align:left;overflow:hidden;color:#697788;font-size:10px;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.timer-sound-name:hover,.timer-sound-name:focus-visible{color:#d8c49e}
.timer-sound-credit{display:flex;align-items:center;gap:4px;margin:-1px 0 2px 23px;color:#596778;font-size:10px;letter-spacing:.2px}
.timer-sound-credit a{color:#788697;text-decoration:none;transition:color .18s ease}
.timer-sound-credit a:hover,.timer-sound-credit a:focus-visible{color:#d8c49e;outline:0}
.timer-helper-row{min-height:27px;margin-top:3.5px}
.timer-helper-label{display:flex;align-items:center;gap:7px;min-width:0}
.timer-helper-label label{min-width:0}
.timer-helper-remove{align-self:center;padding:5px 2px;border:0;background:transparent;color:#758292;font:inherit;font-size:10px;letter-spacing:0;cursor:pointer;transition:color .18s ease,opacity .18s ease}
.timer-helper-remove:not(:disabled):hover,.timer-helper-remove:not(:disabled):focus-visible{color:#d8c49e;outline:0}
.timer-helper-remove:disabled{cursor:not-allowed;opacity:.28}
.timer-support-note{margin:3px 0 9px;color:#6f7d8d;font-size:10px;line-height:1.55;white-space:pre-line;word-break:keep-all}
.timer-helper-progress{display:grid;gap:6px;margin-top:10px;color:#6f7d8d;font-size:9px}
.timer-helper-progress-heading{display:flex;align-items:center;justify-content:space-between;color:#8592a2;font-size:10px}
.timer-helper-progress-heading output{color:#cbb486;font-variant-numeric:tabular-nums}
.timer-helper-track{height:2px;border-radius:999px;background:#34404e;overflow:hidden}
.timer-helper-track i{display:block;width:var(--helper-progress,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#a88d58,#e5c985);box-shadow:0 0 7px rgba(225,194,130,.34);transition:width .35s ease}
.timer-shutdown.is-unavailable{opacity:.58}
.timer-shutdown.is-unavailable .timer-helper-progress{opacity:.45}
.alarm-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0}
.alarm-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.alarm-actions #alarm-stop{color:var(--accent);border-color:#bd9a5b66;background:#bd9a5b15}
.shutdown-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;text-align:center;z-index:100}
.shutdown-dialog strong{display:block;margin:2px 0 8px;color:var(--accent);font-size:38px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.shutdown-helper-download-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;width:min(390px,calc(100vw - 24px));padding:19px;z-index:101;word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
.shutdown-helper-download-dialog p{margin-bottom:11px}
.shutdown-helper-safety-list{display:grid;gap:10px;margin:0 0 11px;padding-left:17px;color:#9ba8b8;font-size:10px;line-height:1.55}
.shutdown-helper-safety-list li::marker{color:#cfb06f}
.shutdown-helper-source{display:inline-block;margin-bottom:10px;color:#cfb06f;font-size:11px;text-decoration:none;border-bottom:1px solid rgba(207,176,111,.38)}
.shutdown-helper-checksum{display:grid;gap:4px;padding:8px 9px;border:1px solid rgba(116,135,159,.2);border-radius:7px;background:rgba(3,8,14,.25)}
.shutdown-helper-checksum span{color:#8492a3;font-size:10px;letter-spacing:.12em}
.shutdown-helper-checksum code{overflow-wrap:anywhere;color:#aeb9c7;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.45;user-select:text}
.shutdown-helper-download-question{color:#dfd1b6!important;text-align:center}
.shutdown-helper-download-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.shutdown-helper-download-actions #shutdown-helper-download-yes{color:var(--accent);border-color:#bd9a5b66;background:#bd9a5b15}
.shutdown-helper-install-dialog,.shutdown-helper-remove-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;width:min(360px,calc(100vw - 24px));padding:19px;text-align:center;z-index:102}
.shutdown-helper-install-dialog p,.shutdown-helper-remove-dialog p{margin-bottom:11px}
.shutdown-helper-install-question,.shutdown-helper-remove-question{color:#dfd1b6!important}
.shutdown-helper-install-actions,.shutdown-helper-remove-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.shutdown-helper-install-actions #shutdown-helper-install-yes{color:var(--accent);border-color:#bd9a5b66;background:#bd9a5b15}
.shutdown-helper-remove-actions #shutdown-helper-remove-yes{color:#e1bca7;border-color:rgba(192,121,88,.38);background:rgba(192,121,88,.08)}
.shutdown-actions{grid-template-columns:1fr}
.shutdown-actions #shutdown-cancel{color:var(--accent);border-color:#bd9a5b66;background:#bd9a5b15}
.icon-button.timer-active{color:var(--accent);background:rgba(165,183,204,.09)}
@media(max-width:1050px){.timer-panel{right:27px}}
@media(max-width:680px){.timer-panel{right:16px;top:max(61px,calc(var(--solar-safe-top) + 8px));width:264px}.timer-panel>.panel-heading{padding:21px 21px 2px}.timer-scroll{padding:0 21px 21px}}
@media(max-height:630px) and (min-width:681px){.timer-panel{top:max(60px,calc(var(--solar-safe-top) + 8px))}}
@media(max-width:420px){.brand{gap:5px}.brand svg{width:25.1px;height:25.1px}.brand h1{font-size:12px;letter-spacing:1.3px}.top-actions .icon-button{width:clamp(27px,8vw,30px);height:31px}.top-actions .language-toggle{width:clamp(30px,9.5vw,34px)}.top-actions svg{width:18px;height:18px}}
html.solar-standalone :is(.alarm-dialog,.shutdown-dialog){
  top:calc(var(--solar-viewport-top,0px) + var(--solar-viewport-height,100dvh)/2);
  left:calc(var(--solar-viewport-left,0px) + var(--solar-viewport-width,100vw)/2);
}
html.solar-standalone #reset-defaults-dialog{
  top:calc(var(--solar-viewport-top,0px) + var(--solar-viewport-height,100dvh)/2);
  left:calc(var(--solar-viewport-left,0px) + var(--solar-viewport-width,100vw)/2);
}

/* Reserve space for the music title in portrait; keep landscape framing. */
@media(max-width:680px) and (orientation:portrait){
  .clock-face,body.zen .clock-face{top:max(88px,calc(var(--solar-safe-top) + 58px))}
}
.update-notice{position:absolute;left:0;top:calc(100% + 1px);display:inline-flex;align-items:center;min-height:18px;padding:0;border:0;background:transparent;color:#657281;font:inherit;font-size:9px;letter-spacing:.45px;text-decoration:none;cursor:pointer;pointer-events:auto;z-index:2;transition:color .2s ease,opacity .2s ease}
.visitor-count-copy{display:inline-flex;align-items:flex-start;flex-direction:column;gap:1px;white-space:nowrap}.visitor-count-line{display:inline-flex;align-items:center;gap:5px;line-height:1.25}.visitor-count-copy .tiny-dot{width:3px;height:3px;background:#657281}.visitor-count-today{padding-left:0}.update-notice[data-mode="update"]{color:var(--gold,#d7bd85)}
.update-notice:hover,.update-notice:focus-visible{color:var(--gold,#d7bd85);outline-offset:3px}.update-notice[data-mode="update"]:hover,.update-notice[data-mode="update"]:focus-visible{color:#f0d49b}
@media(any-pointer:coarse){.update-shortcut{display:none}}

/* Keep the compact phone header dense while preserving the desktop lockup. */
@media(max-width:680px),(max-height:630px) and (min-width:681px){
  .brand-copy{position:relative;grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .brand h1{width:max-content;min-width:0;line-height:1;text-align-last:auto}
  .brand p{position:static;margin:0;transform:none;line-height:1.3}
  .update-notice{left:0;top:100%}
}
@media(max-width:680px){
  .masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:12px}
  .brand{display:grid;grid-template-columns:39px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;gap:0 8px;min-width:0;transform:none}
  .brand-copy{display:contents}
  .brand svg{grid-column:1;grid-row:1;width:39px;height:36px;transform:none}
  .brand h1{grid-column:2;grid-row:1;align-self:center;font-size:17px;letter-spacing:1.8px}
  .brand p{grid-column:1/-1;grid-row:2;margin:2px 0 0;font-size:8px;letter-spacing:1.55px;line-height:1.3}
  .update-notice{position:relative;grid-column:1/-1;grid-row:3;left:auto;top:auto;margin-top:4px}
  .top-actions{align-self:start;gap:2px}
  .top-actions .icon-button{width:34px;height:36px}
  .top-actions .language-toggle{width:38px}
  .top-actions svg{width:20px;height:20px}
}
@media(max-height:630px) and (min-width:681px){
  .brand{grid-template-rows:auto auto auto;align-items:center}
  .brand-copy{display:contents}
  .brand svg{grid-column:1;grid-row:1}
  .brand h1{grid-column:2;grid-row:1;align-self:center}
  .brand p{grid-column:1/-1;grid-row:2;margin:4px 0 0}
  .update-notice{position:relative;grid-column:1/-1;grid-row:3;left:auto;top:auto;margin-top:3px}
}
@media(max-width:440px){
  .masthead{column-gap:8px}
  .brand{grid-template-columns:34px minmax(0,1fr);gap:0 7px}
  .brand svg{width:34px;height:33px}
  .brand h1{font-size:16px;letter-spacing:1.6px}
  .brand p{white-space:nowrap}
  .brand-tagline-head,.brand-tagline-tail{display:inline;white-space:nowrap}
  .top-actions{gap:0}
  .top-actions .icon-button{width:29px;height:33px}
  .top-actions .language-toggle{width:34px}
  .top-actions svg{width:18px;height:18px}
}
@media(max-width:680px) and (orientation:portrait){
  .masthead:has(#music-toggle[aria-pressed="true"]) .brand p{white-space:normal}
  .masthead:has(#music-toggle[aria-pressed="true"]) .brand-tagline-head,
  .masthead:has(#music-toggle[aria-pressed="true"]) .brand-tagline-tail{display:block;white-space:nowrap}
}
@media(max-width:350px){
  .masthead{left:var(--solar-left-edge);right:max(8px,calc(var(--solar-safe-right) + 6px));column-gap:6px}
  .brand{grid-template-columns:30px minmax(0,1fr);gap:0 5px}
  .brand svg{width:30px;height:30px}
  .brand h1{font-size:13.5px;letter-spacing:1.2px}
  .brand p{font-size:7px;letter-spacing:1.15px}
  .top-actions .icon-button{width:27px;height:31px}
  .top-actions .language-toggle{width:30px}
}
@media(max-width:340px){
  .brand p{letter-spacing:1.1px}
}

@media(max-width:680px){
  body:has(#update-notice:not([hidden])) .clock-face{top:max(118px,calc(var(--solar-safe-top) + 88px))}
}

/* Desktop and tablet landscape: keep the whole clock block below the header guide. */
@media(min-width:681px) and (min-height:631px) and (orientation:landscape){
  .clock-face,body.zen .clock-face{top:max(38px,calc(var(--solar-safe-top) + 21px))}
}