@font-face{font-family:ConsoleMono;src:url('fonts/CourierPrime-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:TerminalRaster;src:url('fonts/VT323-Regular.ttf') format('truetype');font-display:swap}
html:has(.agent-terminal){height:100%;overflow:hidden;background:#080808;color-scheme:dark}
.agent-terminal{--phosphor:#dedede;--dim:#999999;--screen:#080808;margin:0;height:100dvh;overflow:hidden;background:var(--screen);color:var(--phosphor);font:24px/1.25 TerminalRaster,Consolas,monospace}
.console,.console *{box-sizing:border-box}
/* Keep Windows LCD text antialiasing from adding colored fringes. */
.console{position:relative;display:grid;grid-template-rows:64px minmax(0,1fr) 60px;height:calc(100dvh - 112px);margin:112px 5vw 0;overflow:hidden;filter:grayscale(1)}
.console-header{display:flex;justify-content:space-between;align-items:flex-start;font-size:16px;line-height:1.2;letter-spacing:.07em;color:var(--dim)}
#terminal-path{padding-top:1px;max-width:65%;text-align:right}
.console-body{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:4vw;min-height:0}
.console-output{position:relative;min-width:0;overflow:auto;overflow-x:hidden;padding:8px 20px 32px 0;scrollbar-width:thin;scrollbar-color:#555555 var(--screen);overscroll-behavior:contain;outline:none}
.console-output h1{font:inherit;font-size:clamp(30px,3vw,42px);line-height:1.1;letter-spacing:.025em;margin:0 0 26px;outline:none}
.console-output p{margin:0 0 22px;max-width:62ch;white-space:pre-line}
.console-output .screen-intro{color:var(--phosphor);margin-bottom:22px}
.screen-note{color:var(--dim);font-size:15px}
.screen-steps{padding-left:3ch;margin:0 0 26px;max-width:60ch}
.screen-steps li{padding-left:1ch;margin-bottom:14px}
.screen-example{margin:24px 0;padding-left:2ch;border-left:2px solid #535353;color:var(--dim);max-width:57ch}
.terminal-menu{display:grid;gap:3px;max-width:100%;margin:34px 0 0}
.terminal-menu a{display:block;min-height:45px;padding:9px 10px;color:var(--phosphor);text-decoration:none;line-height:1.35;overflow-wrap:anywhere}
.terminal-menu a[data-selected=true],.terminal-menu a:hover,.terminal-menu a:focus-visible{background:var(--phosphor);color:var(--screen);outline:0;text-shadow:none}
.menu-number{display:inline-block;width:2ch}
.menu-hint{margin:18px 10px 0!important;min-height:3em;color:var(--dim);font-size:20px;max-width:55ch!important}
.console-aperture{position:relative;min-width:0;min-height:0;overflow:hidden;pointer-events:none;align-self:stretch}
.aperture-raster,.aperture-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.aperture-raster{image-rendering:pixelated}
.console-aperture[data-raster=ready] .aperture-fallback{display:none}
.console-footer{position:relative;display:flex;align-items:center;gap:30px;color:var(--dim);font-size:16px;padding-bottom:8px;border-top:1px solid #444444}
.console-footer button{border:0;background:none;font:inherit;color:var(--phosphor);cursor:pointer;padding:10px 0;min-height:44px}
.console-footer button:disabled{visibility:hidden;pointer-events:none}
.terminal-key-hints span{margin-left:20px}
.terminal-guide-label{margin-left:auto;font-size:14px}
#terminal-status{position:absolute;bottom:100%;left:0;max-width:100%;margin:0;background:var(--screen);font-size:13px}
#terminal-status:empty{display:none}
.console a:not(.terminal-menu a){color:var(--phosphor);text-underline-offset:4px}
.console button:focus-visible,.console a:not(.terminal-menu a):focus-visible{outline:1px solid var(--phosphor);outline-offset:3px}
.code-caption{display:flex;flex-wrap:wrap;align-items:center;gap:20px;color:var(--dim);font-size:16px;margin:24px 0 10px}
.code-caption button{border:0;background:var(--phosphor);color:var(--screen);font:inherit;padding:8px 12px;cursor:pointer;min-height:36px}
.console-code{font:14px/1.65 ConsoleMono,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--phosphor);margin:0 0 24px;tab-size:4}
.plan-table{font:inherit;white-space:pre-wrap;margin:24px 0 30px;line-height:2}
.console[data-page=python] .console-body{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
.console[data-page=python] .console-aperture{max-height:330px}
.console[data-page=python] .console-output{padding-right:30px}
.console-output.screen-enter{animation:screen-arrive .24s steps(7,end)}
@keyframes screen-arrive{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.console-skip{position:fixed;top:-100px;left:20px;z-index:200;background:#dedede;color:#080808;padding:12px}
.console-skip:focus{top:14px}
@media(min-width:1600px){.console{margin-inline:6vw}.console-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.console-output{padding-top:26px}.terminal-menu{margin-top:42px}}
@media(max-width:900px){.agent-terminal{font-size:22px}.console{margin-inline:30px}.console-body{gap:20px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.terminal-menu a{padding-inline:8px}.console-output h1{font-size:32px}.menu-hint{font-size:18px}.console-output p{margin-bottom:18px}}
@media(max-width:650px){
 .console{margin:100px 20px 0;height:calc(100dvh - 100px);grid-template-rows:76px minmax(0,1fr) 50px;overflow:visible}
 .console-header{font-size:14px;padding-top:8px;justify-content:flex-start;gap:20px;padding-right:92px}
 #terminal-path{max-width:55%;font-size:12px;text-align:left}
 .console-body,.console[data-page=python] .console-body{display:block;min-height:0}
 .console-output{height:100%;padding:8px 8px 24px 0}
 .console-output h1{font-size:32px;margin-bottom:20px}.console-output p{font-size:21px}.terminal-menu{margin-top:24px}.terminal-menu a{font-size:21px;min-height:44px}.menu-hint{margin-left:8px!important;font-size:18px!important}
 .console-aperture{position:absolute;width:100px;height:72px;right:0;top:-76px}.console[data-page=python] .console-aperture{max-height:none}
 .console-footer{gap:20px;font-size:15px}.terminal-key-hints span{margin-left:12px}.terminal-guide-label{display:none}
 .console-code{font-size:12px}.plan-table{font-size:20px}.screen-steps{font-size:21px;padding-left:2ch}.screen-example{margin-block:20px;font-size:21px}.code-caption{font-size:15px}
}
@media(max-height:500px){.console{margin-top:86px;height:calc(100dvh - 86px);grid-template-rows:38px minmax(0,1fr) 44px}.console-header{font-size:9px}.console-output h1{font-size:20px;margin-bottom:14px}.console-footer{font-size:10px}.console-aperture{max-height:240px}}
@media(max-height:500px) and (max-width:650px){.console-aperture{top:-42px;width:60px;height:40px}}
@media(prefers-reduced-motion:reduce){.console *{animation:none!important;transition:none!important}}
html:has(.plain-guide){overflow:auto;height:auto}.agent-terminal:has(.plain-guide){height:auto;overflow:auto}.console:has(.plain-guide){height:auto;min-height:calc(100dvh - 112px)}.console:has(.plain-guide) .console-output{overflow:visible}.plain-guide{font-size:16px;margin-top:60px}.plain-guide h2{font:inherit;margin-top:40px}

/* Phone terminal: one native document scroller; no text squeezed beside art. */
@media(max-width:760px){
  html:has(.agent-terminal){height:auto;overflow:auto;scroll-padding-top:12px;scroll-padding-bottom:80px}
  .agent-terminal{height:auto;min-height:100dvh;overflow:visible;font-size:22px;line-height:1.35}

  .agent-terminal .console{
    height:auto;min-height:calc(100dvh - 92px - env(safe-area-inset-top,0px));
    margin:calc(92px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px));
    grid-template-rows:64px minmax(0,1fr) auto;overflow:visible;
  }
  .agent-terminal .console-header{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;font-size:14px;line-height:1.2;padding:0 112px 0 0}
  .agent-terminal #terminal-path{max-width:100%;text-align:left;font-size:14px;padding:0;overflow-wrap:anywhere}
  .agent-terminal .console-body,.agent-terminal .console[data-page=python] .console-body{display:block;min-height:0}
  .agent-terminal .console-output,.agent-terminal .console[data-page=python] .console-output{height:auto;overflow:visible;padding:8px 0 24px}
  .agent-terminal .console-output h1{font-size:32px;line-height:1.1;margin-bottom:20px}
  .agent-terminal .console-output p{font-size:22px;margin-bottom:20px}
  .agent-terminal .console-output p > a{display:inline-flex;align-items:center;min-height:44px;touch-action:manipulation}
  .agent-terminal .screen-steps,.agent-terminal .screen-example{font-size:22px}
  .agent-terminal .code-caption{font-size:16px;gap:12px}
  .agent-terminal .code-caption button{min-width:44px;min-height:44px;touch-action:manipulation}
  .agent-terminal .console-code{font-size:14px;line-height:1.65}
  .agent-terminal .console-aperture{position:absolute;top:-64px;right:0;width:104px;height:64px;max-height:none}
  .agent-terminal .console-footer{position:sticky;bottom:0;z-index:5;min-height:60px;gap:16px;font-size:16px;background:var(--screen);padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px))}
  .agent-terminal .terminal-key-hints,.agent-terminal .terminal-guide-label{display:none}
  .agent-terminal .console[data-page=home] .console-footer{display:none}
}
@media(max-width:760px) and (max-height:500px){

  .agent-terminal .console{margin-top:calc(76px + env(safe-area-inset-top,0px));min-height:calc(100dvh - 76px - env(safe-area-inset-top,0px));grid-template-rows:40px minmax(0,1fr) auto}
  .agent-terminal .console-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px;padding-right:92px}
  .agent-terminal .console-aperture{top:-40px;width:80px;height:40px}
}