:root {
  --primary:      #000000;
  --secondary:    #FFD6EE;
  --amber:        #5CE1E6;
  --header-blue:  #1a295b;
  --strong-pink:  #FF5BC0;
  --gray:         #8E8B88;
  --black:        #000000;
  --white:        #FFFFFF;
  --offwhite:     #F7F8FC;
  --page-bg:      #F8F9FC;
  --page-bg-alt:  var(--offwhite);
  --glass-bg:     rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.3);
  --glass-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --ease-out:     cubic-bezier(0.16,1,0.3,1);
  --spring:       cubic-bezier(0.34,1.56,0.64,1);
  --content-max:  1040px;
  --user-border:   var(--secondary);
  --claude-border: var(--black);
  --info-border:   var(--gray);
  --header-h:  96px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { direction:rtl; scroll-behavior:smooth; }
body { font-family:'Heebo',sans-serif; color:var(--black); background:var(--page-bg); line-height:1.7; overflow-x:hidden; }
h1,h2,h3,h4 { font-family:'Rubik',sans-serif; font-weight:800; line-height:1.3; }
img { max-width:100%; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
[data-lucide] { width:20px; height:20px; stroke-width:1.8; vertical-align:middle; }
.icon-sm  { width:16px; height:16px; }
.icon-lg  { width:28px; height:28px; }
.icon-xl  { width:48px; height:48px; }
.icon-primary  { color:var(--primary); }
.icon-secondary{ color:var(--secondary); }
.icon-muted    { color:rgba(0,0,0,0.45); }

/* ===== Logo Bar ===== */
.logo-bar {
  width:100%; height:var(--header-h); background:var(--header-blue); padding:2px 20px;
  display:flex; align-items:center; justify-content:center;
  direction:ltr; z-index:500;
  border-bottom:1px solid rgba(255,255,255,0.1);
  position:absolute; top:0; left:0; right:0;
}
.app-logo-bar { position:fixed; top:0; left:0; right:0; z-index:500; background:var(--header-blue); }
.logo-bar-center { width:calc(100% - 56px); max-width:410px; height:auto; display:block; }

/* ===== Hero ===== */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
  background:linear-gradient(135deg,#F8F9FC 0%,#F1F2FA 50%,#F8F9FC 100%);
}
.hero-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.45); z-index:1; }
.hero-side-fade { position:absolute; top:0; width:20%; height:100%; z-index:2; pointer-events:none; }
.hero-side-fade.left  { left:0;  background:linear-gradient(to right,rgba(241,242,250,1) 0%,rgba(241,242,250,0) 100%); }
.hero-side-fade.right { right:0; background:linear-gradient(to left, rgba(241,242,250,1) 0%,rgba(241,242,250,0) 100%); }

.hero-content {
  position:absolute; z-index:3; text-align:center;
  padding:2rem 3rem 2.5rem; max-width:640px; width:90%;
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:20px; border:1px solid rgba(255,255,255,0.4);
  left:50%; top:10vh; transform:translateX(-50%);
  transition:top 1.2s cubic-bezier(0.25,1,0.5,1);
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 16px;
  background:rgba(0,0,0,0.06); color:var(--primary);
  border-radius:50px; font-size:0.78rem; font-weight:700; margin-bottom:1rem;
  opacity:0; transform:translateY(20px);
}
.hero-content h1 { margin-bottom:0.4rem; letter-spacing:0.02em; }
.hero-title-eyebrow {
  display:inline-block; font-size:0.6em; font-weight:700; letter-spacing:0.28em;
  color:var(--amber); text-transform:uppercase; margin-bottom:0.6rem;
  padding:0.35em 0.9em; border:2px solid var(--amber); border-radius:50px;
  background:rgba(92,225,230,0.14);
  opacity:0; transform:translateY(30px);
}
.hero-title-main { display:inline-block; font-size:clamp(1.9rem,4.5vw,2.9rem); font-weight:800; color:var(--strong-pink); opacity:0; transform:translateY(30px); }
.hero-content .hero-subtitle { font-size:clamp(1.9rem,4.5vw,2.9rem); line-height:1.15; color:rgba(0,0,0,0.85); font-weight:800; margin-bottom:0.6rem; opacity:0; transform:translateY(30px); }
.hero-content p   { font-size:clamp(0.88rem,1.8vw,1rem); color:rgba(0,0,0,0.7); margin-bottom:1.5rem; opacity:0; transform:translateY(30px); }
.hero-btn-wrap {
  display:inline-block; padding:5px; border-radius:54px;
  background:linear-gradient(90deg, var(--amber), var(--strong-pink), var(--amber));
  background-size:200% 100%;
  animation:kineticBorder 2.4s linear infinite;
  box-shadow:0 0 14px rgba(92,225,230,0.35), 0 0 14px rgba(255,91,192,0.25);
  opacity:0; transform:translateY(30px);
}
.hero.animate .hero-btn-wrap { animation:kineticBorder 2.4s linear infinite, fadeUp 0.8s var(--ease-out) 1.1s forwards; }
@keyframes kineticBorder { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } }
.hero-btn {
  display:block; padding:15px 46px;
  background:var(--black); color:var(--white);
  border:none; border-radius:50px;
  font-family:'Heebo',sans-serif; font-size:1.1rem; font-weight:600;
  cursor:pointer;
  transition:transform 0.2s var(--spring), box-shadow 0.2s;
}
.hero-btn:hover, .hero-btn:focus-visible { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,0.2); }

.hero.animate .hero-badge      { animation:fadeUp 0.8s var(--ease-out) 0.3s forwards; }
.hero.animate .hero-title-eyebrow { animation:fadeUp 0.8s var(--ease-out) 0.4s forwards; }
.hero.animate .hero-title-main    { animation:fadeUp 0.8s var(--ease-out) 0.5s forwards; }
.hero.animate .hero-subtitle   { animation:fadeUp 0.8s var(--ease-out) 0.7s forwards; }
.hero.animate p                { animation:fadeUp 0.8s var(--ease-out) 0.9s forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
.hero-citation { color:var(--black) !important; font-weight:800 !important; }
.hero.animate .hero-citation { animation:fadeUp 0.8s var(--ease-out) 1.0s forwards; }
@keyframes kineticIn { to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }

/* ===== App Layout ===== */
.app { display:none; min-height:100vh; flex-direction:column; }
.app.visible { display:flex; }
.app-body { display:flex; align-items:flex-start; flex:1; padding-top:var(--header-h); }
.main-content {
  flex:1; min-width:0; padding:2rem 2rem 6rem;
  max-width:var(--content-max); margin:0 auto; width:100%;
}

/* ===== Sidebar (step menu) ===== */
.menu-toggle {
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  position:absolute; top:50%; right:16px; transform:translateY(-50%);
  border:none; background:rgba(255,255,255,0.15); color:#fff; cursor:pointer;
  transition:background 0.2s;
}
.menu-toggle:hover { background:rgba(255,255,255,0.25); }
.sidebar-backdrop { display:none; position:fixed; inset:0; top:var(--header-h); background:rgba(0,0,0,0.35); z-index:390; }
.sidebar {
  position:sticky; top:var(--header-h); align-self:flex-start;
  width:250px; flex-shrink:0; height:calc(100vh - var(--header-h));
  overflow-y:auto; overscroll-behavior:contain;
  padding:1.75rem 1.5rem 2rem 1.25rem;
  background:var(--header-blue); border-left:1px solid rgba(255,255,255,0.1);
}
.side-progress-track { position:relative; height:8px; background:rgba(255,255,255,0.12); border-radius:20px; margin-bottom:0.7rem; overflow:hidden; }
.side-progress-fill {
  position:absolute; top:0; right:0; left:0; height:100%; border-radius:20px;
  background:linear-gradient(90deg,var(--amber),var(--strong-pink));
  box-shadow:0 0 10px rgba(92,225,230,0.55), 0 0 10px rgba(255,91,192,0.4);
  transition:width 0.5s var(--ease-out);
}
.side-progress-label { font-size:0.78rem; font-weight:800; letter-spacing:0.02em; color:#fff; margin-bottom:1.8rem; }
.nav-group { margin-bottom:1.65rem; }
.nav-group:last-child { margin-bottom:0; }
.nav-group-label {
  display:flex; align-items:center; gap:6px;
  font-size:0.8rem; font-weight:800; letter-spacing:0.01em; text-transform:none;
  color:#fff; margin-bottom:0.6rem; padding-right:2px;
  white-space:nowrap;
}
.nav-group-label [data-lucide] { color:var(--amber); }
.side-steps { display:flex; flex-direction:column; gap:6px; }
.side-step {
  position:relative;
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:none; border-right:3px solid transparent; border-radius:10px; background:none;
  cursor:pointer; font-family:'Heebo',sans-serif; font-size:0.84rem;
  color:rgba(255,255,255,0.65); text-align:right; line-height:1.3;
  transition:background 0.18s, color 0.18s, transform 0.18s var(--spring), border-color 0.18s;
}
.side-step:hover { background:rgba(255,255,255,0.08); color:#fff; transform:translateX(-3px); }
.side-step.completed { color:rgba(255,255,255,0.85); }
.side-step.active {
  background:rgba(255,255,255,0.13); color:#fff; font-weight:700;
  border-right-color:var(--amber);
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
.side-step-num {
  position:relative;
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; font-weight:700;
  transition:background 0.15s, color 0.15s;
}
.side-step-num::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:4px; height:16px; border-radius:2px; background:rgba(255,255,255,0.14);
  transition:background 0.2s;
}
.side-step:last-child .side-step-num::after { display:none; }
.side-step-num [data-lucide] { width:12px; height:12px; stroke-width:3; }
.side-step.completed .side-step-num { background:#fff; color:var(--header-blue); }
.side-step.completed .side-step-num::after { background:var(--seg-color, rgba(255,255,255,0.3)); box-shadow:0 0 6px var(--seg-color, transparent); }
.side-step.active    .side-step-num { background:linear-gradient(135deg, var(--amber), #35c9cf); color:var(--header-blue); box-shadow:0 0 8px rgba(92,225,230,0.6); }

/* ===== Step ===== */
.step { display:none; }
.step.active { display:block; }
.step-header { margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:2px solid rgba(0,0,0,0.12); }
.step-number { font-size:0.75rem; font-weight:700; color:var(--primary); letter-spacing:0.14em; text-transform:uppercase; }
.step-title  { font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800; margin:0.3rem 0; color:#000000; }
.step-desc   { font-size:1.08rem; color:rgba(0,0,0,0.7); }
.hl-underline {
  position:relative; display:inline-block;
}
.hl-underline::after {
  content:''; position:absolute; right:-6%; left:-6%; bottom:-0.08em; height:0.42em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M14,26 C80,8 210,6 275,18' stroke='%23FF5BC0' stroke-width='15' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='284' cy='16' r='10' fill='%23FF5BC0'/%3E%3C/svg%3E");
  background-size:100% 100%; background-repeat:no-repeat; pointer-events:none;
}
.section-label { display:flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--primary); margin:2rem 0 0.6rem; }
.section-label:first-child { margin-top:0; }
.part-label {
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  background:var(--primary); color:var(--white); padding:5px 14px; border-radius:50px; margin-bottom:0.9rem;
}

/* ===== Legend ===== */
.legend-strip {
  display:flex; gap:1.25rem; padding:0.7rem 1.1rem;
  background:var(--offwhite); border-radius:10px;
  border:1px solid rgba(0,0,0,0.1);
  margin:0 0 1.25rem; flex-wrap:wrap;
}
.legend-item { display:flex; align-items:center; gap:0.45rem; font-size:0.8rem; }
.legend-dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.legend-dot.user   { background:var(--secondary); }
.legend-dot.claude { background:var(--claude-border); }
.legend-dot.info   { background:var(--gray); }

/* ===== Role Diagram ===== */
.role-diagram { display:flex; flex-direction:column; align-items:center; margin:0.5rem 0 1.25rem; }

/* ===== Step Cards ===== */
.steps-list { display:flex; flex-direction:column; gap:0.65rem; margin:0.5rem 0 1.25rem; }
.step-card {
  display:flex; gap:0.9rem; align-items:flex-start;
  padding:0.95rem 1.15rem; border-radius:14px;
  border:1px solid rgba(0,0,0,0.06); background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
  transition:box-shadow 0.2s, transform 0.2s var(--spring);
}
.step-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.07); transform:translateY(-1px); }
.step-card.user   { border-right:3px solid var(--user-border);   background:#FFE3F4; }
.step-card.claude { border-right:3px solid var(--claude-border); background:#ECECE9; }
.step-card.info   { border-right:3px solid var(--amber);         background:#fff; }
.step-type-icon { width:52px; height:52px; flex-shrink:0; object-fit:contain; }
.step-card-body { flex:1 1 auto; min-width:0; }
.step-who { font-size:0.95rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.3rem; }
.step-card.user   .step-who { color:var(--black); }
.step-card.claude .step-who { color:var(--claude-border); }
.step-card.info   .step-who { color:var(--primary); }
.step-card-body p  { font-size:1rem; color:#222; margin:0; }
.step-card-body p + p { margin-top:0.4rem; }
.step-note { font-size:0.8rem; color:var(--gray); margin-top:0.35rem; font-style:italic; }
.optional-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--amber); color:var(--black);
  font-size:0.72rem; font-weight:700; letter-spacing:0.03em;
  padding:4px 12px; border-radius:50px; margin-bottom:0.5rem;
}
.gpt-link-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--amber); color:var(--black);
  padding:11px 22px; border-radius:50px; font-family:'Heebo',sans-serif;
  font-weight:700; font-size:0.88rem; text-decoration:none;
  margin-top:0.9rem; transition:transform 0.15s var(--spring), box-shadow 0.2s;
}
.gpt-link-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.12); }
.gpt-link-btn [data-lucide] { width:16px; height:16px; }
.lottie-link { display:inline-flex; align-items:center; gap:8px; margin-top:0.6rem; text-decoration:none; cursor:pointer; }
.lottie-link .lottie-icon { width:37.4px; height:37.4px; flex-shrink:0; }
.lottie-link span { font-size:0.78rem; color:var(--gray); text-decoration:underline; }
.lottie-link:hover span { color:var(--black); }
.lottie-link-group { display:flex; flex-direction:column; gap:0.4rem; margin-top:0.6rem; }
.lottie-link-group .lottie-link { margin-top:0; }
ul.content-list { padding-right:18px; display:flex; flex-direction:column; gap:4px; font-size:0.98rem; color:#222; margin-top:0.5rem; }
.step-card-body ul.content-list { margin-top:0.45rem; }

/* ===== Risk Gauge ===== */
.risk-gauge-wrap { margin:0.5rem 0 1.25rem; }
.risk-gauge { display:flex; border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.risk-segment {
  flex:1; min-width:0; border:none; appearance:none; cursor:pointer; padding:14px 6px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--seg-color); color:#000;
  font-family:'Heebo',sans-serif; font-size:0.7rem; font-weight:700;
  opacity:0.6; transition:opacity 0.25s, transform 0.2s var(--spring);
  border-left:2px solid rgba(255,255,255,0.4);
}
.risk-segment:last-child { border-left:none; }
.risk-segment:hover, .risk-segment:focus-visible { opacity:0.85; }
.risk-segment.active { opacity:1; transform:scaleY(1.1); box-shadow:inset 0 0 0 2px rgba(0,0,0,0.25); position:relative; z-index:2; }
.risk-segment:focus-visible { outline:3px solid var(--header-blue); outline-offset:2px; }
.risk-icon [data-lucide] { width:17px; height:17px; stroke-width:2; }
.risk-label { white-space:nowrap; letter-spacing:0.01em; text-align:center; }
.risk-chevron { width:14px; height:14px; stroke-width:2.5; opacity:0.6; transition:transform 0.25s var(--ease-out), opacity 0.25s; }
.risk-segment.active .risk-chevron { transform:rotate(180deg); opacity:1; }

.risk-arrow-row { display:flex; align-items:center; gap:10px; margin:0.7rem 2px 0; }
.risk-arrow-tag { font-size:0.7rem; font-weight:700; white-space:nowrap; }
.risk-arrow-tag.safe { color:#1d5a5c; }
.risk-arrow-tag.danger { color:#993556; }
.risk-arrow-svg { flex:1 1 0%; min-width:0; width:auto; height:16px; display:block; }

.risk-detail {
  margin-top:1rem; padding:1rem 1.25rem; border-radius:14px;
  background:#fff; border:1px solid rgba(0,0,0,0.08);
  border-right:4px solid var(--detail-color, var(--amber));
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  transition:border-color 0.25s;
}
.risk-detail-title { font-weight:800; font-size:1rem; margin-bottom:0.35rem; }
.risk-detail p { font-size:0.95rem; color:#222; margin:0; }
@media (max-width:640px) {
  .risk-label { font-size:0.6rem; }
  .risk-segment { padding:10px 3px; }
}

/* ===== Model Speed Dial ===== */
.model-gauge-wrap { margin:0.5rem 0 1.25rem; }
.model-dial { position:relative; max-width:360px; margin:0 auto; }
.model-dial-svg { width:100%; height:auto; display:block; }
.model-needle { transition:transform 0.7s var(--spring); transform-origin:150px 150px; }
.model-dial-ends { display:flex; justify-content:space-between; margin-top:-0.6rem; padding:0 0.75rem; }
.model-end-tag { display:flex; align-items:center; gap:4px; font-size:0.7rem; font-weight:700; white-space:nowrap; }
.model-end-tag [data-lucide] { width:14px; height:14px; stroke-width:2.5; }
.model-end-tag.fast { color:#1d5a5c; }
.model-end-tag.power { color:#993556; }

.model-picker { display:flex; gap:8px; margin-top:1.1rem; flex-wrap:wrap; justify-content:center; }
.model-pick {
  border:none; appearance:none; cursor:pointer; border-radius:999px; padding:9px 20px;
  background:#fff; color:#000; font-family:'Heebo',sans-serif; font-weight:700; font-size:0.85rem;
  box-shadow:inset 0 0 0 2px var(--pick-color); opacity:0.6;
  transition:opacity 0.25s, transform 0.2s var(--spring), background 0.25s;
}
.model-pick:hover, .model-pick:focus-visible { opacity:0.85; }
.model-pick.active { opacity:1; background:var(--pick-color); transform:scale(1.07); box-shadow:inset 0 0 0 2px rgba(0,0,0,0.2); }
.model-pick:focus-visible { outline:3px solid var(--header-blue); outline-offset:2px; }
@media (max-width:640px) {
  .model-dial { max-width:280px; }
  .model-pick { padding:8px 14px; font-size:0.78rem; }
}

/* ===== Context Chips ===== */
.context-chip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0.6rem; margin-top:0.6rem; }
.context-chip {
  display:flex; align-items:center; gap:0.55rem; padding:0.6rem 0.85rem; border-radius:12px;
  background:#fff; border:1.5px solid var(--chip-color, rgba(0,0,0,0.08)); box-shadow:0 2px 6px rgba(0,0,0,0.03);
  font-size:0.85rem; font-weight:600; color:#222;
  transition:transform 0.15s var(--spring), box-shadow 0.2s, background 0.25s;
}
.context-chip:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.07); background:var(--chip-tint, rgba(0,0,0,0.03)); }
.context-chip [data-lucide] { width:18px; height:18px; stroke-width:1.8; color:var(--chip-color, var(--header-blue)); flex-shrink:0; }

/* ===== Context Fill Tank ===== */
.context-fill-row { display:flex; gap:1.25rem; align-items:center; justify-content:center; margin:0.9rem auto; max-width:560px; }
.context-tank-wrap { position:relative; flex:0 0 auto; width:110px; display:flex; flex-direction:column; align-items:center; }
.context-tank-svg { width:100%; height:auto; display:block; }
.context-tank-fill { transition:height 1.1s var(--ease-out), y 1.1s var(--ease-out); }
.context-tank-mark {
  position:absolute; top:50%; left:100%; transform:translateY(-50%); margin-left:0.5rem;
  white-space:nowrap; font-size:0.72rem; font-weight:700; text-align:center; color:#7a2e56;
  background:rgba(255,91,192,0.08); border:1px solid rgba(255,91,192,0.35); border-radius:8px; padding:0.3rem 0.5rem;
}
.context-cmd-list { flex:0 1 340px; display:flex; flex-direction:column; gap:0.6rem; min-width:0; }
.context-cmd-list .step-card { padding:0.6rem 0.8rem; gap:0.6rem; }
.context-cmd-list .step-card .step-type-icon { width:34px; height:34px; }
.context-cmd-list .step-card .step-who { font-size:0.78rem; margin-bottom:0.15rem; }
.context-cmd-list .step-card-body p { font-size:0.85rem; }
@media (max-width:640px) {
  .context-fill-row { flex-direction:column; align-items:center; }
  .context-tank-wrap { width:90px; margin-bottom:1.75rem; }
  .context-tank-mark { top:100%; left:50%; transform:translateX(-50%); margin-left:0; margin-top:0.4rem; }
  .context-cmd-list { width:100%; max-width:340px; }
}

/* ===== Card Fan (hand of cards) ===== */
.card-fan-wrap { display:flex; justify-content:center; margin:1.5rem 0 3rem; }
.card-fan { position:relative; width:100%; max-width:600px; height:250px; }
.fan-card {
  position:absolute; top:10px; left:50%; width:180px; height:220px;
  margin-left:-90px; padding:1.35rem 1.25rem; border-radius:18px;
  display:flex; flex-direction:column; gap:0.55rem;
  box-shadow:0 8px 22px rgba(0,0,0,0.14); border:1px solid rgba(0,0,0,0.06);
  cursor:pointer; transition:transform 0.4s var(--spring), box-shadow 0.3s var(--ease-out);
}
.fan-card h4 { font-size:1.05rem; font-weight:800; line-height:1.3; }
.fan-card p  { font-size:0.87rem; line-height:1.55; }
.fan-card.c1 { background:var(--amber);     color:var(--black); transform:translateX(-220px) rotate(-10deg); z-index:1; }
.fan-card.c2 { background:#f0e8e4; color:#2d2420; transform:translateX(-75px)  rotate(-3deg);  z-index:2; }
.fan-card.c3 { background:var(--black);     color:var(--offwhite); transform:translateX(70px) rotate(4deg);   z-index:3; }
.fan-card.c4 { background:var(--white);     color:var(--black); transform:translateX(215px) rotate(11deg); border:1px solid rgba(0,0,0,0.12); z-index:4; }
.fan-card:hover, .fan-card:focus-visible { box-shadow:0 16px 36px rgba(0,0,0,0.22); z-index:10; }
.fan-card.c1:hover, .fan-card.c1:focus-visible { transform:translateX(-110px) translateY(-30px) rotate(0deg) scale(1.16); }
.fan-card.c2:hover, .fan-card.c2:focus-visible { transform:translateX(-35px)  translateY(-30px) rotate(0deg) scale(1.16); }
.fan-card.c3:hover, .fan-card.c3:focus-visible { transform:translateX(35px)   translateY(-30px) rotate(0deg) scale(1.16); }
.fan-card.c4:hover, .fan-card.c4:focus-visible { transform:translateX(110px)  translateY(-30px) rotate(0deg) scale(1.16); }
@media (max-width:640px) {
  .card-fan { height:auto; }
  .fan-card { position:static; margin:0.6rem auto; transform:none !important; width:88%; max-width:320px; height:auto; min-height:140px; }
  .fan-card:hover, .fan-card:focus-visible { transform:scale(1.03) !important; }
}

/* ===== Concept cards (הידעת) ===== */
.concept-wrap { margin:1rem 0; display:flex; justify-content:center; }
.concept-card { perspective:1000px; width:100%; max-width:440px; height:132px; cursor:pointer; margin:0 auto; }
.concept-card-inner { position:relative; width:100%; height:100%; transition:transform 0.6s var(--ease-out); transform-style:preserve-3d; }
.concept-card:hover .concept-card-inner, .concept-card:focus-visible .concept-card-inner, .concept-card.flipped .concept-card-inner { transform:rotateY(-180deg); }
.concept-card:focus-visible { outline:3px solid var(--amber); outline-offset:4px; border-radius:16px; }
.concept-front, .concept-back { position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; padding:1.15rem 1.35rem; display:flex; flex-direction:column; justify-content:center; }
.concept-front { background:rgba(255,214,238,0.42); border:1.5px solid var(--secondary); box-shadow:0 4px 20px rgba(0,0,0,0.08); align-items:center; text-align:center; }
.concept-eyebrow { font-size:1.265rem; font-weight:800; letter-spacing:0.02em; color:var(--black); margin-bottom:0.5rem; }
.eyebrow-letter { display:inline-block; opacity:0; animation:eyebrowType 2.4s ease-in-out infinite; }
@keyframes eyebrowType { 0% { opacity:0; } 3% { opacity:1; } 70% { opacity:1; } 82% { opacity:0; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .eyebrow-letter { animation:none; opacity:1; } }
.concept-term { font-family:'Rubik',sans-serif; font-size:1.28rem; font-weight:800; color:var(--black); direction:ltr; text-align:center; }
.concept-term.term-marker {
  font-family:'Kalam',cursive; font-weight:700; font-size:1.4rem;
  display:inline-block; transform:rotate(-1.5deg);
  background:var(--strong-pink); color:#fff;
  padding:2px 12px; border-radius:4px 14px 6px 12px;
}
.concept-hint { font-size:0.7rem; color:rgba(0,0,0,0.55); margin-top:0.6rem; }
.concept-back { transform:rotateY(180deg); background:#fff; border:1.5px solid rgba(92,225,230,0.55); box-shadow:0 4px 16px rgba(0,0,0,0.08); font-size:0.86rem; line-height:1.6; color:#2d2420; overflow-y:auto; }
.concept-row { display:flex; flex-wrap:wrap; gap:0.9rem; margin:1rem 0; }
.concept-row .concept-card { flex:1; min-width:220px; }

/* ===== Screenshots, split row, mini carousel, lightbox ===== */
.screenshot-frame { display:block; border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,0.1); box-shadow:0 4px 20px rgba(0,0,0,0.08); margin:0.9rem 0 0.35rem; transition:transform 0.25s var(--spring), box-shadow 0.25s; }
.screenshot-frame:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.14); }
.screenshot-frame img { display:block; width:100%; height:auto; }
.screenshot-caption { font-size:0.78rem; color:var(--gray); margin:0 0 1rem; display:flex; align-items:center; gap:6px; }
.screenshot-caption [data-lucide] { width:13px; height:13px; color:var(--amber); flex-shrink:0; }
.screenshot-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:0.9rem 0 0.35rem; }
.screenshot-row .screenshot-frame { margin:0; }
@media (max-width:640px) { .screenshot-row { grid-template-columns:1fr; } }

.split-row { display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; align-items:start; margin:0.5rem 0 1.25rem; }
.split-row .plain-col p { font-size:1rem; color:#222; margin:0 0 0.6rem; }
.split-row .plain-col p:last-child { margin-bottom:0; }
.split-row .plain-col.plain-quote p { font-style:italic; color:#333; font-size:0.95rem; }
.split-row .callout, .split-row .step-card { margin:0; height:100%; }
@media (max-width:768px) { .split-row { grid-template-columns:1fr; gap:1rem; } }

.mini-carousel { margin:0.9rem auto 0.5rem; max-width:456px; }
.mini-carousel-track { position:relative; }
.mini-carousel-slide { display:none; }
.mini-carousel-slide.active { display:block; animation:carouselIn 0.35s var(--ease-out); }
.mini-carousel-slide .screenshot-frame { margin-bottom:0.35rem; height:340px; display:flex; align-items:center; justify-content:center; background:var(--offwhite); }
.mini-carousel-slide .screenshot-frame img { width:auto; max-width:100%; height:100%; object-fit:contain; }
.screenshot-frame.zoomable { position:relative; cursor:zoom-in; }
.zoom-btn {
  position:absolute; bottom:10px; left:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff; display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; transition:background 0.15s, transform 0.15s var(--spring); z-index:2;
}
.zoom-btn:hover { background:rgba(0,0,0,0.75); transform:scale(1.08); }
.zoom-btn svg { width:18px; height:18px; }
.lightbox-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:900; align-items:center; justify-content:center; padding:2rem; }
.lightbox-overlay.open { display:flex; }
.lightbox-overlay img { max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close {
  position:absolute; top:20px; left:20px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.15); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.15s;
}
.lightbox-close:hover { background:rgba(255,255,255,0.28); }
.point-arrow {
  position:absolute !important; width:15% !important; height:auto !important; max-width:none !important;
  z-index:3; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  animation:arrowWiggle 1.6s ease-in-out infinite;
}
@keyframes arrowWiggle { 0%, 100% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(-6deg) scale(1.06); } }
.point-arrow[style*="scaleX(-1)"] { animation:arrowWiggleFlip 1.6s ease-in-out infinite; }
@keyframes arrowWiggleFlip { 0%, 100% { transform:scaleX(-1) rotate(0deg) scale(1); } 50% { transform:scaleX(-1) rotate(-6deg) scale(1.06); } }
@media (prefers-reduced-motion:reduce) { .point-arrow, .point-arrow[style*="scaleX(-1)"] { animation:none; } }
@keyframes carouselIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
.mini-carousel-nav { display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:0.7rem; }
.mini-carousel-btn { width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(0,0,0,0.12); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.15s, transform 0.15s var(--spring); color:var(--black); flex-shrink:0; }
.mini-carousel-btn:hover:not(:disabled) { background:var(--offwhite); transform:scale(1.08); }
.mini-carousel-btn:disabled { opacity:0.25; cursor:default; }
.mini-carousel-btn [data-lucide], .mini-carousel-btn svg { width:16px; height:16px; }
.mini-carousel-progress { font-size:0.8rem; font-weight:700; color:var(--gray); min-width:96px; text-align:center; }
.mini-carousel-dots { display:flex; gap:6px; justify-content:center; margin-top:0.55rem; }
.mini-carousel-dot { width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,0.15); transition:background 0.2s, transform 0.2s var(--spring); }
.mini-carousel-dot.active { background:var(--amber); transform:scale(1.4); }

/* ===== Sub-agent Radar ===== */
.radar-caption { text-align:center; font-size:0.85rem; font-weight:700; color:var(--gray); margin:0.4rem 0 0.6rem; }
.radar-wrap { display:flex; flex-direction:column; align-items:center; margin:0.5rem 0 2rem; }
.radar-stage { position:relative; width:280px; height:280px; margin:2.8rem auto 3.4rem; }
.radar-screen {
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #22345f 0%, var(--header-blue) 70%, #0f1a38 100%);
  box-shadow:0 10px 30px rgba(26,41,91,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.radar-rings { position:absolute; inset:0; background:repeating-radial-gradient(circle, rgba(92,225,230,0.22) 0 1px, transparent 1px 33.33%); }
.radar-sweep { position:absolute; inset:0; background:conic-gradient(from 0deg, rgba(92,225,230,0.55), rgba(92,225,230,0) 32%); animation:radarSpin 6s linear infinite; }
@keyframes radarSpin { to { transform:rotate(360deg); } }
.radar-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:78px; height:78px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 3px rgba(92,225,230,0.4), 0 0 22px 6px rgba(92,225,230,0.35);
}
.radar-center img { width:100%; height:100%; object-fit:cover; display:block; }
.radar-tag { position:absolute; top:50%; left:50%; width:0; height:0; transform:rotate(var(--a)) translateY(-140px) rotate(calc(-1 * var(--a))); }
.radar-tag-chip {
  position:absolute; top:0; left:0; transform:translate(-50%,-50%); width:88px; padding:6px 7px;
  border-radius:10px; text-align:center; font-size:0.66rem; font-weight:700; line-height:1.25;
  color:var(--header-blue); background:#fff; border:1.5px solid rgba(92,225,230,0.5);
  box-shadow:0 2px 6px rgba(0,0,0,0.08); cursor:default;
  animation:radarPulse 6s linear infinite; animation-delay:var(--d);
  transition:transform 0.2s var(--spring), box-shadow 0.2s;
}
.radar-tag-chip:hover, .radar-tag-chip:focus-visible { animation-play-state:paused; transform:translate(-50%,-50%) scale(1.08); box-shadow:0 6px 16px rgba(0,0,0,0.16); }
@keyframes radarPulse {
  0%   { transform:translate(-50%,-50%) scale(1.1); background:var(--amber); color:#000; border-color:var(--amber); box-shadow:0 0 16px 4px rgba(92,225,230,0.85); }
  20%  { transform:translate(-50%,-50%) scale(1); background:#fff; color:var(--header-blue); border-color:rgba(92,225,230,0.5); box-shadow:0 2px 6px rgba(0,0,0,0.08); }
  100% { transform:translate(-50%,-50%) scale(1); background:#fff; color:var(--header-blue); border-color:rgba(92,225,230,0.5); box-shadow:0 2px 6px rgba(0,0,0,0.08); }
}
@media (prefers-reduced-motion:reduce) { .radar-sweep { animation:none; } .radar-tag-chip { animation:none; } }
@media (max-width:640px) {
  .radar-stage { width:210px; height:210px; margin:2.4rem auto 3rem; }
  .radar-tag { transform:rotate(var(--a)) translateY(-105px) rotate(calc(-1 * var(--a))); }
  .radar-tag-chip { width:70px; font-size:0.6rem; padding:5px 5px; }
  .radar-center { width:60px; height:60px; }
}

/* ===== Flip Cards ===== */
.flip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.1rem; margin:0.75rem 0; }
.flip-card { perspective:1000px; height:190px; cursor:pointer; }
.flip-card-inner { position:relative; width:100%; height:100%; transition:transform 0.6s var(--ease-out); transform-style:preserve-3d; }
.flip-card:hover .flip-card-inner, .flip-card:focus-visible .flip-card-inner, .flip-card.flipped .flip-card-inner { transform:rotateY(-180deg); }
.flip-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 16px; }
.flip-front, .flip-back {
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:16px; padding:1.3rem;
  display:flex; flex-direction:column; justify-content:center;
}
.flip-front {
  background:#fff; border:1.5px solid rgba(92,225,230,0.55);
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
}
.flip-front .flip-icon {
  width:34px; height:34px; margin-bottom:0.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M78,42 C78,58 64,70 48,70 C29,70 15,55 15,37 C15,21 28,9 45,10 C60,11 71,22 70,36 C69,48 59,56 49,55 C41,54 35,47 36,39' fill='none' stroke='%23E0729B' stroke-width='9' stroke-linecap='round'/%3E%3Cline x1='80' y1='12' x2='88' y2='4' stroke='%23E0729B' stroke-width='7' stroke-linecap='round'/%3E%3Cline x1='90' y1='28' x2='99' y2='22' stroke='%23E0729B' stroke-width='7' stroke-linecap='round'/%3E%3Cline x1='85' y1='44' x2='95' y2='40' stroke='%23E0729B' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; background-position:right center;
}
.flip-front h4 { font-size:1.05rem; font-weight:700; margin-bottom:0.3rem; color:var(--black); }
.flip-front p { font-size:0.85rem; color:#555; line-height:1.5; }
.flip-back {
  transform:rotateY(180deg); background:var(--black); color:#fff;
  border:none; box-shadow:0 4px 20px rgba(0,0,0,0.18);
  font-size:0.9rem; line-height:1.6;
}
.flip-card:nth-child(4n+2) .flip-back { background:var(--header-blue); color:#fff; }
.flip-card:nth-child(4n+3) .flip-back { background:var(--strong-pink); color:var(--black); }
.flip-card:nth-child(4n+4) .flip-back { background:var(--amber); color:var(--black); }
.flip-hint { font-size:0.72rem; color:var(--gray); margin-top:auto; }

/* ===== Settings Accordion ===== */
.settings-accordion { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.5rem; }
.settings-item { border:1.5px solid rgba(0,0,0,0.1); border-radius:14px; background:#fff; overflow:hidden; transition:box-shadow 0.2s; }
.settings-item.open { box-shadow:0 4px 16px rgba(0,0,0,0.06); }
.settings-item-head {
  display:flex; align-items:center; gap:0.7rem; padding:0.9rem 1.1rem;
  cursor:pointer; user-select:none; background:none; border:none; width:100%;
  font-family:'Heebo',sans-serif; text-align:right; color:var(--black);
}
.settings-item-head:hover { background:rgba(0,0,0,0.03); }
.settings-icon {
  width:34px; height:34px; border-radius:50%; background:var(--secondary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.settings-icon [data-lucide] { width:17px; height:17px; stroke-width:1.8; }
.settings-item-title { font-weight:700; font-size:0.98rem; flex:1; }
.settings-chevron { width:18px; height:18px; color:var(--gray); flex-shrink:0; transition:transform 0.25s var(--ease-out); }
.settings-item.open .settings-chevron { transform:rotate(180deg); }
.settings-item-panel { max-height:0; overflow:hidden; transition:max-height 0.35s var(--ease-out); }
.settings-item.open .settings-item-panel { max-height:1200px; }
.settings-item-panel-inner { padding:0 1.1rem 1.1rem; border-top:1px solid rgba(0,0,0,0.06); }
.settings-tab-sub { font-size:0.85rem; color:var(--gray); margin:0.85rem 0 0.9rem; }
.settings-path-note { display:flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--gray); margin:0 0 0.7rem; }
.settings-path-note .icon-sm { color:var(--amber); flex-shrink:0; }
.settings-row { display:flex; align-items:flex-start; gap:0.65rem; padding:0.55rem 0; border-top:1px solid rgba(0,0,0,0.05); }
.settings-row:first-of-type { border-top:none; }
.settings-check {
  width:20px; height:20px; border-radius:6px; background:var(--amber);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.settings-check svg { width:12px; height:12px; stroke:var(--black); stroke-width:3; fill:none; }
.settings-row-body { flex:1; }
.settings-row-title { font-weight:700; font-size:0.88rem; }
.settings-row-desc { font-size:0.83rem; color:#555; margin-top:0.15rem; }

/* ===== Callout & Code ===== */
.callout { padding:0.9rem 1.1rem; border-radius:12px; margin:0.75rem 0; font-size:0.88rem; display:flex; gap:0.6rem; align-items:flex-start; }
.callout [data-lucide] { flex-shrink:0; margin-top:2px; }
.callout.warning { background:rgba(255,91,192,0.08); border:1px solid rgba(255,91,192,0.4); color:#7a2e56; }
.callout.tip     { background:rgba(92,225,230,0.12); border:1px solid rgba(92,225,230,0.5); color:#1d5a5c; }
.callout strong  { font-weight:700; }
.callout ul { margin-top:6px; padding-right:16px; display:flex; flex-direction:column; gap:3px; }
.callout-body { flex:1; }

.callout-icon-img { width:36px; height:36px; flex-shrink:0; object-fit:contain; }
.source-link { display:inline-flex; align-items:center; gap:5px; font-size:0.78rem; color:var(--gray); text-decoration:underline; margin-top:0.6rem; }
.source-link:hover { color:var(--black); }
.source-link [data-lucide] { width:12px; height:12px; }

.ci {
  font-family:'SFMono-Regular',Consolas,monospace; font-size:0.8rem;
  background:#f0e8e4; padding:2px 7px; border-radius:5px;
  color:#2d2420; direction:ltr; display:inline-block;
}

.quote-block { border-right:3px solid var(--amber); background:#fff; padding:0.8rem 1.1rem; border-radius:10px; font-style:italic; font-size:0.87rem; color:#333; margin:0.6rem 0; }

/* ===== Directory Tree ===== */
.tree {
  direction:ltr; text-align:left; font-family:'SFMono-Regular',Consolas,monospace;
  font-size:0.85rem; background:var(--offwhite); border:1px solid rgba(0,0,0,0.06);
  padding:1rem 1.3rem; border-radius:12px; margin:0.75rem 0; line-height:1.8; color:#3a332c;
}
.tree .highlight { color:#5a6b1a; font-weight:700; }

/* ===== Prompt Block (copyable Hebrew prompt) ===== */
.prompt-block {
  position:relative; background:#231d1a; color:#fbf6f1;
  padding:1.2rem 1.3rem 1rem; border-radius:12px; margin:0.75rem 0 0.5rem;
  font-size:0.87rem; line-height:1.85; direction:rtl; text-align:right;
}
.prompt-text { white-space:pre-wrap; display:block; }
.prompt-copy-btn {
  position:absolute; top:0.65rem; left:0.65rem;
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:#fbf6f1;
  border-radius:50px; padding:5px 13px; font-size:0.72rem; font-family:'Heebo',sans-serif;
  cursor:pointer; transition:background 0.2s, transform 0.15s var(--spring);
}
.prompt-copy-btn [data-lucide] { width:13px; height:13px; }
.prompt-copy-btn:hover { background:rgba(255,255,255,0.2); }
.prompt-copy-btn.copied { background:var(--amber); color:var(--black); border-color:var(--amber); }
.prompt-label { font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber); margin:0.9rem 0 0.35rem; display:block; }

/* ===== Reveal ===== */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===== Bottom Nav ===== */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  display:none; align-items:center; justify-content:space-between;
  padding:0.9rem 2rem;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,0,0,0.06);
}
.bottom-nav.visible { display:flex; }
.nav-btn {
  display:flex; align-items:center; gap:6px;
  padding:10px 28px; border-radius:50px;
  font-family:'Heebo',sans-serif; font-size:0.88rem; font-weight:600;
  cursor:pointer; border:2px solid var(--black);
  background:none; color:var(--black);
  transition:transform 0.15s var(--spring), box-shadow 0.2s;
}
.nav-btn.primary { background:var(--amber); color:var(--black); border-color:var(--amber); }
.nav-btn:hover, .nav-btn:focus-visible { box-shadow:0 4px 12px rgba(0,0,0,0.12); }
.nav-btn:active  { transform:scale(0.97); }
.nav-btn.hidden  { visibility:hidden; }

/* ===== Checklist ===== */
.checklist { display:flex; flex-direction:column; gap:0.45rem; margin:0.5rem 0; }
.check-item {
  display:flex; align-items:flex-start; gap:0.7rem;
  padding:0.8rem 1rem; border:1px solid rgba(0,0,0,0.06); border-radius:12px;
  cursor:pointer; transition:opacity 0.3s, background 0.15s;
}
.check-item:hover { background:var(--offwhite); }
.check-item.checked { opacity:0.5; }
.check-box {
  width:22px; height:22px; border:2px solid rgba(0,0,0,0.14);
  border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, border-color 0.2s; margin-top:2px;
}
.check-item.checked .check-box { background:var(--primary); border-color:var(--primary); }
.check-box svg { width:14px; height:14px; stroke:#fff; stroke-width:3; fill:none; opacity:0; transition:opacity 0.2s; }
.check-item.checked .check-box svg { opacity:1; }
.check-content { font-size:0.91rem; color:#2d2420; }

/* ===== Completion ===== */
.completion {
  position:relative; overflow:hidden;
  display:none; min-height:100vh;
  align-items:center; justify-content:flex-start;
  text-align:center; padding:2rem;
  padding-top:calc(var(--header-h) + 2rem);
  background:#f2efe8;
}
.completion.visible { display:flex; flex-direction:column; }
.completion-video { position:absolute; top:var(--header-h); left:50%; transform:translateX(-50%); height:calc(100% - var(--header-h)); width:auto; max-width:none; object-fit:contain; object-position:center center; z-index:0; }
.completion-mascot { position:absolute; top:50%; transform:translateY(-50%); width:min(26vw, 340px); height:auto; z-index:1; }
.completion-mascot.left  { left:2rem; }
.completion-mascot.right { right:2rem; }
.completion-content { position:relative; z-index:2; max-width:520px; }
.completion-goodluck { font-size:clamp(2.1rem,5.5vw,3.2rem); font-weight:900; color:#fff; margin-top:1.25rem; }
.completion-goodluck .wave-letter {
  display:inline-block; opacity:0;
  text-shadow:0 1px 0 rgba(0,0,0,0.55), 0 3px 6px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4);
  animation:waveIn 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.completion-goodluck .wave-letter:nth-child(1) { animation-delay:0.05s; }
.completion-goodluck .wave-letter:nth-child(2) { animation-delay:0.10s; }
.completion-goodluck .wave-letter:nth-child(3) { animation-delay:0.15s; }
.completion-goodluck .wave-letter:nth-child(4) { animation-delay:0.20s; }
.completion-goodluck .wave-letter:nth-child(5) { animation-delay:0.25s; }
.completion-goodluck .wave-letter:nth-child(6) { animation-delay:0.30s; }
.completion-goodluck .wave-letter:nth-child(7) { animation-delay:0.35s; }
@keyframes waveIn {
  0%   { opacity:0; transform:translateY(26px) scale(0.7); }
  55%  { opacity:1; transform:translateY(-10px) scale(1.08); }
  80%  { transform:translateY(4px) scale(0.98); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.completion-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.completion-btn {
  display:flex; align-items:center; gap:7px;
  padding:12px 30px; border-radius:50px;
  font-family:'Heebo',sans-serif; font-size:0.97rem; font-weight:600;
  cursor:pointer; border:2px solid var(--black); text-decoration:none;
  transition:transform 0.15s var(--spring), box-shadow 0.2s;
}
.completion-btn.primary   { background:var(--amber); color:var(--black); border-color:var(--amber); }
.completion-btn.secondary { background:none; color:var(--primary); border-color:var(--primary); }
.completion-btn:hover, .completion-btn:focus-visible { box-shadow:0 4px 16px rgba(0,0,0,0.12); transform:translateY(-1px); }

/* ===== Responsive ===== */
@media (max-width:768px) {
  .main-content { padding:1.5rem 1rem 6rem; }
  :root { --header-h:52px; }
  .logo-bar-center { max-width:218px; }
  .bottom-nav { padding:0.8rem 1.1rem; }
  .menu-toggle { display:flex; }
  .sidebar {
    position:fixed; top:var(--header-h); left:auto; right:0; bottom:0; height:auto;
    width:82vw; max-width:300px; z-index:400;
    transform:translateX(100%); transition:transform 0.3s var(--ease-out);
    box-shadow:-8px 0 28px rgba(0,0,0,0.14);
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-backdrop.open { display:block; }
  .legend-strip { gap:0.7rem; }
  .completion-mascot { width:min(18vw, 130px); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}


/* ===== Skip link (memory-playbook a11y) ===== */
.skip-link {
  position:absolute; right:1rem; top:-100px; z-index:1000;
  background:var(--black); color:var(--white); padding:10px 20px; border-radius:8px;
  transition:top 0.2s;
}
.skip-link:focus { top:1rem; }

/* ===== Dream Timeline (memory-playbook) ===== */
.dream-timeline { display:flex; flex-direction:column; margin:0.75rem 0 1.25rem; }
.dream-step { display:flex; gap:1rem; }
.dream-node-col { position:relative; display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:52px; }
.dream-tag {
  position:absolute; bottom:calc(100% + 12px); right:0;
  background:var(--amber); color:var(--black); font-family:'Heebo',sans-serif;
  font-weight:800; font-size:0.72rem; letter-spacing:0.01em; white-space:nowrap;
  padding:5px 13px; border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,0.18);
  z-index:3; animation:dreamTagPulse 2.4s ease-in-out infinite;
}
.dream-tag::after { content:''; position:absolute; top:100%; right:18px; border:6px solid transparent; border-top-color:var(--amber); }
@keyframes dreamTagPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }
@media (prefers-reduced-motion:reduce) { .dream-tag { animation:none; } }


/* ===== Shield Layers (memory-playbook) ===== */
.shield-stack { display:flex; flex-direction:column; align-items:center; margin:1.4rem 0 1.75rem; }
.shield-layer {
  width:100%; max-width:580px; border-radius:16px; padding:1rem 1.5rem;
  cursor:pointer; user-select:none; position:relative;
  transition:transform 0.3s var(--spring), box-shadow 0.3s var(--ease-out);
  box-shadow:0 4px 14px rgba(0,0,0,0.1);
}
.shield-layer + .shield-layer { margin-top:-16px; }
.shield-layer.l1 { background:rgba(92,225,230,0.18); border:1px solid rgba(92,225,230,0.5); color:var(--black); z-index:1; }
.shield-layer.l2 { background:rgba(255,214,238,0.4); border:1px solid rgba(255,214,238,0.85); color:var(--black); width:89%; z-index:2; }
.shield-layer.l3 { background:rgba(0,0,0,0.045); border:1px solid rgba(0,0,0,0.16); color:var(--black); width:78%; z-index:3; }
.shield-layer:hover, .shield-layer.open, .shield-layer:focus-visible {
  transform:translateY(-5px) scale(1.02); box-shadow:0 14px 30px rgba(0,0,0,0.24); z-index:10; outline:none;
}
.shield-layer-title { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; font-weight:800; font-size:1.02rem; }
.shield-layer-chevron { flex-shrink:0; transition:transform 0.3s var(--ease-out); }
.shield-layer:hover .shield-layer-chevron, .shield-layer.open .shield-layer-chevron { transform:rotate(180deg); }
.shield-layer-desc { max-height:0; overflow:hidden; font-size:0.87rem; line-height:1.65; opacity:0; transition:max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out), margin-top 0.4s var(--ease-out); }
.shield-layer:hover .shield-layer-desc, .shield-layer.open .shield-layer-desc { max-height:200px; opacity:1; margin-top:0.65rem; }
@media (max-width:640px) {
  .shield-layer.l2 { width:94%; }
  .shield-layer.l3 { width:88%; }
}
@media (prefers-reduced-motion:reduce) { .shield-layer, .shield-layer-chevron, .shield-layer-desc { transition:none; } }

/* ===== Dream Timeline nodes (memory-playbook) ===== */
.dream-node {
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Heebo',sans-serif; font-weight:800; font-size:1.15rem; color:var(--black);
  background:#ECECE9; border:2px solid var(--claude-border);
  transition:transform 0.35s var(--spring), box-shadow 0.3s var(--ease-out);
  cursor:default;
}
.dream-node.user { background:#FFE3F4; border-color:var(--user-border); }
.dream-node:hover, .dream-node:focus-visible { transform:scale(1.24); box-shadow:0 8px 20px rgba(0,0,0,0.2); z-index:2; outline:none; }
.dream-connector { --fill:0%; width:3px; flex:1; min-height:70px; background:rgba(0,0,0,0.1); margin:2px 0; border-radius:2px; overflow:hidden; position:relative; }
.dream-connector::after { content:''; position:absolute; top:0; right:0; left:0; height:var(--fill); background:var(--claude-border); }
.dream-step:last-child .dream-connector { display:none; }
.dream-step-body { flex:1; padding-top:8px; padding-bottom:3.2rem; opacity:0.32; transform:translateY(16px); transition:opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.dream-step.seen .dream-step-body { opacity:1; transform:translateY(0); }
.dream-step:last-child .dream-step-body { padding-bottom:0; }
.dream-step-body .step-who { font-size:0.95rem; font-weight:700; letter-spacing:0.05em; margin-bottom:0.3rem; color:rgba(0,0,0,0.35); transition:color 0.65s var(--ease-out); }
.dream-step-body p { font-size:1rem; color:rgba(0,0,0,0.35); margin:0; transition:color 0.65s var(--ease-out); }
.dream-step.seen .dream-step-body .step-who { color:var(--black); }
.dream-step.seen .dream-step-body p { color:#222; }
@media (prefers-reduced-motion:reduce) {
  .dream-node, .dream-step-body, .dream-step-body .step-who, .dream-step-body p { transition:none; }
  .dream-step-body { opacity:1; transform:none; }
  .dream-step-body .step-who, .dream-step-body p { color:inherit; }
}

/* ===== Value Receipts (memory-playbook) ===== */
.receipt-row { display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; margin:1.5rem 0 2rem; padding:0.4rem; }
.receipt-card {
  position:relative; flex:1 1 210px; max-width:250px; min-width:190px;
  background:var(--white); padding:1.5rem 1.25rem 1.35rem;
  box-shadow:0 10px 22px rgba(0,0,0,0.14), 0 2px 5px rgba(0,0,0,0.08);
  cursor:pointer; overflow:hidden;
  clip-path: polygon(0% 7px,4% 0,8% 7px,12% 0,16% 7px,20% 0,24% 7px,28% 0,32% 7px,36% 0,40% 7px,44% 0,48% 7px,52% 0,56% 7px,60% 0,64% 7px,68% 0,72% 7px,76% 0,80% 7px,84% 0,88% 7px,92% 0,96% 7px,100% 0,100% 100%,0% 100%);
  transition:transform 0.35s var(--spring), box-shadow 0.3s var(--ease-out);
}
.receipt-card:nth-child(1) { transform:rotate(-1.4deg); }
.receipt-card:nth-child(2) { transform:rotate(0.8deg); }
.receipt-card:nth-child(3) { transform:rotate(-0.6deg); }
.receipt-card:hover, .receipt-card.open, .receipt-card:focus-visible {
  transform:translateY(-6px) rotate(0deg) scale(1.03); box-shadow:0 20px 36px rgba(0,0,0,0.22); z-index:5; outline:none;
}
.receipt-eyebrow { font-family:'SFMono-Regular',Consolas,monospace; font-size:0.7rem; letter-spacing:0.1em; color:rgba(0,0,0,0.4); padding-bottom:0.5rem; margin-bottom:0.4rem; border-bottom:1px dashed rgba(0,0,0,0.22); direction:ltr; text-align:center; }
.receipt-stamp-zone { height:74px; display:flex; align-items:center; justify-content:center; }
.receipt-title { font-weight:800; font-size:1.04rem; color:var(--black); text-align:center; margin-top:0.5rem; }
.receipt-desc { max-height:0; overflow:hidden; opacity:0; font-size:0.85rem; line-height:1.6; color:#333; text-align:center; transition:max-height 0.45s var(--ease-out), opacity 0.3s var(--ease-out), margin-top 0.45s var(--ease-out); }
.receipt-card:hover .receipt-desc, .receipt-card.open .receipt-desc { max-height:260px; opacity:1; margin-top:0.75rem; }
.receipt-stamp {
  position:relative; width:74px; height:74px; border-radius:50%; flex-shrink:0;
  border:3px solid var(--black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-family:'Heebo',sans-serif; font-weight:800; font-size:0.7rem; color:var(--black); text-align:center; line-height:1.2;
  transform:rotate(-14deg) scale(0); opacity:0;
  transition:transform 0.4s var(--spring), opacity 0.25s var(--ease-out);
}
.receipt-stamp::after { content:''; position:absolute; inset:5px; border:1px solid var(--black); border-radius:50%; }
.receipt-card:hover .receipt-stamp, .receipt-card.open .receipt-stamp { transform:rotate(-14deg) scale(1); opacity:0.85; }
@media (max-width:640px) { .receipt-card:nth-child(n) { transform:none; } .receipt-card:hover, .receipt-card.open { transform:translateY(-4px) scale(1.02); } }
@media (prefers-reduced-motion:reduce) {
  .receipt-card, .receipt-desc, .receipt-stamp { transition:none; }
  .receipt-card:nth-child(n) { transform:none; }
}

/* ===== Role boxes (memory-playbook; .role-diagram chrome stays master) ===== */
.role-box { border-radius:14px; padding:0.85rem 1.5rem; text-align:center; border:1.5px solid rgba(0,0,0,0.1); background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.role-box-title { font-weight:800; font-size:1rem; }
.role-box-sub { font-size:0.72rem; color:var(--gray); direction:ltr; margin-top:2px; }
.role-box.role-user { background:rgba(253,211,221,0.42); border-color:var(--secondary); }
.role-box.role-main { background:var(--black); border-color:var(--black); }
.role-box.role-main .role-box-title { color:#fff; }
.role-box.role-main .role-box-sub { color:rgba(255,255,255,0.6); }
.role-hat-note { font-size:0.7rem; color:var(--gray); margin-top:0.4rem; max-width:220px; text-align:center; }
.role-connector { width:2px; height:26px; background:rgba(0,0,0,0.15); }
.role-split { position:relative; display:flex; justify-content:center; gap:2.5rem; padding-top:26px; flex-wrap:wrap; }
.role-branch-h { position:absolute; top:0; left:22%; right:22%; height:2px; background:rgba(0,0,0,0.15); }
.role-split-col { display:flex; flex-direction:column; align-items:center; }
.role-branch-v { width:2px; height:24px; background:rgba(0,0,0,0.15); }
.role-box.role-skill { background:rgba(187,210,60,0.14); border-color:rgba(187,210,60,0.5); }
.role-box.role-sub   { background:#ECECE9; border-color:var(--claude-border); }
@media (max-width:640px) {
  .role-split { flex-direction:column; gap:0; }
  .role-branch-h { display:none; }
  .role-split-col .role-branch-v { display:none; }
  .role-split-col:not(:first-child) { margin-top:20px; }
  .role-split-col:not(:first-child)::before { content:''; display:block; width:2px; height:20px; background:rgba(0,0,0,0.15); margin:0 auto 0; }
}

/* ===== Skill Download Card (memory-playbook) ===== */
.dl-card {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); border-radius:16px; box-shadow:var(--glass-shadow);
  padding:1.1rem 1.3rem; margin:1rem 0 0.5rem;
  transition:transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.dl-card:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,0,0,0.12); }
.dl-card-icon {
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  background:var(--amber); color:var(--black);
  display:flex; align-items:center; justify-content:center;
}
.dl-card-icon svg { width:24px; height:24px; }
.dl-card-body { flex:1 1 220px; min-width:0; }
.dl-card-title { font-family:'Rubik',sans-serif; font-weight:800; font-size:1rem; margin-bottom:2px; }
.dl-card-sub { font-size:0.85rem; color:var(--gray); line-height:1.6; }
.dl-btn {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  background:var(--black); color:var(--white); text-decoration:none;
  border-radius:50px; padding:11px 22px; font-size:0.9rem; font-weight:600;
  transition:background 0.2s, transform 0.15s var(--spring);
}
.dl-btn svg { width:16px; height:16px; }
.dl-btn:hover { background:var(--strong-pink); transform:translateY(-2px); }
.dl-btn:active { transform:translateY(0); }

/* ===== Doc Stack (memory-playbook) ===== */
.doc-stack-wrap { display:flex; justify-content:center; margin:1.5rem 0 3rem; }
.doc-stack { position:relative; width:100%; max-width:660px; height:560px; }
.doc-card {
  position:absolute; top:0; left:50%; width:190px; height:170px;
  margin-left:-95px; padding:1.2rem 1.15rem 1.1rem; border-radius:14px;
  display:flex; flex-direction:column; gap:0.45rem;
  background:#f0e8e4; color:#2d2420;
  box-shadow:0 6px 16px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.06);
  cursor:pointer; transition:transform 0.4s var(--spring), box-shadow 0.3s var(--ease-out);
}
.doc-card::before { content:''; position:absolute; top:0; right:0; left:0; height:6px; border-radius:14px 14px 0 0; background:var(--tab-color, var(--amber)); }
.doc-card h4 { font-size:1rem; font-weight:800; line-height:1.3; direction:ltr; text-align:right; }
.doc-card p  { font-size:0.83rem; line-height:1.5; }
.doc-card.d1 { --tab-color:var(--amber);  transform:translate(-130px,0px)   rotate(-3deg); z-index:1; }
.doc-card.d2 { --tab-color:var(--secondary); transform:translate(-45px,70px)  rotate(2deg);  z-index:2; }
.doc-card.d3 { --tab-color:var(--gray);   transform:translate(45px,140px)  rotate(-2deg); z-index:3; }
.doc-card.d4 { --tab-color:var(--black);  transform:translate(130px,210px) rotate(3deg);  z-index:4; }
.doc-card:hover, .doc-card:focus-visible { box-shadow:0 16px 34px rgba(0,0,0,0.2); z-index:20; }
.doc-card.d1:hover, .doc-card.d1:focus-visible { transform:translate(-45px,-30px) rotate(0deg) scale(1.14); }
.doc-card.d2:hover, .doc-card.d2:focus-visible { transform:translate(-15px,40px)  rotate(0deg) scale(1.14); }
.doc-card.d3:hover, .doc-card.d3:focus-visible { transform:translate(15px,110px)  rotate(0deg) scale(1.14); }
.doc-card.d4:hover, .doc-card.d4:focus-visible { transform:translate(45px,180px) rotate(0deg) scale(1.14); }
.doc-card.hub {
  width:315px; height:225px; margin-left:-157.5px; padding:1.8rem 2rem;
  background:var(--black); color:var(--offwhite); border:none;
  transform:translate(0,280px) scale(1); z-index:10;
  box-shadow:0 14px 30px rgba(0,0,0,0.28);
}
.doc-card.hub h4 { font-size:1.2rem; }
.doc-card.hub p  { font-size:0.92rem; }
.doc-card.hub::before { background:var(--amber); height:8px; }
.doc-card.hub h4 { color:var(--offwhite); }
.doc-card.hub:hover, .doc-card.hub:focus-visible { transform:translate(0,265px) scale(1.06); z-index:20; box-shadow:0 20px 40px rgba(0,0,0,0.32); }
@media (max-width:640px) {
  .doc-stack { height:auto; }
  .doc-card { position:static; margin:0.6rem auto; transform:none !important; width:88%; max-width:320px; height:auto; min-height:120px; }
  .doc-card.hub { width:88%; max-width:320px; height:auto; margin:1.1rem auto 0.6rem; position:static; }
  .doc-card:hover, .doc-card:focus-visible, .doc-card.hub:hover, .doc-card.hub:focus-visible { transform:scale(1.03) !important; }
}

/* ===== Static checklist (memory-playbook) ===== */
.static-checklist { display:flex; flex-direction:column; gap:0.45rem; margin:0.5rem 0; }
.static-check-item { display:flex; align-items:flex-start; gap:0.7rem; padding:0.8rem 1rem; border:1px solid rgba(0,0,0,0.06); border-radius:12px; cursor:pointer; transition:opacity 0.3s, background 0.15s; }
.static-check-item:hover { background:var(--offwhite); }
.static-check-item.checked { opacity:0.5; }
.static-check-item.checked .check-box { background:var(--primary); border-color:var(--primary); }
.static-check-item.checked .check-box svg { opacity:1; }

@font-face {
  font-family: 'OH Yael Leibushor';
  src: url('../assets/fonts/OHYaelLeibushor1.0-Regular.otf') format('opentype');
  font-display: swap;
}