/* Silver Glass · Web approximation inspired by Apple materials, not an Apple API.
 * Shared by all five pages. Mathematics and canvas rendering stay unobscured.
 * DESIGN_VARIANCE: 5 / MOTION_INTENSITY: 5 / VISUAL_DENSITY: 3.
 */
:root {
  --bg: #080d17;
  --bg-rgb: 8, 13, 23;
  --surface: #111b2b;
  --surface-2: #172235;
  --text: #eef3fc;
  --text-2: #b3bfd1;
  --text-3: #929fb5;
  --strong: #f5f8ff;
  --title-a: #f7faff;
  --title-b: #a8c4ef;
  --accent: #8db9ff;
  --accent-soft: rgb(141 185 255 / .14);
  --nav-h: 88px;
  --r: 24px;
  --r-sm: 13px;
  --glass-fill: rgb(21 32 51 / .68);
  --glass-dense: rgb(21 30 46 / .88);
  --glass-edge: rgb(205 225 255 / .18);
  --glass-top: rgb(225 238 255 / .18);
  --glass-sheen: linear-gradient(135deg, rgb(205 225 255 / .11), rgb(205 225 255 / .025) 48%, rgb(205 225 255 / .055));
  --glass-shadow: inset 0 1px 0 var(--glass-top), inset 0 -1px 0 rgb(255 255 255 / .025), 0 12px 40px -16px rgb(0 5 18 / .6);
  --glass-selected: rgb(197 221 255 / .12);
  --ambient: rgb(65 105 168 / .2);
  --control-fill: rgb(5 13 28 / .25);
  --primary-fill: linear-gradient(165deg, #dcecff, #afcdf7);
  --primary-text: #112743;
  --card-shadow: var(--glass-shadow);
}

:root[data-theme="light"] {
  --bg: #eef2f8;
  --bg-rgb: 238, 242, 248;
  --surface: #f7f9fc;
  --surface-2: #e9eef6;
  --text: #1b2a40;
  --text-2: #53647a;
  --text-3: #5c6e85;
  --strong: #142238;
  --title-a: #192a43;
  --title-b: #41638d;
  --accent: #2e67b1;
  --accent-soft: rgb(46 103 177 / .1);
  --formula: #344e71;
  --line: rgb(49 77 112 / .11);
  --line-2: rgb(49 77 112 / .2);
  --glass-fill: rgb(255 255 255 / .48);
  --glass-dense: rgb(248 251 255 / .86);
  --glass-edge: rgb(255 255 255 / .86);
  --glass-top: rgb(255 255 255 / .98);
  --glass-sheen: linear-gradient(135deg, rgb(255 255 255 / .64), rgb(255 255 255 / .12) 48%, rgb(220 233 251 / .2));
  --glass-shadow: inset 0 1px 0 var(--glass-top), inset 0 -1px 0 rgb(174 196 224 / .2), 0 12px 40px -18px rgb(54 81 121 / .24), 0 2px 6px rgb(54 81 121 / .035);
  --glass-selected: rgb(255 255 255 / .78);
  --ambient: rgb(151 183 229 / .24);
  --control-fill: rgb(224 233 247 / .4);
  --primary-fill: linear-gradient(165deg, #3974b9, #285b9b);
  --primary-text: #fff;
  --card-shadow: var(--glass-shadow);
}

html { scroll-padding-top: 110px; }
body { letter-spacing: .015em; }
#app { min-height: 100dvh; }
:root #app::before, :root[data-theme="light"] #app::before {
  background: radial-gradient(ellipse 68% 48% at 10% 4%, var(--ambient), transparent 80%),
    radial-gradient(ellipse 55% 45% at 100% 60%, var(--ambient), transparent 80%),
    radial-gradient(ellipse 50% 60% at 60% 100%, rgb(137 162 201 / .06), transparent 80%);
}

/* Floating navigation has one material layer; children use unfiltered highlights. */
#nav, #nav.solid, #nav.scrolled {
  top: max(16px, env(safe-area-inset-top));
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(1180px, calc(100% - 48px)); height: 64px;
  padding: 0 18px 0 22px; border: 1px solid var(--glass-edge); border-radius: 24px;
  background: var(--glass-sheen), var(--glass-fill);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  box-shadow: var(--glass-shadow);
}
#nav::after { display: none; }
.brand { font-size: 15px; letter-spacing: .1em; gap: 9px; }
.brand-logo { width: 30px; height: 30px; }
.nav-seg a { padding: 8px 17px; font-size: 13px; }
.nav-seg .seg-pill { background: var(--glass-selected); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top), 0 2px 8px rgb(30 61 108 / .07); }
.nav-right { gap: 12px; }
.icon-btn { width: 38px; height: 38px; background: var(--control-fill); border-color: var(--line); box-shadow: inset 0 1px 0 var(--glass-top); }
.nav-cta, .btn-primary { background: var(--primary-fill); color: var(--primary-text); border: 1px solid rgb(123 164 220 / .34); box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 5px 14px -5px rgb(33 77 138 / .36); }
.nav-cta { min-height: 38px; padding: 7px 17px; }
.btn { min-height: 48px; padding: 12px 24px; font-size: 14px; letter-spacing: .015em; }
.btn-primary:hover, .nav-cta:hover { background: var(--primary-fill); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 24px -6px rgb(33 77 138 / .4); filter: brightness(1.06); }
.btn-plain, .btn-tinted { background: var(--glass-sheen), var(--glass-fill); border-color: var(--glass-edge); color: var(--text); box-shadow: var(--glass-shadow); }
.btn-plain:hover, .btn-tinted:hover { background: var(--glass-selected); border-color: var(--line-2); }
.btn-sm { min-height: 38px; padding: 7px 15px; font-size: 13px; }

/* Cards keep a readable milk-glass body; small UI uses clearer material. */
:root .card, :root[data-theme="light"] .card,
.lab-side, .panel, .controls-bar, .exp-pager a {
  background: var(--glass-sheen), var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.card, .panel, .controls-bar { border-radius: var(--r); }
.settings-pop { border-radius: 24px; padding: 18px; visibility: hidden; }
.settings-pop.open { visibility: visible; }
:root .settings-pop, :root #island, :root[data-theme="light"] .settings-pop, :root[data-theme="light"] #island {
  background: var(--glass-sheen), var(--glass-dense);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.settings-pop .sp-title { color: var(--text-2); }
.sp-opt { border-radius: 16px; background: var(--control-fill); }
.sp-opt.active { background: var(--glass-selected); }
.sw-dark { background: linear-gradient(135deg, #23324b, #080d17); }
.sw-light { background: linear-gradient(135deg, #fff, #dce7f5); }
.sw-dark i:nth-child(3), .sw-light i:nth-child(3) { background: #4f7fb9; }

/* Hero: a glass-mounted emblem, with the mathematical scene visible behind it. */
body[data-page="home"] { height: 100dvh; }
body[data-page="home"] #hero { height: 100dvh; }
#hero-canvas { mix-blend-mode: screen; }
:root[data-theme="light"] #hero-canvas { mix-blend-mode: multiply; }
#hero::after { background: radial-gradient(ellipse at center, rgba(var(--bg-rgb), .2) 5%, rgba(var(--bg-rgb), .75) 85%), linear-gradient(0deg, rgba(var(--bg-rgb), .5), transparent 40%); }
.emblem-wrap {
  width: 144px; height: 144px; padding: 18px; margin-bottom: 26px;
  border-radius: 40px; border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), var(--glass-fill);
  box-shadow: var(--glass-shadow), 0 18px 55px -22px rgb(57 110 181 / .24);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}
.hero-eyebrow { font-size: 10px; letter-spacing: .38em; margin-bottom: 18px; }
.hero-title { font-size: clamp(60px, 7.5vw, 104px); font-weight: 600; letter-spacing: .08em; }
.hero-sub { font-size: clamp(15px, 1.6vw, 18px); letter-spacing: .22em; margin: 18px 0 20px; }
.formula-carousel { font-size: clamp(14px, 1.7vw, 18px); }
.hero-actions { gap: 12px; margin-top: 22px; }
.hero-entries { bottom: 28px; gap: 14px; width: min(1000px, calc(100% - 64px)); }
.hero-entries a, body.launched .hero-entries a:hover {
  background: var(--glass-sheen), var(--glass-fill);
  border-color: var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: 21px;
  padding: 18px 22px;
}
.he-no { font-size: 10px; margin-bottom: 3px; }
.he-name { font-size: 15px; }
.he-sub { font-size: 12px; }
body[data-page="home"] .hero-caption { bottom: 151px; }

/* Laboratory: frosted chrome around sharply rendered mathematics. */
.lab-page { padding-top: calc(var(--nav-h) + 32px); }
.lab-shell { grid-template-columns: 236px minmax(0, 1fr); gap: 30px; }
.lab-side { border-radius: 26px; padding: 23px 13px 12px; top: calc(var(--nav-h) + 20px); max-height: calc(100dvh - var(--nav-h) - 44px); }
.lab-side h1, .lab-side .side-sub { padding-left: 10px; }
.lab-side h1 { font-size: 20px; }
.side-group { margin-bottom: 16px; }
.side-group-title { letter-spacing: .06em; }
.side-link { border-radius: 12px; min-height: 40px; }
.side-link.active { background: var(--glass-selected); color: var(--accent); }
.side-ind { border-radius: 12px; }
.exp-desc { font-size: 14px; line-height: 1.95; margin-top: 18px; }
.exp-head h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.02em; }
.canvas-wrap { border-radius: 24px; }
:root .canvas-wrap, :root[data-theme="light"] .canvas-wrap { border-color: var(--line-2); box-shadow: 0 14px 40px -22px rgb(25 54 100 / .3); }
:root .canvas-hud, :root[data-theme="light"] .canvas-hud { background: var(--glass-dense); color: var(--text); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); padding: 7px 12px; }
.panel { padding: 8px 20px 22px; }
.math-input, .matrix-grid input, select { background: var(--control-fill); border-color: var(--line-2); border-radius: var(--r-sm); min-height: 40px; }
.readout { background: var(--control-fill); }
.chips { border-radius: 14px; background: var(--control-fill); padding: 4px; }
.chip { border-radius: 10px; min-height: 34px; }
.chips .seg-thumb { top: 4px; bottom: 4px; border-radius: 10px; background: var(--glass-selected); box-shadow: inset 0 1px 0 var(--glass-top), 0 2px 8px rgb(30 61 108 / .08); }
.chip.active { color: var(--accent); }
.controls-bar { padding: 16px 20px; gap: 18px; }
.switch input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 4px; }
input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.exp-pager a { border-radius: 18px; }

/* Reading surfaces and the join sheet use denser glass for consistent contrast. */
.about-text { padding: 38px; }
.stat { padding: 28px; }
.stat-num { font-size: 42px; color: var(--accent); }
.problem { padding: 30px; }
.events { border-radius: 24px; overflow: hidden; }
.event-row { padding: 25px 28px; }
.event-date { background: var(--control-fill); border: 1px solid var(--glass-edge); border-radius: 15px; width: 60px; padding: 10px 3px; }
.event-date b { color: var(--accent); }
.join-card::before { opacity: .45; }
#sheet-backdrop { background: rgb(14 27 49 / .3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
:root #sheet { background: var(--glass-sheen), var(--glass-dense); border-color: var(--glass-edge); border-radius: 30px 30px 0 0; padding: 10px 28px calc(28px + env(safe-area-inset-bottom)); backdrop-filter: blur(32px) saturate(145%); -webkit-backdrop-filter: blur(32px) saturate(145%); }
body.sheet-live #sheet { box-shadow: inset 0 1px 0 var(--glass-top), 0 -16px 64px rgb(19 43 81 / .2), 0 80px 0 var(--surface); }
.sheet-head { margin: 8px 0 22px; }
.sheet-head h3 { font-size: 22px; }
.sheet-close { width: 34px; height: 34px; background: var(--control-fill); }
.form-group { border-radius: 17px; background: var(--control-fill); }
.form-row { min-height: 54px; }
.form-row input, .form-row textarea { min-width: 0; }
.form-row:focus-within { box-shadow: inset 3px 0 0 var(--accent); }
.footer { border-top-color: var(--line); }

@media (min-height: 641px) and (min-width: 761px) {
  body[data-page="home"] .hero-content { padding-top: 56px; padding-bottom: 120px; }
}
@media (max-width: 1080px) {
  .lab-shell { grid-template-columns: 1fr; gap: 0; }
  .lab-page { padding-top: calc(var(--nav-h) + 14px); }
  .lab-strip { top: calc(var(--nav-h) + 8px); border: 1px solid var(--glass-edge); border-radius: 20px; padding: 8px; background: var(--glass-sheen), var(--glass-dense); box-shadow: var(--glass-shadow); margin-bottom: 24px; }
  .strip-ind { top: 8px; bottom: 8px; background: var(--glass-selected); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top), 0 2px 8px rgb(30 61 108 / .06); }
}
@media (max-width: 760px) {
  :root { --nav-h: 82px; --tabbar-h: calc(88px + env(safe-area-inset-bottom)); --r: 22px; }
  #nav, #nav.solid, #nav.scrolled { top: max(12px, env(safe-area-inset-top)); width: calc(100% - 28px); height: 56px; border-radius: 21px; padding: 0 14px; justify-content: flex-start; }
  .nav-right { right: 10px; }
  .brand { font-size: 14px; }
  .brand-logo { width: 29px; height: 29px; }
  .icon-btn { width: 36px; height: 36px; }
  :root #tabbar {
    left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    padding: 7px 5px; border: 1px solid var(--glass-edge); border-radius: 25px;
    background: var(--glass-sheen), var(--glass-dense); box-shadow: var(--glass-shadow);
    backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%);
  }
  #tabbar a { min-height: 50px; justify-content: center; border-radius: 19px; color: var(--text-2); gap: 3px; font-size: 10px; }
  #tabbar a svg { width: 21px; height: 21px; }
  #tabbar a.active { color: var(--accent); background: var(--glass-selected); box-shadow: inset 0 1px 0 var(--glass-top), 0 2px 6px rgb(30 61 108 / .04); }
  .settings-pop { top: calc(100% + 16px); width: 250px; }
  body[data-page="home"] .hero-content { padding-top: 66px; padding-bottom: 104px; }
  .emblem-wrap { width: 112px; height: 112px; padding: 14px; border-radius: 32px; margin-bottom: 26px; }
  .hero-eyebrow { font-size: 9px; letter-spacing: .28em; margin-bottom: 16px; }
  .hero-title { font-size: clamp(56px, 16vw, 76px); }
  .hero-sub { margin: 16px 0 14px; font-size: 14px; letter-spacing: .17em; }
  .formula-carousel { height: 54px; font-size: 15px; }
  .hero-actions { margin-top: 24px; gap: 10px; }
  .hero-actions .btn { padding: 12px 20px; min-height: 46px; font-size: 13px; }
  .lab-strip { top: 80px; border-radius: 18px; margin-bottom: 24px; }
  .lab-strip a { min-height: 38px; display: flex; align-items: center; }
  .exp-desc { font-size: 14px; line-height: 1.9; }
  .panel { padding: 8px 18px 22px; }
  .controls-bar { gap: 14px; padding: 16px; }
  .controls-bar label { flex-wrap: wrap; max-width: 100%; }
  .about-text, .problem { padding: 26px; }
  .stat { padding: 22px; }
  .event-row { padding: 20px 18px; gap: 14px; flex-wrap: wrap; }
  .event-tag { margin-left: 74px; }
  .page > .section:first-child { padding-top: calc(var(--nav-h) + 34px); }
}
@media (max-height: 700px) and (max-width: 760px) {
  .emblem-wrap { width: 86px; height: 86px; padding: 11px; border-radius: 26px; margin-bottom: 18px; }
  .hero-title { font-size: 54px; }
  .hero-sub { margin: 10px 0; }
  .hero-actions { margin-top: 14px; }
  .hero-eyebrow { margin-bottom: 12px; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .emblem-wrap { width: 90px; height: 90px; padding: 12px; border-radius: 28px; margin-bottom: 12px; }
  .hero-title { font-size: 64px; }
  .hero-content { padding-top: 70px; }
  .hero-sub { margin: 10px 0; }
  .hero-actions { margin-top: 12px; }
}
/* A short landscape viewport must still expose every action by scrolling. */
@media (max-height: 560px) {
  body[data-page="home"] { height: auto; overflow-y: auto; }
  body[data-page="home"] #hero { height: auto; min-height: 620px; }
}

/* Solid fills remain usable where backdrop filtering is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme="light"] { --glass-fill: var(--surface); --glass-dense: var(--surface); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root, :root[data-theme="light"] { --glass-fill: var(--surface); --glass-dense: var(--surface); --glass-sheen: none; --glass-edge: var(--line-2); }
  #nav, #nav.solid, #nav.scrolled, #tabbar, .card, .lab-side, .panel, .controls-bar, .exp-pager a,
  .settings-pop, #sheet, #sheet-backdrop, #island, .emblem-wrap, .hero-entries a, .lab-strip, .canvas-hud {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .nav-cta:hover { filter: none; }
}

/* One UI family for Chinese, Latin, numerals, controls and canvas labels.
 * Apple devices use their system face; other platforms use the bundled MiSans.
 * KaTeX retains the font metrics required for mathematical layout.
 */
body { font-weight: 400; line-height: 1.8; letter-spacing: .01em; }
h1, h2, h3, h4, .brand, .stat-num, .event-date b { font-family: var(--sans); }
input, textarea, select, button { font-family: var(--sans); letter-spacing: .01em; }
.hero-title { font-weight: 450; letter-spacing: .045em; padding-left: .045em; }
.brand { font-weight: 500; letter-spacing: .06em; }
.section-head h2, .exp-head h2, .lab-side h1, .join-card h2, .sheet-head h3 { font-weight: 500; }
.problem h3, .pillar h3, .lab-card h3, .event-body h3, .flip-back h3, .he-name { font-weight: 500; }
.btn, .btn-primary, .nav-cta, .nav-seg a, .chip, .side-link, .lab-strip a { font-weight: 500; }
b, strong { font-weight: 550; }
.hero-sub { font-weight: 400; letter-spacing: .14em; padding-left: .14em; }
.hero-eyebrow { font-weight: 450; letter-spacing: .24em; padding-left: .24em; }
.stat-num, .event-date b { font-weight: 450; }
.stat-num, .event-date, .field-label output, .controls-bar output,
.math-input, .matrix-grid input, .readout, .canvas-hud, .he-no, .side-link .no { font-variant-numeric: tabular-nums lining-nums; }
.section-kicker, .exp-head .exp-no, .problem-tag, .side-group-title { letter-spacing: .06em; }
.vel-row { font-weight: 500; }
.formula-carousel .f .name { font-family: var(--sans); font-weight: 400; letter-spacing: .12em; }
.form-row input::placeholder, .form-row textarea::placeholder { font-weight: 400; }
@media (max-width: 760px) {
  .hero-title { font-weight: 450; }
  .hero-sub { letter-spacing: .12em; padding-left: .12em; }
  .hero-eyebrow { letter-spacing: .2em; padding-left: .2em; }
}

/* Continuous selection frames and spatial page transitions. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.seg-pill, .seg-thumb, .strip-ind, .side-ind, .tab-pill { transition: opacity .16s ease; pointer-events: none; }
.lab-side { isolation: isolate; }
.side-link { z-index: 1; }
.side-link.active { background: transparent; }
.side-ind { left: 13px; top: 0; z-index: 0; border: 1px solid var(--glass-edge); border-radius: 12px; background: var(--glass-selected); box-shadow: inset 0 1px 0 var(--glass-top), 0 3px 10px rgb(30 61 108 / .06); }
.tab-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 19px; background: var(--glass-selected); box-shadow: inset 0 1px 0 var(--glass-top), 0 2px 8px rgb(30 61 108 / .06); }
#tabbar a { position: relative; z-index: 1; }
#tabbar a.active { background: transparent; box-shadow: none; }
.pressable { transition: transform .28s var(--motion-ease); }
.btn { transition: transform .28s var(--motion-ease), translate .35s var(--motion-ease), background .24s ease, border-color .24s ease, box-shadow .28s ease; }
.settings-pop { transition: opacity .2s ease, transform .3s var(--motion-ease), visibility .3s; transform: translateY(-8px) scale(.94); }
.settings-pop.open { transform: none; }
.lab-main { position: relative; }
.lab-main .experiment.current { animation: none; }
.lab-main .experiment.leaving { display: block; position: absolute; left: 0; right: 0; pointer-events: none; }

/* Shared frames interpolate both bounds and position across normal page links. */
#app { view-transition-name: site-content; }
#tabbar { view-transition-name: site-tabbar; }
.nav-seg .seg-pill { view-transition-name: site-nav-pill; }
.tab-pill { view-transition-name: site-tab-pill; }
.lab-main { view-transition-name: none; }
::view-transition, ::view-transition-group(*), ::view-transition-image-pair(*),
::view-transition-old(*), ::view-transition-new(*) { pointer-events: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(site-nav), ::view-transition-group(site-tabbar),
::view-transition-group(site-content) { animation: none; }
::view-transition-old(site-nav), ::view-transition-new(site-nav),
::view-transition-old(site-tabbar), ::view-transition-new(site-tabbar) { animation: none; mix-blend-mode: normal; }
::view-transition-old(site-content) { animation: paneOut .22s var(--motion-ease) both; }
::view-transition-new(site-content) { animation: paneIn .44s var(--motion-ease) both; }
@keyframes paneOut { to { opacity: 0; transform: translateY(-10px) scale(.995); } }
@keyframes paneIn { from { opacity: 0; transform: translateY(18px) scale(.99); } }
::view-transition-group(site-nav-pill), ::view-transition-group(site-tab-pill) {
  animation-duration: .46s; animation-timing-function: var(--motion-ease);
}
::view-transition-old(site-nav-pill), ::view-transition-new(site-nav-pill),
::view-transition-old(site-tab-pill), ::view-transition-new(site-tab-pill) { animation: none; mix-blend-mode: normal; }

/* Theme reveal remains a single root snapshot; no detached floating chrome. */
html.theme-vt :is(#nav, #app, #tabbar, .lab-main, .seg-pill, .tab-pill, .side-ind, .strip-ind, .lab-strip, .stage) { view-transition-name: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .settings-pop, .pressable, .btn { transition-duration: .12s; }
}