:root { color-scheme: dark; --bg:#231b2b; --surface:#2d2335; --surface-hover:#382b40; --ink:#fff3e9; --muted:#c6b4c8; --pink:#f4abc1; --line:#504052; --serif:Georgia,'Times New Roman',serif; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); background:var(--bg); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; min-height:100svh; background:radial-gradient(ellipse at 50% 0%,#42263855,transparent 65%); }
button,input,select,a { -webkit-tap-highlight-color:transparent; }
button,input,select { font:inherit; }
button { cursor:pointer; color:inherit; touch-action:manipulation; }
button:disabled { cursor:default; }
button,a,input,select { outline-offset:5px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--pink); }
button { -webkit-user-select:none; user-select:none; }
button,a { -webkit-touch-callout:none; }
button:disabled { opacity:.38; }
a { color:inherit; }
.shell { width:min(100%,600px); margin:auto; padding:28px 28px max(22px,env(safe-area-inset-bottom)); }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 30px; }
.wordmark { display:flex; align-items:center; gap:9px; text-decoration:none; font-size:17px; font-weight:600; letter-spacing:-.5px; }
.wordmark span { font-size:29px; color:var(--pink); font-weight:400; }
.for-you { font-family:var(--serif); font-style:italic; font-size:16px; color:var(--muted); }
.progress { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:28px; }
.progress-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.progress-item span { width:23px; height:23px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:12px; }
.progress-item.current { color:var(--ink); }
.progress-item.current span { background:var(--pink); color:var(--bg); border-color:var(--pink); }
.progress-item.complete span { color:var(--pink); border-color:#b87e9355; }
main { min-height:420px; }
.screen { animation:arrive .35s ease both; }
.invite { text-align:center; }
.hero-art { width:218px; height:190px; object-fit:cover; object-position:center 52%; display:block; margin:-14px auto 16px; border-radius:50%; }
.invite .hero-art { width:min(100%,400px); height:auto; aspect-ratio:498 / 280; object-fit:contain; border-radius:18px; margin:0 auto 25px; }
.eyebrow { font-size:12px; letter-spacing:2px; font-weight:600; text-transform:uppercase; color:var(--pink); margin:0 0 15px; }
h1,h2,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-1.5px; line-height:1.12; }
h1 { font-size:clamp(40px,8.8vw,54px); margin-bottom:15px; }
h1 em,h2 em { color:var(--pink); font-weight:400; }
h2 { font-size:clamp(36px,7.7vw,46px); margin-bottom:13px; }
h1:focus,h2:focus { outline:none; }
.intro { font-size:16px; line-height:1.5; color:var(--muted); margin-bottom:26px; }
.playground { position:relative; height:139px; width:min(100%,350px); margin:0 auto; }
.primary { border:1px solid var(--pink); border-radius:13px; background:var(--pink); color:#291c2a; min-height:54px; padding:15px 22px; font-weight:650; font-size:16px; display:flex; align-items:center; justify-content:center; gap:12px; transition:background .2s,transform .2s; }
.primary:hover { background:#ffc4d6; }
.primary:active { transform:scale(.98); }
.yes-button { width:calc(100% - 137px); position:absolute; left:0; top:0; }
.no-button { position:absolute; right:0; top:0; background:transparent; border:0; padding:0; width:116px; height:54px; border-radius:12px; display:grid; place-items:center; transition:top .38s,left .38s; z-index:1; }
.no-button.is-roaming { position:fixed; width:80px; height:48px; z-index:20; transition:none; }
.no-visual { width:116px; height:54px; display:grid; place-items:center; border:1px solid #766077; border-radius:13px; background:var(--surface); transform:scale(var(--no-scale,1)); transition:transform .38s,opacity .2s; pointer-events:none; }
.no-button[data-effect="tilt"] .no-visual { transform:scale(var(--no-scale)) rotate(var(--tilt)); }
.no-button[data-effect="ghost"] .no-visual { opacity:.48; border-style:dashed; }
.no-button[data-effect="round"] .no-visual { border-radius:100%; }
.no-button[data-effect="spin"] .no-visual { animation:spin .7s ease; }
.no-button[data-effect="bounce"] .no-visual { animation:bounce .65s ease; }
.no-button[data-effect="wobble"] .no-visual { animation:wobble .65s ease; }
.no-button[data-effect="flip"] .no-visual { animation:flip .65s ease; }
.no-status { font-size:14px; color:var(--muted); min-height:21px; margin:0 0 8px; }
.back { border:0; background:transparent; display:inline-flex; align-items:center; gap:8px; padding:9px 0; min-height:44px; margin:-10px 0 13px; font-size:14px; color:var(--muted); }
.back:hover { color:var(--ink); }
.activities { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.activity { text-align:left; padding:20px 17px 18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); min-height:156px; transition:border-color .2s,background .2s,transform .2s; }
.activity:hover { background:var(--surface-hover); border-color:var(--pink); transform:translateY(-2px); }
.activity-icon { display:block; width:40px; height:40px; font-size:29px; margin-bottom:18px; line-height:1.2; }
.activity-name { display:block; font-size:16px; font-weight:600; line-height:1.35; margin-bottom:7px; }
.activity-caption { display:block; font-size:14px; color:var(--muted); line-height:1.4; }
.selected-activity { display:inline-flex; gap:9px; align-items:center; border:1px solid var(--line); border-radius:50px; padding:9px 14px; font-size:14px; margin:0 0 23px; color:var(--ink); }
.calendar { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:17px 14px; margin-bottom:22px; }
.calendar-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.calendar-header h3 { margin:0; font-size:17px; font-weight:600; }
.month-arrow { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:24px; display:grid; place-items:center; }
.month-arrow:not(:disabled):hover { background:var(--surface-hover); }
.weekdays,.days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.weekdays span { text-align:center; color:var(--muted); font-size:12px; padding:9px 0; }
.day { border:1px solid transparent; background:transparent; border-radius:11px; min-width:0; width:100%; aspect-ratio:1; padding:0; min-height:37px; font-size:15px; position:relative; }
.day:not(:disabled):hover { background:#594152; }
.day[aria-current="date"]:after { content:''; width:4px; height:4px; position:absolute; bottom:5px; left:calc(50% - 2px); background:var(--pink); border-radius:50%; }
.day[aria-pressed="true"],.day[aria-pressed="true"]:hover { background:var(--pink); color:var(--bg); font-weight:700; }
.day[aria-pressed="true"]:after { background:var(--bg); }
.day:disabled { opacity:.28; }
.time-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 8px; }
.time-row #time-label { font-size:16px; font-weight:500; }
.time-trigger { min-width:148px; max-width:60%; min-height:50px; padding:11px 15px; background:var(--surface); border:1px solid #796279; border-radius:12px; color:var(--ink); font-size:16px; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.time-trigger:hover,.time-trigger[aria-expanded="true"] { border-color:var(--pink); background:var(--surface-hover); }
.time-trigger>span:last-child { color:var(--pink); font-size:20px; }
.time-picker { padding:17px; border:1px solid #796279; border-radius:15px; background:var(--surface); margin:12px 0; }
.time-picker[hidden] { display:none; }
.time-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.time-options label { display:grid; gap:9px; font-size:14px; color:var(--muted); }
.time-options select { min-height:48px; width:100%; min-width:0; padding:9px; border:1px solid #796279; border-radius:9px; background:var(--bg); color:var(--ink); font-size:16px; cursor:pointer; }
.time-done { display:block; margin:16px 0 0 auto; background:var(--pink); color:var(--bg); border:0; border-radius:9px; min-height:44px; padding:10px 24px; font-size:15px; font-weight:600; }
.time-note { font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 20px; }
.full { width:100%; }
.selection-note { color:var(--muted); font-size:14px; text-align:center; margin:13px 0 0; line-height:1.5; }
.error { color:#ffc4d6; font-size:14px; margin:12px 0; }
.event-list { display:grid; gap:16px; }
.event { width:100%; display:grid; grid-template-columns:75px 1fr 20px; gap:18px; align-items:center; border:1px solid var(--line); background:var(--surface); padding:25px 20px; text-align:left; border-radius:17px; position:relative; }
.event:not(:disabled):hover { border-color:var(--pink); background:var(--surface-hover); }
.event-date { text-align:center; padding-right:16px; border-right:1px dashed #82637b; }
.event-month { display:block; color:var(--pink); font-size:12px; font-weight:650; letter-spacing:1px; }
.event-day { display:block; font-family:var(--serif); font-size:40px; line-height:1.1; margin:5px 0; }
.event-year { display:block; font-size:12px; color:var(--muted); }
.event-title { display:block; font-family:var(--serif); font-size:26px; margin-bottom:9px; }
.event-time { display:block; font-size:14px; color:var(--muted); line-height:1.5; }
.event-arrow { font-size:24px; color:var(--pink); }
.events-note { color:var(--muted); font-size:13px; line-height:1.5; margin-top:18px; }
.confirmation { text-align:center; }
.confirmation .hero-art { width:min(100%,180px); height:auto; aspect-ratio:340 / 470; object-fit:contain; object-position:center; border-radius:18px; margin:0 auto 20px; }
.confirmation h2 { font-size:53px; margin-bottom:15px; }
.receipt { text-align:left; border:1px solid #796279; border-radius:19px; background:var(--surface); margin:28px 0 22px; overflow:hidden; }
.receipt-top { padding:23px; border-bottom:1px dashed #796279; display:flex; align-items:center; gap:14px; }
.receipt-icon { font-size:30px; }
.receipt-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--pink); margin-bottom:7px; }
.receipt-title { font-family:var(--serif); font-size:26px; }
.receipt-details { padding:22px 23px; margin:0; display:grid; gap:20px; }
.receipt-details div { display:grid; grid-template-columns:50px 1fr; gap:16px; }
.receipt-details dt { color:var(--muted); font-size:14px; }
.receipt-details dd { margin:0; font-size:16px; line-height:1.4; }
.receipt-details dd small { display:block; color:var(--muted); font-size:13px; margin-top:5px; }
.screenshot-note { font-size:15px; line-height:1.6; color:var(--muted); max-width:300px; margin:0 auto 14px; }
.text-button { background:none; border:0; border-bottom:1px solid #796279; padding:9px 0; color:var(--pink); min-height:44px; font-size:14px; }
.page-footer { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:35px; font-size:12px; color:#b8a2bc; letter-spacing:.3px; }
.page-footer span { color:var(--pink); font-size:18px; }
.noscript { text-align:center; }
@keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { from { transform:scale(var(--no-scale)) rotate(0); } to { transform:scale(var(--no-scale)) rotate(360deg); } }
@keyframes bounce { 0%,100% { transform:scale(var(--no-scale)); } 40% { transform:scale(var(--no-scale)) translateY(-35px); } 70% { transform:scale(var(--no-scale)) translateY(-10px); } }
@keyframes wobble { 0%,100% { transform:scale(var(--no-scale)); } 25% { transform:scale(var(--no-scale)) translateX(-20px); } 75% { transform:scale(var(--no-scale)) translateX(20px); } }
@keyframes flip { 0%,100% { transform:scale(var(--no-scale)) rotateY(0deg); } 50% { transform:scale(var(--no-scale)) rotateY(180deg); } }
@media(min-width:760px) { body { display:flex; align-items:center; padding:25px 0; } .shell { padding:30px 38px; border:1px solid #51405480; border-radius:28px; margin:0 auto; box-shadow:0 24px 100px #110b1c44; } .hero-art { width:230px; height:202px; } }
@media(max-width:370px) { .shell { padding-left:18px; padding-right:18px; } .progress-item { gap:5px; font-size:12px; } .activity { padding:16px 13px; } .calendar { padding:12px 9px; } .event { padding:21px 15px; gap:12px; grid-template-columns:67px 1fr 17px; } .day { min-height:33px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }