:root {
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --xhs-top: max(var(--safe-top), clamp(112px, 14.6vh, 132px));
  --page-pad: clamp(34px, 11vw, 46px);
  --ink: #191b19;
  --muted: #707570;
  --line: #c7ceca;
  --paper: #f1f4f3;
  --surface: #f7f8f6;
  --surface-soft: rgba(247,248,246,.58);
  --surface-faint: rgba(247,248,246,.44);
  --control-bg: rgba(25,27,25,.08);
  --shelf-bg: rgba(247,248,246,.94);
  --shelf-line: rgba(199,206,202,.6);
  --accent: #007548;
  --danger: #ef584b;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
html, body { width: 100%; height: 100%; overflow: hidden; }
html { touch-action: manipulation; background: var(--paper); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
button { color: inherit; font: inherit; background: none; border: 0; }
button, [role="button"] { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity:.52; cursor:default; }
img { display: block; max-width: 100%; }

#app { width: 100%; height: 100%; }
.app-shell {
  --content-height: calc(100dvh - var(--xhs-top) - max(var(--safe-bottom), 10px));
  width: 100%; height: 100vh; height: 100dvh; min-height: 540px; overflow: hidden;
  background: var(--paper); color: var(--ink);
}
.app-shell.dark {
  --ink: #f5f4ef; --muted: #858b87; --line: #405049;
  --paper: #050b08; --surface: #0b1410; --accent: #38d89b;
  --surface-soft: rgba(11,20,16,.58); --surface-faint: rgba(11,20,16,.44);
  --control-bg: rgba(245,244,239,.09); --shelf-bg: rgba(11,20,16,.94); --shelf-line: rgba(64,80,73,.7);
  color-scheme: dark;
}
.page {
  width: min(100%, 460px); height: 100%; margin: 0 auto;
  padding: var(--xhs-top) var(--page-pad) max(var(--safe-bottom), 10px);
  position: relative; overflow: hidden;
}
.page-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.page-scroll::after { content: ""; display: block; height: max(20px, var(--safe-bottom)); }
.eyebrow { color: var(--accent); font-size: 11px; line-height: 1; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.muted { color: var(--muted); }
.back-link { display: inline-flex; align-items: center; min-height: 42px; gap: 7px; color: var(--muted); font-size: 14px; margin-left: -4px; }
.page-heading { font-size: clamp(30px, 8.5vw, 38px); line-height: 1.08; letter-spacing: -.035em; font-weight: 750; }
.page-subtitle { font-size: 13px; line-height: 1.7; color: var(--muted); }
.footer-mark { color: var(--muted); font-size: 9px; letter-spacing: .07em; text-align: center; }

/* Home: true responsive layout, never a scaled 390x844 stage. */
.home-page { display: grid; grid-template-rows: auto auto minmax(224px, 1fr) auto auto auto; row-gap: clamp(9px, 1.8vh, 16px); }
.home-controls { display: flex; align-items: center; justify-content: space-between; }
.volume-mark { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.control-cluster { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; flex: none; }
.icon-button.settings { width: 34px; height: 34px; }
.icon-button img { width: 100%; height: 100%; object-fit: contain; }
.theme-toggle { width: 38px; height: 38px; border:1px solid var(--line); border-radius:50%; }
.theme-toggle img { width: 24px; height: 24px; object-fit: contain; }
.home-copy { padding: clamp(10px, 2.3vh, 20px) 3px 0; position: relative; z-index: 2; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 12vw, 50px); line-height: .96; letter-spacing: -.045em; font-weight: 700; animation: textIntro 7s .05s cubic-bezier(.22,.78,.24,1) infinite alternate both; }
.cn-title { margin-top: 5px; font-size: clamp(24px, 7vw, 30px); line-height: 1.15; font-weight: 520; letter-spacing: .015em; animation: textIntro 7s .13s cubic-bezier(.22,.78,.24,1) infinite alternate both; }
.tagline { margin-top: 12px; color: var(--muted); font-size: clamp(11px, 3.3vw, 13px); animation: textIntro 7s .24s cubic-bezier(.22,.78,.24,1) infinite alternate both; }
.garden {
  position: relative; min-height: 224px; height: 100%; max-height: 344px;
  margin: -2px -3px 0; overflow: hidden; isolation: isolate;
}
.aura { position: absolute; width: 68%; aspect-ratio: 1; object-fit: contain; opacity: .28; pointer-events: none; z-index: -1; }
.aura.blush { left: -20%; bottom: -15%; animation: auraBreath 7s ease-in-out infinite alternate; }
.aura.lilac { right: -15%; bottom: 6%; animation: auraBreath 7s .3s ease-in-out infinite alternate; }
.plant { --h: 50%; --x: 50%; --size: 44px; --delay: .4s; position: absolute; left: var(--x); bottom: 0; width: var(--size); height: var(--h); transform: translateX(-50%); transform-origin: 50% 100%; }
.stem-line { position: absolute; left: 50%; bottom: 0; width: clamp(3px, .9vw, 5px); height: calc(100% - var(--size) * .42); background: #006837; transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; animation: stemGrow 7s var(--delay) cubic-bezier(.22,.78,.24,1) infinite alternate both; }
.plant.wide-stem .stem-line { width: 8px; }
.plant-bloom { position: absolute; left: 50%; top: 0; width: var(--size); height: var(--size); object-fit: contain; transform: translateX(-50%) scale(.68) rotate(-2deg); transform-origin: 50% 72%; opacity: 0; animation: bloomGrow 7s calc(var(--delay) + .36s) cubic-bezier(.22,.78,.24,1) infinite alternate both; }
.plant-leaf { position: absolute; width: 34px; height: 34px; object-fit: contain; opacity: 0; animation: bloomGrow 7s calc(var(--delay) + .22s) cubic-bezier(.22,.78,.24,1) infinite alternate both; }
.leaf-right { left: 52%; bottom: 24%; transform: rotate(42deg); }
.leaf-left { right: 48%; bottom: 37%; transform: rotate(210deg); }
@keyframes stemGrow { 0%, 3% { transform: translateX(-50%) scaleY(0); opacity: 0; } 14%,100% { transform: translateX(-50%) scaleY(1); opacity: 1; } }
@keyframes bloomGrow { 0%,7% { transform: translateX(-50%) translateY(14px) scale(.68) rotate(-2deg); opacity: 0; } 15% { transform: translateX(-50%) scale(1.04) rotate(0); opacity: 1; } 19%,100% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; } }
@keyframes auraBreath { from { opacity:.08; transform:scale(.92); } 52% { opacity:.33; transform:scale(1.04); } to { opacity:.27; transform:scale(1); } }
@keyframes textIntro { 0%,1% { opacity:0; transform:translateY(9px); } 7%,100% { opacity:1; transform:translateY(0); } }
.start-shelf { background: var(--shelf-bg); border: 1px solid var(--shelf-line); border-radius: 14px; padding: 8px; }
.primary { width: 100%; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #f7f5f0; background: #1d211e; font-size: 15px; font-weight: 520; }
.dark .primary { color: #191b19; background: #f7f5f0; }
.start-glyph { width: 18px; height: 18px; object-fit: contain; }
.home-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; }
.home-nav button { min-height: 42px; font-size: 14px; }
.home-nav button:last-child { text-align: right; }

/* Shared content pages */
.content-head { display: grid; gap: 14px; padding-top: 4px; margin-bottom: 24px; }
.content-head .eyebrow { margin-top: 4px; }
.index-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 22px; }
.bloom-card { min-height: 82px; border: 1px solid var(--line); border-radius: 13px; padding: 11px; display: grid; grid-template-columns: 24px 1fr; align-items: center; background: var(--surface-soft); }
.bloom-number { align-self: start; font-size: 11px; color: var(--ink); }
.bloom-card-main { display: grid; grid-template-columns: minmax(40px, 56px) auto; align-items: center; gap: 5px; min-width: 0; }
.stem-card .bloom-number { font-size:8px; letter-spacing:.04em; }
.stem-swatch { width:56px; height:58px; display:flex; align-items:flex-end; justify-content:center; gap:13px; }
.stem-swatch i { display:block; width:4px; height:48px; border-radius:3px 3px 0 0; background:#007247; position:relative; }
.stem-swatch i:last-child { height:39px; }
.stem-swatch i:last-child::after { content:""; position:absolute; width:17px; height:7px; left:2px; top:17px; border-radius:100% 0 100% 0; background:#0a7848; transform:rotate(-22deg); }
.bloom-card img { width: 52px; height: 52px; object-fit: contain; }
.bloom-name { font-size: 11px; white-space: nowrap; }
.content-footer { padding: 10px 0 18px; }
.rule-list { display: grid; gap: 12px; }
.rule-card { border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:28px 1fr 76px;gap:12px;align-items:center;min-height:112px;background:var(--surface-soft); }
.rule-no { color: var(--accent); font: 700 11px/1.4 ui-monospace, monospace; }
.rule-card h3 { font-size: 16px; margin-bottom: 6px; }
.rule-card p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.rule-visual{width:76px;height:72px;position:relative;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.rule-visual img{width:30px;height:30px;object-fit:contain;flex:none}.rule-visual.final img{width:68px;height:68px}
.rule-visual.drag span{position:absolute;left:10px;right:10px;top:14px;border-top:1px dashed var(--muted)}.rule-visual.drag img{position:absolute;left:32px;top:25px}
.rule-visual.drop span{position:absolute;left:37px;top:5px;height:42px;border-left:1px dashed var(--muted)}.rule-visual.drop img{position:absolute;left:23px;bottom:2px}
.rule-visual.merge{gap:1px}.rule-visual.merge img{width:20px;height:20px}.rule-visual.merge b,.rule-visual.merge i{font-size:9px;color:var(--muted);font-style:normal}
.rule-visual.stems{gap:3px;align-items:flex-end;padding-bottom:9px}.rule-visual.stems .stem-one{width:4px;height:46px;background:#007247;position:relative;border-radius:3px}.rule-visual.stems .stem-one::after{content:"";position:absolute;width:16px;height:6px;border-radius:100%;background:#0a7848;top:16px;left:2px;transform:rotate(-34deg)}.rule-visual.stems b,.rule-visual.stems i{align-self:center;font-size:9px;color:var(--muted)}.rule-visual.stems em{position:absolute;right:1px;bottom:9px;color:var(--accent);font-size:8px;font-style:normal;font-weight:700}
.rule-visual.danger i{position:absolute;left:4px;right:4px;top:21px;border-top:1px dashed var(--danger)}.rule-visual.danger span{position:absolute;right:4px;top:8px;font-size:6px;color:var(--danger)}.rule-visual.danger img{position:absolute;left:22px;top:24px}

/* Settings */
.settings-list { display: grid; gap: 12px; }
.setting-row { border: 1px solid var(--line); border-radius: 14px; min-height: 84px; padding: 16px 16px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; background: var(--surface-faint); }
.setting-row h3 { font-size: 16px; line-height: 1.2; }
.setting-row p { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 8px; }
.pill { min-width: 68px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--control-bg); font-size: 12px; }
.settings-about { margin-top: clamp(34px, 7vh, 64px); display: grid; gap: 12px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.settings-about strong { color: var(--accent); font-size: 13px; }

/* Game */
.game-page { display: grid; grid-template-rows: auto minmax(300px, 1fr) auto; gap: 12px; }
.game-hud { position:relative; display:grid; justify-items:center; gap:9px; padding-top:2px; }
.stat { min-width: 70px; }
.stat.right { text-align: right; }
.stat-label { display: block; font-size: 9px; letter-spacing: .06em; color: var(--muted); font-weight: 750; }
.stat-value { display: block; font-size: 24px; line-height: 1.08; font-weight: 720; margin-top: 3px; }
.next-block { display: grid; justify-items: center; gap: 3px; min-width: 64px; padding-top:2px; }
.next-block img { width: 48px; height: 48px; object-fit: contain; }
.game-actions { position:absolute; inset:0 0 auto; display:flex; justify-content:space-between; pointer-events:none; }
.game-actions .icon-button { pointer-events:auto; }
.game-actions .icon-button { width: 42px; height: 42px; }
.game-actions .icon-button img { width: 23px; height: 23px; object-fit: contain; }
.unlock-track { width:100%; display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:1px; padding:5px 5px 4px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.unlock-node { height:39px; min-width:0; position:relative; display:grid; place-items:center; transition:filter .24s ease,opacity .24s ease,transform .32s cubic-bezier(.2,.9,.25,1.15); }
.unlock-node img { width:29px; height:29px; object-fit:contain; }
.unlock-node small { position:absolute; right:0; bottom:0; color:var(--muted); font-size:7px; font-weight:750; line-height:1; }
.unlock-node.is-locked { opacity:.28; filter:grayscale(.55) blur(.7px); }
.unlock-node.is-unlocked { opacity:1; filter:none; }
.unlock-node.is-unlocked.just-unlocked { animation:unlockPop .62s cubic-bezier(.18,.9,.22,1.25) both; }
.board-wrap { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background:radial-gradient(circle at 8% 91%,rgba(244,183,190,.26),transparent 31%),radial-gradient(circle at 92% 22%,rgba(167,115,207,.16),transparent 27%),var(--surface-soft); }
#game-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.danger-line { position: absolute; left: 0; right: 0; top: 15%; border-top: 1px dashed var(--muted); pointer-events: none; }
.danger-line span { position: absolute; right: 12px; bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.game-hint { position: absolute; top: 19%; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 11px; pointer-events: none; transition: opacity .25s; }
.game-hint.hidden { opacity: 0; }
.game-foot { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 0 4px; font-size: 11px; }
.game-foot strong { font-size: 11px; letter-spacing: .035em; }
.unlock-toast { position:absolute; left:50%; top:28px; z-index:4; width:max-content; max-width:calc(100% - 42px); display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--paper) 92%,transparent); box-shadow:0 10px 24px rgba(8,19,13,.14); opacity:0; transform:translate(-50%,-9px) scale(.97); pointer-events:none; transition:opacity .22s ease,transform .28s cubic-bezier(.2,.88,.25,1.12); }
.unlock-toast[hidden] { display:none; }
.unlock-toast.show { opacity:1; transform:translate(-50%,0) scale(1); }
.unlock-toast img { width:34px; height:34px; object-fit:contain; flex:none; }
.unlock-toast div { display:grid; gap:2px; text-align:left; }
.unlock-toast small { color:var(--accent); font-size:8px; letter-spacing:.08em; font-weight:800; }
.unlock-toast strong { font-size:12px; font-weight:700; }
.success-modal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:32px;background:rgba(8,12,10,.28);animation:modalFade .28s ease-out both}
.success-modal[hidden]{display:none}.success-card{width:100%;max-width:326px;padding:27px 18px 18px;border-radius:16px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.2);animation:cardRise .48s cubic-bezier(.2,.8,.25,1.08) both}
.success-bloom{width:136px;height:136px;margin:0 auto 3px;position:relative;display:grid;place-items:center}.success-bloom i{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,rgba(167,115,207,.23),rgba(167,115,207,0) 68%);animation:successGlow 1.8s ease-in-out infinite}.success-bloom img{width:124px;height:124px;object-fit:contain;position:relative;animation:successFlower .72s cubic-bezier(.18,.82,.24,1.18) both}
.success-card small{display:block;color:var(--accent);font-size:10px;font-weight:800}.success-card h2{font-size:24px;margin:9px 0 5px}.success-card p{font-size:12px;color:var(--muted);margin-bottom:15px}.success-card>b{display:block;font-size:11px;margin-bottom:16px}.success-card>.primary{height:48px}.success-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
@keyframes modalFade{from{opacity:0}to{opacity:1}}@keyframes cardRise{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}@keyframes successFlower{0%{opacity:0;transform:scale(.45) rotate(-8deg)}62%{opacity:1;transform:scale(1.08) rotate(1deg)}82%{transform:scale(.97) rotate(-.3deg)}100%{opacity:1;transform:none}}@keyframes successGlow{0%,100%{transform:scale(.88);opacity:.45}50%{transform:scale(1.08);opacity:1}}
@keyframes unlockPop{0%{transform:scale(.72);filter:brightness(1.6)}52%{transform:scale(1.23);filter:brightness(1.12)}100%{transform:scale(1);filter:none}}

/* Results */
.result-page { display: grid; grid-template-rows: 1fr auto; }
.result-main { display: grid; align-content: center; justify-items: center; text-align: center; gap: 14px; padding-bottom: 28px; }
.result-main img { width: clamp(104px, 31vw, 138px); height: clamp(104px, 31vw, 138px); object-fit: contain; }
.result-title { font-family: Georgia, serif; font-size: clamp(38px, 11vw, 48px); line-height: 1; }
.result-cn { font-size: 20px; }
.result-copy { max-width: 260px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.result-stats { display: flex; gap: 28px; }
.result-stats div { display: grid; gap: 3px; }
.result-stats small { color: var(--muted); font-size: 9px; }
.result-actions { display: grid; gap: 9px; }
.secondary { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.share-page { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 14px; }
.share-head { display: flex; align-items: center; justify-content: space-between; }
.share-head .eyebrow { margin-right: 4px; }
.postcard-frame { min-height: 0; display: grid; place-items: center; }
#postcard { display: block; width: auto; max-width: 100%; height: 100%; max-height: 100%; aspect-ratio: 3 / 4; border-radius: 12px; box-shadow: 0 12px 34px rgba(15,32,23,.10); background: var(--surface); }
.share-actions { display: grid; gap: 8px; }
.save-status { min-height: 18px; color: var(--muted); text-align: center; font-size: 10px; }

@media (max-height: 720px) {
  :root { --xhs-top: max(var(--safe-top), 98px); }
  .home-page { row-gap: 7px; }
  .home-copy { padding-top: 2px; }
  .tagline { margin-top: 7px; }
  .garden { min-height: 190px; max-height: 250px; }
  .primary { height: 44px; }
  .settings-about { margin-top: 24px; }
}
@media (min-width: 430px) {
  :root { --page-pad: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .stem-line { transform: translateX(-50%) scaleY(1); opacity: 1; }
  .plant-bloom, .plant-leaf { opacity: 1; }
}

/* FINAL HOME LOCK — exact Figma 390×844 master and tested 7 s motion. */
.home-page { width:390px;height:844px;padding:0;overflow:hidden;display:block;position:absolute;left:50%;top:0;transform:translateX(-50%) scale(var(--home-scale,1));transform-origin:top center; }
.home-controls{position:absolute;left:32px;right:4px;top:110px;height:52px;display:flex;align-items:center;justify-content:space-between;z-index:20}
.volume-mark{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.02em}
.control-cluster{display:flex;align-items:center;gap:4px}
.home-page .icon-button,.home-page .theme-toggle{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--paper) 82%,transparent);display:grid;place-items:center;flex:none}
.home-page .icon-button.settings{width:52px;height:52px}
.home-page .icon-button img,.home-page .theme-toggle img{width:26px;height:26px;object-fit:contain}
.home-copy{position:absolute;left:32px;top:174px;padding:0;z-index:4}
.brand{font-family:Georgia,"Times New Roman",serif;font-size:54px;line-height:1;letter-spacing:-.045em;font-weight:700;animation:none}
.cn-title{margin:1px 0 0 2px;font-size:38px;line-height:1.18;font-weight:520;letter-spacing:-.035em;animation:none}
.tagline{margin:5px 0 0 2px;color:var(--muted);font-size:14px;line-height:1.2;animation:none}
.home-garden{position:absolute;left:58.69px;top:284px;width:272.62px;height:372.38px;overflow:visible;isolation:isolate}
.home-garden .aura{position:absolute;width:246px;height:246px;max-width:none;object-fit:contain;pointer-events:none;z-index:-1;animation:auraBreathFinal 7s linear infinite}
.home-garden .aura.blush{left:-121.13px;top:131.58px;bottom:auto}
.home-garden .aura.lilac{left:90.43px;right:auto;top:9.46px;bottom:auto;animation-delay:.2s}
.home-stems,.home-leaves,.home-flower,.home-stem,.home-flower-shift{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.home-leaves{object-fit:fill;opacity:0;transform-origin:65% 88%;animation:leafOpenFinal 7s linear infinite}
.home-stem{background:url("./stems.png") center/100% 100% no-repeat;clip-path:inset(100% var(--right) 0 var(--left));animation:stemRiseFinal 7s linear var(--delay) infinite}
.home-stem-1{--top:305px;--left:6px;--right:259px;--delay:.65s}.home-stem-2{--top:259px;--left:32px;--right:235px;--delay:.35s}.home-stem-3{--top:152px;--left:53px;--right:213px;--delay:.05s}.home-stem-4{--top:299px;--left:84px;--right:184px;--delay:.8s}.home-stem-5{--top:208px;--left:120px;--right:146px;--delay:.25s}.home-stem-6{--top:276px;--left:140px;--right:127px;--delay:.55s}.home-stem-7{--top:123px;--left:175px;--right:90px;--delay:0s}.home-stem-8{--top:234px;--left:195px;--right:72px;--delay:.45s}.home-stem-9{--top:306px;--left:230px;--right:37px;--delay:.9s}.home-stem-10{--top:185px;--left:245px;--right:22px;--delay:.15s}
.home-flower{object-fit:fill;opacity:0;transform-origin:var(--ox) var(--oy);animation:flowerOpenFinal 7s linear var(--delay) infinite}
.home-flower-1{--ox:8px;--oy:305px;--delay:.65s}.home-flower-2{--ox:34px;--oy:259px;--delay:.35s}.home-flower-3{--ox:55px;--oy:152px;--delay:.05s}.home-flower-4{--ox:86px;--oy:299px;--delay:.8s}.home-flower-5{--ox:123px;--oy:208px;--delay:.25s}.home-flower-6{--ox:142px;--oy:276px;--delay:.55s}.home-flower-7{--ox:177px;--oy:123px;--delay:0s}.home-flower-8{--ox:215px;--oy:234px;--delay:.45s}.home-flower-9{--ox:232px;--oy:306px;--delay:.9s}.home-flower-10{--ox:247px;--oy:185px;--delay:.15s}
.home-flower-shift-8{transform:translateX(-20px)}
.start-shelf{position:absolute;left:32px;top:656px;width:326px;height:72px;padding:8px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--paper) 92%,transparent);z-index:15}
.home-page .primary{height:56px;border-radius:14px;gap:11px;font-size:15px}
.start-glyph{width:22px;height:22px}
.home-nav{position:absolute;left:55px;right:55px;top:735px;height:36px;padding:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.home-nav button{min-height:36px;font-size:15px;font-weight:520}.home-nav button:last-child{text-align:right}
.home-page>.footer-mark{position:absolute;left:0;right:0;top:812px;font-size:10px}
@keyframes stemRiseFinal{0%{clip-path:inset(100% var(--right) 0 var(--left));opacity:0}2%{opacity:1}33%,100%{clip-path:inset(var(--top) var(--right) 0 var(--left));opacity:1}}
@keyframes flowerOpenFinal{0%,34%{opacity:0;transform:translateY(4px) scale(.72) rotate(-1.6deg)}45%{opacity:1;transform:translateY(-1px) scale(1.045) rotate(.4deg)}50%{transform:translateY(.3px) scale(.99) rotate(-.15deg)}56%,100%{opacity:1;transform:none}}
@keyframes leafOpenFinal{0%,39%{opacity:0;transform:rotate(-8deg) scale(.7)}49%{opacity:1;transform:rotate(1.4deg) scale(1.02)}55%,100%{opacity:1;transform:none}}
@keyframes auraBreathFinal{0%{opacity:.08;transform:scale(.92)}50%{opacity:.34;transform:scale(1.04)}100%{opacity:.3;transform:scale(1)}}