.birthday-page { --birthday-red: #ee2b23; --birthday-paper: #f2efe8; --birthday-muted: #a8a7a1; }
.birthday-page button, .birthday-page textarea { font: inherit; }
.birthday-page button { cursor: pointer; }
.birthday-page button:disabled { cursor: wait; }
.birthday-page [hidden] { display: none !important; }
.birthday-page button:focus-visible, .birthday-page a:focus-visible, .birthday-page textarea:focus-visible { outline: 2px solid #ff756a; outline-offset: 5px; }
.birthday-nav { max-width: 1568px; padding: 24px var(--pad); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.birthday-nav .brand { mix-blend-mode: normal; }
.birthday-nav nav { display: flex; gap: 28px; align-items: center; font-size: 12px; }
.nav-edition { font-size: 10px; letter-spacing: .15em; color: var(--birthday-muted); }
.nav-edition span { color: var(--fg); margin-left: 8px; }
.back-home { color: var(--birthday-muted); }
.back-home:hover { color: var(--fg); }
.birthday-main { max-width: 1568px; padding: 0 var(--pad); margin: auto; }
.birthday-page .eyebrow { margin: 0 0 22px; font-size: 10px; font-weight: 600; letter-spacing: .15em; color: var(--birthday-muted); }
.birthday-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; padding: 80px 0 70px; }
.status-light { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--birthday-red); box-shadow: 0 0 15px #ee2b2370; }
.birthday-page h1 { margin: 0; font-size: clamp(45px, 5.4vw, 88px); letter-spacing: -.06em; line-height: 1.15; font-weight: 900; }
.birthday-page h1 em, .birthday-page h2 em { color: var(--birthday-red); font-style: normal; }
.hero-intro { font-size: clamp(15px, 1.3vw, 19px); color: #bebdb7; line-height: 1.8; margin: 25px 0 28px; }
.birthday-date { display: flex; align-items: center; gap: 22px; margin: 28px 0 34px; }
.birthday-date time { font-size: clamp(44px, 4.2vw, 66px); font-weight: 850; letter-spacing: -.075em; line-height: 1; }
.birthday-date > span { font-size: 12px; line-height: 1.6; }
.birthday-date small { display: block; color: var(--birthday-muted); font-size: 9px; letter-spacing: .11em; margin-top: 7px; }
.birthday-spotlight { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(30px, 4vw, 65px); align-items: center; padding: 68px 0; scroll-margin-top: 24px; }
.birthday-photo { margin: 0; min-width: 0; }
.birthday-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; border: 1px solid #35312c; }
.birthday-photo figcaption { color: #8f8a81; font-size: 10px; margin-top: 12px; }
.birthday-letter { max-width: 500px; }
.birthday-letter > p:not(.eyebrow) { font-size: 14px; color: #bcb7af; line-height: 1.95; margin: 22px 0; }
.birthday-signoff { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #39342e; padding-top: 22px; margin-top: 28px; font-size: 13px; }
.birthday-signoff b { color: var(--red); font-size: 31px; line-height: 1; }
@media (max-width: 960px) {
  .birthday-spotlight { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
  .birthday-letter { max-width: 660px; }
}
@media (max-width: 760px) {
  .birthday-date { gap: 17px; margin: 26px 0; }
  .birthday-date > span { font-size: 11px; }
  .birthday-date small { font-size: 8px; }
}
.text-link { font-size: 12px; display: inline-flex; align-items: center; gap: 27px; border-bottom: 1px solid #555; padding-bottom: 8px; }
.text-link:hover { color: var(--birthday-red); }
.cake-panel { border: 1px solid #33312f; background: radial-gradient(ellipse at 50% 49%, #36201b, #161311 47%, #11100f 80%); padding: 22px 26px 23px; min-width: 0; position: relative; }
.panel-topline { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; letter-spacing: .12em; color: var(--birthday-muted); }
.live-label { color: #e0d5c7; }
.cake-stage { position: relative; height: 300px; width: min(100%, 400px); margin: 0 auto; }
.cake-orbit { position: absolute; border: 1px solid #50423a; border-radius: 50%; left: 50%; top: 49%; transform: translate(-50%, -50%); width: 265px; height: 265px; opacity: .35; }
.orbit-two { width: 322px; height: 322px; border-style: dashed; opacity: .2; }
.cake-spark { position: absolute; color: #ff9484; font-size: 25px; }
.spark-one { top: 70px; left: 12%; transform: rotate(15deg); }
.spark-two { top: 115px; right: 9%; font-size: 17px; transform: rotate(-10deg); }
.cake-candles { position: absolute; z-index: 3; display: flex; justify-content: center; gap: 2px; top: 55px; left: 50%; transform: translateX(-50%); }
.candle { width: 44px; height: 97px; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; touch-action: manipulation; }
.candle:nth-child(2), .candle:nth-child(4) { transform: translateY(-9px); }
.candle:nth-child(3) { transform: translateY(-17px); }
.candle-stick { width: 10px; height: 44px; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(135deg, #fff2df 0 5px, #ee5441 5px 10px); box-shadow: 2px 0 5px #0006; }
.flame { width: 12px; height: 23px; margin-bottom: 5px; border-radius: 65% 35% 65% 35%; background: linear-gradient(#fff8d9 0, #ffd479 50%, #ee6041 100%); transform-origin: center bottom; box-shadow: 0 0 13px #ffac5866, 0 0 28px #ec724a44; animation: candle-flicker 2.2s ease-in-out infinite alternate; transition: opacity .2s; }
.candle:nth-child(2n) .flame { animation-delay: -.8s; }
.candle:hover .flame { box-shadow: 0 0 18px #ffc36daa; }
.candle.is-out .flame { opacity: 0; animation: none; }
.cake-icing { position: absolute; width: 242px; height: 62px; left: 50%; top: 127px; transform: translateX(-50%); background: #fcdfbd; border-radius: 50%; box-shadow: inset 0 -7px 0 #c89874; z-index: 2; }
.cake-icing::after { content: ''; position: absolute; inset: 10px 16px; border-radius: 50%; border: 1px dashed #b7745580; }
.cake-body { position: absolute; width: 242px; height: 101px; top: 156px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #881f18, #e24b35 25%, #c33225 67%, #8d211b); border-radius: 0 0 50% 50% / 0 0 25% 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 16px; border-bottom: 7px solid #66211a; box-shadow: 0 13px 30px #0007; }
.cake-body > span { font-size: 27px; font-weight: 900; letter-spacing: .18em; color: #ffe1c1; text-shadow: 0 1px #893120; }
.cake-body > small { font-size: 7px; letter-spacing: .17em; color: #ffe1c1b3; margin-top: 3px; }
.cake-base { position: absolute; width: 294px; height: 38px; left: 50%; top: 239px; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(#c2b9a5, #776d5c); z-index: 0; box-shadow: 0 5px 0 #504a42; }
.cake-body { z-index: 1; }
.cake-caption { min-height: 38px; margin: 0 0 14px; text-align: center; font-size: 12px; line-height: 1.6; color: #c2b9ad; }
.birthday-button { border: 1px solid #4c4c47; background: transparent; color: var(--fg); min-height: 48px; padding: 13px 20px; display: inline-flex; gap: 24px; align-items: center; justify-content: space-between; font-size: 12px !important; font-weight: 600 !important; transition: background .18s, border-color .18s, transform .18s; }
.birthday-button:hover { background: #252321; border-color: var(--fg); transform: translateY(-1px); }
.red-button { background: var(--birthday-red); color: #fff; border-color: var(--birthday-red); }
.red-button:hover { background: #ff493c; border-color: #ff493c; }
.cake-panel > .birthday-button { width: 100%; }
.quiet-button { background: none; color: var(--birthday-muted); font-size: 11px !important; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; min-height: 36px; }
.quiet-button:hover { color: var(--fg); }
.cake-panel > .quiet-button { display: block; margin: 4px auto -7px; }
.off-duty-strip { border-top: 1px solid #353431; border-bottom: 1px solid #353431; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 18px 0; font-size: 11px; color: var(--birthday-muted); }
.off-duty-strip > span:first-child { color: var(--fg); }
.off-duty-strip > span:last-child { font-size: 9px; letter-spacing: .12em; }
.off-duty-strip i { display: inline-block; width: 5px; height: 5px; margin-right: 9px; background: var(--birthday-red); }
.section-heading { display: flex; gap: 32px; align-items: end; justify-content: space-between; margin-bottom: 32px; }
.birthday-page h2 { margin: 0; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.3; letter-spacing: -.045em; }
.birthday-page h2 em { display: inline; }
.section-heading .eyebrow, .play-panel .eyebrow, .wish-panel .eyebrow, .birthday-outro .eyebrow { margin-bottom: 15px; }
.section-heading > p { margin: 0 0 2px; color: var(--birthday-muted); font-size: 12px; line-height: 1.75; }
.letter-kicker { font-size: 9px; font-weight: 600; letter-spacing: .13em; color: #766c5e; }
.play-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.play-panel { padding: 31px; border: 1px solid #34342f; min-width: 0; background: #111110; }
.play-panel h2 { font-size: clamp(25px, 2.35vw, 35px); }
.panel-intro { color: var(--birthday-muted); margin: 14px 0 21px; font-size: 12px; line-height: 1.8; }
.worry-picker { display: flex; gap: 7px; flex-wrap: wrap; }
.worry-chip { border: 1px solid #48483f; background: transparent; color: #b6b5ac; padding: 9px 10px; font-size: 10px !important; min-height: 36px; }
.worry-chip:hover { border-color: #b6b5ac; }
.worry-chip.is-selected { background: var(--birthday-paper); border-color: var(--birthday-paper); color: #25231e; }
.yeet-zone { display: flex; align-items: center; justify-content: center; position: relative; min-height: 226px; width: 100%; background: radial-gradient(circle at center, #ffffff06 1px, transparent 1px); background-size: 15px 15px; border: 0; overflow: hidden; margin-top: 10px; }
.yeet-crosshair { font-size: 195px; line-height: 1; font-weight: 100; position: absolute; color: #30302a; }
.worry-paper { display: flex; justify-content: center; align-items: center; width: 108px; height: 111px; padding: 14px; background: #e6dcba; color: #322a20; font-size: 21px; font-weight: 700; line-height: 1.3; transform: rotate(-9deg); box-shadow: 7px 9px 0 #0006; white-space: pre-line; transition: transform .2s; }
.worry-paper::after { content: ''; position: absolute; height: 7px; width: 40px; top: -3px; left: 34px; transform: rotate(8deg); background: #cdb79690; }
.yeet-zone:hover .worry-paper { transform: rotate(-3deg) translateY(-4px); }
.yeet-zone.is-throwing .worry-paper { animation: yeet .65s ease-in forwards; }
.yeet-instruction { position: absolute; bottom: 9px; left: 0; right: 0; font-size: 10px; color: #aaa99e; }
.interaction-status { margin: 14px 0 0; min-height: 34px; font-size: 11px; line-height: 1.7; color: var(--birthday-muted); }
.permission-card { background: #eee9df; min-height: 239px; padding: 27px 29px; color: #27241e; position: relative; margin-top: 26px; transform: rotate(1deg); border-bottom: 6px solid #c9c2b2; }
.permission-seal { position: absolute; right: 23px; top: 23px; border: 1px solid #c64632; color: #c64632; padding: 5px; font-size: 17px; transform: rotate(13deg); }
.permission-card h3 { margin: 21px 0 15px; font-size: clamp(26px, 2.5vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.045em; max-width: 88%; white-space: pre-line; }
.permission-card p { margin: 0; font-size: 11px; color: #726a5e; max-width: 90%; }
.permission-panel > .birthday-button { margin-top: 27px; width: 100%; }
.wish-panel { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(35px, 7vw, 120px); padding: 75px 0; border-bottom: 1px solid #34342f; }
.wish-copy > p:not(.eyebrow) { color: var(--birthday-muted); margin: 23px 0 26px; font-size: 13px; line-height: 1.85; }
.wish-copy h2 em { display: block; }
.privacy-note { font-size: 10px; color: #93938a; display: block; max-width: 300px; line-height: 1.8; padding-left: 12px; border-left: 2px solid #4e4b40; }
.wish-form { align-self: center; }
.wish-form label { display: block; font-size: 12px; margin-bottom: 13px; }
.wish-form textarea { width: 100%; color: var(--fg); background: #141411; border: 1px solid #45453e; border-radius: 0; padding: 17px; line-height: 1.8; font-size: 14px; resize: vertical; min-height: 190px; max-height: 600px; }
.wish-form textarea::placeholder { color: #838278; }
.wish-count { text-align: right; margin: 6px 0 16px; font-size: 10px; color: #8f8e83; font-variant-numeric: tabular-nums; }
.wish-actions { display: flex; align-items: center; gap: 25px; }
.birthday-outro { display: grid; grid-template-columns: 1fr 1fr; padding: 65px 0 80px; gap: 90px; align-items: center; }
.birthday-outro h2 { font-size: clamp(28px, 2.8vw, 42px); }
.fight-cta { margin-top: 26px; min-width: 217px; }
.social-block > p { font-size: 12px; color: #b0afa6; margin: 0 0 17px; }
.social-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #34342f; padding: 20px 0; font-size: 18px; letter-spacing: -.04em; }
.social-row small { color: #96958c; margin-left: 8px; font-size: 10px; letter-spacing: 0; }
a.social-row:hover { color: var(--birthday-red); }
.social-row.is-disabled, .social-row.is-disabled small { color: #68685f; }
.birthday-footer { border-top: 1px solid #34342f; max-width: 1568px; padding: 26px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: auto; color: #a6a59b; font-size: 10px; }
.birthday-footer .brand { color: var(--fg); mix-blend-mode: normal; font-size: 12px; }
.birthday-footer > span:last-child { font-size: 8px; letter-spacing: .13em; }
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confetti-bit { position: absolute; left: var(--left); top: -15px; background: var(--color); width: 7px; height: 12px; animation: confetti-fall var(--duration) var(--delay) ease-out forwards; }
.no-script-note { padding: 20px var(--pad); background: #2b201a; font-size: 13px; }
@keyframes candle-flicker { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(6deg) scale(.9, 1.05); } }
@keyframes yeet { 20% { transform: rotate(-17deg) translate(-12px, 10px) scale(.92); } 100% { transform: rotate(280deg) translate(170px, -370px) scale(.1); opacity: 0; } }
@keyframes confetti-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--rotation)); opacity: 0; } }
@media (min-width: 1500px) { .birthday-hero { padding-top: 96px; padding-bottom: 92px; } .cake-stage { height: 326px; } }
@media (max-width: 1050px) { .birthday-hero { gap: 35px; padding: 55px 0; } .cake-panel { padding: 18px; } .play-panel { padding: 24px; } .birthday-outro { gap: 50px; } }
@media (max-width: 760px) { .nav-edition { display: none; } .birthday-nav { padding-top: 19px; padding-bottom: 19px; } .birthday-nav nav { gap: 18px; } .birthday-hero { grid-template-columns: 1fr; gap: 34px; padding-top: 41px; } .birthday-page h1 { font-size: clamp(43px, 9.4vw, 70px); } .hero-intro { margin-top: 20px; font-size: 15px; } .cake-panel { width: 100%; } .cake-stage { height: 292px; } .off-duty-strip { flex-wrap: wrap; gap: 10px; font-size: 10px; } .off-duty-strip > span:last-child { display: none; } .section-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 18px; } .play-grid { grid-template-columns: 1fr; gap: 18px; } .play-panel { padding: 25px; } .permission-card { min-height: 225px; } .permission-card h3 { font-size: 32px; } .wish-panel { grid-template-columns: 1fr; padding: 49px 0; gap: 31px; } .wish-copy h2 { font-size: 33px; } .wish-copy > p:not(.eyebrow) { margin: 17px 0 20px; } .privacy-note { max-width: 400px; } .birthday-outro { grid-template-columns: 1fr; gap: 43px; padding: 47px 0; } .birthday-footer { flex-wrap: wrap; gap: 16px; } .birthday-footer > span:last-child { display: none; } }
@media (max-width: 390px) { .birthday-nav nav { gap: 12px; } .back-home { font-size: 10px; } .birthday-nav .brand { font-size: 12px; } .play-panel { padding: 20px; } .worry-chip { padding: 9px; } .wish-actions { gap: 16px; } .cake-orbit.orbit-two { width: 275px; height: 275px; } .cake-icing, .cake-body { width: 216px; } .cake-base { width: 257px; } }
@media (max-width: 760px) { .wish-form textarea { font-size: 16px; } }
@media (pointer: coarse) { .worry-chip, .quiet-button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .birthday-page *, .birthday-page *::before, .birthday-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .confetti-layer { display: none; } .yeet-zone.is-throwing .worry-paper { opacity: 0; } }