:root {
  --ink: #070a18;
  --panel: #0d1122;
  --cyan: #39f3d0;
  --cyan-deep: #00cdbb;
  --pink: #ff4d8d;
  --white: #f4fffd;
  --muted: #91a5ac;
  --line: rgba(101, 255, 228, .19);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--white);
  background: var(--ink);
  font-family: "Microsoft YaHei UI", "Noto Sans SC", Arial, sans-serif;
  overflow-x: hidden;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

#confetti { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.noise {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; width: 420px; height: 420px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(57,243,208,.10), transparent 67%);
  transform: translate(-50%, -50%); transition: opacity .3s;
}

.topbar {
  height: 72px; padding: 0 clamp(22px, 4vw, 68px); display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px; border-bottom: 1px solid var(--line); position: absolute; z-index: 20; width: 100%;
  font-size: 11px; letter-spacing: .17em;
}
.brand { display: flex; align-items: center; gap: 13px; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; background: var(--cyan); color: var(--ink); font: 900 15px Arial; }
.topbar p { margin: 0; color: var(--muted); }
.sound-toggle { justify-self: end; color: var(--white); background: transparent; border: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; letter-spacing: .1em; font-size: 10px; }
.eq { height: 16px; display: flex; align-items: end; gap: 2px; }
.eq i { display: block; width: 2px; height: 5px; background: var(--cyan); }
.sound-toggle[aria-pressed="true"] .eq i { animation: eq .7s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.45s; }
.sound-toggle[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.2s; }
@keyframes eq { to { height: 15px; } }

.hero { min-height: 820px; height: 100svh; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); padding: 72px clamp(22px, 6.2vw, 110px) 0; }
.hero::before { content: ""; position: absolute; inset: 72px 50% 0 0; background: linear-gradient(120deg, rgba(57,243,208,.035), transparent 60%); border-right: 1px solid var(--line); }
.hero-grid { position: absolute; inset: 72px 0 0; opacity: .12; background-image: linear-gradient(var(--cyan) 1px, transparent 1px), linear-gradient(90deg, var(--cyan) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(to bottom, transparent, #000 20%, transparent 90%); }
.orbit { position: absolute; border: 1px solid rgba(57,243,208,.16); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 620px; height: 620px; right: -110px; top: 90px; }
.orbit-two { width: 820px; height: 820px; right: -210px; top: -10px; border-style: dashed; animation: spin 35s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-copy { position: relative; z-index: 4; align-self: center; padding-bottom: 15px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 700 11px/1.2 Arial; letter-spacing: .28em; }
.eyebrow > span { display: block; width: 36px; height: 2px; background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.eyebrow b { color: var(--cyan); }
.hero h1 { margin: 25px 0 20px; font: 900 clamp(58px, 8.3vw, 142px)/.77 Arial, sans-serif; letter-spacing: -.065em; transform: scaleX(.86); transform-origin: left; width: 116%; }
.hero h1 span { display: block; color: var(--cyan); text-shadow: 0 0 40px rgba(57,243,208,.17); }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 1px rgba(244,255,253,.78); letter-spacing: -.04em; }
.hero-cn { font-size: clamp(22px, 2vw, 34px); font-weight: 300; margin: 28px 0 13px; letter-spacing: .02em; }
.hero-cn strong { color: var(--cyan); font-weight: 800; }
.hero-note { max-width: 560px; color: #b8c9ce; font-size: 15px; line-height: 1.9; margin: 0; }
.hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 34px; }
.primary-button { border: 0; cursor: pointer; color: var(--ink); background: var(--cyan); display: inline-flex; align-items: stretch; padding: 0; box-shadow: 0 0 32px rgba(57,243,208,.13); transition: transform .2s, box-shadow .2s, background .2s; }
.primary-button span { padding: 17px 23px; font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.primary-button b { width: 50px; display: grid; place-items: center; border-left: 1px solid rgba(7,10,24,.23); font-size: 19px; }
.primary-button:hover { transform: translateY(-3px); background: #77ffe7; box-shadow: 0 8px 45px rgba(57,243,208,.28); }
.text-link { color: #c2d3d6; border-bottom: 1px solid #4c6467; padding: 10px 0; font-size: 12px; letter-spacing: .12em; }
.text-link span { color: var(--pink); padding-left: 8px; }
.status-line { display: flex; gap: 22px; margin-top: 50px; font: 700 9px Arial; letter-spacing: .16em; color: #5e747a; }
.status-line span:first-child { color: #8da3a8; }
.status-line i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.hero-visual { position: relative; min-width: 0; z-index: 3; align-self: end; height: calc(100svh - 88px); min-height: 720px; display: flex; justify-content: center; }
.hero-visual img { position: relative; z-index: 3; height: min(88vh, 830px); width: auto; align-self: end; filter: drop-shadow(0 0 30px rgba(57,243,208,.16)); animation: float 5s ease-in-out infinite; transform-origin: 50% 92%; will-change: transform, filter; }
@keyframes float { 50% { transform: translateY(-8px); } }
.concert-live .hero-visual img { animation: miku-dance 1.1s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 0 26px rgba(57,243,208,.45)) drop-shadow(0 0 52px rgba(255,77,141,.18)); }
@keyframes miku-dance {
  0%, 100% { transform: translateY(0) rotate(-1.4deg) scaleY(1); }
  18% { transform: translate(-10px, -18px) rotate(2.2deg) scaleY(1.01); }
  36% { transform: translate(8px, 0) rotate(1deg) scaleY(.985); }
  55% { transform: translate(15px, -20px) rotate(-2.4deg) scaleY(1.01); }
  74% { transform: translate(-5px, 1px) rotate(-.7deg) scaleY(.985); }
}
.stage-lights { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s; }
.stage-lights i { position: absolute; top: -10%; width: 16%; height: 95%; transform-origin: top; filter: blur(14px); background: linear-gradient(to bottom, rgba(57,243,208,.38), transparent 74%); clip-path: polygon(44% 0,56% 0,100% 100%,0 100%); }
.stage-lights i:nth-child(1) { left: 20%; transform: rotate(15deg); }.stage-lights i:nth-child(2) { left: 49%; background: linear-gradient(to bottom, rgba(255,77,141,.3), transparent 74%); }.stage-lights i:nth-child(3) { right: 13%; transform: rotate(-16deg); }
.concert-live .stage-lights { opacity: 1; }.concert-live .stage-lights i { animation: light-sweep 1.8s ease-in-out infinite alternate; }.concert-live .stage-lights i:nth-child(2) { animation-delay: -.8s; }.concert-live .stage-lights i:nth-child(3) { animation-delay: -1.4s; }
@keyframes light-sweep { to { transform: rotate(-13deg); opacity: .45; } }
.character-halo { position: absolute; width: min(43vw, 640px); aspect-ratio: 1; border-radius: 50%; top: 16%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(57,243,208,.22), rgba(57,243,208,.03) 48%, transparent 70%); filter: blur(4px); }
.vertical-copy { writing-mode: vertical-rl; position: absolute; right: 1%; top: 18%; margin: 0; z-index: 4; color: rgba(149,180,183,.46); font-size: 9px; letter-spacing: .28em; }
.song-card { position: absolute; z-index: 5; left: 0; bottom: 9%; width: 220px; padding: 17px 18px; background: rgba(8,13,29,.83); border: 1px solid rgba(57,243,208,.35); backdrop-filter: blur(13px); }
.song-card span { display: block; color: var(--pink); font: 800 8px Arial; letter-spacing: .22em; }
.song-card strong { display: block; margin-top: 7px; font-size: 13px; letter-spacing: .06em; }
.song-card small { display: block; margin-top: 5px; color: #6f878c; font: 700 7px Arial; letter-spacing: .13em; }
.wave { height: 19px; display: flex; align-items: end; gap: 3px; margin-top: 12px; }
.wave i { width: 3px; height: 5px; background: var(--cyan); animation: wave 1.1s ease-in-out infinite alternate; }
.wave i:nth-child(2n) { animation-delay: -.4s; }.wave i:nth-child(3n) { animation-delay: -.75s; }
@keyframes wave { to { height: 18px; } }
.number-stamp { position: absolute; z-index: 2; right: 5%; bottom: 8%; color: rgba(255,255,255,.07); font-family: Arial; }
.number-stamp small { display: block; font-size: 10px; letter-spacing: .4em; text-align: right; color: var(--pink); }
.number-stamp strong { font-size: 130px; line-height: .8; letter-spacing: -.08em; }
.scroll-cue { position: absolute; left: 28px; bottom: 34px; z-index: 4; writing-mode: vertical-rl; color: #546a70; font: 700 8px Arial; letter-spacing: .28em; }
.scroll-cue span { display: inline-block; height: 50px; width: 1px; background: linear-gradient(var(--cyan), transparent); margin-bottom: 12px; }

.message-section { padding: 120px clamp(24px, 8vw, 145px) 150px; background: #f1f8f6; color: var(--ink); position: relative; overflow: hidden; }
.message-section::after { content: "39"; position: absolute; right: -2vw; bottom: -11vw; font: 900 37vw/.7 Arial; color: rgba(7,10,24,.035); letter-spacing: -.12em; }
.section-label { display: flex; align-items: center; gap: 18px; font: 800 10px Arial; letter-spacing: .26em; color: #687b7e; }
.section-label span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); background: var(--cyan); }
.message-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 10vw; margin-top: 65px; align-items: end; }
.message-layout h2 { margin: 0; font-size: clamp(52px, 6.3vw, 102px); line-height: 1.06; letter-spacing: -.065em; font-weight: 900; }
.message-layout h2 span { color: var(--cyan-deep); }
.message-copy { padding-bottom: 7px; max-width: 490px; }
.message-copy p { margin: 0 0 22px; font-size: 16px; line-height: 2; color: #435256; }
.message-copy strong { color: var(--ink); }
.signature { border-top: 1px solid #bdcfcd; margin-top: 44px; padding-top: 20px; display: flex; justify-content: space-between; font: 800 9px Arial; letter-spacing: .17em; color: #819290; }
.signature strong { color: var(--pink); }

.memories-section { padding: 125px clamp(24px, 6vw, 105px) 150px; background: #080b18; position: relative; overflow: hidden; }
.memories-section::before { content: "MEMORIES"; position: absolute; top: 4%; right: -2%; color: rgba(57,243,208,.035); font: 900 12vw Arial; letter-spacing: -.07em; }
.memories-heading { max-width: 1180px; margin: 0 auto 80px; position: relative; z-index: 1; }
.memories-heading h2 { font-size: clamp(45px, 6vw, 88px); line-height: 1.03; letter-spacing: -.055em; margin: 35px 0 25px; }
.memories-heading > p { color: #81959a; line-height: 1.8; max-width: 610px; }
.memory-stage { max-width: 1230px; margin: auto; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 90px; gap: 18px; position: relative; z-index: 1; }
.memory { margin: 0; position: relative; overflow: hidden; background: #111728; border: 1px solid rgba(57,243,208,.13); }
.memory img, .memory video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s ease, filter .65s ease; }
.memory:hover img, .memory:hover video { transform: scale(1.035); filter: saturate(1.08); }
.memory::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(5,8,18,.92)); pointer-events: none; }
.memory figcaption { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 18px; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.memory figcaption span { color: var(--cyan); font: 800 8px Arial; letter-spacing: .17em; }.memory figcaption strong { font-size: 12px; letter-spacing: .03em; text-align: right; }
.memory-video-main { grid-column: 1 / span 7; grid-row: 1 / span 6; }.memory-sky { grid-column: 8 / span 5; grid-row: 1 / span 4; }.memory-cat { grid-column: 8 / span 5; grid-row: 5 / span 4; }
.memory-video-small { grid-column: 1 / span 5; grid-row: 7 / span 5; }.memory-dog { grid-column: 6 / span 4; grid-row: 9 / span 4; }.memory-cat-room { grid-column: 10 / span 3; grid-row: 9 / span 4; }
.video-toggle { position: absolute; z-index: 4; top: 20px; right: 20px; border: 1px solid rgba(255,255,255,.35); color: white; background: rgba(7,10,24,.66); backdrop-filter: blur(10px); padding: 10px 12px; cursor: pointer; font: 800 8px Arial; letter-spacing: .2em; }
.video-toggle span { color: var(--cyan); margin-left: 7px; }.memory.is-playing .video-toggle span { color: var(--pink); }

.wish-section { padding: 110px clamp(24px, 7vw, 120px); background: linear-gradient(135deg, #080b19, #10192a); }
.wish-panel { max-width: 1230px; margin: auto; min-height: 440px; border: 1px solid var(--line); display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; position: relative; overflow: hidden; background: rgba(255,255,255,.015); }
.wish-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(57,243,208,.04), transparent); pointer-events: none; }
.disc { width: 280px; height: 280px; border: 1px solid rgba(57,243,208,.3); border-radius: 50%; display: grid; place-items: center; margin: auto; background: repeating-radial-gradient(circle, transparent 0 8px, rgba(57,243,208,.08) 9px 10px); animation: spin 18s linear infinite; box-shadow: 0 0 55px rgba(57,243,208,.08); }
.disc::before { content: ""; width: 72px; height: 72px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 14px #111529; }
.disc span { position: absolute; font: 900 17px Arial; color: var(--white); }
.wish-copy { padding: 62px 7vw 62px 3vw; position: relative; z-index: 1; }
.wish-copy h2 { font-size: clamp(35px, 4.1vw, 64px); line-height: 1.12; letter-spacing: -.04em; margin: 25px 0 40px; }
form label { display: block; color: #7f9398; font-size: 11px; margin-bottom: 10px; letter-spacing: .12em; }
.input-row { display: flex; border-bottom: 1px solid #51666b; }
.input-row input { min-width: 0; flex: 1; border: 0; outline: 0; color: white; background: transparent; padding: 15px 0; font-size: 14px; }
.input-row input::placeholder { color: #4f6267; }
.input-row button { color: var(--cyan); border: 0; background: transparent; cursor: pointer; font-weight: 800; font-size: 12px; }
.saved-wish { min-height: 24px; color: #63767b; font-size: 11px; margin: 14px 0 0; }

.pass-section { padding: 125px clamp(24px, 7vw, 120px) 135px; background: var(--cyan); color: var(--ink); position: relative; overflow: hidden; }
.pass-section::before { content: "TICKET"; position: absolute; right: -2vw; top: -2vw; font: 900 17vw Arial; letter-spacing: -.08em; color: rgba(7,10,24,.045); }
.pass-intro { max-width: 1230px; margin: 0 auto 60px; display: grid; grid-template-columns: .55fr 1.45fr; gap: 6vw; position: relative; z-index: 1; }
.pass-section .section-label { color: rgba(7,10,24,.57); }.pass-section .section-label span { color: var(--cyan); background: var(--ink); }
.pass-intro h2 { margin: 0 0 20px; font-size: clamp(44px, 5.5vw, 78px); line-height: 1; letter-spacing: -.055em; }
.pass-intro p { margin: 0; font-size: 14px; color: rgba(7,10,24,.62); }
.birthday-ticket { max-width: 1230px; min-height: 390px; margin: auto; display: grid; grid-template-columns: 1fr 285px; color: var(--white); background: #090d1d; position: relative; z-index: 2; box-shadow: 0 35px 90px rgba(4,12,20,.28); overflow: hidden; transform: perspective(1200px) rotateX(0); transition: transform .35s, box-shadow .35s; }
.birthday-ticket:hover { transform: perspective(1200px) rotateX(1.2deg) translateY(-4px); box-shadow: 0 42px 110px rgba(4,12,20,.34); }
.birthday-ticket::before, .birthday-ticket::after { content: ""; position: absolute; z-index: 4; right: 269px; width: 32px; height: 32px; border-radius: 50%; background: var(--cyan); transform: translateX(50%); }
.birthday-ticket::before { top: -16px; }.birthday-ticket::after { bottom: -16px; }
.ticket-main { padding: 40px 48px 38px; display: flex; flex-direction: column; min-width: 0; background-image: linear-gradient(rgba(57,243,208,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(57,243,208,.035) 1px, transparent 1px); background-size: 44px 44px; }
.ticket-topline { display: flex; justify-content: space-between; align-items: center; gap: 25px; color: #71878c; font: 700 8px Arial; letter-spacing: .2em; }
.ticket-logo { color: var(--white); display: flex; align-items: center; gap: 11px; }.ticket-logo b { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--cyan); font-size: 12px; }
.ticket-title { margin: auto 0 40px; padding-top: 40px; }.ticket-title p { margin: 0 0 5px; color: var(--pink); font: 900 10px Arial; letter-spacing: .38em; }.ticket-title h3 { margin: 0; max-width: 100%; color: var(--cyan); font: 900 clamp(60px, 9vw, 130px)/.84 Arial; letter-spacing: -.07em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ticket-title > span { color: #72888d; font: 800 8px Arial; letter-spacing: .23em; }
.ticket-details { margin: 0; display: grid; grid-template-columns: .8fr .65fr .8fr 1.7fr; gap: 20px; border-top: 1px solid rgba(57,243,208,.22); padding-top: 21px; }
.ticket-details div { min-width: 0; }.ticket-details dt { margin-bottom: 7px; color: #647a80; font: 800 8px Arial; letter-spacing: .21em; }.ticket-details dd { margin: 0; color: var(--white); font: 800 12px Arial; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-stub { border-left: 1px dashed rgba(57,243,208,.32); padding: 32px 28px 28px; display: flex; flex-direction: column; align-items: center; position: relative; background: linear-gradient(160deg, rgba(57,243,208,.07), transparent 60%); }
.stub-label { color: var(--pink); font: 900 8px Arial; letter-spacing: .28em; }.stub-number { margin: 24px 0 17px; color: transparent; -webkit-text-stroke: 1px rgba(57,243,208,.7); font: 900 92px/.8 Arial; letter-spacing: -.08em; }
.barcode { width: 100%; height: 74px; background: repeating-linear-gradient(90deg, var(--white) 0 2px, transparent 2px 5px, var(--white) 5px 6px, transparent 6px 10px, var(--white) 10px 14px, transparent 14px 17px); opacity: .8; }
.ticket-stub small { margin: 8px 0 22px; color: #71868c; font: 700 7px Arial; letter-spacing: .25em; }
.ticket-stub button { margin-top: auto; width: 100%; border: 0; color: var(--ink); background: var(--cyan); padding: 14px 12px; cursor: pointer; font: 900 10px Arial; letter-spacing: .15em; transition: background .2s, transform .2s; }.ticket-stub button:hover { background: #8affea; transform: translateY(-2px); }.ticket-stub button span { color: var(--pink); margin-left: 7px; }
.scan-beam { position: absolute; z-index: 6; left: 0; right: 0; top: -30%; height: 20%; opacity: 0; pointer-events: none; background: linear-gradient(transparent, rgba(255,255,255,.75), transparent); filter: blur(3px); }
.birthday-ticket.is-scanning .scan-beam { opacity: 1; animation: ticket-scan 1.15s ease-in-out 2; }
@keyframes ticket-scan { from { top: -20%; } to { top: 110%; } }
.birthday-ticket.is-accepted { box-shadow: 0 0 0 2px var(--pink), 0 35px 100px rgba(4,12,20,.38), 0 0 60px rgba(255,77,141,.25); }
.pass-status { max-width: 1230px; margin: 22px auto 0; color: rgba(7,10,24,.66); font: 800 8px Arial; letter-spacing: .22em; }.pass-status i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--ink); }
.pass-status.accepted { color: var(--ink); }.pass-status.accepted i { background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.fortune-result { max-width: 1230px; max-height: 0; margin: 0 auto; padding: 0 48px; color: var(--white); background: #f34887; display: grid; grid-template-columns: .55fr 1.45fr auto; align-items: center; gap: 45px; overflow: hidden; opacity: 0; transform: translateY(-18px); transition: max-height .65s cubic-bezier(.2,.8,.2,1), padding .65s cubic-bezier(.2,.8,.2,1), opacity .35s, transform .55s; position: relative; z-index: 1; }
.fortune-result.open { max-height: 240px; padding-top: 34px; padding-bottom: 34px; opacity: 1; transform: translateY(0); }
.fortune-code { border-right: 1px solid rgba(255,255,255,.28); }.fortune-code span { display: block; margin-bottom: 4px; font: 800 8px Arial; letter-spacing: .24em; }.fortune-code strong { font: 900 clamp(45px, 6vw, 76px)/.9 Arial; letter-spacing: -.06em; }
.fortune-message p { margin: 0 0 6px; color: rgba(255,255,255,.68); font: 800 8px Arial; letter-spacing: .22em; }.fortune-message h3 { margin: 0 0 7px; font: 900 clamp(30px, 4vw, 54px)/1 Arial; letter-spacing: -.04em; }.fortune-message > span { font-size: 13px; letter-spacing: .03em; }
.fortune-seal { width: 92px; height: 92px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; display: grid; place-items: center; position: relative; font: 900 42px Arial; }.fortune-seal::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(255,255,255,.45); border-radius: 50%; }.fortune-seal small { position: absolute; bottom: 16px; font-size: 6px; letter-spacing: .24em; }
.ticket-stub button:disabled { cursor: wait; opacity: .58; transform: none; }

footer { min-height: 86px; padding: 25px clamp(24px, 5vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 25px; color: #53696e; font: 700 8px Arial; letter-spacing: .13em; }
footer a { transition: color .2s; } footer a:hover { color: var(--cyan); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 110; transform: translate(-50%, 20px); background: var(--white); color: var(--ink); padding: 13px 20px; font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transition: .25s; box-shadow: 0 10px 50px rgba(0,0,0,.3); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }.topbar p { display: none; }
  .hero { height: auto; min-height: 100svh; grid-template-columns: 1fr; padding: 115px 24px 0; }
  .hero::before { inset: 72px 0 48% 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-copy { align-self: start; }
  .hero h1 { font-size: clamp(59px, 19vw, 105px); width: 115%; }
  .hero-note br { display: none; }
  .status-line { margin-top: 32px; flex-wrap: wrap; }
  .hero-visual { min-height: 570px; height: 67svh; margin-top: 10px; }
  .hero-visual img { height: min(65vh, 620px); max-width: 118%; object-fit: contain; }
  .character-halo { width: 90vw; }
  .song-card { left: 0; bottom: 10%; }.number-stamp { right: 0; }
  .scroll-cue { display: none; }
  .message-layout { grid-template-columns: 1fr; gap: 55px; }.message-copy { max-width: 620px; }
  .memory-stage { grid-template-columns: 1fr 1fr; grid-auto-rows: 300px; }.memory { grid-column: auto !important; grid-row: auto !important; }.memory-video-main, .memory-video-small { grid-column: 1 / -1 !important; }
  .wish-panel { grid-template-columns: 1fr; padding-top: 55px; }.disc { width: 220px; height: 220px; }.wish-copy { padding: 45px 30px 65px; }
  .pass-intro { grid-template-columns: 1fr; gap: 35px; }.birthday-ticket { grid-template-columns: 1fr; }.birthday-ticket::before, .birthday-ticket::after { display: none; }.ticket-stub { border-left: 0; border-top: 1px dashed rgba(57,243,208,.32); display: grid; grid-template-columns: auto 90px 1fr; grid-template-rows: auto auto; gap: 10px 22px; align-items: center; }.stub-number { grid-row: 1 / 3; margin: 0; }.barcode { height: 55px; }.ticket-stub small { margin: 0; }.ticket-stub button { grid-column: 3; margin: 0; }
  .fortune-result { grid-template-columns: .6fr 1.4fr; }.fortune-seal { display: none; }
  footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .brand { font-size: 9px; }.sound-label { display: none; }
  .hero { padding-left: 18px; padding-right: 18px; }
  .hero-cn { margin-top: 22px; }.hero-actions { gap: 18px; align-items: flex-start; flex-direction: column; }
  .hero-visual { min-height: 500px; }.hero-visual img { max-width: 135%; }
  .song-card { width: 185px; }.number-stamp strong { font-size: 90px; }
  .message-section { padding-top: 85px; padding-bottom: 100px; }
  .memories-section { padding-top: 90px; padding-bottom: 100px; }.memory-stage { grid-template-columns: 1fr; grid-auto-rows: 340px; }.memory, .memory-video-main, .memory-video-small { grid-column: 1 !important; }
  .signature { gap: 12px; flex-direction: column; }
  .input-row { align-items: stretch; }.input-row button { max-width: 80px; }
  .encore { padding: 100px 22px; }
  .pass-section { padding: 90px 18px 100px; }.ticket-main { padding: 28px 22px 25px; }.ticket-topline > span:last-child { display: none; }.ticket-title h3 { font-size: 22vw; }.ticket-details { grid-template-columns: 1fr 1fr; }.ticket-stub { grid-template-columns: 78px 1fr; }.stub-number { grid-row: 1 / 4; font-size: 70px; }.stub-label, .barcode, .ticket-stub small, .ticket-stub button { grid-column: 2; }.ticket-stub button { grid-row: auto; }
  .fortune-result { grid-template-columns: 1fr; gap: 18px; padding-left: 24px; padding-right: 24px; }.fortune-result.open { max-height: 330px; }.fortune-code { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 16px; }.fortune-code strong { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .cursor-glow { display: none; }
}