:root { color-scheme:dark; --ink:#080d19; --panel:#121b2a; --cream:#f4e4bf; --gold:#edc16a; --muted:#aab4c7; --teal:#67d7c7; }
* { box-sizing:border-box; }
body { margin:0; background:#080b12; color:#f5f4ef; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:1920px; margin:auto; padding:20px; }
button,select { font:inherit; border-radius:8px; padding:11px 14px; }
button { border:1px solid var(--gold); background:var(--gold); color:#17130c; font-weight:750; cursor:pointer; }
select { border:1px solid #465166; background:#141b29; color:#f5f4ef; max-width:100%; }
button:disabled,select:disabled { opacity:.55; cursor:wait; }
button:focus-visible,select:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
.preview-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.preview-tag { color:var(--teal); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; }
.preview-tools p { margin:5px 0 0; font-size:14px; color:var(--muted); }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.controls label { color:var(--muted); font-size:14px; }
.fallback-control { display:flex; align-items:center; gap:6px; }
.broadcast-frame { container-type:inline-size; width:min(100%,calc((100vh - 165px) * 16 / 9)); margin:auto; aspect-ratio:16/9; display:grid; grid-template-rows:auto minmax(0,1fr) auto; border:1px solid #30384b; border-top:3px solid var(--gold); overflow:hidden; border-radius:14px; background:radial-gradient(ellipse at 28% 40%,#222340 0,transparent 62%),#0c1220; box-shadow:0 24px 70px #0005; }
.broadcast-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:1.2cqw 2.8cqw; border-bottom:1px solid #ffffff12; }
.broadcast-title { grid-column:2; min-width:0; text-align:center; }
.loteria-logo { display:block; width:19cqw; max-width:365px; height:auto; margin:auto; }
.broadcast-title small { display:block; color:var(--muted); font-size:clamp(10px,.85cqw,16px); margin-top:5px; letter-spacing:.09em; }
.demo-badge { justify-self:end; font-size:clamp(10px,.85cqw,16px); text-transform:uppercase; letter-spacing:.09em; color:var(--gold); border:1px solid #edc16a45; padding:9px 12px; border-radius:30px; white-space:nowrap; }
.broadcast-content { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,24%); gap:2.4cqw; padding:2cqw 2.8cqw; }
.card-stage { min-width:0; position:relative; display:grid; align-items:center; }
.card-composition { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:3.1cqw; }
.illustrated-card { width:24cqw; justify-self:center; margin:0; padding:.7cqw; background:var(--cream); border-radius:9px; color:#222437; box-shadow:0 18px 36px #0005,inset 0 0 0 1px #fff8; transform:rotate(-2deg); }
.card-topline { display:none; }
.card-topline>span:first-child { font-weight:850; }
.card-topline>span:last-child { font-family:Georgia,serif; font-style:italic; }
.art-window { position:relative; aspect-ratio:737/1098; overflow:hidden; background:#121e39; border:1px solid #19224433; }
.art-window img { display:block; width:100%; height:100%; object-fit:contain; }
.illustrated-card figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.card-copy { min-width:0; padding-right:.5cqw; }
.eyebrow { margin:0 0 1.3cqw; font-size:clamp(10px,.88cqw,17px); font-weight:800; text-transform:uppercase; letter-spacing:.13em; color:var(--teal); }
.call-number { margin:0; color:var(--gold); font-weight:850; line-height:.95; font-size:7.6cqw; letter-spacing:-.06em; }
.card-copy h1 { margin:1.2cqw 0 .7cqw; font:500 5.25cqw/1.03 Georgia,serif; letter-spacing:-.04em; overflow-wrap:break-word; }
.translation { margin:0; color:var(--cream); font-size:1.75cqw; letter-spacing:.01em; }
.copy-divider { width:4cqw; height:2px; background:var(--gold); margin:2.3cqw 0 1.6cqw; }
.card-instruction { font-size:1.3cqw; line-height:1.5; max-width:19ch; margin:0; }
.persistent-note { display:block; font-size:.86cqw; color:var(--muted); line-height:1.6; margin-top:.8cqw; }
.side-panels { display:flex; flex-direction:column; gap:1.25cqw; min-width:0; }
.info-panel { background:#121b2ab3; border:1px solid #ffffff14; border-radius:12px; padding:1.4cqw; }
.sample-label { float:right; color:var(--muted); font-size:.75em; font-weight:500; }
.recent-list { list-style:none; padding:0; margin:0; display:grid; gap:.7cqw; }
.recent-list li { display:flex; align-items:center; gap:.9cqw; color:#c0c9d8; font-size:1.12cqw; }
.recent-list li>span { width:2.5cqw; height:2.5cqw; display:grid; place-items:center; border:1px solid #ffffff14; border-radius:7px; font-size:1.2cqw; font-weight:800; }
.recent-list .current { color:var(--cream); font-weight:750; }
.recent-list .current>span { color:#14131b; background:var(--gold); border-color:var(--gold); }
.instructions h2 { font:500 1.95cqw Georgia,serif; margin:0 0 .7cqw; }
.instructions p:not(.eyebrow) { color:#c0c9d8; font-size:1cqw; line-height:1.5; margin:.8cqw 0; }
.instructions code { display:inline-block; color:var(--cream); font-size:1.35cqw; padding-top:.35cqw; }
.instructions small { display:block; font-size:.78cqw; color:var(--muted); line-height:1.5; }
.collection-note { display:none; }
.note-rule { display:block; width:2.7cqw; height:2px; background:#edc16a88; }
.collection-note p { font:italic 1.7cqw/1.3 Georgia,serif; color:var(--cream); margin:.8cqw 0; }
.collection-note small { font-size:.77cqw; color:var(--muted); line-height:1.4; }
.broadcast-footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #ffffff12; padding:1.15cqw 2.8cqw; color:var(--muted); font-size:.9cqw; }
.broadcast-footer>span:first-child { color:var(--cream); }
.preview-footnote { font-size:13px; line-height:1.6; color:var(--muted); text-align:center; margin:18px auto 0; }
.art-fallback { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; color:var(--cream); text-align:center; }
.art-fallback>span { font-size:8cqw; font-weight:850; }
.art-fallback small { font-size:1cqw; line-height:1.5; max-width:18ch; }
.wheel-stage { height:100%; min-height:0; position:relative; display:grid; place-items:center; }
.wheel-stage canvas { width:32cqw; height:32cqw; max-width:100%; }
.wheel-pointer { position:absolute; width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-bottom:22px solid var(--gold); }
.wheel-stage p { color:var(--cream); text-align:center; font:500 1.8cqw Georgia,serif; margin:.4cqw 0; }
.card-composition.reveal { animation:card-reveal .65s cubic-bezier(.2,.7,.25,1) both; }
@keyframes card-reveal { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
[hidden] { display:none!important; }
@media (prefers-reduced-motion:reduce) { .card-composition.reveal { animation:none; } .illustrated-card { transform:none; } }
@media (max-width:760px) {
  main { padding:12px; }
  .preview-tools { align-items:stretch; }
  .broadcast-frame { width:100%; aspect-ratio:auto; display:block; }
  .controls { width:100%; }
  .controls select { flex:1; min-width:0; }
  .broadcast-header { gap:10px; padding:18px 12px; }
  .broadcast-title small { display:none; }
  .demo-badge { font-size:9px; padding:6px 8px; letter-spacing:0; }
  .loteria-logo { width:26cqw; }
  .broadcast-content { display:block; padding:25px 20px; }
  .card-composition { gap:6cqw; }
  .illustrated-card { width:100%; padding:2cqw; }
  .card-topline { font-size:3cqw; padding-bottom:1.3cqw; }
  .illustrated-card figcaption { font-size:3.5cqw; padding:2cqw 0 .5cqw; }
  .eyebrow { font-size:10px; margin-bottom:12px; }
  .call-number { font-size:14cqw; }
  .card-copy h1 { font-size:8cqw; margin:3cqw 0 2cqw; }
  .translation { font-size:4cqw; }
  .copy-divider { margin:4cqw 0 3cqw; width:9cqw; }
  .card-instruction { font-size:3.3cqw; }
  .persistent-note { font-size:2.6cqw; margin-top:2cqw; }
  .side-panels { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .info-panel { padding:14px; }
  .recent-list { gap:9px; }
  .recent-list li { font-size:12px; gap:8px; }
  .recent-list li>span { width:30px; height:30px; font-size:14px; flex-shrink:0; }
  .instructions h2 { font-size:21px; }
  .instructions p:not(.eyebrow) { font-size:12px; margin:10px 0; }
  .instructions code { font-size:15px; }
  .instructions small { font-size:10px; }
  .collection-note { display:none; }
  .broadcast-footer { padding:14px 20px; font-size:10px; flex-wrap:wrap; }
  .art-fallback>span { font-size:14cqw; }
  .art-fallback small { font-size:3cqw; }
  .wheel-stage { min-height:66cqw; }
  .wheel-stage canvas { width:60cqw; height:60cqw; }
  .wheel-stage p { font-size:4cqw; }
}