/* Whose™ styles. © 2026 Yellow House Productions (Pvt) Ltd. */
:root{
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#e8edf1; --paper:#fdfdfb; --paper2:#f3f6f8; --ink:#1a2233; --muted:#54606e; --line:#c9d3dc;
  --hl:#ffd83d; --hl-ink:#1a2233; --focus:#1f4fd8;
  --brand1:#0c7f93; --brand2:#1ec2c9; --brand-ink:#eafdff;
  --fill-good:#0c7f93; --fill-risk:#c62828; --fill-part:#f0b429;
  --good:#0b6b5c; --good-bg:#dcf0eb; --mid:#8a5300; --mid-bg:#fbeacb; --bad:#a82f1c; --bad-bg:#f7dfda;
  --shadow:0 1px 2px rgba(26,34,51,.08),0 10px 28px rgba(26,34,51,.07);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f151c; --paper:#182029; --paper2:#1e2833; --ink:#e9eef3; --muted:#9fabb8; --line:#2c3846;
    --hl:#ffd83d; --hl-ink:#1a2233; --focus:#7aa2ff;
    --good:#5fd0b9; --good-bg:#10302a; --mid:#f0bd5a; --mid-bg:#33270e; --bad:#ff9a88; --bad-bg:#37191a;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#0f151c; --paper:#182029; --paper2:#1e2833; --ink:#e9eef3; --muted:#9fabb8; --line:#2c3846;
  --hl:#ffd83d; --hl-ink:#1a2233; --focus:#7aa2ff;
  --good:#5fd0b9; --good-bg:#10302a; --mid:#f0bd5a; --mid-bg:#33270e; --bad:#ff9a88; --bad-bg:#37191a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.3);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px;top:0;background:var(--hl);color:var(--hl-ink);padding:10px 14px;z-index:20;font-weight:600}
.skip:focus{left:0}

header.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:20px 0 8px}
.brand{display:inline-flex;text-decoration:none;line-height:0}
.brandlogo{height:38px;width:auto;display:block}
.langnote{margin:0;max-width:260px;font-size:13px;line-height:1.35;color:var(--muted);text-align:right}
@media (max-width:480px){.langnote{text-align:left}}
.wordmark{max-width:340px;width:100%;height:auto;margin-bottom:6px}
@media (max-width:480px){.brandlogo{height:32px}}
nav.main{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
nav.main a,.iconbtn{padding:9px 12px;border-radius:8px;text-decoration:none;font-size:15px;color:var(--muted);background:none;border:0;cursor:pointer;min-height:40px;display:inline-flex;align-items:center}
nav.main a:hover,.iconbtn:hover{background:var(--paper);color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--hl);border-radius:0}

main{display:block;padding:18px 0 56px;outline:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.012em;margin:0;line-height:1.1}
h1{font-size:clamp(40px,8.5vw,68px)}
h2{font-size:clamp(28px,5vw,38px)}
h3{font-size:24px}
h4{font-family:var(--sans);font-size:15px;font-weight:650;letter-spacing:0;line-height:1.3}
p{margin:0 0 1em}
.lead{font-size:19px;line-height:1.55;max-width:34em;color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:14.5px}
.label{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 6px}
.serif{font-family:var(--serif)}
.stack>*+*{margin-top:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:10px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:600;font-size:16px;cursor:pointer;text-decoration:none}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--ink);color:var(--paper)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.textlink{color:var(--ink);font-weight:500}

/* hero */
.hero{padding:26px 0 8px}
.hero h1{margin-bottom:16px}
.demo{margin:26px 0 24px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow)}
.demo .sent{font-family:var(--serif);font-size:23px;line-height:1.5;margin:6px 0 10px}
.demo .note{min-height:3.2em;font-size:15.5px;margin:0;color:var(--ink)}

/* highlighter taps */
.tap{font:inherit;color:inherit;background:transparent;border:0;border-bottom:2px dashed var(--muted);padding:0 2px;margin:0;cursor:pointer;border-radius:2px;transition:background .18s ease}
.tap:hover{background:color-mix(in srgb,var(--hl) 45%,transparent)}
.tap[aria-pressed="true"],.tap.on{background:var(--hl);color:var(--hl-ink);border-bottom-color:transparent;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tap[disabled]{cursor:default}
.tap.hit{background:var(--fill-good);color:#fff;border-bottom:2px solid var(--fill-good)}
.tap.miss{background:transparent;color:var(--bad);border-bottom:2px dashed var(--bad)}
.tap.wrong{background:var(--fill-risk);color:#fff;border-bottom:2px solid var(--fill-risk);text-decoration:line-through}

/* passport */
.passport{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.stamp{width:52px;height:52px}
.stamp circle{fill:none;stroke:var(--line);stroke-width:2.5;stroke-dasharray:4 4}
.stamp text{font-family:var(--serif);font-size:22px;fill:var(--muted);font-weight:500}
.stamp.on circle{fill:var(--hl);stroke:var(--ink);stroke-dasharray:none;stroke-width:2.5}
.stamp.on text{fill:var(--hl-ink)}

/* case list */
.cases{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.cases li{border-bottom:1px solid var(--line)}
.case{display:grid;grid-template-columns:56px 1fr auto;gap:8px 16px;align-items:start;padding:20px 8px;text-decoration:none;min-height:88px}
.case:hover{background:var(--paper)}
.case .num{font-family:var(--serif);font-size:44px;line-height:1;color:var(--muted)}
.case .ct{font-family:var(--serif);font-size:26px;line-height:1.15;font-weight:500;display:block}
.case .cp{display:block;color:var(--muted);font-size:16px;margin-top:4px}
.case .cm{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--muted)}
.case .cm span+span{padding-left:14px;border-left:1px solid var(--line)}
.case .done{font-size:14px;font-weight:600;color:var(--good);white-space:nowrap}

.how{padding-left:22px;margin:10px 0 0}
.how li{margin-bottom:10px}

/* case intro */
.crumb{display:inline-block;margin-bottom:22px;font-size:15px;color:var(--muted)}
.kicker{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted);margin:10px 0 22px}
.brief{font-family:var(--serif);font-size:20px;line-height:1.6;max-width:36em}
dl.terms{margin:22px 0;display:grid;gap:0;border-top:1px solid var(--line)}
dl.terms>div{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:130px 1fr;gap:4px 18px}
dl.terms dt{font-weight:650;overflow-wrap:break-word;word-break:break-word}
dl.terms dd{margin:0;color:var(--ink)}
.callout{border-left:4px solid var(--hl);background:var(--paper);padding:12px 16px;border-radius:0 8px 8px 0;font-size:15.5px}

/* step */
.top-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px;font-size:14.5px;color:var(--muted)}
.progress{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:0 0 22px}
.progress span{display:block;height:100%;background:var(--hl);box-shadow:inset 0 0 0 1px var(--ink);border-radius:6px;transition:width .35s ease}
.stepq{font-family:var(--serif);font-size:24px;line-height:1.35;margin:22px 0 16px;font-weight:450;max-width:32em}
.intro{margin:12px 0 0;color:var(--muted)}

/* evidence */
.art{margin:18px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.art figcaption{font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 16px 8px;border-bottom:1px solid var(--line);background:var(--paper2)}
.art .in{padding:14px 18px 16px}
.chat .in{display:flex;flex-direction:column;gap:8px}
.bub{margin:0;max-width:88%;padding:9px 13px;border-radius:14px 14px 14px 4px;background:var(--paper2);border:1px solid var(--line);font-size:16px;line-height:1.45}
.bub.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--hl) 30%,var(--paper))}
.bub .who{display:block;font-size:12.5px;font-weight:650;color:var(--muted);margin-bottom:1px}
.doc .in,.mail .in{font-family:var(--serif);font-size:19px;line-height:1.7}
.doc .in p,.mail .in p{margin:0 0 .7em}
dl.hdr{margin:0 0 12px;display:grid;grid-template-columns:70px 1fr;gap:2px 10px;font-family:var(--sans);font-size:14.5px;padding-bottom:10px;border-bottom:1px solid var(--line)}
dl.hdr dt{color:var(--muted)}
dl.hdr dd{margin:0}
.post .in{font-size:16.5px}
.post .handle{font-weight:650}
.post .meta{color:var(--muted);font-size:14px;margin-top:6px}
.tblwrap{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;font-size:15px;min-width:460px}
table.t th,table.t td{text-align:left;padding:9px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{font-weight:600;color:var(--muted);font-size:14px}
table.t tr:last-child td{border-bottom:0}

/* options */
.opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.opt{display:block;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;font-size:17px;line-height:1.45;cursor:pointer;min-height:56px;transition:border-color .15s ease,background .15s ease}
.opt:hover{border-color:var(--ink);background:var(--paper2)}
.chk{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.chk .box{width:24px;height:24px;border:2px solid var(--ink);border-radius:6px;display:grid;place-items:center;margin-top:1px;font-size:15px;font-weight:700;line-height:1}
.opt[aria-pressed="true"]{border-color:var(--ink);background:color-mix(in srgb,var(--hl) 35%,var(--paper))}
.opt[aria-pressed="true"] .box{background:var(--ink);color:var(--paper)}
.opt[disabled]{cursor:default}
.opt[disabled]:hover{background:var(--paper);border-color:var(--line)}

/* match rows */
.mrow{margin:0 0 18px;padding:0;border:0}
.mrow legend{font-size:17.5px;font-weight:500;margin-bottom:10px;padding:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 15px;font-size:15.5px;cursor:pointer;min-height:44px;line-height:1.25}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip[disabled]{cursor:default}
.chip.ok{background:var(--fill-good);color:#fff;border-color:var(--fill-good)}
.chip.no{background:var(--fill-risk);color:#fff;border-color:var(--fill-risk);text-decoration:line-through}
.chip.key{border-color:var(--good);color:var(--good);background:transparent}
.why{margin:10px 0 0;font-size:15.5px;color:var(--ink);padding-left:12px;border-left:3px solid var(--line)}

/* split */
.split{padding:16px 18px}
.split output{display:block;font-family:var(--serif);font-size:22px;margin:4px 0 10px}
input[type=range]{width:100%;accent-color:var(--ink);height:34px}
.tg{display:grid;gap:8px;margin-top:14px}
.tg label{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;background:var(--paper);font-size:16.5px;line-height:1.4}
.tg input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--ink)}
.tg label:has(input:checked){border-color:var(--ink);background:color-mix(in srgb,var(--hl) 30%,var(--paper))}

/* feedback */
.result{margin-top:20px;scroll-margin-top:16px;outline:none}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650;padding:3px 10px;border-radius:999px;border:1.5px solid currentColor;line-height:1.4}
.badge.best,.badge.ok{color:var(--good);background:var(--good-bg)}
.badge.part{color:var(--mid);background:var(--mid-bg)}
.badge.risk,.badge.no{color:var(--bad);background:var(--bad-bg)}
.fbs{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.fbs li{padding:15px 17px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper)}
.fbs li.picked{box-shadow:0 0 0 2px var(--ink) inset}
/* strong, unmistakable colour per answer: teal = right, red = wrong, amber = partly */
.fbs li.best,.fbs li.ok{background:var(--fill-good);border-color:var(--fill-good)}
.fbs li.best .ot,.fbs li.ok .ot,.fbs li.best .fb,.fbs li.ok .fb{color:#fff}
.fbs li.best .muted,.fbs li.ok .muted{color:rgba(255,255,255,.82)}
.fbs li.best .badge,.fbs li.ok .badge{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.65)}
.fbs li.best.picked,.fbs li.ok.picked{box-shadow:0 0 0 2px #fff inset}
.fbs li.risk,.fbs li.no{background:var(--fill-risk);border-color:var(--fill-risk)}
.fbs li.risk .ot,.fbs li.no .ot,.fbs li.risk .fb,.fbs li.no .fb{color:#fff}
.fbs li.risk .muted,.fbs li.no .muted{color:rgba(255,255,255,.82)}
.fbs li.risk .badge,.fbs li.no .badge{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.65)}
.fbs li.risk.picked,.fbs li.no.picked{box-shadow:0 0 0 2px #fff inset}
.fbs li.part{background:var(--fill-part);border-color:var(--fill-part)}
.fbs li.part .ot,.fbs li.part .fb{color:#241a04}
.fbs li.part .muted{color:rgba(36,26,4,.75)}
.fbs li.part .badge{background:rgba(0,0,0,.14);color:#241a04;border-color:rgba(0,0,0,.4)}
.fbs li.part.picked{box-shadow:0 0 0 2px #241a04 inset}
.fbs .ot{font-weight:600;margin:6px 0 4px;font-size:16.5px}
.fbs .fb{margin:0;font-size:16px}
.pts{font-weight:650}
/* discussion block: a clearly separate panel from the answer cards above */
.notes{margin-top:24px;padding:18px 20px 16px;border-radius:14px;background:color-mix(in srgb,var(--brand2) 9%,var(--paper2));border:1.5px solid color-mix(in srgb,var(--brand2) 32%,var(--line));display:grid;gap:14px}
.notes-label{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brand1)}
.note{padding:0 0 0 14px;border-radius:0;background:transparent;border-left:4px solid var(--brand1);font-size:16px}
.note.w{border-left-color:var(--muted)}
.note h4{margin-bottom:3px}
.note p{margin:0}
.reads{margin-top:14px;font-size:15px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.reads a{padding:4px 11px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;background:var(--paper);font-size:14.5px}
.reads a:hover{border-color:var(--ink)}
.next{margin-top:24px}
ul.tapnotes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
ul.tapnotes li{padding:12px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper)}
ul.tapnotes p{margin:4px 0 0;font-size:16px}

/* debrief */
.map{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper);margin:18px 0}
.map section{padding:16px 18px;min-height:150px}
.map section:nth-child(odd){border-right:2px solid var(--ink)}
.map section:nth-child(-n+2){border-bottom:2px solid var(--ink)}
.map h3{font-size:22px;margin-bottom:8px}
.map ul{margin:0;padding-left:18px;font-size:15.5px}
.map li{margin-bottom:8px}
.map .empty{color:var(--muted);font-style:italic;list-style:none;margin-left:-18px}
.map .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.map .hd i{width:14px;height:14px;border-radius:3px;display:inline-block;border:2px solid var(--ink)}
.map .c-yours .hd i{background:var(--hl)}
.map .c-shared .hd i{background:linear-gradient(90deg,var(--hl) 50%,var(--paper) 50%)}
.map .c-out .hd i{background:var(--ink)}
.map .c-open .hd i{background:transparent;border-style:dashed}
.sum{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin:10px 0 6px}
.sum .big{font-family:var(--serif);font-size:44px;line-height:1}
.bul{margin:8px 0 0;padding-left:20px}
.bul li{margin-bottom:6px}
.tonight{background:var(--hl);color:var(--hl-ink);padding:16px 20px;border-radius:10px;margin:22px 0}
.tonight h4{margin-bottom:4px}
.tonight p{margin:0;font-size:17px}
.status{min-height:1.5em;font-size:14.5px;color:var(--muted);margin-top:8px}

/* lists pages */
.srcgroup{margin-top:30px}
.src{padding:16px 0;border-bottom:1px solid var(--line)}
.src a.t{font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.25}
.src p{margin:4px 0 0;font-size:16px}
.src .by{font-size:14px;color:var(--muted)}
.gl{margin:0;padding:0}
.gl>div{padding:14px 0;border-bottom:1px solid var(--line)}
.gl dt{font-family:var(--serif);font-size:21px;font-weight:500}
.gl dd{margin:4px 0 0}
.gl .var{display:block;margin-top:6px;font-size:14.5px;color:var(--mid);font-weight:550}
.prose h2{margin:34px 0 8px;font-size:28px}
.prose p,.prose li{max-width:38em}

footer{border-top:1px solid var(--line);padding:22px 0 40px;font-size:14.5px;color:var(--muted)}
footer p{margin:0 0 6px;max-width:44em}


/* personalisation, characters, scenes */
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.av{display:block;border-radius:50%;flex:none}
.av.org{border-radius:0}
.line{display:flex;gap:10px;align-items:flex-end}
.line.me{flex-direction:row-reverse}
.line .avw{flex:none;width:36px;height:36px}
.line .bub{max-width:calc(100% - 52px)}
.mailhead{display:flex;gap:14px;align-items:flex-start;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mailhead dl.hdr{margin:0;padding:0;border:0;flex:1}
.band{margin:0 0 22px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper2)}
.band svg{display:block;width:100%;height:auto}
.band img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.band figcaption{font-size:13px;color:var(--muted);padding:6px 12px}
.scene .m{fill:var(--paper2)} .scene .mut{fill:var(--line)} .scene .k{fill:var(--ink)} .scene .p{fill:var(--paper)}
.scene .h{fill:var(--hl)} .scene .g{fill:var(--good)} .scene .b{fill:var(--bad)}
.scene .l{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.scene .lp{fill:var(--paper);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.scene .hs{fill:var(--hl);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.scene .wm{fill:var(--paper2);stroke:var(--ink);stroke-width:2.5}
.scene .w{fill:none;stroke:var(--paper);stroke-width:2.5;stroke-linecap:round}
.mine{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:30px 0 0;box-shadow:var(--shadow)}
.mine.new{grid-template-columns:1fr auto}
.mine h2{margin:0}
.sug{display:inline-block;margin-left:10px;font-family:var(--sans);font-size:13px;font-weight:650;background:var(--hl);color:var(--hl-ink);padding:2px 9px;border-radius:999px;vertical-align:middle;line-height:1.5}
.cast{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 18px}
.cast li{display:flex;gap:12px;align-items:center}
.cast li>span{display:flex;flex-direction:column;line-height:1.3}
.small-cast{margin:0 0 20px}
.chipline{display:inline-flex;align-items:center;gap:8px}
.lens{border-left:4px solid var(--good);background:var(--paper);padding:12px 16px;border-radius:0 8px 8px 0;margin:20px 0;max-width:36em}
.lens h4{margin-bottom:3px}
.lens p{margin:0;font-size:16.5px}
.field{display:grid;gap:8px;margin:26px 0;border:0;padding:0;min-width:0}
.field legend{padding:0}
input[type=text]{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px;width:100%;max-width:26em}
input[type=text]:focus-visible{border-color:var(--ink)}
.picks{display:grid;gap:8px;max-width:26em}
.pick{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer;min-height:48px}
.pick input{accent-color:var(--ink);width:20px;height:20px;margin:0}
.pick:has(input:checked){border-color:var(--ink);background:color-mix(in srgb,var(--hl) 30%,var(--paper))}
.avgrid{display:flex;gap:12px;flex-wrap:wrap}
.avpick{position:relative;cursor:pointer}
.avpick input{position:absolute;opacity:0;width:1px;height:1px}
.avpick .avbox{display:block;border-radius:50%;border:3px solid transparent;padding:2px;line-height:0}
.avpick input:checked+.avbox{border-color:var(--ink)}
.avpick input:focus-visible+.avbox{outline:3px solid var(--focus);outline-offset:2px}

/* language switch and Sinhala / Tamil typography */
.langs{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper)}
.langs button{background:none;border:0;padding:8px 15px;cursor:pointer;font-size:15px;min-height:42px;color:var(--ink);line-height:1.2}
.langs button+button{border-left:1.5px solid var(--ink)}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.langs button[lang="si"]{font-family:"Noto Sans Sinhala","Iskoola Pota",system-ui,sans-serif}
.langs button[lang="ta"]{font-family:"Noto Sans Tamil",Latha,system-ui,sans-serif}
nav.main{padding:2px 0 8px}
main{font-family:var(--sans)}
html[lang="si"]{--serif:"Noto Serif Sinhala","Noto Sans Sinhala","Newsreader","Iskoola Pota",serif;--sans:"Noto Sans Sinhala","Instrument Sans","Iskoola Pota",system-ui,sans-serif}
html[lang="ta"]{--serif:"Noto Serif Tamil","Noto Sans Tamil","Newsreader",Latha,serif;--sans:"Noto Sans Tamil","Instrument Sans",Latha,system-ui,sans-serif}
main[lang="en"]{--serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html[lang="si"] body,html[lang="ta"] body{line-height:1.8}
html[lang="si"] main[lang="en"],html[lang="ta"] main[lang="en"]{line-height:1.6}
html[lang="si"] h1,html[lang="si"] h2,html[lang="si"] h3,html[lang="si"] h4,html[lang="ta"] h1,html[lang="ta"] h2,html[lang="ta"] h3,html[lang="ta"] h4{letter-spacing:0;line-height:1.35}
html[lang="si"] main:not([lang="en"]) h1,html[lang="ta"] main:not([lang="en"]) h1{font-size:clamp(28px,6vw,46px)!important}
html[lang="si"] main:not([lang="en"]) h2,html[lang="ta"] main:not([lang="en"]) h2{font-size:clamp(24px,4.6vw,32px)}
html[lang="si"] main:not([lang="en"]) .stepq,html[lang="ta"] main:not([lang="en"]) .stepq,html[lang="si"] main:not([lang="en"]) .brief,html[lang="ta"] main:not([lang="en"]) .brief{font-size:20px}
html[lang="si"] main:not([lang="en"]) .case .ct,html[lang="ta"] main:not([lang="en"]) .case .ct{font-size:23px}

/* v4: brand hero panel, background shapes, tile cards */
body{position:relative}
.shapes{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.shapes svg{position:absolute;opacity:.16;color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shapes svg{opacity:.10}}
:root[data-theme="dark"] .shapes svg{opacity:.10}
.hero-panel{background:linear-gradient(135deg,var(--brand1),var(--brand2));border-radius:22px;padding:38px 32px 30px;color:var(--brand-ink);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.hero-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.14),transparent 55%);pointer-events:none}
.hero-panel h1{color:#fff}
.hero-panel .lead{color:var(--brand-ink);opacity:.92}
.hero-panel .demo{background:var(--paper);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.hero-panel .demo .note{color:var(--ink)}
.hero-panel .byline{color:var(--brand-ink);opacity:.85}
.hero-panel .textlink,.hero-panel .muted{color:var(--brand-ink);opacity:.9}
.hero-panel .textlink{text-decoration-color:rgba(255,255,255,.55)}
.btn-cta{display:inline-flex;align-items:center;gap:9px;background:var(--hl);color:var(--hl-ink);border:0;border-radius:999px;padding:13px 24px 13px 26px;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.btn-cta:hover{filter:brightness(1.04)}
.btn-cta .arrow{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--hl-ink);color:var(--hl)}
.tiles{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.tile{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;text-decoration:none;box-shadow:var(--shadow);min-height:110px}
.tile:hover{border-color:var(--brand2)}
.thumb{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:600;font-size:18px;position:relative;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.thumb .camtag{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:var(--paper);color:var(--muted);display:grid;place-items:center;border:1.5px solid var(--line)}
.thumb .camtag svg{width:12px;height:12px}
.tile .tbody{min-width:0}
.tile .ct{font-family:var(--serif);font-size:18.5px;line-height:1.2;font-weight:600;display:block;color:var(--ink)}
.tile .cp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:14px;margin-top:4px;line-height:1.4}
.tile .cm{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.tile .sug{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;background:var(--hl);color:var(--hl-ink);padding:2px 8px;border-radius:999px}
.tile .done{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--good)}
@media (max-width:620px){
  body{font-size:16.5px}
  .map{grid-template-columns:1fr}
  .map section:nth-child(odd){border-right:0}
  .map section:not(:last-child){border-bottom:2px solid var(--ink)}
  .case{grid-template-columns:40px 1fr;padding:18px 4px}
  .case .num{font-size:34px}
  .case .done{grid-column:2}
  dl.terms>div{grid-template-columns:1fr}
  .bub{max-width:96%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{
  header.top,footer,.noprint,.skip{display:none!important}
  body{background:#fff;color:#000}
  .map{border-color:#000;break-inside:avoid}
  .tonight{background:#fff;border:2px solid #000}
}
/* v3: placeholders, guide, confetti, ip cards, journey, sound */
.band.ph{position:relative;overflow:hidden;border:1.5px dashed var(--line);background:var(--paper2)}
.band.ph .ph-scene{opacity:.55}
.band.ph .ph-tag{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;align-items:flex-start;padding:12px 16px;background:linear-gradient(0deg,color-mix(in srgb,var(--paper) 92%,transparent),transparent);font-size:13.5px;line-height:1.4;color:var(--ink)}
.band.ph .ph-tag svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--muted)}
.band.ph{aspect-ratio:3/1}
@media (max-width:620px){.band.ph{aspect-ratio:auto;min-height:170px}}
.band.ph .ph-tag strong{font-weight:700}
.guide{display:flex;gap:14px;align-items:flex-start;margin:22px 0}
.guide .av{flex:none}
.gbub{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:4px 16px 16px 16px;padding:14px 18px;max-width:38em;box-shadow:var(--shadow)}
.gbub p{margin:0;font-size:16.5px}
.ipcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px}
.ipcard{background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:18px}
.ipcard h3{font-size:19px;margin-bottom:8px}
.ipcard p{font-size:15px;margin-bottom:10px;color:var(--ink)}
.stepslist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.stepslist li{display:flex;gap:14px;align-items:flex-start}
.stepno{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--serif);font-size:15px}
.stepslist p{margin:2px 0 0}
.jlist{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.jrow{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.jrow.done{color:var(--ink)}
.jrow .jnum{font-family:var(--serif);color:var(--muted)}
.jrow .jscore{font-weight:600}
.cklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cklist-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper)}
.cbox{flex:none;width:18px;height:18px;border:2px solid var(--ink);border-radius:4px;margin-top:2px}
.confetti-host{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti-host span{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:cfall 1.5s ease-in forwards}
@keyframes cfall{to{transform:translateY(110vh) rotate(400deg);opacity:.15}}


/* series explainers */
.learnbadge{display:inline-block;margin:6px 0 4px;padding:4px 10px;border-radius:999px;background:var(--paper2);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.lesson{max-width:46em}
.lesson p,.lesson li{font-size:18px;line-height:1.65}
.lesson .tblwrap{margin:16px 0}
.twocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:16px 0}
.flowbox{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow)}
.flowbox.wide{margin:16px 0;border-left:5px solid var(--brand1)}
.flowbox h4{margin:0 0 6px;font-size:17px}
.flowbox p{margin:0}
.clauselist{padding-left:1.4em;margin:14px 0}
.clauselist li{margin:6px 0}
.clauselist details{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 14px}
.clauselist summary{cursor:pointer;font-weight:600}
.clauselist details p{margin:8px 0 2px}
.calc{margin:18px 0}
.calc .in{padding:14px 18px}
.calc .label{display:block}
.calc input[type=number],.calc input[type=text],.calc select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:100%}
.calc input[type=number]{width:9em}
.calc select{width:100%;max-width:520px}
.calcgrid{display:grid;grid-template-columns:minmax(0,1fr) 6em;gap:8px;max-width:460px}
.calcgrid input[type=number]{width:100%}
.calcrow{display:flex;gap:10px;align-items:center;cursor:pointer}
.calc input[type=range]{width:100%;max-width:420px}
.calclist{list-style:none;padding:0;margin:14px 0 8px;display:grid;gap:6px;max-width:520px}
.calclist li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;background:var(--paper2);border-radius:8px}
.calcwarn{color:var(--bad)}
/* ===== UI v2: chunky outlined boxes, hard shadows, dotted paper ===== */
:root{
  --serif:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --display:"Bagel Fat One","Bricolage Grotesque",system-ui,sans-serif;
  --bg:#f7efdc; --dot:#e2d5b6; --paper:#fffaf0; --paper2:#f3e8cf; --ink:#1d1a16; --muted:#5f574b; --line:#1d1a16; --edge:#1d1a16; --sh:#1d1a16;
  --hl:#ffd23f; --hl-ink:#1d1a16; --pink:#ff4f8b; --teal:#17b3bb; --green:#1f9d55; --focus:#2f5bff;
  --brand1:#0c7f93; --brand2:#17b3bb;
  --fill-good:#1f9d55; --fill-risk:#e0413b; --fill-part:#ffc02e;
  --good:#16733f; --good-bg:#d9f2e2; --mid:#7a4d00; --mid-bg:#ffeac0; --bad:#b3261e; --bad-bg:#fbdcd8;
  --shadow:4px 4px 0 var(--sh);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1914; --dot:#332d24; --paper:#27221b; --paper2:#312a21; --ink:#f7efdc; --muted:#c3b8a3; --line:#f7efdc; --edge:#f7efdc; --sh:#000;
  --good:#6fe0a0; --good-bg:#14311f; --mid:#ffd27a; --mid-bg:#3a2b10; --bad:#ff9d93; --bad-bg:#3b1a17; --focus:#8fa8ff;
}}
:root[data-theme="dark"]{
  --bg:#1c1914; --dot:#332d24; --paper:#27221b; --paper2:#312a21; --ink:#f7efdc; --muted:#c3b8a3; --line:#f7efdc; --edge:#f7efdc; --sh:#000;
  --good:#6fe0a0; --good-bg:#14311f; --mid:#ffd27a; --mid-bg:#3a2b10; --bad:#ff9d93; --bad-bg:#3b1a17; --focus:#8fa8ff;
}
main[lang="en"]{--serif:"Bricolage Grotesque",system-ui,sans-serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html,body{background-color:var(--bg);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.4px);background-size:18px 18px}
body{font-family:var(--sans);font-size:17px}
.shapes{display:none}
h1,h2,h3{font-family:var(--serif);font-weight:750;letter-spacing:-.02em}
h4{font-family:var(--serif);font-weight:700}
.brief,.doc .in,.mail .in,.demo .sent,.kicker{font-family:var(--sans)}
.kicker{font-style:normal;font-weight:600;color:var(--ink)}
.stepq{font-weight:650}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* header and nav */
header.top{padding:22px 0 12px}
.langnote{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--paper);border:2px solid var(--edge);border-radius:10px;padding:6px 10px;box-shadow:3px 3px 0 var(--sh)}
nav.main{gap:8px;padding:4px 0 14px}
nav.main a,.iconbtn{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink);background:var(--paper);border:2px solid var(--edge);border-radius:10px;padding:7px 12px;min-height:40px;box-shadow:3px 3px 0 var(--sh);transition:transform .08s ease,box-shadow .08s ease}
nav.main a:hover,.iconbtn:hover{background:var(--paper2);color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sh)}
nav.main a[aria-current="page"]{background:var(--hl);color:var(--hl-ink);box-shadow:3px 3px 0 var(--sh);border-radius:10px}

/* buttons: pressable */
.btn,.btn-cta{font-family:var(--serif);font-weight:750;border:2.5px solid var(--edge);border-radius:12px;box-shadow:4px 4px 0 var(--sh);transition:transform .08s ease,box-shadow .08s ease}
.btn{background:var(--pink);color:#fff}
.btn:hover{background:var(--pink);color:#fff;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--sh)}
.btn:active,.btn-cta:active,nav.main a:active,.iconbtn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--sh)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.ghost:hover{background:var(--paper2)}
.btn[disabled],.btn[disabled]:hover{background:var(--paper2);color:var(--muted);box-shadow:2px 2px 0 var(--sh);transform:none;opacity:1}
.btn-cta{background:var(--hl);color:var(--hl-ink);border-radius:999px;font-size:17px}
.btn-cta:hover{filter:none;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--sh)}
.btn-cta .arrow{background:var(--ink);color:var(--hl)}
.textlink{font-weight:650;text-decoration-thickness:2px;text-decoration-color:var(--pink)}

/* hero: the one loud moment */
.hero-panel{background:var(--paper);color:var(--ink);border:3px solid var(--edge);border-radius:20px;box-shadow:7px 7px 0 var(--sh);text-align:center;padding:40px 28px 32px}
.hero-panel::before{display:none}
.hero-panel h1{font-family:var(--display);font-weight:400;letter-spacing:.005em;font-size:clamp(46px,9vw,92px);line-height:1;color:var(--pink);-webkit-text-stroke:3px #1d1a16;paint-order:stroke fill;text-shadow:5px 5px 0 #1d1a16;margin:0 auto 18px}
.hero-panel .lead{color:var(--ink);opacity:1;font-weight:600;font-size:20px;margin:0 auto}
.hero-panel .row{justify-content:center}
.hero-panel .byline,.hero-panel .muted,.hero-panel .textlink{color:var(--ink);opacity:1}
.hero-panel .demo{text-align:left;max-width:760px;margin:28px auto 26px;box-shadow:4px 4px 0 var(--sh)}
.demo{background:var(--paper2);border:2.5px solid var(--edge);border-radius:14px}
.demo .label{font-family:var(--mono);color:var(--ink)}
.tap{border-bottom:2.5px dashed var(--pink)}
.tap[aria-pressed="true"],.tap.on{background:var(--hl);outline:2px solid var(--edge);border-radius:4px}

/* shared box language */
.mine,.tile,.flowbox,.art,.gbub,.ipcard,.band,.map,.notes,.tonight,.calc,.opt,.fbs li,.cklist-item,ul.tapnotes li,.tg label,.pick,.clauselist details,.lens,.callout{border:2.5px solid var(--edge)!important;box-shadow:4px 4px 0 var(--sh)}
.mine,.flowbox,.gbub,.ipcard,.notes{background:var(--paper);border-radius:14px}
.band{border-radius:14px;background:var(--paper2)}
.band.ph{border-style:dashed!important;box-shadow:none}
.band.ph .ph-tag{font-family:var(--mono);font-size:12.5px}
.art{border-radius:14px;background:var(--paper)}
.art figcaption{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--hl);border-bottom:2.5px solid var(--edge)}
.art.calc figcaption{background:var(--teal);color:#06282b}
.bub{border:2px solid var(--edge);background:var(--paper2);box-shadow:2px 2px 0 var(--sh)}
.bub.me{background:color-mix(in srgb,var(--hl) 55%,var(--paper))}
.bub .who{font-family:var(--mono);color:var(--ink)}

/* tiles */
.tile{background:var(--paper);border-radius:16px;transition:transform .08s ease,box-shadow .08s ease}
.tile:hover{border-color:var(--edge);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sh)}
.tile .ct{font-family:var(--serif);font-weight:750}
.tile .cm{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.tile .sug,.sug{background:var(--pink);color:#fff;border:2px solid var(--edge);font-family:var(--mono)}
.thumb{border:2.5px solid var(--edge);box-shadow:2px 2px 0 var(--sh)!important;font-family:var(--display);font-weight:400}
.thumb .camtag{border:2px solid var(--edge)}
.stamp.on circle{fill:var(--hl);stroke:var(--edge)}
.stamp circle{stroke:var(--muted)}

/* answers */
.opt{background:var(--paper);border-radius:12px;font-weight:550;transition:transform .08s ease,box-shadow .08s ease}
.opt:hover{border-color:var(--edge);background:var(--paper);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--sh)}
.opt[aria-pressed="true"]{background:var(--hl);color:var(--hl-ink)}
.opt[disabled]:hover{transform:none;box-shadow:4px 4px 0 var(--sh);background:var(--paper);border-color:var(--edge)}
.chk .box{border:2.5px solid var(--edge)}
.chip{font-family:var(--mono);font-size:13.5px;font-weight:700;border:2px solid var(--edge);background:var(--paper);border-radius:10px;box-shadow:3px 3px 0 var(--sh)}
.chip:hover{background:var(--paper2)}
.chip[aria-pressed="true"]{background:var(--teal);color:#06282b;border-color:var(--edge)}
.chip.ok{background:var(--fill-good);border-color:var(--edge)}
.chip.no{background:var(--fill-risk);border-color:var(--edge)}
.chip.key{border-color:var(--good)}
.why{border-left:4px solid var(--pink)}
.fbs li{border-radius:14px}
.fbs li.best,.fbs li.ok,.fbs li.risk,.fbs li.no,.fbs li.part{border-color:var(--edge)!important}
.badge{font-family:var(--mono);font-size:12px;border-width:2px}
.notes{background:var(--paper)}
.notes-label{font-family:var(--mono);text-transform:none;letter-spacing:0;color:var(--ink);font-size:13px}
.note{border-left:5px solid var(--teal)}
.note.w{border-left-color:var(--pink)}
.reads a{font-family:var(--mono);font-size:12.5px;border:2px solid var(--edge);border-radius:8px;box-shadow:2px 2px 0 var(--sh)}
.progress{height:14px;border:2.5px solid var(--edge);border-radius:10px;background:var(--paper);box-shadow:3px 3px 0 var(--sh)}
.progress span{background:var(--pink);box-shadow:none;border-radius:0}
.top-meta{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.learnbadge{font-family:var(--mono);font-size:12.5px;background:var(--teal);color:#06282b;border:2px solid var(--edge);box-shadow:2px 2px 0 var(--sh)}
.map{border-radius:14px}
.map section:nth-child(odd){border-right:2.5px solid var(--edge)}
.map section:nth-child(-n+2){border-bottom:2.5px solid var(--edge)}
.tonight{background:var(--hl);border-radius:14px}
dl.terms{border-top:2.5px solid var(--edge)}
dl.terms>div{border-bottom:2px dashed var(--edge)}
dl.terms dt{font-family:var(--mono);font-size:14px}
.callout,.lens{background:var(--paper);border-radius:12px}
.flowbox.wide{border-left-width:8px!important;border-left-color:var(--pink)!important}
.twocol .flowbox:nth-child(1) h4{color:var(--brand1)}
.twocol .flowbox:nth-child(2) h4{color:#c2185b}
table.t th{font-family:var(--mono);color:var(--ink);font-size:12.5px;background:var(--paper2);border-bottom:2.5px solid var(--edge)}
table.t td{border-bottom:1.5px dashed var(--muted)}

/* form controls, calculator */
.calc{border-radius:14px}
.calc .label,.label{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink)}
.calc input[type=number],.calc input[type=text],.calc select,input[type=text]{font-family:var(--mono);font-size:14px;font-weight:700;background:var(--paper);border:2px solid var(--edge);border-radius:8px;box-shadow:2px 2px 0 var(--sh)}
.calclist li{background:var(--paper2);border:2px solid var(--edge);border-radius:10px}
.calclist li strong{font-family:var(--mono)}
input[type=checkbox],input[type=radio]{accent-color:var(--pink)}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:34px}
input[type=range]::-webkit-slider-runnable-track{height:10px;background:var(--paper);border:2.5px solid var(--edge);border-radius:8px}
input[type=range]::-moz-range-track{height:6px;background:var(--paper);border:2.5px solid var(--edge);border-radius:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;background:var(--pink);border:2.5px solid var(--edge);border-radius:4px;transform:rotate(45deg)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--pink);border:2.5px solid var(--edge);border-radius:4px;transform:rotate(45deg)}
.tg label:has(input:checked),.pick:has(input:checked){background:var(--hl);color:var(--hl-ink)}

/* lists and footer */
.src,.gl>div,.jrow{border-bottom:2px dashed var(--edge)}
.src a.t,.gl dt{font-family:var(--serif);font-weight:700}
.jlist{border-top:2.5px solid var(--edge)}
footer{border-top:2.5px solid var(--edge);color:var(--ink)}
.cases{border-top:2.5px solid var(--edge)}
.cases li{border-bottom:2px dashed var(--edge)}
h2 .sug{vertical-align:middle}
@media (max-width:620px){
  .hero-panel{padding:30px 18px 24px;box-shadow:5px 5px 0 var(--sh)}
  .hero-panel h1{-webkit-text-stroke:2px #1d1a16;text-shadow:3px 3px 0 #1d1a16}
  .map section:not(:last-child){border-bottom:2.5px solid var(--edge)}
  .map section:nth-child(odd){border-right:0}
}
@media print{html,body{background:#fff}.hero-panel h1{text-shadow:none;color:#000;-webkit-text-stroke:0}*{box-shadow:none!important}}
main:focus,main:focus-visible,[tabindex="-1"]:focus{outline:none}
.tiles>li{display:flex}
.tiles>li>.tile{flex:1}
.mrow{background:var(--paper);border:2.5px solid var(--edge);border-radius:14px;padding:14px 16px 16px;box-shadow:4px 4px 0 var(--sh)}
.mrow legend{float:left;width:100%;font-weight:600}
.mrow legend+*{clear:both}
.brandlogo{height:44px}
@media (max-width:620px){
  nav.main{flex-wrap:nowrap;overflow-x:auto;padding:4px 6px 12px 2px;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a,.iconbtn{flex:none}
  .langnote{font-size:11px;max-width:none}
  .hero-panel .lead{font-size:17px}
}
/* ===== UI v5: retro print cards on deep teal ===== */
:root,:root[data-theme="light"]{
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --serif:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --sans:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --bg:#0d4a51; --bg2:#0a3d43; --paper:#f4ecdc; --paper2:#e9dfc9; --ink:#152a2b; --muted:#4e5c56; --line:#d6caae; --edge:transparent;
  --mint:#74b7ae; --sky:#b9d6cf; --pine:#1e3a36; --moss:#597768; --rust:#c4703f; --rust2:#a95a2f; --sun:#f6e3b0;
  --hl:#f6e3b0; --hl-ink:#152a2b; --pink:#c4703f; --teal:#b9d6cf; --focus:#f6c26b;
  --brand1:#0d4a51; --brand2:#74b7ae;
  --fill-good:#4f8a5b; --fill-risk:#b84a3a; --fill-part:#e0a940;
  --good:#2e6a3b; --good-bg:#dcebd8; --mid:#7a5200; --mid-bg:#f6e6bf; --bad:#9c2f22; --bad-bg:#f4d9d2;
  --card-sh:0 2px 0 rgba(0,0,0,.18),0 10px 22px rgba(0,0,0,.22);
  --sh:rgba(0,0,0,.2);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#07292d; --bg2:#052125; --paper:#1f3a38; --paper2:#18302e; --ink:#f4ecdc; --muted:#c3cfc6; --line:#35504c;
  --good:#a8d9b2; --good-bg:#1e3a2a; --mid:#f3cf85; --mid-bg:#3a2f16; --bad:#f2aa9d; --bad-bg:#40221c;
}}
:root[data-theme="dark"]{
  --bg:#07292d; --bg2:#052125; --paper:#1f3a38; --paper2:#18302e; --ink:#f4ecdc; --muted:#c3cfc6; --line:#35504c;
  --good:#a8d9b2; --good-bg:#1e3a2a; --mid:#f3cf85; --mid-bg:#3a2f16; --bad:#f2aa9d; --bad-bg:#40221c;
}
main[lang="en"]{--serif:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;--sans:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

/* page: deep teal with printed grain */
html,body{background-color:var(--bg)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")!important;
  background-size:160px 160px!important}
body{font-family:var(--sans);font-size:17px;color:#f4ecdc}
main{color:#f4ecdc}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1;color:#f4ecdc}
h1{font-size:clamp(44px,7.5vw,78px)}
h2{font-size:clamp(30px,4.4vw,42px)}
h3{font-size:24px}
h4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:19px}
.muted,.lead,.sub{color:#cfe0da}
.stepq{font-family:var(--sans);font-weight:700;font-size:22px;color:#f4ecdc}
.kicker{font-family:var(--sans);font-style:italic;color:var(--sky);font-weight:500}
.brief,.doc .in,.mail .in,.demo .sent{font-family:var(--sans)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
main:focus,[tabindex="-1"]:focus{outline:none}
a{color:var(--sun)}
.textlink{color:var(--sun);font-weight:700;text-decoration-color:var(--rust);text-decoration-thickness:2px}

/* header */
.brand{background:var(--paper);border-radius:12px;padding:7px 12px;box-shadow:var(--card-sh);border:0}
.langnote{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);background:var(--sun);border:0;border-radius:10px;padding:8px 12px;box-shadow:var(--card-sh)}
nav.main{gap:6px}
nav.main a,.iconbtn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:16px;color:var(--paper);background:transparent;border:2px solid rgba(244,236,220,.28);border-radius:10px;padding:6px 14px;box-shadow:none}
nav.main a:hover,.iconbtn:hover{background:rgba(244,236,220,.1);color:var(--paper);transform:none;box-shadow:none;border-color:rgba(244,236,220,.55)}
nav.main a[aria-current="page"]{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:none}

/* buttons */
.btn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:18px;background:var(--rust);color:#fbf5e8;border:0;border-radius:10px;box-shadow:0 3px 0 var(--rust2);padding:11px 22px}
.btn:hover{background:#d27b48;color:#fbf5e8;transform:translateY(-1px);box-shadow:0 4px 0 var(--rust2)}
.btn:active,.btn-cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--rust2)}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:0 3px 0 #c9bb9c}
.btn.ghost:hover{background:#fbf5e8;color:var(--ink)}
.btn[disabled],.btn[disabled]:hover{background:#b9b1a0;color:#5e5a50;box-shadow:none;transform:none}
.btn-cta{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:21px;background:var(--rust);color:#fbf5e8;border:0;border-radius:12px;box-shadow:0 4px 0 var(--rust2)}
.btn-cta:hover{transform:translateY(-1px);filter:none}
.btn-cta .arrow{background:#fbf5e8;color:var(--rust)}

/* hero: a big print card with a flat landscape */
.hero-panel{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);border:0;border-radius:22px;box-shadow:var(--card-sh);text-align:center;padding:0 26px 34px}
.hero-panel::before{display:block!important;content:"";position:relative;height:190px;margin:0 -26px 30px;background-color:var(--sky);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 190' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='930' cy='62' r='34' fill='%23f6e3b0'/%3E%3Cpath d='M0 150 Q120 120 240 140 T480 130 T760 140 T1000 128 T1200 138 V190 H0Z' fill='%2374b7ae'/%3E%3Cpath d='M300 190 L470 52 L640 190Z' fill='%23c4703f'/%3E%3Cpath d='M470 52 L640 190 L560 190Z' fill='%23a95a2f'/%3E%3Cpath d='M560 190 L680 96 L800 190Z' fill='%23d9864f'/%3E%3Cpath d='M680 96 L800 190 L745 190Z' fill='%23b8663a'/%3E%3Cpath d='M0 170 Q300 150 600 172 T1200 164 V190 H0Z' fill='%23597768'/%3E%3Cpath d='M150 48c14-10 30-10 44 0 10-8 26-6 32 4H140c2-2 6-4 10-4Z' fill='%23fbf5e8'/%3E%3C/svg%3E");
  background-size:cover;background-position:center bottom;pointer-events:none}
.hero-panel>*{position:relative}
.hero-panel h1{font-family:var(--display);color:var(--pine);-webkit-text-stroke:0;text-shadow:none;font-size:clamp(52px,9vw,104px);letter-spacing:.01em;margin:0 auto 12px}
.hero-panel .lead{color:var(--ink);font-weight:500;font-size:19px;opacity:1}
.hero-panel .byline,.hero-panel .muted,.hero-panel .textlink{color:var(--muted);opacity:1}
.hero-panel .textlink{color:var(--rust2)}
.hero-panel .demo{max-width:720px;margin:26px auto 26px;text-align:left;background:var(--bg);color:#f4ecdc;border:0!important;border-radius:16px;box-shadow:none}
.hero-panel .demo .label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sky);font-size:15px}
.hero-panel .demo .sent,.hero-panel .demo .note{color:#f4ecdc}
.hero-panel .demo .tap{border-bottom:2.5px dashed var(--sun);color:#f4ecdc}
.hero-panel .demo .tap[aria-pressed="true"],.hero-panel .demo .tap.on{background:var(--sun);color:var(--ink);outline:0}
.hero-panel .row{justify-content:center}

/* cards: cream, rounded, soft */
.mine,.tile,.flowbox,.art,.gbub,.ipcard,.band,.map,.notes,.tonight,.calc,.opt,.fbs li,.cklist-item,ul.tapnotes li,.tg label,.pick,.clauselist details,.lens,.callout,.mrow,.sum{border:0!important;box-shadow:var(--card-sh)!important;background:var(--paper);color:var(--ink);border-radius:16px!important}
.mine *,.flowbox *,.art *,.notes *,.calc *,.mrow *,.map *,.ipcard *,.fbs li *,.opt *,.tonight *,.sum *,.callout *{color:inherit}
.mine .textlink,.notes .textlink,.flowbox .textlink,.callout .textlink{color:var(--rust2)}
.mine h2,.mine h3,.flowbox h4,.map h3,.ipcard h3{color:var(--pine)}
.band{background:var(--sky)}
.band.ph{border:2px dashed rgba(244,236,220,.45)!important;box-shadow:none!important;background:rgba(185,214,207,.16)}
.band.ph .ph-tag{font-family:var(--sans);color:#f4ecdc;background:linear-gradient(0deg,rgba(10,61,67,.95),transparent)}
.band.ph .ph-tag strong{color:var(--sun)}
.scene .lp{fill:rgba(244,236,220,.12)} .scene .hs{fill:var(--rust)} .scene .l{stroke:var(--sky)}
.art{overflow:hidden}
.art figcaption{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px;background:var(--pine);color:var(--sky);border-bottom:0}
.art.calc figcaption{background:var(--rust);color:#fbf5e8}
.bub{border:0;background:var(--paper2);box-shadow:none;color:var(--ink)}
.bub.me{background:var(--sky)}
.bub .who{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--moss);font-weight:700}
.gbub{background:var(--sun)!important}

/* game tiles: picture on top, label underneath, like a card deck */
.tiles{gap:20px}
.tile{display:flex!important;flex-direction:column;align-items:stretch;gap:0;padding:0!important;overflow:hidden;transition:transform .15s ease}
.tile:hover{transform:translateY(-4px)}
.tile .thumb{width:auto!important;height:118px!important;border-radius:0!important;border:0!important;box-shadow:none!important;margin:0!important;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:42px;letter-spacing:.04em;color:#fbf5e8!important;position:relative;overflow:hidden}
.tile .thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 50' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q100 5 200 25 T400 20 V50 H0Z' fill='%23000' fill-opacity='.14'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
.tiles>li:nth-child(5n+1) .thumb{background:var(--mint)!important}
.tiles>li:nth-child(5n+2) .thumb{background:var(--rust)!important}
.tiles>li:nth-child(5n+3) .thumb{background:var(--pine)!important}
.tiles>li:nth-child(5n+4) .thumb{background:var(--moss)!important}
.tiles>li:nth-child(5n+5) .thumb{background:#d9a25a!important}
.tile .thumb .camtag{display:none}
.tile>div:not(.thumb),.tile .tbody{padding:14px 16px 16px}
.tile .ct{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:21px;line-height:1.05;color:var(--ink)}
.tile .cp{font-size:15px;color:var(--muted)}
.tile .cm{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--moss)}
.tile .sug,.sug{background:var(--rust);color:#fbf5e8;border:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em}
.stamp circle{stroke:var(--sky);stroke-opacity:.6}
.stamp text{fill:var(--sky);font-family:"Barlow Condensed",sans-serif;font-weight:700}
.stamp.on circle{fill:var(--rust);stroke:var(--paper);stroke-width:2;stroke-opacity:1}
.stamp.on text{fill:#fbf5e8}

/* answers */
.opt{font-weight:600}
.opt:hover{transform:translateY(-2px);background:#fbf5e8}
.opt[aria-pressed="true"]{background:var(--sky)!important;color:var(--ink)}
.opt[aria-pressed="true"] .box{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.opt[disabled]:hover{transform:none;background:var(--paper)}
.chk .box{border:2.5px solid var(--pine);border-radius:6px}
.chip{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:15px;background:var(--paper);color:var(--ink);border:0;border-radius:10px;box-shadow:0 3px 0 #c9bb9c}
.chip:hover{background:#fbf5e8}
.chip[aria-pressed="true"]{background:var(--sun);color:var(--ink);box-shadow:0 3px 0 #cdb479}
.chip.ok{background:var(--fill-good);color:#fff;box-shadow:none}
.chip.no{background:var(--fill-risk);color:#fff;box-shadow:none}
.mrow legend{color:var(--ink);font-weight:700}
.why{border-left:4px solid var(--rust)}
.fbs li.best,.fbs li.ok,.fbs li.risk,.fbs li.no{color:#fff}
.fbs li.best *,.fbs li.ok *,.fbs li.risk *,.fbs li.no *{color:#fff}
.fbs li.part,.fbs li.part *{color:var(--ink)}
.badge{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.notes{background:var(--paper2)!important}
.notes-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:16px;color:var(--moss)!important}
.note{border-left:5px solid var(--mint)}
.note.w{border-left-color:var(--rust)}
.reads a{font-family:var(--sans);font-weight:600;font-size:13.5px;background:var(--paper);color:var(--ink);border:0;border-radius:8px;box-shadow:0 2px 0 #c9bb9c}
.progress{height:12px;background:rgba(244,236,220,.18);border:0;border-radius:999px;box-shadow:none}
.progress span{background:var(--rust);border-radius:999px}
.top-meta{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:var(--sky)}
.learnbadge{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;background:var(--sun);color:var(--ink);border:0;box-shadow:none}
.map section:nth-child(odd){border-right:2px dashed var(--line)}
.map section:nth-child(-n+2){border-bottom:2px dashed var(--line)}
.map .c-yours .hd i{background:var(--rust)}
.map .c-shared .hd i{background:linear-gradient(90deg,var(--rust) 50%,var(--paper) 50%)}
.map .c-out .hd i{background:var(--pine)}
.tonight{background:var(--sun)!important}
.sum .big{font-family:var(--display);color:var(--rust2)}
dl.terms{border-top:2px solid rgba(244,236,220,.4)}
dl.terms>div{border-bottom:1.5px dashed rgba(244,236,220,.3)}
dl.terms dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:18px;color:var(--sun)}
dl.terms dd{color:#e3ece7}
.flowbox.wide{border-left:6px solid var(--rust)!important}
.twocol .flowbox:nth-child(1) h4{color:var(--moss)}
.twocol .flowbox:nth-child(2) h4{color:var(--rust2)}
table.t th{font-family:var(--display);text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--paper);background:var(--pine);border-bottom:0}
table.t td{border-bottom:1.5px dashed var(--line)}

/* inputs */
.calc .label,.label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:inherit}
.calc input[type=number],.calc input[type=text],.calc select,input[type=text]{font-family:var(--sans);font-weight:600;background:#fbf5e8;color:var(--ink);border:2px solid var(--line);border-radius:10px;box-shadow:none}
.calclist li{background:var(--paper2);border:0;border-radius:12px}
.calclist li strong{font-family:var(--display);font-size:20px;color:var(--rust2)}
input[type=checkbox],input[type=radio]{accent-color:var(--rust)}
input[type=range]::-webkit-slider-runnable-track{background:var(--line);border:0;border-radius:999px;height:8px}
input[type=range]::-moz-range-track{background:var(--line);border:0;border-radius:999px}
input[type=range]::-webkit-slider-thumb{background:var(--rust);border:3px solid var(--paper);border-radius:50%;transform:none;width:22px;height:22px;margin-top:-7px;box-shadow:0 2px 0 var(--rust2)}
input[type=range]::-moz-range-thumb{background:var(--rust);border:3px solid var(--paper);border-radius:50%;transform:none}
.tg label:has(input:checked),.pick:has(input:checked){background:var(--sun)!important}

/* lists, footer */
.src,.gl>div,.jrow{border-bottom:1.5px dashed rgba(244,236,220,.3)}
.src a.t,.gl dt{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:20px;color:var(--sun)}
.src p,.gl dd{color:#e3ece7}
.jlist,.cases{border-top:2px solid rgba(244,236,220,.4)}
.cases li{border-bottom:1.5px dashed rgba(244,236,220,.3)}
footer{border-top:2px solid rgba(244,236,220,.3);color:#cfe0da}
footer a{color:var(--sun)}
@media (max-width:620px){
  .hero-panel::before{height:130px;margin-bottom:22px}
  .map section:not(:last-child){border-bottom:2px dashed var(--line)}
  .map section:nth-child(odd){border-right:0}
  .tile .thumb{height:96px!important}
}
@media print{html,body{background:#fff!important;color:#000}.hero-panel::before{display:none!important}}

/* ===== v6: wide layout, compact sticky header, smooth motion, image slots ===== */
:root{--cream:#f4ecdc;--cream2:#cfe0da;--head:var(--pine);--acc:var(--rust2);--soft:var(--moss);--hdr-h:66px;--maxw:1440px;--gut:clamp(16px,3.2vw,48px);--ease:cubic-bezier(.2,.7,.2,1)}
:root[data-theme="dark"]{--head:#f6e3b0;--acc:#f3c58c;--soft:#a9c7b9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--head:#f6e3b0;--acc:#f3c58c;--soft:#a9c7b9}}

/* scrolling: smooth, with a visible styled scrollbar */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px);scrollbar-color:var(--rust) rgba(0,0,0,.28);scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::-webkit-scrollbar{width:12px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.28)}
::-webkit-scrollbar-thumb{background:var(--rust);border-radius:999px;border:3px solid #0a3d43}
::-webkit-scrollbar-thumb:hover{background:#d98a58}
.scrollprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--sun),var(--rust));pointer-events:none}
.totop{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:70;width:48px;height:48px;border-radius:50%;border:0;background:var(--rust);color:#fbf5e8;box-shadow:0 3px 0 var(--rust2),0 10px 24px rgba(0,0,0,.3);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:#d27b48}
.totop svg{width:22px;height:22px}

/* page width */
.wrap{max-width:var(--maxw);padding:0 var(--gut);margin:0 auto}

/* announcement strip */
.announce{margin:0;background:var(--sun);color:#152a2b;font-family:var(--sans);font-size:13px;font-weight:600;text-align:center;padding:5px 16px;line-height:1.4}

/* header */
.topbar{position:sticky;top:0;z-index:60;background:rgba(13,74,81,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(244,236,220,.14);transition:box-shadow .3s var(--ease),background .3s}
:root[data-theme="dark"] .topbar{background:rgba(7,41,45,.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topbar{background:rgba(7,41,45,.9)}}
.topbar.scrolled{box-shadow:0 10px 28px rgba(0,0,0,.28)}
.topbar .bar{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);min-height:var(--hdr-h)}
.topbar .brand{flex:none;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;background:var(--cream);box-shadow:none;border:0;text-decoration:none;transition:transform .2s var(--ease)}
.topbar .brand:hover{transform:translateY(-1px)}
.logo{display:block;height:36px;width:auto}
.logo-fallback{display:none;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.06em;color:#0d4a51}
.img-missing>.logo-fallback,.brand.img-missing .logo-fallback{display:inline}
.theme-dark-only{display:none!important}
:root[data-theme="dark"] .theme-dark-only{display:block!important}
:root[data-theme="dark"] .theme-light-only{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-dark-only{display:block!important}:root:not([data-theme="light"]) .theme-light-only{display:none!important}}
:root[data-theme="dark"] .topbar .brand{background:rgba(244,236,220,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topbar .brand{background:rgba(244,236,220,.08)}}
:root[data-theme="dark"] .logo-fallback{color:var(--cream)}

.topbar nav.main{flex:1;display:flex;justify-content:center;align-items:center;gap:2px;flex-wrap:nowrap;padding:0;margin:0;overflow:visible}
.topbar nav.main a{position:relative;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15.5px;line-height:1;white-space:nowrap;padding:10px 13px;border:0!important;border-radius:999px;background:transparent;color:var(--cream)!important;box-shadow:none!important;transition:background .2s,color .2s}
.topbar nav.main a:hover{background:rgba(244,236,220,.12)}
.topbar nav.main a[aria-current="page"]{background:var(--cream)!important;color:#152a2b!important}
.topbar .tools{flex:none;display:flex;align-items:center;gap:6px}
.topbar .iconbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px;line-height:1;padding:9px 12px;border-radius:999px;border:1.5px solid rgba(244,236,220,.3)!important;background:transparent!important;color:var(--cream)!important;box-shadow:none!important;cursor:pointer;transition:background .2s,border-color .2s}
.topbar .iconbtn:hover{background:rgba(244,236,220,.12)!important;border-color:rgba(244,236,220,.6)!important}
.topbar .iconbtn svg{width:18px;height:18px;flex:none}
.topbar .menubtn{display:none}
@media (max-width:1480px){
  .topbar .iconbtn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .topbar .iconbtn{padding:9px}
}
@media (max-width:1040px){
  .topbar .menubtn{display:inline-flex}
  .topbar .tools{margin-left:auto}
  .topbar nav.main{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:4px;padding:12px var(--gut) 18px;background:#0a3d43;border-bottom:1px solid rgba(244,236,220,.16);box-shadow:0 18px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
  :root[data-theme="dark"] .topbar nav.main{background:#052125}
  .topbar.open nav.main{opacity:1;visibility:visible;transform:none}
  .topbar nav.main a{font-size:19px;padding:13px 16px;border-radius:12px}
}
@media (max-width:520px){.logo{height:30px}.announce{font-size:12px}}

/* main area and page transitions */
main{display:block;padding-top:clamp(14px,2.2vh,26px);min-height:60vh}
main.enter{animation:pageIn .42s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease) var(--d,0ms),transform .55s var(--ease) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){main.enter{animation:none}.rv{opacity:1;transform:none;transition:none}}
@media print{.rv{opacity:1!important;transform:none!important}.topbar,.announce,.scrollprog,.totop{display:none!important}}

/* readable text widths, centred instead of hugging the left edge */
.lead{max-width:46em}
main[data-page="case"],main[data-page="me"]{max-width:1100px;margin-left:auto;margin-right:auto}
main[data-page="case"] .brief{max-width:none;font-size:clamp(18px,1.35vw,21px)}
main[data-page="case"] .stepq{max-width:40em}
main[data-page="case"] .lens,main[data-page="case"] .gbub{max-width:none}
.prose p,.prose li{max-width:none}

/* home hero: the whole thing fits on the first screen */
.hero-panel.v6{padding:0;text-align:left;margin:0}
.hero-panel.v6::before{display:none!important}
.hero-strip{position:relative;height:clamp(80px,14vh,150px);background-color:var(--sky);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 190' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='930' cy='62' r='34' fill='%23f6e3b0'/%3E%3Cpath d='M0 150 Q120 120 240 140 T480 130 T760 140 T1000 128 T1200 138 V190 H0Z' fill='%2374b7ae'/%3E%3Cpath d='M300 190 L470 52 L640 190Z' fill='%23c4703f'/%3E%3Cpath d='M470 52 L640 190 L560 190Z' fill='%23a95a2f'/%3E%3Cpath d='M560 190 L680 96 L800 190Z' fill='%23d9864f'/%3E%3Cpath d='M680 96 L800 190 L745 190Z' fill='%23b8663a'/%3E%3Cpath d='M0 170 Q300 150 600 172 T1200 164 V190 H0Z' fill='%23597768'/%3E%3Cpath d='M150 48c14-10 30-10 44 0 10-8 26-6 32 4H140c2-2 6-4 10-4Z' fill='%23fbf5e8'/%3E%3C/svg%3E");background-size:cover;background-position:center bottom;background-repeat:no-repeat;overflow:hidden}
.hero-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.hero-strip img.is-loaded{opacity:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(18px,3vw,52px);align-items:center;padding:clamp(18px,3.2vh,36px) clamp(20px,3vw,48px) clamp(20px,3.4vh,38px)}
.hero-panel.v6 h1{font-size:clamp(42px,5.4vw,88px);line-height:.94;margin:0 0 clamp(8px,1.4vh,14px);text-align:left;color:var(--head)}
.hero-panel.v6 .lead{margin:0;font-size:clamp(16px,1.2vw,19px);max-width:32em}
.hero-panel.v6 .row{justify-content:flex-start;align-items:center;gap:12px 22px;flex-wrap:wrap;margin:clamp(14px,2.4vh,24px) 0 0}
.hero-panel.v6 .demo{margin:0;max-width:none;padding:clamp(16px,2.4vh,24px) clamp(18px,2vw,26px)}
.hero-panel.v6 .demo .sent{font-size:clamp(17px,1.35vw,21px);line-height:1.6}
.hero-panel.v6 .btn-cta{font-size:clamp(16px,1.3vw,20px);line-height:1.15;padding:13px 18px 13px 22px;max-width:100%;text-align:left}
.hero-panel.v6 .byline{margin:clamp(10px,1.8vh,18px) 0 0;font-size:14px}
.hero-panel.v6 .routeline{margin:10px 0 0}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-panel.v6 h1{font-size:clamp(40px,11vw,64px)}}
.hero-panel .textlink{color:var(--acc)}

/* section spacing on wide pages */
.home-sec{margin-top:clamp(36px,5vh,56px)}
.home-sec>h2,.sechead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tiles{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))!important}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:14px;list-style:none;padding:0;counter-reset:how}
.how>li{counter-increment:how;background:rgba(244,236,220,.07);border:1px solid rgba(244,236,220,.16);border-radius:16px;padding:16px 18px 18px;color:var(--cream)}
.how>li::before{content:counter(how);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--rust);color:#fbf5e8;font-family:var(--display);font-weight:700;margin-bottom:8px}
.cast{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))!important}

/* lists become grids: sources, glossary, learn, journey */
.srcgroup{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:14px 18px;margin-top:clamp(28px,4vh,44px)}
.srcgroup>h2{grid-column:1/-1;margin:0 0 4px}
.src{border:1px solid rgba(244,236,220,.16)!important;border-radius:16px;background:rgba(244,236,220,.06);padding:16px 18px!important;transition:transform .2s var(--ease),background .2s}
.src:hover{transform:translateY(-2px);background:rgba(244,236,220,.1)}
dl.gl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px 18px}
dl.gl>div{border:1px solid rgba(244,236,220,.16)!important;border-radius:16px;background:rgba(244,236,220,.06);padding:16px 18px!important;margin:0}
.ipcards{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))!important;gap:16px!important}
.stepslist{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(18px,3vw,44px);margin-top:clamp(26px,4vh,40px)}
.grid2 .brief{max-width:none}
.jgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,48px);align-items:start;margin-top:26px}
.jgrid h2{margin-top:0!important}
@media (max-width:860px){.jgrid{grid-template-columns:1fr}}

/* image slots: drawn placeholder underneath, your photo on top */
figure.band.photo{position:relative;width:100%;height:auto;margin:clamp(18px,3vh,28px) 0;overflow:hidden;padding:0;background:var(--sky)}
figure.band.photo.banner{max-height:min(52vh,540px)}
figure.band.photo .ph-scene{position:absolute;inset:0}
figure.band.photo .ph-scene svg{width:100%;height:100%;display:block}
figure.band.photo>img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;z-index:1;opacity:0;transition:opacity .6s var(--ease);aspect-ratio:auto!important}
figure.band.photo>img.is-loaded{opacity:1}
figure.band.photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:6px 12px;font-size:12.5px;background:rgba(21,42,43,.72);color:#f4ecdc;font-family:var(--sans);text-transform:none;letter-spacing:0}
.tile .thumb{position:relative}
.tile .thumb .thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);z-index:1}
.tile .thumb .thumb-img.is-loaded{opacity:1}
.tile:hover .thumb .thumb-img{transform:scale(1.04)}
.tile .thumb .thumb-lab{position:relative;z-index:2;transition:all .3s}
.tile .thumb.has-img::after{display:none}
.tile .thumb.has-img .thumb-lab{position:absolute;top:10px;left:10px;font-size:15px;line-height:1;padding:6px 9px;border-radius:8px;background:rgba(21,42,43,.78);color:#fbf5e8}

/* dark mode: keep headings and accents readable on dark cards */
.mine h2,.mine h3,.flowbox h4,.map h3,.ipcard h3,.acard h3,.acard h4{color:var(--head)}
.mine .textlink,.notes .textlink,.flowbox .textlink,.callout .textlink,.ipcard .textlink,.acard .textlink,.acard a{color:var(--acc)}
.tile .cm,.notes-label,.bub .who{color:var(--soft)!important}
.sum .big,.calclist li strong{color:var(--acc)}
table.t th{color:#f4ecdc}
.btn-cta{color:#fbf5e8!important}

/* about page */
.about-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:end}
.about-top .wordlogo{height:clamp(44px,5vw,64px);width:auto;margin-bottom:12px}
@media (max-width:860px){.about-top{grid-template-columns:1fr}}
.about-sec{margin-top:clamp(34px,5vh,56px)}
.about-sec>h2{margin-bottom:14px}
.about-sec>.lead{margin-bottom:20px}
.acards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.acards.two{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.acard{background:var(--paper);color:var(--ink);border-radius:18px;box-shadow:var(--card-sh);padding:clamp(18px,2vw,26px)}
.acard h3{font-size:clamp(24px,2vw,30px);margin:0}
.acard h4{font-size:17px;margin:18px 0 6px}
.acard p{margin:10px 0 0;line-height:1.6}
.acard ul{margin:6px 0 0;padding-left:20px;line-height:1.55}
.acard li{margin:4px 0}
.acard .role{margin:4px 0 0;font-size:14.5px;color:var(--soft);font-weight:600}
.acard .plinks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
.acard .plinks a{font-weight:700;text-decoration-thickness:2px}
.phead{display:flex;align-items:center;gap:12px}
.avatar{position:relative;flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--sky);color:#152a2b;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.04em}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orglogo{height:46px;width:auto;display:block;margin-bottom:10px}
.acard.wide{grid-column:1/-1}
.about-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}

/* footer */
footer.sitefoot{margin-top:clamp(48px,7vh,80px);border-top:1px solid rgba(244,236,220,.2);padding:clamp(28px,4vh,44px) 0 calc(28px + env(safe-area-inset-bottom,0px));color:#cfe0da;font-size:14.5px}
footer.sitefoot p{max-width:none;margin:0 0 8px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,3vw,48px);align-items:start}
.foot-grid .flogo{height:40px;width:auto;margin-bottom:12px}
.foot-label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--sky);margin:0 0 8px}
.foot-partners .plogo{height:40px;width:auto;display:block;margin:0 0 16px}
.foot-links ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-links a,footer.sitefoot a{color:var(--sun)}
.foot-legal{margin-top:clamp(22px,3vh,34px);padding-top:18px;border-top:1px dashed rgba(244,236,220,.22);text-align:center}
.foot-legal p{margin:0 auto 6px!important;max-width:70em!important}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

.gl .var{color:#f3c58c!important;opacity:.95}
/* yellow panels always use dark text, in both themes */
.gbub,.gbub *,.tonight,.tonight *{color:#152a2b!important}
.gbub .textlink,.tonight .textlink{color:#7a3e1d!important}

/* ===== v6.1 readability fixes ===== */
/* journey list sits on the teal page, so it uses cream text in both themes */
.jrow{color:rgba(244,236,220,.82)!important}
.jrow.done{color:#f4ecdc!important;font-weight:600}
.jrow .jnum{color:var(--sky)!important}
.jrow .jtitle{color:inherit!important}
.jrow.done .jscore{color:var(--sun)!important}
/* source details line */
.src .by,.src .by *{color:#b9d6cf!important;opacity:1}
/* breadcrumbs on the teal page */
.crumb,a.crumb{color:var(--sun)!important;opacity:.95}
/* inputs are always cream boxes, so their text is always dark */
input[type=text],input[type=number],input[type=email],select,textarea,.calc input,.calc select{color:#152a2b!important;background:#fbf5e8!important;-webkit-text-fill-color:#152a2b}
input::placeholder,textarea::placeholder{color:#6b6a5f!important;-webkit-text-fill-color:#6b6a5f;opacity:1}
/* stronger accent text on cream cards (light mode) */
:root{--acc:#8f4520;--soft:#45604f}
:root[data-theme="dark"]{--acc:#f3c58c;--soft:#a9c7b9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--acc:#f3c58c;--soft:#a9c7b9}}
.hero-panel .textlink,.mine .textlink,.ipcard .textlink,.acard a,.acard .textlink,.callout .textlink,.notes .textlink,.flowbox .textlink{color:var(--acc)!important}
/* buttons: a slightly deeper rust so the cream text reads clearly */
.btn,.btn-cta,.art.calc figcaption{background:#a8552a!important}
.btn:hover,.btn-cta:hover{background:#b8612f!important}
.btn.ghost{background:var(--paper)!important;color:var(--ink)!important}
.btn[disabled],.btn[disabled]:hover{background:#b9b1a0!important;color:#4a463e!important}
/* letter labels on coloured tiles */
.tile .thumb .thumb-lab{text-shadow:0 2px 0 rgba(0,0,0,.28),0 0 14px rgba(0,0,0,.35)}
/* about page: use the full width */
.about-sec>.lead{max-width:none;columns:2 30em;column-gap:clamp(24px,4vw,64px)}
.about-top{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.about-top .lead{max-width:none}
.btn:not(.ghost):not([disabled]){color:#fbf5e8!important}
.tile .thumb .thumb-lab{background:rgba(21,42,43,.5);color:#fbf5e8;padding:2px 14px;border-radius:12px}
.tile .thumb.has-img .thumb-lab{background:rgba(21,42,43,.78);padding:6px 9px;border-radius:8px}
:root,:root[data-theme="light"],:root[data-theme="dark"]{--fill-good:#3d7047;--fill-risk:#9e3a2c}
.btn:hover,.btn-cta:hover{background:#934820!important}
.btn[disabled],.btn[disabled]:hover{color:#3a362f!important}
.fbs li.best .badge,.fbs li.ok .badge,.fbs li.risk .badge,.fbs li.no .badge{background:rgba(0,0,0,.28)!important;color:#fff!important}
.fbs li .muted{color:#fff!important;opacity:.95}
/* muted text inside cream cards uses the card's own muted colour */
.mine .muted,.calc .muted,.notes .muted,.callout .muted,.acard .muted,.ipcard .muted,.flowbox .muted,.lens .muted,.sum .muted,.map .muted,.tile .muted,.cklist-item .muted,ul.tapnotes li .muted,.pick .muted,.opt .muted,.art .muted,.mrow .muted,.tonight .muted,.gbub .muted,.hero-panel .muted,.fbs li.part .muted{color:var(--muted)!important}
.tap.hit,.tap.on.hit,.tap[aria-pressed="true"].hit{background:var(--fill-good)!important;color:#fff!important;outline:0}
.tap.wrong,.tap.on.wrong,.tap[aria-pressed="true"].wrong{background:var(--fill-risk)!important;color:#fff!important;outline:0}
.twocol .flowbox:nth-child(1) h4{color:var(--soft)!important}
.twocol .flowbox:nth-child(2) h4{color:var(--acc)!important}
/* hover and selected states, readable in both themes */
.opt:hover:not([disabled]),.chip:hover:not([disabled]),.btn.ghost:hover{background:var(--paper2)!important;color:var(--ink)!important}
.opt[aria-pressed="true"],.opt[aria-pressed="true"] *{color:#152a2b!important}
.chip[aria-pressed="true"],.tg label:has(input:checked),.tg label:has(input:checked) *,.pick:has(input:checked),.pick:has(input:checked) *{color:#152a2b!important}
.tap[aria-pressed="true"]:not(.hit):not(.wrong),.tap.on:not(.hit):not(.wrong){color:#152a2b!important}
.chip.ok,.chip.no,.chip.ok[aria-pressed="true"],.chip.no[aria-pressed="true"]{color:#fff!important}
.bub.me,.bub.me *{color:#152a2b!important}
.bub.me .who{color:#45604f!important}
.learnbadge,.learnbadge *{color:#152a2b!important}
svg.scene,.ph-scene{overflow:hidden;max-width:100%}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:480px){
  main h1{font-size:clamp(30px,9.4vw,44px)!important}
  main h2{font-size:clamp(24px,7.4vw,32px)}
  .stepq{font-size:19px}
  .hero-panel.v6 .demo .sent{font-size:17px}
}
.opt:hover:not([disabled]){transform:none!important}