:root { --ink: #182326; --muted: #6c7778; --paper: #f4f0e8; --cream: #fffdf8; --coral: #ed674e; --yellow: #f5c84c; --line: #d9d4ca; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; }
button { font: inherit; }
.page-shell { min-height: 100vh; max-width: 1180px; margin: 0 auto; padding: 34px 6vw 28px; display: flex; flex-direction: column; }
.topbar, .footer { display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--ink); font: 700 25px "Space Grotesk", sans-serif; letter-spacing: -1.2px; text-decoration: none; }
.brand span { color: var(--coral); }
.date-chip { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(237,103,78,.12); }
.hero { width: min(760px, 100%); margin: auto; padding: 82px 0 100px; }
.eyebrow { color: var(--coral); font-size: 12px; font-weight: 700; letter-spacing: .18em; }
h1 { max-width: 730px; margin: 18px 0 16px; font: 600 clamp(42px, 7vw, 82px)/.98 "Space Grotesk", sans-serif; letter-spacing: -4px; }
.subheading { color: var(--muted); font-size: 17px; margin: 0 0 44px; }
.poll { display: grid; gap: 12px; }
.answer { min-height: 94px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--cream); cursor: pointer; display: grid; grid-template-columns: 42px 1fr 30px; align-items: center; gap: 16px; padding: 18px 24px; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.answer:hover, .answer:focus-visible { border-color: var(--coral); box-shadow: 7px 7px 0 var(--yellow); outline: none; transform: translate(-2px, -2px); }
.answer-letter { color: var(--coral); font: 700 17px "Space Grotesk", sans-serif; }
.answer-text { font-size: 21px; font-weight: 600; }
.answer-arrow { color: var(--coral); font-size: 26px; transition: transform .2s ease; }
.answer:hover .answer-arrow { transform: translate(3px, -3px); }
.results { background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 26px 28px; }
.result-heading, .result-label { display: flex; justify-content: space-between; gap: 16px; }
.result-heading { margin-bottom: 28px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.result-heading span:last-child { color: var(--muted); font-weight: 500; }
.result-row + .result-row { margin-top: 22px; }
.result-label { margin-bottom: 8px; font-size: 15px; }.result-label strong { font-family: "Space Grotesk", sans-serif; }
.bar { overflow: hidden; width: 100%; height: 12px; border-radius: 20px; background: #e8e2d8; }.bar span { display: block; height: 100%; border-radius: inherit; background: var(--coral); transition: width .7s cubic-bezier(.22,1,.36,1); }.result-row:nth-of-type(3) .bar span { background: var(--yellow); }
.thank-you, .state-message { color: var(--muted); font-size: 14px; }.thank-you { margin: 28px 0 0; }.state-message { padding: 25px; border: 1px dashed var(--line); border-radius: 8px; }
.footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 12px; }.footer-mark { color: var(--coral); font: 600 12px "Space Grotesk", sans-serif; }
@media (max-width: 600px) { .page-shell { padding: 24px 20px 22px; }.hero { padding: 74px 0 90px; } h1 { letter-spacing: -2.6px; }.subheading { font-size: 15px; margin-bottom: 32px; }.answer { min-height: 82px; padding: 15px 17px; grid-template-columns: 28px 1fr 24px; gap: 10px; }.answer-text { font-size: 17px; }.results { padding: 22px 18px; } }
[hidden] { display: none !important; }
button:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
a:focus-visible, .secondary:focus-visible, .submit:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.poll-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 22px; }
.secondary, .submit { border: 1px solid var(--line); border-radius: 6px; padding: 12px 17px; background: var(--cream); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; }
.submit { background: var(--ink); color: white; border-color: var(--ink); }
.secondary:hover { border-color: var(--coral); }
.danger { color: #a33524; }
.admin, .archive { width: min(760px, 100%); margin: 65px auto; }
.admin h1, .archive h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -2.5px; line-height: 1.05; }
.admin-form, .question-list, .archive-card { background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 26px; margin: 24px 0; }
.archive-card h2 { font: 600 27px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.8px; margin-bottom: 28px; overflow-wrap: anywhere; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.field input, .field textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 12px; color: var(--ink); background: white; font: inherit; }
.field textarea { min-height: 95px; resize: vertical; }
.question-item { padding: 20px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.question-item:last-child { border: 0; }
.question-item strong { display: block; margin-bottom: 8px; }
.question-item small { color: var(--muted); line-height: 1.6; }
.actions { display: flex; gap: 10px; margin-top: 12px; }
.option-b .bar span { background: var(--yellow); }
.result-label, .answer-text, h1 { overflow-wrap: anywhere; }
.result-label strong { flex-shrink: 0; }
.footer { gap: 18px; flex-wrap: wrap; }
.state-message { line-height: 1.6; }
@media (max-width: 600px) { .topbar { gap: 18px; flex-wrap: wrap; } .admin, .archive { margin: 45px auto; } .archive-card, .admin-form, .question-list { padding: 20px; } .hero { padding-top: 65px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
.share-panel { margin-top: 24px; }
.share-panel .poll-note { display: inline-block; margin: 10px 0 10px 12px; }
#shareStatus { font-size: 14px; color: var(--muted); }
#shareStatus:empty { display: none; }
#shareLink { width: 100%; padding: 12px; font: inherit; border: 1px solid var(--line); border-radius: 6px; }
.today-link { display: inline-block; margin-top: 20px; text-decoration: none; }
.yesterday { width: min(760px, 100%); margin: 0 auto 50px; border-top: 1px solid var(--line); padding-top: 28px; }
.yesterday h2 { font: 600 27px/1.2 'Space Grotesk', sans-serif; margin: 14px 0; overflow-wrap: anywhere; }
.question-link { color: inherit; text-decoration: none; }
.question-link:hover { text-decoration: underline; text-decoration-color: var(--coral); }
@media(max-width: 600px) { .share-panel .poll-note { display: block; margin-left: 0; } }
.reminder-panel { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 24px; }
#reminderStatus { font-size: 14px; line-height: 1.5; color: var(--muted); }