/* ---------- tokens ---------- */
:root{
  --bg:#E9E8E2; --surface:#FBFAF7; --surface-2:#F1F0EA; --line:#D6D4CA; --line-soft:#E3E1D9;
  --ink:#14161E; --ink-2:#464956; --muted:#787B88;
  --p1:#2F4FD0; --p2:#0E7C66; --p3:#A96A11; --p4:#B94B33;
  --gem-face:#D3D1C8; --gem-line:#B6B4AA; --gem-ground:#EFEDE6; --sheen-hi:#6E86E0;
  --shadow:0 1px 2px rgba(20,22,30,.06), 0 10px 30px -18px rgba(20,22,30,.35);
  --aura:.16;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0C14; --surface:#12151F; --surface-2:#191D2A; --line:#272C3C; --line-soft:#1E2230;
    --ink:#EEF0F7; --ink-2:#B7BDD1; --muted:#7D85A0;
    --p1:#6D8CFF; --p2:#3FC0A2; --p3:#F2B457; --p4:#F0836A;
    --gem-face:#212637; --gem-line:#3A425C; --gem-ground:#0E111B; --sheen-hi:#C8D6FF;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 46px -22px rgba(0,0,0,.9);
    --aura:.42;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0C14; --surface:#12151F; --surface-2:#191D2A; --line:#272C3C; --line-soft:#1E2230;
  --ink:#EEF0F7; --ink-2:#B7BDD1; --muted:#7D85A0;
  --p1:#6D8CFF; --p2:#3FC0A2; --p3:#F2B457; --p4:#F0836A;
  --gem-face:#212637; --gem-line:#3A425C; --gem-ground:#0E111B; --sheen-hi:#C8D6FF;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 46px -22px rgba(0,0,0,.9);
  --aura:.42;
  color-scheme:dark;
}

/* ---------- base ---------- */
:root{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* nền trang trí của hero tràn viền, không tạo thanh cuộn ngang */
}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:Lora,"Iowan Old Style",Georgia,serif; font-weight:600; text-wrap:balance; margin:0; letter-spacing:-.012em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--p1); outline-offset:3px; border-radius:4px}
.wrap{width:100%; max-width:1120px; margin-inline:auto; padding-inline:20px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft);
}
.topbar .wrap{display:flex; align-items:center; gap:16px; min-height:58px; padding-block:9px; flex-wrap:nowrap}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; flex:0 0 auto}
.brand span{min-width:0; overflow:hidden}
.brand b{display:block; font-family:Lora,Georgia,serif; font-weight:600; font-size:15.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand small{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-family:"IBM Plex Mono",monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spark{width:22px;height:22px;flex:none}
.spark-btn{
  position:relative; flex:none; display:grid; place-items:center; width:34px; height:34px;
  margin-inline:-6px 0; padding:0; border:1px solid transparent; background:transparent;
  border-radius:50%; color:var(--ink); cursor:pointer; touch-action:manipulation;
  transition:border-color .18s, background .18s;
}
.spark-btn:hover{border-color:var(--line-soft); background:color-mix(in srgb, var(--surface) 60%, transparent)}
.mode-dot{
  position:absolute; right:-2px; bottom:-2px; width:13px; height:13px;
  color:var(--muted); background:var(--bg); border-radius:50%; padding:.5px;
  transition:color .18s;
}
.spark-btn[data-mode="light"] .mode-dot,
.spark-btn[data-mode="dark"] .mode-dot{color:var(--p1)}
.mode-dot > g{display:none}
.spark-btn[data-mode="auto"] .i-auto,
.spark-btn[data-mode="light"] .i-light,
.spark-btn[data-mode="dark"] .i-dark{display:block}
.meter{
  display:flex; align-items:center; gap:9px; flex:0 6 auto; min-width:0; position:relative;
  border:1px solid transparent; background:transparent; border-radius:99px;
  padding:6px 10px; margin-inline:-10px; cursor:pointer; user-select:none;
  touch-action:manipulation; transition:border-color .18s, background .18s;
}
.meter:hover{border-color:var(--line-soft); background:color-mix(in srgb, var(--surface) 60%, transparent)}
.meter.armed{border-color:var(--p1)}
.meter .bar{width:104px; height:5px; border-radius:99px; background:var(--line); overflow:hidden; flex:0 1 104px; min-width:30px; display:block}
.m-hint,.t-hint{
  position:absolute; top:calc(100% + 8px); right:0; z-index:2;
  font-size:11.5px; line-height:1.4; white-space:nowrap;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line);
  border-radius:99px; padding:4px 11px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:.18s;
}
.meter.armed .m-hint{opacity:1; visibility:visible; transform:none}
@media (hover:hover){ .meter:hover .m-hint{opacity:1; visibility:visible; transform:none} }
.t-hint{right:auto; left:0}
.spark-btn.show-hint .t-hint,
.spark-btn:focus-visible .t-hint{opacity:1; visibility:visible; transform:none}
@media (hover:hover){ .spark-btn:hover .t-hint{opacity:1; visibility:visible; transform:none} }
.meter .bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--p1),var(--p2) 38%,var(--p3) 70%,var(--p4)); transition:width .5s cubic-bezier(.2,.7,.3,1)}
.meter .num{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.ghost{
  border:1px solid var(--line); background:transparent; color:var(--ink-2);
  border-radius:99px; padding:6px 13px; font-size:12.5px; cursor:pointer; transition:.18s;
}
.ghost:hover{border-color:var(--ink-2); color:var(--ink)}
@media (max-width:600px){
  .topbar .wrap{gap:10px; min-height:52px; padding-inline:14px}
  .brand{gap:8px}
  .spark-btn{width:30px; height:30px; margin-inline:-5px 0}
  .brand b{font-size:14px}
  .brand small{font-size:9.5px; letter-spacing:.11em}
  .meter{gap:7px; padding:6px 8px; margin-inline:-8px}
  .meter .num{font-size:11px}
}
@media (max-width:359px){
  .meter .bar{display:none}
  .brand{flex-shrink:1}
}

/* ---------- hero ---------- */
.hero{padding-block:44px 30px; position:relative; isolation:isolate}
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-28px; height:min(820px, 100%); inset-inline:calc(50% - 50vw);
  background:url("https://f4.bcbits.com/img/a3591850129_10.jpg") 72% 12%/cover no-repeat;
  filter:grayscale(1) contrast(1.06);
  opacity:.14; mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(122% 96% at 76% 6%, #000 0%, rgba(0,0,0,.6) 40%, transparent 74%);
  mask-image:radial-gradient(122% 96% at 76% 6%, #000 0%, rgba(0,0,0,.6) 40%, transparent 74%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero::before{opacity:.26; mix-blend-mode:screen; filter:grayscale(1) contrast(1.1) brightness(.85)}
}
:root[data-theme="dark"] .hero::before{opacity:.26; mix-blend-mode:screen; filter:grayscale(1) contrast(1.1) brightness(.85)}
.hero-head{max-width:66ch; display:flex; flex-direction:column; gap:14px}
.hero h1{font-size:clamp(2.05rem,5.4vw,3.35rem); line-height:1.08}
.hero h1 em{font-style:italic; color:var(--p1)}
.lede{color:var(--ink-2); font-size:clamp(15px,1.6vw,17px); max-width:62ch}

.stage{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(24px,4vw,52px); align-items:start; margin-top:38px}
@media (max-width:860px){ .stage{grid-template-columns:1fr; gap:30px} }

/* ---------- gem ---------- */
.gem-col{display:flex; flex-direction:column; gap:18px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 74px)}
@media (max-width:860px){ .gem-col{position:static} }
.gem{position:relative; width:min(100%,430px); aspect-ratio:1/1; margin-inline:auto}
.aura{
  position:absolute; inset:9%; border-radius:50%; opacity:var(--aura); pointer-events:none;
  background:conic-gradient(from 0deg,var(--p1),var(--p2),var(--p3),var(--p4),var(--p1));
  filter:blur(34px); animation:spin 34s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.gem svg{position:relative; width:100%; height:100%; display:block; overflow:visible}
.facet{cursor:pointer; transition:opacity .35s ease, filter .35s ease}
.facet:hover .f-glow{opacity:.62!important}
.facet:focus{outline:none}
.f-base{fill:var(--gem-face); stroke:var(--gem-line); stroke-width:.7}
.f-glow{fill:var(--c); transition:opacity .55s cubic-bezier(.2,.7,.3,1); pointer-events:none}
.f-edge{fill:none; stroke:var(--c); stroke-width:0; opacity:0; transition:.3s; pointer-events:none}
.facet.is-current .f-edge{stroke-width:1.9; opacity:1}
.facet.is-current{filter:drop-shadow(0 0 13px var(--c))}
.facet.pulse .f-glow{animation:pulse .62s ease-out}
@keyframes pulse{0%{opacity:.25}45%{opacity:1}100%{}}
.girdle{fill:var(--gem-face); opacity:.46; stroke:var(--gem-line); stroke-width:.5; pointer-events:none}
.silhouette{fill:none; stroke:var(--gem-line); stroke-width:1.2; opacity:.9; pointer-events:none}
.table-poly{fill:var(--gem-ground); stroke:var(--gem-line); stroke-width:.9}
.star{stroke:var(--gem-line); stroke-width:.5; opacity:.55}
.ring-seg{fill:none; stroke:var(--line); stroke-width:3; stroke-linecap:round; transition:stroke .4s, opacity .4s; opacity:.85}
.f-num{font-family:"IBM Plex Mono",monospace; font-size:10px; fill:var(--ink-2); text-anchor:middle; dominant-baseline:middle; pointer-events:none; transition:fill .3s, transform .72s cubic-bezier(.34,1.02,.36,1)}
.facet.is-current .f-num{fill:var(--ink); font-weight:500}
.rotor{transition:transform .72s cubic-bezier(.34,1.02,.36,1)}
.core-num{font-family:Lora,Georgia,serif; font-size:40px; fill:var(--ink); text-anchor:middle; font-weight:600}
.core-cap{font-family:"IBM Plex Mono",monospace; font-size:8.4px; letter-spacing:.24em; fill:var(--muted); text-anchor:middle}
.core-ph{font-family:"IBM Plex Mono",monospace; font-size:8.4px; letter-spacing:.14em; fill:var(--c); text-anchor:middle; text-transform:uppercase}
.cursor-mark{fill:var(--c); transition:fill .4s}
.gem-hint{text-align:center; font-size:12.5px; color:var(--muted)}
.gem-hint kbd{font-family:"IBM Plex Mono",monospace; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:11px}

/* ---------- detail panel ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:3px; box-shadow:var(--shadow); overflow:hidden}
.panel-top{padding:24px clamp(18px,3vw,28px) 20px; border-bottom:1px solid var(--line-soft); position:relative}
.panel-top::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c)}
.p-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px}
.chip{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); border-radius:99px; padding:3px 10px;
}
.p-title{font-size:clamp(1.42rem,3vw,1.95rem); line-height:1.18}
.p-tag{color:var(--ink-2); margin-top:9px; font-size:14.5px}
.p-essence{
  margin-top:16px; padding-left:15px; border-left:2px solid color-mix(in srgb,var(--c) 40%,transparent);
  font-family:Lora,Georgia,serif; font-size:16px; line-height:1.66; color:var(--ink-2); font-style:italic;
}
.panel-body{padding:22px clamp(18px,3vw,28px) 26px; display:flex; flex-direction:column; gap:24px}
.block-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px}
.lessons{display:flex; flex-direction:column; gap:2px}
.lesson{border-bottom:1px solid var(--line-soft)}
.lesson:last-child{border-bottom:0}
.lesson > summary{display:flex; align-items:flex-start; gap:12px; padding:12px 0; cursor:pointer; list-style:none}
.lesson > summary::-webkit-details-marker{display:none}
.lesson > summary:hover h5{color:var(--c)}
.lsn-mark{flex:none; width:8px; height:8px; margin-top:7px; background:var(--c); transform:rotate(45deg); opacity:.55; transition:.25s}
.lesson[open] .lsn-mark{opacity:1; transform:rotate(45deg) scale(1.2)}
.lesson h5{flex:1; margin:0; font-family:Lora,Georgia,serif; font-size:16px; font-weight:600; line-height:1.34; transition:color .2s}
.lsn-chev{flex:none; width:8px; height:8px; margin-top:5px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); transition:transform .25s}
.lesson[open] .lsn-chev{transform:rotate(-135deg) translate(-2px,-2px)}
.lesson > p{margin:0 0 15px 20px; font-size:14.5px; color:var(--ink-2)}
.meta-n{font-size:12px; color:var(--muted)}
.fineprint.pad-t{margin-top:13px}
.lede-note{font-size:13.5px; color:var(--muted); max-width:64ch}
.sheen{
  font-weight:600;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,var(--p1) 46%,var(--sheen-hi) 50%,var(--p1) 54%,var(--ink) 62%,var(--ink) 100%);
  background-size:300% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .sheen{animation:sheenSweep 9s ease-in-out 2.2s infinite}
  .hero-head > *{animation:emerge 1s cubic-bezier(.2,.7,.3,1) backwards}
  .hero-head > :nth-child(1){animation-delay:.08s}
  .hero-head > :nth-child(2){animation-delay:.22s}
  .hero-head > :nth-child(3){animation-delay:.42s}
  .hero-head > :nth-child(4){animation-delay:.62s}
  .hero-head > :nth-child(5){animation-delay:.80s}
}
@keyframes sheenSweep{0%{background-position:100% 0} 58%,100%{background-position:0% 0}}
@keyframes emerge{from{opacity:0; transform:translateY(12px); filter:blur(8px)} to{opacity:1; transform:none; filter:blur(0)}}

.tasks{display:flex; flex-direction:column; gap:8px}
.task{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:2px;
  padding:12px 14px; transition:.2s; font-size:14.5px; line-height:1.5;
}
.task:hover{border-color:color-mix(in srgb,var(--c) 55%,var(--line))}
.box{
  flex:none; width:19px; height:19px; margin-top:1px; border:1.5px solid var(--line); border-radius:2px;
  display:grid; place-items:center; transition:.2s; background:var(--surface);
}
.box svg{width:11px; height:11px; opacity:0; transform:scale(.5); transition:.22s cubic-bezier(.3,1.5,.5,1); stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.task.on .box{background:var(--c); border-color:var(--c)}
.task.on .box svg{opacity:1; transform:scale(1)}
.task.on .t-text{color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--c) 60%,transparent); text-decoration-thickness:1px}
.t-text{color:var(--ink-2)}

.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .two{grid-template-columns:1fr} }
.note{border:1px solid var(--line-soft); border-radius:2px; padding:14px 15px; background:var(--surface-2)}
.note .eyebrow{display:block; margin-bottom:7px}
.note p{font-size:14.5px; color:var(--ink-2)}
.note.q p{font-family:Lora,Georgia,serif; font-style:italic; font-size:15.5px; color:var(--ink)}
.nav-row{display:flex; gap:10px; justify-content:space-between; align-items:center; padding-top:4px}
.step-btn{
  border:1px solid var(--line); background:var(--surface); border-radius:99px; padding:7px 15px;
  font-size:13px; cursor:pointer; color:var(--ink-2); transition:.18s; display:inline-flex; gap:7px; align-items:center;
}
.step-btn:hover:not(:disabled){border-color:var(--ink-2); color:var(--ink)}
.step-btn:disabled{opacity:.36; cursor:not-allowed}


/* ---------- tabs & extra panes ---------- */
.tabbar{display:flex; gap:2px; padding-inline:clamp(10px,2.2vw,18px); border-bottom:1px solid var(--line-soft); background:var(--surface-2); overflow-x:auto; scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab{border:0; background:transparent; padding:11px 11px 10px; font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.18s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--c); font-weight:500}
.tabpane{display:flex; flex-direction:column; gap:22px}

.rail{list-style:none; margin:0; padding:0}
.rail li{display:grid; grid-template-columns:auto 1fr; gap:14px; padding-bottom:20px; position:relative}
.rail li:last-child{padding-bottom:0}
.rail li::before{content:""; position:absolute; left:13px; top:30px; bottom:2px; width:1px; background:var(--line)}
.rail li:last-child::before{display:none}
.rail-n{width:27px; height:27px; border-radius:50%; display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:11.5px; border:1px solid var(--c); color:var(--c); background:var(--surface); position:relative; z-index:1}
.rail-w{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.rail h5{margin:2px 0 5px; font-family:Lora,Georgia,serif; font-size:16px; font-weight:600; line-height:1.34}
.rail p{font-size:14px; color:var(--ink-2)}

.sutra{border:1px solid var(--line-soft); border-radius:2px; padding:20px clamp(16px,2.6vw,22px); background:linear-gradient(175deg,color-mix(in srgb,var(--c) 9%,var(--surface-2)),var(--surface-2) 62%)}
.s-quote{margin:14px 0 0; padding-left:16px; border-left:2px solid var(--c); font-family:Lora,Georgia,serif; font-style:italic; font-size:16.5px; line-height:1.64}
.s-note{margin-top:15px; font-size:14.5px; color:var(--ink-2)}
.fineprint{font-size:12px; color:var(--muted); line-height:1.55}

.reads,.stories{display:flex; flex-direction:column; gap:11px}
.read-it{border:1px solid var(--line-soft); border-left:2px solid var(--c); border-radius:2px; padding:13px 15px; background:var(--surface-2)}
.read-it .src{display:block; margin-bottom:5px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--c)}
.read-it p{font-size:14px; color:var(--ink-2)}
.story{border:1px solid var(--line-soft); border-radius:2px; padding:16px 17px; background:var(--surface-2)}
.tagchip{display:inline-block; padding:3px 9px; border-radius:99px; font-family:"IBM Plex Mono",monospace; font-size:9.6px; letter-spacing:.16em; text-transform:uppercase}
.tagchip.real{background:color-mix(in srgb,var(--c) 16%,transparent); color:var(--c); border:1px solid color-mix(in srgb,var(--c) 42%,transparent)}
.tagchip.demo{border:1px dashed var(--line); color:var(--muted)}
.story h5{margin:11px 0 6px; font-family:Lora,Georgia,serif; font-size:16.5px; font-weight:600; line-height:1.32}
.story p{font-size:14.2px; color:var(--ink-2)}

/* ---------- roadmap ---------- */
.section{padding-block:clamp(44px,7vw,78px); border-top:1px solid var(--line-soft)}
.sec-head{display:flex; flex-direction:column; gap:10px; max-width:60ch; margin-bottom:30px}
.sec-head h2{font-size:clamp(1.55rem,3.4vw,2.2rem)}
.sec-head p{color:var(--ink-2)}
.phase{padding-block:26px; border-top:1px dashed var(--line); display:grid; grid-template-columns:minmax(180px,230px) 1fr; gap:clamp(18px,3vw,38px); align-items:start}
.phase:first-of-type{border-top:0}
@media (max-width:760px){ .phase{grid-template-columns:1fr; gap:16px} }
.ph-side{display:flex; flex-direction:column; gap:8px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 76px)}
@media (max-width:760px){ .ph-side{position:static} }
.ph-rule{height:3px; width:44px; background:var(--c); border-radius:99px}
.ph-side h3{font-size:1.16rem}
.ph-side p{font-size:13.5px; color:var(--muted)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px}
.card{
  position:relative; text-align:left; cursor:pointer; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:3px; padding:16px 16px 14px;
  display:flex; flex-direction:column; gap:8px; transition:.22s cubic-bezier(.2,.7,.3,1);
}
.card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--c) 55%,var(--line)); box-shadow:var(--shadow)}
.card.is-current{border-color:var(--c); box-shadow:0 0 0 1px var(--c), var(--shadow)}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.card-n{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; color:var(--c)}
.dots{display:flex; gap:4px}
.dots i{width:6px; height:6px; border-radius:50%; background:var(--line); transition:.3s}
.dots i.on{background:var(--c)}
.card h4{margin:0; font-family:Lora,Georgia,serif; font-weight:600; font-size:16.5px; line-height:1.3}
.card p{font-size:13.2px; color:var(--muted); line-height:1.55}

/* ---------- seed ---------- */
.seed-box{
  background:var(--surface); border:1px solid var(--line); border-radius:3px; box-shadow:var(--shadow);
  padding:clamp(20px,3.4vw,30px); display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
}
@media (max-width:700px){ .seed-box{grid-template-columns:1fr} }
.seed-txt{display:flex; flex-direction:column; gap:9px; min-width:0}
.seed-txt .from{font-size:12.5px; color:var(--c); font-family:"IBM Plex Mono",monospace}
.seed-txt .what{font-family:Lora,Georgia,serif; font-size:clamp(1.12rem,2.4vw,1.5rem); line-height:1.36}
.seed-acts{display:flex; gap:10px; flex-wrap:wrap}
.solid{
  border:0; border-radius:99px; padding:10px 20px; font-size:13.5px; font-weight:500; cursor:pointer;
  background:var(--ink); color:var(--bg); transition:.18s;
}
.solid:hover{opacity:.86}
.solid:disabled{opacity:.4; cursor:not-allowed}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft); padding-block:30px 44px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center}
footer p{font-size:12.5px; color:var(--muted); max-width:58ch}

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