@font-face {
  font-family: Classroom;
  src: url('assets/classroom-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Classroom;
  src: url('assets/classroom-700.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
:root { color-scheme: dark; --bar-height:64px; --ink:#e8edf5; --muted:#a9b7c9; --accent:#bedacb; }
* { box-sizing:border-box; }
body { margin:0; background:#192331; color:var(--ink); font:15px/1.5 system-ui,-apple-system,'Microsoft YaHei',sans-serif; overflow:hidden; }
body.reveal-viewport { background:#192331; }
button, select { font:inherit; }
button { appearance:none; border:1px solid transparent; border-radius:6px; color:inherit; background:transparent; cursor:pointer; padding:7px 12px; white-space:nowrap; }
button:hover { background:#ffffff12; }
button:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.3; cursor:default; }
button.primary { color:#122b22; background:var(--accent); min-width:120px; font-weight:600; }
button.primary:hover { background:#cee6da; }
#stage { position:absolute; inset:0 0 var(--bar-height); }
.reveal { background:#192331; color:#283a53; font-family:system-ui,sans-serif; }
.reveal .slides { text-align:left; }
.reveal .slides > section { padding:0; height:540px; }
.canvas { position:relative; width:960px; height:540px; overflow:hidden; user-select:none; cursor:pointer; }
.reveal .canvas img { display:block; border:0; margin:0; max-width:none; max-height:none; box-shadow:none; }
.native-image, .native-text { position:absolute; }
.native-image { object-fit:fill; }
.native-text { display:flex; flex-direction:column; justify-content:center; font-family:Classroom,'Microsoft YaHei',sans-serif; font-synthesis:none; }
.reveal .native-text p { flex-shrink:0; margin:0; line-height:1.5; white-space:pre; letter-spacing:0; text-transform:none; }
.type-line { min-width:1px; }
.type-line.typing::after { content:''; display:inline-block; height:.95em; width:2px; background:currentColor; margin-left:5px; vertical-align:-.08em; animation:blink .72s step-end infinite; }
.animation-layer { position:absolute; opacity:0; visibility:hidden; transition:opacity .5s ease; pointer-events:none; }
.animation-layer.shown { opacity:1; visibility:visible; transition:opacity .5s ease; }
.rocket { transform:translateY(70px) scale(.68); transform-origin:center; transition:opacity .35s ease, transform .75s cubic-bezier(.17,.89,.32,1.35); }
.rocket.shown { transform:none; transition:opacity .35s ease, transform .75s cubic-bezier(.17,.89,.32,1.35); }
.reveal .progress { height:3px; color:#95bea8; background:#ffffff0a; }
.presenter-controls { position:absolute; bottom:0; left:0; right:0; height:var(--bar-height); padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:#192331; color:var(--ink); border-top:1px solid #ffffff0b; z-index:20; }
.control-group { display:flex; align-items:center; gap:7px; flex-shrink:0; }
#jump { color:var(--muted); background:#192331; border:0; padding:8px 4px; cursor:pointer; width:100px; font-variant-numeric:tabular-nums; }
#jump option { color:var(--ink); }
#hint { color:var(--muted); font-size:13px; margin:0; text-align:center; white-space:nowrap; }
#loading { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:#192331; color:var(--muted); }
#loading[hidden] { display:none; }
dialog { border:1px solid #ffffff20; border-radius:16px; background:#202d3c; color:var(--ink); padding:28px; width:min(580px,calc(100vw - 32px)); box-shadow:0 24px 80px #0006; max-height:85vh; }
dialog::backdrop { background:#0c1420bf; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.dialog-header h2 { font-size:24px; margin:0; }
dialog p { color:#c8d3df; }
dialog dl { margin:24px 0; }
dialog dl div { display:flex; align-items:center; gap:20px; padding:8px 0; }
dialog dt { width:104px; color:var(--accent); font-size:14px; }
dialog dd { margin:0; }
.demo-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.demo-links button { background:#ffffff0b; border-color:#ffffff1a; }
.small { font-size:13px; }
#notes-content { font:15px/1.8 system-ui,'Microsoft YaHei',sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
#notes-button { color:var(--accent); padding-left:0; }
.reveal.overview .canvas { cursor:pointer; }
.reveal.overview .slides section::after { content:attr(data-slide-number); position:absolute; left:12px; bottom:12px; color:white; background:#192331; border-radius:4px; padding:3px 10px; font:22px system-ui; }
@keyframes blink { 50% { opacity:0; } }
@media (max-width:1050px) { #hint { display:none; } }
@media (max-width:600px), (max-height:470px) {
  :root { --bar-height:50px; }
  .presenter-controls { padding:0 8px; gap:4px; font-size:13px; }
  .control-group { gap:2px; }
  button { padding:6px 8px; }
  button.primary { min-width:94px; }
  #jump { width:81px; }
  #help { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .animation-layer, .rocket, .animation-layer.shown, .rocket.shown { transition:none; transform:none; }
  .type-line.typing::after { animation:none; }
}