/* HaruBit landing page: one day, from morning to night, scrolled.
   Colors are the app's own tones (core/designsystem Palette seeds), its Nunito type and its raised 3D:
   a face on a darker edge. Korean display type is Jua, which shares Nunito's rounded ends. */

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
}
/* Only the Hangul this page uses. Any other Hangul falls back to the system's Korean font. */
@font-face {
  font-family: "Jua";
  src: url("fonts/jua.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+3131-318E, U+AC00-D7A3;
}
@font-face {
  font-family: "HaruBit Hangul";
  src: url("fonts/hangul.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+3131-318E, U+AC00-D7A3;
}

:root {
  color-scheme: light dark;

  --bg: #FFF0F2;
  --ink: #261D1F;
  --ink-2: #5F4E51;
  --line: #E3CCD0;
  --dawn-top: #FFE0D9;
  --dawn-glow: #FFD3B0;
  --noon-top: #FFF4EF;
  --dusk-top: #FBE6F1;
  --dusk-bottom: #EFE0F6;
  --sun: rgb(255 196 150 / 0.75);
  --ghost: rgb(197 65 109 / 0.08);

  --primary: #B83763;
  --primary-face: #C5416D;
  --primary-edge: #AB2C5A;
  --on-primary: #FFFFFF;
  --primary-soft: #FFE1E6;
  --on-primary-soft: #5F2A39;
  --mint-face: #008C7D;
  --mint-edge: #006B5F;
  --mint-soft: #CDF5EC;
  --violet-face: #8364EE;
  --violet-edge: #6543CD;
  --violet-soft: #E9E0FF;

  --tile-face: #FFFFFF;
  --tile-edge: #D8C8CA;
  --tile-ink: #43393B;
  --phone: #2A2224;
  --shadow: 102 0 45;
  --focus: #008678;

  --gloss: #7A666A;
  --shade: rgb(102 0 45 / 0.3);
  --screen-top: #FBE7EE;
  --screen-bottom: #FFEFF2;

  --night: #251A2B;
  --twilight-1: rgb(214 170 222 / 0.6);
  --twilight-2: #5E4170;
  --night-ink: #F7E8EC;
  --night-ink-2: #DCC6CD;

  --edge: 5px;
  --edge-small: 3px;
  --gutter: clamp(16px, 5vw, 48px);
  --section: clamp(5rem, 11vw, 8.5rem);
  --radius: 16px;
  --radius-large: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --korean: "HaruBit Hangul", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif;
  --display-ko: "Jua", var(--korean);
}

/* The dark theme: by the system setting, unless the visitor picked a theme with the header switch. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1E1517;
  --ink: #F5E4E6;
  --ink-2: #D2BCBF;
  --line: #534346;
  --dawn-top: #36202A;
  --dawn-glow: #5C2B32;
  --noon-top: #251A1D;
  --dusk-top: #251B2B;
  --dusk-bottom: #1C1522;
  --sun: rgb(150 60 70 / 0.45);
  --ghost: rgb(255 142 172 / 0.045);

  --primary: #FF8EAC;
  --primary-face: #FF7BA1;
  --primary-edge: #BC3966;
  --on-primary: #3F0019;
  --primary-soft: #6D3545;
  --on-primary-soft: #FFD9E0;
  --mint-face: #25BFAD;
  --mint-edge: #00786C;
  --mint-soft: #003D36;
  --violet-face: #B7A3FF;
  --violet-edge: #7959E3;
  --violet-soft: #33295A;

  --tile-face: #382E30;
  --tile-edge: #22191B;
  --tile-ink: #EFDEE1;
  --phone: #0F0A0B;
  --shadow: 0 0 0;
  --focus: #3DCDBA;

  --night: #110B12;
  --twilight-1: rgb(40 26 46 / 0.7);
  --twilight-2: #1A1120;
  --gloss: #B39EA2;
  --shade: rgb(0 0 0 / 0.55);
  --screen-top: #38232A;
  --screen-bottom: #1F1518;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1E1517;
    --ink: #F5E4E6;
    --ink-2: #D2BCBF;
    --line: #534346;
    --dawn-top: #36202A;
    --dawn-glow: #5C2B32;
    --noon-top: #251A1D;
    --dusk-top: #251B2B;
    --dusk-bottom: #1C1522;
    --sun: rgb(150 60 70 / 0.45);
    --ghost: rgb(255 142 172 / 0.045);

    --primary: #FF8EAC;
    --primary-face: #FF7BA1;
    --primary-edge: #BC3966;
    --on-primary: #3F0019;
    --primary-soft: #6D3545;
    --on-primary-soft: #FFD9E0;
    --mint-face: #25BFAD;
    --mint-edge: #00786C;
    --mint-soft: #003D36;
    --violet-face: #B7A3FF;
    --violet-edge: #7959E3;
    --violet-soft: #33295A;

    --tile-face: #382E30;
    --tile-edge: #22191B;
    --tile-ink: #EFDEE1;
    --phone: #0F0A0B;
    --shadow: 0 0 0;
    --focus: #3DCDBA;

    --night: #110B12;
    --twilight-1: rgb(40 26 46 / 0.7);
    --twilight-2: #1A1120;
    --gloss: #B39EA2;
    --shade: rgb(0 0 0 / 0.55);
    --screen-top: #38232A;
    --screen-bottom: #1F1518;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--primary-face) var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Nunito", var(--korean), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 550;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primary-face); color: var(--on-primary); }

:lang(ko), .ko { font-family: var(--korean); font-weight: 700; }

a { color: var(--primary); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ol, ul, dl { margin: 0; padding: 0; }
li { list-style: none; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  background: var(--tile-face);
  font-weight: 800;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.top, .hero, main > section, .night > section, .foot-inner {
  width: min(100% - 2 * var(--gutter), 1160px);
  margin-inline: auto;
}

main, .foot { overflow-x: clip; }

/* The sky: dawn at the top of the page, dusk by the time you reach the night. Only opacity moves. */

.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky > div { position: absolute; inset: 0; }
.sky-dawn {
  background:
    radial-gradient(60rem 36rem at 88% -8%, var(--dawn-glow) 0, transparent 70%),
    linear-gradient(180deg, var(--dawn-top) 0, var(--bg) 75%);
}
.sky-noon { background: linear-gradient(180deg, var(--noon-top) 0, var(--bg) 80%); opacity: 0; }
.sky-dusk { background: linear-gradient(180deg, var(--dusk-top) 0, var(--dusk-bottom) 100%); opacity: 0; }
.sky .sun {
  inset: auto;
  width: 70vmax;
  aspect-ratio: 1;
  right: -28vmax;
  top: -34vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sun), transparent);
  opacity: 0.85;
}

/* Header */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.brand-icon { border-radius: 12px; box-shadow: 0 var(--edge-small) 0 var(--primary-edge); }
.top-nav { display: flex; gap: clamp(1rem, 3vw, 2rem); margin-left: auto; }
.top-nav a { color: var(--ink-2); font-weight: 750; text-decoration: none; }
.top-nav a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 680px) { .top-nav { display: none; } }

/* The theme switch: a sun by day, a moon by night */
.theme-switch {
  position: relative;
  flex: none;
  width: 4.25rem;
  height: 2.5rem;
  margin-left: clamp(1rem, 3vw, 2rem);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--tile-face);
  box-shadow: inset 0 0 0 2px var(--line), 0 var(--edge-small) 0 var(--tile-edge);
  cursor: pointer;
}
@media (max-width: 680px) { .theme-switch { margin-left: auto; } }
.theme-switch:focus-visible { border-radius: 999px; }
.theme-knob {
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFC21A;
  box-shadow: 0 2px 0 #C98F00;
  color: #5A3D00;
}
.theme-switch[aria-checked="true"] .theme-knob {
  transform: translateX(1.75rem);
  background: #B7A3FF;
  box-shadow: 0 2px 0 #7959E3;
  color: #1E1240;
}
.theme-knob svg { grid-area: 1 / 1; transition: opacity 200ms ease-out; }
.theme-sun circle, .theme-moon path { fill: currentColor; }
.theme-sun path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-moon { opacity: 0; }
.theme-switch[aria-checked="true"] .theme-sun { opacity: 0; }
.theme-switch[aria-checked="true"] .theme-moon { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .theme-switch.is-ready .theme-knob { transition: transform 320ms var(--ease-out); }
}

/* Buttons: the app's raised 3D */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.btn-primary {
  background: var(--primary-face);
  color: var(--on-primary);
  box-shadow: 0 var(--edge) 0 var(--primary-edge);
}
a.btn:hover { transform: translateY(2px); box-shadow: 0 calc(var(--edge) - 2px) 0 var(--primary-edge); }
a.btn:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 transparent; }
.btn-soon { cursor: default; }
.btn-soon .play { fill: currentColor; opacity: 0.9; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 2rem; }
.fine { margin-top: 1.1rem; font-size: 0.9375rem; color: var(--ink-2); }

/* Big quiet course words behind each section, one time of day each */

.ghost {
  position: absolute;
  z-index: -1;
  left: -0.04em;
  top: -0.32em;
  font-size: clamp(7.5rem, 24vw, 21rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.ghost-right { left: auto; right: -0.04em; }
.ghost-right .ghost-gloss { left: auto; right: calc(100% + 0.75rem); }
.ghost-word { font-family: var(--display-ko); font-weight: 400; color: var(--ghost); letter-spacing: -0.02em; }
.ghost-gloss {
  position: absolute;
  left: calc(100% + 0.75rem);
  top: 24%;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  opacity: 0.7;
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  padding-block: clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    min-height: min(calc(100svh - 7rem), 46rem);
  }
}
.name .ghost-hero {
  left: 50%;
  top: 46%;
  translate: -50% -50%;
  font-size: clamp(8rem, 40vw, 25rem);
}
.ghost-hero .ghost-word { writing-mode: vertical-rl; display: block; }
.ghost-hero .ghost-gloss { left: auto; top: auto; right: 0.4rem; bottom: -0.5rem; }
@media (max-width: 899px) { .ghost-hero .ghost-gloss { display: none; } }
.hero h1 {
  font-size: clamp(3rem, 7.4vw, 6rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.03em;
  max-width: 11ch;
}
.lede { margin-top: 1.5rem; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; max-width: 30ch; color: var(--ink-2); }

.spine {
  position: absolute;
  right: calc(-1 * clamp(0px, (100vw - 1160px) / 2 - 1.5rem, 3rem));
  top: 50%;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  letter-spacing: 0.5em;
  color: var(--ink-2);
  opacity: 0.55;
  white-space: nowrap;
}
@media (max-width: 1199px) { .spine { display: none; } }

/* The name, built the way Hangul is: letters into blocks, blocks into a word */

.name { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 1.5rem; }
.word {
  --b: clamp(7.5rem, 30vw, 11rem);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  padding-top: calc(var(--b) * 0.36);
}
@media (min-width: 900px) {
  .word { --b: clamp(9.5rem, 12vw, 11.5rem); grid-auto-flow: row; }
}
.haru {
  position: absolute;
  top: 0;
  left: calc(var(--b) / 2);
  width: calc(var(--b) * 0.42);
  transform: translate(-50%, 6%);
  z-index: 2;
}
.block {
  position: relative;
  width: var(--b);
  height: var(--b);
  display: grid;
  gap: 0.45rem;
  padding: 0.45rem;
  border: 0;
  border-radius: var(--radius-large);
  background: none;
  color: var(--tile-ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.block-ha { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.block-ru { grid-template-rows: 1fr 1fr; }
.block .t1, .block .s1 { grid-area: 1 / 1; }
.block-ha .t2, .block-ha .s2 { grid-area: 1 / 2; }
.block-ru .t2, .block-ru .s2 { grid-area: 2 / 1; }
.slot {
  position: absolute;
  inset: 0;
  border: 2px dashed var(--line);
  border-radius: var(--radius-large);
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.tile {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  margin-bottom: var(--edge);
  border-radius: 18px;
  background: var(--tile-face);
  color: var(--tile-ink);
  box-shadow: 0 var(--edge) 0 var(--tile-edge);
  /* Letters on their own use the bold Gothic the app's letter tiles use: Jua draws a lone ㅎ squashed. */
  font-family: var(--korean);
  font-weight: 700;
  font-size: calc(var(--b) * 0.4);
  line-height: 1;
  transform-origin: 50% 100%;
  transition: transform 450ms var(--ease-out);
}
.shade {
  align-self: end;
  height: 18px;
  margin: 0 6% -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--shade), transparent);
}
.roman {
  position: absolute;
  right: 0.45rem;
  bottom: 0.4rem;
  font-family: "Nunito", sans-serif;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.read {
  position: absolute;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  left: 50%;
  top: calc(100% + 0.6rem);
  transform: translateX(-50%);
}
@media (min-width: 900px) {
  .read { left: calc(100% + 1rem); top: 50%; transform: translateY(-50%); }
}
.block:hover .tile { transform: translateY(-3px); }
.block[aria-pressed="true"] .slot { opacity: 1; }
.block[aria-pressed="true"] .roman { opacity: 1; }
.block-ha[aria-pressed="true"] .t1 { transform: translateX(-16%) rotate(-5deg); }
.block-ha[aria-pressed="true"] .t2 { transform: translateX(16%) rotate(4deg); }
.block-ru[aria-pressed="true"] .t1 { transform: translateY(-14%) rotate(3deg); }
.block-ru[aria-pressed="true"] .t2 { transform: translateY(14%) rotate(-3deg); }
.block:focus-visible { outline-offset: 6px; border-radius: var(--radius-large); }

.sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem 0.7rem;
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 800;
}
.sum .ko { font-size: 1.4rem; }
.sum small { font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.sum-op { color: var(--primary); font-weight: 900; }
.sum-total { color: var(--primary); font-weight: 900; }
.hint { font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); margin-top: -0.75rem; }
.hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-touch { display: none; } .hint-mouse { display: inline; } }

@media (max-width: 899px) {
  .sum { margin-top: 2.25rem; }
}

/* The ribbon of course words. The tilt sits on a wrapper with a transparent margin around the band, so
   the band's edges are drawn inside its layer and stay smooth; the track moves on its own GPU layer.
   The band and its word cards draw their raised edge as an inset shadow inside their own box, not as an
   outer shadow below it: tilted, an outer shadow meets the face along an anti-aliased seam that lets the
   color behind show through as a thin line (most visible in Firefox). */

.band-tilt {
  width: 106%;
  margin: clamp(0.5rem, 2vw, 1.5rem) 0 0 -3%;
  padding-block: 10px;
  transform: rotate(-1.5deg);
  outline: 1px solid transparent;
  backface-visibility: hidden;
}
.band {
  position: relative;
  padding-block: 0.85rem calc(1.15rem + var(--edge));
  margin-bottom: calc(-1 * var(--edge));
  background: var(--primary-face);
  box-shadow: inset 0 calc(-1 * var(--edge)) 0 var(--primary-edge);
  -webkit-tap-highlight-color: transparent;
}
.band[role="button"] { cursor: pointer; }
.band:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.band-view {
  overflow: hidden;
  padding-block: 6px 8px;
  margin-block: -6px -8px;
}
.band-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}
.band-set { display: flex; flex: none; gap: 0.9rem; padding-right: 0.9rem; }
.band li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem calc(0.55rem + var(--edge-small));
  margin-bottom: calc(-1 * var(--edge-small));
  border-radius: 14px;
  background: var(--tile-face);
  box-shadow: inset 0 calc(-1 * var(--edge-small)) 0 var(--tile-edge);
  white-space: nowrap;
}
.band-ko { font-family: var(--display-ko); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var(--tile-ink); }
.band-en { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; color: var(--gloss); }
.band-state {
  position: absolute;
  right: calc(2.83% + clamp(10px, 2vw, 20px));
  top: 0;
  bottom: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin-block: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-edge);
  color: var(--on-primary);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 200ms ease-out, transform 300ms var(--ease-out);
  pointer-events: none;
}
.band-state svg { grid-area: 1 / 1; fill: currentColor; transition: opacity 200ms ease-out; }
.band-play { opacity: 0; }
@media (hover: hover) { .band[role="button"]:hover .band-state { opacity: 0.85; transform: none; } }
.band[role="button"]:focus-visible .band-state { opacity: 0.85; transform: none; }
.band[aria-pressed="true"] .band-state { opacity: 1; transform: none; }
.band[aria-pressed="true"] .band-pause { opacity: 0; }
.band[aria-pressed="true"] .band-play { opacity: 1; }

/* Sections */

main > section, .night > section { position: relative; isolation: isolate; margin-top: var(--section); }
main > .hero { margin-top: 0; }
h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
h2 + p { margin-top: 1.25rem; max-width: 52ch; color: var(--ink-2); font-size: 1.125rem; }
h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
section > .ghost ~ * h2, section > .ghost + * > h2 { padding-top: clamp(4.5rem, 8vw, 6rem); }
.daily > .ghost { top: 8.5rem; }

/* Read Korean block by block */

.build { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.sentence { justify-self: start; }
.sentence-ko { --s: clamp(2.3rem, 10.6vw, 5.25rem); }
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 2.6rem clamp(0.65rem, 2.6vw, 2rem);
  font-family: var(--display-ko);
  font-weight: 400;
}
.w { display: flex; gap: clamp(0.25rem, 0.6vw, 0.45rem); align-items: flex-end; }
.syl {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  border-radius: clamp(10px, 1.4vw, 16px);
  background: var(--tile-face);
  color: var(--tile-ink);
  box-shadow: 0 4px 0 var(--tile-edge);
  font-size: calc(var(--s) * 0.6);
  line-height: 1;
}
.syl::after {
  content: attr(data-j);
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--korean);
  font-weight: 700;
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.syl .g { display: block; }
.syl .j {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 0.55em;
  color: var(--primary);
  opacity: 0;
  pointer-events: none;
}
.syl { transition: transform 200ms ease-out; }
.syl:hover { transform: translateY(-4px) rotate(-2deg); }
.dot { font-size: calc(var(--s) * 0.6); line-height: 1; color: var(--ink); padding-bottom: 0.15em; }
.sentence figcaption { margin-top: 3rem; font-size: 1.125rem; font-weight: 800; color: var(--ink-2); }

/* Two-column sections with a phone */

.path, .practice, .daily {
  display: grid;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
@media (min-width: 900px) {
  .path, .daily { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); }
  .practice { grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .practice .phone-wrap { order: 2; }
}
.phone-wrap { position: relative; display: flex; justify-content: center; padding-block: 2rem; }
.phone-wrap::before, .phone-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(15rem, 62vw);
  aspect-ratio: 3 / 5;
  border-radius: 2.5rem;
  top: 50%;
  left: 50%;
}
.phone-wrap { --p: 0; }
.phone-wrap::before { background: var(--primary-soft); transform: translate(-62%, calc(-48% + var(--p) * 8%)) rotate(calc(-9deg + var(--p) * 3deg)); }
.phone-wrap::after { background: var(--mint-soft); transform: translate(-36%, calc(-54% - var(--p) * 8%)) rotate(calc(7deg + var(--p) * 3deg)); }
.practice .phone-wrap::before { background: var(--violet-soft); }
.practice .phone-wrap::after { background: var(--primary-soft); }
/* A phone: the screen's corners are concentric with the body's, and the screen keeps a status bar and a
   gesture bar above and below the screenshot, so the corners never cut into the app. */
.phone {
  --bezel: 0.5rem;
  --screen-radius: 1.5rem;
  width: min(17rem, 72vw);
  padding: var(--bezel);
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: var(--phone);
  box-shadow:
    0 28px 56px -18px rgb(var(--shadow) / 0.32),
    0 2px 4px rgb(var(--shadow) / 0.12);
}
.screen {
  position: relative;
  overflow: hidden;
  padding-block: 1.75rem;
  border-radius: var(--screen-radius);
  background: linear-gradient(180deg, var(--screen-top) 0 50%, var(--screen-bottom) 50% 100%);
  --screen-mark: rgb(38 29 31 / 0.4);
}
.screen::before, .screen::after { content: ""; position: absolute; left: 50%; translate: -50% 0; }
.screen::before { top: 0.6rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #0B0708; }
.screen::after { bottom: 0.7rem; width: 32%; height: 4px; border-radius: 2px; background: var(--screen-mark); }
.screen img { width: 100%; }
.screen-dark { --screen-top: #38232A; --screen-bottom: #1F1518; }
.screen-dark, :root[data-theme="dark"] .screen { --screen-mark: rgb(255 240 243 / 0.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .screen { --screen-mark: rgb(255 240 243 / 0.45); } }
.shot-dark { display: none; }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none; }
  :root:not([data-theme="light"]) .shot-dark { display: block; }
}
/* main.js moves each phone a little as it passes through the screen: it rises and turns slightly. */
.phone { translate: 0 calc(var(--p) * -1.5rem); rotate: calc(var(--tilt, 0deg) + var(--p) * -1.5deg); }
.phone-tilt-r { --tilt: 2.5deg; }
.phone-tilt-l { --tilt: -2.5deg; }

/* The course path */

.stages { position: relative; isolation: isolate; margin-top: 2.5rem; padding-left: 3.25rem; }
.stage { position: relative; padding-bottom: 2rem; }
/* The line runs from below each stage's node to the next node, which covers its end. */
.stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-3.25rem + 1.125rem - 2px);
  top: calc(2.3rem + var(--edge-small));
  bottom: -0.75rem;
  width: 4px;
  border-radius: 2px;
  background: var(--line);
  transform-origin: 50% 0;
}
.stage:last-child { padding-bottom: 0; }
.stage::before {
  content: "";
  position: absolute;
  left: -3.25rem;
  top: 0.05rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--node);
  box-shadow: 0 var(--edge-small) 0 var(--node-edge);
}
.stage-a { --node: var(--primary-face); --node-edge: var(--primary-edge); }
.stage-b { --node: var(--mint-face); --node-edge: var(--mint-edge); }
.stage-c { --node: var(--violet-face); --node-edge: var(--violet-edge); }
.stage p { margin-top: 0.25rem; max-width: 52ch; color: var(--ink-2); }
.stage .say {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.75rem;
  margin-top: 0.75rem;
}
.say [lang="ko"] {
  padding: 0.3rem 0.8rem 0.35rem;
  border-radius: 12px;
  background: var(--tile-face);
  color: var(--tile-ink);
  box-shadow: 0 var(--edge-small) 0 var(--tile-edge);
  font-size: 1.0625rem;
}
.say-en { font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); }
.say-en::before { content: "\201C"; }
.say-en::after { content: "\201D"; }

/* With main.js, the path draws itself as you read: one line fills down from the first stage to a point
   a little below the middle of the screen, and each stage lights up when the line reaches its node. */
.stages.is-live .stage::after {
  content: "";
  position: absolute;
  left: -3.25rem;
  top: 0.05rem;
  bottom: auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 3px var(--node);
  opacity: 0;
  transform: none;
  pointer-events: none;
}
.stages.is-live::before, .stages.is-live::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(1.125rem - 2px);
  top: var(--track-top);
  width: 4px;
  border-radius: 2px;
}
.stages.is-live::before { height: var(--track-height); background: var(--line); }
.stages.is-live::after {
  height: var(--fill, 0px);
  background: linear-gradient(180deg, var(--primary-face), var(--mint-face) 50%, var(--violet-face));
  background-size: 100% var(--track-height);
}
.stages.is-live .stage:not(.is-reached)::before {
  background: var(--tile-face);
  box-shadow: inset 0 0 0 3px var(--line);
  transform: scale(0.62);
}
.stages.is-live .stage > * { transition: opacity 500ms ease-out, transform 600ms var(--ease-out); }
.stages.is-live .stage:not(.is-reached) > * { opacity: 0.5; transform: translateX(0.5rem); }
.tag {
  display: inline-block;
  vertical-align: 0.2em;
  margin-left: 0.4rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--on-primary-soft);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Practice: a Korean sample beside what you do with it */

.drills { margin-top: 2.25rem; display: grid; gap: 1.25rem; }
.drills > div {
  display: grid;
  grid-template-columns: minmax(7rem, 15.5rem) 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-top: 1.25rem;
  border-top: 2px solid var(--line);
}
.drills dt { display: grid; justify-items: start; gap: 0.35rem; }
.drills dd { margin: 0; color: var(--ink-2); max-width: 46ch; }
.chip {
  padding: 0.3rem 0.75rem 0.4rem;
  border-radius: 12px;
  background: var(--tile-face);
  color: var(--tile-ink);
  box-shadow: 0 var(--edge-small) 0 var(--tile-edge);
  font-size: 1.25rem;
  line-height: 1.3;
}
.chip-letters { display: flex; gap: 0.3rem; padding: 0; background: none; box-shadow: none; }
.chip-letters span {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 10px;
  background: var(--tile-face);
  box-shadow: 0 var(--edge-small) 0 var(--tile-edge);
}
.chip-en { font-size: 0.875rem; font-weight: 700; color: var(--ink-2); }
@media (max-width: 520px) {
  .drills > div { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* Night: the last part of the day, the same in both themes, darker in the dark one */

.night {
  --bg: var(--night);
  --ink: var(--night-ink);
  --ink-2: var(--night-ink-2);
  --line: #4D3B50;
  --ghost: rgb(255 170 200 / 0.055);
  --primary: #FF9DB8;
  --primary-face: #FF7BA1;
  --primary-edge: #BC3966;
  --on-primary: #3F0019;
  --primary-soft: #5B2A3F;
  --on-primary-soft: #FFE3EA;
  --tile-face: #3A2C3F;
  --tile-edge: #1A111D;
  --tile-ink: #F7E8EC;
  --phone: #0B070C;
  --shadow: 0 0 0;
  --focus: #3DCDBA;
  --mint-soft: #123F3B;
  position: relative;
  isolation: isolate;
  margin-top: var(--section);
  padding-bottom: 1px;
  color: var(--ink);
  background: linear-gradient(180deg, transparent 0, var(--twilight-1) 4rem, var(--twilight-2) 8.5rem, var(--night) 12rem);
}
.foot {
  --ink: var(--night-ink);
  --ink-2: var(--night-ink-2);
  --line: #4D3B50;
  --primary: #FF9DB8;
  --focus: #3DCDBA;
  color: var(--ink);
  background: var(--night);
}
.night > section:first-of-type { margin-top: 0; padding-top: 12rem; }
.stars, .stars::before {
  position: absolute;
  pointer-events: none;
  background-repeat: repeat;
}
/* Three layers of stars on tiles of unrelated sizes, so the pattern never visibly repeats; a fourth layer
   twinkles. Sizes are in pixels, so the sky is as dense on a phone as on a wide screen. */
.stars {
  inset: 4rem 0 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 173px 46px, #FFF 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 45px 218px, #FFE3EA 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 37px 137px, #FFF 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 230px 222px, #FFF 0 1px, transparent 1.8px),
    radial-gradient(circle at 290px 225px, #FFE9B0 0 1px, transparent 1.8px),
    radial-gradient(circle at 71px 122px, #FFE9B0 0 1.2px, transparent 2px),
    radial-gradient(circle at 39px 303px, #FFF 0 1.2px, transparent 2px),
    radial-gradient(circle at 234px 55px, #FFF 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 304px 437px, #FFF 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 592px 323px, #FFF 0 1.7px, transparent 2.5px);
  background-size:
    283px 241px, 283px 241px, 283px 241px,
    457px 389px, 457px 389px, 457px 389px, 457px 389px,
    701px 613px, 701px 613px, 701px 613px;
  opacity: 0.85;
  /* Brightest in the open sky above the first heading, faint behind the text, so no star reads as a dot. */
  --sky: linear-gradient(180deg, transparent 0, #000 6rem, #000 11rem, rgb(0 0 0 / 0.6) 14rem);
  -webkit-mask-image: var(--sky);
  mask-image: var(--sky);
}
.stars::before {
  content: "";
  inset: 0;
  background-image:
    radial-gradient(circle at 96px 71px, #FFF 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 412px 268px, #FFE9B0 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 251px 509px, #FFF 0 1.2px, transparent 2.2px);
  background-size: 523px 587px;
}

/* The text sits on a patch of plain sky, so a star never shows between two words like a dot. */
.night :is(h2, h2 + p, .habit li, .terms > div, .price-note) { background: var(--night); background-clip: content-box; }

/* The habit */

.habit { margin-top: 2rem; display: grid; gap: 1.1rem; max-width: 56ch; }
.habit li { padding-left: 1.75rem; position: relative; color: var(--ink-2); }
.habit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #FFC21A;
  box-shadow: 0 2px 0 #C98F00;
}
.habit strong { color: var(--ink); font-weight: 800; }

/* Price */

.price { padding-top: 1rem; display: grid; gap: 0 clamp(3rem, 7vw, 6rem); }
@media (min-width: 900px) {
  .price { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .price h2 { grid-column: 1; grid-row: 1; }
  .price .terms { grid-column: 2; grid-row: 1 / span 3; margin-top: 0.5rem; }
  .price .price-note { grid-column: 1; grid-row: 2; }
  .price .cta { grid-column: 1; grid-row: 3; }
}
.terms { margin-top: 2.25rem; display: grid; gap: 1rem; max-width: 62ch; }
.terms > div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--line);
}
.terms dt { font-size: 1.375rem; font-weight: 900; line-height: 1.25; color: var(--primary); }
.terms dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) { .terms > div { grid-template-columns: 1fr; gap: 0.25rem; } }
.price-note { margin-top: 1.75rem; max-width: 60ch; color: var(--ink-2); }

/* Footer: the day ends */

.foot { padding-top: var(--section); padding-bottom: 3rem; }
.foot-inner { display: grid; gap: 2rem; }
.bye { display: flex; align-items: flex-end; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.bye-haru { width: clamp(4.5rem, 10vw, 6.5rem); }
.bye p { display: grid; }
.bye-ko { font-family: var(--display-ko); font-weight: 400; font-size: clamp(3.25rem, 9vw, 6rem); line-height: 1; color: var(--ink); }
.bye-en { margin-top: 0.4rem; font-size: 1.125rem; font-weight: 800; color: var(--ink-2); }
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.75rem;
  border-top: 2px solid var(--line);
}
.foot-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 900; font-size: 1.125rem; }
.foot-brand img { border-radius: 9px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot-nav a { color: var(--ink-2); font-weight: 700; }
.foot-nav a:hover { color: var(--primary); }
.small { font-size: 0.875rem; color: var(--ink-2); max-width: 70ch; }

/* Back to top: shown by main.js once the hero is out of sight */

.to-top {
  position: fixed;
  z-index: 10;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 3rem;
  height: calc(3rem + var(--edge-small));
  padding-bottom: var(--edge-small);
  border-radius: 1.1rem;
  background: var(--primary-face);
  box-shadow: inset 0 calc(-1 * var(--edge-small)) 0 var(--primary-edge), 0 10px 24px -10px rgb(var(--shadow) / 0.45);
  color: var(--on-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.9);
  transition: opacity 200ms ease-out, transform 300ms var(--ease-out), visibility 0s linear 300ms;
}
.to-top svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .to-top:hover svg { transform: translateY(-2px); } }
.to-top svg { transition: transform 200ms var(--ease-out); }
.to-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Motion. Everything above is the final, still state; this only adds the way there. */

@media (prefers-reduced-motion: no-preference) {
  /* Letters drop into their blocks, squash on landing and settle; their shadows deepen as they land. */
  .tile { animation: drop 900ms cubic-bezier(0.35, 0, 0.2, 1) var(--d) backwards; }
  .shade { animation: land 900ms cubic-bezier(0.35, 0, 0.2, 1) var(--d) both; }
  .block-ha .t1, .block-ha .s1 { --d: 150ms; --r: -16deg; }
  .block-ha .t2, .block-ha .s2 { --d: 330ms; --r: 12deg; }
  .block-ru .t1, .block-ru .s1 { --d: 510ms; --r: -9deg; }
  .block-ru .t2, .block-ru .s2 { --d: 690ms; --r: 14deg; }
  .haru { animation: hop 800ms var(--ease-out) 1.25s backwards; }
  .read, .sum, .hint { animation: rise 600ms var(--ease-out) 1.45s both; }
  .hero-copy > * { animation: rise 700ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 220ms; }


  /* A syllable assembles from its letters when it scrolls into view (main.js adds the pieces). */
  .sentence.is-armed .g { opacity: 0; transform: scale(0.4); }
  .sentence.is-armed .j { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
  .sentence.is-on .g { opacity: 1; transform: none; transition: opacity 250ms ease-out var(--t), transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--t); }
  /* A stage's node fills with a small overshoot when the line reaches it, and sends out one soft ring. */
  .stages.is-live .stage::before { transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 200ms ease-out, box-shadow 200ms ease-out; }
  .stages.is-live .stage.is-reached::after { animation: ring 900ms var(--ease-out) 60ms; }
  .stars::before { animation: twinkle 4.2s ease-in-out infinite alternate; }

  .sentence.is-on .j { opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: transform 420ms var(--ease-out) calc(var(--t) - 260ms), opacity 160ms ease-in calc(var(--t) - 40ms); }

  @supports (animation-timeline: view()) {
    .sky-noon { animation: appear linear both; animation-timeline: scroll(root); animation-range: 6% 30%; }
    .sky-dusk { animation: appear linear both; animation-timeline: scroll(root); animation-range: 38% 70%; }
    .sky .sun { animation: set linear both; animation-timeline: scroll(root); animation-range: 0% 30%; }
    .ghost { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
    .stars { animation: appear linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}

@keyframes drop {
  0% { transform: translateY(-150%) rotate(var(--r)); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: translateY(0) rotate(0) scale(1.07, 0.9); }
  78% { transform: translateY(-6%) scale(0.98, 1.03); }
  100% { transform: none; opacity: 1; }
}
@keyframes land {
  0% { transform: scaleX(0.3); opacity: 0; }
  60% { transform: scaleX(1.15); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes hop {
  0% { transform: translate(-50%, -140%); opacity: 0; }
  30% { opacity: 1; }
  60% { transform: translate(-50%, 6%); }
  78% { transform: translate(-50%, -10%); }
  100% { transform: translate(-50%, 6%); opacity: 1; }
}
@keyframes rise { from { transform: translateY(0.75rem); opacity: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes set { to { transform: translateY(45vh) scale(0.7); opacity: 0; } }
@keyframes drift { from { transform: translateY(14%); } to { transform: translateY(-14%); } }
@keyframes ring { from { transform: scale(0.8); opacity: 0.6; } to { transform: scale(1.9); opacity: 0; } }
@keyframes twinkle { from { opacity: 0.2; } to { opacity: 1; } }