/* NUMBER SYSTEMS*/
/* Keep at top of global styles or injected layout */

.notebook-container-v3 {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  font-family: cursive !important;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

.notebook-text {
  text-align: center;
  line-height: 1.4;
  margin: 0.5rem auto;
  max-width: 750px;
}

.q-text {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
}

.f-text {
  color: var(--c-green);
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-top: 0.5rem;
}

.cyan-hl { color: var(--c-cyan); font-weight: bold; }
.pink-hl { color: var(--c-pink); font-weight: bold; }

.notebook-container-v3 svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   UNIT 1 — Course Intro. Clean, static, graphics-free.
   Scoped under .u1. Palette is Unit 3's exactly.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --u1-pink:var(--c-pink); --u1-cyan:var(--c-cyan); --u1-gold:var(--c-gold); --u1-green:var(--c-green);
  --u1-purple:var(--c-purple); --u1-orange:var(--c-orange); --u1-red:var(--c-orange); --u1-ice:var(--c-cyan);
  --u1-line:rgba(255,255,255,.12); --u1-panel:rgba(255,255,255,.035);
  --u1-dim:rgba(255,255,255,.72); --u1-faint:rgba(255,255,255,.45);
  --u1-ui:'Outfit',system-ui,-apple-system,"Segoe UI",sans-serif;}
.u1{ color:#fff; font-family:var(--u1-ui); max-width:880px; margin:0 auto; }

/* colour handles — set --u1-c per element */
.c-pink{--u1-c:var(--u1-pink)} .c-cyan{--u1-c:var(--u1-cyan)} .c-gold{--u1-c:var(--u1-gold)}
.c-green{--u1-c:var(--u1-green)} .c-purple{--u1-c:var(--u1-purple)} .c-orange{--u1-c:var(--u1-orange)}
.c-red{--u1-c:var(--u1-red)} .c-ice{--u1-c:var(--u1-ice)}

/* hero (text only, no image) */
.u1-hero{text-align:center;margin:6px 0 34px}
.u1-eyebrow{font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--u1-cyan)}
.u1-title{font-weight:800;font-size:clamp(2.4rem,7vw,3.8rem);line-height:1.02;letter-spacing:-.02em;margin:.35rem 0 .5rem}
.u1-sub{color:var(--u1-dim);font-size:1.05rem;line-height:1.5;max-width:60ch;margin:0 auto}
.u1-sub b{color:#fff}

/* section scaffolding */
.u1-sec{margin:38px 0}
.u1-label{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--u1-c,var(--u1-cyan));margin-bottom:.5rem}
.u1-label::after{content:"";flex:1;height:1px;background:var(--u1-line)}
.u1-lead{color:var(--u1-dim);font-size:1rem;line-height:1.6;margin:0 0 1.1rem;max-width:70ch}
.u1-lead b{color:#fff}
h2.u1-h{font-weight:800;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.01em;margin:0 0 .5rem}

/* card grid */
.u1-grid{display:grid;gap:.8rem}
.u1-grid.cols-2{grid-template-columns:1fr 1fr}
.u1-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){.u1-grid.cols-2,.u1-grid.cols-3{grid-template-columns:1fr}}

.u1-card{border:1px solid var(--u1-line);border-top:3px solid var(--u1-c,var(--u1-cyan));
  background:var(--u1-panel);border-radius:14px;padding:1rem 1.15rem}
.u1-card .k{font-weight:800;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--u1-c,var(--u1-cyan));margin-bottom:.3rem}
.u1-card .t{font-weight:800;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:.4rem}
.u1-card .b{color:var(--u1-dim);font-size:.96rem;line-height:1.55}
.u1-card .b b{color:#fff}

/* labelled rows (expectations / grading) */
.u1-rows{display:flex;flex-direction:column;gap:.7rem}
.u1-row{display:flex;border:1px solid var(--u1-line);border-radius:13px;overflow:hidden;background:var(--u1-panel)}
.u1-row .tab{flex:0 0 128px;background:var(--u1-c);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:.7rem .55rem;font-weight:800;font-size:.72rem;line-height:1.2;letter-spacing:.03em}
.u1-row.dark-ink .tab{color:#0a0a0f} .u1-row.light-ink .tab{color:#fff}
.u1-row .body{flex:1;padding:.85rem 1.15rem;min-width:0}
.u1-row .body .rt{font-weight:800;font-size:1.05rem;color:var(--u1-c);margin-bottom:.25rem}
.u1-row .body p{color:var(--u1-dim);font-size:.96rem;line-height:1.55;margin:0}
@media(max-width:560px){.u1-row{flex-direction:column}.u1-row .tab{flex-basis:auto;padding:.5rem}}

/* callouts */
.u1-callout{border:1px solid var(--u1-line);border-left:4px solid var(--u1-c,var(--u1-gold));
  background:color-mix(in srgb,var(--u1-c,var(--u1-gold)) 7%,transparent);border-radius:12px;padding:.95rem 1.25rem;margin:1rem 0}
.u1-callout .h{font-weight:800;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--u1-c,var(--u1-gold));margin-bottom:.35rem}
.u1-callout p{color:var(--u1-dim);font-size:1rem;line-height:1.6;margin:0}
.u1-callout p b{color:#fff}

/* good / bad compare */
.u1-compare{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:640px){.u1-compare{grid-template-columns:1fr}}
.u1-pane{border:1px solid var(--u1-line);border-radius:13px;padding:1rem 1.1rem;background:var(--u1-panel)}
.u1-pane.bad{border-color:color-mix(in srgb,var(--u1-red) 35%,transparent)}
.u1-pane.good{border-color:color-mix(in srgb,var(--u1-green) 35%,transparent)}
.u1-pane .ph{font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}
.u1-pane.bad .ph{color:var(--u1-red)} .u1-pane.good .ph{color:var(--u1-green)}
.u1-pane .chips{display:flex;flex-direction:column;gap:.45rem}
.chip{border-radius:8px;padding:.5rem .75rem;font-size:.92rem;line-height:1.4}
.u1-pane.bad .chip{background:color-mix(in srgb,var(--u1-red) 9%,transparent);color:var(--u1-faint);font-style:italic}
.u1-pane.good .chip{background:color-mix(in srgb,var(--u1-green) 9%,transparent);color:rgba(255,255,255,.85)}

/* prompt chip (Meet Aria examples) */
.u1-prompt{margin-top:.55rem;border-radius:8px;padding:.5rem .75rem;font-size:.9rem;font-style:italic;
  background:color-mix(in srgb,var(--u1-c,var(--u1-cyan)) 10%,transparent);color:rgba(255,255,255,.9)}

/* IPO example card (In / Do / Out) */
.u1-ipo{border:1px solid var(--u1-line);border-top:3px solid var(--u1-c,var(--u1-cyan));background:var(--u1-panel);border-radius:14px;overflow:hidden}
.u1-ipo .cap{font-weight:800;font-size:1rem;padding:.7rem 1rem;background:color-mix(in srgb,var(--u1-c,var(--u1-cyan)) 12%,transparent);color:var(--u1-c)}
.u1-ipo .lines{padding:.85rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.u1-ipo .ln{display:flex;gap:.6rem;align-items:baseline}
.u1-ipo .tag{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:800;padding:.12rem .45rem;border-radius:5px}
.u1-ipo .tag.in{background:color-mix(in srgb,var(--u1-green) 18%,transparent);color:var(--u1-green)}
.u1-ipo .tag.do{background:color-mix(in srgb,var(--u1-gold) 18%,transparent);color:var(--u1-gold)}
.u1-ipo .tag.out{background:color-mix(in srgb,var(--u1-cyan) 18%,transparent);color:var(--u1-cyan)}
.u1-ipo .v{color:var(--u1-dim);font-size:.96rem;line-height:1.4}