/* Computer Eyes — shared theme. Matches the Technical Mastery track (dark GitHub). */
:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2129; --line:#30363d;
  --tx:#c9d1d9; --tx-dim:#8b949e; --tx-bright:#f0f6fc;
  --blue:#58a6ff; --purple:#a371f7; --green:#3fb950; --yellow:#d29922; --red:#f85149; --pink:#f778ba; --cyan:#39c5cf;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:32px 24px 96px}
.wrap.wide{max-width:1320px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--tx-bright);line-height:1.25;font-weight:650}
h1{font-size:2.1rem;margin:.2em 0 .3em;letter-spacing:-.02em}
h2{font-size:1.5rem;margin:2.2em 0 .6em;padding-bottom:.35em;border-bottom:1px solid var(--line)}
h3{font-size:1.18rem;margin:1.8em 0 .5em;color:var(--blue)}
h4{font-size:1rem;margin:1.4em 0 .4em;color:var(--purple);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
p{margin:.85em 0}
code{font-family:var(--mono);font-size:.87em;background:#22272e;border:1px solid var(--line);border-radius:5px;padding:.12em .38em;color:var(--pink)}
pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto}
pre code{background:none;border:none;padding:0;color:var(--tx)}
hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(13,17,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-weight:700;color:var(--tx-bright);letter-spacing:-.01em}
.brand span{color:var(--blue)}
.topbar nav{display:flex;gap:16px;font-size:.9rem}
.topbar nav a{color:var(--tx-dim)}
.topbar nav a:hover,.topbar nav a.on{color:var(--blue)}
/* kicker / hero */
.kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--purple);margin-bottom:6px}
.lede{font-size:1.15rem;color:var(--tx-dim);max-width:74ch}
/* panels & cards */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:1.4em 0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--blue);transform:translateY(-2px);text-decoration:none}
.card h3{margin-top:0}
.card .meta{font-family:var(--mono);font-size:.74rem;color:var(--tx-dim);text-transform:uppercase;letter-spacing:.08em}
/* callouts */
.note,.aha,.warn,.task{border-left:3px solid;border-radius:0 10px 10px 0;padding:14px 18px;margin:1.5em 0;background:var(--panel)}
.aha{border-color:var(--yellow);background:#1d1a10}
.aha::before{content:"💡 AHA";display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--yellow);margin-bottom:6px}
.note{border-color:var(--blue);background:#0f1a26}
.warn{border-color:var(--red);background:#251313}
.warn::before{content:"⚠️ WATCH OUT";display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--red);margin-bottom:6px}
.task{border-color:var(--green);background:#0f1c14}
.task::before{content:"🛠️ HANDS-ON";display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--green);margin-bottom:6px}
/* tables */
table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:.92rem;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--panel2);color:var(--tx-bright);font-weight:600;white-space:nowrap}
tr:nth-child(even) td{background:#12171e}
/* pills / badges */
.pill{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--tx-dim);margin-right:6px}
.pill.blue{color:var(--blue);border-color:#1f4b7a;background:#0d1f33}
.pill.purple{color:var(--purple);border-color:#4a2f75;background:#1a1030}
.pill.green{color:var(--green);border-color:#22562f;background:#0e2114}
.pill.yellow{color:var(--yellow);border-color:#6b5416;background:#211a08}
.pill.red{color:var(--red);border-color:#7a2b28;background:#2a1212}
/* controls (dashboards) */
.ctl{margin:14px 0}
.ctl label{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--tx-dim);font-family:var(--mono);letter-spacing:.04em;margin-bottom:5px}
.ctl label b{color:var(--blue);font-weight:600}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:#30363d;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid #0d1117;box-shadow:0 0 0 1px var(--blue)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid #0d1117}
select,button,input[type=text]{font-family:var(--sans);font-size:.86rem;background:var(--panel2);color:var(--tx);border:1px solid var(--line);border-radius:7px;padding:7px 11px}
button{cursor:pointer;transition:.15s}
button:hover{border-color:var(--blue);color:var(--tx-bright)}
button.on{background:#0d2b4a;border-color:var(--blue);color:var(--blue)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
canvas{display:block;max-width:100%;image-rendering:pixelated;border-radius:8px;background:#0b0e13}
.checker{background-image:linear-gradient(45deg,#20262e 25%,transparent 25%),linear-gradient(-45deg,#20262e 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#20262e 75%),linear-gradient(-45deg,transparent 75%,#20262e 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.mono{font-family:var(--mono)}
.dim{color:var(--tx-dim)}
.readout{font-family:var(--mono);font-size:.8rem;color:var(--tx-dim);background:#0b0e13;border:1px solid var(--line);border-radius:8px;padding:10px 12px;white-space:pre-wrap}
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;vertical-align:-2px;border:1px solid #00000060}
footer.foot{margin-top:70px;padding-top:22px;border-top:1px solid var(--line);color:var(--tx-dim);font-size:.85rem}
.progress{height:6px;border-radius:4px;background:#21262d;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--purple))}
details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:1em 0;background:var(--panel)}
summary{cursor:pointer;color:var(--blue);font-weight:600}
ul,ol{padding-left:1.4em}
li{margin:.35em 0}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;background:none;color:var(--tx-dim);padding:8px 14px}
.tabs button.on{background:var(--panel);border-color:var(--line);color:var(--blue)}