/* MyTimeView V3.3 — IMPACT + FAMILY + FOCUS 365 (the V3 look kept; the number, the first motion and the paths after it sharpened).
 * Deep space behind, but the number, the words and the buttons stay the brightest things on screen.
 * One red (--red) for the running fraction of the number; used nowhere else as a fill.
 * Backgrounds are an enhancement: on plain black (late or missing images) everything still reads and works. */
@font-face { font-family: "Pretendard MTV"; font-weight: 45 920; font-style: normal; font-display: swap;
  src: url(../assets/font/pretendard-mtv.woff) format("woff"); }

:root {
  --void: #000000;
  --bone: #ece8e1;            /* main text, integer digits */
  --ash: #a29d96;             /* secondary text (≥ 7:1 on black) */
  --mute: #87827b;            /* small print (≥ 5:1 on black) */
  --line: rgba(236, 232, 225, .16);
  --line2: rgba(236, 232, 225, .3);
  --red: #ff3131;             /* the decimal point and the four decimals: 5.74:1 on black (#ff2d2d: 5.66:1) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --pad: max(18px, 3.2vw);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --stage-top: clamp(118px, 22vh, 236px);
  --font: "Pretendard MTV", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  color-scheme: dark;
}
html:lang(ja) { --font: "Pretendard MTV", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Meiryo", system-ui, sans-serif; }
html:lang(zh-Hans) { --font: "Pretendard MTV", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
html.boot * { transition: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--void); color: var(--bone); font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
html:lang(ko) body { word-break: keep-all; }
button, input, select { font: inherit; color: inherit; }
p, dl, dd, dt, h1, h2, ul, ol, figure, blockquote, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 1.5px solid var(--bone); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* space (B · master, V3.1 → V3.2.1 FINAL): ONE picture per screen shape, and every view is a camera position inside it —
   V3.2.1 FINAL: the owner's original “지구 너머로 흐르는 은하수” (1672×941). PC = the whole picture (2560×1441); phone = its right-hand
   portrait crop (1371×2400: dark sky over the Earth's limb, the Milky Way's end at the top). Framings were chosen so the brightest
   parts (the sunrise, the Earth's limb, the galactic band) stay below or beside the number, never behind it.
   the page does not change worlds, the camera travels. Hero (and the birth-date overlay on top of it): a small, far Earth in the
   wide dark · result, return, features, timer: the Milky Way, darker. V3.2: while the number cascades from the 90-year reference
   to the personal value, the camera makes the same move, slower (1.6 s), as part of one motion. Plain black underneath.
   Layers: .sky = the same picture far behind (fills the dark around the small Earth) · .cam = the camera · .earth = the camera's
   hero framing with a soft, fixed mask; it only fades. Only transform and opacity ever animate (compositor only). */
.space { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--void); pointer-events: none; }
.space span { position: absolute; background: var(--void) no-repeat 50% 100% / cover; background-image: url("../assets/bg/space-pc.webp");
  background-image: image-set(url("../assets/bg/space-pc.avif") type("image/avif"), url("../assets/bg/space-pc.webp") type("image/webp")); }
.space span { will-change: transform, opacity; }                       /* promoted once: no layer work when a move starts */
.space .sky { inset: 0; background-position: 50% 0%; transform-origin: 70% 10%; transform: scale(1.9); opacity: 0; transition: opacity .6s var(--ease); }
/* the whole picture (nothing cropped by the background), bottom-centred and at least as large as the viewport */
.space .cam, .space .earth { left: 50%; bottom: 0; width: max(100vw, 177.65vh); aspect-ratio: 2560 / 1441; translate: -50% 0; background-size: 100% 100%; transform-origin: 50% 100%; }
.space .cam { transition: transform .6s var(--ease), transform-origin .6s var(--ease), opacity .2s cubic-bezier(.55, 0, 1, .45) .08s; }
/* the hero Earth: the same framing as the camera's hero position, with a fixed soft mask; it never moves, it only fades */
.space .earth { opacity: 0; transform: translateY(12%) scale(.72); transition: opacity .22s linear;
  -webkit-mask: radial-gradient(ellipse 50% 58% at 50% 70%, #000 52%, transparent 100%); mask: radial-gradient(ellipse 50% 58% at 50% 70%, #000 52%, transparent 100%); }
/* readability: the middle, where the words and the number sit, is held down; ::after darkens the whole view by role */
.space::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 64% 54% at 50% 42%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .14) 72%, rgba(0, 0, 0, .06)); }
.space::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: .55; transition: opacity .6s var(--ease), background-color .4s; }
/* hero — a little brighter; the Earth small and far (the birth-date overlay stays on this picture) */
body[data-bg="hero"] .space .sky { opacity: .3; }
body[data-bg="hero"] .space .cam { opacity: 0; transform: translateY(12%) scale(.72); transition: transform .6s var(--ease), transform-origin .6s var(--ease), opacity .18s linear; }
body[data-bg="hero"] .space .earth { opacity: 1; transition: opacity .3s linear; }
body[data-bg="hero"] .space::after { opacity: .08; }
/* result · return visit · features · timer — closer in, the deep sky above the Earth (the band passes low on the right), darker */
body[data-bg="result"] .space .cam { transform-origin: 0% 0%; transform: scale(1.9); }
body.feat .space::after { opacity: .62; }
/* the cascade: one slow camera move under the falling number */
body.casc .space .cam { transition: transform 1.9s cubic-bezier(.3, 0, .1, 1), transform-origin 1.9s cubic-bezier(.3, 0, .1, 1), opacity .5s linear .1s; }
body.casc .space .earth { transition: opacity .9s linear .15s; }
body.casc .space .sky { transform: scale(2.06); transition: opacity 1.2s linear, transform 1.9s cubic-bezier(.3, 0, .1, 1); }   /* V3.3.2: the far sky moves less than the camera (depth) */
body.casc .space::after { transition: opacity 1.6s var(--ease); }
body.ringing .space::after { background-color: rgb(38, 6, 4); opacity: .5; }
/* V3.3.2 — focus: as the number falls, the edges of the view darken around it (one opacity layer, no blur), then relax a little and stay */
.space .focus { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 50% at 50% 40%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .58) 100%); transition: opacity .6s var(--ease); }
body[data-bg="result"] .space .focus { opacity: .45; transition: opacity 1.6s var(--ease); }
body.casc .space .focus { opacity: 1; transition: opacity 1.2s cubic-bezier(.3, 0, .1, 1) .1s; }
/* V3.2.3 phones (portrait): the owner's own phone picture “지구 너머의 은하수 일출” (941×1672), as it is — the Milky Way across the
   top, deep dark sky in the middle (behind the number), the sunrise on the Earth's limb low on the left, city lights below.
   Never stretched: the box keeps 941 / 1672, is at least as large as the viewport and is bottom-centred, so a narrower phone loses
   a little of both sides and the top, never the Earth. PC and phone landscape keep the PC picture (above). */
@media (max-aspect-ratio: 4/5) {
  .space span { background-image: url("../assets/bg/space-mobile.webp");
    background-image: image-set(url("../assets/bg/space-mobile.avif") type("image/avif"), url("../assets/bg/space-mobile.webp") type("image/webp")); }
  .space .cam, .space .earth { width: max(100vw, 56.28vh); aspect-ratio: 941 / 1672; }
  .space .earth { transform: none; -webkit-mask: none; mask: none; }                    /* the whole picture: band at the top, the limb at the bottom */
  .space::before { background: radial-gradient(ellipse 90% 46% at 50% 42%, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2) 75%); }
  body[data-bg="hero"] .space .cam { transform: none; }
  /* result · features · timer: a little closer (× 1.25) — the Milky Way above the heading, dark sky behind the number, the limb and
     the sunrise low behind the list; chosen from 360–430 px captures + the background luminance behind each text block */
  body[data-bg="result"] .space .cam { transform-origin: 50% 30%; transform: scale(1.25); }
  /* V3.3.2: the hero picture zooms into the same framing as it fades, so the push-in reads as one camera move (no double image) */
  body.casc .space .earth { transform-origin: 50% 30%; transform: scale(1.25); transition: transform 1.9s cubic-bezier(.3, 0, .1, 1), opacity .9s linear .15s; }
}


/* ---------------------------------------------------------------- top bar: two pills of one family; the timer first */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(var(--sat) + 14px) var(--pad) 16px; pointer-events: none; transition: background-color .25s; }
body.scrolled .bar { background: linear-gradient(to bottom, rgba(0, 0, 0, .98), rgba(0, 0, 0, .98) 76%, rgba(0, 0, 0, 0)); }
.bar > * { pointer-events: auto; }
.wordmark { appearance: none; background: none; border: 0; padding: 10px 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--bone); cursor: pointer; white-space: nowrap; }
.bar-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pill { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px 0 13px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(236, 232, 225, .34); background: rgba(14, 16, 21, .62); color: var(--bone); font-size: 13.5px; font-weight: 550; letter-spacing: -.005em;
  cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.pill:hover { border-color: rgba(236, 232, 225, .62); background: rgba(34, 37, 44, .78); }
.pill svg { width: 16px; height: 16px; flex: none; }
.pill-tm { font-variant-numeric: tabular-nums; }
body[data-view="timer"] .pill-tm, body.tm-on .pill-tm { border-color: rgba(236, 232, 225, .62); }
/* language: the same family, one step quieter */
.pill-lang { gap: 6px; padding: 0 10px 0 11px; border-color: rgba(236, 232, 225, .2); background: rgba(8, 9, 12, .42); color: var(--ash); font-weight: 500; }
.pill-lang .caret { width: 11px; height: 11px; transition: transform .2s var(--ease); }
.pill-lang[aria-expanded="true"] { color: var(--bone); border-color: rgba(236, 232, 225, .5); }
.pill-lang[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang { position: relative; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; min-width: 156px; background: #0b0c10; border: 1px solid var(--line); border-radius: 14px; }
.lang-menu button { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 44px; background: none; border: 0; padding: 0 12px; border-radius: 9px; font-size: 14px; color: var(--ash); cursor: pointer; text-align: left; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: #171920; color: var(--bone); outline: none; }
.lang-menu button[aria-checked="true"] { color: var(--bone); }
.lang-menu button[aria-checked="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bone); }

/* ---------------------------------------------------------------- views */
main { position: relative; z-index: 2; }
.view { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--sat) + 84px) var(--pad) calc(var(--sab) + 48px); animation: in .45s var(--ease) both; }
@keyframes in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- THE NUMBER
   Integer digits and the first decimal are reels (a strip 0…9,0 moved by transform; only the reels that change are written).
   Decimals 2–4 are text cells. Every cell has a fixed width, so a running number never moves sideways.
   Commas: a separate, smaller, lighter glyph — a breath between groups, not a mark. Dot + decimals: the one red. */
.clock { font-size: var(--clock, 40px); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--bone); letter-spacing: 0;
  text-shadow: 0 0 30px rgba(0, 0, 0, .7); }
.clock .nb { position: relative; display: inline-block; }
.dg { position: relative; display: inline-block; width: var(--dgw, .6em); text-align: center; vertical-align: baseline;
  clip-path: inset(0 -.2em); transition: width .34s var(--ease), opacity .26s linear; }
.dg .ph { visibility: hidden; }
.dg .rl { position: absolute; left: 0; top: 0; width: 100%; white-space: pre; line-height: 1; transform: translateY(0); }
.clock.casc .rl, .dg.hot .rl { will-change: transform; }
.dd { display: inline-block; width: var(--dgw, .6em); text-align: center; }
.cm { display: inline-block; width: .3em; font-size: .64em; font-weight: 360; text-align: center; opacity: .58; transition: width .34s var(--ease), opacity .26s linear; }
.dg.z, .cm.z { opacity: 0; }
.dg.gone, .cm.gone { width: 0; opacity: 0; }
.fr { font-size: .6em; color: var(--red); }
.fr .dt { display: inline-block; width: .3em; text-align: center; }
.clock .nofrac .fr { display: none; }
/* prefix (“about”) and unit hang outside the number: zero width, so the number itself stays centred */
.cx { display: inline-block; width: 0; white-space: nowrap; font-size: max(.26em, 12px); font-weight: 500; color: var(--ash); letter-spacing: 0; transition: opacity .4s linear; }
.cx b { display: inline-block; font-weight: inherit; }
.cu b { margin-left: .5em; }
.cp b { transform: translateX(calc(-100% - .5em)); }
.clock .alt { display: inline-block; }
.alt .dd { width: var(--dgw, .6em); }

/* ---------------------------------------------------------------- STAGE: hero, birth date overlay, cascade and result in one place */
.v-stage { justify-content: flex-start; padding-top: calc(var(--sat) + var(--stage-top)); }
.hl { width: 100%; display: flex; justify-content: center; }
.hl-h { display: grid; align-items: end; justify-items: center; font-weight: 650; }
.hl-h > span { grid-area: 1 / 1; transition: opacity .32s linear; }
.hh { font-size: clamp(24px, 2.8vw, 42px); line-height: 1.36; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 0 26px rgba(0, 0, 0, .75); }
.rh { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.4; letter-spacing: -.015em; padding-bottom: .1em; opacity: 0; }
.rh br { display: none; }
html:lang(en) .hh { letter-spacing: -.02em; }
.v-stage .clock { margin-top: clamp(24px, 4.4vh, 46px); }
body[data-view="result"] .hh, body.casc .hh { opacity: 0; }
body[data-view="result"] .rh, body.casc .rh { opacity: 1; }
.clock .cu { opacity: 0; }
body[data-view="result"] .clock .cu, body[data-view="home"] .clock .cu { opacity: 1; }
body.casc .clock .cu { opacity: 0; }

/* hero extras */
.hx { display: flex; flex-direction: column; align-items: center; transition: opacity .2s linear; }
body.casc .hx { opacity: 0; pointer-events: none; }
.note { margin-top: clamp(18px, 3vh, 30px); display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 14px; color: var(--ash); text-wrap: balance; }
.info { appearance: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: -10px -8px -10px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer; }
.info svg { width: 17px; height: 17px; }
.info:hover, .info[aria-expanded="true"] { color: var(--bone); }
.info-t { max-width: 34em; margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ash); text-wrap: balance; animation: in .25s linear both; }
.v-stage .cta#b-calc { margin-top: clamp(26px, 4.6vh, 46px); }

.cta { appearance: none; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; min-height: 54px; padding: 0 30px; border-radius: 999px;
  background: var(--bone); color: #000; font-size: 16px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; transition: background .2s, opacity .2s, transform .15s; }
.cta:hover { background: #fff; }
.cta:active { transform: scale(.98); }
.cta:disabled { opacity: .25; cursor: default; transform: none; }
.ghost { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line2);
  background: transparent; color: var(--bone); font-size: 14.5px; cursor: pointer; text-decoration: none; }
.ghost:hover { border-color: rgba(236, 232, 225, .55); }
.ghost.sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.ghost.two { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 10px 20px; border-radius: 16px; text-align: left; max-width: 100%; }
.ghost.two small { font-size: 12px; color: var(--ash); }
.link { appearance: none; background: none; border: 0; padding: 8px 2px; min-height: 40px; color: var(--mute); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(236, 232, 225, .25); text-underline-offset: 4px; }
.link:hover { color: var(--bone); }
.fine { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--mute); }

/* result extras: appear once the number has settled */
.rx { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 16px; }
body.rx-in .rx > * { animation: up .5s var(--ease) both; }
body.rx-in .rx > :nth-child(2) { animation-delay: .06s; }
body.rx-in .rx > :nth-child(3) { animation-delay: .12s; }
body.rx-in .rx > :nth-child(4) { animation-delay: .18s; }
body.rx-in .rx > :nth-child(5) { animation-delay: .26s; }
body.rx-in .rx > :nth-child(6) { animation-delay: .32s; }
@keyframes up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lv { display: flex; flex-direction: column; align-items: center; }
/* lived time: second voice — a label, the span, then (on demand) the exact seconds; never a second giant number */
.lv-k { font-size: 13px; color: var(--ash); letter-spacing: .01em; }
.lv-v { margin-top: 2px; font-size: clamp(18px, 1.55vw, 22px); font-weight: 550; letter-spacing: -.01em; color: var(--bone); }
.lived { appearance: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; margin-top: 2px; padding: 0 10px; border: 0; border-radius: 999px;
  background: none; color: var(--mute); font-size: 12.5px; cursor: pointer; }
.lived svg { width: 11px; height: 11px; transition: transform .2s var(--ease); }
.lived[aria-expanded="true"] svg { transform: rotate(180deg); }
.lived:hover, .lived[aria-expanded="true"] { color: var(--bone); }
.lived-s { min-height: 1.5em; font-size: 13px; color: var(--ash); visibility: hidden; }
.lived[aria-expanded="true"] + .lived-s { visibility: visible; }
@media (hover: hover) { .lived:hover + .lived-s { visibility: visible; } }
.now { margin-top: 0; font-size: 12px; color: var(--bone); opacity: .4; letter-spacing: .01em; }
.units { margin-top: 20px; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .35); }
.unit { appearance: none; border: 0; background: transparent; color: var(--ash); min-width: 58px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; cursor: pointer; }
.unit[aria-pressed="true"] { background: var(--bone); color: #000; font-weight: 650; }
.basis { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
.basis .nolive { display: none; }
body.nolive .basis .nolive { display: block; margin-top: 4px; color: var(--ash); }
.dis { margin-top: clamp(26px, 5vh, 48px); width: 100%; max-width: 560px; border-top: 1px solid var(--line); }
.row { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--bone); font-size: 16px; text-align: left; cursor: pointer; transition: background .2s; }
.row .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row .rt b { font-weight: 550; display: inline-flex; align-items: center; gap: 8px; }
.row .rt small { font-size: 13px; color: var(--ash); line-height: 1.45; }
.row .rt small:empty { display: none; }
.row i { font-style: normal; color: var(--ash); transition: transform .2s var(--ease); }
.row .pv { font-style: normal; font-weight: 400; font-size: 11px; color: var(--ash); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.row:hover { background: rgba(236, 232, 225, .04); }
.row:hover i { transform: translateX(3px); color: var(--bone); }
.save { margin-top: 26px; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.save .fine { margin-top: 0; }
.save .link { padding-left: 0; }

/* return visit */
.res { display: flex; flex-direction: column; align-items: center; width: 100%; }
.res-h { font-size: clamp(17px, 1.45vw, 22px); font-weight: 600; letter-spacing: -.015em; }
.res-h br { display: none; }
.v-home .clock { margin-top: 20px; }
.month { margin-top: 16px; font-size: 15px; color: var(--ash); font-variant-numeric: tabular-nums; }
.v-home .dis { margin-top: clamp(30px, 6vh, 56px); }
.v-home .first { margin-top: 18px; }

/* ---------------------------------------------------------------- 02 birth date: over the hero, the timer still running behind */
.dob-ov { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dob-bd { position: absolute; inset: 0; background: rgba(2, 4, 8, .74); animation: in .22s linear both; }
.dob-panel { position: relative; width: min(100%, 540px); padding: 40px 28px 26px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px;
  background: rgba(4, 7, 12, .98); box-shadow: 0 24px 80px rgba(0,0,0,.28); text-align: center; animation: rise .26s var(--ease) both; }
/* V3.2.1 without the blur: the panel is near-opaque (.98) so the hero's words and number do not show through the fields, and the hero's
   own button and line step back while the overlay is open (otherwise a second, greyed “나의 남은 시간 계산하기” sits under the veil).
   The number keeps running behind. */
body[data-view="dob"] #hx { opacity: 0; transition: opacity .2s linear; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.dob-ov.out .dob-bd, .dob-ov.out .dob-panel { animation: out .2s linear both; }
@keyframes out { from { opacity: 1; } to { opacity: 0; } }
.x { appearance: none; position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ash); cursor: pointer; }
.x svg { width: 20px; height: 20px; }
.x:hover { color: var(--bone); background: rgba(236, 232, 225, .06); }
.dob { display: flex; flex-direction: column; align-items: center; }
.dob-h { font-size: clamp(24px, 2.6vw, 34px); font-weight: 650; letter-spacing: -.02em; }
.fields { margin-top: 26px; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.seg input { display: block; width: 2.75ch; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; background: transparent; color: var(--bone);
  font: 500 clamp(38px, 4vw, 54px)/1 var(--font); letter-spacing: .01em; text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--red); }
.seg.y input { width: 4.7ch; }
.seg input::placeholder { color: rgba(236, 232, 225, .24); font-weight: 300; }
.seg input:focus { outline: none; border-bottom-color: var(--bone); }
.seg.bad input { border-bottom-color: #d4867e; }
.sl { font-size: clamp(28px, 2.8vw, 38px); font-weight: 200; color: rgba(236, 232, 225, .3); padding-bottom: 10px; }
.msg { min-height: 1.6em; margin-top: 16px; font-size: 14px; color: var(--ash); }
.msg.bad { color: #d4867e; }
.dob .cta { margin-top: 10px; min-width: 220px; }
.dob .fine { margin-top: 12px; }

/* ---------------------------------------------------------------- features: one column, left-aligned reading */
[tabindex="-1"]:focus { outline: none; }
.v-feat { justify-content: flex-start; text-align: left; }
.col { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: stretch; }
.col > .back, .col > .tag, .col > .cta, .col > .ghost { align-self: flex-start; }
.back { appearance: none; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--ash); font-size: 14px; cursor: pointer; }
.back:hover { color: var(--bone); }
.f-h { margin-top: 16px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 650; letter-spacing: -.025em; line-height: 1.3; text-wrap: balance; }
.f-p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--ash); }
.f-p.lead2 { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--bone); font-weight: 500; letter-spacing: -.01em; }
.tag { margin-top: 16px; font-size: 11.5px; color: var(--ash); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.sub-h { margin-top: 28px; font-size: 13px; color: var(--mute); font-weight: 500; letter-spacing: .01em; }
.col > .cta { margin-top: 22px; }
.col > .ghost { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .3); color: var(--bone); font-size: 14.5px; cursor: pointer; transition: border-color .15s, background .15s; }
.chip:hover { border-color: rgba(236, 232, 225, .55); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--bone); color: #000; border-color: var(--bone); font-weight: 650; }
.chip:disabled { opacity: .35; cursor: default; }

/* moments ahead: three in front, each with one line that makes it concrete */
.mbig { margin-top: 26px; border-top: 1px solid var(--line); }
.mb { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; padding: 18px 2px 16px; border-bottom: 1px solid var(--line); }
.mb dt, .mb .k { font-size: 15px; color: var(--ash); }
.mb .v { grid-row: span 2; align-self: center; font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; text-align: right; }
.mb .v small { font-size: .42em; font-weight: 500; color: var(--ash); margin-right: .35em; letter-spacing: 0; }
.mb .h { font-size: 14.5px; color: var(--bone); }
.mlist { margin-top: 0; }
.mlist div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.mlist dt { display: flex; flex-direction: column; gap: 3px; font-size: 15.5px; }
.mlist dt small { font-size: 12.5px; color: var(--mute); }
.mlist dd { font-size: clamp(20px, 2vw, 25px); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.more { appearance: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; padding: 0 2px; border: 0; background: none; color: var(--ash); font-size: 14px; cursor: pointer; }
.more::after { content: "+"; }
.more[aria-expanded="true"]::after { content: "−"; }
.more.again::after { content: "↻"; }
.more:hover { color: var(--bone); }
/* my date */
.my { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; }
.my h2 { font-size: 17px; font-weight: 600; }
.my-p { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--ash); }
.my > .ghost { align-self: flex-start; margin-top: 14px; }
.my-form { margin-top: 16px; display: grid; gap: 12px; max-width: 420px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ash); }
.fld select, .fld input, .cust input, .cust select { appearance: none; -webkit-appearance: none; height: 48px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(0, 0, 0, .4);
  color: var(--bone); font: 400 16px/1 var(--font); color-scheme: dark; }
.fld select, .cust select { background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.fld select:focus, .fld input:focus, .cust input:focus, .cust select:focus { outline: none; border-color: var(--bone); }
.my-form .msg { margin-top: 0; min-height: 1.2em; }
.my-form .cta { justify-self: start; }
.my-out { margin-top: 16px; }
.my-k { font-size: 14px; color: var(--ash); }
.my-v { margin-top: 4px; font-size: clamp(34px, 4vw, 48px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.my-s { margin-top: 6px; font-size: 14px; color: var(--ash); }
#my-summers { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: var(--bone); }
#my-summers b { font-size: clamp(20px, 2vw, 24px); font-weight: 500; }
.my-act { display: flex; gap: 8px; margin-top: 14px; }
.my .fine { margin-top: 12px; }

/* family time */
.rel { margin-top: 24px; }
.fa-q { margin-top: 8px; }
.q { margin-top: 22px; }
.q legend { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.cust { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.cust input { width: 5em; text-align: center; font-variant-numeric: tabular-nums; }
.fa-out { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.fa-k { font-size: 14px; color: var(--ash); }
.fa-t { margin-top: 10px; display: grid; gap: 2px; }
.fa-r { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fa-t[data-cols="2"] .fa-r { grid-template-columns: 4.6em minmax(0, 1fr) minmax(0, 1.35fr); }
.fa-t[data-cols="1"] .fa-r { grid-template-columns: 4.6em minmax(0, 1fr); }
.fa-r > span:first-child { font-size: 14.5px; color: var(--ash); }
.fa-r > span small { display: block; font-size: 12px; color: var(--mute); }
.fa-r b { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ash); }
/* V3.2.2: the third figure — until the statistical life expectancy — is the one that stays with you */
.fa-r .life small { color: var(--bone); }
.fa-r .life b { font-size: clamp(30px, 3.4vw, 44px); font-weight: 650; color: var(--bone); }
.fa-note { margin-top: 12px; max-width: 46em; font-size: 12.5px; color: var(--ash); }
.fa-up { margin-top: 10px; font-size: 14.5px; color: var(--bone); }
.acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.acts .ghost[aria-expanded="true"] { border-color: var(--bone); }
.panel { margin-top: 16px; padding: 16px 0 4px; border-top: 1px solid var(--line); }
.panel .sub-h { margin: 0 0 10px; }
.lines { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lines li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 15.5px; line-height: 1.5; }
.lines li span { flex: 1; min-width: 0; }
.lines .ghost { flex: none; }
.gifts { margin-top: 4px; }
.gifts div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.gifts dt { color: var(--bone); font-weight: 550; }
.gifts dd { color: var(--ash); }
.adv { margin-top: 30px; padding: 18px 18px 16px; border: 1px dashed var(--line2); border-radius: 16px; }
.adv .tag { display: inline-block; margin: 0; }
.adv-h { margin-top: 10px; font-size: 16px; font-weight: 600; }
.adv .ghost { margin-top: 12px; }
.ct-acts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.m-quote { color: var(--ash); }

/* the next 365 days */
.trio { margin-top: 24px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trio li { min-width: 0; padding: 18px 0; font-size: 14px; color: var(--ash); line-height: 1.25; }
.trio li b { display: block; margin-bottom: 2px; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.025em; color: var(--bone); font-variant-numeric: tabular-nums; }
.trio li + li { border-left: 1px solid var(--line); padding-left: 16px; }
.hrs { margin-top: 10px; border-top: 1px solid var(--line); }
.hr { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; border-bottom: 1px solid var(--line); }
.hr label { flex: 1; min-width: 0; font-size: 15px; }
.hr label small { display: block; font-size: 12px; color: var(--mute); }
.step { display: inline-flex; align-items: center; gap: 6px; }
.step button { appearance: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--bone); font-size: 18px; line-height: 1; cursor: pointer; }
.step button:hover { border-color: rgba(236, 232, 225, .6); }
.step input { width: 3.2em; height: 40px; padding: 0; text-align: center; background: transparent; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; color: var(--bone);
  font: 600 17px/1 var(--font); font-variant-numeric: tabular-nums; }
.step input:focus { outline: none; border-bottom-color: var(--bone); }
.step small { width: 2.4em; color: var(--ash); font-size: 13px; }
.opt { margin-top: 18px; }
.opt summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--bone); font-size: 15px; font-weight: 550; list-style: none; }
.opt summary::-webkit-details-marker { display: none; }
.opt summary::after { content: "+"; margin-left: 8px; color: var(--ash); }
.opt[open] summary::after { content: "−"; }
.opt .fine { margin-top: 0; }
.sum { margin-top: 14px; font-size: 14px; color: var(--ash); }
.sum.bad { color: #d4867e; }
.fo-out { margin-top: 30px; padding-top: 4px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--sat) + 76px); }
.fo-k { margin-top: 14px; font-size: 15px; color: var(--ash); }
.fo-v { margin-top: 4px; font-size: clamp(44px, 5.4vw, 68px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.fo-v small { font-size: .34em; font-weight: 500; color: var(--ash); margin-left: .2em; letter-spacing: 0; }
.top { margin-top: 22px; padding: 18px; border: 1px solid var(--line2); border-radius: 18px; }
.top .badge { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--bone); }
.top h3 { margin: 10px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.top .why { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ash); }
.top .gain { margin-top: 10px; font-size: 15px; color: var(--bone); font-variant-numeric: tabular-nums; }
.top .ask { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--bone); }
.top .yn { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.fo-stat { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 32px; }
.fo-stat .fo-k { margin-top: 0; }
.fo-all { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; color: var(--ash); letter-spacing: -.02em; line-height: 1.1; }
.won { margin-top: 16px; font-size: 16px; line-height: 1.6; }
.won b { font-size: 1.5em; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lock { margin-top: 14px; display: grid; gap: 6px; }
.lock .lk { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(236, 232, 225, .04); font-size: 14px; color: var(--ash); }
.lock .lk svg { width: 15px; height: 15px; flex: none; color: var(--mute); }
.ph-bar { display: inline-block; width: 4.2em; height: .62em; border-radius: 4px; background: rgba(236, 232, 225, .14); vertical-align: middle; }
#fo-pr { margin-top: 12px; }
.fo-pr-c { margin-top: 12px; max-width: 360px; }
.fo-out > .cta { margin-top: 26px; }
/* paid preview */
.alloc { margin-top: 22px; border-top: 1px solid var(--line); }
.al { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.al .g { font-size: 16px; font-weight: 600; }
.al .g small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--mute); }
.al .y { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; }
.al .d { grid-column: 1 / -1; font-size: 13.5px; color: var(--ash); font-variant-numeric: tabular-nums; }
.al.locked .y, .al.locked .d { color: var(--mute); }
.bound { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
.tick { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--ash); }
.tick li { position: relative; padding-left: 18px; }
.tick li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ash); }
.tick.paid li { color: var(--bone); }
.tick.paid li::before { background: var(--bone); border-color: var(--bone); }

/* time structure */
.st-k { margin-top: 22px; font-size: 15px; color: var(--ash); }
.st-v { margin-top: 8px; display: flex; flex-direction: column; font-size: clamp(42px, 5vw, 64px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.st-v small { font-size: 14px; color: var(--ash); letter-spacing: 0; margin-bottom: 6px; font-weight: 400; }
.bars { margin-top: 12px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.bars li { display: grid; grid-template-columns: minmax(7.5em, 1fr) 2fr auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.bars .b { height: 6px; border-radius: 3px; background: rgba(236, 232, 225, .1); overflow: hidden; }
.bars .b i { display: block; height: 100%; width: var(--w); background: rgba(236, 232, 225, .42); border-radius: 3px; }
.bars li.ch { font-weight: 650; }
.bars li.ch .b i { background: var(--bone); }
.bars .v { color: var(--ash); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the structure → the 365 days */
.st-go { margin-top: 26px; flex-direction: column; gap: 2px; min-height: 62px; padding: 8px 30px; }
.st-go small { font-size: 12px; font-weight: 500; opacity: .62; }
/* the one-time design (V3.2.2): the only paid product shown; ongoing care is a later candidate */
.fp-once { margin-top: 8px; font-size: 13px; color: var(--ash); letter-spacing: .01em; }
.v-ai .f-p + .tick { margin-top: 18px; }
.v-ai #ai-go { margin-top: 22px; }
.later { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.later .sub-h { margin-top: 0; color: var(--ash); }
.later .cal { margin-top: 14px; opacity: .78; }
.later .ghost { margin-top: 16px; }
/* AI: examples of later care */
.cal { margin-top: 22px; border-top: 1px solid var(--line); }
.cal div { display: grid; grid-template-columns: 5em 1fr; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.cal dt { color: var(--ash); }
.mine { margin-top: 14px; font-size: 15px; color: var(--bone); }
.ex { margin-top: 6px; }
.ex ul { margin: 10px 0 0; padding: 0 0 0 14px; list-style: none; border-left: 1px solid var(--line2); display: grid; gap: 9px; font-size: 14.5px; color: var(--ash); }
/* the two paid candidates: one-time design vs monthly care */
.plans { margin-top: 30px; }
.plans .sub-h { margin-top: 0; margin-bottom: 8px; }
.plan { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 4px; border: 0; border-top: 1px solid var(--line);
  background: transparent; color: var(--bone); text-align: left; cursor: pointer; }
.plan:last-child { border-bottom: 1px solid var(--line); }
.plan .pk { flex: none; min-width: 3.4em; text-align: center; font-size: 11.5px; color: var(--ash); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.plan .pt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan .pt b { font-size: 15px; font-weight: 600; }
.plan .pt small { font-size: 13px; color: var(--ash); }
.plan i { font-style: normal; color: var(--ash); }
.plan.cur { cursor: default; }
.plan.cur .pk { color: #000; background: var(--bone); border-color: var(--bone); }
button.plan:hover { background: rgba(236, 232, 225, .04); }

/* quick timer */
.v-timer { justify-content: flex-start; }
.t-pick { display: flex; flex-direction: column; }
.presets { margin-top: 26px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.preset { appearance: none; min-height: 68px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .3); color: var(--bone); font-size: 19px; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s; }
.preset:hover { border-color: rgba(236, 232, 225, .6); background: rgba(236, 232, 225, .05); }
.custom { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; }
.custom summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ash); font-size: 15px; list-style: none; }
.custom summary::-webkit-details-marker { display: none; }
.custom summary::after { content: "+"; margin-left: 8px; color: var(--ash); }
.custom[open] summary::after { content: "−"; }
.hms { margin-top: 6px; display: flex; gap: 14px; }
.hms label { display: flex; align-items: baseline; gap: 6px; color: var(--ash); font-size: 14px; }
.hms input { width: 2.6ch; padding: 4px 0 6px; border: 0; border-bottom: 1px solid var(--line2); background: transparent; color: var(--bone); font: 400 32px/1 var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.hms input:focus { outline: none; border-bottom-color: var(--bone); }
.custom .cta { margin-top: 16px; }
.alarm { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.toggle { appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ash); font-size: 14px; cursor: pointer; }
.toggle .dot { width: 32px; height: 19px; border-radius: 999px; border: 1px solid var(--line2); position: relative; transition: background .2s, border-color .2s; }
.toggle .dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #777; transition: transform .2s var(--ease), background .2s; }
.toggle[aria-pressed="true"] { color: var(--bone); }
.toggle[aria-pressed="true"] .dot { background: var(--bone); border-color: var(--bone); }
.toggle[aria-pressed="true"] .dot::after { transform: translateX(13px); background: #000; }
.vol { display: inline-flex; align-items: center; gap: 10px; color: var(--ash); font-size: 14px; }
.vol input { width: 140px; accent-color: var(--bone); }
.alarm .ghost.sm { margin: 0; }
.t-run { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.t-big { font-size: var(--tbig, 120px); font-weight: 300; line-height: 1; letter-spacing: -.035em; white-space: nowrap; color: var(--bone); }
.t-big b { display: inline-block; width: var(--dgw, .62em); text-align: center; font-weight: inherit; }
.t-big i { font-style: normal; font-weight: 200; padding: 0 .02em; }
.t-end { margin-top: 18px; font-size: 14px; color: var(--ash); }
.t-ctl { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.t-ctl .ghost { min-width: 110px; margin: 0; }
@media (max-width: 767px) { .t-ctl { width: 100%; max-width: 380px; } .t-ctl .ghost { flex: 1 1 0; min-width: 0; padding: 0 10px; } }
.v-timer .t-limit { width: 100%; max-width: 640px; margin-top: 24px; text-align: left; }
.t-run:not([hidden]) ~ .t-limit { text-align: center; margin-top: 18px; }
.t-done { font-size: 16px; color: var(--bone); margin-bottom: 14px; visibility: hidden; }
body.ringing .t-done { visibility: visible; }
.t-run[data-state="pause"] .t-big { opacity: .5; }
body.ringing .t-big { color: #e9a79f; animation: ring 1s steps(2) infinite; }
@keyframes ring { 50% { opacity: .45; } }

/* ---------------------------------------------------------------- footer: one quiet sentence per visit, then the links */
.foot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 4px var(--pad) calc(var(--sab) + 16px); }
.quote { max-width: 34em; padding: 14px 0 10px; text-align: center; color: var(--bone); opacity: .55; transition: opacity .3s; }
.quote blockquote { font-size: 13px; line-height: 1.7; text-wrap: balance; }
.quote figcaption { margin-top: 3px; font-size: 11.5px; color: var(--ash); }
body.tm-run .quote { visibility: hidden; }
.foot-l { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.foot .link { min-height: 40px; font-size: 12.5px; color: var(--mute); }

/* sheet, toast */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .74); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.sheet { width: 100%; max-width: 620px; max-height: 86vh; overflow: auto; background: #0b0c10; border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px calc(22px + var(--sab)); }
.sheet h2 { margin: 0 0 14px; font-size: 19px; font-weight: 600; }
.sheet ol, .sheet ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; color: var(--ash); line-height: 1.65; }
.sheet > .ghost { margin-top: 18px; }
.pv-state { margin-top: 16px; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: calc(26px + var(--sab)); translate: -50% 0; z-index: 41; max-width: calc(100% - 32px); text-align: center; background: rgba(16, 17, 22, .96); border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; font-size: 14px; }
@media (min-width: 1024px) { .sheet-wrap { align-items: center; } .view { padding-bottom: calc(var(--sab) + 64px); } }

/* phones */
@media (max-width: 767px) {
  :root { --stage-top: clamp(104px, 25vh, 232px); }
  .bar { padding-top: calc(var(--sat) + 10px); padding-bottom: 12px; }
  .bar-r { gap: 6px; }
  .pill { min-height: 44px; padding: 0 12px 0 11px; font-size: 13px; gap: 6px; }
  .pill-lang { padding: 0 9px 0 10px; }
  .presets { grid-template-columns: repeat(2, 1fr); }
  .preset { min-height: 58px; font-size: 18px; }
  .unit { min-width: 54px; padding: 0 10px; }
  .row { min-height: 64px; font-size: 15.5px; }
  .row .rt small { font-size: 12.5px; }
  .lived { min-height: 44px; }
  .rh br { display: inline; }
  .res-h br { display: inline; }
  .fields { gap: 6px; }
  /* the birth date sits high so the keyboard never covers it */
  .dob-ov { align-items: flex-start; padding-top: calc(var(--sat) + 70px); }
  .dob-panel { padding: 38px 18px 20px; }
  .step button { width: 44px; height: 44px; }
  .trio li { padding: 16px 0; font-size: 13px; }
  .trio li + li { padding-left: 10px; }
  .bound { grid-template-columns: 1fr; }
  /* phones: the figures stack under the name, the last (until the statistical life expectancy) the largest */
  .fa-r, .fa-t[data-cols] .fa-r { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0 12px; }
  .fa-r > .fa-l { grid-column: 1 / -1; margin-bottom: 2px; }
  .fa-r > .fa-c { display: contents; }
  .fa-r > .fa-c small { align-self: baseline; font-size: 13px; }
  .fa-r > .fa-c b { justify-self: end; font-size: 24px; }
  .fa-r > .fa-c.life b { font-size: 32px; }
  .gifts div { grid-template-columns: 6em minmax(0, 1fr); }
  .lines li { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .hh { font-size: 22px; }
  .unit { min-width: 50px; padding: 0 8px; font-size: 14px; }
  .bar .wordmark { font-size: 14px; }
  .pill { padding: 0 10px 0 9px; font-size: 12.5px; }
  .seg input { font-size: 34px; }
  .bars li { grid-template-columns: minmax(6.5em, 1fr) 1.4fr auto; gap: 10px; font-size: 13.5px; }
  .step input { width: 2.8em; }
}
/* V3.2.2 device QA: a phone held sideways (short landscape). The first screen keeps the whole hero (sentence, number, note and
   the CTA) in view, even under the browser bars (≈ 300 px tall). Only spacing, the sentence size and the CTA height change; the
   number keeps its size and its place, so the cascade and the result line up exactly as before. Portrait and PC never match this. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --stage-top: calc(70px + 2vh); }
  .hh { font-size: clamp(17px, 5.4vh, 24px); }
  .v-stage .clock { margin-top: clamp(8px, 3.2vh, 24px); }
  .note { margin-top: clamp(6px, 2.4vh, 18px); }
  .v-stage .cta#b-calc { margin-top: clamp(10px, 3.6vh, 26px); min-height: 46px; }
  /* the running timer: the countdown is sized by the height too, so [일시정지 · 재시작 · 종료] and, when it rings, [알람 끄기] stay in view */
  .v-timer { padding-top: calc(var(--sat) + 72px); }
  .t-big { font-size: min(var(--tbig, 120px), 30vh); }
  .t-end { margin-top: 8px; }
  .t-ctl { margin-top: 14px; }
}

/* ---------------------------------------------------------------- V3.3 pre-beta layer
   Quiet additions. The remaining-time number stays the brightest, largest thing on every screen; everything here is context. */
/* WORLD PULSE — under the result's basis line: small label, two quiet figures, one line back to the visitor's own time */
.wp { margin-top: clamp(24px, 4vh, 38px); width: 100%; max-width: 520px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.wp-h { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ash); }
.wp-lead { margin-top: 3px; font-size: 12.5px; color: var(--mute); }
.wp-g { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; }
.wp-g > div { min-width: 0; padding: 0 10px; }
.wp-g > div + div { border-left: 1px solid var(--line); }
.wp-g dt { font-size: 12.5px; color: var(--ash); }
.wp-g dd { margin: 2px 0 0; font-size: clamp(17px, 1.45vw, 20px); font-weight: 520; letter-spacing: -.005em; white-space: nowrap; }
.wp-b dd { color: #eee6d6; }                       /* warm ivory */
.wp-d dd { color: #b8b2a8; }                       /* muted ivory-grey */
.wp-pre, .wp-suf { font-size: .7em; font-weight: 450; color: var(--ash); }
.wp-self { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ash); }
.wp-s { color: var(--bone); font-weight: 560; white-space: nowrap; }
.wp-sf { color: var(--red); }
.wp-note { margin: 8px auto 0; max-width: 34em; font-size: 11.5px; line-height: 1.6; color: var(--mute); text-wrap: pretty; }
.wp .wp-more { min-height: 36px; padding: 4px 2px; font-size: 11.5px; }
.shr { margin-top: 22px; }

/* footer operations layer: beta note, two actions, documents, languages, version */
.ops { width: 100%; max-width: 520px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.beta-h { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--ash); }
.beta-p { max-width: 31em; font-size: 12.5px; line-height: 1.65; color: var(--mute); text-wrap: balance; }
.ops-a { margin: 8px 0 2px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ops .foot-l { gap: 0 16px; }
.foot-lang { display: flex; justify-content: center; gap: 0 6px; }
.foot .foot-lang .link { min-height: 40px; padding: 8px 6px; font-size: 12px; letter-spacing: .06em; text-decoration: none; }
.foot .foot-lang .link[aria-pressed="true"] { color: var(--bone); text-decoration: underline; text-decoration-color: rgba(236, 232, 225, .45); }
.ver { font-size: 11px; color: var(--mute); letter-spacing: .02em; }

/* context shortcut: a small pill; PC bottom-right, phones bottom-centre above the safe area */
.stk { position: fixed; z-index: 25; right: max(24px, var(--pad)); bottom: calc(24px + var(--sab)); visibility: hidden; opacity: 0; transform: translateY(8px);
  pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
.stk.on { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s; }
.stk-b { appearance: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 0 20px 0 22px; border-radius: 999px;
  border: 1px solid rgba(236, 232, 225, .34); background: rgba(9, 10, 13, .92); color: var(--bone); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.stk-b span { overflow: hidden; text-overflow: ellipsis; }
.stk-b i { font-style: normal; color: var(--ash); }
.stk-b:hover { border-color: rgba(236, 232, 225, .62); }

/* sheets: feedback, update notes, share, the method's two separate bases */
.fb { display: flex; flex-direction: column; gap: 16px; }
.fb .q legend { margin-bottom: 10px; font-size: 14px; color: var(--bone); }
.fb .chip { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
.fb .fine { margin-top: 0; }
.fb-t { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.fb-t textarea { width: 100%; min-height: 104px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35);
  color: var(--bone); font: inherit; font-size: 16px; line-height: 1.55; }
.fb-t textarea:focus { outline: none; border-color: var(--bone); }
.fb-off { margin: -2px 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--ash); }
.fb-msg { min-height: 1.5em; font-size: 13.5px; line-height: 1.55; color: var(--ash); }
.fb-msg.bad { color: #d4867e; }
.fb-msg.ok { color: var(--bone); }
.fb-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-acts .cta[aria-disabled="true"] { opacity: .45; cursor: progress; }
.sheet .fb-acts { margin-top: 18px; }
.fb .fb-acts { margin-top: 0; }
.nt { display: flex; flex-direction: column; gap: 20px; }
.nt-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.nt-h time { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--mute); }
.nt-h .pv { font-style: normal; font-weight: 400; font-size: 11px; color: var(--ash); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.sh-opts { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.sh-o { appearance: none; width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .3); color: var(--ash);
  font-size: 14.5px; line-height: 1.6; cursor: pointer; }
.sh-o span { white-space: pre-line; }
.sh-o[aria-checked="true"] { border-color: var(--bone); color: var(--bone); background: rgba(236, 232, 225, .06); }
.m-sec-h { margin: 0 0 10px; font-size: 14.5px; font-weight: 600; color: var(--bone); }
.m-sec { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.m-sec > summary { display: flex; align-items: center; min-height: 40px; margin: 0; cursor: pointer; list-style: none; }
.m-sec > summary::-webkit-details-marker { display: none; }
.m-sec > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 4px 0 auto; border-right: 1.4px solid var(--ash); border-bottom: 1.4px solid var(--ash); transform: rotate(45deg); transition: transform .2s var(--ease); }
.m-sec[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.m-sec > ul { margin-top: 8px; }
@media (max-width: 767px) {
  .stk { left: 50%; right: auto; translate: -50% 0; bottom: calc(14px + var(--sab)); max-width: calc(100% - 32px); }
  /* the views with a shortcut keep an empty band under the footer: the only place on a phone where the pill covers nothing */
  body[data-view="result"] .foot, body[data-view="family"] .foot, body[data-view="focus"] .foot { padding-bottom: calc(var(--sab) + 78px); }
  .wp { padding-top: 14px; }
  .wp-g > div { padding: 0 6px; }
  .wp-g dd { font-size: 15.5px; }                 /* phones: the main number is width-limited (~33–40 px); the pulse stays at most half of it */
}


/* ================================================================= V3.3.2 FINAL POLISH
   priority: the number › the next step (CTA) › the decimals' drip and the beat › the camera › WORLD PULSE, the quote, the rest */
/* 1 · today's sentence: part of the page, not a footnote — ivory, larger, a soft shadow for the sky behind (no card, no box) */
.quote { max-width: 32em; padding: 22px 0 14px; opacity: 1; color: #f3ede2; }
.quote blockquote { font-size: 16px; line-height: 1.7; letter-spacing: -.004em; text-shadow: 0 1px 14px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
.quote figcaption { margin-top: 6px; font-size: 12.5px; letter-spacing: .01em; color: rgba(222, 215, 203, .72); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.hq { max-width: 30em; margin-top: clamp(30px, 5.2vh, 52px); text-align: center; color: #f3ede2; animation: in .9s linear .5s backwards; }
.hq blockquote { font-size: 17px; line-height: 1.7; letter-spacing: -.006em; text-wrap: balance; text-shadow: 0 0 22px rgba(0, 0, 0, .95), 0 1px 3px rgba(0, 0, 0, .8); }
.hq figcaption { margin-top: 6px; font-size: 12.5px; letter-spacing: .01em; color: rgba(222, 215, 203, .7); text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
body[data-view="land"] .foot .quote, body[data-view="dob"] .foot .quote { display: none; }      /* one sentence per screen */
/* 2 · the first step: larger, quiet light at the edge, a soft rise in, hover lift, press, a visible keyboard focus */
.v-stage .cta#b-calc { min-height: 60px; min-width: 280px; padding: 0 40px; font-size: 17.5px; font-weight: 680; letter-spacing: -.012em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 16px 46px -16px rgba(255, 238, 214, .42); transition: background .2s, box-shadow .25s, transform .15s;
  animation: cta-in .7s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
.v-stage .cta#b-calc:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .42), 0 18px 54px -14px rgba(255, 238, 214, .55); transform: translateY(-1px); }
.v-stage .cta#b-calc:active { transform: scale(.975); }
.cta:focus-visible, .stk-b:focus-visible, .unit:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
@keyframes cta-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 3 · the drip: the digit a decimal just left slides down out of its cell and fades — seen only below the digits (generated text: never
   part of the number; the layer sits on the cells' own line, measured once per fit) */
.fr { position: relative; }
.drip { position: absolute; left: 0; top: 0; width: 100%; height: 1em; pointer-events: none; clip-path: inset(.84em -.3em -3em -.3em); }   /* only below the digits' baseline: a copy flows out from under the digit */
.drip i { position: absolute; top: 0; left: calc(.3em + var(--i) * var(--dgw, .6em)); width: var(--dgw, .6em); line-height: 1; text-align: center;
  font-style: normal; color: var(--red); opacity: 0; transform-origin: 50% 0; will-change: transform, opacity; }
.drip i::after { content: attr(data-g); }
/* 4 · the beat: the ones digit of the seconds only, scaled from its own centre (nothing else moves) */
.beat-wrap { position: relative; display: inline-block; width: var(--dgw, .6em); vertical-align: baseline;
  transform-origin: 50% 58%; z-index: 3; isolation: isolate; will-change: transform, filter; }
.beat-wrap .dg { width: 100%; }
@keyframes heartbeat-fallback {
  0% { transform: scale(1.04); filter: brightness(1.05); }
  25% { transform: scale(1.22); filter: brightness(1.22); }
  100% { transform: scale(1); filter: brightness(1); }
  78% { transform: scale(1); filter: brightness(1); }
}
.beat-wrap.beat-playing { animation: heartbeat-fallback .34s ease-out both; }
/* Fallback remains a single pulse synchronized with the visible whole-second change.
   Only this requested seconds effect runs if system reduced-motion is enabled. */
@media (prefers-reduced-motion: reduce) {
  html .beat-wrap.beat-playing { animation-duration: .34s !important; animation-iteration-count: 1 !important; }
}
/* 6 · six units */
.unit { min-width: 62px; padding: 0 12px; }
.unote { min-height: 1.5em; margin-top: 8px; max-width: 36em; font-size: 12px; line-height: 1.5; color: var(--mute); visibility: hidden; text-wrap: balance; }
.unote.on { visibility: visible; }
.unote + .basis { margin-top: 6px; }
/* 7 · the next step in the result's own flow */
.next { margin-top: clamp(26px, 4vh, 40px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.next-l { max-width: 28em; font-size: 14px; line-height: 1.55; color: var(--ash); text-wrap: balance; }
.cta.next-b { min-height: 56px; min-width: 250px; padding: 0 30px 0 34px; gap: 12px; font-size: 16.5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 14px 40px -16px rgba(255, 238, 214, .38); transition: background .2s, box-shadow .25s, transform .15s; }
.cta.next-b i { font-style: normal; transition: transform .2s var(--ease); }
.cta.next-b:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 16px 48px -14px rgba(255, 238, 214, .5); transform: translateY(-1px); }
.cta.next-b:hover i { transform: translateX(3px); }
.cta.next-b:active { transform: scale(.975); }
.stk-b { min-height: 52px; padding: 0 22px 0 24px; font-size: 15.5px; }
@media (max-width: 767px) {
  .quote blockquote { font-size: 15px; }
  .hq { max-width: 22em; margin-top: clamp(24px, 4.2vh, 40px); }
  .hq blockquote { font-size: 15.5px; }
  .v-stage .cta#b-calc { min-height: 56px; min-width: min(300px, 100%); padding: 0 30px; font-size: 17px; }
  .units { display: flex; width: min(100%, 392px); }
  .unit { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 14px; }
  .unote { min-height: 3em; }
  .cta.next-b { width: min(100%, 340px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hq { display: none; }
  body[data-view="land"] .foot .quote, body[data-view="dob"] .foot .quote { display: block; }
  .v-stage .cta#b-calc { min-height: 48px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* MyTimeView V3.3.2-M1: phone first-viewport layout hotfix.
   Applies only to portrait phones (<=600px); no changes to PC, landscape, data or the live number engine.
   Keep the hero/result on the same stage so the 1.68 s numeric transition is unaffected. */
@media (max-width: 600px) and (orientation: portrait) {
  :root { --stage-top: clamp(86px, 10.5svh, 100px); }

  /* Leave a clear gap below the fixed navigation, not an empty quarter-screen. */
  .v-stage { padding-bottom: calc(var(--sab) + 24px); }
  .v-stage .clock { margin-top: clamp(15px, 2.2svh, 22px); }
  .v-stage .hx .note { margin-top: clamp(12px, 2svh, 17px); }
  .v-stage .cta#b-calc { margin-top: clamp(17px, 2.6svh, 24px); }
  .v-stage .hq { margin-top: clamp(19px, 3svh, 28px); animation: in .28s ease-out .08s both; }

  /* Fold-critical result: number -> lived -> units -> primary 365-day action.
     Empty notes must not consume a visible blank row. */
  .v-stage .rx { margin-top: 11px; }
  .v-stage .lived-s { min-height: 0; height: 0; overflow: hidden; }
  .v-stage .lived[aria-expanded="true"] + .lived-s { min-height: 1.5em; height: auto; overflow: visible; }
  .v-stage .units { margin-top: 12px; }
  .v-stage .unote:not(.on) { margin-top: 0; min-height: 0; height: 0; overflow: hidden; }
  .v-stage .unote.on { min-height: 2em; }
  .v-stage .basis { margin-top: 10px; }
  .v-stage .next { margin-top: clamp(16px, 2.5svh, 23px); gap: 9px; }
  .v-stage .wp { margin-top: clamp(22px, 3svh, 30px); }

  /* A saved/returning visitor deserves the same immediate first-screen hierarchy. */
  .v-home { justify-content: flex-start; padding-top: calc(var(--sat) + var(--stage-top)); }
  .v-home .clock { margin-top: 18px; }
  .v-home .month { margin-top: 12px; }
  .v-home .dis { margin-top: clamp(22px, 3svh, 30px); }
}