/* ============================================================
   Claude Explainers — shared system
   Warm, editorial, Claude-flavored. One click = one idea.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces */
  --bg:        #EFEBE2;   /* warm paper */
  --bg-2:      #E7E2D6;
  --panel:     #FBFAF6;   /* card / window */
  --panel-2:   #F4F1E9;
  --line:      #D8D2C4;
  --line-soft: #E4DFD3;

  /* ink */
  --ink:       #21201C;
  --ink-2:     #57544C;
  --ink-3:     #8C887C;

  /* claude terracotta */
  --terra:     #C45B3C;
  --terra-2:   #D9795A;
  --terra-3:   #E9B7A4;
  --terra-wash:#F2DDD2;

  /* semantic */
  --slate:     #6E7174;   /* local / real */
  --slate-2:   #A9ABAD;
  --blue:      #5C86D6;   /* icloud / cloud */
  --blue-soft: #BFD0F0;
  --red:       #CE392F;   /* failure */
  --green:     #4E9468;   /* safe / git */
  --green-soft:#BFE0CC;
  --hub:       #17150F;   /* github near-black */

  --shadow-s: 0 1px 2px rgba(33,32,28,.06), 0 2px 6px rgba(33,32,28,.05);
  --shadow-m: 0 2px 6px rgba(33,32,28,.07), 0 12px 28px rgba(33,32,28,.10);
  --shadow-l: 0 8px 18px rgba(33,32,28,.10), 0 30px 60px rgba(33,32,28,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-2) 0%, var(--bg) 55%) fixed;
  color:var(--ink);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  cursor:default;
  user-select:none;
}

/* ----------------------------- frame ----------------------------- */
.frame{
  position:fixed; inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(18px,2.4vw,34px);
  gap:clamp(10px,1.4vh,18px);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}
.eyebrow{
  display:flex; align-items:center; gap:12px; white-space:nowrap; flex:none;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.eyebrow .mark{
  width:13px; height:13px; border-radius:4px;
  background:var(--terra);
  box-shadow:0 0 0 4px var(--terra-wash);
}
.eyebrow b{ color:var(--ink-2); font-weight:600; }

.nav{ display:flex; align-items:center; gap:16px; }
.counter{
  font-family:'Spline Sans Mono', monospace;
  font-size:12px; letter-spacing:.08em; color:var(--ink-3);
}
.dots{ display:flex; gap:7px; align-items:center; }
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--line); cursor:pointer;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.dot:hover{ transform:scale(1.25); }
.dot.on{ background:var(--terra); }

/* ----------------------------- stage ----------------------------- */
.clickzone{ position:relative; min-height:0; cursor:pointer; }
.stage{
  position:absolute; inset:0;
  display:grid; place-items:center;
  min-height:0;
}
.stagewrap{
  position:relative;
  width:min(100%, 1080px);
  height:100%;
  display:grid; place-items:center;
}

/* ----------------------------- prompter --------------------------- */
.prompter{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:42px;
}
.say{
  font-family:'Newsreader', serif;
  font-style:italic;
  font-size:clamp(15px,1.7vw,21px);
  line-height:1.35; color:var(--ink-2);
  max-width:78ch;
  transition:opacity .45s var(--ease);
}
.say::before{
  content:"“"; color:var(--terra-3); margin-right:.12em;
  font-style:normal;
}
.say::after{ content:"”"; color:var(--terra-3); margin-left:.06em; font-style:normal; }
.prompter.hide-notes .say{ opacity:0; }
.hint{
  flex:none;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); opacity:.7; white-space:nowrap;
}
.hint kbd{
  font-family:'Spline Sans Mono', monospace;
  background:var(--panel); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; font-size:10.5px; color:var(--ink-2);
}

/* --------------------------- reveal base -------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
[data-reveal].shown{ opacity:1; transform:none; }

/* shared label chips */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-2);
  background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:6px 13px;
  box-shadow:var(--shadow-s);
}
.tag .dotc{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); }
.mono{ font-family:'Spline Sans Mono', monospace; }
.serif{ font-family:'Newsreader', serif; }

.label-xs{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}

/* small badge */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:4px 9px; border-radius:999px;
}

/* checkmark + cross helpers */
@keyframes pop-in{ 0%{transform:scale(.4); opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1); opacity:1} }
@keyframes flash-red{ 0%{background:var(--red)} 100%{background:transparent} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.flash{ animation:flash-red .7s var(--ease); }
.shake{ animation:shake .5s var(--ease); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.12s !important; }
}