/* ============================================================
   pw/templates — design system
   Terminal-native, no-nonsense, built for AI-agency operators.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---------- tokens ---------- */
:root{
  --bg:            #0b0b0c;
  --bg-raised:     #131315;
  --bg-raised-2:   #1a1a1d;
  --line:          #2a2a2e;
  --line-soft:     #201f22;
  --fg:            #f4efe6;
  --fg-dim:        #a39d92;
  --fg-faint:      #6d6862;
  --red:           #ff3b30;
  --red-dim:       #7a1f1a;
  --red-glow:      rgba(255,59,48,0.35);
  --green:         #35d07f;
  --amber:         #ffb238;
  --radius-sm:     3px;
  --radius:        6px;
  --font-display:  'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-mono:     'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease:          cubic-bezier(.16,1,.3,1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

:root[data-theme="light"]{
  --bg:            #f2ede2;
  --bg-raised:     #e9e2d3;
  --bg-raised-2:   #ded5c2;
  --line:          #cbc1ac;
  --line-soft:     #d9d0bd;
  --fg:            #17140f;
  --fg-dim:        #57503f;
  --fg-faint:      #8a8168;
  --red:           #c81e12;
  --red-dim:       #f0b8ac;
  --red-glow:      rgba(200,30,18,0.18);
  --green:         #157a49;
  --amber:         #a2650a;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  transition:background .25s var(--ease), color .25s var(--ease);
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:var(--grain);
  opacity:.045;
  pointer-events:none;
  z-index:999;
  mix-blend-mode:overlay;
}

body::after{
  content:"";
  position:fixed;
  top:-20%; right:-10%;
  width:60vw; height:60vw;
  background:radial-gradient(circle, var(--red-glow) 0%, transparent 68%);
  pointer-events:none;
  z-index:0;
  filter:blur(10px);
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--red); color:#fff; padding:.6em 1em; z-index:1000;
}
.skip-link:focus{ left:1em; top:1em; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.eyebrow{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); display:flex; align-items:center; gap:.6em; font-weight:600;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--red); }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo{ display:flex; align-items:baseline; gap:2px; font-weight:600; font-size:17px; }
.logo .lg-cursor{ display:inline-block; width:.55em; height:1em; background:var(--red); margin-left:2px; animation:blink 1.1s steps(1) infinite; }
.logo .lg-dim{ color:var(--fg-faint); }
@keyframes blink{ 50%{ opacity:0; } }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:13.5px; color:var(--fg-dim); position:relative; padding:4px 0;
  transition:color .2s var(--ease);
}
.nav-links a::before{ content:"/"; color:var(--red); margin-right:6px; opacity:.6; }
.nav-links a:hover, .nav-links a.active{ color:var(--fg); }
.nav-links a.active::after{ content:""; position:absolute; left:14px; right:0; bottom:-2px; height:1px; background:var(--red); }

.nav-right{ display:flex; align-items:center; gap:16px; }
.theme-toggle{
  width:38px; height:38px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--bg-raised); color:var(--fg-dim);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, color .2s;
}
.theme-toggle:hover{ border-color:var(--red); color:var(--fg); }

.nav-toggle{ display:none; width:38px; height:38px; border:1px solid var(--line); background:var(--bg-raised); border-radius:var(--radius-sm); position:relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:10px; right:10px; height:1px; background:var(--fg);
}
.nav-toggle span{ top:50%; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.85em 1.5em; font-family:var(--font-mono); font-size:13.5px; font-weight:600;
  border-radius:var(--radius-sm); border:1px solid transparent; letter-spacing:.01em;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s, background .18s;
  white-space:nowrap;
}
.btn::before{ content:"$"; opacity:.55; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 0 0 0 var(--red-glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -8px var(--red-glow); }
.btn-ghost{ border-color:var(--line); color:var(--fg); background:transparent; }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-block{ width:100%; justify-content:center; }
.btn-lg{ padding:1.05em 1.9em; font-size:14.5px; }

/* ---------- hero ---------- */
.hero{ padding:96px 0 88px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.hero h1{
  font-size:clamp(38px,5.2vw,64px); line-height:1.03; margin:22px 0 22px;
}
.hero h1 em{ font-style:italic; color:var(--red); font-weight:500; }
.hero p.lead{ font-family:var(--font-mono); color:var(--fg-dim); font-size:16px; line-height:1.7; max-width:46ch; }
.hero-ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-meta{ margin-top:38px; display:flex; gap:28px; flex-wrap:wrap; }
.hero-meta div{ font-size:12px; color:var(--fg-faint); }
.hero-meta strong{ display:block; font-family:var(--font-display); font-size:22px; color:var(--fg); font-weight:600; }

/* ---------- terminal window ---------- */
.term{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.55);
}
.term-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-soft); background:var(--bg-raised-2); }
.term-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.term-dot.r{ background:var(--red); }
.term-title{ margin-left:8px; font-size:11.5px; color:var(--fg-faint); letter-spacing:.03em; }
.term-body{ padding:22px 20px 26px; font-size:13.5px; line-height:1.85; min-height:230px; }
.term-line{ white-space:pre-wrap; }
.term-prompt{ color:var(--red); }
.term-out{ color:var(--fg-dim); }
.term-ok{ color:var(--green); }
.term-cursor{ display:inline-block; width:7px; height:15px; background:var(--red); vertical-align:-2px; animation:blink 1s steps(1) infinite; }

/* ---------- sections ---------- */
section{ padding:96px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.4vw,42px); margin-top:16px; line-height:1.08; }
.section-head p{ color:var(--fg-dim); margin-top:16px; font-size:15px; line-height:1.75; }
.divider{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ---------- file tree / category grid ---------- */
.tree{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); overflow:hidden; }
.tree-row{
  display:grid; grid-template-columns:26px 1fr auto auto; align-items:center; gap:14px;
  padding:18px 20px; border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.tree-row:last-child{ border-bottom:none; }
.tree-row:hover{ background:var(--bg-raised-2); }
.tree-icon{ color:var(--red); font-size:14px; }
.tree-name{ font-size:14px; font-weight:600; }
.tree-path{ color:var(--fg-faint); font-weight:400; font-size:12.5px; display:block; margin-top:3px; }
.tree-tag{ font-size:10.5px; color:var(--fg-faint); border:1px solid var(--line); padding:3px 8px; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.tree-tag.soon{ color:var(--amber); border-color:var(--amber); }
.tree-tag.free{ color:var(--green); border-color:var(--green); }
.tree-tag.pro{ color:var(--red); border-color:var(--red); }
a.tree-row{ text-decoration:none; color:inherit; cursor:pointer; }
.tree-row.locked{ opacity:.5; }
.tree-row.locked:hover{ background:var(--bg-raised); opacity:.7; }

/* ---------- template thumbnail grid ---------- */
.tpl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.tpl-card{ display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.tpl-card:hover{ border-color:var(--red); transform:translateY(-3px); }
.tpl-thumb{ position:relative; width:100%; aspect-ratio:480/246; overflow:hidden; background:var(--bg-raised-2); border-bottom:1px solid var(--line-soft); }
.tpl-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.tpl-rank{ position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:11px; font-weight:700; background:var(--bg); color:var(--fg); border:1px solid var(--line); padding:3px 9px; border-radius:20px; letter-spacing:.04em; }
.tpl-card.locked .tpl-thumb img{ filter:blur(2.5px) grayscale(.35); opacity:.45; }
.tpl-lock{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg); font-weight:700; }
.tpl-meta{ display:flex; align-items:center; justify-content:space-between; padding:11px 13px; }
.tpl-open{ font-size:11px; color:var(--fg-faint); }
.tpl-card:hover .tpl-open{ color:var(--red); }
.creativity{ display:flex; gap:3px; align-items:center; }
.creativity i{ width:5px; height:14px; background:var(--line); display:block; border-radius:1px; }
.creativity i.on{ background:var(--red); }

/* ---------- two-col split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.panel{ border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; background:var(--bg-raised); }
.panel h3{ font-size:20px; margin-bottom:14px; }
.panel .tag{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); font-weight:700; }
.panel ul{ margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.panel li{ font-size:13.5px; color:var(--fg-dim); display:flex; gap:10px; align-items:flex-start; }
.panel li::before{ content:"›"; color:var(--red); font-weight:700; }

/* ---------- trust / founder ---------- */
.founder{ display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:flex-start; }
.founder-mark{
  width:64px; height:64px; border-radius:var(--radius); border:1px solid var(--red-dim);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--red);
  background:color-mix(in srgb, var(--red) 8%, transparent);
}
.founder blockquote{ font-family:var(--font-display); font-size:clamp(19px,2.2vw,25px); line-height:1.5; font-style:italic; color:var(--fg); }
.founder cite{ display:block; font-family:var(--font-mono); font-style:normal; font-size:12.5px; color:var(--fg-faint); margin-top:16px; }

/* ---------- pricing ---------- */
.toggle-row{ display:flex; align-items:center; gap:14px; margin-bottom:44px; }
.switch{ width:46px; height:26px; border-radius:20px; background:var(--bg-raised-2); border:1px solid var(--line); position:relative; }
.switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--fg-dim); transition:transform .2s var(--ease), background .2s; }
.switch.on{ border-color:var(--red); }
.switch.on::after{ transform:translateX(20px); background:var(--red); }
.toggle-label{ font-size:12.5px; color:var(--fg-dim); }
.save-badge{ font-size:10.5px; color:var(--green); border:1px solid var(--green); padding:2px 8px; border-radius:20px; margin-left:4px; }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; background:var(--bg-raised); display:flex; flex-direction:column; position:relative; }
.plan.feat{ border-color:var(--red); box-shadow:0 0 0 1px var(--red), 0 30px 60px -30px var(--red-glow); }
.plan-badge{ position:absolute; top:-12px; left:28px; background:var(--red); color:#fff; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:20px; font-weight:700; }
.plan h3{ font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-dim); font-family:var(--font-mono); font-weight:700; }
.plan .price{ font-family:var(--font-display); font-size:44px; margin:18px 0 4px; font-weight:600; }
.plan .price span{ font-family:var(--font-mono); font-size:13px; color:var(--fg-faint); font-weight:400; }
.plan .price-note{ font-size:12px; color:var(--fg-faint); min-height:16px; }
.plan ul{ margin:26px 0 30px; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan li{ font-size:13.5px; color:var(--fg-dim); display:flex; gap:10px; }
.plan li::before{ content:"✓"; color:var(--green); font-weight:700; }
.plan li.no::before{ content:"×"; color:var(--fg-faint); }
.plan li.no{ color:var(--fg-faint); }

/* ---------- faq ---------- */
.faq-item{ border-bottom:1px solid var(--line-soft); padding:24px 0; }
.faq-item summary{ cursor:pointer; font-size:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--red); font-size:20px; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top:14px; color:var(--fg-dim); font-size:13.5px; line-height:1.75; max-width:70ch; }

/* ---------- cta band ---------- */
.cta-band{ border:1px solid var(--red-dim); border-radius:var(--radius); padding:56px 48px; text-align:center; background:linear-gradient(180deg, color-mix(in srgb, var(--red) 6%, transparent), transparent); }
.cta-band h2{ font-size:clamp(26px,3.4vw,38px); }
.cta-band p{ color:var(--fg-dim); margin:16px auto 30px; max-width:52ch; font-size:14.5px; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line-soft); padding:56px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.foot-col h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:16px; font-weight:700; }
.foot-col a, .foot-col p{ font-size:13px; color:var(--fg-dim); display:block; margin-bottom:10px; }
.foot-col a:hover{ color:var(--red); }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:11.5px; color:var(--fg-faint); }

/* ---------- badges / misc ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; border:1px solid var(--line); padding:5px 11px; border-radius:20px; color:var(--fg-dim); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- browse coming soon ---------- */
.notify-box{ border:1px dashed var(--line); border-radius:var(--radius); padding:40px; text-align:center; }
.notify-box input[type=email]{
  background:var(--bg); border:1px solid var(--line); color:var(--fg); font-family:var(--font-mono);
  padding:.9em 1em; border-radius:var(--radius-sm); font-size:13.5px; width:100%; max-width:320px;
}
.notify-box input[type=email]:focus{ border-color:var(--red); }
.notify-row{ display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap; }

/* ---------- page hero (secondary pages) ---------- */
.page-hero{ padding:70px 0 20px; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ font-size:clamp(32px,4.6vw,52px); line-height:1.06; }
.page-hero p{ color:var(--fg-dim); margin-top:18px; max-width:60ch; font-size:15px; line-height:1.75; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .split{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  /* backdrop-filter on an ancestor creates a new containing block for
     fixed-position descendants, which would trap the off-canvas panel
     inside the 68px nav bar instead of the viewport — drop the blur here. */
  .site-nav{ backdrop-filter:none; background:var(--bg); }
  .nav-links{ position:fixed; inset:68px 0 0 0; background:var(--bg); flex-direction:column; padding:36px 24px; gap:26px; align-items:flex-start; transform:translateX(100%); transition:transform .3s var(--ease); border-top:1px solid var(--line-soft); z-index:200; }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}
@media (max-width: 600px){
  .founder{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  section{ padding:64px 0; }
  .hero{ padding:56px 0 56px; }
}


/* ---------- template detail page ---------- */
.tpl-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.tpl-detail-head h1{ font-size:clamp(28px,3.6vw,40px); }
.tpl-detail-tags{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.tpl-detail-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.view-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:20px; padding:3px; background:var(--bg-raised-2); gap:2px; }
.view-toggle button{ border:0; background:transparent; color:var(--fg-dim); font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; padding:7px 14px; border-radius:16px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); white-space:nowrap; }
.view-toggle button.active{ background:var(--red); color:#fff; }
.view-toggle button:not(.active):hover{ color:var(--fg); }
.tpl-preview{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.55); }
.tpl-preview-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-soft); background:var(--bg-raised-2); }
.tpl-preview-bar .term-title{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:8px; }
.tpl-preview-open{ font-size:11px; color:var(--fg-faint); text-decoration:none; }
.tpl-preview-open:hover{ color:var(--red); }
.tpl-preview-frame{ position:relative; width:100%; height:70vh; min-height:420px; max-height:760px; background:#fff; }
.tpl-preview-frame iframe{ width:100%; height:100%; border:0; display:block; }
.tpl-preview-locked{ position:relative; width:100%; height:70vh; min-height:420px; max-height:760px; background:var(--bg-raised-2); overflow:hidden; }
.tpl-preview-locked img{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:blur(4px) grayscale(.35); opacity:.45; }
.tpl-preview-lock-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; color:var(--fg); }
.tpl-preview-lock-overlay svg{ color:var(--red); }
.tpl-preview-lock-overlay p{ color:var(--fg-dim); font-size:13px; max-width:34ch; line-height:1.6; }
.tpl-nav-row{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; gap:12px; flex-wrap:wrap; }
.tpl-nav-row a[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
@media (max-width:600px){
  .tpl-preview-frame, .tpl-preview-locked{ height:56vh; min-height:320px; }
}


/* ---------- source code viewer ---------- */
.code-viewer{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised); overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,0,0,.55); }
.code-viewer .tpl-preview-bar{ gap:10px; }
.code-copy-btn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--fg-dim); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 11px; margin-left:auto; transition:border-color .2s, color .2s; flex-shrink:0; }
.code-copy-btn:hover{ border-color:var(--red); color:var(--fg); }
.code-copy-btn.copied{ color:var(--green); border-color:var(--green); }
.code-body{ position:relative; max-height:360px; overflow:hidden; transition:max-height .4s var(--ease); }
.code-body.expanded{ max-height:none; }
.code-body pre{ margin:0; padding:22px 24px; overflow-x:auto; }
.code-body code{ font-family:var(--font-mono); font-size:12.5px; line-height:1.7; color:var(--fg-dim); white-space:pre; tab-size:2; }
.code-fade{ position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(180deg, transparent, var(--bg-raised)); pointer-events:none; transition:opacity .2s; }
.code-body.expanded .code-fade{ opacity:0; }
.code-toggle{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:15px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--fg-dim); background:var(--bg-raised-2); border:0; border-top:1px solid var(--line-soft); }
.code-toggle:hover{ color:var(--red); }
.code-toggle .code-toggle-less{ display:none; }
.code-toggle.is-expanded .code-toggle-more{ display:none; }
.code-toggle.is-expanded .code-toggle-less{ display:inline; }
.code-locked{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:64px 24px; color:var(--fg); }
.code-locked svg{ color:var(--red); }
.code-locked p{ color:var(--fg-dim); font-size:13px; max-width:34ch; line-height:1.6; }