/* Welcome through Kaleidoscope HERE. No Chester or here-scoped dependency. */
html,body { height: 100%; }
body { background: var(--ground); color: var(--ink); overflow-x: hidden; min-height: 100%; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); font-feature-settings: "ss01","cv11"; -webkit-font-smoothing: antialiased; position: relative; display: flex; align-items: center; justify-content: center; padding: max(var(--s6),env(safe-area-inset-top)) var(--s5) max(var(--s6),env(safe-area-inset-bottom)); }
.aurora,.grain { position: fixed; inset: -20%; z-index: -2; pointer-events: none; }
.aurora { background: radial-gradient(38% 44% at 76% 8%, color-mix(in srgb, var(--core) 5%, transparent), transparent 62%),
  radial-gradient(42% 46% at 12% 96%, color-mix(in srgb, var(--core) 4.5%, transparent), transparent 60%),
  radial-gradient(34% 40% at 90% 92%, color-mix(in srgb, var(--core) 3.5%, transparent), transparent 62%); animation: drift calc(var(--d-step) * 1300) var(--ease-light) infinite alternate; }
.grain { z-index: -1; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% 30%, transparent 55%, var(--tint) 100%); }
@keyframes drift {
from { transform: translate3d(-2%,-1%,0) scale(1.02); }
to { transform: translate3d(2%,2%,0) scale(1.08); }
}
.wrap { width: 100%; max-width: 460px; text-align: center; }
.stage { position: relative; width: 112px; height: 112px; margin: 0 auto var(--s5); animation: orbIn calc(var(--d-step) * 55) var(--spring) both; border-radius: var(--r-pill); overflow: hidden; background: var(--surface); border: 1px solid var(--line); outline: 6px solid var(--raised); outline-offset: 0; }
@keyframes orbIn {
from { opacity: 0; transform: scale(.6); }
to { opacity: 1; transform: scale(1); }
}
.orb { position: absolute; inset: var(--s6); border-radius: var(--r-pill); z-index: 2; background: radial-gradient(circle at 36% 30%, var(--core) 0%, var(--ok) 26%, var(--glass) 58%, var(--c1) 82%, var(--c5) 100%); box-shadow: var(--shadow); }
.orb::after { content: ""; position: absolute; top: 16%; left: 22%; width: 34%; height: 26%; border-radius: var(--r-pill); background: radial-gradient(circle,color-mix(in srgb, var(--core) 90%, transparent),transparent 70%); filter: blur(1px); animation: spec var(--d-turn) var(--ease-light) infinite; }
@keyframes spec {
0%,100% { transform: translate(0,0); opacity: .9; }
50% { transform: translate(3px,4px); opacity: .6; }
}
.igni-logo { position: absolute; inset: 0; z-index: 2; margin: auto; width: var(--s8); height: auto; object-fit: contain; animation: orbIn calc(var(--d-step) * 55) var(--spring) both; filter: var(--core-glow); }
.aura { position: absolute; inset: var(--s5); border-radius: var(--r-pill); z-index: 1; filter: blur(var(--s4)); opacity: .3; background: radial-gradient(circle,color-mix(in srgb, var(--core) 6%, transparent),color-mix(in srgb, var(--core) 6%, transparent) 45%,transparent 70%); animation: breathe calc(var(--d-step) * 230) var(--ease-light) infinite; }
@keyframes breathe {
0%,100% { transform: scale(1); opacity: .75; }
50% { transform: scale(1.28); opacity: 1; }
}
.ring { position: absolute; inset: var(--s6); border-radius: var(--r-pill); border: 1.5px solid var(--line-2); z-index: 0; animation: ring calc(var(--d-step) * 210) var(--ease-out) infinite; }
.ring:nth-child(2) { animation-delay: var(--d-fade); }
.ring:nth-child(3) { animation-delay: calc(var(--d-step) * 140); }
@keyframes ring {
0% { transform: scale(.7); opacity: .55; }
70% { opacity: 0; }
100% { transform: scale(2.5); opacity: 0; }
}
.stage.locked .ring { animation-play-state: paused; opacity: 0; }
.stage.locked .aura { background: radial-gradient(circle,color-mix(in srgb, var(--ok) 25%, transparent),transparent 70%); }
h1 { font: 400 clamp(var(--t-d1),7vw,var(--t-d2))/var(--lh-d2) var(--f-voice); letter-spacing: -.022em; margin-bottom: var(--s3); }
h1 em { font-style: normal; color: var(--ink); }
.reveal { display: block; overflow: hidden; }
.reveal>span { display: block; transform: translateY(112%); animation: up calc(var(--d-step) * 47.5) var(--ease-out) var(--d-dur) both; }
@keyframes up {
to { transform: translateY(0); }
}
.lede { font-family: var(--f-ui); font-size: var(--t-m); line-height: var(--lh-m); color: var(--ink-2); color: var(--ink-2); font-size: var(--t-m); letter-spacing: .01em; max-width: 32ch; margin: 0 auto var(--s5); opacity: 0; animation: fade calc(var(--d-step) * 40) var(--ease-out) calc(var(--d-step) * 25) both; max-width: 23ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
#body { display: flex; flex-direction: column; gap: var(--s4); }
.orient { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); }
.cell { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); }
.cell .k { margin-bottom: var(--s2); }
.cell .v { font-size: var(--t-m); font-weight: 600; letter-spacing: -.01em; line-height: var(--lh-m); }
.btn { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; font-size: var(--t-s); font-weight: 500; letter-spacing: -.01em; text-decoration: none; padding: var(--s3); border-radius: var(--r1); border: 1px solid var(--line); margin-top: var(--s3); cursor: pointer; transition: transform var(--d-dur) var(--spring),filter calc(var(--d-step) * 10),background calc(var(--d-step) * 10); -webkit-tap-highlight-color: transparent; line-height: var(--lh-s); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.975); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: var(--s1); }
.btn.p { background: var(--ink); color: var(--ground); border-color: transparent; box-shadow: var(--shadow); }
.btn.p:hover { background: var(--ink-2); }
.btn.s { background: var(--surface); color: var(--ink); }
.btn.s:hover { background: var(--raised); }
.dot { width: var(--s3); height: var(--s3); border-radius: var(--r-pill); flex: none; margin-top: var(--s1); box-shadow: var(--shadow); }
.dot.high { background: var(--ok); color: var(--ok); }
.dot.mid { background: var(--warn); color: var(--warn); }
.dot.low { background: var(--ink-2); color: var(--ink-2); }
.foot { color: var(--ink-2); font-size: var(--t-xs); letter-spacing: .02em; margin-top: var(--s6); opacity: 0; animation: fade calc(var(--d-step) * 45) var(--ease-out) calc(var(--d-step) * 40) both; line-height: var(--lh-xs); }
.foot .legal { display: block; margin-top: var(--s2); color: var(--ink-2); }
.foot .legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-2); transition: color calc(var(--d-step) * 10); }
.foot .legal a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.hwin { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--surface); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); padding: max(var(--s3),env(safe-area-inset-top)) var(--s3) max(var(--s3),env(safe-area-inset-bottom)); animation: sheetin calc(var(--d-step) * 16) var(--spring) both; }
@keyframes sheetin {
from { opacity: 0; transform: translateY(4%); }
to { opacity: 1; transform: none; }
}
.hwin-bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s1) var(--s3); flex-wrap: nowrap; overflow-x: auto; }
.hwin-tab { flex: none; position: relative; display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-s); font-weight: 600; color: var(--ink-2); background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--s2) var(--s3); cursor: pointer; transition: transform var(--d-dur) var(--spring); line-height: var(--lh-s); }
.hwin-tab:active { transform: scale(.96); }
.hwin-tab.live { color: var(--on-pick); background: var(--pick); border-color: transparent; }
.hwin-tab .tg { font-size: var(--t-s); line-height: var(--lh-s); }
.hwin-tab .tx { margin-left: var(--s1); opacity: .5; font-weight: 600; padding: 0 1px; }
.hwin-tab .tx:hover { opacity: 1; }
.hwin-tab.loading::after { content: ''; position: absolute; left: var(--s4); right: var(--s4); bottom: 2px; height: 2px; border-radius: var(--r0); background: linear-gradient(90deg,transparent,var(--ink),transparent); animation: tabload calc(var(--d-step) * 55) var(--ease-out) infinite; }
@keyframes tabload {
from { transform: translateX(-55%); }
to { transform: translateX(55%); }
}
.hwin-act { flex: none; margin-left: auto; display: flex; gap: var(--s2); }
.hwin-act a,.hwin-act button { font-size: var(--t-s); font-weight: 600; color: var(--ink); background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--s2) var(--s3); text-decoration: none; cursor: pointer; line-height: var(--lh-s); }
.hwin-frame { flex: 1; min-height: 0; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--sunk); }
.hwin-frame iframe { width: 100%; height: 100%; border: 0; display: none; background: var(--sunk); }
.hwin-frame iframe.live { display: block; animation: doorin calc(var(--d-step) * 12) var(--ease-out) both; }
@keyframes doorin {
from { opacity: .35; transform: scale(.992); }
to { opacity: 1; transform: none; }
}
.hwin.away { animation: sheetout calc(var(--d-step) * 8.5) var(--ease-out) both; }
@keyframes sheetout {
to { opacity: 0; transform: translateY(3%); }
}
.hdockchip { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); font-weight: 500; color: var(--ink); background: var(--tint-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: var(--s1) var(--s3); margin: var(--s1) var(--s2) 0 0; cursor: pointer; transition: transform var(--d-dur) var(--spring); line-height: var(--lh-xs); }
.hdockchip:active { transform: scale(.94); }
.hdockchip .dg { font-size: var(--t-s); line-height: var(--lh-s); }
.hdockchip .dot { width: var(--s1); height: var(--s1); border-radius: var(--r-pill); background: var(--ink); }
.hdockchip.pulse { animation: chippulse calc(var(--d-step) * 25) var(--spring); }
@keyframes chippulse {
50% { transform: scale(1.07); }
}
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
.applaunch { margin-bottom: var(--s4); }
.approw { display: grid; grid-template-columns: repeat(auto-fill,minmax(var(--s9),1fr)); gap: var(--s2); }
.apptile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: var(--s3) var(--s3); border-radius: var(--r2); border: 1px solid var(--line); background: var(--tint); cursor: pointer; transition: transform var(--d-dur) var(--spring),background calc(var(--d-step) * 10),border-color calc(var(--d-step) * 10); -webkit-tap-highlight-color: transparent; }
.apptile:hover { transform: translateY(-2px); background: var(--tint-2); border-color: var(--line-2); }
.apptile:active { transform: scale(.97); }
.apptile .ai { font-size: var(--t-l); line-height: var(--lh-l); color: var(--ink); margin-bottom: var(--s2); }
.apptile img.am-mark { width: var(--t-l); height: var(--t-l); object-fit: contain; display: block; }
.apptile .an { font-size: var(--t-s); font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: var(--lh-s); }
.apptile .ab { font-size: var(--t-xs); color: var(--ink-2); line-height: var(--lh-xs); }
.grain { display: none; }
.aurora { opacity: .5; background: radial-gradient(42% 46% at 78% 6%,color-mix(in srgb, var(--core) 5%, transparent),transparent 62%),radial-gradient(40% 44% at 10% 96%,color-mix(in srgb, var(--core) 4.5%, transparent),transparent 60%),radial-gradient(30% 36% at 90% 90%,color-mix(in srgb, var(--core) 3.5%, transparent),transparent 62%); }
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { animation: none!important; transition: none!important; }
.reveal>span { transform: none; }
.lede,.card,.foot,.row { opacity: 1; transform: none; }
}
#tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; align-items: stretch; background: var(--ground); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); border-top: .5px solid var(--line); padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); }
#tabbar.on { display: flex; }
#tabbar.kbd { display: none; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: var(--ink-2); font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui); padding: var(--s2); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.tab[aria-current="page"] { color: var(--ink,var(--ink)); }
.tab .tg { font-size: var(--t-l); line-height: var(--lh-l); }
#panel-world { position: fixed; inset: 0; z-index: 40; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--ground); padding: max(var(--s6),env(safe-area-inset-top)) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom)); }
body.shell { padding-bottom: calc(var(--s8) + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion:reduce) {
.wavi.igniv::after { animation: none; }
}
.here-graph { position: absolute; inset: 0; margin: auto; width: 220px; height: 220px; z-index: 1; opacity: 1; pointer-events: none; }
@media (max-width:520px) {
.here-graph { width: 170px; height: 170px; }
}
h1 em { font-family: var(--f-voice); font-style: italic; font-weight: 500; letter-spacing: 0; }
h1 { font-family: var(--f-ui); font-weight: 500; letter-spacing: -.006em; }

/* Needed h-* foundation, carried locally from the desk migration. */
.h-scope { color: var(--ink); font: 400 var(--t-m)/var(--lh-m) var(--f-ui); }
.h-scope .cbtn { margin: 0; }
@keyframes h-mat {
from { opacity: 0; transform: translateY(var(--s1)) scale(.985); }
to { opacity: 1; transform: none; }
}
@keyframes h-ring {
0% { transform: scale(.62); opacity: .5; }
70% { opacity: 0; }
100% { transform: scale(1.5); opacity: 0; }
}
@keyframes h-hat {
0%, 100% { transform: perspective(60px) rotateX(58deg) scale(1); opacity: .82; }
50% { transform: perspective(60px) rotateX(58deg) scale(1.07); opacity: 1; }
}
@keyframes h-orb-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.h-card { position: relative; min-width: 0; border: 0; border-radius: var(--r2); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); animation: h-mat var(--d-rise) var(--ease) both; container-type: inline-size; container-name: hcard; }
.h-k { font: 600 var(--t-xs)/var(--lh-xs) var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--ink-2); white-space: nowrap; }
.h-meta { font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono); color: var(--ink-2); letter-spacing: .012em; font-variant-numeric: tabular-nums; }
.h-say { font: 400 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--ink-2); max-width: 46em; }
.h-title { font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--ink); }
.h-display { font: 500 var(--t-d1)/var(--lh-d1) var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink); }
.h-display.lit { color: var(--ink); }
.h-btn { appearance: none; -webkit-tap-highlight-color: transparent; min-height: var(--h-xs); height: auto; padding: 0 var(--s2); border-radius: var(--r0); border: 0; background: var(--tint); box-shadow: var(--shadow); color: var(--ink); font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); cursor: pointer; flex: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); max-width: 100%; transition: background var(--d-micro) var(--ease),
    transform var(--d-press) var(--spring),
    box-shadow var(--d-micro) var(--ease),
    opacity var(--d-micro) var(--ease); }
.h-btn.pri { background: var(--cta); color: var(--cta-ink); box-shadow: var(--shadow); font-weight: 600; }
.h-btn[disabled], .h-btn[aria-disabled="true"] { opacity: 1; color: var(--ink-2); cursor: not-allowed; pointer-events: none; }
.h-seg { display: inline-flex; align-items: stretch; flex-wrap: wrap; max-width: 100%; border: 0; border-radius: var(--r0); overflow: hidden; box-shadow: var(--shadow); flex: none; }
.h-seg .h-btn { border-radius: 0; box-shadow: none; background: var(--tint); }
.h-seg .h-btn + .h-btn { box-shadow: var(--shadow); }
.h-seg .h-btn.pri, .h-row .h-btn.pri { background: var(--light); color: var(--on-ink); font-weight: 600; }
.h-seg .h-btn + .h-btn.pri { box-shadow: var(--shadow); }
.h-seg .h-btn:focus-visible { position: relative; z-index: 1; }
.h-btn:focus-visible, .h-sum:focus-visible, .h-menu-item:focus-visible, .h-ws:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.h-btn.pri:focus-visible, .h-seg .h-btn.pri:focus-visible { outline-color: var(--on-ink); }
.h-chip { display: inline-flex; align-items: center; gap: var(--s1); max-width: 100%; font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono); color: var(--ink); border: 0; border-radius: var(--r0); padding: var(--s1) var(--s2); font-variant-numeric: tabular-nums; background: var(--tint); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.h-chip .lb { color: var(--ink-2); font-size: var(--t-xs); line-height: var(--lh-xs); letter-spacing: 0; text-transform: none; }
.h-chip.ok { color: var(--ok); background: var(--ok-soft); box-shadow: var(--shadow); }
kbd.h-key { font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono); color: var(--ink-2); cursor: default; border: 0; border-radius: var(--r0); padding: var(--s1) var(--s2); letter-spacing: .012em; background: var(--tint); box-shadow: var(--shadow); }
.h-pulse { position: relative; width: var(--s2); height: var(--s2); flex: none; display: inline-block; }
.h-pulse .dot { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--ok); }
.h-pulse .rng { position: absolute; inset: 0; border-radius: var(--r-pill); border: 1px solid var(--ok); animation: h-ring var(--d-fade) var(--ease) infinite; }
.h-band { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); padding: var(--s5) var(--s4) var(--s2); }
.h-rows { display: grid; position: relative; min-width: 0; }
.h-rows::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); }
.h-row { position: relative; display: grid; grid-template-columns: var(--s4) minmax(0, 1fr) var(--s8) var(--s8) max-content auto; align-items: center; gap: 0 var(--s3); padding: var(--s2) var(--s4); min-height: var(--s7); min-width: 0; animation: h-mat var(--d-rise) var(--ease) both; transition: background var(--d-micro) var(--ease); }
.h-row + .h-row::before { content: ""; position: absolute; top: 0; left: var(--s4); right: var(--s4); height: 1px; background: var(--line); }
.h-rows .h-row:nth-child(2) { animation-delay: calc(var(--d-step) * 2); }
.h-rows .h-row:nth-child(3) { animation-delay: calc(var(--d-step) * 4); }
.h-row.on { background: var(--ok-soft); }
.h-row.on::after { content: ""; position: absolute; left: 0; top: var(--s2); bottom: var(--s2); width: 2px; border-radius: var(--r-pill); background: var(--ok); }
.h-g { grid-column: 1; display: flex; align-items: center; }
.h-g .caret { font-style: normal; color: var(--ink-2); font-size: var(--t-xs); line-height: var(--lh-xs); display: inline-block; transition: transform var(--d-dur) var(--ease); }
.h-who { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0; }
.h-who .nm { font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.h-specs { display: flex; gap: var(--s1); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.h-specs .sp { font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono); color: var(--ink-2); border: 0; border-radius: var(--r0); padding: var(--s1) var(--s2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 100%; background: var(--tint); box-shadow: var(--shadow); }
.h-time { grid-column: 3; text-align: right; }
.h-val { grid-column: 4; text-align: right; }
.h-unit { grid-column: 5; }
.h-time, .h-unit { font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-val { font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-acts { grid-column: 6; display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; flex: none; min-width: 0; max-width: 100%; }
.h-more { position: relative; min-width: 0; }
.h-more::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); }
.h-sum { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); min-height: var(--reach); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; transition: background var(--d-micro) var(--ease); }
.h-sum::-webkit-details-marker { display: none; }
.h-sum::marker { content: none; }
.h-more[open] .h-sum .caret { transform: rotate(90deg); }
.h-bar { position: relative; height: var(--s1); border-radius: var(--r-pill); overflow: hidden; background: var(--tint); }
.h-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--c1); }
.h-menu { min-width: 0; width: max-content; max-width: 100%; padding: var(--s1); border: 0; border-radius: var(--r1); background: var(--raised); box-shadow: var(--shadow); color: var(--ink); animation: h-mat var(--d-micro) var(--ease) both; }
.h-menu-item { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--h-s); appearance: none; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; text-align: left; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); padding: var(--s2) var(--s3); border-radius: var(--r0); overflow-wrap: anywhere; transition: background var(--d-micro) var(--ease), color var(--d-micro) var(--ease); }
.h-menu-item[aria-checked="true"] { color: var(--ink); }
.h-menu-item[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--ink); font-size: var(--t-xs); line-height: var(--lh-xs); }
.h-glyph { position: relative; display: inline-block; width: var(--h-xs); height: var(--h-xs); flex: none; vertical-align: middle; }
.h-glyph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h-glyph::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-pill); border: 2px solid var(--ink-2); opacity: .6; box-shadow: var(--shadow); animation: h-orb-breathe var(--d-turn) var(--ease) infinite; transition: opacity var(--d-micro) var(--ease); }
.h-glyph.mounted::before { opacity: 0; pointer-events: none; }
.h-glyph.\68 alo::after { content: ""; position: absolute; left: 6%; right: 6%; top: -28%; height: 36%; border-radius: var(--r-pill); border: 2px solid var(--light); box-shadow: var(--shadow); transform: perspective(60px) rotateX(58deg); transform-origin: 50% 100%; animation: h-hat var(--d-turn) var(--ease) infinite; pointer-events: none; }
.h-orb { position: relative; display: inline-block; width: var(--h-xs); height: var(--h-xs); flex: none; border-radius: var(--r-pill); border: 0; padding: 0; vertical-align: middle; background: radial-gradient(circle at 35% 32%, var(--core), var(--light) 58%, var(--ink-2)); box-shadow: var(--shadow); animation: h-orb-breathe var(--d-turn) var(--ease) infinite; }
.h-orb.\68 alo::after { content: ""; position: absolute; left: 2%; right: 2%; top: -30%; height: 38%; border-radius: var(--r-pill); border: 2px solid var(--light); box-shadow: var(--shadow); transform: perspective(60px) rotateX(58deg); transform-origin: 50% 100%; animation: h-hat var(--d-turn) var(--ease) infinite; pointer-events: none; }
.h-head { position: relative; padding: var(--s5) var(--s4) var(--s4); min-width: 0; }
.h-brow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); min-height: var(--h-s); position: relative; min-width: 0; }
.h-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); min-width: 0; }
.h-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); max-width: 100%; }
.h-ws { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-s); max-width: 100%; padding: 0 var(--s3); border-radius: var(--r0); border: 0; background: var(--tint); box-shadow: var(--shadow); color: var(--ink); cursor: pointer; flex: none; font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); -webkit-tap-highlight-color: transparent; transition: background var(--d-micro) var(--ease), transform var(--d-press) var(--spring); }
.h-ws b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.h-ws .cv { color: var(--ink-2); font-size: var(--t-xs); line-height: var(--lh-xs); }
.h-info { position: relative; padding: var(--s4); min-width: 0; }
.h-info::before { content: ""; position: absolute; top: 0; left: var(--s4); right: var(--s4); height: 1px; background: var(--line); }
.h-spend { display: flex; align-items: flex-end; gap: var(--s1); height: var(--h-m); margin-top: var(--s3); position: relative; min-width: 0; }
.h-spend::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.h-spend .bar { flex: 1; min-width: 0; min-height: var(--s2); border-radius: var(--r0) var(--r0) 0 0; background: var(--c1); }
.h-spend .nil { flex: 1; min-width: 0; height: 1px; border-radius: var(--r-pill); background: var(--line-2); }
.h-days { display: flex; gap: var(--s1); margin-top: var(--s2); min-width: 0; }
.h-days span { flex: 1; min-width: 0; text-align: center; font: 500 var(--t-xs)/var(--lh-xs) var(--f-mono); color: var(--ink-2); overflow-wrap: anywhere; }
.h-days span.now { color: var(--ink); }
.h-foot { position: relative; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4) var(--s4); min-width: 0; }
.h-foot::before { content: ""; position: absolute; top: 0; left: var(--s4); right: var(--s4); height: 1px; background: var(--line); }
@media (hover: hover) and (pointer: fine) {
.h-btn:hover { background: var(--tint-2); }
.h-btn.pri:hover { background: var(--cta); }
.h-seg .h-btn.pri:hover, .h-row .h-btn.pri:hover { background: var(--light); }
.h-ws:hover, .hwin-tab:hover, .hwin-act a:hover, .hwin-act button:hover { background: var(--tint-2); }
.hwin-tab.live:hover { background: var(--light); }
.h-row:hover { background: var(--tint); }
.h-row.on:hover { background: var(--ok-soft); }
.h-sum:hover { background: var(--tint); }
.h-menu-item:hover { background: var(--tint-2); color: var(--ink); }
}
.h-btn:active, .h-ws:active, .hwin-act a:active, .hwin-act button:active { transform: scale(.97); }
@media (max-width: 560px) {
.h-row { grid-template-columns: var(--s4) minmax(0, 1fr); row-gap: var(--s2); padding-bottom: var(--s3); }
.h-who, .h-acts { grid-column: 2; }
.h-specs .sp.opt { display: none; }
.h-time, .h-val, .h-unit { display: none; }
.h-acts { justify-content: flex-start; }
}
@container hcard (max-width: 400px) {
.h-row { grid-template-columns: var(--s4) minmax(0, 1fr) auto auto auto; align-items: center; row-gap: var(--s2); padding-bottom: var(--s3); }
.h-who { grid-column: 2 / -1; grid-row: 1; }
.h-time { grid-column: 2; grid-row: 2; justify-self: start; display: block; }
.h-val { grid-column: 3; grid-row: 2; text-align: right; display: block; }
.h-unit { grid-column: 4; grid-row: 2; display: block; }
.h-acts { grid-column: 5; grid-row: 2; justify-self: end; }
.h-specs .sp.opt { display: none; }
.h-chips .h-chip:nth-child(n + 4) { display: none; }
.h-big b { font-size: var(--t-l); line-height: var(--lh-l); }
}
@media (max-width: 560px) {
.h-time, .h-val, .h-unit { display: none; }
}
@media (pointer: coarse) {
.h-btn, .h-ws, .h-menu-item, .hwin-tab, .hwin-act a, .hwin-act button { min-height: var(--reach); }
}
@media (prefers-contrast: more) {
.h-card { box-shadow: var(--shadow); }
.note, .h-menu, .h-btn, .h-chip, .h-ws, kbd.h-key, .h-specs .sp, .hwin-frame, .hwin-tab, .hwin-act a, .hwin-act button { box-shadow: var(--shadow); }
.h-btn:focus-visible, .h-sum:focus-visible, .h-menu-item:focus-visible, .h-ws:focus-visible,
  .hwin-tab:focus-visible, .hwin-act a:focus-visible, .hwin-act button:focus-visible, a:focus-visible { outline-width: 3px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.h-pulse .rng { opacity: 0; }
}

/* Override the later, immutable desk prompt stylesheet by specificity. */
body .deskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--surface); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); border-top: 1px solid var(--line-2); color: var(--ink); font: 400 var(--t-s)/var(--lh-s) var(--f-ui); animation: deskrise var(--d-land) var(--ease-out) both; }
@keyframes deskrise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
body .deskbar .dtx { flex: 1; min-width: 0; }
body .deskbar .dtt { font-weight: 600; letter-spacing: -.01em; }
body .deskbar .dts { color: var(--ink-2); font-size: var(--t-xs); margin-top: 1px; line-height: var(--lh-xs); }
body .deskbar a.dgo, body .deskcard a.dgo { flex: none; background: var(--light); color: var(--on-ink); font-weight: 600; text-decoration: none; padding: var(--s3) var(--s4); border-radius: var(--r1); cursor: pointer; white-space: nowrap; transition: transform var(--d-press) var(--ease-out); }
body .deskbar .dalt { flex: none; color: var(--ink-2); font-size: var(--t-xs); text-decoration: underline; cursor: pointer; line-height: var(--lh-xs); }
body .deskbar .dctl { flex: none; display: flex; align-items: center; gap: 2px; margin-left: 2px; }
body .deskbar .dbtn { appearance: none; -webkit-appearance: none; background: none; border: 0; color: var(--ink-2); width: var(--h-s); height: var(--h-s); border-radius: var(--r0); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); transition: transform var(--d-press) var(--ease-out),background-color var(--d-press) var(--ease-out),color var(--d-press) var(--ease-out); }
body .deskbar .dbtn:focus-visible, body .deskmin:focus-visible { outline: 2px solid var(--light); outline-offset: 2px; }
@media(hover:hover) and (pointer:fine) {
body .deskbar .dbtn:hover { background: var(--tint-2); color: var(--ink); }
body .deskmin:hover { background: var(--surface); color: var(--ink); }
}
body .deskbar a.dgo:active, body .deskcard a.dgo:active, body .deskbar .dbtn:active, body .deskmin:active { transform: scale(.97); }
@media(max-width:560px) {
body .deskbar { flex-wrap: wrap; gap: var(--s2); }
body .deskbar .dtx { flex-basis: 100%; order: -1; }
}
body .deskmin { position: fixed; right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 9999; appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-pill); cursor: pointer; color: var(--ink-2); background: var(--surface); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); border: 1px solid var(--line-2); box-shadow: var(--shadow); font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui); animation: deskrise var(--d-land) var(--ease-out) both; transition: transform var(--d-press) var(--ease-out),background-color var(--d-press) var(--ease-out),color var(--d-press) var(--ease-out); }
body .deskmin .ddot { width: var(--s2); height: var(--s2); border-radius: var(--r-pill); background: var(--light); flex: none; }
@media(prefers-reduced-motion:reduce) {
@keyframes deskrise {
from { opacity: 0; }
to { opacity: 1; }
}
}
body .deskcard { margin: var(--s4) 0; padding: var(--s4) var(--s4); border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--tint); color: var(--ink); font: 400 var(--t-s)/var(--lh-s) var(--f-ui); }
body .deskcard h3 { margin: 0 0 var(--s1); font-size: var(--t-m); font-weight: 600; line-height: var(--lh-m); }
body .deskcard p { margin: 0 0 var(--s3); color: var(--ink-2); font-size: var(--t-s); line-height: var(--lh-s); }
body .deskcard .drow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
body .deskcard .dsec { color: var(--ink-2); background: var(--tint-2); border: 1px solid var(--line-2); border-radius: var(--r1); padding: var(--s2) var(--s4); font-size: var(--t-s); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--d-press) var(--ease-out); line-height: var(--lh-s); }
body .deskcard .dsec:active { transform: scale(.97); }
body .deskcard .dnote { margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-2); line-height: var(--lh-xs); }

/* Page shell; the only linked material sources remain the kit and HERE lens. */
html { min-width: 0; background: var(--ground); }
body { height: auto; min-height: 100vh; min-height: 100svh; isolation: isolate; overflow-wrap: anywhere; }
body, .wrap, #body, #panel-world, .orient, .cell, .keys>div, .cloud { min-width: 0; }
.wrap { max-width: min(460px,100%); }
body { padding-inline: max(var(--s4),env(safe-area-inset-left)) max(var(--s4),env(safe-area-inset-right)); }
a { color: var(--ink); }
button, input, textarea, select { font-family: var(--f-ui); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection, ::-moz-selection { background: var(--pick); color: var(--on-pick); }
a[href^="http"]:not([href*="hereandmore.com"]):not(.ch-nomark)::after { content: " \2197"; color: inherit; font-size: var(--t-xs); text-decoration: none; }
a[href^="http"]:not([href*="hereandmore.com"]):hover { text-decoration-color: var(--ink); }
/* Quiet light and monochrome alpha texture. */
.aurora, .grain { inset: 0; }
.aurora { opacity: .5; background: radial-gradient(42% 46% at 78% 6%,var(--stage-light),transparent 62%),radial-gradient(40% 44% at 10% 96%,var(--stage-light),transparent 60%); }
.grain { display: block; opacity: .02; background-image: none;
  background: var(--core);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after { background: radial-gradient(120% 80% at 50% 30%,transparent 55%,var(--stage-light) 100%); }
.stage { background: var(--stage); outline: var(--s1) solid var(--raised); box-shadow: var(--bloom); }
.aura { background: radial-gradient(circle,var(--stage-light),transparent 70%); filter: blur(var(--s4)); }
.orb { box-shadow: var(--glow); }
.ring { border-color: color-mix(in srgb, var(--light) 55%, transparent); }
.igni-logo { filter: var(--core-glow); }
/* Exact canvas dimensions keep the renderer's absolute-pixel bloom; no filters on canvas. */
.here-graph, .h-glyph canvas, .h-think canvas { filter: none; }
h1 { font-family: var(--f-voice); font-weight: 400; }
h1 em { font-family: var(--f-voice); font-weight: 400; }
.lede { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); }
.orient { grid-template-columns: repeat(2,minmax(0,1fr)); }
.btn { min-height: var(--reach); border-color: var(--ink-3); overflow-wrap: anywhere; }
.btn.p, .btn.p:hover { background: var(--cta); color: var(--cta-ink); box-shadow: var(--cta-shadow); }
.btn.p:focus-visible { outline-color: var(--focus-ring); box-shadow: var(--cta-shadow),var(--focus); }
.btn.s, .btn.s:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: 1; background: var(--raised); color: var(--ink-2); box-shadow: var(--ring); cursor: not-allowed; }
.dot { width: var(--s3); height: var(--s3); box-shadow: var(--glow); }
.foot .legal a { text-decoration-color: currentColor; }
.approw { grid-template-columns: repeat(auto-fill,minmax(min(100%,var(--s9)),1fr)); }
.apptile { min-width: 0; border-color: var(--ink-3); }
.apptile:hover { border-color: var(--ink-2); }
/* The script's inline legacy tokens/literals must not win the material migration. */
#cha, .card>textarea {
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui) !important;
  color: var(--ink) !important; background: var(--surface) !important;
  border: 1px solid var(--ink-3) !important; border-radius: var(--r1) !important;
  padding: var(--s3) var(--s4) !important; max-width: 100%; min-width: 0;
}
#cha { margin: var(--s2) 0 var(--s1) !important; }
.card>textarea { margin-top: var(--s4) !important; }
#cha:focus-visible, .card>textarea:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px; }
#cha::placeholder, .card>textarea::placeholder { color: var(--ink-2); opacity: 1; }
.card>.sub[style*="color"], #panel-world>.sub, #haim .where>span, .row[style*="var(--aqua)"] { color: var(--ink-2) !important; }
#panel-world .row img { border-radius: var(--r1) !important; margin-top: var(--s2) !important; }
#hcloud[style*="outline"] { outline-color: var(--focus-ring) !important; }
#hcloud .h-chips { gap: var(--s2) !important; }
#hcloud .h-spend { gap: var(--s1) !important; }
#hcloud .h-days { gap: var(--s1) !important; margin-top: var(--s2) !important; }
#hcloud .h-info>div:first-child { min-width: 0; flex-wrap: wrap; }
/* Fixed windows scroll inside themselves. Tabs retain their own horizontal scroller. */
.hwin { min-width: 0; overflow: hidden; background: var(--ground); }
.hwin-bar, .hwin-frame { min-width: 0; }
.hwin-tabs { flex: 1 1 auto; min-width: 0; gap: var(--s2) !important; }
.hwin-tab { border-color: var(--ink-3); }
.hwin-tab.live { background: var(--light); color: var(--on-ink); border-color: transparent; }
.hwin-tab .tx { opacity: 1; }
.hwin-act a, .hwin-act button, .hdockchip { border-color: var(--ink-3); }
.hdockchip { max-width: 100%; overflow-wrap: anywhere; }
.hdockchip .dot { flex-shrink: 0; }
#tabbar { background: var(--ground); min-width: 0; padding-inline: var(--s2); }
.tab { min-width: 0; min-height: var(--reach); font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui); padding-inline: 2px; }
.tab .tg { font-size: var(--t-l); line-height: var(--lh-l); }
#panel-world { min-width: 0; padding-inline: max(var(--s4),env(safe-area-inset-left)) max(var(--s4),env(safe-area-inset-right)); }
body.shell, #panel-world { padding-bottom: calc(var(--s9) + env(safe-area-inset-bottom)); }
/* The desktop prompt formerly covered the bottom navigation. Keep its controls above it. */
body.shell .deskbar, body.shell .deskmin { bottom: calc(var(--s9) + env(safe-area-inset-bottom)); }
body.shell:has(.deskbar) .wrap { margin-bottom: calc(var(--s9) + env(safe-area-inset-bottom)); }
body:has(.deskbar) #panel-world { padding-bottom: calc(40dvh + var(--s9) + env(safe-area-inset-bottom)); }
/* h-* used by paintCloud / HereGlyph, without the desk page's global styles. */
.h-scope { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); }
.h-k, .h-meta, .h-chip, .h-specs .sp, .h-time, .h-val, .h-unit, .h-days span { font-family: var(--f-ui); }
.h-k, .h-chip .lb { text-transform: none; letter-spacing: 0; white-space: normal; }
.h-k, .h-meta, .h-say, .h-chip .lb, .h-specs .sp, .h-time, .h-unit, .h-days span { color: var(--ink-2); }
.h-btn, .h-ws, .h-seg { border: 1px solid var(--ink-3); box-shadow: none; }
.h-btn { white-space: normal; overflow-wrap: anywhere; text-align: center; }
.h-btn.pri, .h-btn.pri:hover, .h-seg .h-btn.pri, .h-row .h-btn.pri, .h-seg .h-btn.pri:hover, .h-row .h-btn.pri:hover {
  background: var(--light); color: var(--on-ink); box-shadow: none;
}
.h-btn.pri { border-color: transparent; }
.h-btn.pri:active { box-shadow: var(--ring); transform: scale(.97); }
.h-seg .h-btn { border: 0; }
.h-seg .h-btn+.h-btn { box-shadow: inset 1px 0 0 var(--ink-3); }
.h-seg .h-btn+.h-btn.pri { box-shadow: inset 1px 0 0 var(--on-ink); }
.h-btn[disabled] { opacity: 1 !important; color: var(--ink-2); background: var(--raised); }
.h-row.lease { display: grid; margin-top: 0; }
.h-row { grid-template-columns: var(--s4) minmax(0,1fr) auto auto auto auto; }
.h-acts { flex-wrap: wrap; }
.h-pulse .dot { width: 100%; height: 100%; margin: 0; box-shadow: var(--glow); }
.h-pulse .rng { animation-duration: calc(var(--d-step) * 140); }
.h-menu { background: var(--raised); box-shadow: var(--shadow-pop); }
.h-menu.wsmenu { top: calc(100% + var(--s1)) !important; max-width: 100%; }
.h-ws { min-width: 0; }
.h-orb, .h-orb.iris { background: radial-gradient(circle at 35% 32%,var(--core),var(--c5) 58%,var(--c1)); box-shadow: var(--glow); }
.h-orb { animation-duration: calc(var(--d-step) * 200); }
.h-orb.\68 alo::after { animation-duration: calc(var(--d-step) * 180); }
.h-rows .h-row:nth-child(2) { animation-delay: calc(var(--d-step) * 1.8); }
.h-rows .h-row:nth-child(3) { animation-delay: calc(var(--d-step) * 3.6); }
.h-glyph.halo::after, .h-orb.halo::after { border-color: var(--light); box-shadow: var(--glow); animation-duration: calc(var(--d-step) * 180); }
.h-glyph::before { border-color: var(--c5); box-shadow: var(--glow); }
.h-glyph.sm { width: var(--s4); height: var(--s4); }
.h-glyph.lg { width: var(--reach); height: var(--reach); }
.h-glyph.xl { width: var(--s9); height: var(--s9); }
.h-glyph.ring-only::before { opacity: 1; }
/* Restore animation parity from the old foundation, including the ring names used by chat. */
@keyframes h-breathe { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.045); opacity: 1; } }
@keyframes h-orb-breathe { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.12); } }
.h-orb { animation-timing-function: var(--ease-light); }
.h-glyph::before { animation: h-breathe calc(var(--d-step) * 280) var(--ease) infinite; }
/* Legacy desk prompt is appended after our links. These selectors beat its specificity. */
body .deskbar, body .deskmin { background: var(--surface); color: var(--ink); backdrop-filter: var(--frost); -webkit-backdrop-filter: var(--frost); max-width: 100%; }
body .deskbar { flex-wrap: wrap; max-height: 40vh; max-height: 40dvh; overflow-y: auto; }
body .deskbar .dtx { min-width: 0; }
body .deskbar .dts, body .deskbar .dalt, body .deskcard p, body .deskcard .dnote { color: var(--ink-2); }
body .deskbar a.dgo, body .deskcard a.dgo { background: var(--light); color: var(--on-ink); white-space: normal; max-width: 100%; }
body .deskbar .dbtn { width: var(--reach); height: var(--reach); color: var(--ink-2); }
body .deskbar .dbtn:focus-visible, body .deskmin:focus-visible { outline-color: var(--focus-ring); }
body .deskbar .dbtn:hover, body .deskmin:hover { background: var(--raised); color: var(--ink); }
body .deskmin { box-shadow: var(--shadow-pop); border-color: var(--ink-3); }
body .deskmin .ddot { background: var(--ok); }
body .deskcard { min-width: 0; color: var(--ink); background: var(--surface); border-color: var(--line); }
body .deskcard .dsec { color: var(--ink); border-color: var(--ink-3); }
pre::-webkit-scrollbar { display: block; width: var(--s2); height: var(--s2); }
pre::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: var(--r-pill); }
pre::-webkit-scrollbar-track { background: var(--sunk); }
/* Preserve the old print selectors without introducing a second palette. */
@media print {
  html { color-scheme: light; }
  body { background: var(--ink) !important; color: var(--ground) !important; display: block; }
  body * { color: var(--ground) !important; }
  .tabbar,#tabbar,.fab,.hfullbtn,.aurora,.grain,.pet,#pet,#ask,.ask,.sheetbk,nav.rail .mk,
  .deskbar,.deskmin,.hwin { display: none !important; }
  .card,.mc,.herecard,.h-card,.wg,.bub,.cell,.chip,.h-chip { background: transparent !important; box-shadow: none !important; break-inside: avoid; }
  a { text-decoration: underline; }
  img[data-lnk], .siggly { filter: invert(1); }
}
@media (max-width: 430px) {
  .hwin-bar { flex-wrap: wrap; }
  .hwin-tabs { flex-basis: 100%; }
  .hwin-act { flex-wrap: wrap; max-width: 100%; }
  .hwin-act a, .hwin-act button { min-width: 0; }
  body .deskbar .dtx { flex-basis: 100%; }
}
/* A narrow nested cloud card must not inherit a six-column desktop minimum. */
@container hcard (max-width: 400px) {
  .h-row { grid-template-columns: var(--s4) minmax(0,1fr); row-gap: var(--s2); }
  .h-who { grid-column: 2; grid-row: auto; }
  .h-time, .h-val, .h-unit { grid-column: 2; grid-row: auto; justify-self: start; text-align: left; }
  .h-acts { grid-column: 2; grid-row: auto; justify-self: start; }
}
@media (prefers-contrast: more) {
  .btn, .apptile, .h-btn, .h-seg, .h-ws, .hwin-tab, .hwin-act a, .hwin-act button { border-color: var(--ink-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal>span { transform: none; }
  .lede,.card,.foot,.row,.msgrow { opacity: 1; transform: none; }
  .h-pulse .rng { opacity: 0; }
  .h-glyph::before, .h-glyph.halo::after, .h-orb, .h-orb.halo::after, .wavi.igniv::after { animation: none; }
}

/* Before the page's script makes <body> its shell (a signed-out visitor's page never does), <body> is a centred
   flex row and the bar took a place in it: 363px of a 390px phone, which pushed the page off the right edge.
   The bar leaves the row on the plain page too, and the page starts under it. */
html.here-bar-on body>here-bar,html.here-bar-on body>universe-ui{position:fixed;top:0;left:0;right:0}
html.here-bar-on body{padding-top:var(--here-bar-h,0px)}

/* The universal bar sits above the page's centred shell: keep these three last, byte-identical. */
html.here-bar-on body.shell>here-bar,html.here-bar-on body.shell>universe-ui{position:fixed;top:0;left:0;right:0}
html.here-bar-on body.shell{padding-top:var(--here-bar-h,0px)}
html.here-bar-on #panel-world{top:var(--here-bar-h,0px)}