/* [2026-07-10] Pawan (global best practice, all pages): search/input placeholder SUBTLE (not dominant) + clears on focus/click. currentColor+opacity adapts to any input color; page rules can override. */
::placeholder{color:currentColor;opacity:.42}
:focus::placeholder{opacity:0}

:root{
  --bg:#fdfcfa; --bg-warm:#faf5ea; --card:#fff; --border:#eadfce; --border-soft:#f0ebe0;
  --primary:#ea7a27; --primary-deep:#b85c12; --primary-light:#f59f0a;
  --ink:#171717; --ink-2:#404040; --ink-3:#737373; --muted:#8a8378;
  --accent-soft:#fdf0dc; --mist:#fdf0dd; --live:#1f9d6b; --wrong:#d9534f;
  --shadow:0 10px 30px -18px rgba(0,0,0,.2); --shadow-lg:0 18px 46px -24px rgba(120,72,20,.28);
  --spring:cubic-bezier(.22,1,.36,1); --reading:760px;
}
*{margin:0;padding:0;box-sizing:border-box}
a{color:inherit;text-decoration:none}
html{overflow-x:clip;scroll-behavior:smooth}
html body{background:radial-gradient(60% 40% at 12% -4%,#fdf1e0 0,transparent 60%),var(--bg);
  color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.7;font-size:1.02rem;overflow-wrap:break-word}
p{color:var(--ink-2)} strong{color:var(--ink)} b{color:var(--ink)}
.wrap{max-width:var(--reading);margin-inline:auto;padding-inline:18px}
section{margin-top:1.75rem}
h2{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.15;margin-bottom:.7rem}
h2 .em{color:var(--primary-deep);font-style:italic}
h3{font-family:'Playfair Display',serif;color:var(--ink)}
.eyebrow{font:600 .66rem 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-deep)}
.note{background:var(--mist);border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:0 12px 12px 0;padding:.9rem 1.2rem;margin:.4rem 0 1.2rem;color:var(--ink-2)}
.sec-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.4rem}
.sec-head .emb{width:42px;height:42px;flex:0 0 auto;background:#fff;border:1px solid var(--border);
  border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.sec-head .emb svg{width:100%;height:100%;display:block}
.sec-head h2{margin:0}

/* breadcrumb */
.crumb{max-width:var(--reading);margin:1.1rem auto 1.2rem;padding:.6rem 18px;display:flex;justify-content:space-between;
  align-items:center;gap:.75rem;border-bottom:1px solid var(--border)}
.crumb a{color:var(--primary-deep);font-weight:700;font-size:.9rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;transition:transform .18s var(--spring)}
.crumb a:hover{transform:translateX(-3px)}
.crumb .badge{font:600 .6rem 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--primary-deep);background:var(--accent-soft);border:1px solid var(--border);border-radius:999px;padding:.3rem .7rem;overflow:hidden;text-overflow:ellipsis}

/* hero */
.hero{text-align:center;margin-top:1rem}
.hero .emb{width:118px;height:118px;margin:0 auto 1.1rem;background:radial-gradient(circle at 50% 30%,#fff,#fffaf1);border:1px solid var(--border);border-radius:28px;padding:16px;box-shadow:0 18px 40px -20px rgba(120,72,20,.4)}
.hero .emb svg{width:100%;height:100%;display:block}
.hero h1{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.1;letter-spacing:-.01em;margin:.5rem 0 .6rem}
.hero .lede{font-size:1.08rem;color:var(--ink-2);max-width:56ch;margin:0 auto}
.pills{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:1.1rem 0 .2rem}
.pill{font:600 .64rem 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--primary-deep);
  background:var(--accent-soft);border:1px solid var(--border);border-radius:999px;padding:.32rem .7rem}
.pill.exam::before{content:"🎓 "}
.listen{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:.45rem 1.05rem;font:700 .85rem Inter;color:var(--primary-deep);cursor:pointer;box-shadow:var(--shadow);
  transition:transform .18s,border-color .18s,background .18s;margin-top:1rem}
.listen:hover{transform:translateY(-2px);border-color:var(--primary)}
.listen.on{background:var(--accent-soft);border-color:var(--primary)}

/* interactive island shell */
.isle{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.isle-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  padding:.9rem 1.2rem;background:var(--bg-warm);border-bottom:1px solid var(--border)}
.isle-k{font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep)}
.isle-prog{font:600 .82rem Inter;color:var(--ink-3)}
.isle-body{padding:1rem 1.15rem}
.badge-live{font:600 .58rem 'JetBrains Mono',monospace;color:var(--live)}
.isle-bar{flex-basis:100%;order:3;height:4px;background:var(--border-soft);border-radius:2px;overflow:hidden;margin-top:.5rem}
.isle-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width .45s var(--spring)}

/* exchange bubbles (micro-moment + spotter) */
.claim,.reply{border-radius:12px;padding:.75rem 1rem;margin-bottom:.55rem;line-height:1.5}
.claim{background:var(--mist);border:1px solid var(--border);border-left:3px solid var(--primary-light)}
.reply{background:#faf7f2;border:1px solid var(--border);border-left:3px solid var(--ink-3)}
.claim .who,.reply .who{display:block;font:600 .6rem 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.choices{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.choice{flex:1 1 180px;text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:11px;padding:.6rem .85rem;
  font:600 .95rem Inter;color:var(--ink);cursor:pointer;transition:border-color .16s,transform .16s,background .16s}
.choice:hover:not(:disabled){border-color:var(--primary-light);transform:translateY(-2px)}
.choice:disabled{cursor:default}
.choice.right{border-color:var(--live);background:#f0faf5}
.choice.wrong{border-color:var(--wrong);background:#fdf3f2}
.choices.col{flex-direction:column;flex-wrap:nowrap}
.choices.col .choice{flex:0 0 auto;width:100%;min-height:0}
.emb img{width:100%;height:100%;object-fit:contain;display:block}
.verdict{margin-top:.8rem;padding:.8rem 1rem;border-radius:12px;font-size:.93rem;line-height:1.55;display:none}
.verdict.show{display:block;animation:sd .3s ease-out}
.verdict.foul{background:#fdf3f2;border:1px solid #f3c9c6;color:#7a2e2a}
.verdict.fair{background:#f0faf5;border:1px solid #bfe6d3;color:#1c6b49}
.verdict b{color:inherit}
.isle-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.score{font:600 .85rem Inter;color:var(--ink-3)}
.btn{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;border:0;border-radius:10px;
  padding:.6rem 1.1rem;font:700 .92rem Inter;cursor:pointer;box-shadow:0 12px 26px -14px rgba(234,122,39,.5);transition:transform .16s var(--spring)}
.btn:hover:not(:disabled){transform:translateY(-2px)} .btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn.ghost{background:#fff;color:var(--primary-deep);border:1px solid var(--border);box-shadow:none}
.saysline{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;padding:.7rem .9rem;background:var(--accent-soft);border-radius:10px}
.saysline p{margin:0;color:var(--ink-2);font-size:.92rem;flex:1}

/* prose panels */
.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem;margin-bottom:.8rem;box-shadow:0 8px 22px -18px rgba(120,72,20,.3)}
.panel .mh{font:700 .64rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:.4rem}
.panel p{margin:0}
.panel.warn{border-left:3px solid var(--primary)}

/* wizard */
.wz-q{font-family:'Playfair Display',serif;font-size:1.08rem;color:var(--ink);margin-bottom:.2rem}
.wz-step{border:1px solid var(--border);border-radius:12px;margin-bottom:.6rem;overflow:hidden}
.wz-think{padding:.85rem 1rem;background:#fff;cursor:pointer;font-weight:600;color:var(--ink);display:flex;gap:.6rem;align-items:flex-start}
.wz-think .n{width:24px;height:24px;flex:0 0 auto;background:var(--accent-soft);color:var(--primary-deep);border-radius:50%;display:grid;place-items:center;font:700 .78rem Inter}
.wz-think .tap{margin-left:auto;font:600 .62rem 'JetBrains Mono',monospace;color:var(--primary);white-space:nowrap}
.wz-reveal{display:none;padding:.1rem 1rem 1rem 2.5rem;color:var(--ink-2)}
.wz-step.open .wz-reveal{display:block;animation:sd .3s ease-out}
.wz-step.open .wz-think .tap{display:none}
@keyframes sd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* real world */
.rw-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.rw-grid{grid-template-columns:1fr}}
.rwc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;box-shadow:0 8px 22px -18px rgba(120,72,20,.3)}
.rwc .ic{font-size:1.4rem} .rwc b{display:block;margin:.35rem 0 .25rem;font-family:'Playfair Display',serif}
.rwc p{margin:0;font-size:.92rem}

/* quiz */
.q-q{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--ink);margin-bottom:.7rem}
.q-hint{display:none;margin:.2rem 0 .7rem;padding:.6rem .85rem;background:var(--mist);border-radius:10px;font-size:.9rem;color:var(--ink-2)}
.q-hint.show{display:block}
.q-fb{margin-top:.5rem;font-size:.9rem;line-height:1.55;display:none}
.q-fb.show{display:block}

/* mistakes table */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--border-soft);vertical-align:top}
.tbl th{background:var(--mist);font:700 .62rem 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--primary-deep)}
.tbl tr:last-child td{border-bottom:0} .tbl td:first-child{color:var(--ink);font-weight:600}

/* FAQ (approved glass component) */
.faq details{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:.55rem;box-shadow:0 6px 20px -16px rgba(120,72,20,.3);overflow:hidden}
.faq summary{padding:.85rem 1rem;cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;gap:.55rem;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--primary);font-weight:800;flex:0 0 auto}
.faq details[open] summary::before{content:"\2212"}
.faq .meta{display:flex;gap:.35rem;flex-wrap:wrap;padding:0 1rem .4rem 2.1rem}
.faq .meta span{font:600 .58rem 'JetBrains Mono',monospace;color:var(--primary-deep);background:var(--mist);border:1px solid var(--border);border-radius:999px;padding:.14rem .55rem}
.faq .ans{padding:.1rem 1rem .95rem 2.1rem;color:var(--ink-2);font-size:.94rem}

/* lens reflection */
.lens{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.lens h3{font-size:1.2rem;margin-bottom:.3rem}
.lens .sub{color:var(--ink-3);font-size:.9rem;margin-bottom:.9rem}
.lens-row{display:flex;flex-wrap:wrap;gap:.55rem}
.lens-opt{padding:.5rem .9rem;background:#fff;border:1px solid var(--border);border-radius:999px;cursor:pointer;font:600 .86rem Inter;color:var(--ink);transition:all .16s var(--spring)}
.lens-opt:hover{border-color:var(--primary);transform:translateY(-1px)}
.lens-opt.sel{background:var(--primary);color:#fff;border-color:var(--primary)}
.lens-say{margin-top:.9rem;color:var(--ink-2);font-style:italic;min-height:1.2rem}

/* guidance */
.guide{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.guide .lab{font-weight:700;color:var(--primary-deep);font-size:.9rem}
.guide summary{cursor:pointer;color:var(--primary-deep);font-weight:600;margin:.6rem 0}
.guide ul{margin:.3rem 0 .8rem 1.2rem;color:var(--ink-2)}

/* nav + footer */
.nav{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.nav a{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;color:var(--primary-deep);padding:.5rem .95rem;background:#fff;
  border:1px solid var(--border);border-radius:10px;font:700 .92rem Inter;white-space:nowrap;transition:transform .18s var(--spring),border-color .18s}
.nav a:hover{transform:translateY(-2px);border-color:var(--primary)} .nav a svg{width:18px;height:18px}
.nav a.hub{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;border-color:var(--primary)}
.nav .info{color:var(--ink-3);font-weight:700;font-size:.9rem;min-width:60px;text-align:center}
/* [2026-07-10] Pawan: 'copyright line in all is a smaller font' → .72rem → .68rem fine-print, uniform across the gold surface. */
.copyr{max-width:var(--reading);margin:2rem auto 0;padding:.7rem 18px 1.3rem;text-align:center;color:var(--muted);font-size:.68rem;line-height:1.5;border-top:1px solid var(--border-soft)}
.copyr b{color:var(--primary-deep);font-weight:700}

/* ===== visual reasoning models ===== */
.subh{font-family:'Playfair Display',serif;font-size:1.15rem;margin:1.6rem 0 .7rem;color:var(--ink)}
.subh em{color:var(--primary-deep);font-style:italic}
.tapnote{text-align:center;font:600 .62rem 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:.5rem 0 0}
.takeaway{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;padding:.75rem 1rem;background:linear-gradient(135deg,#1a1c1e,#2a2d3a);border-radius:12px}
.takeaway .tk{font:700 .58rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-light);background:rgba(245,159,10,.16);padding:.28rem .6rem;border-radius:999px;flex:0 0 auto}
.takeaway b{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;color:#fff;line-height:1.25}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:520px){.paths{grid-template-columns:1fr}}
.path{border:1px solid var(--border);border-radius:14px;padding:.9rem}
.path.good{background:#f0faf5;border-color:#bfe6d3}.path.bad{background:#fdf3f2;border-color:#f3c9c6}
.path .ph{display:block;font:700 .6rem 'JetBrains Mono',monospace;text-transform:uppercase;margin-bottom:.6rem}
.path.good .ph{color:#1c6b49}.path.bad .ph{color:#a3312b}
.path .step{display:block;background:#fff;border:1px solid var(--border);border-radius:9px;padding:.4rem .6rem;margin:.55rem 0;font-weight:600;font-size:.85rem;text-align:center;position:relative}
.path .step+.step::before{content:"\2193";position:absolute;top:-1.1rem;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.8rem}
.path.good .s0{animation:pth 3.6s infinite}.path.good .s1{animation:pth 3.6s infinite 1.2s}.path.good .s2{animation:pth 3.6s infinite 2.4s}
.path.bad .s0{animation:pth 3.6s infinite}.path.bad .s1{animation:pth 3.6s infinite 1.2s}.path.bad .s2{animation:pthbad 3.6s infinite 2.4s}
@keyframes pth{0%,66%,100%{border-color:var(--border);transform:none}72%,88%{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 18px -12px rgba(234,122,39,.6)}}
@keyframes pthbad{0%,66%,100%{border-color:var(--border);transform:none;color:var(--ink)}72%,100%{border-color:var(--wrong);color:var(--wrong);transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.path .step{animation:none!important}}
.flow{display:flex;flex-direction:column;gap:0;max-width:440px;margin:1.2rem auto 0}
.node{display:block;text-align:left;width:100%;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:.65rem .95rem;cursor:pointer;transition:border-color .18s,transform .18s}
.node:hover{border-color:var(--primary-light);transform:translateY(-1px)}
.node .nt{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.55rem}
.node .nt .dot{width:9px;height:9px;border-radius:50%;background:var(--primary);flex:0 0 auto}
.node .nd{display:none;margin-top:.35rem;font-size:.88rem;color:var(--ink-2)}
.node.open .nd{display:block;animation:sd .3s ease-out}
.node.end{background:#1a1c1e;border-color:#1a1c1e}.node.end .nt{color:#fff}.node.end .nt .dot{background:var(--primary-light)}.node.end .nd{color:#d9d2c6}
.flow .fa{align-self:center;color:var(--muted);font-size:1rem;line-height:1;padding:.22rem 0}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.2rem}
@media(max-width:520px){.contrast{grid-template-columns:1fr}}
.ccol{border:1px solid var(--border);border-radius:14px;padding:1rem;background:var(--card)}
.ccol.ok{border-top:3px solid var(--live)}.ccol.no{border-top:3px solid var(--wrong)}
.ccol .cl{font:600 .56rem 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ccol h4{font-family:'Playfair Display',serif;font-size:1.05rem;margin:.15rem 0 .5rem}
.tag2{display:inline-flex;align-items:center;font-weight:600;font-size:.86rem;padding:.28rem .55rem;border-radius:8px;margin:.25rem .25rem 0 0}
.tag2.y{background:#f0faf5;color:#1c6b49}.tag2.n{background:#fdf3f2;color:#7a2e2a}
.dtree{margin:.4rem auto 0;max-width:520px;text-align:center}
.dnode{display:inline-block;background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:.5rem .85rem;font-weight:700;color:var(--ink);font-size:.9rem;line-height:1.3}
.dnode.q{background:var(--accent-soft);border-color:var(--primary-light);color:var(--primary-deep)}
.dnode.act{background:#1a1c1e;color:#fff;border-color:#1a1c1e;font-weight:600;font-size:.84rem;max-width:180px}
.dline{color:var(--muted);font-size:1rem;line-height:.9;margin:.1rem 0;display:block}
.dbranch{display:flex;justify-content:center;gap:1.4rem;margin-top:.2rem;flex-wrap:wrap}
.dcol{display:flex;flex-direction:column;align-items:center;gap:.1rem;max-width:200px}
.dcol .lbl{font:700 .6rem 'JetBrains Mono',monospace;color:var(--primary-deep);margin-top:.3rem}
.flip-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:520px){.flip-grid{grid-template-columns:1fr}}
.flip{perspective:1000px;height:158px;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transition:transform .5s var(--spring);transform-style:preserve-3d}
.flip.on .flip-in{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--border);border-radius:14px;padding:1rem;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow)}
.flip-front{background:var(--card)}.flip-front .ic{font-size:1.7rem}
.flip-front b{font-family:'Playfair Display',serif;margin-top:.3rem;font-size:1.05rem}
.flip-front .tap{margin-top:.45rem;font:600 .58rem 'JetBrains Mono',monospace;color:var(--primary);text-transform:uppercase;letter-spacing:.05em}
.flip-back{background:#1a1c1e;transform:rotateY(180deg)}
.flip-back .lbl{font:700 .56rem 'JetBrains Mono',monospace;color:var(--primary-light);text-transform:uppercase;letter-spacing:.06em}
.flip-back p{color:#e8e2d8;font-size:.92rem;margin-top:.35rem;line-height:1.5}
.myth{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.myth-row{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:520px){.myth-row{grid-template-columns:1fr}}
.myth-x{padding:1.1rem 1.2rem;background:#fdf3f2}
.myth-y{padding:1.1rem 1.2rem;background:#f0faf5;border-left:1px solid var(--border)}
@media(max-width:520px){.myth-y{border-left:0;border-top:1px solid var(--border)}}
.myth .k{font:700 .6rem 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.05em}
.myth-x .k{color:#a3312b}.myth-y .k{color:#1c6b49}
.myth p{margin-top:.45rem;color:var(--ink);font-size:.94rem;line-height:1.55}
.myth-foot{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.2rem;background:var(--bg-warm);border-top:1px solid var(--border)}
.myth-dots{display:flex;gap:.4rem}.myth-dots i{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s}.myth-dots i.on{background:var(--primary)}

/* [2026-07-03] Pawan: dignified & subtle like shell-preview / physics — chrome + browse
   sequence must NOT take prime real estate or break the reading flow. No loud dark bars. */
/* takeaway: a quiet one-line rule under a hairline, not a dark block */
.takeaway{display:block;margin:1.4rem 0 .2rem;padding:.6rem 0 0;background:none!important;border:0;border-top:1px solid var(--border-soft);border-radius:0}
.takeaway .tk{background:none!important;padding:0;margin-right:.55rem;color:var(--primary-deep);letter-spacing:.12em}
.takeaway b{color:var(--ink)!important;font-family:'Playfair Display',serif;font-weight:700;font-size:1.02rem}
/* interactive islands: lighter, calmer chrome */
.isle{box-shadow:0 10px 30px -22px rgba(120,72,20,.25);border-radius:16px}
.isle-top{background:none;border-bottom:1px solid var(--border-soft);padding:.7rem 1.15rem}
.isle-k{color:var(--muted)}
.isle-prog{color:var(--muted);font-weight:500}
.isle-bar{height:3px;background:var(--border-soft);margin-top:.55rem}
.isle-bar i{background:var(--primary-light)}
/* browse sequence — breadcrumb: a whisper, not a bar */
.crumb{border-bottom:1px solid var(--border-soft);padding:.45rem 18px;margin:.9rem auto .9rem}
.crumb a{font-weight:600;font-size:.82rem;color:var(--ink-3)}
.crumb a:hover{color:var(--primary-deep)}
.crumb .badge{background:none;border:0;color:var(--muted);padding:0;font-size:.6rem}
/* browse sequence — prev/next/hub: quiet text-weight links, not filled blocks */
.nav{gap:.4rem;border-top:1px solid var(--border-soft)}
.nav a{background:none;border:0;box-shadow:none;color:var(--ink-3);font-weight:600;padding:.4rem .55rem}
.nav a:hover:not(.hub){color:var(--primary-deep);transform:none}
.nav a.hub{background:none!important;color:var(--primary-deep)!important;border:0!important}
.nav a.hub:hover{color:var(--primary)!important;transform:none}
.nav .info{color:var(--muted);font-weight:500}
/* section notes a touch lighter so the eye rests on content, not chrome */
.note{background:var(--accent-soft);border-left-width:2px}

/* lens reflection with meat */
.lens-meat{margin-top:1rem;padding:.95rem 1.15rem;background:var(--accent-soft);border-left:2px solid var(--primary);border-radius:0 12px 12px 0;display:none}
.lens-meat.show{display:block;animation:sd .3s ease-out}
.lens-meat .lm-h{font:700 .58rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:.3rem}
.lens-meat h5{font-family:'Playfair Display',serif;font-size:1.05rem;margin:0 0 .3rem;color:var(--ink)}
.lens-meat p{color:var(--ink-2);font-size:.93rem;line-height:1.6;margin:0}

/* colour language legend */
.legend{display:inline-flex;align-items:center;gap:.35rem;margin-left:.4rem;font:600 .68rem 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.legend .ld{width:9px;height:9px;border-radius:50%;display:inline-block;margin:0 .1rem 0 .5rem}
.legend .ld.g{background:#1f9d6b}.legend .ld.o{background:var(--primary)}.legend .ld.r{background:var(--wrong)}
/* flip-card shape icon */
.flip-front .ic{font-size:0}.flip-front .ic img,.flip-front .ic svg{width:38px;height:38px;object-fit:contain;display:block}
/* VISUAL LENS */
.lensbox{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.2rem 1.3rem;overflow:hidden;box-shadow:var(--shadow);touch-action:none;-webkit-user-select:none;user-select:none}
.conv{display:flex;flex-direction:column;gap:.55rem}
.conv-line{padding:.6rem .85rem;border-radius:10px;background:var(--bg-warm);border:1px solid var(--border-soft);color:var(--ink-3);font-weight:600;font-size:.92rem;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.conv-line.lit[data-t="arg"]{background:#eafaf1;border-color:#bfe6d3;color:#1c6b49;box-shadow:0 0 0 2px rgba(31,157,107,.14)}
.conv-line.lit[data-t="att"]{background:#fdeeec;border-color:#f3c9c6;color:#c0554f;opacity:.5}
.vlens{position:absolute;left:32%;top:76px;width:116px;height:116px;border-radius:50%;border:3px solid var(--primary);background:transparent;box-shadow:0 8px 22px -10px rgba(234,122,39,.55),inset 0 0 0 1.5px rgba(255,255,255,.65);transform:translate(-50%,-50%);cursor:grab;touch-action:none;animation:lenspulse 3s ease-in-out infinite}
.vlens::after{content:"drag";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 .5rem 'JetBrains Mono',monospace;color:var(--primary-deep);opacity:.45;text-transform:uppercase;letter-spacing:.14em;background:rgba(255,255,255,.7);padding:.1rem .3rem;border-radius:4px}
.vlens.used::after{display:none}
@keyframes lenspulse{0%,100%{box-shadow:0 8px 22px -10px rgba(234,122,39,.45),inset 0 0 0 1.5px rgba(255,255,255,.6)}50%{box-shadow:0 12px 30px -8px rgba(234,122,39,.62),inset 0 0 0 1.5px rgba(255,255,255,.75)}}
@media(prefers-reduced-motion:reduce){.vlens{animation:none}}

/* CTA line — an action invite, earns its amber (design-article pattern) */
.cta-line{display:flex;align-items:center;justify-content:center;gap:.55rem;max-width:var(--reading);margin:1.4rem auto .2rem;padding:.85rem 1.2rem;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;border-radius:12px;
  font:700 1.02rem 'Playfair Display',serif;box-shadow:0 14px 32px -14px rgba(234,122,39,.55);transition:transform .18s var(--spring),box-shadow .2s}
.cta-line:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(234,122,39,.6)}
.cta-line b{font-weight:800}
.cta-arrow{display:inline-block;animation:ctab 1.3s ease-in-out infinite}
@keyframes ctab{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
/* dark dramatic stage for the Visual Lens */
.lensbox{background:radial-gradient(120% 100% at 30% 0%,#20222a,#141519);border:1px solid #2b2f37;box-shadow:0 24px 60px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04)}
.conv-line{background:#23262e;border:1px solid #333844;color:#9aa1ad}
.conv-line.lit[data-t="arg"]{background:rgba(31,157,107,.16);border-color:#2fbd85;color:#79ecbb;box-shadow:0 0 0 2px rgba(47,189,133,.25),0 0 22px rgba(47,189,133,.18)}
.conv-line.lit[data-t="att"]{background:rgba(217,84,79,.14);border-color:#e06a63;color:#ffa19b;opacity:.62}
.vlens{border-color:var(--primary-light);box-shadow:0 0 34px rgba(245,159,10,.45),0 8px 22px -8px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.35)}
.vlens::after{color:var(--primary-light);background:rgba(0,0,0,.45)}
@keyframes lenspulse{0%,100%{box-shadow:0 0 30px rgba(245,159,10,.35),0 8px 22px -8px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.3)}50%{box-shadow:0 0 40px rgba(245,159,10,.6),0 8px 22px -8px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.45)}}

/* ===== TRUE MOBILE (<=460px) — stack everything that runs 2-up so nothing overflows ===== */
@media(max-width:540px){
  html,body{overflow-x:hidden}
  .wrap,.crumb,.cta-line{max-width:100%}
  .choices{flex-direction:column}
  .choices .choice{width:100%;flex:1 1 auto;min-width:0}
  .paths,.contrast,.flip-grid,.myth-row,.rw-grid{grid-template-columns:1fr}
  .dbranch{flex-direction:column;align-items:center;gap:.45rem}
  .dcol,.dnode.act,.flow,.dtree{max-width:100%}
  .crumb{gap:.4rem}
  .crumb a{font-size:.78rem}
  .crumb .badge{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .legend{margin-left:0}
  .isle-top{flex-wrap:wrap}
  .conv-line,.node,.dnode{overflow-wrap:anywhere}
}

/* ===== MOBILE MAGIC (<=540) — immersive full-bleed touch stages ===== */
@media(max-width:540px){
  .lensbox{margin-inline:-18px;border-radius:0;padding:1.2rem 1rem;border-left:0;border-right:0}
  .vlens{width:132px;height:132px}
  .conv-line{font-size:.98rem;padding:.7rem .8rem}
  #lens .note{margin-inline:-18px;border-radius:0}
  .cta-line{margin-inline:0;font-size:1rem}
  .choice,.lens-opt,.hint-btn,.nav a{min-height:44px}
  .isle-body{padding:1rem .9rem}
  .isle,.myth{margin-inline:-18px;border-radius:0;border-left:0;border-right:0}
  .flip-grid,.rw-grid,.paths{margin-inline:-4px}
  .flip{height:132px}
  .myth-x,.myth-y{padding:1rem}
  .cta-line{border-radius:0;margin-inline:-18px}
}

/* ===== VOICES — glassmorphic quotes moment (beyond_dictionary pattern) ===== */
.voicestage{position:relative;overflow:hidden;border-radius:20px;padding:2.2rem 1.4rem;
  background:radial-gradient(130% 120% at 18% 0%,#fef1db 0%,#fbe2c1 55%,#f4cf9f 100%)}
.vdeco{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;z-index:0}
.vdeco1{width:150px;height:150px;background:radial-gradient(circle,#f59f0a,transparent 70%);top:-40px;right:-30px}
.vdeco2{width:120px;height:120px;background:radial-gradient(circle,#1a1c1e33,transparent 70%);bottom:-30px;left:-20px}
.qcard{position:relative;z-index:1;max-width:600px;margin:0 auto;text-align:center;border-radius:16px;padding:1.6rem 1.6rem 1.4rem;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.75);box-shadow:0 22px 54px -26px rgba(120,72,20,.5),inset 0 1px 0 rgba(255,255,255,.6);transition:opacity .45s}
.qmark{font-family:'Playfair Display',serif;font-size:3.2rem;line-height:0;height:1.3rem;color:var(--primary);opacity:.6}
.qtext{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1.15rem,3.2vw,1.4rem);line-height:1.42;color:var(--ink);margin:.2rem 0 0;min-height:3.6em;display:flex;align-items:center;justify-content:center}
.qfoot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.qfoot cite{font-style:normal;font:600 .82rem 'JetBrains Mono',monospace;color:var(--primary-deep);text-align:left}
.qlisten{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:999px;
  padding:.4rem .9rem;font:700 .8rem Inter,sans-serif;color:var(--primary-deep);cursor:pointer;transition:transform .16s,background .16s}
.qlisten:hover{transform:translateY(-1px);background:#fff}
.qnav{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.1rem;position:relative;z-index:1}
.qarrow{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);color:var(--primary-deep);
  font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .16s,background .16s}
.qarrow:hover{transform:scale(1.08);background:#fff}
.qdots{display:flex;gap:.45rem}
.qdots i{width:8px;height:8px;border-radius:50%;background:rgba(26,28,30,.22);cursor:pointer;transition:background .2s,transform .2s}
.qdots i.on{background:var(--primary-deep);transform:scale(1.25)}
@media(max-width:540px){.voicestage{margin-inline:-18px;border-radius:0;padding:2rem 1.1rem}.qfoot{justify-content:center}}
/* ===== SCROLL-REVEAL — sections breathe in on scroll (only when JS is on) ===== */
.reveal-on section{opacity:0;transform:translateY(22px);transition:opacity .6s var(--spring),transform .6s var(--spring)}
.reveal-on section.revealed{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-on section{opacity:1;transform:none;transition:none}}

/* ===== THINKING-LAB CARD KIT (Hop 1, 2026-07-09) — components the card series needs, gold tokens only ===== */
.think-ta{width:100%;min-height:120px;padding:.9rem 1rem;border:1.5px solid var(--border);border-radius:12px;
  font:400 .95rem Inter;color:var(--ink);background:#fff;resize:vertical;line-height:1.6;margin:.2rem 0 1rem}
.think-ta:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(245,159,10,.12)}
.gk-lock{display:flex;align-items:center;gap:.5rem;justify-content:center;background:var(--accent-soft);
  border:1px dashed var(--primary-light);border-radius:12px;padding:.8rem 1rem;color:var(--primary-deep);font:600 .9rem Inter}
.gk-hints{display:none} .gk-hints.unlocked{display:block;animation:sd .3s ease-out}
.gk-hint,.gk-complete{border:1px solid var(--border);border-radius:12px;margin-bottom:.55rem;overflow:hidden;background:#fff}
.gk-tap{width:100%;text-align:left;padding:.8rem 1rem;background:#fff;border:0;cursor:pointer;font:700 .95rem Inter;color:var(--ink);
  display:flex;gap:.6rem;align-items:center;transition:background .16s}
.gk-tap:hover{background:var(--accent-soft)}
.gk-hint[data-disabled] .gk-tap,.gk-complete[data-disabled] .gk-tap{opacity:.45;cursor:not-allowed}
.gk-hint[data-disabled] .gk-tap:hover,.gk-complete[data-disabled] .gk-tap:hover{background:#fff}
.gk-n{width:26px;height:26px;flex:0 0 auto;background:var(--accent-soft);color:var(--primary-deep);border-radius:50%;
  display:grid;place-items:center;font:700 .8rem Inter}
.gk-tap .gk-more{margin-left:auto;font:600 .58rem 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--primary)}
.gk-reveal{display:none;padding:.1rem 1rem 1rem 2.6rem;color:var(--ink-2);font-size:.94rem;line-height:1.7}
.gk-reveal p{margin:.35rem 0} .gk-reveal strong{color:var(--ink)}
.gk-hint.open .gk-reveal,.gk-complete.open .gk-reveal{display:block;animation:sd .3s ease-out}
.gk-hint.open .gk-more,.gk-complete.open .gk-more{display:none}
.gk-complete{border-color:var(--primary-light);background:var(--accent-soft)}
.gk-complete .gk-tap{background:var(--accent-soft);color:var(--primary-deep)}
.gk-complete .gk-reveal{background:#fff;margin:.2rem .7rem .7rem;border-radius:10px;padding:.9rem 1.1rem;border-left:3px solid var(--primary)}
.lens{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.lens .sub{color:var(--ink-3);font-size:.9rem;margin:.2rem 0 .9rem}
.lens-row{display:flex;flex-wrap:wrap;gap:.55rem}
@media(max-width:540px){.think-ta{min-height:132px}.gk-tap,.lens-opt{min-height:44px}}

/* [2026-07-09] Pawan fixes — (1) shapes were under-filling their frame, (2) nav still wore the old purple */
/* (1) the injected SVG needs a real box to fill (fitSvg gives ~86%); an inline span gave it none */
.emb .shape{display:block;width:100%;height:100%;line-height:0}
.emb .shape svg{width:100%;height:100%;display:block}
/* (2) l2-navigation.js injects the per-series colour (critical=#7C3AED) + boxed buttons at runtime.
   Realign nav to the calm gold surface: whisper links, amber accent, no rainbow. !important beats
   the runtime-injected #l2-nav-styles and the inline counter colour. */
#l2-nav.nav-section{border-top:1px solid var(--border-soft)!important;padding:1.1rem 0 .2rem!important;margin-top:1.6rem!important}
.l2-nav-prev,.l2-nav-next{background:none!important;border:0!important;box-shadow:none!important;color:var(--ink-3)!important;font:600 .9rem Inter!important;padding:.4rem .55rem!important}
.l2-nav-prev:hover,.l2-nav-next:hover{color:var(--primary-deep)!important;transform:none!important;box-shadow:none!important}
.l2-nav-prev.cross-series,.l2-nav-next.cross-series{background:none!important;border:0!important;color:var(--muted)!important;font-style:italic}
.l2-nav-counter{color:var(--muted)!important;font-weight:500!important}
.l2-nav-counter span{color:var(--primary-deep)!important}

/* [2026-07-09] Pawan: write-first — hide the bottom (hints, nav, lens) until words are entered */
body.gk-prewrite #hints,body.gk-prewrite #lens{display:none!important}
.gk-writehint{margin:.2rem 0 0;color:var(--ink-3);font-size:.9rem;font-style:italic;display:flex;gap:.4rem;align-items:center}

/* [2026-07-09] Pawan: also hide the copyright footer until words are entered */
body.gk-prewrite .copyr{display:none!important}