/* ============================================================
   CS Vision — Editorial / Academic design system
   A warm-paper, serif-display, scholarly theme. The single
   source of truth for the playground (index.html); course.html
   and project.html reuse these variables + idioms.

   To re-skin for another course, change --accent / --accent-deep
   / --gold below — everything else follows.
   ============================================================ */

:root{
  /* ---- paper & ink ---- */
  --paper:#faf6ee;        /* page background (warm cream)      */
  --paper-tint:#f3ecdd;   /* faint section wash                */
  --panel:#fffdf8;        /* cards / raised surfaces           */
  --panel2:#f2ebdd;       /* chips, inputs, inset blocks       */
  --ink:#221d16;          /* primary text (warm near-black)    */
  --text:#221d16;         /* alias used by inline styles       */
  --ink-soft:#544b3d;     /* secondary prose                   */
  --muted:#8c8273;        /* captions, meta                    */
  --rule:#e6dcc8;         /* hairline borders                  */
  --border:#e6dcc8;       /* alias                             */

  /* ---- accents (re-skin here) ---- */
  --accent:#0e7490;       /* primary: links, focus, headings   */
  --accent-deep:#0b4f5f;  /* darker variant                    */
  --accent-soft:#d4ebf0;  /* tinted accent background          */
  --accent2:#b45309;      /* secondary: amber/ochre highlight  */
  --gold:#b45309;
  --danger:#b3261e;

  /* ---- figure "plates" (dark framed canvases) ---- */
  --plate:#181410;
  --plate-rule:#3a342b;

  /* ---- module colour-coding (7 thematic modules) ---- */
  --m1:#0e7490; --m2:#7c3aed; --m3:#b45309; --m4:#be185d;
  --m5:#047857; --m6:#1d4ed8; --m7:#9a3412;

  /* ---- elevation ---- */
  --shadow-sm:0 1px 2px rgba(34,29,22,.07);
  --shadow:0 2px 4px rgba(34,29,22,.05), 0 14px 30px -18px rgba(34,29,22,.30);
  --shadow-lg:0 8px 18px -6px rgba(34,29,22,.18), 0 30px 60px -30px rgba(34,29,22,.40);

  /* ---- type ---- */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, #fff8ea 0%, rgba(255,248,234,0) 55%),
    radial-gradient(900px 500px at -10% 0%, #f6efe0 0%, rgba(246,239,224,0) 50%),
    var(--paper);
  color:var(--ink);
  font:400 16px/1.65 var(--font-serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
code{background:var(--panel2);padding:1px 6px;border-radius:5px;
  font-family:var(--font-mono);font-size:.85em;color:#7c3a12;border:1px solid var(--rule)}
.muted{color:var(--muted)}
.small{font-size:13px}
::selection{background:var(--accent-soft);color:var(--accent-deep)}

/* ---------------- top bar ---------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;border-bottom:1px solid var(--rule);
  background:rgba(250,246,238,.85);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:30}
.brand{display:flex;gap:12px;align-items:baseline}
.brand h1{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:22px;letter-spacing:-.01em;color:var(--ink)}
.brand .sub{color:var(--muted);font-size:12.5px;font-family:var(--font-sans);
  text-transform:uppercase;letter-spacing:.12em}
.brand .dot{width:11px;height:11px;border-radius:50%;align-self:center;
  background:conic-gradient(from 140deg,var(--accent),var(--gold),var(--accent));
  box-shadow:0 0 0 3px var(--accent-soft)}
.primary{display:flex;gap:10px;align-items:center}
#nav-toggle{display:none;background:transparent;color:var(--ink);
  border:1px solid var(--rule);padding:7px 11px;border-radius:8px;cursor:pointer;
  font-size:16px}

/* ---------------- layout ---------------- */
.layout{display:grid;grid-template-columns:268px 1fr;
  min-height:calc(100vh - 58px)}
.sidebar{border-right:1px solid var(--rule);padding:22px 16px;
  background:linear-gradient(180deg,rgba(255,253,248,.6),rgba(243,236,221,.35));
  position:sticky;top:58px;align-self:start;
  height:calc(100vh - 58px);overflow-y:auto;font-family:var(--font-sans)}
.side-section{margin-bottom:22px}
.side-section h3{margin:0 0 8px;color:var(--accent);font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  padding-bottom:6px;border-bottom:1px solid var(--rule)}
.side-section ul{margin:0;padding:0;list-style:none}
.side-section li a{display:block;padding:6px 10px;border-radius:7px;
  color:var(--ink-soft);font-size:13.5px;border-left:2px solid transparent;
  transition:all .15s}
.side-section li a:hover{background:var(--panel);color:var(--accent-deep);
  border-left-color:var(--accent);text-decoration:none;transform:translateX(2px)}

/* ---------------- content & cards ---------------- */
.content{padding:30px 32px 60px;max-width:1140px;margin:0 auto;width:100%}
.card{position:relative;background:var(--panel);border:1px solid var(--rule);
  border-radius:14px;padding:24px 26px;margin-bottom:24px;
  scroll-margin-top:78px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  border-radius:3px;background:linear-gradient(var(--accent),var(--gold));opacity:.0;
  transition:opacity .2s}
.card:hover::before{opacity:.9}
.card h2{margin:0 0 10px;font-family:var(--font-display);font-weight:600;
  font-size:23px;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.card > p{margin:8px 0 16px;color:var(--ink-soft);max-width:72ch}
.card p code{font-size:.82em}

/* hero (playground) */
.hero{color:#f6efe0;border:none;overflow:hidden;
  background:
    radial-gradient(900px 400px at 90% -40%, rgba(180,83,9,.55), transparent 60%),
    linear-gradient(135deg,var(--accent-deep) 0%, #0d3b47 55%, #15120e 100%)}
.hero::before{display:none}
.hero h2{color:#fff;font-size:34px;line-height:1.1}
.hero p{color:#dfe9ea;max-width:64ch}
.hero-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}

/* ---------------- buttons ---------------- */
.btn{background:var(--panel);color:var(--ink);border:1px solid var(--rule);
  padding:9px 15px;border-radius:9px;cursor:pointer;font-size:13.5px;
  font-family:var(--font-sans);font-weight:500;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm)}
.btn:hover{border-color:var(--accent);color:var(--accent-deep);
  transform:translateY(-1px);text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff;border:none;font-weight:600}
.btn.primary:hover{filter:brightness(1.08);color:#fff;
  box-shadow:0 8px 18px -8px var(--accent)}
.hero .btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(4px)}
.hero .btn.primary{background:#fff;color:var(--accent-deep)}
.hero .btn:hover{background:rgba(255,255,255,.22)}
.hero .btn.primary:hover{background:#fff}

/* ---------------- demo controls & rows ---------------- */
.row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin-top:10px}
.controls{display:flex;flex-direction:column;gap:11px;min-width:248px;flex:1;
  font-family:var(--font-sans)}
.controls label{display:flex;flex-direction:column;gap:4px;font-size:12px;
  color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.controls input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.controls input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}
.controls select,.controls input[type=file],.controls input[type=text]{
  background:var(--panel);color:var(--ink);border:1px solid var(--rule);
  padding:7px 9px;border-radius:8px;font-size:13px;font-family:var(--font-sans)}
.controls select:focus,.controls input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------------- figure plates (canvases) ---------------- */
canvas{background:var(--plate);border:1px solid var(--plate-rule);border-radius:10px;
  display:block;image-rendering:pixelated;cursor:crosshair;max-width:100%;
  box-shadow:var(--shadow-sm)}

.meta{font-size:13px;color:var(--muted);line-height:1.8;font-family:var(--font-sans)}
.meta b{color:var(--ink)}
.formula{font-family:var(--font-mono);background:var(--panel2);padding:10px 12px;
  border-radius:8px;color:var(--accent-deep);border:1px solid var(--rule);font-size:13px}
.matrix{font-family:var(--font-mono);background:var(--panel2);padding:10px 12px;
  border-radius:8px;font-size:11.5px;white-space:pre;color:var(--accent-deep);
  border:1px solid var(--rule)}

/* convolution kernel editor */
.kernel{display:grid;gap:3px;background:var(--panel2);padding:8px;border-radius:8px;
  width:fit-content;border:1px solid var(--rule)}
.kernel input{width:46px;text-align:center;background:var(--panel);color:var(--ink);
  border:1px solid var(--rule);border-radius:5px;padding:4px;
  font-family:var(--font-mono);font-size:11.5px}
.kernel input:focus{outline:none;border-color:var(--accent)}

.stats{font-family:var(--font-mono);font-size:11.5px;background:var(--plate);
  border:1px solid var(--plate-rule);border-radius:8px;padding:10px;max-height:170px;
  overflow-y:auto;color:#8fd6c2}

/* CNN feature-map stack */
.cnn-stack{display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.cnn-stack canvas{width:82px;height:82px;border:1px solid var(--accent)}
.cnn-stack .layer{display:flex;flex-direction:column;align-items:center;gap:5px}
.cnn-stack .layer span{font-size:10px;color:var(--muted);font-family:var(--font-sans);
  text-transform:uppercase;letter-spacing:.05em}

/* architecture diagram plate */
.diagram{flex:1;background:var(--plate);border:1px solid var(--plate-rule);
  border-radius:10px;padding:14px;min-height:280px;box-shadow:var(--shadow-sm)}
.diagram svg{width:100%;height:auto}

.ssl-views{display:grid;grid-template-columns:repeat(4,82px);gap:8px}
.ssl-views canvas{width:82px;height:82px}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;top:0;height:auto;border-right:none;
    border-bottom:1px solid var(--rule);display:none}
  .sidebar.open{display:block}
  #nav-toggle{display:inline-block}
  .content{padding:22px 18px 48px}
  .hero h2{font-size:27px}
}