@import url("fonts.css");
@import url("tokens.css");
:root{
  /* The player's own names for the site's tokens (see tokens.css). Scenes were authored against these names. */
  --ink:var(--bg-secondary); --deep:var(--bg-primary); --panel:var(--bg-primary); --line:var(--border-light);
  --text:var(--text-primary); --muted:var(--text-secondary); --teal:var(--accent); --amber:var(--accent); --coral:var(--error);
  /* The mock website in the scenes is a picture of a page, so it stays a light page in both themes. */
  --paper:#ffffff; --paper-ink:#1a222b;
  --body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
  --display:var(--body);
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,"Cascadia Mono",Menlo,monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg-primary);color:var(--text-primary);font-family:var(--body);line-height:1.5}
.wrap{max-width:1280px;margin:0 auto;padding:16px}
h1.page{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.4vw,1.75rem);margin:.25rem 0 .75rem;letter-spacing:-.01em}
.page-sub{color:var(--muted);margin:0 0 1rem;max-width:70ch}

/* ---------- stage ---------- */
.stage{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);border:1px solid var(--border-light);border-radius:8px;overflow:hidden;container-type:inline-size}
.scene{position:absolute;inset:0;padding:5cqi 6cqi 11cqi;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.scene.active{opacity:1;visibility:visible;transition:opacity .6s ease}
[data-s]{opacity:0;transform:translateY(1.2cqi);transition:opacity .5s ease,transform .5s ease}
[data-s].on{opacity:1;transform:none}

.brand{position:absolute;left:3cqi;top:2.6cqi;display:flex;align-items:center;gap:.9cqi;font-family:var(--display);font-weight:800;font-size:1.7cqi;color:var(--text);z-index:3}
.brand .mark{display:inline-grid;place-items:center;width:3cqi;height:3cqi;border-radius:4px;background:var(--accent);color:var(--bg-primary);font-size:2cqi}
.ep{position:absolute;right:3cqi;top:2.6cqi;font-size:1.5cqi;color:var(--muted);z-index:3}

/* title */
.s-title{display:flex;flex-direction:column;justify-content:center}
.s-title .big{font-family:var(--display);font-weight:800;font-size:8.2cqi;line-height:.98;letter-spacing:-.025em;margin:0;max-width:16ch}
.s-title .big span{display:block}
.s-title .sub{font-size:2.3cqi;color:var(--muted);margin-top:2.4cqi;max-width:48ch}
.langs{position:absolute;right:6cqi;bottom:13cqi;display:flex;flex-direction:column;align-items:flex-end;gap:1cqi;font-size:2.4cqi}
.langs span{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.5cqi 1.6cqi}
.langs span:nth-child(2){margin-right:4cqi}
.langs span:nth-child(3){margin-right:1.5cqi}

/* presenter lower third */
.lower{position:absolute;left:6cqi;bottom:12cqi;border-left:.5cqi solid var(--accent);padding:.6cqi 0 .6cqi 1.6cqi}
.lower .nm{display:block;font-family:var(--display);font-weight:800;font-size:2.6cqi;line-height:1.1}
.lower .tt{display:block;font-size:1.7cqi;color:var(--muted)}

/* stat */
.s-stat{display:grid;grid-template-columns:auto 1fr;gap:4cqi;align-items:center}
.stat-num{font-family:var(--display);font-weight:800;font-size:17cqi;line-height:1;color:var(--accent);letter-spacing:-.03em}
.stat-num small{font-size:.45em}
.stat-text h2{font-family:var(--display);font-size:3.6cqi;line-height:1.1;margin:0 0 1.6cqi}
.stat-text p{font-size:2.2cqi;color:var(--muted);margin:0 0 1.2cqi;max-width:40ch}
.six{display:flex;flex-wrap:wrap;gap:.8cqi;margin-top:1.6cqi;font-size:1.5cqi}
.six span{border:1px solid var(--line);border-radius:4px;padding:.3cqi 1cqi;color:var(--muted)}
.six span.me{border-color:var(--accent);color:var(--accent);font-weight:700}

/* browser mock */
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:3cqi;height:100%;align-items:start;padding-top:3cqi}
.browser{background:var(--paper);color:var(--paper-ink);border:1px solid var(--border-light);border-radius:8px;overflow:hidden;font-size:1.6cqi}
.bar{display:flex;align-items:center;gap:1cqi;background:#DCE4E3;padding:.9cqi 1.3cqi}
.bar i{width:1cqi;height:1cqi;border-radius:50%;background:#9AABAD;display:block}
.bar .url{flex:1;background:#fff;border-radius:2cqi;padding:.3cqi 1.3cqi;color:#4A5B60;font-size:1.3cqi}
.site{padding:2cqi 2.4cqi}
.site nav{display:flex;gap:2cqi;font-weight:600;font-size:1.4cqi;color:#2F4A52;border-bottom:1px solid #D3DCDB;padding-bottom:1.2cqi}
.site nav b{margin-right:auto;font-family:var(--display);color:#0E2A33}
.site h3{font-family:var(--display);font-size:2.6cqi;margin:1.6cqi 0 .6cqi;line-height:1.1}
.site p{margin:0 0 1.2cqi}
.es-box{background:#EAF3F1;border-left:.5cqi solid #2A8A80;padding:1.2cqi 1.6cqi;border-radius:.4cqi}
.es-box.flag{outline:.35cqi solid var(--error);outline-offset:.4cqi}

.panel{background:var(--deep);border:1px solid var(--line);border-radius:8px;padding:2cqi;font-size:1.7cqi}
.panel h3{font-family:var(--display);font-size:2.2cqi;margin:0 0 1.2cqi}
code,.code{font-family:var(--mono)}
.code{background:var(--bg-primary);border:1px solid var(--border-light);border-radius:4px;padding:1.2cqi 1.4cqi;font-size:1.6cqi;line-height:1.6;white-space:pre;overflow:hidden;color:var(--text-primary)}
.panel .code{background:var(--bg-secondary)}
.code .bad{background:var(--error-fill);outline:1px dashed var(--error);border-radius:3px}
.code .good{background:var(--success-fill);outline:1px solid var(--success);border-radius:3px;color:var(--text-primary)}
.code .tag{color:var(--accent)}.code .attr{color:var(--warning)}.code .str{color:var(--success)}
.note{margin-top:1.4cqi;display:flex;gap:1cqi;align-items:flex-start}
.badge{flex:none;font-weight:800;border:1px solid currentColor;border-radius:4px;padding:.1cqi .9cqi;font-size:1.5cqi}
.badge.fail{background:var(--error-fill);color:var(--error)}
.badge.pass{background:var(--success-fill);color:var(--success)}
.speech{margin-top:1.6cqi;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.4cqi 1.6cqi;position:relative}
.speech .who{font-size:1.4cqi;color:var(--muted);margin-bottom:.5cqi;display:flex;align-items:center;gap:.8cqi}
.speech .who svg{width:2cqi;height:2cqi}
.speech q{font-size:1.9cqi;quotes:none}
.wave{display:inline-flex;gap:.3cqi;align-items:end;height:1.8cqi;margin-left:auto}
.wave i{width:.35cqi;background:var(--accent);height:30%;border-radius:.2cqi}
.speaking .wave i{animation:w .8s ease-in-out infinite}
.speaking .wave i:nth-child(2){animation-delay:.15s}.speaking .wave i:nth-child(3){animation-delay:.3s}.speaking .wave i:nth-child(4){animation-delay:.45s}
@keyframes w{0%,100%{height:25%}50%{height:100%}}

/* steps */
.s-test h2,.s-fix h2,.s-gap h2,.s-access h2{font-family:var(--display);font-size:4cqi;line-height:1.05;margin:2cqi 0 3cqi;letter-spacing:-.015em}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqi;counter-reset:st}
.steps li{counter-increment:st;border-top:.35cqi solid var(--accent);padding-top:1.6cqi;font-size:1.9cqi}
.steps li::before{content:counter(st);display:block;font-family:var(--display);font-weight:800;font-size:4.4cqi;line-height:1;color:var(--accent);margin-bottom:1cqi}
.steps strong{display:block;font-size:2.2cqi;margin-bottom:.6cqi}
.steps .code{margin-top:1.2cqi;font-size:1.45cqi}
.steps span{color:var(--muted)}

/* chart */
.chart{display:grid;gap:1.3cqi;max-width:84cqi}
.row{display:grid;grid-template-columns:12cqi 1fr 9cqi;align-items:center;gap:1.6cqi;font-size:2cqi}
.track{height:3.2cqi;background:var(--bg-accent);border:1px solid var(--border-light);border-radius:4px;overflow:hidden}
.fill{height:100%;width:0;background:var(--text-secondary);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.row.on .fill{width:var(--w)}
.row.hi .fill{background:var(--accent)}
.row .val{font-family:var(--display);font-weight:800}
.chart-cap{font-size:1.6cqi;color:var(--muted);margin-top:2cqi}

/* access */
.layers{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4cqi}
.layer{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.6cqi;font-size:1.7cqi;min-height:20cqi;display:flex;flex-direction:column;gap:1cqi}
.layer b{font-size:2cqi}
.layer .ex{margin-top:auto;font-family:var(--mono);font-size:1.4cqi;color:var(--accent-secondary)}
.layer:last-child{background:transparent;border:.3cqi solid var(--accent)}

/* search */
.s-search h2,.s-overlap h2{font-family:var(--display);font-size:4cqi;line-height:1.05;margin:2cqi 0 2.6cqi;letter-spacing:-.015em;max-width:30ch}
.myth{display:flex;gap:2cqi;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.6cqi 2cqi;font-size:2cqi;margin-bottom:2.4cqi;max-width:80cqi}
.myth .code{flex:none;font-size:1.7cqi;padding:.6cqi 1.2cqi}
.myth s{color:var(--muted)}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqi}
.lane{border-radius:8px;padding:1.8cqi 2cqi;font-size:1.75cqi;border:.3cqi solid var(--line)}
.lane.ok{border-color:var(--success)}
.lane.no{border-color:var(--error);border-style:dashed}
.lane b{display:flex;align-items:center;gap:1cqi;font-size:2.1cqi;margin-bottom:1cqi}
.lane ul{margin:0;padding-left:2.4cqi}
.lane li{margin-bottom:.5cqi}
.lane .code{font-size:1.35cqi;margin-top:1cqi;white-space:pre-wrap}
/* overlap */
.grid2{display:grid;grid-template-columns:14cqi 1fr 1fr;gap:1.2cqi 2.4cqi;font-size:1.85cqi;max-width:86cqi}
.grid2 .hd{font-weight:800;color:var(--muted);font-size:1.6cqi;border-bottom:1px solid var(--line);padding-bottom:.6cqi}
.grid2 .k{font-family:var(--display);font-weight:800;color:var(--accent)}
.overlap-note{font-size:2cqi;margin-top:2.4cqi;max-width:60ch}
/* idioma */
.idioma-mark{display:inline-flex;align-items:center;gap:.8cqi;font-family:var(--display);font-weight:800;color:var(--accent)}
.pdfline{margin-top:2cqi;font-size:1.9cqi;display:flex;gap:1.2cqi;align-items:center}
.pdfline .badge{background:var(--warning-fill);color:var(--warning)}

/* close */
.s-close{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.s-close .big{font-family:var(--display);font-weight:800;font-size:9cqi;line-height:.95;letter-spacing:-.03em;margin:0;max-width:12ch}
.s-close .url{margin-top:3cqi;font-size:2.6cqi;color:var(--accent);font-weight:600}
.s-close .src{position:absolute;left:6cqi;bottom:13cqi;font-size:1.3cqi;color:var(--muted);max-width:80cqi}


/* start overlay */
.start{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:var(--bg-secondary);padding:4cqi}
.start-card{display:flex;flex-direction:column;align-items:center;gap:1.6cqi;text-align:center;max-width:80cqi}
.start-title{margin:0;font:800 clamp(1.5rem,5.4cqi,3.4rem)/1.1 var(--display);color:var(--text-primary)}
.start-meta{margin:0 0 1cqi;font-size:clamp(1rem,2.3cqi,1.4rem);color:var(--text-secondary)}
.start button{font:800 max(1rem,2.6cqi) var(--display);background:var(--button-primary-bg);color:var(--button-primary-text);border:2px solid var(--button-primary-bg);border-radius:8px;padding:1.6cqi 4cqi;min-height:44px;cursor:pointer;display:flex;align-items:center;gap:1.4cqi}
.start button:hover{background:var(--button-primary-bg-hover);border-color:var(--button-primary-bg-hover)}
.start button svg{width:2.6cqi;height:2.6cqi;min-width:1.25rem;min-height:1.25rem}
.start[hidden]{display:none}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.controls button,.controls select{font:600 1rem var(--body);background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-medium);border-radius:4px;padding:.45rem .8rem;cursor:pointer;min-height:44px}
.controls button{min-width:44px}
.controls button:hover,.controls select:hover{background:var(--bg-accent)}
.controls button[aria-pressed="true"]{background:var(--button-primary-bg);color:var(--button-primary-text);border-color:var(--button-primary-bg)}
.controls label{font-size:.9rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.progress{flex:1 1 200px;height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden;min-width:120px}
.progress div{height:100%;width:0;background:var(--accent);transition:width .3s}
.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
details{margin-top:18px;background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:8px;padding:.6rem 1rem}
summary{cursor:pointer;font-weight:600}
details p{max-width:72ch}
.help{color:var(--muted);font-size:.9rem;margin-top:10px}
.lang-note{color:var(--text-primary);background:var(--bg-accent);border:1px solid var(--border-light);border-left:4px solid var(--accent);padding:8px 12px;margin:10px 0 0;border-radius:4px;font-size:.95rem;line-height:1.45}
.lang-note:empty{display:none}
.lbl-voice[hidden]{display:none!important}
.narrator-note{color:var(--text-primary);margin:10px 0 0;font-size:.95rem;line-height:1.45}
.narrator-note:empty{display:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  [data-s]{transform:none}
}
@media (max-width:640px){.wrap{padding:8px}}

/* ---------- additions for the shared player ---------- */
/* Full screen. The stage has inline-size containment (it is a container for the scene units), so `width:auto`
   collapses it to nothing. Its width must be stated: as wide as fits the screen at 16:9, leaving room below for
   captions and controls. On a short screen (a phone turned sideways) it keeps a readable minimum and scrolls. */
.player:fullscreen{display:flex;flex-direction:column;justify-content:center;gap:0;background:var(--bg-primary);padding:12px;overflow:auto}
.player:fullscreen .stage{width:min(100%,max(calc((100vh - 230px) * 16 / 9),calc(60vh * 16 / 9)));margin:0 auto}

/* Captions sit below the picture, sized in rem so they stay readable at any width and under zoom. */
.cc-bar{min-height:3.6em;margin-top:8px;padding:.5rem .75rem;background:#000;color:#fff;border-radius:4px;text-align:center;font-size:clamp(1.0625rem,1rem + .6vw,1.5rem);line-height:1.5}
.cc-bar.off{display:none}
.cc-bar p{margin:0}
.cc-bar .cue-sfx{color:#FFE08A} /* on the always-black caption bar */

.controls select,.controls button{font-size:max(.95rem,1rem)}
.scrub{flex:1 1 260px;display:flex;align-items:center;gap:8px;min-width:0}
.controls .seek{flex:1 1 auto;min-width:0;accent-color:var(--accent);height:44px;cursor:pointer}
.time{min-width:7.5em;text-align:right;flex:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.transcript h3{font-family:var(--display);font-size:1.15rem;margin:1.25rem 0 .25rem}
.transcript .visual{margin:.25rem 0 .5rem;padding:.5rem .75rem;border-left:4px solid var(--accent);background:var(--bg-accent);color:var(--text-primary)}
.transcript .visual strong{color:var(--text-primary)}
.transcript p{max-width:72ch}

/* Embed mode: the host article supplies the heading and transcript. */
/* The article shows the visible heading; the frame's copy is visually hidden. */
.embed .page-head{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.embed details.transcript-box,.embed .help{display:none}
.embed .wrap{padding:0}

@media (forced-colors:active){
  .controls button,.controls select{border:2px solid ButtonText}
  .controls button[aria-pressed="true"]{outline:2px solid Highlight}
  .controls button[aria-pressed="true"]:focus-visible,.controls button:focus-visible,.controls select:focus-visible{outline:3px solid Highlight;outline-offset:2px}
}
.controls label{min-width:0;max-width:100%}
.controls label select{min-width:0;max-width:100%;text-overflow:ellipsis}
.controls .lbl-voice{flex:1 1 16rem}
.controls .lbl-voice select{flex:1}
@media (max-width:640px){
  .controls{gap:6px}
  .scrub{flex-basis:100%}
  .controls label{flex:1 1 100%}
  .controls label select{flex:1}
}
/* Scenes are a 16:9 picture scaled to the stage. On a small stage the fine print would be a few pixels tall, so
   it is dropped there (it repeats the transcript); full screen shows the whole picture larger. */
@container (max-width: 520px){
  .bar .url{display:none}
  /* Visually hidden, not removed: screen-reader users keep the sources, and the transcript shows them to everyone. */
  .ep,.lower .tt,.s-close .src{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* Increase Contrast: hairlines become solid, text-coloured edges. */
@media (prefers-contrast: more){
  :root{--border-light:var(--text-secondary);--border-medium:var(--text-primary)}
  .controls button,.controls select,.stage,details,.lang-note{border-width:2px}
}