:root {
  --ink:#f7f2e8; --muted:#aaa6b4; --night:#090912;
  --panel:#12111e; --red:#ff4d52; --gold:#f4bd50;
  --line:rgba(255,255,255,.12);
}
* { box-sizing:border-box; }
html { background:var(--night); color:var(--ink); font-family:"DM Sans",sans-serif; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 50% 30%,#221529 0,#0c0b15 42%,#07070d 100%); }
button,select,input { font:inherit; }
button,select { color:inherit; }
button { cursor:pointer; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.16; z-index:20; 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='.24'/%3E%3C/svg%3E"); }
.topbar { height:74px; padding:0 clamp(18px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.brand { color:var(--ink); text-decoration:none; font:700 19px "Fraunces",serif; display:flex; align-items:center; gap:10px; }
.hat { font-size:34px; transform:rotate(-10deg); color:var(--gold); }
.header-actions { display:flex; gap:10px; }
.ghost,.text-button { border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:999px; padding:10px 15px; }
main { width:min(1100px,calc(100% - 32px)); margin:auto; }
.intro { text-align:center; padding:70px 0 34px; }
.eyebrow { margin:0 0 12px; font-size:11px; letter-spacing:.22em; font-weight:700; color:var(--gold); }
h1 { margin:0; font:900 clamp(42px,8vw,82px)/.96 "Fraunces",serif; letter-spacing:-.045em; }
h1 em { color:var(--red); font-style:italic; }
.subhead { color:var(--muted); margin:22px auto 0; font-size:clamp(16px,2vw,20px); }
.controls { margin:20px auto 24px; max-width:820px; display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; }
.field label { display:block; color:var(--muted); font-size:12px; margin:0 0 7px 4px; }
select { width:100%; appearance:none; background:#171623; border:1px solid var(--line); border-radius:13px; padding:14px 42px 14px 14px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px; background-size:5px 5px; background-repeat:no-repeat; }
.toggle { height:48px; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; white-space:nowrap; }
.toggle input { position:absolute; opacity:0; }
.toggle span { width:40px; height:23px; background:#333241; border-radius:20px; position:relative; transition:.2s; }
.toggle span:after { content:""; position:absolute; width:17px; height:17px; background:white; border-radius:50%; top:3px; left:3px; transition:.2s; }
.toggle input:checked+span { background:var(--red); }
.toggle input:checked+span:after { left:20px; }
.hat-stage { max-width:820px; margin:auto; position:relative; padding:18px 0 70px; }
.spotlight { position:absolute; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle,rgba(255,236,189,.12),transparent 67%); left:50%; top:-120px; transform:translateX(-50%); pointer-events:none; }
.prompt-card { min-height:310px; padding:clamp(25px,5vw,54px); background:linear-gradient(145deg,#1f1d2c,#12111b); border:1px solid rgba(255,255,255,.15); border-radius:27px; box-shadow:0 30px 90px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.08); display:flex; flex-direction:column; justify-content:space-between; position:relative; transform:rotate(-.6deg); transition:transform .25s,opacity .18s; overflow:hidden; }
.prompt-card:before { content:""; position:absolute; width:190px; height:190px; border:45px solid rgba(244,189,80,.035); border-radius:50%; right:-75px; bottom:-90px; }
.prompt-card.drawing { transform:rotate(1deg) scale(.985); opacity:.25; }
.card-topline,.card-meta { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
#categoryPill { color:var(--gold); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; }
.star { background:transparent; color:var(--gold); border:0; font-size:30px; padding:0 4px; }
#promptText { font:700 clamp(30px,5vw,52px)/1.08 "Fraunces",serif; letter-spacing:-.025em; margin:32px 0; position:relative; z-index:1; }
.card-meta { color:var(--muted); font-size:12px; }
.draw-button { width:min(520px,90%); margin:-25px auto 0; min-height:80px; border:0; border-radius:17px; padding:14px 22px; background:var(--red); box-shadow:0 15px 40px rgba(255,77,82,.27); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; text-align:left; transition:transform .18s,filter .18s; }
.draw-button:hover { filter:brightness(1.08); transform:translateY(-2px); }
.draw-button:active { transform:translateY(1px) scale(.99); }
.button-copy { display:flex; flex-direction:column; }
.button-copy small { font-size:9px; letter-spacing:.22em; opacity:.75; }
.button-copy strong { font:700 24px "Fraunces",serif; }
.arrow { font-size:32px; }
.secondary-actions { display:flex; justify-content:center; gap:8px; margin-top:18px; }
.text-button { color:var(--muted); background:transparent; }
.timer-panel { max-width:820px; margin:0 auto 72px; padding:25px 28px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.035); display:flex; justify-content:space-between; align-items:center; }
.timer { font:700 42px/1 "Fraunces",serif; font-variant-numeric:tabular-nums; }
.timer-buttons { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.timer-buttons button { border:1px solid var(--line); background:#171623; border-radius:11px; padding:10px 13px; }
.timer-buttons button.active { border-color:var(--gold); color:var(--gold); }
.timer-buttons .timer-go { background:var(--gold); color:#17120a; border-color:var(--gold); font-weight:700; min-width:80px; }
.instructions { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); padding:55px 0 80px; gap:35px; }
.instructions article { position:relative; padding-left:55px; }
.instructions span { position:absolute; left:0; top:0; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--gold); font:700 18px "Fraunces",serif; }
h3 { margin:0 0 7px; font:700 22px "Fraunces",serif; }
.instructions p { color:var(--muted); margin:0; line-height:1.5; }
.favorites-panel { max-width:820px; margin:0 auto 70px; padding:30px; border:1px solid var(--line); border-radius:22px; background:#11101b; }
.section-heading { display:flex; justify-content:space-between; align-items:start; }
h2 { font:700 35px "Fraunces",serif; margin:0 0 20px; }
.favorite-item { display:flex; gap:12px; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding:16px 0; }
.favorite-item p { margin:0; }
.favorite-item button { border:0; background:transparent; color:var(--red); }
.empty { color:var(--muted); }
footer { border-top:1px solid var(--line); padding:25px clamp(18px,4vw,64px); display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
kbd { border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:2px 6px; color:var(--ink); }
.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,20px); background:var(--ink); color:var(--night); padding:12px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:.2s; z-index:30; font-weight:700; }
.toast.show { opacity:1; transform:translate(-50%,0); }
body.stage .topbar,body.stage .intro,body.stage .controls,body.stage .timer-panel,body.stage .instructions,body.stage footer,body.stage .secondary-actions { display:none; }
body.stage main { width:100%; }
body.stage .hat-stage { max-width:none; height:100vh; padding:6vh 5vw; display:flex; flex-direction:column; justify-content:center; }
body.stage .prompt-card { min-height:62vh; transform:none; }
body.stage #promptText { font-size:clamp(46px,7vw,100px); }
body.stage .draw-button { margin-top:-28px; }
@media(max-width:700px){
  .spotlight { width:100%; }
  .topbar { height:64px; padding:0 16px; }
  .brand span:last-child { display:none; }
  .intro { padding:45px 0 25px; }
  .controls { grid-template-columns:1fr 1fr; }
  .toggle { grid-column:1/-1; }
  .prompt-card { min-height:345px; padding:28px 24px; border-radius:22px; }
  #promptText { font-size:35px; }
  .timer-panel { align-items:flex-start; gap:20px; }
  .timer-buttons { max-width:210px; }
  .instructions { grid-template-columns:1fr; padding-bottom:50px; }
  footer { justify-content:center; }
  footer span:last-child { display:none; }
}
@media(max-width:440px){
  main { width:min(100% - 22px,1100px); }
  .header-actions .ghost { padding:9px 11px; font-size:12px; }
  .controls { grid-template-columns:1fr; }
  .toggle { grid-column:auto; }
  .prompt-card { min-height:320px; }
  #promptText { font-size:31px; }
  .draw-button { width:94%; }
  .timer-panel { flex-direction:column; }
  .timer-buttons { justify-content:flex-start; max-width:none; }
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}