/* Astra s5i5: scroll-led replay in the drop's story pattern (sticky stage + passages) */
.astra{max-width:1120px;margin:0 auto 40px;padding:0}
.astra-prose{max-width:690px;margin:0 auto}
.astra-prose h2{margin:0 0 18px;padding-top:22px;border-top:1px solid var(--ink);font:600 clamp(1.9rem,3.6vw,2.6rem)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.astra-prose p,.astra-step p{margin:0 0 20px;font:400 1.08rem/1.7 var(--serif);color:var(--body)}
.astra-prose strong{font-weight:700;color:var(--ink)}
.astra code{font:500 .88em var(--tech);background:var(--wash);padding:0 4px;border:1px solid var(--rule)}

/* Turn one, rendered as a chat transcript */
.chat-log{margin:6px 0 30px;border:1px solid var(--rule);border-radius:14px;background:#fbfaf8;padding:14px;display:grid;gap:10px}
.chat-msg{border-radius:11px;border:1px solid var(--rule);background:#fff;overflow:hidden}
.chat-role{display:flex;align-items:center;gap:7px;padding:8px 12px 0;font:600 .64rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chat-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.chat-body{margin:0;padding:6px 12px 11px;font:400 .95rem/1.55 var(--sans);color:var(--ink)}
pre.chat-body{font:500 .7rem/1.55 var(--tech);white-space:pre;overflow-x:auto;color:#3b3833}
.chat-system{background:#f3f0ea;border-style:dashed}
.chat-system .chat-dot{background:var(--red)}
.chat-system .chat-body{font-weight:500}
.chat-user .chat-dot{background:#1e93ff}
.chat-model{margin-left:12%;background:#11100f;border-color:#11100f}
.chat-model .chat-role{color:#9f9892}.chat-model .chat-dot{background:#4fcc30}
.chat-model pre.chat-body{color:#9ff0b4;white-space:pre-wrap;font-size:.76rem}
.chat-elide{color:var(--red);font-style:normal}
.chat-note{margin:2px 2px 0!important;font:400 .74rem/1.55 var(--sans)!important;color:var(--muted)!important}

/* Story layout: passages scroll past a sticky game screen */
.astra-story{margin:40px auto 0;position:relative}
.astra-stage{display:none}
.astra-enhanced{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:start}
.astra-enhanced .astra-stage{display:block;position:sticky;top:16px;min-width:0;border:1px solid var(--rule);background:#fff}
.astra-console{margin:12px 14px 0!important}
.astra-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:0 2px 8px}
.astra-view{display:flex;border:1px solid #9c5a83;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.2)}
.astra-view button{appearance:none;border:0;padding:6px 10px;background:transparent;color:#502d45;font:700 .6rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.astra-view button[aria-pressed="true"]{background:#1a1418;color:#fff}
.astra-hud{display:flex;gap:10px;font:600 .58rem/1 var(--tech);letter-spacing:.07em;text-transform:uppercase;color:#502d45}
.astra-hud b{font-weight:700;color:#21171e}
.astra-screen{position:relative;aspect-ratio:1;width:100%;max-width:min(100%,56vh);margin:0 auto;border:1px solid #613a53;border-radius:3px;overflow:hidden;background:#000}
.astra-screen canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.astra-screen svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:none!important;border:0!important;border-radius:0!important}
.astra-pin .ring{fill:none;stroke:#fff;stroke-width:.45}
.astra-pin circle:not(.ring){fill:#fff;stroke:#11100f;stroke-width:.25}
.astra-pin text{font:700 2.2px var(--sans);fill:#11100f;text-anchor:middle;dominant-baseline:central}
.astra-pin.hl .ring{stroke:#f6cf43;stroke-width:.7}.astra-pin.hl circle:not(.ring){fill:#f6cf43}
.astra-loading{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font:500 .8rem/1.5 var(--sans);color:#bdb6b0}
.astra-story.ready .astra-loading{display:none}
.astra-panel{position:absolute;inset:0;padding:18px;background:rgba(10,9,9,.94);color:#e8e3de;opacity:0;transition:opacity .25s;overflow:auto}
.astra-story.panel-on .astra-panel{opacity:1}
.astra-panel-title{margin-bottom:12px;font:600 .66rem/1.3 var(--tech);letter-spacing:.1em;text-transform:uppercase;color:#f6cf43}
.astra-panel-key{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font:500 .64rem/1.4 var(--sans);color:#bdb6b0}
.astra-panel-key i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px}
.astra-panel-key .model,.astra-level-row .bars .model{background:#f6cf43}
.astra-panel-key .human,.astra-level-row .bars .human{background:#5d5753}
.astra-level-row{display:grid;grid-template-columns:24px minmax(0,1fr) 62px;gap:8px;align-items:center;padding:4px 0}
.astra-level-row .lv{font:600 .62rem/1 var(--tech);color:#9f9892}
.astra-level-row .bars{position:relative;height:14px}
.astra-level-row .bars i{position:absolute;left:0;top:0;height:100%}
.astra-level-row .bars .model{top:3px;height:8px}
.astra-level-row .nums{font:500 .64rem/1 var(--tech);color:#9f9892;text-align:right}
.astra-level-row .nums b{color:#fff}
.astra-panel-total{margin-top:12px;font:500 .72rem/1.4 var(--tech);color:#bdb6b0}.astra-panel-total b{color:#fff}
.astra-panel .astra-records{grid-template-columns:1fr 1fr;border-color:#3a3634;background:#3a3634;margin:0}
.astra-panel .astra-records div{background:#11100f}
.astra-panel .astra-records strong{color:#fff}.astra-panel .astra-records span{color:#9f9892}
.astra-tree{font:500 .78rem/1.5 var(--tech)}
.astra-tree .dir{color:#bdb6b0;margin-bottom:6px}
.astra-tree .file{display:grid;gap:2px;padding:8px 0 8px 18px;border-left:1px solid #3a3634}
.astra-tree .file code{background:none;border:0;padding:0;color:#9ff0b4}
.astra-tree .file span{font:400 .66rem/1.4 var(--sans);color:#9f9892}
.astra-actionline{display:flex;justify-content:space-between;gap:12px;padding:7px 2px 0;font:500 .6rem/1.4 var(--tech);color:#502d45}
.astra-actionline b{color:#21171e}
.astra-story .num-only{display:none}.astra-story.numbers-view .num-only{display:inline}.astra-story.numbers-view .px-only{display:none}
.astra-spark{display:flex;align-items:flex-end;gap:1px;height:34px;margin:8px 0 0;padding:0 1px 1px;border-bottom:1px solid #9c5a83}
.astra-spark i{flex:1 1 0;min-width:0;height:max(2px,var(--h));background:#b67b9f}
.astra-spark i.level-start{background:#6d3a59}
.astra-spark i.stop{background:#21171e}
.astra-spark i.now{background:var(--red)}
.astra-story.tokens-on .astra-spark{height:60px}
.astra-note{margin:8px 0 12px;padding:8px 10px;border-radius:6px;background:#0a0a09}
.astra-note span{display:block;margin-bottom:3px;font:600 .54rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8f8882}
.astra-note pre{margin:0;max-height:68px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:500 .66rem/1.5 var(--tech);color:#9ff0b4}

.astra-step{padding:35px 0}
.astra-step>.label{margin-bottom:16px}
.astra-step h3{font:500 clamp(1.6rem,2.7vw,2.2rem)/1.18 var(--serif);margin:0 0 22px;color:var(--ink)}
.astra-aside{padding:12px 14px;background:var(--wash);border:1px solid var(--rule);font-size:.95rem!important}
.astra-key{margin:4px 0 0;padding:0;list-style:none;counter-reset:pin;display:flex;flex-wrap:wrap;gap:6px 14px}
.astra-key li{counter-increment:pin;display:flex;align-items:center;gap:6px;font:500 .78rem/1.4 var(--sans);color:var(--muted);cursor:default}
.astra-key li::before{content:counter(pin);display:grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--ink);font:700 .62rem/1 var(--sans);color:var(--ink)}
.astra-key li:hover{color:var(--ink)}
.astra-records{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:10px 0 24px;border:1px solid var(--hair);background:var(--rule)}
.astra-records div{padding:14px 14px 16px;background:var(--paper)}
.astra-records small{display:block;margin-bottom:6px;font:600 .6rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.astra-records strong{display:block;font:600 1.02rem/1.25 var(--serif);color:var(--ink)}
.astra-records span{display:block;margin-top:5px;font:400 .74rem/1.45 var(--sans);color:var(--muted)}
.astra-enhanced .astra-step{min-height:74vh;padding:12vh 0 16vh}
.astra-enhanced .astra-step:last-child{min-height:65vh;padding-bottom:8vh}
.astra-enhanced .astra-steps .astra-records{display:none}
.astra-enhanced .astra-key{display:flex}
.astra-story:not(.astra-enhanced) .astra-key{display:none}
.astra-figcap{max-width:690px;margin:24px auto 0;font:400 .8rem/1.6 var(--sans);color:var(--muted)}
.astra-figcap strong{color:var(--ink)}

@media(max-width:760px){
  .astra-enhanced{display:block}
  .astra-enhanced .astra-stage{top:8px;z-index:4}
  .astra-console{margin:8px 10px 0!important;padding:6px!important}
  .astra-screen{max-width:min(100%,34vh)}
  .astra-hud{font-size:.5rem}.astra-view button{padding:5px 7px;font-size:.52rem}
  .astra-note,.astra-actionline{display:none}
  .astra-spark{height:20px}.astra-story.tokens-on .astra-spark{height:34px}
  .astra-enhanced .astra-step{min-height:64vh;padding:8vh 6px 12vh}
  .astra-step h3{font-size:1.6rem}
  .chat-model{margin-left:6%}
  .astra-panel{padding:10px}.astra-panel .astra-records{grid-template-columns:1fr}
}
@media print{.astra-enhanced{display:block}.astra-enhanced .astra-stage{display:none}.astra-enhanced .astra-steps .astra-records{display:grid}}

/* System prompt box without a role label */
.chat-system .chat-body{padding:14px 16px}
/* Standalone moves-per-level chart, light */
.astra-levels{max-width:690px;margin:64px auto 0}
.astra-levels h3{font:500 clamp(1.6rem,2.7vw,2.2rem)/1.18 var(--serif);margin:0 0 18px;color:var(--ink)}
.astra-levels p{margin:0 0 20px;font:400 1.08rem/1.7 var(--serif);color:var(--body)}
.astra-levels-fig{margin:8px 0 0;padding:18px 20px;border:1px solid var(--rule);background:var(--paper)}
.astra-levels-key{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 12px;font:500 .72rem/1.4 var(--sans);color:var(--muted)}
.astra-levels-key i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.astra-levels-fig .model{background:var(--ink)!important}.astra-levels-fig .human{background:#ddd7cf!important}
.astra-levels-fig .astra-level-row{grid-template-columns:58px minmax(0,1fr) 72px}
.astra-levels-fig .astra-level-row .lv{font:600 .68rem/1 var(--sans);color:var(--muted)}
.astra-levels-fig .astra-level-row .nums{color:var(--muted)}.astra-levels-fig .astra-level-row .nums b{color:var(--ink)}
.astra-levels-total{margin-top:12px;font:500 .78rem/1.4 var(--sans);color:var(--muted)}.astra-levels-total b{color:var(--ink)}
.astra-step p strong,.astra-levels p strong{font-weight:700;color:var(--ink)}