/* ==========================================================================
   Haru-key — shared styles (every page)
   The whole site is a keyboard: every control is a keycap that physically
   presses down, and the header is a routine key that fills as you scroll.
   ========================================================================== */

:root {
  --ink: #15181A;
  --ink-2: #5B6361;
  --ink-3: #98A09C;
  --paper: #F6F7F5;
  --key: #FFFFFF;
  --edge: #CCD2CE;
  --line: #DADFDC;
  --lit: #FFD43B;
  --lit-edge: #D9A900;
  --miss: #BF4A30;
  --cream: #FFFBF2;
  --cream-edge: #DECDB2;
  --red: #FC5A4F;
  --red-deep: #C9362D;
  --blue: #36C3FE;
  --blue-deep: #1686CC;
  --brand: var(--red);
  --brand-deep: var(--red-deep);
  --brand-alt: var(--blue);
  --brand-alt-deep: var(--blue-deep);
  --k1: #FFD43B; --k2: #5CC8F2; --k3: #7ED957; --k4: #FF8FAB; --k5: #FFA24C; --k6: #B69CFF;
  --night: #0D0F10;
  --graphite: #1C2124;
  --focus: #15181A;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
    Thonburi, "Leelawadee UI", "Noto Sans Thai", sans-serif;
  --display: ui-rounded, var(--font);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gut: 16px;
  --maxw: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.55, .5, 1);
}
html[data-icon="blue"] {
  --brand: var(--blue); --brand-deep: var(--blue-deep);
  --brand-alt: var(--red); --brand-alt-deep: var(--red-deep);
}
/* Script-appropriate system fonts (Han glyph shapes differ between ja / zh-Hans / zh-Hant / ko) */
:lang(ko) { --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, sans-serif; }
:lang(ja) {
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --display: ui-rounded, "Hiragino Maru Gothic ProN", var(--font);
}
:lang(zh-Hans) { --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; }
:lang(zh-Hant) { --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
:lang(th) { --font: -apple-system, BlinkMacSystemFont, Thonburi, "Leelawadee UI", "Noto Sans Thai", "Segoe UI", sans-serif; }

@media (min-width: 760px) { :root { --gut: 32px; } }
@media (min-width: 1100px) { :root { --gut: 48px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); scroll-padding-top: 84px; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
.js body { transition: opacity .25s ease; }
.hk-wait body { opacity: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) p { word-break: keep-all; overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--lit); color: var(--ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 100; left: 12px; top: -80px;
  padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
.wrap {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}
.ico { width: 20px; height: 20px; flex: none; display: block; }
.ico--sm { width: 14px; height: 14px; }

/* ---------- keycap ---------- */
.kc {
  --face: var(--key);
  --edge-c: var(--edge);
  --d: 5px;
  --r: 14px;
  position: relative;
  margin: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--face);
  color: inherit;
  font: inherit;
  box-shadow: 0 var(--d) 0 var(--edge-c), 0 calc(var(--d) + 8px) 18px -10px rgba(0, 0, 0, .35), inset 0 1.5px 0 rgba(255, 255, 255, .7);
  transition: translate .08s ease-out, box-shadow .08s ease-out, background-color .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button.kc, label.kc, a.kc { cursor: pointer; }
button.kc:active, label.kc:active, a.kc:active, .kc.is-down {
  translate: 0 var(--d);
  box-shadow: 0 0 0 var(--edge-c), 0 3px 8px -6px rgba(0, 0, 0, .35), inset 0 1.5px 0 rgba(255, 255, 255, .7);
}
.is-pop { animation: squash .42s var(--spring); }
@keyframes squash {
  0% { scale: 1.07 .88; }
  45% { scale: .97 1.05; }
  100% { scale: 1 1; }
}

.btnkey {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 11px 18px;
  font-weight: 700; font-size: 15.5px; line-height: 1.2; text-align: center; text-decoration: none;
  color: var(--ink);
}
.btnkey--ink { --face: var(--ink); --edge-c: #000; color: #fff; }
.btnkey--ghost { --face: transparent; --edge-c: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.btnkey--ghost:active { box-shadow: inset 0 0 0 2px currentColor; }
.minikey {
  --r: 12px; --d: 4px;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--ink);
}
.minikey .ico { width: 22px; height: 22px; }

/* toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; font-size: 15px; line-height: 1.25; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch__ui {
  position: relative; flex: none; width: 54px; height: 32px; border-radius: 99px;
  background: #D2D8D4; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18); transition: background-color .2s;
}
.switch__ui::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); transition: translate .25s var(--spring), background-color .2s;
}
.switch input:checked + .switch__ui { background: var(--ink); }
.switch input:checked + .switch__ui::after { translate: 22px 0; background: var(--lit); }
.switch input:focus-visible + .switch__ui { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch small { display: block; font-weight: 500; font-size: 12.5px; opacity: .7; }

/* ---------- the day key (header) ---------- */
.top {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  pointer-events: none;
}
.daykey {
  pointer-events: auto;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 8px;
  max-width: var(--maxw); height: 54px; margin: 0 auto; padding: 0 7px 0 9px;
  border-radius: 18px;
  background: var(--key); color: var(--ink);
  box-shadow: 0 5px 0 var(--edge), 0 16px 30px -14px rgba(0, 0, 0, .5);
  transition: color .3s;
}
.daykey__fill {
  position: absolute; inset: 0; z-index: -1;
  background: #FFDC5E;
  transform: translateX(-100%);
  will-change: transform;
}
.daykey__fill::after {
  content: ""; position: absolute; top: 9px; bottom: 9px; right: 0; width: 2px; border-radius: 2px;
  background: rgba(21, 24, 26, .3);
}
.daykey.is-done { color: #fff; }
.daykey.is-done .daykey__fill { background: var(--ink); }
.daykey.is-done .daykey__fill::after { display: none; }
.brand {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 4px 6px 4px 2px; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.brand__icon { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand__word { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.daykey__clock {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 9px;
  background: rgba(21, 24, 26, .07);
  font-family: var(--mono); font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.daykey.is-done .daykey__clock { background: rgba(255, 255, 255, .12); }
.daykey__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #7FA8FF; box-shadow: 0 0 0 1.5px rgba(21, 24, 26, .55);
  transition: background-color .4s;
}
.daykey[data-phase="dawn"] .daykey__dot { background: #FFA24C; }
.daykey[data-phase="day"] .daykey__dot { background: #FF5A4F; }
.daykey[data-phase="dusk"] .daykey__dot { background: #FF8FAB; }
.daykey.is-running .daykey__dot { animation: pulse 1.6s ease-in-out infinite; }
.daykey__check { display: none; width: 16px; height: 16px; color: var(--lit); }
.daykey.is-done .daykey__dot { display: none; }
.daykey.is-done .daykey__check { display: block; }
@keyframes pulse { 50% { scale: .6; } }
.daykey__end { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 9px 0 9px; margin: 0 0 3px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: #F0F2F0; color: var(--ink);
  box-shadow: 0 3px 0 #C3CAC6;
  font-weight: 700; font-size: 14px;
  transition: translate .08s, box-shadow .08s;
  -webkit-tap-highlight-color: transparent;
}
.lang__btn:active, .lang__btn[aria-expanded="true"] { translate: 0 3px; box-shadow: 0 0 0 #C3CAC6; }
.lang__cur { max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
  .lang__cur { font-size: 0; max-width: none; overflow: visible; }
  .lang__cur::after { content: attr(data-short); font-size: 14px; }
}
.getkey {
  display: none;
  align-items: center; height: 40px; padding: 0 14px; margin: 0 0 3px;
  border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 14px; white-space: nowrap;
  box-shadow: 0 3px 0 #000;
  transition: translate .08s, box-shadow .08s;
}
.getkey:active { translate: 0 3px; box-shadow: 0 0 0 #000; }
.daykey.is-done .getkey { background: var(--lit); color: var(--ink); box-shadow: 0 3px 0 var(--lit-edge); }
@media (min-width: 600px) { .getkey { display: inline-flex; } }

.lang__menu {
  pointer-events: auto;
  position: absolute; top: calc(100% + 10px); right: max(8px, env(safe-area-inset-right));
  width: min(640px, calc(100vw - 16px)); max-height: min(72vh, 580px); overflow: auto; overscroll-behavior: contain;
  padding: 14px 14px 18px; border-radius: 22px;
  background: var(--key); color: var(--ink);
  box-shadow: 0 6px 0 var(--edge), 0 30px 60px -20px rgba(0, 0, 0, .55);
  animation: menuIn .22s var(--ease);
}
@media (min-width: 1256px) { .lang__menu { right: calc((100vw - var(--maxw)) / 2); } }
@keyframes menuIn { from { opacity: 0; translate: 0 -8px; } }
.lang__title { margin: 2px 4px 12px; font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lang__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
@media (min-width: 560px) { .lang__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .lang__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lang__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 46px; padding: 8px 12px; border-radius: 12px;
  background: #F2F4F2; color: var(--ink); text-decoration: none;
  box-shadow: 0 3px 0 #D0D6D2;
  font-weight: 700; font-size: 15px; line-height: 1.2;
  transition: translate .08s, box-shadow .08s;
}
.lang__opt:active { translate: 0 3px; box-shadow: 0 0 0 #D0D6D2; }
.lang__opt[aria-current="true"] { background: var(--lit); box-shadow: 0 3px 0 var(--lit-edge); }
.lang__opt[aria-current="true"]::after { content: "✓"; font-weight: 900; }

/* ---------- type ---------- */
.kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.kicker__t {
  padding: 5px 9px 4px; border-radius: 8px;
  background: var(--ink); color: var(--lit);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  box-shadow: 0 3px 0 #000;
}
.display {
  margin: 0 0 26px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(42px, 11vw, 132px); line-height: .95; letter-spacing: -.035em;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
:lang(ko) .display, :lang(ja) .display, :lang(zh-Hans) .display, :lang(zh-Hant) .display { letter-spacing: -.03em; line-height: 1.08; }
:lang(th) .display, :lang(vi) .display { line-height: 1.12; letter-spacing: -.02em; }
.ln { display: block; overflow: hidden; padding: .14em 0 .1em; margin: -.14em 0 -.1em; }
.ln__i { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.js .rv, .js [data-lines] .ln__i { will-change: transform; }
.js [data-lines]:not(.is-in) .ln__i { transform: translateY(115%); }
.js [data-lines] .ln__i { transition: transform .95s var(--ease); }
.js [data-lines] .ln:nth-child(2) .ln__i { transition-delay: .09s; }
.js [data-lines] .ln:nth-child(3) .ln__i { transition-delay: .18s; }
.js [data-lines] .ln:nth-child(4) .ln__i { transition-delay: .27s; }
.js .rv { opacity: 0; translate: 0 28px; transition: opacity .75s var(--ease), translate .75s var(--ease); }
.js .rv.is-in { opacity: 1; translate: 0 0; }
.lead { max-width: 38em; margin: 0 0 28px; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.55; font-weight: 500; }

/* ---------- App Store ---------- */
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cta__note { font-size: 14px; font-weight: 700; opacity: .92; }
.cta > [data-appstore] { min-width: 0; max-width: 100%; }
.appstore { display: inline-block; border-radius: 12px; transition: translate .1s; }
.appstore:active { translate: 0 3px; }
.appstore img { display: block; height: 52px; width: auto; }
.soon {
  display: inline-flex; align-items: center; gap: 9px;
  max-width: 100%; overflow-wrap: anywhere;
  padding: 13px 18px; border-radius: 14px;
  background: var(--ink); color: #fff;
  font-weight: 800; font-size: 15px; line-height: 1.2;
  box-shadow: 0 5px 0 #000;
}
.soon svg { width: 20px; height: 20px; flex: none; color: var(--lit); }

/* ---------- footer ---------- */
.foot { background: var(--night); color: #E9ECEA; padding: 54px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 15px; --focus: var(--lit); }
.foot__grid { display: grid; gap: 26px; }
.foot__brand { display: flex; align-items: center; gap: 12px; }
.foot__brand img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.foot__brand b { font-family: var(--display); font-weight: 800; font-size: 20px; }
.foot__brand p { margin: 0; color: #9AA29E; font-size: 14px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px; border-radius: 12px;
  background: #1E2427; color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 4px 0 #050606; transition: translate .08s, box-shadow .08s;
}
.foot__nav a:active { translate: 0 4px; box-shadow: 0 0 0 #050606; }
.foot__legal, .foot__copy { margin: 0; color: #8E9692; font-size: 12.5px; max-width: 62em; }
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: 1fr auto; align-items: center; }
  .foot__legal, .foot__copy { grid-column: 1 / -1; }
}

/* ---------- legal pages (privacy / support / 404) ---------- */
.page { background: var(--paper); color: var(--ink); padding: calc(110px + env(safe-area-inset-top)) 0 90px; min-height: 70vh; }
.page .wrap { max-width: 900px; }
.page .display { font-size: clamp(40px, 9vw, 100px); }
.page__date {
  display: inline-block; margin: 0 0 8px; padding: 6px 10px; border-radius: 9px;
  background: var(--ink); color: var(--lit); font: 700 13px var(--mono); box-shadow: 0 3px 0 #000;
}
.tldr { margin: 34px 0 42px; padding: 22px 22px 24px; border-radius: 24px; background: var(--lit); color: var(--ink); box-shadow: 0 7px 0 var(--lit-edge); }
.tldr h2 { font-family: var(--display); font-weight: 900; font-size: 22px; margin: 0 0 8px; }
.tldr p { margin: 0; font-size: 17px; font-weight: 600; }
.sec { padding: 26px 0 28px; border-top: 3px solid var(--ink); }
.sec h2 { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.2; margin: 0 0 10px; }
.sec p, .sec div { margin: 0; max-width: 44em; color: #2A2F31; }
.sec a, .faq a, .contact a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.faqs { margin: 34px 0 40px; }
.faq { margin: 0 0 16px; }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 18px 18px 20px; border-radius: 18px;
  background: var(--key); color: var(--ink);
  box-shadow: 0 5px 0 var(--edge), 0 14px 22px -16px rgba(0, 0, 0, .3);
  font-weight: 800; font-size: 17.5px; line-height: 1.3;
  transition: translate .08s, box-shadow .08s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-left: auto; width: 12px; height: 12px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  rotate: 45deg; translate: 0 -3px; transition: rotate .2s, translate .2s;
}
.faq summary:active { translate: 0 5px; box-shadow: 0 0 0 var(--edge); }
.faq[open] summary { translate: 0 5px; box-shadow: 0 0 0 var(--edge); background: var(--lit); }
.faq[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq__a { padding: 20px 20px 6px; max-width: 46em; }
.faq__a p { margin: 0; }
.contact { margin-top: 20px; padding: 24px; border-radius: 24px; background: var(--ink); color: #fff; box-shadow: 0 7px 0 #000; --focus: var(--lit); }
.contact h2 { font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; }
.contact p { margin: 0 0 18px; color: #D5DAD7; }
.contact a { color: var(--lit); }
.contact .btnkey { --face: var(--lit); --edge-c: var(--lit-edge); color: var(--ink); text-decoration: none; }

.body--legal { background: var(--paper); }
@media (prefers-color-scheme: dark) {
  .body--legal { background: #141719; }
  .body--legal .page { background: #141719; color: #ECEFED; --focus: var(--lit); }
  .body--legal .sec { border-color: #ECEFED; }
  .body--legal .sec p, .body--legal .sec div { color: #C9CFCC; }
  .body--legal .sec a, .body--legal .faq__a a { color: var(--lit); }
  .body--legal .faq summary { background: #22272A; color: #ECEFED; box-shadow: 0 5px 0 #000; }
  .body--legal .faq[open] summary { background: var(--lit); color: var(--ink); }
  .body--legal .kicker__t { background: var(--lit); color: var(--ink); box-shadow: 0 3px 0 var(--lit-edge); }
  .body--legal .page__date { background: var(--lit); color: var(--ink); box-shadow: 0 3px 0 var(--lit-edge); }
  .body--legal .contact { background: #23292C; box-shadow: 0 7px 0 #000; }
}

/* 404 */
.nf { background: var(--brand); color: var(--ink); padding: calc(120px + env(safe-area-inset-top)) 0 100px; min-height: 100vh; overflow: hidden; }
.nf__keys { display: flex; gap: clamp(10px, 2.4vw, 22px); margin: 10px 0 40px; }
.nf__key {
  --face: var(--cream); --edge-c: var(--cream-edge); --d: 10px; --r: 24px;
  display: grid; place-items: center; width: clamp(84px, 24vw, 190px); aspect-ratio: 1;
  font-family: var(--display); font-weight: 900; font-size: clamp(52px, 14vw, 120px); line-height: 1;
}
.nf__hole {
  display: grid; place-items: center; width: clamp(84px, 24vw, 190px); aspect-ratio: 1; border-radius: 24px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 8px 16px rgba(0, 0, 0, .45);
}
.nf__hole::before {
  content: ""; width: 26%; aspect-ratio: 1;
  background: linear-gradient(#FFFBF2, #FFFBF2) center / 100% 30% no-repeat, linear-gradient(#FFFBF2, #FFFBF2) center / 30% 100% no-repeat;
  opacity: .8;
}
.nf .lead { font-weight: 600; }
.nf .btnkey { --face: var(--ink); --edge-c: #000; color: #fff; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1; translate: none; }
  .js [data-lines]:not(.is-in) .ln__i { transform: none; }
}