/* Parasol, third design: faded pink skincare palette. White page, blush surfaces,
   soft rose accent, near-black ink. Editorial serif display, Atkinson Hyperlegible
   Next for reading. Near-black ink panels carry the analysis, weather and timer blocks.
   Themes: light (default), gentle dark (ink), low-vision (AAA, bigger). */

:root {
  color-scheme: light;
  --page: #ffffff;
  --card: #fdf5f5;           /* near-white blush card */
  --beige: #fbedee;          /* blush surface */
  --beige-2: #f6dfe2;        /* blush surface, deeper */
  --sand: #efc9ce;           /* deeper blush: borders, tracks */
  --blush: #fbedee;          /* hero band */
  --rose: #d88a96;           /* fills and large shapes, ink text on it */
  --line: rgba(30, 26, 27, 0.08);
  --line-strong: #8a7479;    /* input borders, 4.3:1 on white */
  --ink: #1e1a1b;
  --ink-2: #6b5f62;          /* secondary text, 4.8:1 on deepest blush */
  --ink-3: #6b5f62;
  --accent: #9a4352;         /* rose ink: links and text, 5:1 on deepest blush */
  --on-accent: #ffffff;
  --accent-soft: #f6dfe2;
  --btn: #1e1a1b;            /* primary pill */
  --on-btn: #ffffff;
  --warn: #a63a2b;           /* brick red for sun/people warnings */
  --warn-soft: #fbe3dc;
  --ok: #3f6b3a;
  --focus: #1e1a1b;
  --focus-gap: #ffffff;

  /* ink panel */
  --dk: #1e1a1b;
  --dk-2: #2c2627;
  --dk-3: #3d3537;
  --dk-ink: #fff5f6;
  --dk-ink-2: #e0cdd1;
  --dk-rose: #f0a9b4;        /* rose highlight on ink, 7.8:1 */
  --dk-line: rgba(255, 245, 246, 0.16);
  --glass: rgba(255, 245, 246, 0.12);

  --uv-low: #4f8a3f; --uv-mod: #c99a1c; --uv-high: #d9772b; --uv-vhigh: #c8402e; --uv-ext: #8b5bc7;
  --shadow: 0 18px 40px -18px rgba(30, 26, 27, 0.22);
  --shadow-sm: 0 2px 10px -4px rgba(30, 26, 27, 0.1);
  --mark-bg: #1e1a1b; --mark-fg: #d88a96; --mark-ink: #fff5f6;
  --img-filter: none;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-label: 0.9375rem;
  --lh: 1.55;
  --r-xs: 0.5rem; --r-sm: 0.75rem; --r: 0.75rem; --r-lg: 1.75rem; --r-xl: 2.25rem; --r-pill: 999px;
  --gap: 1.25rem;
  --tap: 48px;
  --col: 34rem;
  --bnav-h: 96px;
}

/* Gentle dark: the ink palette with blush text accents. No pure black. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #161213;
  --card: #1e1a1b;
  --beige: #262022;
  --beige-2: #2f282a;
  --sand: #4a3d40;
  --blush: #262022;
  --rose: #d88a96;
  --line: rgba(255, 245, 246, 0.12);
  --line-strong: #a8959a;
  --ink: #f6ecee;
  --ink-2: #dcc9cd;
  --ink-3: #cdb8bd;
  --accent: #f0a9b4;
  --on-accent: #161213;
  --accent-soft: #3d3033;
  --btn: #f6ecee;
  --on-btn: #161213;
  --warn: #f3a08a;
  --warn-soft: #3f2622;
  --ok: #a9d39b;
  --focus: #f6dfe2;
  --focus-gap: #161213;
  --dk: #221d1e;
  --dk-2: #2f282a;
  --dk-3: #40373a;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  --shadow-sm: none;
  --mark-bg: #d88a96; --mark-fg: #1e1a1b; --mark-ink: #1e1a1b;
  --img-filter: brightness(0.88);
}

/* Low-vision: 24px text, 1.6 line height, AAA (7:1) text, bigger targets. */
:root[data-lv="1"] {
  --fs-body: 1.5rem;
  --fs-small: 1.25rem;
  --fs-label: 1.1875rem;
  --lh: 1.6;
  --tap: 56px;
  --ink-2: #4a4043;
  --ink-3: #4a4043;
  --accent: #73293a;
  --warn: #7a2a1e;
  --line: #8a7479;
  --dk-ink-2: #eedfe2;
  --col: 44rem;
}
:root[data-lv="1"][data-theme="dark"] {
  --ink: #fff7f8;
  --ink-2: #ede0e3;
  --ink-3: #e4d4d8;
  --accent: #f6c4cc;
  --warn: #ffc2b0;
  --line: #a8959a;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh); min-height: 100vh; overflow-x: hidden; }
body.has-bottom-nav { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px)); }
img { max-width: 100%; display: block; filter: var(--img-filter); }
h1, h2, h3, h4 { font-family: var(--f-display); color: inherit; margin: 0; font-weight: 400; letter-spacing: 0; font-optical-sizing: auto; }
h1 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.015em; }
h2 { font-size: 1.5rem; line-height: 1.2; }
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 500; }
:root[data-lv="1"] h1 { font-size: 2.5rem; }
:root[data-lv="1"] h2 { font-size: 1.875rem; }
:root[data-lv="1"] h3 { font-size: 1.5rem; }
:root[data-lv="1"] h1, :root[data-lv="1"] h2, :root[data-lv="1"] h3 { font-weight: 500; }
h1:focus, h2:focus { outline: none; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
:root[data-lv="1"] a { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-gap); border-radius: 8px; }
.dk :focus-visible, .bottom-nav :focus-visible { outline-color: #fff5f6; box-shadow: 0 0 0 2px #1e1a1b; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--ink); color: var(--page); padding: 0.75rem 1rem; border-radius: var(--r-sm); font-weight: 500; }
.skip:focus { top: 0.75rem; }
.muted { color: var(--ink-2); }
.subtle { color: var(--ink-3); }
.block { display: block; }
.small { font-size: var(--fs-small); }
.tnum { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: var(--gap); }
.stack-sm > * + * { margin-top: 0.75rem; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 0.75rem; }
.spread { justify-content: space-between; }
.center { text-align: center; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
[hidden] { display: none !important; }
.mt-0 { margin-top: 0 !important; }

@media (prefers-reduced-motion: no-preference) {
  .spin { animation: spin 3s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; background: color-mix(in srgb, var(--page) 90%, transparent); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; min-height: var(--tap); min-width: 0; }
.brand .mark { flex: none; border-radius: 50%; }
.brand-txt { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: 0; }
.brand-sub { font-size: 0.875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.icon-btn { width: var(--tap); height: var(--tap); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); background: transparent; color: var(--ink); text-decoration: none; flex: none; }
.icon-btn .ic { width: 24px; height: 24px; }
.icon-btn:hover { background: var(--beige); }
.icon-btn.aa { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; }
.icon-btn.aa.on, .icon-btn.speak.on, .icon-btn[aria-current="page"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.icon-btn.speak .i-off, .icon-btn.speak.on .i-on { display: none; }
.icon-btn.speak.on .i-off { display: inline; }
.topnav { display: none; }
@media (max-width: 400px) { .brand-sub { display: none; } }

.display-panel { position: sticky; top: 64px; z-index: 19; padding: 0 1rem; }
.dp-inner { max-width: 30rem; margin: 0.5rem 0 0 auto; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1.5rem; display: grid; gap: 1rem; border: 1px solid var(--line); }
.dp-head { display: flex; justify-content: space-between; align-items: center; }
@media (min-width: 960px) { .display-panel { position: absolute; right: 2rem; top: 84px; width: 28rem; padding: 0; } }

/* ---------- layout ---------- */
main { display: block; max-width: var(--col); margin: 0 auto; padding: 0.75rem 1.25rem 2rem; outline: none; }
main > * + *, #view > * + *, #day > * + * { margin-top: var(--gap); }
:where(.cols) > * + * { margin-top: var(--gap); }
.cols > * > * + * { margin-top: var(--gap); }
@media (min-width: 960px) {
  :root, :root[data-lv="1"] { --col: 76rem; }
  main { padding: 1.5rem 2.5rem 3rem; }
  .topbar { padding: 1rem 2.5rem; }
  /* the deep brown rounded nav bar */
  .topnav { display: flex; gap: 0.25rem; margin: 0 auto; background: var(--dk); padding: 0.5rem; border-radius: var(--r-pill); }
  .topnav a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: var(--r-pill); color: var(--dk-ink-2); text-decoration: none; font-weight: 500; font-size: var(--fs-label); }
  .topnav a .ic { width: 20px; height: 20px; }
  .topnav a:hover { color: var(--dk-ink); background: var(--dk-2); }
  .topnav a[aria-current="page"] { background: var(--rose); color: #1e1a1b; }
  .topnav :focus-visible { outline-color: #fff5f6; }
  body.has-bottom-nav { padding-bottom: 0; }
  .bottom-nav { display: none !important; }
  .cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
  .cols > * + * { margin-top: 0; }
  .cols-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .sticky-col { position: sticky; top: 100px; }
  .narrow { max-width: 42rem; margin-left: auto; margin-right: auto; }
  h1 { font-size: 3rem; }
}

/* ---------- floating pill bottom nav ---------- */
.bottom-nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 20;
  width: min(26rem, calc(100% - 1.5rem));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem;
  background: var(--dk); padding: 0.5rem; border-radius: var(--r-pill); box-shadow: 0 16px 36px -12px rgba(30, 26, 27, 0.55);
}
:root[data-theme="dark"] .bottom-nav { background: #2c2627; border: 1px solid var(--dk-line); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-height: 56px; color: var(--dk-ink-2); text-decoration: none; font-size: 0.8125rem; font-weight: 500; border-radius: var(--r-pill); }
.bottom-nav a .ic { width: 24px; height: 24px; }
.bottom-nav a[aria-current="page"] { background: var(--rose); color: #1e1a1b; }
:root[data-lv="1"] .bottom-nav a { font-size: 1rem; min-height: 64px; }
:root[data-lv="1"] { --bnav-h: 104px; }

/* ---------- demo ribbon ---------- */
.ribbon { max-width: var(--col); margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 1rem; font-size: var(--fs-label); color: var(--ink-2); }
.ribbon > * { margin: 0; }
.rb-step { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.rb-label { color: var(--ink-3); }
.rb-next { display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--tap); color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rb-next:hover { text-decoration-thickness: 2px; }
.rb-next .ic { width: 18px; height: 18px; }
@media (max-width: 599px) { .ribbon .rb-label { display: none; } }
:root[data-lv="1"] .rb-next { text-decoration-thickness: 2px; }
@media (min-width: 960px) { .ribbon { padding: 0 2.5rem; } }

/* ---------- footer ---------- */
.foot { max-width: var(--col); margin: 0 auto; padding: 1.5rem 1.25rem 2rem; text-align: center; color: var(--ink-2); font-size: var(--fs-small); display: grid; gap: 0.25rem; }
.foot-links { margin-top: 0.5rem; }

/* ---------- surfaces ---------- */
.card { background: var(--card); border-radius: var(--r-lg); padding: 1.5rem; }
:root[data-lv="1"] .card { border: 2px solid var(--line); }
.card-tint { background: var(--beige); border-radius: var(--r-lg); padding: 1.5rem; }
.card-tint-2 { background: var(--beige-2); border-radius: var(--r); padding: 1rem; }
.card-warm { background: var(--warn-soft); color: var(--ink); border-radius: var(--r-lg); padding: 1.5rem; }
.card-blue { background: var(--beige-2); color: var(--ink); border-radius: var(--r-lg); padding: 1.5rem; }
.card > * + *, .card-tint > * + *, .card-warm > * + *, .card-blue > * + *, .dk > * + * { margin-top: 0.75rem; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card-head h2, .card-head h3 { display: flex; align-items: center; gap: 0.5rem; }
.eyebrow { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.01em; color: var(--ink-2); display: flex; align-items: center; gap: 0.5rem; }
.lede { font-size: 1.125rem; color: var(--ink-2); max-width: 40rem; }
.page-head > * + * { margin-top: 0.5rem; }
.page-head h1 { font-weight: 300; }
:root[data-lv="1"] .page-head h1 { font-weight: 500; }
.page-head h1 em, .hero h1 em, .hero h1 .accent { font-style: normal; color: var(--accent); }

/* espresso panel */
.dk { background: var(--dk); color: var(--dk-ink); border-radius: var(--r-xl); padding: 1.5rem; position: relative; overflow: hidden; }
.dk .muted, .dk .subtle { color: var(--dk-ink-2); }
.dk a { color: var(--dk-ink); }
.dk .eyebrow { color: var(--dk-ink-2); }
.dk .credit { color: var(--dk-ink-2); }
.dk-tile { background: var(--dk-2); border-radius: var(--r); padding: 1rem; }
.glass { background: var(--glass); border: 1px solid var(--dk-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--r); }

/* ---------- badges, chips, pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: var(--r-xs); font-size: var(--fs-label); font-weight: 500; line-height: 1.35; white-space: nowrap; }
.badge .ic { width: 1.05em; height: 1.05em; }
.badge-warm { background: var(--warn-soft); color: var(--warn); }
:root[data-lv="1"] .badge-warm { color: var(--ink); }
.badge-blue, .badge-neutral { background: var(--beige-2); color: var(--ink); }
.badge-amber { background: var(--accent-soft); color: var(--ink); }
.badge-solid { background: var(--accent); color: var(--on-accent); }
.badge-glass { background: var(--glass); border: 1px solid var(--dk-line); color: var(--dk-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 32px; padding: 0.125rem 0.75rem; border-radius: var(--r-xs); background: var(--page); color: var(--ink-2); font-size: 0.875rem; font-weight: 500; border: 1px solid var(--line); }
:root[data-lv="1"] .chip { font-size: 1.0625rem; }
.dk .chip { background: var(--glass); color: var(--dk-ink); border-color: var(--dk-line); }

/* filter pills (kit) */
.filters { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0.125rem 0.5rem; scrollbar-width: thin; }
.filter { flex: none; min-height: var(--tap); padding: 0 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--sand); background: transparent; color: var(--ink); font-weight: 500; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 56px; padding: 0.75rem 1.5rem; border-radius: var(--r-pill); font-weight: 500; font-size: 1.0625rem; text-decoration: none; border: 2px solid transparent; text-align: center; line-height: 1.25; }
:root[data-lv="1"] .btn { font-size: 1.3125rem; min-height: 64px; }
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: color-mix(in srgb, var(--btn) 84%, var(--rose)); }
/* the small rose arrow dot, like "Discover now ●" */
.btn-primary .ic-arrow, .btn-primary .ic-go, .btn-primary .ic-external { background: var(--rose); color: #1e1a1b; border-radius: 50%; padding: 8px; width: 32px; height: 32px; margin-right: -0.75rem; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-blue { background: var(--dk-ink); color: var(--dk); }
.btn-soft { background: var(--beige-2); color: var(--ink); }
.dk .btn-secondary { color: var(--dk-ink); border-color: var(--dk-line); background: var(--dk-2); }
.dk .btn-primary { background: var(--dk-ink); color: var(--dk); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0.5rem 0; min-height: var(--tap); color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 0.5rem; }
.dk .link-btn { color: var(--dk-ink); }

/* ---------- forms ---------- */
.field { display: grid; gap: 0.5rem; }
.field label, .label { font-weight: 500; font-size: var(--fs-label); display: flex; justify-content: space-between; gap: 0.5rem; }
.input, .field input[type="text"], .field input[type="search"], .field input[type="date"], .field input[type="number"], .field select { min-height: 52px; width: 100%; padding: 0.75rem 1rem; border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--page); color: var(--ink); }
.field input:focus-visible { border-color: var(--ink); }
.field .hint { font-size: var(--fs-small); color: var(--ink-2); }
.err { color: var(--warn); font-weight: 500; font-size: var(--fs-small); }
input[type="range"] { width: 100%; min-height: var(--tap); accent-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.check-row { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 52px; padding: 0.75rem 1rem; border-radius: var(--r); background: var(--beige); cursor: pointer; }
.check-row input[type="checkbox"], .check-row input[type="radio"] { width: 24px; height: 24px; margin: 0.125rem 0 0; flex: none; }
:root[data-lv="1"] .check-row input { width: 32px; height: 32px; }
.dk .check-row { background: var(--dk-2); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; width: 60px; height: 32px; border-radius: 999px; background: var(--beige-2); border: 2px solid var(--line-strong); position: relative; flex: none; cursor: pointer; margin: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--line-strong); transition: transform 0.15s; }
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(28px); background: var(--on-accent); }
.dk .switch { background: var(--dk-3); border-color: var(--dk-ink-2); }
.dk .switch:checked { background: var(--dk-ink); border-color: var(--dk-ink); }
.dk .switch:checked::after { background: var(--dk); }
.seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seg legend { font-weight: 500; font-size: var(--fs-label); margin-bottom: 0.5rem; padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.seg span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--sand); font-weight: 500; cursor: pointer; }
.seg input:checked + span { background: var(--ink); color: var(--page); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.dk .seg span { border-color: var(--dk-line); color: var(--dk-ink); }
.dk .seg input:checked + span { background: var(--dk-ink); color: var(--dk); }
.note { padding: 0.75rem 1rem; border-radius: var(--r); background: var(--beige); color: var(--ink-2); font-size: var(--fs-small); }
.note > .ic { color: var(--accent); margin-right: 0.25rem; }
.dk .note { background: var(--dk-2); color: var(--dk-ink-2); }
fieldset.card { border: 0; margin: 0; min-width: 0; }
fieldset.card > legend { padding: 0; float: left; width: 100%; }
fieldset.card > legend + * { clear: both; }

/* segmented toggle (Morning / Evening, tabs) */
.toggle { display: inline-flex; padding: 0.25rem; border-radius: var(--r-pill); background: var(--beige-2); gap: 0.25rem; }
.toggle [role="tab"], .toggle button { min-height: 44px; padding: 0 1.25rem; border-radius: var(--r-pill); border: 0; background: transparent; font-weight: 500; color: var(--ink-2); }
.toggle [aria-selected="true"], .toggle [aria-pressed="true"] { background: var(--ink); color: var(--page); }
.dk .toggle { background: var(--dk-2); }
.dk .toggle [role="tab"], .dk .toggle button { color: var(--dk-ink-2); }
.dk .toggle [aria-selected="true"], .dk .toggle [aria-pressed="true"] { background: var(--dk-ink); color: var(--dk); }
:root[data-lv="1"] .toggle [role="tab"], :root[data-lv="1"] .toggle button { min-height: var(--tap); }

/* ---------- alerts, loading ---------- */
.alert { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1rem; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); }
.alert > .ic { color: var(--warn); margin-top: 0.125rem; }
.alert > div > * + * { margin-top: 0.5rem; }
.alert-info { background: var(--beige-2); }
.alert-info > .ic { color: var(--accent); }
.loading { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem; color: var(--ink-2); font-weight: 500; justify-content: center; }
.loading .ic { color: var(--accent); width: 28px; height: 28px; }

/* ---------- landing (ref: Solnex: blush hero, white product band) ---------- */
.hero { display: grid; gap: 1.5rem; background: var(--blush); border-radius: var(--r-xl); padding: 1.5rem 1.25rem 1.25rem; }
.hero-copy > * + * { margin-top: 1rem; }
.hero h1 { font-size: 2.75rem; line-height: 1.04; font-weight: 500; letter-spacing: -0.02em; }
:root[data-lv="1"] .hero h1 { font-size: 2.75rem; }
.hero .lede { font-size: 1.125rem; color: var(--ink-2); }
.checks { list-style: none; margin: 0; padding: 0.25rem 0 0; display: grid; gap: 0.5rem; }
.checks li { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; font-size: var(--fs-small); }
.checks .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--rose); color: #1e1a1b; display: grid; place-items: center; flex: none; }
.checks .ck .ic { width: 14px; height: 14px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.5rem; }
.hero-photo { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--beige-2); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.hero-photo .credit { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: fit-content; margin-left: auto; color: #fff5f6; font-size: 0.75rem; line-height: 1.35; text-align: right; }
.hero-photo .hp-tag { position: absolute; left: 1rem; top: 1rem; background: rgba(255, 255, 255, 0.85); color: #1e1a1b; border: 0; }
.hero-wide .hero-photo { aspect-ratio: 1600 / 892; }
.hero-wide .hero-photo img { object-position: 50% 40%; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; padding: 3.5rem 3rem 3rem 4rem; align-items: center; }
  .hero h1 { font-size: 4.5rem; letter-spacing: -0.03em; }
  :root[data-lv="1"] .hero h1 { font-size: 4rem; }
  .hero-photo { aspect-ratio: auto; height: 100%; min-height: 32rem; }
  .hero-wide { grid-template-columns: minmax(0, 1fr); padding: 3.5rem 3rem 3rem; }
  .hero-wide .hero-copy { max-width: 46rem; }
  .hero-wide .hero-photo { aspect-ratio: 1600 / 892; height: auto; min-height: 0; }
  .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
  .home-grid > * + * { margin-top: 0; }
}
.choice { width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left; min-height: 80px; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-radius: var(--r-xl); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; }
.choice .c-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--beige-2); }
.choice .c-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.choice .c-title { font-family: var(--f-display); font-size: 1.375rem; font-weight: 400; line-height: 1.2; }
.choice .c-sub { color: var(--ink-2); font-size: var(--fs-small); }
.choice .c-go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ink); color: var(--page); }
.choice-primary { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
.choice-primary .c-sub { color: var(--on-btn); opacity: 0.9; }
.choice-primary .c-ic { background: color-mix(in srgb, var(--on-btn) 14%, transparent); }
.choice-primary .c-go { background: var(--rose); color: #1e1a1b; }
.choice-blue .c-ic { background: var(--beige-2); }
.facts { display: grid; gap: 0.5rem; }
.fact { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--page); border-radius: var(--r); padding: 1rem; }
.fact .f-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--beige-2); color: var(--ink); }
.fact .f-ic .ic { width: 18px; height: 18px; }
.fact strong { display: block; line-height: 1.3; }
.fact span { color: var(--ink-2); font-size: var(--fs-small); }
.personas { display: grid; gap: 0.75rem; }
.persona { display: flex; gap: 1rem; align-items: center; width: 100%; text-align: left; padding: 0.75rem 1rem 0.75rem 0.75rem; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--page); color: var(--ink); min-height: 96px; }
.persona:hover { border-color: var(--accent); }
.persona .p-face { width: 72px; height: 72px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.5rem; overflow: hidden; background: var(--sand); }
.persona .p-face img { width: 100%; height: 100%; object-fit: cover; }
.persona .p-txt { flex: 1; }
.persona .p-name { font-family: var(--f-display); font-size: 1.375rem; display: block; }
.persona .p-line { color: var(--ink-2); display: block; font-size: var(--fs-small); }
.persona .p-start { font-family: var(--f-body, inherit); font-size: 0.8125rem; vertical-align: middle; margin-left: 0.375rem; }
.fitz-note-strong { font-weight: 600; color: var(--ink); }
.stat-line { color: var(--ink-2); max-width: 40rem; }
.persona .p-trip { color: var(--accent); font-weight: 500; font-size: 0.9375rem; display: block; margin-top: 0.125rem; }
.persona > .ic { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--ink); color: var(--page); }

/* ---------- scan: capture ---------- */
.stepper { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: var(--r-xs); background: var(--beige-2); font-weight: 500; font-size: var(--fs-label); }
.stepper::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.consent { display: flex; gap: 1rem; align-items: flex-start; }
.consent .c-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); flex: none; display: grid; place-items: center; color: var(--page); }
.consent .c-dot .ic { width: 18px; height: 18px; }
.viewfinder { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--dk); min-height: 22rem; display: grid; place-items: center; color: var(--dk-ink); }
.viewfinder img.preview { width: 100%; max-height: 30rem; object-fit: contain; }
.vf-guide { position: absolute; inset: 14% 22%; border: 2px dashed rgba(255, 245, 246, 0.7); border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%; pointer-events: none; }
.vf-tag { position: absolute; left: 1rem; top: 1rem; display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.25rem 0.75rem; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.01em; border-radius: var(--r-xs); }
.vf-hint { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); padding: 0.5rem 1rem; font-weight: 500; white-space: nowrap; font-size: var(--fs-label); }
.vf-empty { text-align: center; padding: 2rem; max-width: 16rem; position: relative; z-index: 1; color: var(--dk-ink-2); }
.tips { display: grid; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.tip { display: flex; gap: 0.75rem; align-items: center; background: var(--card); border-radius: var(--r); padding: 0.75rem 1rem; }
.tip .t-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--beige-2); flex: none; }
.tip strong { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.125rem; }
.tip span { color: var(--ink-2); font-size: var(--fs-small); }
.shutter { display: grid; justify-items: center; gap: 0.5rem; }
.shutter-btn { width: 84px; height: 84px; border-radius: 50%; border: 5px solid var(--page); background: var(--btn); color: var(--on-btn); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 2px var(--rose); }
.shutter-btn .ic { width: 32px; height: 32px; }
.shutter label { font-family: var(--f-display); font-size: 1.25rem; }
.upload-btn { width: 100%; min-height: 60px; border-radius: var(--r-pill); border: 1.5px solid var(--sand); display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-weight: 500; cursor: pointer; padding: 0.75rem 1.25rem; }
.file-hidden { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-hidden:focus-visible + .shutter-btn, .file-hidden:focus-visible + .upload-btn { outline: 3px solid var(--focus); outline-offset: 3px; }
.progress-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.progress-steps li { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border-radius: var(--r); background: var(--card); color: var(--ink-2); font-weight: 500; }
.progress-steps li[data-s="now"] { background: var(--ink); color: var(--page); }
.progress-steps li[data-s="done"] { color: var(--ink); }
.progress-steps li[data-s="done"] .ic { color: var(--ok); }

/* ---------- scan result (ref: dark AI skincare app) ---------- */
.analysis { padding: 1.25rem 1.25rem 1.5rem; }
.face-stage { position: relative; margin: 0.5rem auto 0; max-width: 24rem; }
.face-stage .fs-photo { position: relative; width: 62%; margin: 0 auto; aspect-ratio: 3 / 4; border-radius: 48% 48% 44% 44% / 40% 40% 36% 36%; overflow: hidden; background: var(--dk-2); }
.face-stage .fs-photo img { width: 100%; height: 100%; object-fit: cover; }
.face-stage .fs-photo img.mask { position: absolute; inset: 0; opacity: 0.9; }
.face-stage svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.face-stage svg.lines path { stroke: rgba(255, 245, 246, 0.55); stroke-width: 1; fill: none; }
.face-stage svg.lines circle { fill: #fff5f6; }
.mtag { position: absolute; padding: 0.25rem 0.75rem; border-radius: var(--r-xs); min-width: 6.5rem; line-height: 1.2; }
.mtag .mt-k { display: block; font-size: 0.75rem; color: var(--dk-ink-2); font-weight: 500; letter-spacing: 0.02em; }
.mtag .mt-v { display: block; font-weight: 500; font-size: 0.9375rem; color: var(--dk-ink); }
:root[data-lv="1"] .mtag .mt-k { font-size: 0.9375rem; }
:root[data-lv="1"] .mtag .mt-v { font-size: 1.125rem; }
.mtag.t1 { left: 0; top: 8%; } .mtag.t2 { right: 0; top: 18%; } .mtag.t3 { left: 0; top: 58%; } .mtag.t4 { right: 0; top: 66%; }
@media (max-width: 380px) { .mtag { min-width: 5.5rem; padding: 0.25rem 0.5rem; } }
:root[data-lv="1"] .face-stage .mtag { position: static; display: inline-block; margin: 0.25rem; }
:root[data-lv="1"] .face-stage svg.lines { display: none; }
:root[data-lv="1"] .face-stage .fs-photo { width: 70%; margin-bottom: 0.75rem; }
.gauge { position: relative; width: min(17rem, 86%); margin: 0.5rem auto 0; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge .g-track { stroke: var(--dk-3); }
.gauge .g-fill { stroke: var(--dk-rose); }
.gauge .g-in { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.gauge .g-big { font-size: 3.5rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.gauge .g-big small { font-size: 1.5rem; font-weight: 500; }
.gauge .g-lab { color: var(--dk-ink-2); font-size: var(--fs-small); }
.card .gauge .g-track, .gauge.light .g-track { stroke: var(--beige-2); }
.card .gauge .g-fill, .gauge.light .g-fill { stroke: var(--accent); }
.card .gauge .g-lab { color: var(--ink-2); }
.tabs-bar { display: flex; justify-content: center; }
.tabpanel { margin-top: 1rem; }
.tabpanel > * + * { margin-top: 1rem; }
.face-wrap { background: var(--beige); border-radius: var(--r); padding: 1rem; }
.face-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-weight: 500; font-size: var(--fs-small); }
.face-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.face-svg { width: 100%; max-width: 14rem; margin: 0.5rem auto 0; display: block; }
.face-svg .head { fill: var(--page); stroke: var(--sand); }
.face-svg .feat { stroke: var(--line-strong); }
.face-svg .eye { fill: var(--ink-2); }
.face-svg text { font-family: var(--f-body); font-weight: 500; }
.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.bar-row { display: grid; gap: 0.5rem; }
.bar-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.bar-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.bar-name .b-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--beige-2); flex: none; }
.bar-name .b-ic .ic { width: 18px; height: 18px; }
.bar-val { font-weight: 500; text-align: right; white-space: nowrap; }
.bar-val.watch { color: var(--accent); }
.bar-val.strong { color: var(--warn); }
.bar-track { height: 8px; border-radius: 999px; background: var(--beige-2); overflow: hidden; }
:root[data-lv="1"] .bar-track { height: 16px; outline: 1.5px solid var(--line); }
.bar-fill { height: 100%; border-radius: 999px; background: var(--ink); }
.bar-fill.watch { background: var(--accent); }
.bar-fill.strong { background: var(--warn); }
.dk .bar-track { background: var(--dk-3); }
.dk .bar-fill { background: var(--dk-ink); }
.dk .bar-name .b-ic { background: var(--dk-2); }
.fitz-scale { border: 0; padding: 0; margin: 0; }
.fitz-scale legend { padding: 0; }
.fitz-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.fitz-row label { position: relative; display: grid; justify-items: center; gap: 0.25rem; cursor: pointer; }
.fitz-row input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fitz-sw { width: 100%; aspect-ratio: 1; min-height: var(--tap); border-radius: 50%; display: grid; place-items: center; font-weight: 500; border: 2px solid transparent; font-family: var(--f-display); }
.fitz-row .f-cap { font-size: 0.875rem; color: var(--ink-2); text-align: center; line-height: 1.2; }
:root[data-lv="1"] .fitz-row .f-cap { font-size: 1rem; }
.fitz-row input:checked + .fitz-sw { box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--ink); }
.fitz-row input:checked ~ .f-cap { color: var(--ink); font-weight: 500; }
.fitz-row input:focus-visible + .fitz-sw { outline: 3px solid var(--focus); outline-offset: 5px; }
.fz1 { background: #f7e9df; color: #4a362a; } .fz2 { background: #ecd3be; color: #4a362a; } .fz3 { background: #d8b394; color: #33231a; }
.fz4 { background: #b4825e; color: #fff; } .fz5 { background: #87573a; color: #fff; } .fz6 { background: #4b3124; color: #fff; }
.mask-view { position: relative; border-radius: var(--r); overflow: hidden; background: var(--beige); max-width: 22rem; margin: 0 auto; }
.mask-view img { width: 100%; }
.mask-view img.mask { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0.85; }
.credit { font-size: 0.8125rem; color: var(--ink-3); }
:root[data-lv="1"] .credit { font-size: 1.0625rem; color: var(--ink-2); }
.tone-sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); flex: none; }

/* ---------- weather blocks (ref: dark weather app) ---------- */
.big { font-family: var(--f-body); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 0.95; }
.big-xl { letter-spacing: -0.03em; }
.big-xl { font-size: 5.5rem; }
.big-l { font-size: 3.25rem; }
.big small, .big .u { font-size: 0.4em; font-weight: 500; letter-spacing: 0; vertical-align: 0.9em; margin-left: 0.05em; }
:root[data-lv="1"] .big-xl { font-size: 5rem; }
.city-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 21rem; color: #fff5f6; background: var(--dk); display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; isolation: isolate; }
.city-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.city-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 17, 18, 0.55) 0%, rgba(22, 17, 18, 0.1) 35%, rgba(22, 17, 18, 0.35) 55%, rgba(22, 17, 18, 0.92) 100%); }
.city-hero .ch-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.city-hero h2 { font-size: 1.875rem; font-weight: 400; line-height: 1.1; }
.city-hero .ch-sub { color: #f3e6e8; font-weight: 500; font-size: var(--fs-small); }
.city-hero .ch-nums { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.city-hero .ch-cap { color: #f3e6e8; font-size: var(--fs-small); font-weight: 500; }
.city-hero .credit { color: #eedfe2; font-size: 0.75rem; }
.city-hero .badge-glass { color: #fff5f6; }
.city-hero.no-photo { background: var(--dk); }
.city-hero.no-photo::after { content: none; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.stat-row.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .stat-row.four { grid-template-columns: repeat(4, 1fr); } }
.stat { border-radius: var(--r); padding: 1rem; display: grid; gap: 0.25rem; background: var(--dk-2); color: var(--dk-ink); }
.card .stat, .stat.light { background: var(--beige); color: var(--ink); }
.stat .s-lab { font-size: 0.875rem; color: var(--dk-ink-2); font-weight: 500; display: flex; gap: 0.5rem; align-items: center; }
.card .stat .s-lab { color: var(--ink-2); }
.stat .s-val { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.1; }
.stat .s-val small { font-size: 0.55em; font-weight: 500; }
.stat .s-note { font-size: 0.8125rem; color: var(--dk-ink-2); }
:root[data-lv="1"] .stat .s-lab, :root[data-lv="1"] .stat .s-note { font-size: 1.0625rem; }
.day-chips { position: relative; display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0.125rem 0.5rem; scrollbar-width: thin; }
.day-chip { flex: none; min-width: 5.25rem; padding: 0.75rem 0.75rem; border-radius: 1.5rem; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); display: grid; justify-items: center; gap: 0.125rem; font-weight: 500; text-align: center; line-height: 1.2; }
.day-chip .dc-d { font-size: 0.8125rem; color: var(--ink-2); }
.day-chip .dc-t { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.day-chip .dc-c { font-size: 0.75rem; color: var(--ink-3); max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-chip .uvdot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 0.6875rem; }
.day-chip[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.day-chip[aria-pressed="true"] .dc-d, .day-chip[aria-pressed="true"] .dc-c { color: var(--sand); }
:root[data-lv="1"] .day-chip .dc-d, :root[data-lv="1"] .day-chip .dc-c { font-size: 1rem; }
.trip-strip { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-family: var(--f-display); font-size: 1.25rem; }
.trip-strip .ic { color: var(--ink-3); width: 18px; }
.headline-box { display: flex; gap: 0.75rem; align-items: flex-start; }
.headline-box .h-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--warn); color: #fff; display: grid; place-items: center; flex: none; }
:root[data-theme="dark"] .headline-box .h-ic { color: var(--on-accent); }
.headline-box .h-lab { color: var(--warn); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.01em; }
.headline-box .h-txt { font-family: var(--f-display); font-size: 1.375rem; line-height: 1.3; }
.plan { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; counter-reset: plan; }
.plan li { background: var(--page); border-radius: var(--r); padding: 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.75rem; counter-increment: plan; }
.plan li::before { content: counter(plan, decimal-leading-zero); font-family: var(--f-display); font-size: 1.125rem; color: var(--accent); margin-top: 0.05rem; }
.plan .p-text { font-weight: 500; }
.plan .p-why { grid-column: 2; color: var(--ink-2); font-size: var(--fs-small); border-left: 3px solid var(--sand); padding-left: 0.75rem; }
.alertpill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: var(--r-xs); background: var(--warn); color: #fff; font-weight: 500; font-size: var(--fs-label); white-space: nowrap; }
:root[data-theme="dark"] .alertpill { color: var(--on-accent); }
.kind-tag { font-size: var(--fs-label); font-weight: 500; }

/* UV semicircle gauge */
.uvg { position: relative; width: min(15rem, 80%); margin: 0.25rem auto 0; }
.uvg svg { width: 100%; height: auto; display: block; overflow: visible; }
.uvg .uvg-in { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.uvg .uvg-lab { color: var(--dk-ink-2); font-weight: 500; font-size: var(--fs-small); }
.card .uvg .uvg-lab { color: var(--ink-2); }
.uvg .needle { fill: var(--dk-ink); stroke: var(--dk); stroke-width: 3; }
.card .uvg .needle { fill: var(--ink); stroke: var(--card); }

/* burn clock dial (round) */
.dial { position: relative; width: min(15rem, 78%); aspect-ratio: 1; margin: 0.5rem auto; }
.dial > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial .d-track { stroke: var(--dk-3); }
.dial .d-ring { stroke: var(--uv-c, var(--dk-ink)); transition: stroke-dashoffset 0.6s; }
.dial .d-face { fill: transparent; }
.dial-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 0.25rem; padding: 16%; }
.dial-in .d-big { font-weight: 600; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dial-in .d-unit { font-size: 1.125rem; font-weight: 500; letter-spacing: 0; }
.dial-in .d-lab { color: var(--dk-ink-2); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.01em; display: inline-flex; gap: 0.25rem; align-items: center; }
.dial-in .d-sub { color: var(--dk-ink-2); font-weight: 500; font-size: 0.875rem; display: inline-flex; gap: 0.25rem; align-items: center; }
.dial-in .d-lab .ic, .dial-in .d-sub .ic { width: 16px; height: 16px; }
:root[data-lv="1"] .dial-in .d-lab, :root[data-lv="1"] .dial-in .d-sub { font-size: 1rem; }
.protect { display: flex; gap: 0.75rem; align-items: center; border-radius: var(--r); padding: 1rem 1rem; background: var(--dk-2); }
.protect .ic { width: 32px; height: 32px; color: var(--uv-mod); }
.protect .p-lab { color: var(--dk-ink-2); font-weight: 500; font-size: var(--fs-label); }
.protect .p-val { font-weight: 500; }
.card .protect { background: var(--beige); }
.card .protect .p-lab { color: var(--ink-2); }
details.more { border-radius: var(--r); background: var(--beige); }
.dk details.more { background: var(--dk-2); }
details.more > summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 500; min-height: var(--tap); display: flex; align-items: center; gap: 0.5rem; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; font-family: var(--f-display); font-size: 1.25rem; width: 1rem; }
details.more[open] > summary::before { content: "–"; }
details.more > div { padding: 0 1rem 1rem; }
details.more > div > * + * { margin-top: 0.5rem; }

/* UV chart */
.uvchart { display: block; width: 100%; height: auto; }
.uvchart text { font-family: var(--f-body); fill: var(--dk-ink-2); font-size: 11px; }
.uvchart .grid { stroke: var(--dk-line); stroke-width: 1; }
.card .uvchart text { fill: var(--ink-2); }
.card .uvchart .grid { stroke: var(--line); }
.uv-low { fill: var(--uv-low); color: var(--uv-low); } .uv-mod { fill: var(--uv-mod); color: var(--uv-mod); } .uv-high { fill: var(--uv-high); color: var(--uv-high); }
.uv-vhigh { fill: var(--uv-vhigh); color: var(--uv-vhigh); } .uv-ext { fill: var(--uv-ext); color: var(--uv-ext); } .uv-na { fill: var(--ink-3); color: var(--ink-3); }
.bg-uv-low { background: var(--uv-low); } .bg-uv-mod { background: var(--uv-mod); } .bg-uv-high { background: var(--uv-high); } .bg-uv-vhigh { background: var(--uv-vhigh); } .bg-uv-ext { background: var(--uv-ext); } .bg-uv-na { background: var(--line-strong); }
.uv-txt-low { color: #2f5a26; } .uv-txt-mod { color: #6e5208; } .uv-txt-high { color: #9a4510; } .uv-txt-vhigh { color: #9a2b1d; } .uv-txt-ext { color: #5d3596; }
:root[data-theme="dark"] .uv-txt-low { color: #a9d39b; } :root[data-theme="dark"] .uv-txt-mod { color: #f0cf6b; } :root[data-theme="dark"] .uv-txt-high { color: #f5ad73; } :root[data-theme="dark"] .uv-txt-vhigh { color: #ff9f8f; } :root[data-theme="dark"] .uv-txt-ext { color: #cdb3ff; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
table.data th, table.data td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--line); }
.dk table.data th, .dk table.data td { border-color: var(--dk-line); }
table.data th { font-weight: 500; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .link-btn { white-space: nowrap; min-height: 0; padding: 0; }
.table-wrap { overflow-x: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.875rem; color: var(--dk-ink-2); }
.card .legend { color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
:root[data-lv="1"] .legend { font-size: 1.0625rem; }

/* ---------- trip ---------- */
.leg { position: relative; }
.leg-head { display: flex; gap: 0.75rem; align-items: flex-start; }
.leg-num { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--page); display: grid; place-items: center; flex: none; font-family: var(--f-display); font-size: 1.125rem; }
.leg-title { flex: 1; min-width: 0; }
.leg-title h2 { font-size: 1.5rem; }
.leg-photo { position: relative; height: 10rem; border-radius: var(--r); overflow: hidden; }
.leg-photo img { width: 100%; height: 100%; object-fit: cover; }
.leg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(22, 17, 18, 0.75)); }
.leg-photo .lp-tag { position: absolute; left: 1rem; bottom: 0.75rem; z-index: 1; color: #fff5f6; font-weight: 500; display: inline-flex; gap: 0.5rem; align-items: center; }
.leg-photo .credit { position: absolute; right: 0.75rem; top: 0.5rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 1; color: #eedfe2; font-size: 0.6875rem; }
.minimap { position: relative; height: 7rem; border-radius: var(--r); overflow: hidden; }
.minimap > svg { width: 100%; height: 100%; display: block; }
.minimap .mm-tag { position: absolute; left: 0.75rem; bottom: 0.75rem; color: #fff; font-weight: 500; display: inline-flex; gap: 0.5rem; align-items: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-size: var(--fs-small); }
.minimap .mm-coord { position: absolute; right: 0.75rem; top: 0.5rem; color: rgba(255, 255, 255, 0.95); font-size: 0.8125rem; font-weight: 500; }
.wx-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0; }
.wx-row > div { background: var(--page); border-radius: var(--r-sm); padding: 0.75rem 0.75rem; }
.wx-row dt { font-weight: 500; font-size: 0.8125rem; color: var(--ink-2); }
.wx-row dd { margin: 0; font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
:root[data-lv="1"] .wx-row dt { font-size: 1rem; }
.flight { background: var(--dk); color: var(--dk-ink); border-radius: var(--r-lg); padding: 1rem 1.25rem; margin-left: 1.25rem; position: relative; }
.flight::before { content: ""; position: absolute; left: -0.75rem; top: -1.25rem; bottom: -1.25rem; border-left: 2px dashed var(--sand); }
.flight > * + * { margin-top: 0.5rem; }
.flight-head { font-weight: 500; display: flex; gap: 0.5rem; align-items: center; }
.flight .warn-box { background: var(--dk-2); border-radius: var(--r); padding: 0.75rem 1rem; display: flex; gap: 0.5rem; }
.flight .warn-box .ic { margin-top: 0.25rem; color: var(--dk-ink-2); }
.flight .field input { background: var(--dk-2); color: var(--dk-ink); border-color: var(--dk-line); }
.flight .link-btn { color: var(--dk-ink); }
.legs > * + * { margin-top: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 0.25rem 0 0; padding: 0.5rem; list-style: none; background: var(--page); border: 1.5px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); max-height: 18rem; overflow: auto; }
.combo-list li { padding: 0.75rem; border-radius: var(--r-sm); cursor: pointer; min-height: var(--tap); }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--beige); }
.icon-del { background: none; border: 0; color: var(--ink-2); width: var(--tap); height: var(--tap); border-radius: 50%; display: inline-grid; place-items: center; }
.icon-del:hover { background: var(--beige); color: var(--warn); }

/* ---------- today ---------- */
.briefing { display: flex; gap: 0.75rem; align-items: center; width: 100%; text-align: left; border-radius: var(--r-pill); padding: 0.5rem 0.75rem 0.5rem 0.5rem; color: var(--dk-ink); min-height: 64px; background: var(--dk-2); border: 0; }
.briefing .b-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--dk-ink); color: var(--dk); display: grid; place-items: center; flex: none; }
.briefing .b-txt { flex: 1; min-width: 0; }
.briefing strong { display: block; }
.briefing .small { color: var(--dk-ink-2); }
.briefing .ic.play { width: 28px; height: 28px; }
.ring { position: relative; width: min(14rem, 74%); aspect-ratio: 1; margin: 0.5rem auto; }
.ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .r-track { stroke: var(--dk-3); }
.ring .r-prog { stroke: var(--dk-rose); transition: stroke-dashoffset 1s linear; }
.ring.idle .r-prog { stroke: var(--sand); }
.ring-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.ring-in .r-lab { font-weight: 500; letter-spacing: 0.01em; font-size: 0.875rem; color: var(--dk-ink-2); }
.ring-in .r-big { font-weight: 600; font-size: 3.5rem; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.ring-in .r-unit { color: var(--dk-ink-2); font-size: var(--fs-small); }
.timer-done { background: var(--warn); color: #fff; border-radius: var(--r); padding: 1rem; font-weight: 500; display: flex; gap: 0.75rem; align-items: center; }
.routine { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.routine label { display: grid; grid-template-columns: auto 1fr auto; gap: 0.125rem 0.75rem; align-items: center; background: var(--card); border-radius: var(--r); padding: 0.75rem 1rem 0.75rem 0.75rem; cursor: pointer; border: 1.5px solid transparent; }
:root[data-lv="1"] .routine label { border-color: var(--line); grid-template-columns: auto 1fr; }
.routine input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.routine .r-thumb { width: 56px; height: 56px; border-radius: var(--r-xs); background: var(--beige-2); display: grid; place-items: center; grid-row: span 3; overflow: hidden; }
.routine .r-thumb img { width: 100%; height: 100%; object-fit: cover; }
.routine .r-thumb .ic { width: 24px; height: 24px; color: var(--ink-2); }
.routine .r-title { font-family: var(--f-display); font-size: 1.1875rem; line-height: 1.25; }
.routine .r-desc { grid-column: 2; color: var(--ink-2); font-size: var(--fs-small); }
.routine .r-meta { grid-column: 2; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.routine .r-box { grid-column: 3; grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; color: transparent; }
:root[data-lv="1"] .routine .r-box { grid-column: 2; grid-row: auto; }
.routine input:checked ~ .r-box { background: var(--ink); border-color: var(--ink); color: var(--page); }
.routine input:focus-visible ~ .r-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.routine input:checked ~ .r-title { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ink-2); }
.time-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--r-xs); background: var(--beige-2); font-size: 0.8125rem; font-weight: 500; }
.time-chip.ess { background: var(--ink); color: var(--page); }
:root[data-lv="1"] .time-chip { font-size: 1rem; }

/* ---------- kit (ref: Reveal) ---------- */
.kit-banner { margin: 0 0 1.5rem; }
.kit-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1664 / 928; max-height: 24rem; object-fit: cover; object-position: 50% 55%; border-radius: var(--r-lg); background: var(--blush); }
.kit-banner .credit { margin-top: 0.5rem; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem; }
.pcard { background: var(--page); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.5rem 0.5rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.pcard .pc-img { position: relative; border-radius: 1.25rem; background: var(--blush); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.pcard .pc-img img { position: absolute; inset: 0; margin: auto; width: calc(100% - 4rem); height: calc(100% - 3.5rem); object-fit: contain; background: transparent; border-radius: 0; mix-blend-mode: multiply; }
:root[data-theme="dark"] .pcard .pc-img img, :root[data-theme="dark"] .acard .ac-img img { mix-blend-mode: normal; }
.pcard .pc-img .thumb-ic .ic, .pcard .pc-img > .ic { width: 56px; height: 56px; color: var(--ink-3); }
.pcard .pc-slot { position: absolute; left: 0.5rem; top: 0.5rem; }
.pcard .heart { position: absolute; right: 0.5rem; top: 0.5rem; width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--page); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.pcard .heart[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.pcard .heart[aria-pressed="true"] svg { fill: currentColor; }
.pcard .heart[disabled] { opacity: 0.5; }
.pcard .pc-body { padding: 0 0.5rem; display: grid; gap: 0.25rem; }
.pc-brand { font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.3; }
.pcard .k-title { font-family: var(--f-display); font-size: 1.375rem; font-weight: 400; line-height: 1.2; }
.pcard .k-meta { color: var(--ink-2); font-size: 0.9375rem; }
:root[data-lv="1"] .pcard .k-meta { font-size: 1.0625rem; }
.pcard .pc-price { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
.pcard .k-price { font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pcard .in-kit { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--ink); background: var(--beige-2); border-radius: var(--r-pill); padding: 0.125rem 0.75rem 0.125rem 0.5rem; }
.pcard .in-kit .ic { width: 16px; height: 16px; }
.why { margin-top: 0.75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 0.75rem; display: grid; gap: 0.5rem; }
.why-h { font-family: var(--f-body); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.why-line { font-size: 0.9375rem; color: var(--ink-2); }
:root[data-lv="1"] .why-line { font-size: 1.0625rem; }
.pc-link { margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--tap); }
.alts-wrap { margin-top: 0.5rem; display: grid; gap: 0.5rem; }
.acards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.acards-wide { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.acard { display: flex; flex-direction: column; gap: 0.25rem; border: 1px solid var(--line); border-radius: var(--r); padding: 0.5rem; background: var(--page); }
.acard .ac-img { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--blush); overflow: hidden; display: grid; place-items: center; margin-bottom: 0.25rem; }
.acard .ac-img img { position: absolute; inset: 0; margin: auto; width: calc(100% - 2rem); height: calc(100% - 2rem); object-fit: contain; background: transparent; border-radius: 0; mix-blend-mode: multiply; }
.acard .ac-img svg.pa { width: 60%; height: 70%; }
.acard .ac-brand { font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.acard .ac-name { font-size: 0.9375rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acard .ac-price { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.acard .ac-price .muted { font-weight: 400; }
.acard .chips { margin-top: 0.25rem; }
.acard .ac-btn { margin-top: auto; width: 100%; min-height: var(--tap); padding: 0.5rem 1rem; }
.acard .ac-price, .acard .chips { margin-bottom: 0.5rem; }
:root[data-lv="1"] .acards { grid-template-columns: minmax(0, 1fr); }
:root[data-lv="1"] .acard .ac-brand, :root[data-lv="1"] .acard .ac-price { font-size: 1rem; }
.alts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.alts li { display: grid; grid-template-columns: 52px 1fr auto; gap: 0.75rem; align-items: center; background: var(--page); border-radius: var(--r); padding: 0.5rem; }
.thumb { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; background: var(--blush); }
.thumb-wrap { display: contents; }
.thumb-ic { display: grid; place-items: center; color: var(--ink-3); }
.thumb-ic .ic { width: 24px; height: 24px; }
.checkout-bar { position: sticky; bottom: calc(var(--bnav-h) + 0.25rem); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--dk); color: var(--dk-ink); border-radius: var(--r-pill); padding: 0.5rem 0.5rem 0.5rem 1.5rem; box-shadow: var(--shadow); }
.checkout-bar .small { color: var(--dk-ink-2); }
.checkout-bar .cb-total { font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.checkout-bar .btn-primary { background: var(--dk-ink); color: var(--dk); }
.checkout-bar .cb-total, .dk .big { color: var(--dk-ink); }
@media (min-width: 960px) { .checkout-bar { bottom: 1rem; } }
.shop-help { background: var(--beige-2); border-radius: var(--r-lg); padding: 1.25rem; }
.shop-help > * + * { margin-top: 0.5rem; }
.shop-help code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--page); color: var(--ink); padding: 0.125rem 0.5rem; border-radius: 6px; font-weight: 500; user-select: all; }
.carry { display: flex; gap: 0.75rem; align-items: center; }
.carry .c-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--page); display: grid; place-items: center; flex: none; }
.buy-there { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.buy-there li { background: var(--page); border-radius: var(--r); padding: 0.75rem 1rem; }
.kit-hero { display: grid; gap: 1rem; }
@media (min-width: 960px) { .kit-hero { grid-template-columns: 1.4fr 1fr; align-items: end; } }

/* ---------- rescan ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 36rem; }
.ba figure { margin: 0; }
.ba .ba-img { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; background: var(--dk-2); display: grid; place-items: center; color: var(--dk-ink-2); }
.ba .ba-img img { width: 100%; height: 100%; object-fit: cover; }
.ba .ba-tag { position: absolute; left: 0.5rem; top: 0.5rem; padding: 0.125rem 0.5rem; border-radius: var(--r-xs); font-weight: 500; font-size: 0.8125rem; color: var(--dk-ink); }
.ba figcaption { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--dk-ink-2); }
.ba figcaption strong { display: block; color: var(--dk-ink); }
.change { background: var(--dk-2); border-radius: var(--r); padding: 1rem; }
.change > * + * { margin-top: 0.5rem; }
.change .c-vals { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 1.5rem; }
.change .c-vals s { color: var(--dk-ink-2); font-weight: 400; margin-right: 0.5rem; font-size: 1rem; }
.change .c-note { color: var(--dk-rose); font-weight: 500; font-size: var(--fs-small); display: flex; gap: 0.5rem; align-items: center; }
.cause { background: var(--page); border-radius: var(--r); padding: 1rem; display: flex; gap: 0.75rem; }
.cause .ic { color: var(--warn); margin-top: 0.25rem; }
.cause .c-ev { color: var(--ink); font-weight: 500; }
.safety { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--warn-soft); border-radius: var(--r); padding: 1rem; font-weight: 500; }
.safety .ic { color: var(--warn); margin-top: 0.125rem; }
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.history label, .history > li.card-tint-2 { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border-radius: var(--r); background: var(--beige); cursor: pointer; min-height: 56px; }
.history > li.card-tint-2 { display: block; }
.history input { width: 24px; height: 24px; flex: none; }

/* ---------- data page ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; }
.kv dt { font-weight: 500; }
.kv dd { margin: 0; color: var(--ink-2); }
.danger-btn { background: var(--warn); color: #fff; }
:root[data-theme="dark"] .danger-btn { color: #161213; }
.hide-desktop { display: initial; }
@media (min-width: 960px) { .hide-desktop { display: none; } }
.plan li[data-ic]::before { content: none; }
.plan li[data-ic] { grid-template-columns: 40px 1fr; align-items: start; }
.plan .p-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--beige-2); display: grid; place-items: center; grid-row: span 2; }
.plan .p-ic .ic { width: 20px; height: 20px; }
.day-chip .wxg { margin: 0.125rem 0; }
.city-hero h2:focus { outline: none; }
.dk .dial-in .d-lab { color: var(--dk-rose); }

.mtag.glass { background: rgba(30, 26, 27, 0.78); border-color: rgba(255, 245, 246, 0.28); }
.face-stage .fs-photo { width: 54%; }
.tabs-bar .toggle { display: flex; width: 100%; }
.tabs-bar .toggle [role="tab"] { flex: 1; padding: 0 0.5rem; white-space: nowrap; }
.seg.scroll { flex-wrap: nowrap; overflow-x: auto; padding: 0.25rem 0.125rem 0.5rem; justify-content: flex-start !important; }
.seg.scroll label { flex: none; }
.seg.scroll legend { float: left; width: 100%; }

.pcard .pc-img svg.pa { width: 62%; height: 78%; }
.pcard .pc-slot { max-width: calc(100% - 4.5rem); overflow: hidden; text-overflow: ellipsis; display: block; }

.ba .ba-tag.glass { background: rgba(30, 26, 27, 0.8); }
.hero-photo .credit { background: rgba(30, 26, 27, 0.72); padding: 0.125rem 0.5rem; border-radius: var(--r-xs); text-shadow: none; }
:root[data-lv="1"] .dk .credit, :root[data-lv="1"] .city-hero .credit { color: var(--dk-ink-2); }
:root[data-lv="1"] .stat-row, :root[data-lv="1"] .stat-row.four { grid-template-columns: 1fr 1fr; }
:root[data-lv="1"] .big-xl { font-size: 4.5rem; }

:root[data-lv="1"] .tabs-bar .toggle { flex-wrap: wrap; border-radius: var(--r); }
:root[data-lv="1"] .tabs-bar .toggle [role="tab"] { flex: 1 1 8rem; }
:root[data-lv="1"] .fitz-row { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
:root[data-lv="1"] .fitz-sw { max-width: 5rem; }
:root[data-theme="dark"] .timer-done { color: var(--on-accent); }
.leg-photo .credit { background: rgba(30, 26, 27, 0.66); padding: 0 0.5rem; border-radius: var(--r-xs); text-shadow: none; }

/* Plain-words pass: the day's one sentence, and the burn scale on phones. */
.ch-say { margin-top: 5rem; padding: 0.875rem 1rem; border-radius: 1rem; background: rgba(22, 17, 18, 0.62); font-family: var(--f-body); font-size: 1.375rem; font-weight: 600; line-height: 1.3; color: #fff5f6; }
:root[data-lv="1"] .ch-say { font-size: 1.625rem; }
.city-hero .ch-top h2 { font-size: 1.5rem; }
#more-box { margin-top: 1rem; }
.summary3 .plan { margin: 0; }
.summary3 .p-text { font-size: 1.1875rem; font-weight: 500; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.steps3 li { display: grid; justify-items: center; text-align: center; gap: 0.5rem; padding: 1rem 0.5rem; border-radius: 1rem; background: var(--card); color: var(--ink); font-weight: 500; line-height: 1.25; }
.steps3 .s-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--beige-2); color: var(--accent); }
@media (max-width: 30rem) { .fitz-row { grid-template-columns: repeat(3, 1fr); row-gap: 0.875rem; } }

/* Skin Simulation before/after */
.sim-ba { position: relative; aspect-ratio: 3 / 4; max-width: 22rem; margin-inline: auto; border-radius: var(--r); overflow: hidden; background: var(--dk-2); }
.sim-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sim-ba .sim-after { clip-path: inset(0 0 0 var(--pos)); }
.sim-ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(30, 26, 27, 0.4); }
.sim-ba .ba-tag { position: absolute; top: 0.5rem; padding: 0.125rem 0.5rem; border-radius: var(--r-xs); font-size: 0.8125rem; color: #fff; background: rgba(30, 26, 27, 0.8); z-index: 1; }
.sim-ba .sim-l { left: 0.5rem; } .sim-ba .sim-r { right: 0.5rem; }
#sim-range { width: 100%; max-width: 22rem; display: block; margin-inline: auto; min-height: 48px; }