@font-face { font-family: "Wendy One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/wendy-one.woff2") format("woff2"); }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/host-grotesk.woff2") format("woff2"); }

:root {
  --ground:#E4DCF3; --ground-2:#D6CAEE; --ground-3:#C6B6E6; --ink:#23123A; --ink-2:#57426F; --b1:#3A55DE; --b2:#7A3FE0; --b3:#C7307C; --b4:#6B1F78;
  --fig-ink:#23123A; --tint:#B5A1EC; --eye:#F6F1FF; --paper:#F6F1FF; --logo:#23123A; --on-b:#F6F1FF; --win:#F2ECFC; --door:#B6A2DE; --lamp:#23123A;
  --arch:#23123A; --sign-bg:#23123A; --sign-tx:#E4DCF3; --neon-line:#C7307C; --on-neon:#23123A; --neon:#E6FF2E; --mode:tag; --d-tag:inline;
  --d-nacht:none; --dn-x:0%; --dn-tag:var(--on-neon); --dn-nacht:var(--ink); --blink:mo-blink; --snooze:none; --d-hw:inline; --d-fs:none;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#1E0F33; --ground-2:#2B1848; --ground-3:#39235C; --ink:#F1E9FF; --ink-2:#BBA9DC; --b1:#8FA6FF; --b2:#B596FF; --b3:#FF86BD; --b4:#D9A0E8;
    --fig-ink:#6E5A96; --tint:#4B3570; --eye:#1E0F33; --paper:#F1E9FF; --logo:#F1E9FF; --on-b:#1E0F33; --win:#3A2560; --door:#120824; --lamp:#E6FF2E;
    --arch:#6E5A96; --sign-bg:#E6FF2E; --sign-tx:#23123A; --neon-line:#E6FF2E; --on-neon:#23123A; --neon:#E6FF2E; --mode:nacht; --d-tag:none;
    --d-nacht:inline; --dn-x:100%; --dn-tag:var(--ink); --dn-nacht:var(--on-neon); --blink:mo-sleep; --snooze:snooze; --d-hw:inline; --d-fs:none;
    color-scheme:dark;
  }
}
:root[data-mode="tag"] {
  --ground:#E4DCF3; --ground-2:#D6CAEE; --ground-3:#C6B6E6; --ink:#23123A; --ink-2:#57426F; --b1:#3A55DE; --b2:#7A3FE0; --b3:#C7307C; --b4:#6B1F78;
  --fig-ink:#23123A; --tint:#B5A1EC; --eye:#F6F1FF; --paper:#F6F1FF; --logo:#23123A; --on-b:#F6F1FF; --win:#F2ECFC; --door:#B6A2DE; --lamp:#23123A;
  --arch:#23123A; --sign-bg:#23123A; --sign-tx:#E4DCF3; --neon-line:#C7307C; --on-neon:#23123A; --neon:#E6FF2E; --mode:tag; --d-tag:inline;
  --d-nacht:none; --dn-x:0%; --dn-tag:var(--on-neon); --dn-nacht:var(--ink); --blink:mo-blink; --snooze:none; --d-hw:inline; --d-fs:none;
  color-scheme:light;
}
:root[data-mode="nacht"] {
  --ground:#1E0F33; --ground-2:#2B1848; --ground-3:#39235C; --ink:#F1E9FF; --ink-2:#BBA9DC; --b1:#8FA6FF; --b2:#B596FF; --b3:#FF86BD; --b4:#D9A0E8;
  --fig-ink:#6E5A96; --tint:#4B3570; --eye:#1E0F33; --paper:#F1E9FF; --logo:#F1E9FF; --on-b:#1E0F33; --win:#3A2560; --door:#120824; --lamp:#E6FF2E;
  --arch:#6E5A96; --sign-bg:#E6FF2E; --sign-tx:#23123A; --neon-line:#E6FF2E; --on-neon:#23123A; --neon:#E6FF2E; --mode:nacht; --d-tag:none;
  --d-nacht:inline; --dn-x:100%; --dn-tag:var(--ink); --dn-nacht:var(--on-neon); --blink:mo-sleep; --snooze:snooze; --d-hw:inline; --d-fs:none;
  color-scheme:dark;
}
:root[data-season="fs"] {
  --ground:#CFE6FF; --ground-2:#BAD8FB; --ground-3:#A3C9F5; --ink:#0B1E4A; --ink-2:#3A4F7D; --b1:#1F5BFF; --b2:#0A8F8A; --b3:#FF5B3A; --b4:#E0468C;
  --fig-ink:#0B1E4A; --tint:#86B4F0; --eye:#F2F8FF; --paper:#F2F8FF; --logo:#0B1E4A; --on-b:#F2F8FF; --win:#E8F3FF; --door:#8FB7E8; --lamp:#0B1E4A;
  --arch:#0B1E4A; --sign-bg:#0B1E4A; --sign-tx:#CFE6FF; --neon-line:#FF5B3A; --on-neon:#0B1E4A; --neon:#E6FF2E; --mode:tag; --d-tag:inline;
  --d-nacht:none; --dn-x:0%; --dn-tag:var(--on-neon); --dn-nacht:var(--ink); --blink:mo-blink; --snooze:none; --d-hw:none; --d-fs:inline;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root[data-season="fs"] {
    --ground:#06242F; --ground-2:#0B3341; --ground-3:#124454; --ink:#E6FBFF; --ink-2:#9CC7D1; --b1:#63D8E6; --b2:#7BE0B5; --b3:#FF8A6E; --b4:#F29BC3;
    --fig-ink:#3E7686; --tint:#1D4A57; --eye:#06242F; --paper:#E6FBFF; --logo:#E6FBFF; --on-b:#06242F; --win:#17556A; --door:#021118; --lamp:#E6FF2E;
    --arch:#3E7686; --sign-bg:#E6FF2E; --sign-tx:#0B1E4A; --neon-line:#E6FF2E; --on-neon:#0B1E4A; --neon:#E6FF2E; --mode:nacht; --d-tag:none;
    --d-nacht:inline; --dn-x:100%; --dn-tag:var(--ink); --dn-nacht:var(--on-neon); --blink:mo-sleep; --snooze:snooze; --d-hw:none; --d-fs:inline;
    color-scheme:dark;
  }
}
:root[data-season="fs"][data-mode="tag"] {
  --ground:#CFE6FF; --ground-2:#BAD8FB; --ground-3:#A3C9F5; --ink:#0B1E4A; --ink-2:#3A4F7D; --b1:#1F5BFF; --b2:#0A8F8A; --b3:#FF5B3A; --b4:#E0468C;
  --fig-ink:#0B1E4A; --tint:#86B4F0; --eye:#F2F8FF; --paper:#F2F8FF; --logo:#0B1E4A; --on-b:#F2F8FF; --win:#E8F3FF; --door:#8FB7E8; --lamp:#0B1E4A;
  --arch:#0B1E4A; --sign-bg:#0B1E4A; --sign-tx:#CFE6FF; --neon-line:#FF5B3A; --on-neon:#0B1E4A; --neon:#E6FF2E; --mode:tag; --d-tag:inline;
  --d-nacht:none; --dn-x:0%; --dn-tag:var(--on-neon); --dn-nacht:var(--ink); --blink:mo-blink; --snooze:none; --d-hw:none; --d-fs:inline;
  color-scheme:light;
}
:root[data-season="fs"][data-mode="nacht"] {
  --ground:#06242F; --ground-2:#0B3341; --ground-3:#124454; --ink:#E6FBFF; --ink-2:#9CC7D1; --b1:#63D8E6; --b2:#7BE0B5; --b3:#FF8A6E; --b4:#F29BC3;
  --fig-ink:#3E7686; --tint:#1D4A57; --eye:#06242F; --paper:#E6FBFF; --logo:#E6FBFF; --on-b:#06242F; --win:#17556A; --door:#021118; --lamp:#E6FF2E;
  --arch:#3E7686; --sign-bg:#E6FF2E; --sign-tx:#0B1E4A; --neon-line:#E6FF2E; --on-neon:#0B1E4A; --neon:#E6FF2E; --mode:nacht; --d-tag:none;
  --d-nacht:inline; --dn-x:100%; --dn-tag:var(--ink); --dn-nacht:var(--on-neon); --blink:mo-sleep; --snooze:snooze; --d-hw:none; --d-fs:inline;
  color-scheme:dark;
}

:root {
  --font-display: "Wendy One", "Arial Black", "Trebuchet MS", sans-serif;
  --font-text: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: .78rem; --t-s: .9rem; --t-m: 1rem; --t-l: clamp(1.05rem, 1.5vw, 1.28rem);
  --d-3: clamp(1.45rem, 2.6vw, 2.15rem); --d-mid: clamp(1.9rem, 3.4vw, 2.8rem); --d-2: clamp(2.05rem, 5.3vw, 4.5rem); --d-xl: clamp(2.6rem, 9vw, 8rem);
  --hh: 64px;
  --st: 12px;
  --gut: clamp(16px, 4vw, 56px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: var(--safe-t); }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + var(--safe-t) + 12px); }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-text); font-size: 17px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--safe-t); z-index: 60; background: var(--ground); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap {
  width: 100%; max-width: 1320px; margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.only-tag { display: var(--d-tag); }
.only-nacht { display: var(--d-nacht); }
.only-hw { display: var(--d-hw); }
.only-fs { display: var(--d-fs); }

.steck {
  --s: var(--st);
  clip-path: polygon(0 0, calc(100% - 2*var(--s)) 0, calc(100% - 2*var(--s)) var(--s), calc(100% - var(--s)) var(--s),
    calc(100% - var(--s)) calc(2*var(--s)), 100% calc(2*var(--s)), 100% 100%, calc(2*var(--s)) 100%,
    calc(2*var(--s)) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - 2*var(--s)), 0 calc(100% - 2*var(--s)));
}
.steck-1 {
  --s: 7px;
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%,
    var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s)));
}

.fig { display: block; overflow: visible; }
.fig path { shape-rendering: crispEdges; }
.t-b1 { fill: var(--b1); } .t-b2 { fill: var(--b2); } .t-b3 { fill: var(--b3); } .t-b4 { fill: var(--b4); }
.t-ink { fill: var(--fig-ink); } .t-neon { fill: var(--neon); } .t-mark, .t-eyen { fill: var(--on-neon); }
.t-eye { fill: var(--eye); } .t-tint { fill: var(--tint); } .t-logo { fill: var(--logo); }
.t-acc1 { fill: var(--acc1, var(--b3)); } .t-acc2 { fill: var(--acc2, var(--paper)); }
.mo { transform-box: view-box; }
.fig:not(.is-live) .mo { animation-play-state: paused; }
.fig-eyes { transition: transform .16s ease-out; }
.qclip .mo-blink { animation-name: var(--blink, mo-blink); }
.qclip .fig-root { transform-box: fill-box; transform-origin: 50% 100%; animation: var(--snooze, none) 4.6s ease-in-out infinite alternate; }
.qclip .fig:not(.is-live) .fig-root { animation-play-state: paused; }
@keyframes mo-sleep { 0%, 71% { transform: scaleY(.12); } 75%, 81% { transform: scaleY(1); } 85%, 100% { transform: scaleY(.12); } }
@keyframes snooze { to { transform: scaleY(1.018); } }
.acc { display: none; }
:root:not([data-season="fs"]) .fig.g-head .acc-winter[data-acc="muetze"],
:root:not([data-season="fs"]) .fig.g-neck .acc-winter[data-acc="schal"],
:root[data-season="fs"] .fig.g-head .acc-summer[data-acc="hut"],
:root[data-season="fs"] .fig.g-face .acc-summer[data-acc="sonnenbrille"] { display: inline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  font-weight: 600; font-size: var(--t-m); line-height: 1.2; text-decoration: none; text-align: center;
  --s: 7px;
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%,
    var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s)));
  transition: transform .12s steps(2), background-color .12s;
}
.btn:active { transform: translate(2px, 2px); }
.btn-neon { background: var(--neon); color: var(--on-neon); }
.btn-neon:hover { background: var(--ink); color: var(--ground); }
.btn-ink { background: var(--ink); color: var(--ground); }
.btn-ink:hover { background: var(--neon); color: var(--on-neon); }
.btn-soft { background: var(--ground-3); color: var(--ink); }
.btn-soft:hover { background: var(--ink); color: var(--ground); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 6px var(--ink); }

.top { position: sticky; top: var(--safe-t); z-index: 50; background: var(--ground); height: var(--hh); }
.top-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; flex-direction: column; gap: 3px; text-decoration: none; flex: none; }
.logo svg { display: block; height: 26px; width: auto; overflow: visible; }
.logo path { fill: var(--logo); }
.logo-dot { transform-box: fill-box; transform-origin: 50% 100%; }
.logo-sub { font-size: .7rem; font-weight: 600; line-height: 1; color: var(--ink-2); }
.top-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.daynight {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 44px; padding: 4px; background: var(--ground-3);
  font-weight: 600; font-size: var(--t-s); isolation: isolate;
}
.daynight::before {
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  background: var(--neon); transform: translateX(var(--dn-x)); transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
.dn-opt { display: grid; place-items: center; padding: 0 12px; color: var(--ink); }
.dn-tag { color: var(--dn-tag); } .dn-nacht { color: var(--dn-nacht); }
.top-cta { min-height: 44px; padding: 8px 16px; font-size: var(--t-s); }
.queue-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ground-3); pointer-events: none; }
.ql-you { position: absolute; left: 0; bottom: 3px; width: 16px; height: 13px; will-change: transform; }
.ql-you i { position: absolute; inset: 0; background: var(--neon); border-bottom: 3px solid var(--ink); }
.ql-you i::before, .ql-you i::after { content: ""; position: absolute; top: 3px; width: 3px; height: 3px; background: var(--on-neon); }
.ql-you i::before { right: 7px; } .ql-you i::after { right: 2px; }
.ql-door { position: absolute; right: 0; bottom: 3px; width: 12px; height: 17px; background: var(--ink); }

.hero { position: relative; }
.stage {
  position: sticky; top: calc(var(--hh) + var(--safe-t)); overflow: hidden;
  height: calc(100vh - var(--hh) - var(--safe-t) - var(--safe-b));
  height: calc(100dvh - var(--hh) - var(--safe-t) - var(--safe-b));
  min-height: 520px;
}
.stage-copy { position: relative; z-index: 2; padding-top: clamp(10px, 3.2vh, 44px); pointer-events: none; }
.stage-copy > * { pointer-events: auto; }
h1 {
  font-family: var(--font-display); font-weight: 400; line-height: 1;
  font-size: clamp(2.5rem, min(7.4vw, 11.5vh), 6.4rem); max-width: 13em; text-wrap: balance;
}
.lede { margin-top: clamp(10px, 1.8vh, 22px); font-size: var(--t-l); line-height: 1.45; max-width: 34em; text-wrap: pretty; }
.kk { margin-top: 8px; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); max-width: 52em; }
@media (min-width: 900px) and (max-height: 720px) {
  h1 { font-size: clamp(2.5rem, min(7.4vw, 10.4vh), 6.4rem); }
  .lede { font-size: var(--t-m); max-width: 50em; margin-top: 8px; }
  .kk { margin-top: 4px; }
  .win-grid .win-stage { position: static; }
}
.street { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; cursor: grab; }
.street.is-drag { cursor: grabbing; }
.street.is-drag .fig { pointer-events: none; }
.sky { position: absolute; inset: 0 0 var(--gh) 0; will-change: transform; }
.sky > * { position: absolute; left: var(--x); top: var(--y); }
.cloud { width: var(--w); fill: var(--ground-2); animation: drift var(--t) ease-in-out infinite alternate; }
.moon { width: var(--w); fill: var(--tint); }
.star { width: 8px; height: 8px; background: var(--ink-2); animation: twinkle 4.2s steps(2) infinite; animation-delay: var(--d); }
@keyframes drift { from { transform: translateX(-2.5vw); } to { transform: translateX(2.5vw); } }
@keyframes twinkle { 0%, 60% { opacity: 1; } 70%, 85% { opacity: .15; } 100% { opacity: 1; } }
.lane { position: absolute; left: 0; bottom: var(--gh); height: 0; will-change: transform; }
.qclip { position: absolute; left: 0; bottom: 0; height: 900px; overflow-x: clip; overflow-y: visible; }
.lane .fig { position: absolute; left: 0; bottom: 0; will-change: transform; cursor: pointer; }
.shop { position: absolute; bottom: 0; }
.shop svg { display: block; overflow: visible; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--gh); background: var(--ground-3); z-index: 3; }
.tag {
  position: absolute; left: 0; bottom: 0; z-index: 4; width: max-content; max-width: min(300px, 76vw); padding: 9px 14px 11px;
  background: var(--neon); color: var(--on-neon); pointer-events: none; transform-origin: 20% 100%;
  --s: 7px;
  clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% calc(100% - var(--s)),
    calc(var(--tail) + 2*var(--s)) calc(100% - var(--s)), calc(var(--tail) + 2*var(--s)) 100%, calc(var(--tail) + var(--s)) 100%, calc(var(--tail) + var(--s)) calc(100% - var(--s)), 0 calc(100% - var(--s)));
  padding-bottom: 18px; --tail: 18px;
}
.tag.pop { animation: tagpop .22s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes tagpop { from { transform: var(--tag-at) scale(.55); } }
.tag-k { display: block; font-size: var(--t-xs); font-weight: 700; line-height: 1.2; opacity: .8; }
.tag-t { display: block; font-weight: 600; font-size: var(--t-s); line-height: 1.2; text-wrap: balance; }
.qmap { height: 100%; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); }
.qmap-end { font-size: var(--t-xs); font-weight: 600; line-height: 1.2; flex: none; }
.qmap-track { position: relative; flex: 1 1 auto; min-width: 0; height: 56px; cursor: pointer; touch-action: pan-y; }
.qmap-track svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qmap-here { fill: var(--neon); }
.qmap-btn { flex: none; min-height: 44px; padding: 8px 14px; font-size: var(--t-s); }
.hero-step { position: relative; }

.sec { position: relative; padding-block: clamp(64px, 9vw, 132px); }
.sec + .sec { padding-top: 0; }
h2 {
  font-family: var(--font-display); font-weight: 400; line-height: 1;
  font-size: var(--d-2); max-width: 15em; text-wrap: balance;
}
h3 { font-family: var(--font-display); font-weight: 400; line-height: 1; font-size: var(--d-3); text-wrap: balance; }
.sec p { max-width: 34em; text-wrap: pretty; }
.big-p { font-size: var(--t-l); line-height: 1.45; }
.small { font-size: var(--t-s); color: var(--ink-2); }
.stack { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }
.stack-l { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }

.win-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "intro stage" "play stage"; gap: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(36px, 6vw, 84px); }
.win-intro { grid-area: intro; } .win-play { grid-area: play; }
.win-stage { grid-area: stage; position: sticky; top: calc(var(--hh) + var(--safe-t) + 24px); }
.shopwin { position: relative; background: var(--win); padding: clamp(14px, 2.2vw, 30px); padding-top: clamp(66px, 7.4vw, 92px); }
.shopwin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--lamp); }
.shopwin-floor { height: 18px; background: var(--ground-3); }
.site { position: relative; display: grid; grid-template-columns: 2.1fr 1fr; gap: clamp(8px, 1vw, 14px); }
.site-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--ground); font-weight: 700; font-size: var(--t-xs); }
.site-logo { font-family: var(--font-display); font-weight: 400; font-size: var(--t-m); }
.site-btn { padding: 6px 12px 7px; background: var(--ink); color: var(--ground); font-size: var(--t-xs); font-weight: 700; line-height: 1.2; --s: 5px; clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))); }
button.site-btn { transition: background-color .12s; }
button.site-btn[aria-pressed="true"] { background: var(--neon); color: var(--on-neon); }
@media (hover: hover) { button.site-btn:hover { background: var(--neon); color: var(--on-neon); } }
.site button:focus-visible, .vplay:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--neon-line); }
.site-lead { position: relative; min-height: clamp(128px, 15vw, 190px); padding: clamp(12px, 1.6vw, 20px); background: var(--lead, var(--b1)); color: var(--on-b); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; transform-origin: 50% 100%; }
.site-lead.is-wish { background: var(--neon); color: var(--on-neon); }
.lead-k { font-size: var(--t-xs); font-weight: 700; }
.lead-t { font-family: var(--font-display); font-weight: 400; font-size: var(--d-3); line-height: 1; }
.lead-s { font-size: var(--t-xs); font-weight: 600; }
.site-lead .lead-fig { position: absolute; right: 5%; bottom: 0; width: 30%; height: auto; display: none; pointer-events: none; }
.site-lead.has-fig .lead-fig { display: block; }
.site-lead.has-fig > span, .site-lead.has-fig > strong { max-width: 62%; }
.site-lead::after { content: ""; position: absolute; right: 0; top: 0; width: 44%; height: 46%; background: var(--on-b); opacity: .13; pointer-events: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 66.7% 100%, 66.7% 66.7%, 33.3% 66.7%, 33.3% 33.3%, 0 33.3%); }
.site-lead.is-wish::after { background: var(--on-neon); opacity: .1; }
.site-side { padding: 12px; background: var(--ground-2); display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; font-size: var(--t-xs); font-weight: 700; }
.site-side .swatches { margin-top: auto; }
.side-l { display: flex; flex-direction: column; gap: 3px; font-weight: 600; line-height: 1.2; }
.side-l[hidden], .swatches[hidden] { display: none; }
.side-l span { padding-top: 4px; border-top: 2px solid var(--ground); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.swatches > * { display: block; position: relative; aspect-ratio: 1; }
.swatches > :nth-child(1) { background: var(--b1); } .swatches > :nth-child(2) { background: var(--b2); } .swatches > :nth-child(3) { background: var(--b3); } .swatches > :nth-child(4) { background: var(--b4); }
.swatches button[aria-pressed="true"]::after { content: ""; position: absolute; inset: 32%; background: var(--on-b); }
.site-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .8vw, 10px); }
.site-row > * { padding: 9px 2px; background: var(--ground); font-size: var(--t-xs); font-weight: 700; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row button { transition: background-color .12s; }
@media (hover: hover) { .site-row button:hover { background: var(--ground-3); } }
.site-row button[aria-pressed="true"], .site-row .is-here { background: var(--ink); color: var(--ground); }
.duo { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
.duo .fig { width: 100%; height: 100%; }
.wishes { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 9px 14px; background: var(--ground-3); font-weight: 600; font-size: var(--t-s); line-height: 1.2; text-align: left;
  --s: 6px; clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s)));
}
.chip:hover { background: var(--ink); color: var(--ground); }
.chip[aria-pressed="true"] { background: var(--neon); color: var(--on-neon); }
.chip:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.chip:disabled { cursor: default; }
.voice { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.vmsg { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: var(--ground-2); flex: 1 1 220px; min-width: 0; }
.vtime { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--ground-2); flex: 1.4 1 260px; min-width: 0; }
.vplay { position: relative; flex: none; width: 44px; height: 44px; background: var(--ink); color: var(--ground); transition: transform .12s steps(2), background-color .12s; --s: 6px; clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))); }
.vplay::before { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 18px; margin: -9px 0 0 -6px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (hover: hover) { .vplay:hover { background: var(--neon); color: var(--on-neon); } }
.vplay:active { transform: translate(2px, 2px); }
.vplay:disabled { cursor: default; background: var(--ink); color: var(--ground); transform: none; }
.vplay:disabled::before { width: 14px; margin-left: -7px; clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0); }
.vbars { display: flex; align-items: center; gap: 3px; height: 30px; flex: 1 1 auto; }
.vbars i { display: block; flex: 1 1 0; max-width: 6px; height: calc(var(--h) * 1%); background: var(--ink); transform-origin: 50% 50%; }
.voice.is-playing .vbars i { animation: vbar .5s steps(3) infinite alternate; animation-delay: calc(var(--i) * -70ms); background: var(--neon-line); }
@keyframes vbar { from { transform: scaleY(.35); } to { transform: scaleY(1.25); } }
.vdur { font-weight: 700; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.vclock { font-family: var(--font-display); font-size: var(--d-mid); line-height: 1; font-variant-numeric: tabular-nums; flex: none; min-width: 2.9em; }
.vstate { font-weight: 600; font-size: var(--t-s); line-height: 1.2; }
.answer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: clamp(14px, 1.8vw, 22px); background: var(--ground-2); margin-top: 8px; min-height: 104px; }
.answer p { font-weight: 600; }
.ja { font-family: var(--font-display); font-weight: 400; font-size: var(--d-mid); line-height: 1; }
.answer.is-yes { background: var(--neon); color: var(--on-neon); }
.answer.is-yes .ja { animation: stamp .3s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes stamp { from { transform: scale(1.7) rotate(-6deg); } }

.season-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); padding-top: 26px; margin-top: clamp(28px, 4vw, 52px); }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--ink); }
.look { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 12px 14px; background: var(--ground-2); text-align: left; min-height: 150px; }
.look::before { content: ""; position: absolute; left: 50%; top: -18px; width: 8px; height: 18px; margin-left: -4px; background: var(--ink); }
.look-sw { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 52px; }
.look-sw i { display: block; }
.look-n { font-family: var(--font-display); font-size: var(--t-l); line-height: 1; }
.look-s { font-size: var(--t-xs); font-weight: 600; line-height: 1.2; }
button.look:hover { background: var(--ink); color: var(--ground); }
.look[aria-pressed="true"] { background: var(--neon); color: var(--on-neon); }
.look.is-later { color: var(--ink-2); }
.look.is-later .look-sw { grid-template-columns: repeat(5, minmax(0, 1fr)); filter: saturate(.55); opacity: .82; }
.figs-row { display: flex; align-items: flex-end; gap: clamp(4px, 1.2vw, 18px); }
.figs-row .fig { flex: var(--w) 1 0; min-width: 0; width: auto; height: auto; }
.wardrobe { position: relative; border-bottom: 18px solid var(--ground-3); padding-top: 44px; }

.pairs { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 58px clamp(10px, 1.4vw, 20px); margin-top: clamp(64px, 7vw, 96px); }
.pair-group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 58px clamp(10px, 1.4vw, 20px); }
.pair-label { grid-column: 1 / -1; font-weight: 700; font-size: var(--t-s); margin-bottom: -6px; }
.pair { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px) clamp(22px, 2.4vw, 32px); background: var(--ground-2); text-align: left; }
.pair-w { font-family: var(--font-display); font-size: var(--d-3); line-height: 1; display: flex; flex-wrap: wrap; gap: 0 .28em; }
.pair-d { font-size: var(--t-m); line-height: 1.45; }
.pair:hover { background: var(--ground-3); }
.pair.is-on { background: var(--neon); color: var(--on-neon); }
.pair:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--ink); }
.g-wide .pair { grid-column: span 6; }

.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.scan { position: relative; margin-top: 96px; }
.scan-box { position: relative; background: var(--win); display: grid; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.scan-box > .site { grid-area: 1 / 1; margin: clamp(12px, 1.6vw, 20px); align-content: start; }
.scan-box { container-type: inline-size; }
.scan-data { grid-area: 1 / 1; margin-left: var(--scan, 44%); background: var(--ground-3); overflow: hidden; display: flex; justify-content: flex-end; position: relative; z-index: 1; }
.scan-data ul { flex: none; width: 55cqw; padding: clamp(14px, 1.6vw, 22px) clamp(14px, 2vw, 26px) clamp(18px, 2vw, 26px) 14px; display: flex; flex-direction: column; justify-content: center; }
.scan-data li { display: flex; flex-direction: column; padding: 5px 8px; border-bottom: 2px solid var(--ground); line-height: 1.2; }
.scan-data li:last-child { border-bottom: 0; }
.scan-data b { font-weight: 700; font-size: var(--t-xs); }
.scan-data span { font-weight: 600; font-size: var(--t-s); }
.scan-data .hit { background: var(--neon); color: var(--on-neon); border-bottom-color: transparent; }
.scan-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--scan, 44%); width: 6px; margin-left: -3px; background: var(--neon-line); pointer-events: none; }
.scan-bit { position: absolute; left: var(--scan, 44%); bottom: 100%; width: 118px; margin-left: -96px; pointer-events: none; }
.scan-range { display: block; width: 100%; margin: 14px 0 0; height: 44px; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.scan-range::-webkit-slider-runnable-track { height: 10px; background: var(--ground-3); }
.scan-range::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; margin-top: -13px; background: var(--neon); border: 7px solid var(--ink); border-radius: 0; }
.scan-range::-moz-range-track { height: 10px; background: var(--ground-3); }
.scan-range::-moz-range-thumb { width: 22px; height: 22px; background: var(--neon); border: 7px solid var(--ink); border-radius: 0; }
.scan-range:focus-visible { outline-offset: -2px; }
.scan-cap { display: flex; justify-content: space-between; font-size: var(--t-xs); font-weight: 700; }

.price-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.loud { width: 100%; max-width: 820px; margin-top: clamp(8px, 1.2vw, 18px); }
.loud-bar { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: clamp(3px, .55vw, 8px); align-items: end; height: clamp(46px, 7.4vw, 104px); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.loud-bar i { display: block; height: calc(26% + 74% * var(--k, 0)); background: var(--ground-2); }
.loud-bar i.on { background: var(--ink); }
.loud-bar i.on:nth-child(n+13) { background: var(--neon); }
.loud-cap { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--t-xs); font-weight: 700; }
.loud.is-full .loud-bar { animation: loudbump .26s steps(3); }
@keyframes loudbump { 50% { transform: translateY(-6px); } }
.price-steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; margin-top: clamp(26px, 3.5vw, 48px); }
.price-a { grid-column: 1 / span 7; background: var(--ground-2); padding: clamp(18px, 2.4vw, 34px); }
.price-b { grid-column: 4 / span 9; background: var(--neon); color: var(--on-neon); padding: clamp(18px, 2.4vw, 34px); }
.price-n { font-family: var(--font-display); font-size: var(--d-2); line-height: 1; display: block; white-space: nowrap; }
.price-l { display: block; font-weight: 700; font-size: var(--t-l); line-height: 1.2; margin-top: 4px; }
.eur { font-family: var(--font-text); font-weight: 700; font-size: .6em; vertical-align: .5em; -webkit-text-stroke: .07em currentColor; }
.ab { font-family: var(--font-text); font-weight: 700; font-size: var(--t-l); }
.facts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; font-weight: 600; }
.facts li { display: flex; gap: 12px; align-items: baseline; }
.facts li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--ink); transform: translateY(1px); }
.card-wrap { display: flex; align-items: flex-end; gap: clamp(10px, 2vw, 28px); }
.card-wrap .fig { flex: none; width: clamp(96px, 12vw, 150px); height: auto; }
.stampcard { flex: 1 1 auto; background: var(--ground-2); padding: clamp(16px, 2vw, 26px); display: flex; flex-direction: column; gap: 14px; margin-bottom: 0; }
.stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 330px; }
.stamp { position: relative; aspect-ratio: 1; min-height: 64px; background: var(--ground); display: grid; place-items: center; font-weight: 700; font-size: var(--t-xs); line-height: 1.2; text-align: center; padding: 6px; }
button.stamp:hover { background: var(--ground-3); }
.stamp.is-on, button.stamp.is-on:hover { background: var(--ink); color: var(--ground); }
.stamp.is-on { animation: stamp .28s cubic-bezier(.3, 1.8, .5, 1); }
.stamp.is-gift { background: var(--neon); color: var(--on-neon); animation: stamp .34s cubic-bezier(.3, 1.8, .5, 1); }
.card-note { font-weight: 600; min-height: 2.9em; }

.wish-head { margin-top: 0; }
.nr { white-space: nowrap; user-select: all; }
#askSend { align-self: flex-start; }
.wish-line { max-width: none !important; text-wrap: balance !important; }
.guests { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(28px, 4vw, 56px); }
.g-row { overflow: hidden; }
.g-track { display: flex; gap: 8px; width: max-content; animation: gmove var(--t, 150s) linear infinite; animation-play-state: paused; }
.guests.is-live .g-track { animation-play-state: running; }
.guests.is-live:hover .g-track { animation-play-state: paused; }
.g-row:nth-child(2) .g-track { animation-direction: reverse; }
@keyframes gmove { to { transform: translateX(-50%); } }
.g-chip { flex: none; display: flex; gap: .55em; align-items: baseline; padding: 11px 16px 12px; background: var(--ground-2); white-space: nowrap; line-height: 1.2;
  --s: 6px; clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))); }
a.g-chip { text-decoration: none; }
a.g-chip b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--neon-line); }
a.g-chip:hover b, a.g-chip.is-hit b { text-decoration-color: currentColor; }
.g-chip b { font-weight: 700; }
.g-chip span { color: var(--ink-2); font-size: var(--t-s); }
.g-chip:hover { background: var(--neon); color: var(--on-neon); }
.g-chip:hover span { color: inherit; }
.g-chip.is-hit { background: var(--neon); color: var(--on-neon); }
.g-chip.is-hit span { color: inherit; }
.g-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.g-door { border-bottom: 18px solid var(--ground-3); justify-content: flex-end; }
@media (max-width: 900px) { .g-top { grid-template-columns: minmax(0, 1fr); } .g-door { max-width: 300px; } }
.g-all { margin-top: 14px; background: var(--ground-2); }
.g-all summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; font-weight: 600; min-height: 48px; }
.g-all summary::-webkit-details-marker { display: none; }
.g-all summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 4px; background:
  linear-gradient(var(--ink), var(--ink)) 50% 50% / 14px 4px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / 4px 14px no-repeat; }
.g-all[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) 50% 50% / 14px 4px no-repeat; }
.g-all summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.g-list { columns: 4 190px; column-gap: 24px; padding: 4px 16px 20px; font-size: var(--t-s); line-height: 1.2; }
.g-list li { break-inside: avoid; padding: 4px 0; }
.g-list b { font-weight: 700; }
.g-list a { text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--neon-line); }
.wish-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(32px, 4.5vw, 64px); }
.wish-big { font-family: var(--font-display); font-size: var(--d-xl); line-height: 1; display: inline; background: var(--neon); color: var(--on-neon); padding: .04em .16em .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.talk { display: flex; flex-direction: column; gap: 8px; }
.talk li { max-width: 26em; padding: 10px 14px; background: var(--ground-2); font-weight: 600; line-height: 1.2; }
.talk li:nth-child(even) { align-self: flex-end; background: var(--ground-3); }
.talk li:last-child { background: var(--neon); color: var(--on-neon); }
.door { position: sticky; top: calc(var(--hh) + var(--safe-t) + 24px); }
.door-scene { position: relative; height: clamp(300px, 34vw, 430px); border-bottom: 18px solid var(--ground-3); overflow: visible; }
.door-shop { position: absolute; left: 0; right: 0; bottom: 0; top: 78px; background: var(--ground-2); }
.door-hole { position: absolute; left: 7%; bottom: 0; width: 38%; top: 14%; background: var(--door); }
.door-glass { position: absolute; right: 6%; bottom: 0; width: 42%; top: 14%; background: var(--win); border-top: 10px solid var(--lamp); }
.door-sign { position: absolute; left: 0; top: 0; max-width: 100%; min-height: 78px; padding: 10px 16px 12px; background: var(--sign-bg); color: var(--sign-tx); display: flex; flex-direction: column; justify-content: center; }
.door-sign small { font-size: var(--t-xs); font-weight: 700; line-height: 1.2; }
.door-sign strong { font-family: var(--font-display); font-weight: 400; font-size: var(--d-3); line-height: 1; overflow-wrap: anywhere; }
.door-sign.is-yours { background: var(--neon); color: var(--on-neon); animation: stamp .3s cubic-bezier(.3, 1.8, .5, 1); transform-origin: 0 100%; }
.door-scene .fig { position: absolute; bottom: 0; height: auto; }
.fig-keno { left: 6%; width: 44%; }
.fig-bruno { right: 9%; width: 30%; }
.ask { display: flex; flex-wrap: wrap; gap: 10px; }
.ask label { flex: 1 1 100%; font-weight: 700; }
.ask input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 10px 14px; background: var(--ground-2); border: 0; border-bottom: 4px solid var(--ink); border-radius: 0; font-weight: 600; }
.ask input::placeholder { color: var(--ink-2); opacity: 1; }
.three { counter-reset: q; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.three li { counter-increment: q; padding: 14px; background: var(--ground-2); font-weight: 600; line-height: 1.2; }
.three li::before { content: counter(q); display: block; font-family: var(--font-display); font-size: var(--d-3); line-height: 1; margin-bottom: 8px; }

.faq { columns: 2; column-gap: clamp(16px, 3vw, 44px); margin-top: clamp(26px, 3.5vw, 48px); }
.faq details { break-inside: avoid; margin-bottom: 8px; background: var(--ground-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; font-weight: 600; line-height: 1.2; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 4px; background:
  linear-gradient(var(--ink), var(--ink)) 50% 50% / 14px 4px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / 4px 14px no-repeat; }
.faq details[open] summary::after { background: linear-gradient(var(--on-neon), var(--on-neon)) 50% 50% / 14px 4px no-repeat; }
.faq details[open] { background: var(--neon); color: var(--on-neon); }
.faq details p { padding: 0 16px 16px; max-width: none; }
.faq summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.faq-more { margin-top: 8px; }
.faq-more > summary { list-style: none; cursor: pointer; }
.faq-more > summary::-webkit-details-marker { display: none; }
.faq-more[open] > summary .zu, .faq-more:not([open]) > summary .auf { display: none; }
.faq-more .faq { margin-top: 16px; }

.cta { background: var(--ground-3); padding-block: clamp(56px, 8vw, 120px) clamp(40px, 6vw, 80px); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.cta h2 { font-size: var(--d-xl); line-height: 1; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-figs { padding-top: 40px; }
.foot { background: var(--ink); color: var(--ground); padding-block: 22px calc(22px + var(--safe-b)); }
.foot-in { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between; font-weight: 600; font-size: var(--t-s); }
.foot a { text-decoration: none; } .foot a:hover { text-decoration: underline; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
#wipe { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 900px) {
  .win-grid, .season-grid, .scan-grid, .price-grid, .wish-grid, .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .win-grid { grid-template-areas: "intro" "play" "stage"; }
  .win-stage, .door { position: static; }
  .pair, .g-wide .pair { grid-column: span 6; }
  .faq { columns: 1; }
  .cta-figs { justify-content: flex-start; }
}
@media (max-width: 620px) {
  :root { --hh: 58px; --st: 9px; }
  body { font-size: 16px; }
  .logo svg { height: 22px; }
  .top-cta { display: none; }
  .pair, .g-wide .pair { grid-column: 1 / -1; min-height: 0; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .three { grid-template-columns: minmax(0, 1fr); }
  .qmap-end { display: none; }
  .qmap-btn { padding-inline: 12px; }
  .cloud { --w: 84px !important; --y: 47% !important; }
  .cloud.c2, .cloud.c3 { display: none; }
  .moon { --w: 52px !important; --x: 80% !important; --y: 40% !important; }
  .price-a { grid-column: 1 / span 10; } .price-b { grid-column: 2 / span 11; }
  .stage { min-height: 480px; }
  .kk { display: none; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fig-eyes, .burger i { transition: none; }
  .menu.is-open .menu-list li { animation: none; }
  .g-track { animation: none; }
  .g-row { overflow-x: auto; }
  .qclip .fig-root, .mo, .voice.is-playing .vbars i, .tag.pop, .stamp.is-on, .stamp.is-gift, .answer.is-yes .ja, .door-sign.is-yours, .cloud, .star, .snap.in, .loud.is-full .loud-bar { animation: none !important; }
  .daynight::before, .btn { transition: none; }
}

.sh-wall { fill: var(--ground-2); } .sh-door { fill: var(--door); } .sh-win { fill: var(--win); } .sh-lamp { fill: var(--lamp); }
.sh-shelf { fill: var(--arch); } .sh-sign { fill: var(--sign-bg); }
.sh-signtx { fill: var(--sign-tx); font-family: var(--font-display); font-size: 40px; }

.snap.in { animation: snapin .3s steps(3) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes snapin { from { transform: translateY(16px); } }

.legal { padding-block: clamp(26px, 4vw, 56px) clamp(64px, 9vw, 132px); }
.legal a { overflow-wrap: anywhere; }
.back { align-self: flex-start; font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--neon-line); padding-block: 10px; }
.legal-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.kap { display: flex; flex-direction: column; gap: 14px; }
.kap-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: var(--d-mid); max-width: none; }
.kap-t { font-family: var(--font-text); font-weight: 600; font-size: var(--t-l); line-height: 1.2; }
.legal-acc details { background: var(--ground-2); margin-bottom: 8px; }
.legal-acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; padding: 14px 16px; font-weight: 600; line-height: 1.2; min-height: 48px; }
.legal-acc summary::-webkit-details-marker { display: none; }
.legal-acc summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 4px; background:
  linear-gradient(var(--ink), var(--ink)) 50% 50% / 14px 4px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / 4px 14px no-repeat; }
.legal-acc details[open] summary { background: var(--neon); color: var(--on-neon); }
.legal-acc details[open] summary::after { background: linear-gradient(var(--on-neon), var(--on-neon)) 50% 50% / 14px 4px no-repeat; }
.legal-acc summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
.legal-body { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 76ch; }
.legal .legal-body p { max-width: none; }
.legal-body .stark { font-weight: 700; }
.legal-body ul { list-style: square; padding-left: 1.25em; display: flex; flex-direction: column; gap: 6px; }
.legal address { font-style: normal; line-height: 1.45; font-weight: 600; }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.imp-block { background: var(--ground-2); padding: clamp(18px, 2.2vw, 30px) clamp(18px, 2.2vw, 30px) clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.imp-h { font-size: var(--d-3); }
.legal-dl { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.legal-dl dt { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.legal-dl dd { margin: 0; font-weight: 600; }

.burger { width: 48px; height: 44px; display: grid; place-items: center; background: var(--ink); flex: none;
  --s: 6px; clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))); }
.burger:hover { background: var(--neon); }
.burger:hover i { background: var(--on-neon); }
.burger:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 6px var(--ink); }
.burger-box { display: flex; flex-direction: column; gap: 4px; }
.burger i { display: block; width: 22px; height: 4px; background: var(--ground); transition: transform .2s steps(3), opacity .1s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu { position: fixed; left: 0; right: 0; top: calc(var(--hh) + var(--safe-t)); bottom: 0; z-index: 48; background: var(--ground); overflow-y: auto; overscroll-behavior: contain;
  padding-block: clamp(14px, 3vh, 40px) calc(28px + var(--safe-b)); }
.menu-in { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: start; }
.menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu-list a { display: flex; align-items: flex-end; min-height: clamp(60px, 11vh, 108px); padding: 12px 18px 15px; background: var(--ground-2); font-family: var(--font-display); font-size: var(--d-3); line-height: 1; text-decoration: none;
  --s: 8px; clip-path: polygon(0 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))); }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--neon); color: var(--on-neon); outline: none; }
.menu.is-open .menu-list li { animation: snapin .28s steps(3) both; animation-delay: calc(var(--i) * 36ms); }
.menu-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.menu-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 600; }
.menu-legal a { padding-block: 8px; }
@media (max-width: 900px) { .menu-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .menu-list { grid-template-columns: minmax(0, 1fr); gap: 6px; } .menu-list a { min-height: 52px; align-items: center; padding-block: 10px; } }

.skip { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); top: calc(var(--safe-t) + 8px); z-index: 90; transform: translateY(-300%); }
.skip:focus { transform: none; }
main:focus { outline: none; }

.unterseite { display: flex; flex-direction: column; min-height: calc(100vh - var(--safe-t)); min-height: calc(100dvh - var(--safe-t)); }
.unterseite main { flex: 1 0 auto; }

.lost { padding-block: clamp(26px, 4vw, 56px) clamp(64px, 9vw, 132px); }
.lost-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.lost p { max-width: 34em; text-wrap: pretty; }
@media (max-width: 900px) { .lost-grid { grid-template-columns: minmax(0, 1fr); } }