:root{
  --bg:#fff8ec;
  --ink:#22223b;
  --ink-soft:#4b4b6a;
  --line:#22223b;
  --paper:#ffffff;

  --sky:#7cc4ff;
  --sky-deep:#3a8fd6;
  --sun:#ffd34d;
  --sun-deep:#e9a800;
  --mint:#7fe0b3;
  --mint-deep:#1f9d6a;
  --coral:#ff8a7a;
  --coral-deep:#d94d3a;
  --lav:#c6a8ff;
  --lav-deep:#7a4ed9;
  --rose:#ffb3d1;

  --r-lg:22px;
  --r-md:14px;
  --r-sm:8px;
  --shadow: 4px 4px 0 var(--line);
  --shadow-lg: 6px 6px 0 var(--line);

  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Fredoka', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---- background grid ---- */
.bg-decor{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(124,196,255,.25) 0 14px, transparent 15px),
    radial-gradient(circle at 88% 22%, rgba(255,211,77,.28) 0 18px, transparent 19px),
    radial-gradient(circle at 78% 78%, rgba(127,224,179,.25) 0 16px, transparent 17px),
    radial-gradient(circle at 18% 82%, rgba(198,168,255,.28) 0 14px, transparent 15px);
}

/* ---- shell ---- */
.shell{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  padding: 28px 28px 120px;
}

/* ---- top bar ---- */
.topbar{
  display:flex; align-items:center; gap:18px;
  margin-bottom:22px;
}
.logo{
  display:flex; align-items:center; gap:12px;
  font-weight:700; font-size:22px;
}
.logo-mark{
  width:46px; height:46px; border-radius:14px;
  background:var(--sun);
  border:3px solid var(--line);
  box-shadow: var(--shadow);
  display:grid; place-items:center;
  font-size:24px;
}
.logo-mark .stack{
  width:22px; height:22px;
  background:
    linear-gradient(var(--line),var(--line)) 0 0/100% 3px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 50%/100% 3px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 100%/100% 3px no-repeat;
}
.crumb{
  margin-left:auto;
  background:white;
  border:3px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  font-weight:600;
  box-shadow: var(--shadow);
  font-size:14px;
}

/* ---- progress ---- */
.progress{
  display:flex; gap:8px; margin-bottom:22px;
  background:white; border:3px solid var(--line); border-radius:999px;
  padding:8px; box-shadow: var(--shadow);
}
.dot{
  flex:1; height:14px; border-radius:999px;
  background:#ece6d4;
  border:2px solid var(--line);
  position:relative; cursor:pointer;
  transition:transform .15s;
}
.dot:hover{transform:translateY(-2px)}
.dot.done{background:var(--mint)}
.dot.current{background:var(--sun); transform:scaleY(1.25)}
.dot .num{
  position:absolute; left:50%; top:-22px; transform:translateX(-50%);
  font-size:11px; font-weight:600; color:var(--ink-soft);
  opacity:0; transition:opacity .15s;
}
.dot:hover .num, .dot.current .num{opacity:1}

/* ---- card / step ---- */
.card{
  background:var(--paper);
  border:3px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 40px;
  position:relative;
  animation: pop .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{
  from{ opacity:0; transform: translateY(12px) scale(.985) }
  to{ opacity:1; transform: translateY(0) scale(1) }
}

.step-tag{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--lav); border:3px solid var(--line);
  border-radius:999px; padding:6px 14px 6px 8px;
  font-weight:600; font-size:14px; color:var(--ink);
  box-shadow:2px 2px 0 var(--line);
  margin-bottom:18px;
}
.step-tag .n{
  display:inline-grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  background:white; border:2px solid var(--line);
  font-weight:700; font-size:13px;
}

h1.step-title{
  font-size: clamp(32px, 4.5vw, 52px);
  line-height:1.04;
  margin: 0 0 10px;
  font-weight:600;
  letter-spacing:-.01em;
}
.step-lede{
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 0 28px;
  line-height:1.45;
}

/* ---- footer nav ---- */
.foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:28px; gap:12px;
}
.btn{
  font-family:inherit; font-weight:600; font-size:16px;
  border:3px solid var(--line);
  border-radius:14px;
  padding:12px 22px;
  background:white; color:var(--ink);
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--line); }
.btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--line); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; transform:none; box-shadow: var(--shadow);}
.btn.primary{ background: var(--sun); }
.btn.ghost{ background: transparent; border-color: transparent; box-shadow:none; color: var(--ink-soft); }
.btn.ghost:hover{ transform:none; box-shadow:none; color: var(--ink); }

/* ---- reusable bits ---- */
.row{ display:flex; gap:18px; flex-wrap:wrap; }
.col{ display:flex; flex-direction:column; gap:18px; }

.callout{
  background: #fff5d6;
  border:3px dashed var(--sun-deep);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size:15px;
  color:var(--ink);
  display:flex; gap:12px; align-items:flex-start;
}
.callout .ico{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:50%;
  background:var(--sun); border:2px solid var(--line);
  display:grid; place-items:center; font-weight:700;
}

/* mini table component */
.mini-table{
  border:3px solid var(--line);
  border-radius: var(--r-md);
  overflow:hidden; background:white;
  box-shadow: var(--shadow);
  font-size:14px;
  min-width:280px;
}
.mini-table .cap{
  background: var(--lav);
  border-bottom:3px solid var(--line);
  padding:8px 12px;
  font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.mini-table .cap.sky{ background: var(--sky) }
.mini-table .cap.mint{ background: var(--mint) }
.mini-table .cap.coral{ background: var(--coral) }
.mini-table .cap.rose{ background: var(--rose) }
.mini-table table{ width:100%; border-collapse:collapse; }
.mini-table th, .mini-table td{
  padding:8px 12px; text-align:left;
  border-bottom:1px dashed #d9d3c1;
}
.mini-table th{ font-weight:600; background:#fbf3df; color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.04em }
.mini-table tr:last-child td{ border-bottom:none }
.mini-table td.pk{ font-family:var(--mono); color:var(--lav-deep); font-weight:700 }
.mini-table td.fk{ font-family:var(--mono); color:var(--coral-deep); font-weight:700 }
.mini-table tr.hl td{ background: #fff5d6; }

/* code block */
.code{
  background:#22223b;
  color:#f6f4ed;
  border:3px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size:14px;
  line-height:1.55;
  box-shadow: var(--shadow);
  white-space:pre;
  overflow-x:auto;
}
.code .kw{ color:#ffd34d; font-weight:700 }
.code .str{ color:#7fe0b3 }
.code .num{ color:#ff8a7a }
.code .cm{ color:#8a8aa8; font-style:italic }

/* chips */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:white; border:2px solid var(--line); border-radius:999px;
  padding:6px 12px; font-weight:500; font-size:14px;
}
.chip .sw{ width:14px; height:14px; border-radius:4px; border:2px solid var(--line) }

/* small helpers */
.h-line{ height:3px; background:var(--line); border-radius:2px; flex:1 }
.muted{ color: var(--ink-soft) }
.mono{ font-family: var(--mono) }

/* step-1 illustration */
.box-stack{
  position:relative;
  width:280px; height:280px;
  flex: 0 0 auto;
}
.box{
  position:absolute;
  width:200px; height:60px;
  border:3px solid var(--line);
  border-radius:14px;
  display:flex; align-items:center; padding-left:16px;
  font-weight:600; font-size:14px;
  box-shadow: var(--shadow);
}
.box::before{
  content:""; width:24px; height:24px; border-radius:6px;
  background: var(--line); margin-right:12px; opacity:.15;
}

/* step 4 key */
.key-vis{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sun); border:3px solid var(--line);
  border-radius:999px; padding:8px 16px;
  font-weight:700; font-family:var(--mono);
  box-shadow: var(--shadow);
}

/* relations svg lines */
.relation-stage{
  position:relative; padding:18px 0; min-height:260px;
}
.relation-stage svg.lines{
  position:absolute; inset:0; pointer-events:none;
  width:100%; height:100%;
}

/* CRUD buttons */
.crud-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.crud-card{
  border:3px solid var(--line);
  border-radius:var(--r-md);
  padding:16px;
  background:white;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition: transform .12s;
}
.crud-card:hover{ transform: translate(-2px,-2px) }
.crud-card.active{ background: var(--sun); }
.crud-card .big{ font-size:32px; font-weight:700 }
.crud-card .lab{ font-size:13px; color:var(--ink-soft); margin-top:4px }
.crud-card .sql{ font-family:var(--mono); font-size:11px; margin-top:6px; color:var(--ink) }

/* playground */
.pg{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
}
.pg textarea{
  width:100%; min-height:160px;
  font-family:var(--mono); font-size:14px;
  background:#22223b; color:#f6f4ed;
  border:3px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; resize:vertical;
  box-shadow:var(--shadow);
  line-height:1.55;
}
.pg textarea:focus{ outline:none; box-shadow:6px 6px 0 var(--line) }
.pg-result{
  background:white; border:3px solid var(--line); border-radius:var(--r-md);
  padding:14px; box-shadow:var(--shadow); min-height:160px;
  font-size:14px; overflow:auto;
}
.pg-result.err{ background:#ffece8 }
.preset-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.preset{
  background:white; border:2px solid var(--line); border-radius:999px;
  padding:6px 12px; font-family:var(--mono); font-size:12px;
  cursor:pointer; font-weight:500;
}
.preset:hover{ background:var(--sun) }

/* data type cards */
.dt-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.dt-card{
  border:3px solid var(--line); border-radius:var(--r-md);
  padding:16px; background:white; box-shadow: var(--shadow);
  cursor:pointer; transition: transform .12s;
}
.dt-card:hover{ transform: translate(-2px,-2px) }
.dt-card .lab{ font-weight:700; font-size:18px; }
.dt-card .ex{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); margin-top:6px }
.dt-card.sky{ background:#dff0ff }
.dt-card.mint{ background:#e0f7ec }
.dt-card.coral{ background:#ffe1db }
.dt-card.lav{ background:#ede2ff }
.dt-card.sun{ background:#fff1c7 }
.dt-card.rose{ background:#ffe1ec }

/* normalization animation */
.norm-stage{ display:grid; grid-template-columns: 1fr auto 1fr; gap:18px; align-items:center }
.norm-stage .arrow{
  font-size:46px; font-weight:700; color:var(--coral-deep);
  text-align:center;
}

/* responsive */
@media (max-width: 860px){
  .crud-grid{ grid-template-columns: repeat(2, 1fr) }
  .dt-grid{ grid-template-columns: repeat(2, 1fr) }
  .pg{ grid-template-columns: 1fr }
  .norm-stage{ grid-template-columns: 1fr; }
  .norm-stage .arrow{ transform: rotate(90deg) }
  .card{ padding: 24px 20px }
}

/* tiny float anim for illustrations */
.float{
  animation: float 3.5s ease-in-out infinite;
}
.float.delay-1{ animation-delay:.4s }
.float.delay-2{ animation-delay:.8s }
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

/* spinner-ish reveal for select results */
.reveal{ animation: reveal .35s ease }
@keyframes reveal{
  from{ opacity:0; transform: translateY(6px) }
  to{ opacity:1; transform: translateY(0) }
}

/* badge */
.badge{
  display:inline-block;
  background:var(--mint); border:2px solid var(--line);
  border-radius:6px; padding:1px 8px;
  font-family:var(--mono); font-size:11px; font-weight:700;
}
.badge.coral{ background:var(--coral) }
.badge.sky{ background:var(--sky) }
.badge.lav{ background:var(--lav) }
.badge.sun{ background:var(--sun) }