/* Petals — the experience page */
html, body.exp { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.exp {
  background:
    radial-gradient(90% 55% at 50% 42%, #fff8f0 0%, rgba(255, 248, 240, 0) 70%),
    radial-gradient(120% 80% at 50% 120%, #e9cfc4 0%, rgba(233, 207, 196, 0) 60%),
    linear-gradient(180deg, #f6ede4, #efe1d6);
  touch-action: manipulation;
}
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; cursor: grab; }
body.focus-flower #stage { cursor: pointer; }

/* top bar */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) 0 calc(var(--safe-l) + 10px); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .spacer { flex: 1; pointer-events: none; }
.ribbon { font-weight: 650; font-size: 14px; text-decoration: none; padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 250, 244, 0.78); box-shadow: inset 0 0 0 1.5px var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 140px); color: var(--rose-d); }

/* headline */
.head { position: fixed; left: 0; right: 0; top: 0; z-index: 5; text-align: center; padding: calc(var(--safe-t) + 52px) calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px); pointer-events: none; opacity: 0; transition: opacity 0.8s; }
body[data-step="bouquet"] .head { opacity: 1; }
.kicker { margin: 0; font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.to-name { font-size: clamp(34px, min(calc(150vw / (var(--len, 6) + 2)), 12vw, 7.6svh), 76px); line-height: 1.04; margin: 2px 0 0; overflow-wrap: anywhere; color: var(--ink); }
.from-line { margin: 4px auto 0; font-size: 15px; color: var(--muted); max-width: 34ch; }
.head.in .kicker { animation: fadeUp 0.7s 0.1s both; }
.head.in .to-name { animation: nameIn 1s 0.2s cubic-bezier(0.2, 1, 0.3, 1) both; }
.head.in .from-line { animation: fadeUp 0.7s 0.5s both; }
@keyframes nameIn { from { opacity: 0; transform: translateY(10px); letter-spacing: 0.08em; filter: blur(4px); } to { opacity: 1; transform: none; letter-spacing: 0; filter: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* dock */
.dock { position: fixed; z-index: 10; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 520px); padding: 10px calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px); background: rgba(255, 250, 244, 0.86); border-radius: 26px 26px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 -10px 40px rgba(110, 60, 60, 0.12); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); text-align: center; transition: opacity 0.5s, transform 0.5s; }
@media (min-width: 640px) { .dock { bottom: 16px; border-radius: 26px; padding-bottom: 12px; } }
body:not([data-step="bouquet"]) .dock { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
.hint { margin: 0 0 8px; font-size: 15px; color: var(--muted); line-height: 1.35; min-height: 1.35em; }
.hint b { color: var(--ink); font-weight: 700; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.act { position: relative; min-height: 62px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line), 0 2px 8px rgba(110, 60, 60, 0.06); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 0.12s, background 0.2s; }
.act:active { transform: scale(0.95); }
.act-ic { font-size: 22px; line-height: 1.1; }
.act-lbl { font-size: 14px; font-weight: 650; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.act.new::after { content: ''; position: absolute; top: 7px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 3px #fff; animation: pulse 1.6s infinite; }
.act.on { background: var(--rose-l); }
@keyframes pulse { 50% { transform: scale(1.35); } }
.blowbar { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; text-align: left; }
.blowbar .meter { grid-column: 1 / -1; position: relative; height: 12px; border-radius: 99px; background: rgba(60, 30, 35, 0.08); overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #a6c49a, var(--rose)); border-radius: 99px; transition: width 0.08s linear; }
.meter-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(60, 30, 35, 0.4); left: 30%; }
.blow-tip { margin: 0; font-size: 14px; color: var(--muted); }
.peek { margin-top: 8px; width: 100%; }

/* ---------------------------------------------------------------- the delivery */
.intro { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #efe2d4; transition: opacity 0.9s; }
.intro.done { opacity: 0; pointer-events: none; }
.porch { position: absolute; inset: 0; transform-origin: 50% 78%; transition: transform 1.3s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.8s; }
.porch.zoom { transform: scale(2.8) translateY(14%); opacity: 0; }
.wall { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(196, 140, 130, 0.07) 0 2px, transparent 2px 46px),
  radial-gradient(70% 50% at 50% 40%, #fbf1e6, #ead9c8); }
.wall::after { content: ''; position: absolute; left: 0; right: 0; bottom: 18svh; height: 22svh; background: linear-gradient(180deg, #e3cfbd, #dcc6b2); box-shadow: inset 0 3px 0 #f4e7d9, inset 0 6px 0 #cfb6a0; }
.lamp { position: absolute; right: 9%; top: 26%; width: 22px; height: 46px; border-radius: 11px 11px 6px 6px; background: linear-gradient(#e9c47a, #c69a46); box-shadow: 0 0 60px 40px rgba(255, 214, 140, 0.35), 0 0 120px 80px rgba(255, 220, 160, 0.18); }
.doorway { position: absolute; left: 50%; bottom: 18svh; height: min(58svh, 118vw, calc(82svh - 225px)); aspect-ratio: 220 / 470; transform: translateX(-50%); perspective: 1100px; }
.frame { position: absolute; inset: -12px -12px 0; border: 12px solid #f7ece0; border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: 0 0 0 2px #e0cdbb, inset 0 0 0 2px #e0cdbb, 0 10px 40px rgba(110, 60, 40, 0.18); pointer-events: none; }
.outside { position: absolute; inset: 0; overflow: hidden; background: #f9d7b6; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #f3b6a6 0%, #f8d1a8 45%, #fde8c4 70%); }
.hedge { position: absolute; left: -10%; right: -10%; bottom: 16%; height: 34%; background:
  radial-gradient(40% 60% at 15% 60%, #6f8f5c 60%, transparent 61%),
  radial-gradient(35% 70% at 50% 70%, #5f8150 60%, transparent 61%),
  radial-gradient(40% 60% at 88% 60%, #6a8b58 60%, transparent 61%); }
.step-stone { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(#d9c7b4, #bfa993); }
.box-small { position: absolute; left: 10%; right: 10%; bottom: 6%; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity 0.6s 0.7s, transform 0.6s 0.7s; }
.box-small svg { display: block; width: 100%; height: auto; }
.intro.opened .box-small { opacity: 1; transform: none; animation: boxBob 2.2s 1.6s ease-in-out infinite; }
@keyframes boxBob { 50% { transform: translateY(-4px); } }
.door { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform 1.5s cubic-bezier(0.55, 0, 0.25, 1), filter 1.5s; box-shadow: 4px 0 18px rgba(0, 0, 0, 0.18); backface-visibility: hidden; }
.door svg { display: block; width: 100%; height: 100%; }
.intro.knock .door { animation: knock 0.62s; }
@keyframes knock { 10%, 40%, 70% { transform: translateX(1.5px); } 25%, 55%, 85% { transform: translateX(-1px); } }
.intro.opened .door { transform: rotateY(-108deg); filter: brightness(0.7); }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 18svh; background: repeating-linear-gradient(90deg, #c49a74 0 23%, #b98d67 23% 24%), #c49a74; box-shadow: inset 0 8px 18px rgba(80, 40, 20, 0.25); }
.rug { position: absolute; left: 50%; bottom: 4svh; width: min(70vw, 34svh); height: 9svh; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, #e7b3b5 60%, #d79a9e 62%, #d79a9e 80%, #e7b3b5 82%); box-shadow: 0 4px 10px rgba(80, 40, 20, 0.2); }
.intro.opened .doorway::after { content: ''; position: absolute; left: -40%; right: -40%; bottom: -20%; height: 40%; background: radial-gradient(closest-side, rgba(255, 220, 170, 0.6), rgba(255, 220, 170, 0)); pointer-events: none; animation: fadeIn 1.6s both; }

.intro-copy { position: absolute; left: 0; right: 0; top: 0; text-align: center; padding: calc(var(--safe-t) + 58px) 20px 0; pointer-events: none; z-index: 3; }
.ic-kicker { margin: 0; font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.ic-title { margin: 6px auto 0; font-family: var(--display); font-size: clamp(26px, min(8vw, 5svh), 44px); line-height: 1.1; max-width: 16ch; overflow-wrap: anywhere; }
.ic-sub { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.intro-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 20px calc(var(--safe-b) + 18px); }
.intro-copy p, .intro-actions .btn { transition: opacity 0.4s; }
.intro.busy .intro-actions { opacity: 0; pointer-events: none; }

/* the box, from above */
.boxscene { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 50%, #f6e6d6, #e2cab4); animation: fadeIn 0.7s both; padding: calc(var(--safe-t) + 170px) 0 calc(var(--safe-b) + 92px); }
.bigbox { position: relative; width: min(72vw, calc((100svh - 290px) * 0.62), 360px); aspect-ratio: 0.62; }
.box-base { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(180deg, #e9c3c6, #d9a9ae); box-shadow: 0 30px 60px rgba(90, 40, 40, 0.3), inset 0 0 0 10px #f1d4d5, inset 0 0 40px rgba(90, 30, 40, 0.35); overflow: hidden; }
.tissue { position: absolute; top: 4%; bottom: 4%; width: 54%; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 6px, rgba(255, 255, 255, 0) 6px 22px), linear-gradient(160deg, #fdf3f1, #f3d8d8); box-shadow: 0 4px 16px rgba(90, 40, 40, 0.18); transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1); }
.t-left { left: 3%; border-radius: 8px 30px 30px 8px; }
.t-right { right: 3%; border-radius: 30px 8px 8px 30px; }
.bigbox.parted .t-left { transform: translateX(-85%) rotate(-8deg); }
.bigbox.parted .t-right { transform: translateX(85%) rotate(8deg); }
.box-lid { position: absolute; inset: -2%; border-radius: 16px; background:
  radial-gradient(120% 60% at 30% 10%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
  linear-gradient(180deg, #f6dfe0, #eccbcd); box-shadow: 0 14px 30px rgba(90, 40, 40, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.5); display: grid; place-items: end center; padding-bottom: 12%; transition: transform 1.1s cubic-bezier(0.5, 0, 0.3, 1), opacity 1.1s; }
.box-lid { place-items: start start; padding: 9% 0 0 10%; }
.lid-mark { font-family: var(--display); font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: #b58a5a; opacity: 0.9; }
.bigbox.lid-off .box-lid { transform: translateY(-120%) rotate(-10deg); opacity: 0; }
.box-ribbon { position: absolute; background: linear-gradient(90deg, #a8304a, #d9566f 45%, #a8304a); transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.9s; }
.rb-v { left: 46%; width: 8%; top: -2%; bottom: -2%; }
.rb-h { top: 46%; height: 5%; left: -2%; right: -2%; background: linear-gradient(180deg, #a8304a, #d9566f 45%, #a8304a); }
.bigbox.untied .rb-v { transform: translateY(70%); opacity: 0; }
.bigbox.untied .rb-h { transform: translateX(80%); opacity: 0; }
.box-bow { position: absolute; left: 50%; top: 48%; width: 62%; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; transition: transform 0.7s cubic-bezier(0.5, 0, 0.3, 1), opacity 0.7s; filter: drop-shadow(0 6px 8px rgba(90, 30, 40, 0.35)); }
.box-bow svg { display: block; width: 100%; height: auto; overflow: visible; }
.box-bow:not(:disabled) { animation: bowWiggle 2.4s 0.8s ease-in-out infinite; }
@keyframes bowWiggle { 0%, 80%, 100% { transform: translate(-50%, -50%) rotate(0); } 85% { transform: translate(-50%, -50%) rotate(-5deg); } 90% { transform: translate(-50%, -50%) rotate(4deg); } 95% { transform: translate(-50%, -50%) rotate(-2deg); } }
.bigbox.untied .box-bow { animation: none; transform: translate(-50%, 40%) scale(0.4) rotate(40deg); opacity: 0; }
.box-tag { position: absolute; right: -6%; top: 56%; width: 46%; padding: 14px 10px 10px; border-radius: 6px 6px 8px 8px; background: linear-gradient(135deg, #fffaf2, #efe4d2); box-shadow: 0 8px 18px rgba(90, 40, 40, 0.25); transform: rotate(9deg); text-align: center; transition: transform 0.9s, opacity 0.9s; }
.box-tag::before { content: ''; position: absolute; left: 50%; top: 6px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #c9a882; }
.bt-for { display: block; font-family: var(--hand); font-size: 19px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; margin-top: 4px; }
.bt-from { display: block; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.bigbox.untied .box-tag { transform: translate(30%, 40%) rotate(30deg); opacity: 0; }

/* ---------------------------------------------------------------- note sheet */
.note-sheet { padding-top: 20px; }
.nm-art { display: block; width: 120px; height: 120px; margin: -6px auto 2px; }
.nm-kind { margin: 0 !important; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose) !important; }
.nm-name { font-size: 30px !important; margin: 4px 0 6px !important; }
.nm-meaning { font-size: 17px; color: var(--ink) !important; max-width: 30ch; margin: 0 auto 14px !important; }
.nm-tag { position: relative; margin: 0 auto 16px; max-width: 340px; padding: 22px 20px 14px; background: linear-gradient(160deg, #fffdf8, #f5ead8); border-radius: 6px 6px 12px 12px; box-shadow: 0 10px 24px rgba(90, 50, 40, 0.16), inset 0 0 0 1px rgba(160, 120, 90, 0.18); transform: rotate(-1.5deg); text-align: left; animation: tagIn 0.6s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.nm-tag::before { content: ''; position: absolute; left: 50%; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #d8c3a5; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); }
@keyframes tagIn { from { opacity: 0; transform: translateY(14px) rotate(4deg); } to { opacity: 1; transform: rotate(-1.5deg); } }
.nm-note { font-family: var(--hand); font-size: 20px; line-height: 1.35; color: #3a2a30 !important; margin: 0 0 6px !important; white-space: pre-line; overflow-wrap: anywhere; }
.nm-sign { font-family: var(--hand); font-size: 17px; color: var(--rose-d) !important; text-align: right; margin: 0 !important; overflow-wrap: anywhere; }
.nm-locked { background: var(--sage-l); border-radius: 14px; padding: 10px 14px; color: #3f4f39 !important; font-weight: 600; }
.nm-count { font-size: 14px; margin: 10px 0 0 !important; }

/* ---------------------------------------------------------------- the card */
.card-modal { align-items: center; flex-direction: column; gap: 14px; padding-bottom: calc(var(--safe-b) + 14px); }
.card3d { position: relative; width: min(88vw, 400px, 62svh); height: min(calc(100svh - var(--safe-t) - var(--safe-b) - 120px), 560px); perspective: 1600px; }
.card-inside { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; background: linear-gradient(170deg, #fffdf8, #f8efe2); border-radius: 10px; box-shadow: 0 20px 50px rgba(60, 20, 30, 0.35); padding: 26px 24px 22px; text-align: left; }
.card-to { margin: 0 0 12px; font-family: var(--display); font-size: 26px; color: var(--ink); overflow-wrap: anywhere; }
.card-msg p { margin: 0 0 12px; font-family: var(--hand); font-size: 20px; line-height: 1.42; color: #3a2a30; white-space: pre-line; overflow-wrap: anywhere; }
.card-sign { margin: 16px 0 0; font-family: var(--hand); font-size: 18px; color: var(--muted); text-align: right; }
.card-from { margin: 0; font-family: var(--hand); font-size: 26px; font-weight: 700; color: var(--rose-d); text-align: right; overflow-wrap: anywhere; }
.card-cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1.3s cubic-bezier(0.5, 0, 0.2, 1); pointer-events: none; }
.card-modal.opened .card-cover { transform: rotateY(-178deg); opacity: 0; transition: transform 1.3s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.4s 1s; }
.cc-face, .cc-back { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cc-face { background: radial-gradient(circle at 30% 30%, #f7d6dc, #eab3bd 60%, #d98e9c); display: grid; place-content: center; text-align: center; gap: 10px; box-shadow: 0 20px 50px rgba(60, 20, 30, 0.35), inset 0 0 0 10px rgba(255, 255, 255, 0.35); }
.cc-mark { font-size: 64px; color: #fff; text-shadow: 0 4px 0 rgba(150, 48, 74, 0.35); line-height: 1; }
.cc-word { font-family: var(--display); font-size: 28px; color: #fff; text-shadow: 0 2px 0 rgba(150, 48, 74, 0.35); padding: 0 20px; overflow-wrap: anywhere; }
.cc-back { transform: rotateY(180deg); background: linear-gradient(170deg, #f8efe2, #f1e4d2); }
.card-actions { position: relative; z-index: 2; }
.card-actions .btn-ghost { background: rgba(255, 255, 255, 0.85); }

/* ---------------------------------------------------------------- daisy game */
.daisy-modal { padding: 0; background: radial-gradient(90% 70% at 50% 45%, #f8f3e6, #e6dcc2); backdrop-filter: none; align-items: stretch; }
#daisy-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.dz-top { position: absolute; left: 0; right: 0; top: 0; text-align: center; padding: calc(var(--safe-t) + 18px) 20px 0; pointer-events: none; }
.dz-title { font-size: clamp(24px, min(7vw, 4.6svh), 36px); color: var(--ink); }
.dz-say { margin: 8px 0 0; min-height: 1.2em; font-family: var(--display); font-size: clamp(30px, min(10vw, 6.5svh), 56px); line-height: 1.1; color: var(--rose); }
.dz-say.pop { animation: say 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.dz-say.win { color: var(--rose-d); }
@keyframes say { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.dz-bottom { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 0 16px calc(var(--safe-b) + 16px); }
.dz-hint { display: inline-block; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 252, 245, 0.85); color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- poster & send-back */
.poster-sheet img { display: block; width: auto; max-width: 100%; max-height: calc(100svh - 260px); margin: 0 auto 10px; border-radius: 10px; box-shadow: 0 10px 30px rgba(60, 20, 30, 0.2); }
.back-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 14px; }
.back-opt { position: relative; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); padding: 4px 2px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-height: 92px; }
.back-opt canvas { width: 56px; height: 56px; }
.back-opt span { font-size: 14px; font-weight: 650; line-height: 1.1; }
.back-opt[aria-pressed="true"] { background: var(--rose-l); box-shadow: inset 0 0 0 2.5px var(--rose); }
.back-result { margin-top: 14px; text-align: left; }
#back-link { font-size: 13px; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }

@media (max-height: 560px) and (orientation: landscape) {
  .head { padding-top: calc(var(--safe-t) + 62px); text-align: left; padding-left: calc(var(--safe-l) + 20px); right: auto; width: 34%; }
  .to-name { font-size: clamp(28px, 6svh + 10px, 48px); }
  .dock { left: auto; right: calc(var(--safe-r) + 12px); transform: none; bottom: 12px; width: min(44%, 400px); border-radius: 22px; padding-bottom: 12px; }
  body:not([data-step="bouquet"]) .dock { transform: translateY(20px); }
  .doorway { height: 62svh; bottom: 14svh; }
  .floor { height: 14svh; }
  .wall::after { bottom: 14svh; }
  .intro-copy { padding-top: calc(var(--safe-t) + 62px); text-align: left; padding-left: 24px; width: 36%; }
  .ic-title { margin-left: 0; font-size: clamp(22px, 7svh, 34px); }
  .intro-actions { left: auto; right: 0; width: 38%; bottom: 20%; }
  .bigbox { width: min(calc((100svh - 40px) * 0.62), 40vw); }
  .boxscene { padding: 20px 0; }
  .card3d { width: min(70vw, 460px); height: calc(100svh - 96px); }
  .card-modal { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 10px; }
  .card-actions { flex-direction: column; }
}