:root {
  color-scheme: light;
  --paper: #faf8f6;
  --panel: #f2eeeb;
  --card: #fffdfc;
  --ink: #211e1e;
  --muted: #675d61;
  --line: #e3dadb;
  --accent: #94445e;
  --button: #2c2429;
  --button-text: #fff8fb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #151215;
    --panel: #1d181d;
    --card: #241e24;
    --ink: #f9eef3;
    --muted: #c0b2bc;
    --line: #433640;
    --accent: #f0a9c3;
    --button: #f4d7e3;
    --button-text: #2b1d25;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151215;
  --panel: #1d181d;
  --card: #241e24;
  --ink: #f9eef3;
  --muted: #c0b2bc;
  --line: #433640;
  --accent: #f0a9c3;
  --button: #f4d7e3;
  --button-text: #2b1d25;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); }
h1, h2, h3, p { margin: 0; }
p { line-height: 1.65; }
a { color: inherit; text-underline-offset: 0.24em; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sr-only, .skip-link:not(:focus), .flower-picker input {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.skip-link:focus {
  position: fixed; z-index: 5; inset: 10px auto auto 10px; padding: 10px 15px; background: var(--card);
}
.wrap { width: min(1120px, calc(100% - clamp(32px, 8vw, 112px))); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 3; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-nav { min-height: 64px; display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); }
.brand { display: inline-flex; gap: 8px; align-items: center; font-weight: 680; text-decoration: none; }
.brand img { flex: none; }
.nav-links { display: flex; gap: clamp(12px, 3vw, 28px); margin-left: auto; }
.nav-links a, .site-footer nav a { padding-block: 8px; font-size: 14px; color: var(--muted); text-decoration: none; }
.nav-links a:hover, .site-footer nav a:hover, a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
.theme-toggle {
  display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 50%;
}
.theme-toggle span { width: 14px; height: 14px; border-radius: 50%; box-shadow: -4px 3px 0 0 currentColor; transform: translate(2px, -1px); }
.theme-toggle[data-dark="true"] span { width: 16px; height: 16px; border: 2px dotted currentColor; box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 10px currentColor; transform: none; }

.hero { text-align: center; padding-block: clamp(52px, 8vw, 104px) clamp(34px, 5vw, 62px); }
.hero h1, .missing h1 {
  font-size: clamp(48px, 8vw, 100px); line-height: 0.99; font-weight: 680; letter-spacing: -0.068em; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { margin: 23px auto; max-width: 430px; color: var(--muted); font-size: clamp(16px, 2vw, 19px); }
.button {
  display: inline-flex; gap: 10px; align-items: center; min-height: 45px; padding: 10px 19px;
  border-radius: 9px; background: var(--button); color: var(--button-text); font-size: 14px; font-weight: 650; text-decoration: none;
}
.button:hover { opacity: 0.86; }
.hero small { display: block; color: var(--muted); margin-top: 13px; font-size: 12px; }

.demo-band { border-block: 1px solid var(--line); background: var(--panel); padding-block: clamp(16px, 3vw, 34px); }
.desktop {
  --petal: url('/assets/sakura.png');
  --sky: #463145;
  --haze: #a76881;
  --glow: #e3a7b4;
  --horizon: #35283e;
  position: relative;
  width: 100%;

  min-height: 270px;
  aspect-ratio: 2.65;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ffffff2e;
  border-radius: clamp(12px, 2vw, 22px);
  color: #fff5fb;
  background:
    radial-gradient(ellipse at 28% 155%, var(--horizon) 0 50%, transparent 50.5%),
    radial-gradient(ellipse at 110% 172%, var(--sky) 0 54%, transparent 54.5%),
    radial-gradient(ellipse at 68% 100%, var(--glow) 0%, var(--haze) 37%, var(--sky) 86%);
  box-shadow: 0 14px 34px #24172424;
}
.desktop[data-flower="momiji"] { --petal: url('/assets/momiji.png'); --sky: #4e252d; --haze: #a95038; --glow: #f2af75; --horizon: #4b242c; }
.desktop[data-flower="ginkgo"] { --petal: url('/assets/ginkgo.png'); --sky: #292e36; --haze: #7b7047; --glow: #eac374; --horizon: #303038; }
.desktop-bar {
  position: absolute; inset: 0 0 auto; z-index: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #21172580; border-bottom: 1px solid #ffffff25; font-size: 11px; font-weight: 560;
}
.desktop-brand { display: inline-flex; align-items: center; gap: 6px; }
.petal-field { position: absolute; inset: 32px 0 0; }
.petal {
  position: absolute; top: -72px; left: var(--x); width: var(--size); aspect-ratio: 1;
  background: var(--petal) center / contain no-repeat; opacity: var(--alpha);
  animation: fall var(--duration) var(--delay) linear infinite;
}
.petal:nth-child(1) { --x: 7%; --size: 36px; --alpha: .9; --duration: 10s; --delay: -3.4s; --turn: 70deg; }
.petal:nth-child(2) { --x: 14%; --size: 51px; --alpha: .9; --duration: 13s; --delay: -8.3s; --turn: -65deg; }
.petal:nth-child(3) { --x: 20%; --size: 28px; --alpha: .72; --duration: 16s; --delay: -4.6s; --turn: 110deg; }
.petal:nth-child(4) { --x: 29%; --size: 43px; --alpha: .9; --duration: 11s; --delay: -8.1s; --turn: -160deg; }
.petal:nth-child(5) { --x: 37%; --size: 34px; --alpha: .83; --duration: 15s; --delay: -2.8s; --turn: 38deg; }
.petal:nth-child(6) { --x: 44%; --size: 48px; --alpha: .95; --duration: 14s; --delay: -6.4s; --turn: 200deg; }
.petal:nth-child(7) { --x: 52%; --size: 31px; --alpha: .78; --duration: 12s; --delay: -9.7s; --turn: 95deg; }
.petal:nth-child(8) { --x: 59%; --size: 39px; --alpha: .88; --duration: 15s; --delay: -4.6s; --turn: -110deg; }
.petal:nth-child(9) { --x: 65%; --size: 46px; --alpha: .94; --duration: 11s; --delay: -6.4s; --turn: -75deg; }
.petal:nth-child(10) { --x: 73%; --size: 29px; --alpha: .75; --duration: 14s; --delay: -2.2s; --turn: 95deg; }
.petal:nth-child(11) { --x: 79%; --size: 52px; --alpha: .94; --duration: 16s; --delay: -13.3s; --turn: -220deg; }
.petal:nth-child(12) { --x: 85%; --size: 36px; --alpha: .82; --duration: 13s; --delay: -6.3s; --turn: 75deg; }
.desktop[data-paused="true"] .petal { animation-play-state: paused; }
@keyframes fall {
  0% { top: -72px; transform: translateX(-18px) rotate(0deg); }
  40% { transform: translateX(26px) rotate(calc(var(--turn) * .4)); }
  72% { transform: translateX(0) rotate(calc(var(--turn) * .72)); }
  100% { top: 100%; transform: translateX(34px) rotate(var(--turn)); }
}
.desktop-caption {
  position: absolute; inset: auto auto 14px 14px; display: flex; gap: 8px; align-items: center;
  padding: 7px 11px; background: #261927c9; border: 1px solid #ffffff35; border-radius: 20px; font-size: 12px;
}
.caption-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--glow); }
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.flower-picker { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; padding: 0; margin: 0; border: 0; }
.flower-picker label { position: relative; }
.flower-picker span, .pause {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 570; cursor: pointer;
}
.flower-picker input:checked + span, .pause { background: var(--card); border-color: var(--line); }
.flower-picker label:hover span, .pause:hover { border-color: var(--accent); }
.flower-picker input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pause { gap: 8px; min-width: 130px; }
.motion-symbol { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.desktop[data-paused="true"] + .demo-controls .motion-symbol {
  width: 0; height: 0; border: 0; border-block: 6px solid transparent; border-left: 9px solid currentColor;
}

.features { padding-block: clamp(54px, 8vw, 98px); }
.features h2 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.05em; margin-bottom: 26px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 34px); }
.feature-grid article { padding-top: 17px; border-top: 1px solid var(--line); }
.feature-grid h3 { margin-bottom: 7px; font-size: 18px; letter-spacing: -0.02em; }
.feature-grid p, .faq p { color: var(--muted); font-size: 15px; }
.faq { width: min(740px, calc(100% - 32px)); padding-block: 36px 56px; }
.faq h2 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.035em; margin-bottom: 24px; }
.faq details { border-top: 1px solid var(--line); padding-block: 16px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-weight: 550; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 20px; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin-top: 12px; }
.faq p a, .document a { color: var(--accent); }

.site-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line); padding-block: 22px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.site-footer small { color: var(--muted); font-size: 12px; }
.document { width: min(650px, calc(100% - 32px)); margin-inline: auto; padding-block: clamp(35px, 6vw, 72px); }
.document h1 { font-size: clamp(37px, 6vw, 62px); letter-spacing: -0.05em; line-height: 1.04; }
.updated { margin-block: 12px 26px; font-size: 13px; }
.document-body, .updated { color: var(--muted); }
.document-body .lead { color: var(--ink); font-size: 18px; }
.document-body p + p { margin-top: 12px; }
.document-body section, .document-footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.document-body h2 { color: var(--ink); font-size: 19px; margin-bottom: 8px; }
.document a { overflow-wrap: anywhere; }
.document-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.missing { min-height: 62vh; padding-block: 70px; }
.missing p { margin-block: 20px; color: var(--muted); }
@media (max-width: 580px) {
  .feature-grid { grid-template-columns: 1fr; }
  .desktop { aspect-ratio: 1.25; }
  .faq { padding-top: 10px; }
  .site-footer small { flex-basis: 100%; }
  .site-nav .brand { font-size: 14px; }
  .site-nav .brand img { width: 26px; height: 26px; }
  .nav-links a { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}