:root{color-scheme:dark;font-family:'Courier New',monospace;color:#FFFFFF;background:#000000;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000000}
body{min-height:100svh;display:grid;place-items:center;padding:16px}
.specimen{width:min(1180px,calc(100vw - 32px),max(280px,calc((100svh - 248px)*1.6)));margin:auto;container-type:inline-size}
.masthead{height:48px;background:#008080;display:flex;justify-content:space-between;align-items:center;padding:5px 16px;font-size:10px;letter-spacing:.08em;gap:12px}
.masthead img{width:92px;height:auto;display:block}
.edition{margin-left:6px}
.caption{padding:16px 16px 4px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:71px}
h1{font:normal clamp(20px,2.7vw,30px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.045em;margin:0 0 7px}
.identity{min-width:0}
.identity p{font-size:9px;letter-spacing:.07em;margin:0;line-height:1.5;text-transform:uppercase}
.reference{display:flex;flex-direction:column;gap:9px;text-align:right;font-size:9px;letter-spacing:.04em;flex-shrink:0}
#run-state::before{content:'■ ';color:#008080}
#seed{text-transform:uppercase}
canvas{display:block;width:100%;aspect-ratio:8/5;background:#000000;image-rendering:pixelated;pointer-events:none}
canvas.interactive{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.telemetry{margin:0 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:9px 0 11px;border-top:1px solid #008080}
.telemetry div{display:flex;align-items:baseline;gap:8px}
dt{font-size:9px;letter-spacing:.02em}
dd{font:normal 17px Georgia,'Times New Roman',serif;margin:0;font-variant-numeric:tabular-nums}
.elapsed{justify-content:flex-end}
.elapsed dd{font:11px 'Courier New',monospace}
footer{background:#008080;display:flex;justify-content:space-between;gap:8px;padding:8px 16px;font-size:8px;letter-spacing:.05em;line-height:1.4}
#error{font-size:12px;line-height:1.7;border:1px solid #FFFFFF;padding:16px}
@media(max-width:540px){body{padding:8px}.specimen{width:min(calc(100vw - 16px),max(280px,calc((100svh - 205px)*1.6)))}.masthead{padding:5px 12px;font-size:8px}.masthead img{width:80px}.caption{padding:14px 16px 0;align-items:flex-start;min-height:75px}.reference{font-size:8px;gap:8px;padding-top:3px}.identity p{font-size:8px;max-width:150px}.telemetry div{flex-direction:column;gap:4px}dt{font-size:8px}dd{font-size:16px}.elapsed{align-items:flex-end}.elapsed dd{font-size:10px}footer{font-size:7px;padding:7px 12px}footer span:first-child{max-width:210px}}
@container(max-width:500px){.telemetry div{flex-direction:column;gap:4px}.elapsed{align-items:flex-end}dt{font-size:8px}dd{font-size:15px}.elapsed dd{font-size:10px}.reference{font-size:8px}.identity p{font-size:8px}}
@media(max-height:500px){body{padding:8px}.specimen{width:min(calc(100vw - 16px),max(200px,calc((100svh - 188px)*1.6)))}.masthead{height:30px;font-size:8px;padding:3px 12px}.masthead img{width:60px}.caption{min-height:53px;padding:9px 16px 0}h1{font-size:19px}.telemetry{padding:5px 0 7px}.telemetry dd{font-size:12px}footer{padding:5px 12px;font-size:7px}}
