:root{
  --ink:#1c1c24;
  --ink-soft:#5a5a66;
  --paper:#fbfbf6;
  --card:#ffffff;
  --line:#e5e4da;
  --dot:#dcdccf;
  --accent:#2f2ac0;
  --accent-soft:#eeeefb;
  /* cluster colors (sticky-note palette) */
  --c1-bg:#fff4c2; --c1-bd:#ecd57f;
  --c2-bg:#d7ecff; --c2-bd:#a5cff2;
  --c3-bg:#d9f6df; --c3-bd:#a6e0b3;
  --c4-bg:#ffdede; --c4-bd:#f2b3b3;
  --c5-bg:#efe4ff; --c5-bd:#cbb3f2;
  --radius:12px;
  --shadow:0 1px 2px rgba(28,28,36,.05), 0 6px 20px rgba(28,28,36,.05);
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size:22px 22px;
  background-position:-11px -11px;
  line-height:1.55;
}
.notebook{
  max-width:900px;
  margin:0 auto;
  padding:clamp(20px,5vw,56px) clamp(16px,4vw,40px) 64px;
}
/* ---------- Masthead ---------- */
.masthead{ margin-bottom:40px; }
.eyebrow{
  font-family:"Space Grotesk", sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 10px;
}
.masthead__title{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:clamp(3rem,11vw,5.5rem);
  line-height:.92;
  letter-spacing:-.03em;
  margin:0 0 18px;
}
.masthead__lede{
  max-width:56ch;
  font-size:1.06rem;
  color:var(--ink-soft);
  margin:0 0 28px;
}
.meta-bar{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:14px;
  padding:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.meta-field{ display:flex; flex-direction:column; gap:6px; }
.meta-field__label{
  font-family:"Space Grotesk", sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.meta-field input{
  font:inherit;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
/* ---------- Blocks ---------- */
.block{
  margin-top:40px;
  padding:clamp(20px,3vw,32px);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.block__head{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--line);
}
.block__num{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:8px;
  padding:6px 10px;
  line-height:1;
  flex-shrink:0;
}
.block__title{
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:1.7rem;
  letter-spacing:-.01em;
  margin:0 0 4px;
}
.block__note{
  margin:0;
  color:var(--ink-soft);
  font-size:.95rem;
  max-width:64ch;
}
.block__note em{ font-style:normal; color:var(--accent); font-weight:600; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field__label{
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:1rem;
}
.field__hint{
  font-size:.85rem;
  color:var(--ink-soft);
  margin-bottom:4px;
}
textarea, .field input{
  font-family:Georgia, "Times New Roman", serif;
  font-size:1rem;
  line-height:1.5;
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  resize:vertical;
}
textarea:focus, input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* ---------- POV builder (base) ---------- */
.pov{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:1.05rem;
  line-height:2.2;
}
.pov__lead{
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  color:var(--accent);
}
/* ---------- HMW list (base) ---------- */
.hmw{ display:flex; flex-direction:column; gap:14px; }
.hmw__row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.hmw__tag{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:.9rem;
  color:#fff;
  background:var(--accent);
  border-radius:7px;
  padding:9px 12px;
  line-height:1;
  flex-shrink:0;
  white-space:nowrap;
}
/* ---------- Persona card ---------- */
.persona-title{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:clamp(1.4rem,4vw,2rem);
  letter-spacing:-.01em;
  margin:0 0 18px;
  text-align:center;
}
.persona-card{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--card);
}
.persona{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:26px;
  padding:26px;
  align-items:start;
}
.persona__photo{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  text-align:center;
}
.persona__frame{
  width:190px;
  height:190px;
  border-radius:50%;
  padding:5px;
  background:linear-gradient(140deg,#3b6fe1,#45b877);
  box-shadow:var(--shadow);
}
.persona__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  border:4px solid var(--card);
}
.persona__tagline{
  width:100%;
  margin:0;
  text-align:center;
  font-style:italic;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.4;
}
.persona__body{ display:flex; flex-direction:column; gap:20px; }
.persona__row{ display:flex; gap:12px; align-items:flex-start; }
.persona__icon{
  width:34px; height:34px;
  flex:none;
  border-radius:8px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.persona__icon svg{ width:20px; height:20px; }
.persona__rowbody{ flex:1; display:flex; flex-direction:column; gap:4px; }
.persona__rowtitle{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:1.05rem;
}
.persona__voice{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:18px 26px;
  background:var(--accent-soft);
  border-top:1px solid var(--line);
}
.persona__voice .persona__icon{ background:#fff; }
.persona__voice-body{ flex:1; }
.persona__voice-title{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700;
  font-size:1rem;
  margin-bottom:4px;
}
.foot{
  margin-top:40px;
  text-align:center;
  font-size:.85rem;
  color:var(--ink-soft);
}
.foot strong{ color:var(--ink); }
@media (max-width:640px){
  .clusters{ grid-template-columns:1fr; }
  .meta-bar{ grid-template-columns:1fr; }
  .persona{ grid-template-columns:1fr; }
  .persona__photo{ margin:0 auto; }
}
@media print{
  body{ background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .foot{ display:none; }
}

/* =====================================================================
   STATIC PRESENTATION LAYER  (added)
   Fillable fields -> finished, read-only cards with color.
   Additive; overrides earlier rules by source order.
   ===================================================================== */

/* rotating accents */
.p-indigo { --c:#3f39c9; --c-bg:#eeeefb; }
.p-amber  { --c:#bf7d10; --c-bg:#fbf0d9; }
.p-teal   { --c:#0e938e; --c-bg:#e0f4f2; }
.p-green  { --c:#3f9d5f; --c-bg:#e7f6ec; }
.p-coral  { --c:#d75f5f; --c-bg:#fce7e7; }

/* section-coded numbers */
.block--s1 { --c:#3f39c9; --c-bg:#eeeefb; }
.block--s2 { --c:#7c53e6; --c-bg:#f0eafe; }
.block--s3 { --c:#0e938e; --c-bg:#e0f4f2; }
.block--s4 { --c:#e8863b; --c-bg:#fdf0e3; }
.block--s5 { --c:#d75f5f; --c-bg:#fce7e7; }
.block--s1 .block__num,.block--s2 .block__num,
.block--s3 .block__num,.block--s4 .block__num,
.block--s5 .block__num { color:var(--c); background:var(--c-bg); }
.block--s1 .block__head,.block--s2 .block__head,
.block--s3 .block__head,.block--s4 .block__head,
.block--s5 .block__head { border-bottom-color:var(--c); border-bottom-style:solid; }
.block--s1 .block__note em,.block--s2 .block__note em,
.block--s3 .block__note em,.block--s4 .block__note em,
.block--s5 .block__note em { color:var(--c); }

/* read-only text preserves the old textarea line breaks */
.static-text{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem; line-height:1.55; color:var(--ink);
  white-space:pre-line; margin:0;
}
/* filled value chips */
.static-input{
  font-family:Georgia,"Times New Roman",serif; font-size:1rem;
  padding:9px 12px; border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:8px;
  background:var(--paper); color:var(--ink); display:block;
}

/* Section 1: define statement cards */
.field--card{
  background:var(--card); border:1px solid var(--line);
  border-left:6px solid var(--c,var(--accent));
  border-radius:var(--radius); padding:18px 18px 16px;
  box-shadow:var(--shadow); gap:4px;
}
.field--card .field__label{ color:var(--c,var(--ink)); }
.field--card .static-text{
  margin-top:8px; background:var(--c-bg,var(--paper));
  border-radius:8px; padding:12px 14px;
}

/* =========================================================
   AFFINITY MAP — dynamic upgrade
   Gradient headers with a slow live shimmer, cluster-coloured
   glow, numbered pins, hover lift, and a full-width keystone.
   ========================================================= */
.clusters{
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  position:relative;
}
.cluster{
  --cl:#3b9ae1; --cl2:#2f7fc4; --cl-bg:#eaf5fd; --glow:rgba(59,154,225,.26);
  position:relative;
  border:none;
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 6px 20px var(--glow);
  transition:transform .22s ease, box-shadow .22s ease;
}
.cluster:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px var(--glow);
}
.cluster__bar{
  position:relative;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  min-height:58px;
  color:#fff;
  background:linear-gradient(135deg, var(--cl), var(--cl2));
  background-size:180% 180%;
  animation:clusterShimmer 9s ease-in-out infinite;
}
@keyframes clusterShimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.cluster__icon{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.24);
  border-radius:9px;
}
.cluster__icon svg{ width:18px; height:18px; }
.cluster__title{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700; font-size:1.02rem; color:#fff;
  flex:1; min-width:0;
}
.cluster__num{
  font-family:"Space Grotesk", sans-serif;
  font-weight:700; font-size:1.6rem;
  color:rgba(255,255,255,.38);
  line-height:1;
}
.cluster__notes{
  padding:18px 16px 16px;
  background:var(--cl-bg);
  flex:1;
}
.cluster__notes .static-text{
  position:relative;
  background:#fff;
  border-radius:10px;
  padding:14px 15px 13px;
  box-shadow:0 2px 6px rgba(28,28,36,.08);
}
/* push-pin dot */
.cluster__notes .static-text::before{
  content:"";
  position:absolute; top:-7px; left:18px;
  width:13px; height:13px; border-radius:50%;
  background:var(--cl);
  box-shadow:0 2px 3px rgba(0,0,0,.28), inset 0 -2px 2px rgba(0,0,0,.12);
}
/* per-cluster palette */
.cluster--1{ --cl:#3b9ae1; --cl2:#2f7fc4; --cl-bg:#eaf5fd; --glow:rgba(59,154,225,.26); }
.cluster--2{ --cl:#45b877; --cl2:#369a62; --cl-bg:#e9f8ef; --glow:rgba(69,184,119,.26); }
.cluster--3{ --cl:#25b3a6; --cl2:#1c9084; --cl-bg:#e3f7f4; --glow:rgba(37,179,166,.26); }
.cluster--4{ --cl:#9a6fd6; --cl2:#7d52bd; --cl-bg:#f1eafc; --glow:rgba(154,111,214,.26); }
.cluster--5{ --cl:#e8863b; --cl2:#cf6f28; --cl-bg:#fdf0e3; --glow:rgba(232,134,59,.28); }
/* keystone cluster spans the full width */
.cluster--keystone{ grid-column:1 / -1; }

/* =========================================================
   POV builder — token chips + highlighted final statement
   ========================================================= */
.pov{ gap:10px; font-size:1.06rem; line-height:1.9; }
.pov__token{
  font-family:Georgia,"Times New Roman",serif;
  background:var(--accent-soft); color:var(--accent);
  font-weight:600; padding:8px 15px;
  border:1px solid #d6d4f4; border-radius:999px;
}
.pov__lead{ color:var(--ink-soft); }
.pov-final{
  margin-top:22px;
  background:linear-gradient(135deg,#f3f2fe,#eef7f5);
  border:1px solid var(--line);
  border-left:6px solid var(--accent);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:var(--shadow);
}
.pov-final__label{
  font-family:"Space Grotesk", sans-serif;
  font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent);
}
.pov-final__text{
  margin:6px 0 0;
  font-family:"Space Grotesk", sans-serif;
  font-weight:600; font-size:1.18rem; line-height:1.4;
  color:var(--ink);
}

/* =========================================================
   HMW — accent question cards
   ========================================================= */
.hmw__row{
  align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-left:5px solid var(--c,var(--accent));
  border-radius:12px;
  padding:14px 16px;
  box-shadow:var(--shadow);
}
.hmw__row .hmw__tag{ background:var(--c,var(--accent)); }
.hmw__q{
  font-family:"Space Grotesk", sans-serif;
  font-weight:500; font-size:1.02rem; color:var(--ink);
  margin:0; line-height:1.35;
}
.hmw--1{ --c:#3f39c9; }
.hmw--2{ --c:#0e938e; }
.hmw--3{ --c:#e8863b; }

/* =========================================================
   Persona — static text + quote callout
   ========================================================= */
.persona__quote{
  font-style:italic;
  background:#fff;
  border:1px solid var(--c5-bd);
  border-left:4px solid #9a6fd6;
  border-radius:10px;
  padding:12px 14px;
}

/* static helpers */
.static-question{
  font-family:"Space Grotesk", sans-serif;
  font-weight:600; color:var(--ink);
  line-height:1.35; margin:0;
}

@media print{
  .field--card,.cluster,.hmw__row,.persona-card,.pov-final{ break-inside:avoid; }
  .cluster__bar{ animation:none; }
}
@media (prefers-reduced-motion: reduce){
  .cluster__bar{ animation:none; }
  .cluster,.cluster:hover{ transition:none; transform:none; }
}

/* ===== INFINITY MAP ===== */
.infinity-map{ margin:0 auto 26px; text-align:center; }
.infinity-map__svg{ width:100%; max-width:820px; height:auto; overflow:visible; display:block; margin:0 auto; }
.infinity-map__track{ fill:none; stroke:#ece9da; stroke-width:18; stroke-linecap:round; }
.infinity-map__flow{ fill:none; stroke:url(#infGrad); stroke-width:8; stroke-linecap:round; stroke-dasharray:18 26; animation:infFlow 2.8s linear infinite; }
@keyframes infFlow{ to{ stroke-dashoffset:-440; } }
.infinity-map__node circle{ stroke:#fff; stroke-width:5; filter:drop-shadow(0 4px 6px rgba(28,28,36,.30)); }
.infinity-map__node .num{ fill:#fff; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:30px; text-anchor:middle; dominant-baseline:central; }
.infinity-map__label{ fill:var(--ink); font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:18px; text-anchor:middle; }
.infinity-map__node{ transform-box:fill-box; transform-origin:center; animation:nodePulse 3s ease-in-out infinite; }
.infinity-map__node--2{ animation-delay:.4s; } .infinity-map__node--3{ animation-delay:.8s; }
.infinity-map__node--4{ animation-delay:1.2s; } .infinity-map__node--5{ animation-delay:1.6s; }
@keyframes nodePulse{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.infinity-map__caption{ margin:20px auto 0; max-width:56ch; font-size:1rem; color:var(--ink-soft); font-style:italic; line-height:1.55; }
@media (prefers-reduced-motion:reduce){ .infinity-map__flow,.infinity-map__node{ animation:none; } }
@media print{ .infinity-map__flow,.infinity-map__node{ animation:none; } }

codecraft-web-project-footer {
    display: none !important;
}