@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,600&display=swap');

:root { --ink:#26332f; --coral:#db735b; --cream:#fffaf2; --sage:#769587; --line:#ded8cb; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");}
main { width:min(1080px,calc(100% - 32px)); margin:auto; }
.hero { text-align:center; padding:70px 16px 38px; position:relative; }
.eyebrow,.step { letter-spacing:.18em; font-size:12px; font-weight:700; color:var(--sage); }
.illustration { height:58px; color:var(--coral); font-size:48px; line-height:1; margin:20px 0 4px; }
.star { font-size:15px; position:relative; }.star.one{top:-24px;left:-17px}.star.two{top:-8px;right:-15px}
h1,h2 { font-family:"Fraunces",serif; margin:0; font-weight:600; }
h1 { font-size:clamp(44px,7vw,76px); line-height:.98; letter-spacing:-.04em; }
h1 em { color:var(--coral); }
.intro { max-width:570px; margin:24px auto; font-size:17px; line-height:1.65; color:#63706b; }
.countdown { display:inline-flex; gap:12px; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 4px; font-size:11px; letter-spacing:.13em; }
.countdown strong { color:var(--coral); font-size:12px; }
.card { position:relative; max-width:650px; margin:25px auto 80px; background:#fffefa; border:1px solid var(--line); border-radius:4px; padding:40px 48px 34px; box-shadow:0 18px 60px #5b443311; }
.card::before,.card::after { content:"✦"; position:absolute; color:#eab6a9; font-size:12px; }.card::before{top:18px;left:20px}.card::after{right:20px;bottom:18px}
.card .step { text-align:center; margin:0 0 30px; }
label { display:block; font-size:13px; font-weight:700; margin:20px 0 8px; }
input { width:100%; appearance:none; padding:15px 16px; border:1px solid #d8d4ca; border-radius:3px; background:#fff; color:var(--ink); font:inherit; outline:none; }
input:focus { border-color:var(--sage); box-shadow:0 0 0 3px #76958720; }
.date-picker { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:10px; border:1px solid #e2ddd3; border-radius:8px; background:#faf6ee; }
.date-option { position:relative; min-width:0; min-height:62px; margin:0; padding:8px 3px; border:1px solid transparent; border-radius:7px; background:#fffefa; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-shadow:none; }
.date-option:hover { background:#f9e7df; color:var(--ink); transform:none; }
.date-option span { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#929991; }
.date-option strong { font:600 18px "Fraunces",serif; }
.date-option small { position:absolute; bottom:3px; font-size:7px; font-weight:700; letter-spacing:.09em; }
.date-option.due-week { background:#fdf0eb; }
.date-option.due-date { background:var(--coral); color:#fff; border-color:var(--coral); }
.date-option.due-date span { color:#fff9; }
.date-option.selected { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); }
.selected-date { min-height:20px; margin:10px 0 0; text-align:center; color:var(--coral); font:600 15px "Fraunces",serif; }
button { border:0; width:100%; margin-top:24px; padding:16px 19px; background:var(--ink); color:white; display:flex; justify-content:space-between; font:600 15px "DM Sans"; cursor:pointer; transition:.2s; }
button:hover { background:var(--coral); transform:translateY(-1px); } button:disabled{opacity:.6;cursor:wait}
.fine-print,.status { text-align:center; font-size:12px; color:#929991; }.status { color:#b74f3b; min-height:18px; }
.success{text-align:center;padding:25px 0}.success .seal{margin:auto;background:var(--sage);color:white;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;font-size:24px}.success h2{font-size:34px;margin:16px}.success p{color:#68716d}
.guesses { max-width:900px; margin:0 auto 80px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); padding-bottom:18px; }
.section-heading .step{margin:0 0 8px}.section-heading h2{font-size:36px}.total{font-size:13px;color:#78817c}
.calendar { margin-top:24px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.day-name { min-width:0; font-size:10px; letter-spacing:.12em; color:#929b96; text-align:center; padding:8px; }
.day { min-width:0; min-height:82px; border:1px solid #e2ddd3; background:#fffdfa; padding:9px; font-size:13px; }
.day.empty { background:transparent;border-color:transparent}.day.past{opacity:.35}.day.has-guesses{background:#edf3ef;border-color:#adc1b7}
.day.interactive{position:relative;cursor:pointer}.day.interactive:focus-visible,.day.selected-day{outline:2px solid var(--sage);outline-offset:2px}.name-preview{display:block;max-width:100%;margin-top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#537365;font-size:10px;font-weight:600}.more-count{position:absolute;right:5px;bottom:5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--sage);color:white;font-size:9px;font-weight:700}
.legend{text-align:center;margin-top:18px;font-size:11px;color:#858d88}.legend i{display:inline-block;width:8px;height:8px;background:#adc1b7;border-radius:50%;margin-right:5px}
.day-details{max-width:650px;margin:24px auto 0;padding:20px 22px;border:1px solid #adc1b7;background:#edf3ef}.day-details strong{display:block;margin-bottom:12px;font:600 19px "Fraunces",serif}.day-detail-names{display:flex;flex-wrap:wrap;gap:8px}.day-detail-names span{padding:7px 10px;border-radius:20px;background:#fffefa;color:#405a4f;font-size:13px;font-weight:600}
.prediction-list{max-width:650px;margin:42px auto 0}.prediction-list h3{margin:0 0 10px;font:600 24px "Fraunces",serif}.prediction-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}.prediction-name{min-width:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}.prediction-row time{flex:none;text-align:right;color:#78817c;font-size:12px}
footer{text-align:center;border-top:1px solid var(--line);padding:28px;color:#8a918d;font-size:12px}footer span{color:var(--coral)}
@media(max-width:600px){.hero{padding-top:42px}.card{padding:32px 16px;margin-bottom:60px}.date-picker{gap:4px;padding:7px}.date-option{min-height:56px}.day{min-height:60px;padding:6px}.name-preview{margin-top:6px;font-size:8px}.more-count{right:3px;bottom:3px;min-width:17px;height:17px;font-size:8px}.section-heading h2{font-size:28px}.prediction-row{align-items:flex-start;gap:12px}.prediction-row time{max-width:45%;font-size:11px}}