:root{font-family:system-ui,sans-serif;color:#f7f8ff;background:#10131c;--panel:#1b2231;--line:#64718d;--accent:#ffd34d;--focus:#73e8ff;--muted:#c3c9d8}*{box-sizing:border-box}body{margin:0;line-height:1.5}.masthead,.layout,footer{width:min(100% - 2rem,70rem);margin:auto}.masthead{text-align:center;padding:2.5rem 0 1rem}.eyebrow{color:var(--accent);text-transform:uppercase;font-weight:800;letter-spacing:.12em}h1{font-size:clamp(2.2rem,7vw,4.5rem);line-height:1;margin:.2rem 0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(16rem,1fr);gap:1rem}.toolbar,.details{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:clamp(1rem,3vw,2rem)}.controls{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}.controls button,.send,.secondary{font:inherit;font-weight:750;padding:.7rem 1rem;border:2px solid var(--accent);border-radius:.55rem;color:#10131c;background:var(--accent);cursor:pointer}.controls button:not(:last-child){background:transparent;color:var(--accent)}.preview{display:flex;align-items:center;gap:1rem;min-height:6rem;border:2px dashed var(--accent);border-radius:.7rem;padding:1rem;margin:1rem 0}.emoji{font-size:3rem}.preview small{display:block;color:var(--muted)}.reaction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.6rem;margin:1rem 0}.reaction{background:#293247;color:var(--text);border:1px solid var(--line);border-radius:.5rem;padding:.8rem;cursor:pointer;text-align:left}.reaction[aria-selected=true]{outline:3px solid var(--accent);background:#39455f}.reaction .emoji{font-size:1.7rem;display:block}.send{width:100%}.details ul{padding:0;list-style:none}.details li{border-bottom:1px solid var(--line);padding:.7rem 0}.empty{color:var(--muted)}.secondary{background:transparent;color:var(--accent);border-color:var(--line)}button:focus-visible,.reaction:focus-visible,.preview:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.skip-link{position:absolute;left:-9999px;top:.5rem;background:var(--accent);color:#111;padding:.5rem}.skip-link:focus{left:.5rem}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer{text-align:center;color:var(--muted);padding:2rem 0}@media(max-width:700px){.layout{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}