:root {
  color-scheme: light;
  font-family: 'Manrope', sans-serif;
  color: #2e251d;
  background: #e7dfd2;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; margin: 0; display: grid; place-items: center; touch-action: pan-y; }
:root { --u: min(1px, calc(100vw / 402)); }
#core-view { position: absolute; inset: 0; touch-action: none; }
.phone-screen { overscroll-behavior: none; }
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #fff1cb; outline-offset: 4px; }
.phone-screen {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #2e251d;
  isolation: isolate;
}
#tree-stage {
  position: absolute;
  left: 50%;
  width: max(100%, calc(100dvh * var(--scene-width-ratio, 0.534382)));
  height: auto;
  min-height: 100%;
  aspect-ratio: var(--scene-ratio, 917 / 1716);
  top: 50%;
  transform: translate(-50%, -50%);
}
#tree-image { display: block; width: 100%; height: 100%; user-select: none; }
#ornament-layer { position: absolute; z-index: 1; left: 12.7623%; top: 20.5721%; width: 61.1777%; height: 64.5995%; }
h1 { margin: 0; }
#empty-state { position: absolute; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: 118px; text-align: center; color: #fffaf2; text-shadow: 0 2px 14px #20170dc0; pointer-events: none; }
#empty-state h2 { font-family: 'Marck Script', cursive; font-size: 30px; line-height: 1.15; font-weight: 400; margin: 0; }
.tree-actions { position: absolute; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(34px, calc(env(safe-area-inset-bottom) + 12px)); display: flex; align-items: center; gap: 10px; }
#wish-actions:empty { display: none; }
.primary-button { min-height: 56px; padding: 14px 24px; border: 0; border-radius: 28px; background: #2e251d; color: #fbf8f2; font-size: 16px; font-weight: 600; box-shadow: 0 10px 28px #0004; }
@media (hover: hover) { .primary-button:hover { background: #493a2b; } }
.primary-button:active { transform: translateY(1px); }
#wish-actions { flex: 1; }
#add-wish { width: 100%; }
#music-dismiss { position: absolute; inset: 0; z-index: 7; border: 0; background: transparent; }
.music-control { position: absolute; top: max(58px, env(safe-area-inset-top)); right: max(68px, calc(env(safe-area-inset-right) + 52px)); z-index: 8; }
#music-toggle { width: 44px; height: 44px; border-radius: 22px; background: rgba(255,255,255,.2); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 18px; opacity: .45; }
#music-toggle.playing { opacity: 1; }
#music-menu { position: absolute; top: 54px; right: 0; width: 244px; max-height: calc(100dvh - 130px); overflow-y: auto; touch-action: pan-y; padding: 8px; border-radius: 20px; background: rgba(28,22,36,.62); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 12px 36px rgba(0,0,0,.3); color: #fff; display: flex; flex-direction: column; gap: 2px; }
#music-tracks { display: flex; flex-direction: column; gap: 2px; }
.music-control :focus-visible { outline: none; }
body[data-keyboard] .music-control :focus-visible { outline: 3px solid #fff1cb; outline-offset: 4px; }
.music-heading { padding: 8px 12px 6px; margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.music-row { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; display: flex; align-items: center; gap: 10px; background: transparent; color: inherit; font-size: 15px; text-align: left; }
.music-row > span { flex: 1; }
.music-row b { width: 18px; text-align: center; color: #ffd58a; opacity: 0; font-weight: 400; }
.music-row[aria-pressed="true"] { background: rgba(255,255,255,.12); }
.music-row[aria-pressed="true"] b { opacity: 1; }
.music-row:hover { background: rgba(255,255,255,.1); }
.music-row:disabled { opacity: .45; cursor: default; }
.music-divider { height: 1px; margin: 6px 12px; background: rgba(255,255,255,.15); flex: none; }
.music-switch { width: 40px; height: 24px; border-radius: 12px; padding: 2px; background: rgba(255,255,255,.25); flex: none; }
.music-switch::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 10px; background: #fff; }
[aria-checked="true"] .music-switch { background: #e7a93c; }
[aria-checked="true"] .music-switch::after { margin-left: 16px; }
.reset-link { font-size: 13px; opacity: .7; }
#audio-error { font-size: 12px; line-height: 1.4; padding: 0 12px; }
#start-over-sheet[open] { height: fit-content; max-height: calc(100dvh - 64px); }
#start-over-error { margin: 0; }
dialog {
  width: min(402px, 100vw);
  height: min(874px, 100svh);
  max-width: none;
  max-height: 100dvh;
  border: 0;
  padding: 0;
  color: #2e251d;
  background: #f3ece1;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
dialog[open] { display: flex; flex-direction: column; gap: 16px; padding: max(44px, env(safe-area-inset-top)) 0 max(34px, env(safe-area-inset-bottom)); animation: sheet-in 240ms ease-out; }
dialog::backdrop { background: #2e251d80; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); flex: none; }
#chooser-title { font-family: 'Cormorant Garamond', serif; font-size: calc(40 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: -.025em; margin: 0; }
.close-button { border: 1px solid #c6b498; border-radius: 50%; width: 44px; height: 44px; flex: none; background: #fbf8f2; color: #2e251d; font-size: 26px; }
dialog :focus-visible { outline-color: #80602d; }
.tree-preview { position: relative; flex: 1; min-height: 250px; margin: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); border-radius: 28px; overflow: hidden; background: #2e251d; box-shadow: 0 20px 40px #3c28142e; }
#preview-image { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tree-preview::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, #140e08b8, transparent); pointer-events: none; }
.preview-arrow { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fbf8f2e6; color: #2e251d; font-size: 28px; z-index: 1; }
.previous { left: 12px; }
.next { right: 12px; }
.preview-caption { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; z-index: 1; pointer-events: none; }
.preview-caption h3 { font-family: 'Cormorant Garamond', serif; font-size: 32px; line-height: 1.05; font-weight: 500; margin: 0 0 5px; }
.preview-caption p { font-size: 14px; line-height: 1.4; margin: 0; }
#tree-form { display: flex; flex-direction: column; gap: 16px; flex: none; min-width: 0; }
.tree-options { display: flex; gap: 10px; margin: 0; padding: 5px max(20px, env(safe-area-inset-right)) 5px max(20px, env(safe-area-inset-left)); border: 0; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; }
.tree-option { position: relative; cursor: pointer; flex: 0 0 64px; display: flex; flex-direction: column; gap: 7px; text-align: center; scroll-snap-align: center; }
.tree-option img { display: block; width: 64px; height: 80px; object-fit: cover; border-radius: 14px; }
.tree-option:has(:checked) img { outline: 2px solid #2e251d; outline-offset: 2px; }
.tree-option:has(:checked) span { font-weight: 700; }
.tree-option:has(:focus-visible) { outline: 3px solid #80602d; outline-offset: 3px; border-radius: 14px; }
.tree-option input { position: absolute; left: 24px; top: 30px; width: 16px; height: 16px; opacity: 0; }
.tree-option span { font-size: 12px; line-height: 1.3; }
#tree-form > .primary-button { margin: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); box-shadow: none; }
#storage-status { z-index: 20; position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); min-height: 44px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid #ffffff55; border-radius: 22px; background: #2e251d80; color: #fff8ec; font-size: 11px; }
#storage-status.storage-warning { background: #6c301ce8; }
#empty-state[hidden] { display: none; }
.ornament-hit { display: grid; place-items: center; position: absolute; left: 0; top: 0; width: clamp(88px, 32%, 106px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }
.selected-ornament img { filter: brightness(1.12) drop-shadow(0 0 7px #fff1cbb3); }
.selected-ornament .ornament-visual { animation: none; }
.ornament-hit:focus-visible { outline: none; }
body[data-keyboard] .ornament-hit:focus-visible { outline: 3px solid #fff1cb; outline-offset: 4px; }
.ornament-hit img { position: relative; display: block; width: var(--art-width, 46px); height: auto; object-fit: contain; pointer-events: none; }
.ornament-visual { position: relative; display: block; width: var(--art-width, 46px); transform-origin: 50% 0; animation: swing 4s ease-in-out infinite; pointer-events: none; }
.ornament-hit:nth-child(3n+1) .ornament-visual { animation-duration: 4.7s; animation-delay: -.9s; }
.ornament-hit:nth-child(3n+2) .ornament-visual { animation-duration: 5.4s; animation-delay: -1.8s; }
.manipulating .ornament-visual, .pending-ornament .ornament-visual { animation: none; }
.just-hung .ornament-visual { animation: hang 1s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes swing { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes hang { 0% { transform: translateY(-30px) rotate(16deg); opacity: .3; } 35% { transform: translateY(0) rotate(-9deg); opacity: 1; } 65% { transform: rotate(5deg); } 100% { transform: rotate(-3deg); } }
#wizard-note { margin: 0 20px; font-size: 12px; color: #6e5f4e; }
.wish-sheet[open] { background: #fbf8f2; height: min(810px, calc(100dvh - 64px)); margin-bottom: 0; padding: 22px 0 max(24px, env(safe-area-inset-bottom)); border-radius: 32px 32px 0 0; }
.wish-sheet h2 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 500; line-height: 1.1; margin: 0; }
.eyebrow { color: #9a8670; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
#wish-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sheet-content { display: flex; flex-direction: column; gap: 14px; padding: 4px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left)); overflow-y: auto; min-height: 0; flex: 1; }
.sheet-content > * { flex: none; }
.wish-question, .wish-quote { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-style: italic; font-weight: 500; line-height: 1.3; color: #6e5f4e; }
.wish-quote { margin: 0; overflow-wrap: anywhere; }
textarea { width: 100%; min-width: 0; resize: vertical; border: 1px solid #c6b498; border-radius: 18px; padding: 14px 16px; background: #fffdf9; color: #2e251d; font-size: 18px; line-height: 1.4; }
#wish-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 22px; }
.hint { color: #7a6a58; font-size: 12px; line-height: 1.5; margin: 0; }
.sheet-footer { padding: 12px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); border-top: 1px solid #2e251d14; }
.sheet-footer button { width: 100%; box-shadow: none; }
.form-error { color: #8c311e; margin: 0 20px 8px; font-size: 13px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: 13px; font-weight: 600; color: #7a6a58; margin-bottom: 10px; }
.ornament-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#suggestions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ornament-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; min-height: 100px; border-radius: 16px; cursor: pointer; }
.ornament-option img { height: 60px; width: 100%; object-fit: contain; }
.ornament-option span { font-size: 10px; line-height: 1.3; text-align: center; color: #7a6a58; }
.ornament-option input { position: absolute; top: 12px; left: 50%; opacity: 0; }
.ornament-option:has(:checked) { background: #fffdf9; box-shadow: inset 0 0 0 1.5px #a9813f; }
.ornament-option:has(:focus-visible) { outline: 3px solid #80602d; }
summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: #80602d; font-size: 13px; font-weight: 600; }
.secondary-button, .draft-text { min-height: 44px; border: 1px solid #c6b498; border-radius: 18px; padding: 12px 16px; background: #fffdf9; color: #2e251d; font-size: 14px; text-decoration: none; text-align: center; }
.draft-text { display: flex; align-items: start; justify-content: space-between; gap: 12px; text-align: left; }
#draft-text { overflow-wrap: anywhere; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-style: italic; font-weight: 500; }
.draft-text > :last-child { color: #80602d; }
.detail-art { width: 100px; max-height: 186px; object-fit: contain; align-self: start; margin-top: 14px; }
.danger { color: #8c311e; }
#raw-backup { font-family: monospace; font-size: 12px; }
#reset-confirmation { display: flex; flex-direction: column; gap: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes glowPulse { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes lightTw { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes pulseRing { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.07); opacity: .45; } }
@keyframes starIn { 0% { transform: translate(-50%,-60%) scale(0) rotate(-120deg); opacity: 0; } 70% { transform: translate(-50%,-60%) scale(1.25) rotate(10deg); opacity: 1; } 100% { transform: translate(-50%,-60%) scale(1) rotate(0); } }
.device-chrome { display: none; }
@media (min-width: 600px) and (hover: hover) {
  .phone-screen, dialog { width: 402px; border-radius: 48px; box-shadow: 0 40px 80px #0000002e, 0 0 0 1px #0000001f; height: min(874px, calc(100dvh - 24px)); }
  .device-chrome { display: block; position: absolute; inset: 0; color: #000; pointer-events: none; z-index: 60; }
  .device-chrome.dark { color: #fff; }
  .device-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; border-radius: 24px; background: #000; z-index: 50; }
  .device-status { display: flex; gap: 154px; align-items: center; justify-content: center; padding: 21px 24px 19px; }
  .device-status > span, .device-status > div { flex: 1; height: 22px; display: flex; align-items: center; justify-content: center; }
  .device-status > span { padding-top: 1.5px; font: 590 17px/22px -apple-system, system-ui; }
  .device-status > div { gap: 7px; padding-top: 1px; padding-right: 1px; }
  .device-status svg { fill: currentColor; flex: none; }
  .device-home { position: absolute; width: 139px; height: 5px; bottom: 8px; left: 50%; transform: translateX(-50%); border-radius: 100px; background: #00000040; }
  .dark .device-home { background: #ffffffb3; }
  #tree-stage { width: max(100%, calc(min(874px, 100dvh - 24px) * var(--scene-width-ratio, 0.534382))); }
}
#tree-position { font-size: 13px; color: #9a8670; white-space: nowrap; }
#tree-chooser[data-initial="true"][open] { padding-top: max(calc(66 * var(--u)), env(safe-area-inset-top)); }
#tree-chooser[data-initial="true"] .dialog-heading { padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
#tree-chooser[data-initial="true"] #wizard-note { display: none; }
#first-use { position: absolute; inset: 0; background: #f3ece1; display: flex; flex-direction: column; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
#onboarding-art { flex: 1; min-height: 0; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-top: max(calc(72 * var(--u)), env(safe-area-inset-top)); }
#first-footer { flex: none; padding: calc(30 * var(--u)) max(calc(28 * var(--u)), env(safe-area-inset-right)) max(calc(42 * var(--u)), env(safe-area-inset-bottom)) max(calc(28 * var(--u)), env(safe-area-inset-left)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
#first-kicker { font-size: calc(11 * var(--u)); letter-spacing: .22em; text-transform: uppercase; color: #9a8670; margin: 0; }
#first-title { font-family: 'Cormorant Garamond', serif; font-size: calc(42 * var(--u)); font-weight: 500; line-height: 1.02; margin: 0; }
#first-title.intro-title { font-size: calc(46 * var(--u)); line-height: 1; letter-spacing: .02em; }
#first-body { font-size: calc(16 * var(--u)); line-height: 1.5; color: #6e5f4e; margin: 0; text-wrap: pretty; }
#first-controls { display: flex; justify-content: space-between; align-items: center; margin-top: calc(14 * var(--u)); }
#first-controls > :last-child { display: flex; gap: 8px; align-items: center; }
#first-controls .primary-button { min-height: calc(52 * var(--u)); padding: 0 calc(28 * var(--u)); font-size: calc(16 * var(--u)); border-radius: 26px; box-shadow: none; }
.text-button { min-height: calc(52 * var(--u)); padding: 0 calc(14 * var(--u)); border: 0; background: transparent; color: #8a7864; font-size: calc(15 * var(--u)); }
#onboarding-dots { display: flex; gap: 6px; }
#onboarding-dots i { width: 6px; height: 6px; border-radius: 3px; background: #2e251d33; }
#onboarding-dots .current { width: 22px; background: #2e251d; }
.onb-forest { position: relative; width: calc(286 * var(--u)); aspect-ratio: 286 / 410; border-radius: calc(143 * var(--u)) calc(143 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); overflow: hidden; box-shadow: 0 30px 60px #3c281438; }
.onb-forest img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.onb-forest i { position: absolute; inset: 8px; border-radius: calc(135 * var(--u)) calc(135 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border: 1px solid #ffecc8b3; }
.onb-hanging { position: relative; width: calc(330 * var(--u)); height: calc(430 * var(--u)); border-top: 1px solid #c9ae7c; }
.onb-hanging > div { position: absolute; top: 0; transform-origin: 50% 0; }
.onb-hanging i { width: 1px; background: #c9ae7c; display: block; margin-left: -.5px; }
.onb-hanging img { display: block; margin-top: -6px; filter: drop-shadow(0 12px 14px #3c281440); }
.hang-travel { left: 18.79%; animation: swing 4.6s ease-in-out -1s infinite; }
.hang-travel i { height: calc(110 * var(--u)); }.hang-travel img { width: calc(96 * var(--u)); margin-left: calc(-48 * var(--u)); }
.hang-love { left: 50%; animation: swing 5.4s ease-in-out -2.4s infinite; }
.hang-love i { height: calc(46 * var(--u)); }.hang-love img { width: calc(124 * var(--u)); margin-left: calc(-62 * var(--u)); }
.hang-home { left: 81.82%; animation: swing 4.2s ease-in-out -.3s infinite; }
.hang-home i { height: calc(170 * var(--u)); }.hang-home img { width: calc(96 * var(--u)); margin-left: calc(-48 * var(--u)); }
.onb-wonders { position: relative; width: calc(330 * var(--u)); height: calc(420 * var(--u)); display: flex; align-items: center; justify-content: center; }
.onb-wonders > div { position: relative; transform-origin: 50% 0; animation: swing 5s ease-in-out infinite; }
.onb-wonders img { width: calc(176 * var(--u)); display: block; filter: drop-shadow(0 16px 18px #3c281447); }
.onb-wonders b { position: absolute; right: 6px; bottom: 20px; width: 36px; height: 36px; border-radius: 50%; background: #a9813f; color: white; display: grid; place-items: center; font-size: 18px; }
.warm-glow { position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#ffce788c,transparent 62%); animation: glowPulse 2.8s ease-in-out infinite; }
.onb-wonders > span { position: absolute; color: #c9a04a; }.spark-one { left: 18.79%; top: 22.86%; font-size: 22px; }.spark-two { right: 17.58%; top: 35.71%; font-size: 15px; }.spark-three { left: 27.88%; bottom: 21.90%; font-size: 13px; }
.spark-one { animation: twinkle 2.2s ease-in-out infinite; }.spark-two { animation: twinkle 1.8s ease-in-out -.6s infinite; }.spark-three { animation: twinkle 2.6s ease-in-out -1.2s infinite; }
#first-use.choice-screen { padding: max(calc(66 * var(--u)), env(safe-area-inset-top)) max(calc(20 * var(--u)), env(safe-area-inset-right)) max(calc(36 * var(--u)), env(safe-area-inset-bottom)) max(calc(20 * var(--u)), env(safe-area-inset-left)); gap: calc(18 * var(--u)); }
.choice-screen #first-footer { padding: 0 calc(4 * var(--u)); }.choice-screen #first-title { font-size: calc(40 * var(--u)); line-height: 1; }
.choice-screen form { display: flex; flex: 1; flex-direction: column; gap: 12px; }
.choice-screen form > .primary-button { margin-top: auto; box-shadow: none; }
.choice-cards { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.choice-card { position: relative; padding: calc(18 * var(--u)) calc(20 * var(--u)); border-radius: 24px; background: #fbf8f2; display: flex; flex-direction: column; gap: calc(14 * var(--u)); cursor: pointer; }
.choice-header { min-height: 26px; }
.choice-description { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.choice-card input { position: absolute; right: 20px; top: 18px; width: 26px; height: 26px; margin: 0; appearance: none; border: 1.5px solid #2e251d40; border-radius: 50%; }
.choice-card input:checked { background: #2e251d; border: 0; }
.choice-card input:checked::after { content: '\2713'; display: grid; place-items: center; height: 100%; color: white; font-size: 13px; font-weight: 700; }
.choice-card:has(:checked) { box-shadow: 0 0 0 2px #2e251d; }
.choice-card:has(:focus-visible) { outline: 3px solid #80602d; outline-offset: 4px; }
.choice-card .eyebrow { letter-spacing: .22em; font-size: calc(11 * var(--u)); padding-top: 4px; padding-right: 30px; margin-bottom: 0; }
.choice-title { font-family: 'Cormorant Garamond', serif; font-size: calc(34 * var(--u)); font-weight: 500; line-height: 1.02; }
.choice-body { font-size: calc(14 * var(--u)); line-height: 1.5; color: #6e5f4e; }
.mode-dots { display: flex; gap: 12px; align-items: center; border-top: 1px solid #eadfcf; padding-top: 12px; margin-top: 4px; }
.mode-dots > span { display: flex; flex-wrap: wrap; gap: 6px; }.mode-dots.marathon > span { gap: 7px; }
.mode-dots i { width: 18px; height: 18px; border-radius: 50%; }.mode-dots.marathon i { width: 12px; height: 12px; border: 1.5px solid #d3c6b4; }.mode-dots small { flex: none; margin-left: auto; color: #9a8670; font-size: 12px; }
.suggestion-row { display: grid; grid-template-columns: 3fr 1fr; gap: 6px; }
#create-own { min-width: 0; border: 1.5px dashed #a9813f80; background: transparent; color: #a9813f; justify-content: center; }
#create-own > :first-child { font-size: 26px; height: 60px; display: grid; place-items: center; }
#question-chips, #style-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#question-chips .secondary-button { font-size: 13px; padding: 8px 14px; }
#question-chips [aria-pressed="true"] { color: #fbf8f2; background: #2e251d; }
.question-help { font-size: 13px; font-weight: 600; color: #7a6a58; margin: 6px 0 0; }
#detail-sheet .sheet-content { align-items: stretch; padding: 4px 24px 34px; }
#detail-sheet .wish-quote { font-size: 30px; line-height: 1.15; color: #2e251d; text-align: center; }
#detail-label { text-align: center; margin: 0; }
.detail-art-panel { height: 200px; display: flex; justify-content: center; background: radial-gradient(circle at 50% 55%,#fff4de,#fbf8f2 70%); border-radius: 24px; }
@media (max-width: 350px) {
  #empty-state h2 { font-size: 24px; }
}
.main-top { position: absolute; top: max(58px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: flex-start; z-index: 8; pointer-events: none; }
.main-top button, #day-pill { pointer-events: auto; }
.glass-pill { min-height: 44px; border: 1px solid #ffffff59; border-radius: 22px; padding: 0 16px; background: #ffffff33; backdrop-filter: blur(16px); color: white; font-size: 14px; font-weight: 600; }
#snow-toggle { width: 44px; padding: 0; font-size: 18px; }
#snow-toggle[aria-checked="false"] { opacity: .45; }
#day-pill { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 6px 16px; font-size: 13px; }
#day-pill > i { width: 96px; height: 3px; background: #ffffff4d; border-radius: 2px; }
#day-progress { display: block; height: 100%; background: #FFD58A; border-radius: 2px; }
#day-pill small { font-size: 9px; opacity: .8; }
.round-action { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 28px; background: #fbf8f2e0; backdrop-filter: blur(16px); font-size: 20px; color: #A9813F; box-shadow: 0 8px 24px #0003; }
#open-share { color: #2E251D; }
.tree-actions { z-index: 8; }
#add-wish { padding: 14px 8px; white-space: nowrap; font-size: clamp(12px, 4vw, 16px); }
#finished-share, .locked-action { width: 100%; }
.locked-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; border: 0; border-radius: 28px; background: #fbf8f2e0; color: #2E251D; font-size: 15px; font-weight: 600; }
.locked-action small { color: #7A6A58; font-size: 11px; }
#finished-hint { position: absolute; left: 0; right: 0; bottom: 118px; margin: 0; z-index: 8; text-align: center; color: white; font-family: 'Marck Script', cursive; font-size: 34px; text-shadow: 0 2px 14px #0007; pointer-events: none; animation: fadeIn 1.2s ease .6s both; }
#demo-label { position: absolute; top: max(108px, calc(env(safe-area-inset-top) + 52px)); left: 12px; right: 12px; margin: 0; padding: 6px; text-align: center; background: #2e251dc7; color: #fff; border-radius: 18px; font-size: 11px; z-index: 8; pointer-events: none; }
.effect-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#snow-canvas { z-index: 6; }#celebration-canvas { z-index: 9; }
#decor-layer { position: absolute; inset: 0; pointer-events: none; }
.gold-bead, .garland-light { position: absolute; border-radius: 50%; pointer-events: none; }
.gold-bead { width: 5px; height: 5px; margin: -2.5px; background: radial-gradient(circle at 35% 35%, #FFF3C4, #C9A24F 55%, #7E6026); box-shadow: 0 1px 1px #0006; }
.garland-light { width: 7px; height: 7px; margin: -3.5px; background: var(--light); box-shadow: 0 0 6px 2px var(--light), 0 0 16px 4px var(--light); animation: lightTw 2s ease-in-out infinite; }
.wish-halo { position: absolute; transform: translate(-50%,-50%); left: 50%; top: 58%; width: 210%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd88cbf, #ffd88c00 58%); animation: glowPulse 2.6s ease-in-out infinite; pointer-events: none; }
.wish-spark { position: absolute; left: -14%; top: 22%; color: #FFF1C9; font-size: 12px; font-style: normal; text-shadow: 0 0 6px #FFD27A; animation: twinkle 1.9s ease-in-out infinite; pointer-events: none; }
.wish-spark.second { left: auto; right: -16%; top: 48%; font-size: 9px; animation: twinkle 2.4s ease-in-out -.8s infinite; }
.gold-tick { position: absolute; right: -4px; bottom: 8%; width: 18px; height: 18px; border-radius: 50%; background: #B88D42; border: 1.5px solid #FFF3D6; color: white; font-size: 10px; display: grid; place-items: center; box-shadow: 0 2px 6px #0006; pointer-events: none; }
#tree-star { position: absolute; left: 61.2%; top: 3%; transform: translate(-50%,-60%); width: 66px; pointer-events: none; }
#tree-star img { position: relative; width: 100%; display: block; filter: drop-shadow(0 0 10px #ffd68ce6) drop-shadow(0 4px 6px #0005); }
#tree-star .wish-halo { width: 150px; top: 55%; animation-duration: 3s; }
#tree-star.star-entrance { animation: starIn 1.2s cubic-bezier(.3,1.4,.5,1) both; }
#exit-demo { pointer-events: auto; color: #fff; font-size: 11px; min-height: 44px; padding: 0 8px; }
.tree-preview { touch-action: pan-y; user-select: none; }
#pending-surface { position: absolute; inset: 0; z-index: 7; touch-action: none; cursor: grab; }
.pending-ornament { z-index: 200; }
.placement-ring { position: absolute; inset: -12px; border-radius: 50%; border: 1.5px dashed #ffffffe6; animation: pulseRing 1.6s ease-in-out infinite; pointer-events: none; }
#gesture-tip { position: absolute; left: 0; right: 0; top: max(118px, calc(env(safe-area-inset-top) + 60px)); z-index: 8; margin: 0 24px; padding: 10px 16px; border-radius: 20px; background: #2e251dc7; color: white; font-size: 13px; text-align: center; line-height: 1.35; pointer-events: none; animation: sheetUp .35s cubic-bezier(.2,.9,.3,1); }
#pending-actions { position: absolute; left: 12px; right: 12px; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 8; border-radius: 28px; padding: 10px; display: flex; gap: 10px; background: #fbf8f2f2; box-shadow: 0 16px 40px #0005; animation: sheetUp .35s cubic-bezier(.2,.9,.3,1); }
#pending-actions button { flex: 1; min-height: 52px; border-radius: 26px; font-size: 15px; }
#confirm-placement { flex: 1.4 !important; }
#toast { position: absolute; left: 50%; top: max(120px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 14; max-width: calc(100% - 24px); padding: 10px 18px; border-radius: 20px; background: #2e251de6; color: #FBF8F2; font-size: 14px; font-weight: 600; text-align: center; animation: fadeIn .2s; }
.compact-sheet[open] { height: fit-content; max-height: calc(100dvh - 64px); padding-top: 8px; gap: 14px; }
.wish-sheet[open]::before { content: ''; width: 38px; height: 5px; border-radius: 3px; background: #2e251d2e; margin: 0 auto; flex: none; }
.wish-sheet[open] { padding-top: 8px; gap: 10px; animation: sheetUp .38s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -10px 40px #0003; }
.wish-sheet .dialog-heading { padding-top: 0; padding-bottom: 2px; }
.wish-sheet .close-button { background: #2e251d12; border: 0; font-size: 20px; }
#wish-step, #detail-label { letter-spacing: .22em; }
#wish-text { resize: none; background: white; border-color: #2e251d24; line-height: 1.3; }
.wish-question { line-height: 1.2; }
#wish-ornament-step { padding-top: 0; gap: 16px; }
.draft-text { border: 0; background: #2e251d0d; padding: 14px 16px; }
#draft-text { font-size: 21px; line-height: 1.25; color: #2e251d; }
.ornament-option span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; min-height: 22px; display: flex; align-items: center; }
.ornament-option:has(:checked) { background: white; box-shadow: 0 0 0 1.5px #A9813F, 0 4px 12px #5037141f; }
#ai-unavailable { display: flex; flex-direction: column; gap: 12px; }
#ornament-prompt { font-size: 14px; line-height: 1.45; resize: none; border-radius: 16px; padding: 12px 14px; }
#ai-unavailable h3 { margin: 0; font-size: 14px; }
#style-chips [aria-pressed="true"] { background: #2e251d; color: #FBF8F2; }
#style-chips button { min-height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13px; }
#detail-sheet .sheet-content { gap: 14px; padding: 0 24px 10px; }
.detail-art-panel { position: relative; flex: none; }
.detail-hanging { position: relative; padding-top: 14px; transform-origin: 50% 0; animation: swing 4.8s ease-in-out infinite; }
.detail-art { display: block; margin: 0; max-height: none; }
#detail-halo { width: 240px; top: 52%; }
#detail-tick { width: 30px; height: 30px; right: -6px; bottom: 14px; font-size: 15px; border-width: 2px; }
#detail-meta { font-size: 13px; color: #7A6A58; text-align: center; margin: 0; }
.switch-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 16px; border: 0; border-radius: 18px; background: #2e251d0d; color: #2e251d; text-align: left; font-size: 15px; }
.switch-row > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.switch-row b { font-weight: 600; }
.switch-row small { font-size: 12px; line-height: 1.35; color: #7A6A58; }
.source-switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: #2e251d2e; transition: background .2s; }
.source-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: white; box-shadow: 0 2px 4px #0003; transition: transform .2s; }
[aria-checked="true"] .source-switch { background: #A9813F; }
[aria-checked="true"] .source-switch::after { transform: translateX(20px); }
.at-limit { opacity: .55; }
.action-row { display: flex; gap: 10px; width: 100%; }
.action-row > button { flex: 1; min-width: 0; min-height: 48px; padding: 10px 8px; border-radius: 24px; }
#detail-sheet .action-row button { background: #2e251d12; border: 0; font-size: 14px; }
#save-detail { margin-top: 4px; width: 100%; box-shadow: none; }
.segmented { display: flex; padding: 4px; border-radius: 14px; background: #2e251d0f; }
.segmented button { flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 11px; font-size: 14px; font-weight: 600; color: #7A6A58; background: transparent; }
.segmented [aria-pressed="true"] { background: white; color: #2e251d; box-shadow: 0 1px 4px #2e251d24; }
#decor-sheet .sheet-content { gap: 18px; }
#decor-sheet .switch-row, #share-texts { padding: 0; background: transparent; }
.share-card { align-self: center; width: min(292px, 100%); border-radius: 24px; overflow: hidden; background: #F3ECE1; box-shadow: 0 16px 36px #3c281438; }
#share-preview { display: block; width: 100%; aspect-ratio: 292 / 330; }
.share-card > div { padding: 12px 16px 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.share-card b { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; letter-spacing: .06em; }
.share-card small { font-size: 11px; color: #7A6A58; }
#copy-link { opacity: .6; font-size: 13px; }
#share-sheet .action-row button { min-height: 52px; }
#finish-sheet .sheet-content { align-items: center; text-align: center; padding-left: 24px; padding-right: 24px; }
.finish-art { width: 100%; height: 150px; border-radius: 24px; background: radial-gradient(circle at 50% 50%,#FFF4DE,#FBF8F2 70%); display: grid; place-items: center; }
.finish-art img { width: 84px; filter: drop-shadow(0 0 14px #ffc86ecc); }
#finish-sheet p { font-size: 14px; line-height: 1.5; color: #6E5F4E; max-width: 320px; margin: 0; }
#finish-sheet .action-row button { min-height: 56px; font-size: 15px; }
#light-star { background: #A9813F; flex: 1.4; box-shadow: none; }
@media (max-width: 350px) { .locked-action { font-size: 12px; }.locked-action small { font-size: 9px; }#day-pill { max-width: 140px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the sheet inside the visible area above a mobile keyboard. */
.wish-sheet[open] {
  position: fixed;
  top: auto;
  bottom: calc(100% - var(--sheet-viewport-top, 0px) - var(--sheet-viewport-height, 100dvh));
  margin-top: 0;
  height: min(810px, calc(var(--sheet-viewport-height, 100dvh) - 64px));
  max-height: calc(var(--sheet-viewport-height, 100dvh) - 16px);
  overflow: hidden;
  animation: none;
}
.compact-sheet[open], #start-over-sheet[open] { height: fit-content; }
.sheet-footer { flex: none; }
@media (max-width: 600px) {
  [data-keyboard-open] .wish-sheet[open] { height: calc(var(--sheet-viewport-height) - 16px); padding-bottom: 12px; animation: none; }
  [data-keyboard-open] .compact-sheet[open], [data-keyboard-open] #start-over-sheet[open] { height: fit-content; }
  [data-keyboard-open] #wish-text { height: 96px; }
  [data-keyboard-open] #question-chips, [data-keyboard-open] #wish-text-step > .question-help { display: none; }
}