*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#142433;--bg2:#142433;--bg3:#1a2d3d;--border:rgba(255,255,255,0.07);
  --text:#e2e8f0;--muted:#94a3b8;--dim:#64748b;
  --green:#22c55e;--blue:#38bdf8;--amber:#f59e0b;
  --red:#ef4444;--purple:#a78bfa;--teal:#2dd4bf;
  --green-dim:rgba(34,197,94,0.08);
  --blue-dim:rgba(56,189,248,0.08);
  --amber-dim:rgba(245,158,11,0.08);
  --font:'JetBrains Mono',monospace;
}
html,body{width:100%;height:100%;background:#142433;color:var(--text);font-family:var(--font);overflow:hidden}
/* scanline overlay removed — clean pi CLI aesthetic */

#app{display:flex;flex-direction:column;width:100%;height:100%}
#terminal{width:100%;height:100%;background:#142433;display:flex;flex-direction:column}

.figure-caption{display:none}  /* caption hidden — clean pi CLI */

.term-body{padding:16px 20px;font-size:13px;line-height:1.5;overflow-y:auto;flex:1}
.term-body::-webkit-scrollbar{width:4px}
.term-body::-webkit-scrollbar-track{background:transparent}
.term-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.term-input-row{display:none;align-items:center;padding:6px 20px 10px;flex-shrink:0}
.term-input-row.show{display:flex}
.ps1{white-space:nowrap;font-size:13px}
.ps1 .u{color:var(--green)}.ps1 .sep{color:var(--dim)}.ps1 .p{color:var(--blue)}.ps1 .sym{color:var(--muted)}
#cmd-input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:13px;flex:1;caret-color:var(--blue);padding-left:6px}

.line{white-space:pre-wrap;word-break:break-word}
.c-green{color:var(--green)}.c-blue{color:var(--blue)}.c-amber{color:var(--amber)}
.c-red{color:var(--red)}.c-purple{color:var(--purple)}.c-muted{color:var(--muted)}.c-dim{color:var(--dim)}.c-teal{color:var(--teal)}
.bold{font-weight:700}

.cur{display:inline-block;width:8px;height:1em;background:var(--blue);vertical-align:text-bottom;animation:blink 1s steps(1) infinite;margin-left:1px}
.cur.g{background:var(--green)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.prog-wrap{display:flex;align-items:center;gap:8px;margin:1px 0}

.cmd-echo{color:var(--dim);font-size:13px;margin:6px 0 4px}
.cmd-echo .u{color:var(--green)}.cmd-echo .p{color:var(--blue)}.cmd-echo .sym{color:var(--muted)}

.out-block{}

.skill-row{display:flex;align-items:center;gap:8px}
.skill-name{color:var(--muted);min-width:160px}

.chip{display:inline-block;padding:1px 8px;border-radius:3px;background:var(--bg3);border:1px solid var(--border);color:var(--muted)}
.chip.g{color:var(--green);border-color:var(--green-dim);background:var(--green-dim)}
.chip.b{color:var(--blue);border-color:var(--blue-dim);background:var(--blue-dim)}
.chip.a{color:var(--amber);border-color:var(--amber-dim);background:var(--amber-dim)}

.exp-entry{}
.exp-entry.active-job{}
.exp-role{color:var(--text);font-weight:700}
.exp-co{color:var(--blue)}
.exp-period{color:var(--dim)}
.exp-desc{color:var(--muted)}

.hint-bar{display:none;flex-wrap:wrap;gap:4px 10px;padding:4px 20px;color:var(--dim);font-family:var(--font);font-size:13px;flex-shrink:0;border-top:1px solid rgba(255,255,255,0.06)}
.hint-bar.show{display:flex}
.hk{color:var(--amber)}

#skip-btn{position:fixed;top:14px;right:18px;color:var(--dim);font-family:var(--font);border:1px solid rgba(255,255,255,0.1);background:transparent;padding:3px 10px;border-radius:3px;cursor:pointer;z-index:1000;letter-spacing:.3px}
#skip-btn:hover{color:var(--text);border-color:rgba(255,255,255,0.25)}

/* ── MOBILE (≤ 640px) ───────────────────────────────── */
@media(max-width:640px){
  .term-body{padding:8px 10px;font-size:15px;line-height:1.6}
  .term-input-row{padding:4px 10px 8px}
  .cmd-echo{font-size:14px;margin:4px 0 2px}
  #cmd-input{font-size:15px}
  .ps1{font-size:14px}

  .skill-row{flex-direction:column;align-items:flex-start;gap:1px}
  .skill-name{min-width:auto;font-size:14px}

  .hint-bar{gap:2px 6px;padding:3px 10px;font-size:11px}
  .hint-bar span:nth-child(n+5){display:none}

  .cur{width:10px}

  #skip-btn{padding:6px 12px;font-size:12px;top:10px;right:10px}

  .chip{font-size:12px;margin:1px 2px}

  .out-block div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important
  }
}
