/* Shell page. The shared tokens, header, footer, and controls are in /style.css. */
.shell-page{padding-bottom:8px}
.intro{padding:56px 0 28px}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.intro h1{font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.08;margin:0 0 18px}
.intro h1 em{color:var(--accent);font-style:italic;font-weight:400}
.intro>p:last-child{font-family:var(--serif);color:var(--muted);font-size:1.3rem;line-height:1.45;margin:0;max-width:44rem}

.workspace{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--border)}
.session{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px}
.session>span:first-child{color:var(--accent);font-size:10px}
.actions{display:flex;gap:8px}
.actions button{padding:7px 14px;font-size:13px}
.actions button:disabled{cursor:default}
.download-form{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);font-size:14px;font-weight:500}
.download-form[hidden]{display:none}
.download-form input{flex:1;min-width:0;padding:7px 12px;background:var(--background);font:13px var(--mono)}
.download-form button{padding:7px 14px;font-size:13px}
#terminal{height:400px;padding:16px 18px}
#terminal:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0}
.xterm{height:100%}
.xterm-viewport{overscroll-behavior:contain}
.statusbar{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding:8px 18px;color:var(--muted);font:12px var(--mono)}

.guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.guide>div{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 22px}
.guide h2{font-size:1.45rem;line-height:1.2;margin:0 0 10px}
.guide p{font-size:14px;color:var(--muted);margin:10px 0}
.guide code,.guide kbd{font-size:12px;background:var(--code-background);border:1px solid var(--border);border-radius:4px;padding:.1em .35em}
.guide pre{font-size:12px;background:var(--code-background);border:1px solid var(--border);border-radius:10px;overflow:auto;line-height:1.8;padding:12px 16px;margin:12px 0}
.guide button{margin-top:4px}

@media (max-width:860px){.guide{grid-template-columns:1fr;gap:16px}}
@media (max-width:640px){
  .intro{padding-top:36px}
  .intro>p br{display:none}
  .toolbar{flex-wrap:wrap;padding:10px}
  .actions{width:100%}
  .actions button{flex:1;padding:7px 8px;font-size:12px}
  .download-form{flex-wrap:wrap;padding:10px}
  .download-form label{width:100%}
  .download-form input{width:100%;flex:auto}
  .download-form button{flex:1}
  #terminal{height:370px;padding:12px 10px}
  .statusbar{padding:8px 10px;flex-wrap:wrap}
}