@font-face { font-family: "Space Grotesk"; src: url("./assets/space-grotesk-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./assets/inter-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./assets/inter-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root { color-scheme: dark; --ink:#0e0e0e; --raised:#1e1e1e; --paper:#f5f0e8; --muted:rgba(245,240,232,.62); --line:rgba(245,240,232,.18); --signal:#ff6536; --gold:#e4b949; }
* { box-sizing: border-box; }
html,body { margin:0; min-height:100%; background:var(--ink); color:var(--paper); font-family:"Inter",Arial,sans-serif; }
button,a { font:inherit; }
.presenter { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:18px; min-height:100vh; padding:22px; }
.presenter-header { display:flex; justify-content:space-between; align-items:center; min-height:62px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.presenter-header > div:first-child span,.presenter-header > div:first-child strong { display:block; }
.presenter-header > div:first-child span { color:var(--signal); font-size:11px; font-weight:600; letter-spacing:.12em; }
.presenter-header > div:first-child strong { margin-top:4px; font-family:"Space Grotesk",sans-serif; font-size:19px; }
.presenter-header a { color:var(--gold); font-size:13px; }
.timer { display:flex; align-items:center; gap:10px; }
.timer small { color:var(--muted); font-size:9px; letter-spacing:.12em; }
.timer strong { min-width:72px; font-family:"Space Grotesk",sans-serif; font-size:26px; }
.timer button { padding:7px 10px; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; }
.presenter-grid { display:grid; grid-template-columns:minmax(560px,1.55fr) minmax(320px,.65fr); gap:18px; min-height:0; }
.preview-shell { display:grid; place-items:center; min-height:0; padding:16px; background:#050505; border:1px solid var(--line); }
.preview-shell iframe { width:100%; aspect-ratio:16/9; border:0; background:#000; }
.notes-panel { display:flex; flex-direction:column; min-height:0; padding:28px; overflow:auto; background:var(--raised); border-top:4px solid var(--signal); }
.label { margin:0; color:var(--signal); font-size:10px; font-weight:600; letter-spacing:.12em; }
.notes-panel h1 { margin:16px 0 0; font-family:"Space Grotesk",sans-serif; font-size:clamp(34px,3.1vw,60px); line-height:.96; letter-spacing:-.05em; }
.meta { display:flex; justify-content:space-between; margin-top:20px; padding-bottom:16px; color:var(--muted); border-bottom:1px solid var(--line); font-size:12px; }
.meta strong { color:var(--gold); }
.presenter-prompts { display:grid; gap:0; margin-top:18px; border-top:1px solid var(--line); }
.presenter-prompts span { display:grid; grid-template-columns:90px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.presenter-prompts b { color:var(--signal); font-size:9px; letter-spacing:.1em; }
.presenter-prompts strong { font-size:14px; font-weight:600; }
.notes { margin:24px 0 0; color:rgba(245,240,232,.82); font-size:18px; line-height:1.55; }
.next-up { margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }
.next-up small,.next-up strong { display:block; }
.next-up small { color:var(--muted); font-size:9px; letter-spacing:.12em; }
.next-up strong { margin-top:8px; font-family:"Space Grotesk",sans-serif; font-size:22px; }
.presenter-controls { display:grid; grid-template-columns:auto auto auto 1fr auto auto; gap:10px; align-items:center; }
.presenter-controls button { min-height:48px; padding:0 18px; color:var(--paper); background:transparent; border:1px solid var(--line); cursor:pointer; }
.presenter-controls .next { color:var(--ink); background:var(--signal); border-color:var(--signal); font-weight:600; }
.presenter-controls button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.presenter-controls p { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; }
.presenter-controls p span { font-weight:600; }
.presenter-controls p small { color:var(--muted); }
@media(max-width:900px){ .presenter-grid{grid-template-columns:1fr}.notes-panel{min-height:420px}.presenter-header{align-items:flex-start;gap:16px}.timer{flex-wrap:wrap}.presenter-controls{grid-template-columns:1fr 1fr}.presenter-controls p{grid-column:1/-1;grid-row:1}.presenter-controls button{width:100%} }