:root{
  --paper:#ffffff; --paper-2:#f5f5f5; --ink:#000000; --ink-soft:#555555; --red:#d12e24; --red-wash:#fbeae8; --grid:#e3e3e3;
  --marker:'Permanent Marker','Comic Sans MS',cursive;
  --hand:'Caveat','Segoe Print',cursive;
  --sans:'Jost','Avenir Next','Segoe UI',Helvetica,Arial,sans-serif;
  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"]){--paper:#121212;--paper-2:#1d1d1d;--ink:#f2f2f2;--ink-soft:#b5b5b5;--red:#ff5a4d;--red-wash:#3a1512;--grid:#262626}}
:root[data-theme="dark"]{--paper:#121212;--paper-2:#1d1d1d;--ink:#f2f2f2;--ink-soft:#b5b5b5;--red:#ff5a4d;--red-wash:#3a1512;--grid:#262626}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;
  background-image:radial-gradient(var(--grid) 1.2px,transparent 1.2px);background-size:22px 22px;min-height:100vh}
p{margin:0}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding:22px 18px 80px}
.wrap.wide{max-width:1180px}

/* sketch overlay */
.sk{position:relative}
.sk>svg.rough{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);pointer-events:none;overflow:visible;z-index:0}
.sk>*:not(svg.rough){position:relative;z-index:1}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.tape{background:#fff;padding:8px 12px;transform:rotate(-1.5deg)}
.tape img{display:block;width:150px;height:auto}
.tape.big img{width:220px}
.progress{display:flex;align-items:center;gap:10px;min-width:180px;flex:1;max-width:300px}
.progress span{font-family:var(--hand);font-size:21px;white-space:nowrap}
.progress svg{flex:1;height:18px}

/* type */
.title{font-family:var(--marker);font-size:clamp(34px,7vw,52px);line-height:1;margin:18px 0 6px;font-weight:400}
.hand{font-family:var(--hand);font-size:23px;color:var(--red);line-height:1.2}
.lede{font-size:19px;max-width:34em;margin:16px 0}
.muted{color:var(--ink-soft)}
.small{font-size:15px}

/* forms */
.panel{background:var(--paper);padding:22px 20px;margin:24px 0}
.field{display:block;margin:0 0 18px}
.field label{display:block;font-family:var(--hand);font-size:22px;margin-bottom:4px}
.input{width:100%;font:inherit;font-size:18px;color:var(--ink);background:var(--paper);border:0;padding:12px 14px}
.input-wrap:focus-within,.ta-wrap:focus-within{outline:2px dashed var(--red);outline-offset:8px}
.btn{font-family:var(--marker);font-size:19px;background:var(--ink);color:var(--paper);border:0;padding:11px 24px;cursor:pointer;transform:rotate(-1deg)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:transparent;color:var(--ink)}
.linky{background:none;border:0;font-family:var(--hand);font-size:22px;color:var(--red);cursor:pointer;padding:4px 2px}
.linky.dim{color:var(--ink-soft)}
:focus-visible{outline:2px dashed var(--red);outline-offset:4px}
.error{color:var(--red);font-weight:500;margin-top:10px;min-height:1.4em}
.facts{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.facts li{display:flex;gap:10px;align-items:baseline}
.facts li::before{content:"✎";color:var(--red);font-size:18px}

/* chat */
.thread{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.msg{max-width:88%;padding:12px 16px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.mirror{align-self:flex-start}
.msg.mirror.question{font-size:19px;font-weight:500;line-height:1.4}
.msg.student{align-self:flex-end;background:var(--paper-2)}
.msg.skip{align-self:flex-end;font-family:var(--hand);font-size:20px;color:var(--ink-soft);background:none;padding:0 6px}
.ack{align-self:flex-start;font-family:var(--hand);font-size:23px;color:var(--red);padding:0 8px;line-height:1.2}
.safety{align-self:stretch;padding:18px 18px;background:var(--red-wash)}
.safety p{font-size:17px}
.composer{position:relative}
.ta-wrap textarea{width:100%;min-height:118px;border:0;background:transparent;font:inherit;color:var(--ink);padding:14px 16px;resize:vertical}
.ta-wrap textarea::placeholder{color:var(--ink-soft);opacity:1;font-style:italic}
.ta-wrap textarea:focus{outline:none}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.row .left{display:flex;gap:14px;flex-wrap:wrap}
.ideas{font-family:var(--hand);font-size:21px;margin:12px 0 0;padding:0;list-style:none}
.ideas li::before{content:"✎ ";color:var(--red)}
.choices{display:grid;gap:12px}
.choice{text-align:left;background:var(--paper);border:0;padding:12px 16px;cursor:pointer;font-size:17px}
.choice:hover{background:var(--paper-2)}
.typing{font-family:var(--hand);font-size:22px;color:var(--ink-soft);align-self:flex-start;padding:0 8px}

/* building */
.building{text-align:center;padding:60px 0}
.building .scribble{width:220px;height:60px;margin:20px auto}

/* report */
.report-head{margin-bottom:10px}
.report-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:18px 0 8px}
.section{margin:46px 0 0}
.section-h{font-family:var(--marker);font-weight:400;font-size:clamp(28px,5vw,38px);margin:0;display:inline-block;position:relative;line-height:1.1}
.section-h svg.ul{position:absolute;left:-4px;bottom:-12px;width:calc(100% + 8px);height:16px;overflow:visible}
.kicker{font-family:var(--hand);font-size:22px;color:var(--ink-soft);margin:12px 0 18px}
.items{display:grid;gap:26px}
.item{background:var(--paper);padding:18px 18px 16px}
.item-text{font-size:18px;font-weight:500;line-height:1.45}
.label{font-family:var(--hand);font-size:23px;color:var(--red);margin:16px 0 2px;line-height:1.1}
.noticed{font-size:21px;font-weight:500;line-height:1.4}
.conf{display:inline-block;font-family:var(--hand);font-size:20px;padding:2px 12px;margin-top:10px}
.quotes{list-style:none;padding:0;margin:6px 0 0}
.quotes li{margin:8px 0}
.quotes q{font-style:italic}
.src{font-family:var(--hand);font-size:18px;color:var(--ink-soft);margin-left:8px;white-space:nowrap}
.travel{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px 8px;margin-top:8px}
.spot{display:flex;align-items:center;gap:8px;font-size:15px}
.spot.off{color:var(--ink-soft)}
.dot{width:22px;height:22px;flex:none}
.where{background:none;border:0;padding:0;margin-top:8px;font-family:var(--hand);font-size:19px;color:var(--ink-soft);cursor:pointer}
.where-body{margin-top:4px;font-size:15px}
.because{font-size:19px;font-weight:500}
.explore{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:8px}
.explore span{font-size:19px;font-weight:500}
.explore input{flex:1;min-width:200px;font:inherit;font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:2px dashed var(--ink-soft);padding:4px 2px}
.explore input:focus{outline:none;border-bottom-color:var(--red)}
.writein textarea{width:100%;min-height:80px;font:inherit;color:var(--ink);background:transparent;border:0;padding:10px 12px;resize:vertical}
.writein textarea:focus{outline:none}
.empty-prompt{font-size:18px;margin-bottom:10px}

/* controls */
.controls{margin-top:16px;padding-top:12px;border-top:1.5px dashed var(--grid)}
.controls-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.stickers{display:flex;flex-wrap:wrap;gap:10px}
.stick{font-family:var(--marker);font-size:14px;background:var(--paper);border:0;padding:7px 12px;cursor:pointer;transition:transform .15s}
.stick:nth-child(odd){transform:rotate(-2deg)}.stick:nth-child(even){transform:rotate(1.5deg)}
.stick[aria-pressed="true"]{background:var(--red);color:#fff}
.seg{display:flex;gap:6px;align-items:center}
.seg .cap{font-family:var(--hand);font-size:19px;color:var(--ink-soft);margin-right:2px}
.seg button{font-size:13px;font-weight:500;background:transparent;border:0;padding:5px 10px;cursor:pointer}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.note{margin-top:10px}
.note label{font-family:var(--hand);font-size:20px;color:var(--ink-soft)}
.note textarea{width:100%;min-height:60px;font:inherit;font-size:16px;color:var(--ink);background:var(--paper-2);border:0;padding:8px 10px;margin-top:4px;resize:vertical}
.saved{font-family:var(--hand);font-size:18px;color:var(--ink-soft);min-width:4em}
.print-note{display:none}
.footer-note{margin-top:60px;font-size:15px;color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){.stick{transition:none}}

/* print: only what the student chose to share */
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  .no-print,.controls,.where,.report-actions,.top .progress{display:none!important}
  [data-vis="just_me"],[data-react="not_me"]{display:none!important}
  .print-note{display:block;margin-top:8px;font-family:var(--hand);font-size:16pt;color:#d12e24}
  .item,.section{break-inside:avoid}
  .section{margin-top:22px}
  .wrap{max-width:none;padding:0}
}

/* ================= BOARD (schema 2) ================= */
.board-name{font-family:var(--marker);font-weight:400;font-size:clamp(38px,7vw,62px);line-height:1;margin:8px 0 6px}
.board-sub{font-family:var(--hand);font-size:24px;color:var(--red);margin-bottom:46px}
.tp,.sk>.tp.tp{position:absolute;width:74px;height:22px;background:rgba(209,46,36,.55);top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:3}
.zone{margin:0 0 84px}
.zone-h{font-family:var(--marker);font-weight:400;font-size:clamp(28px,4.5vw,40px);margin:0;display:inline-block;position:relative;line-height:1.1}
.zone-h svg.ul{position:absolute;left:-4px;bottom:-12px;width:calc(100% + 8px);height:16px;overflow:visible}
.zone-k{font-family:var(--hand);font-size:23px;color:var(--ink-soft);margin:14px 0 30px}

.reveal-zone{position:relative;display:grid;grid-template-columns:1fr minmax(0,1.5fr) 1fr;gap:56px 96px;align-items:center;margin-bottom:90px}
.reveal-zone svg.threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.rcol{display:grid;gap:44px;z-index:1}
.reveal{background:#fff;color:#000;padding:46px 32px 28px;transform:rotate(-1deg);z-index:1}
.reveal .eyebrow{font-family:var(--hand);font-size:24px;color:#d12e24}
.reveal h2{font-family:var(--marker);font-weight:400;font-size:clamp(32px,4.4vw,50px);line-height:1.05;margin:6px 0 16px}
.reveal .line{font-size:20px;line-height:1.5}
.reveal .from{font-family:var(--hand);font-size:21px;color:#555;margin-top:14px}

.note{position:relative;background:#fff;color:#000;padding:20px 32px 16px 18px;font-family:var(--hand);font-size:23px;line-height:1.2;box-shadow:0 3px 0 rgba(0,0,0,.07)}
.note.red{background:#d12e24;color:#fff}
.note.wash{background:#fbe4e1}
.note .tag{display:block;font-family:var(--sans);font-size:12px;font-weight:500;color:#666;margin-top:10px}
.note.red .tag{color:#ffd9d5}
.r1{transform:rotate(-3deg)}.r2{transform:rotate(2deg)}.r3{transform:rotate(-1.5deg)}.r4{transform:rotate(3deg)}.r5{transform:rotate(-2.5deg)}
.note>.lock.lock{position:absolute;top:6px;right:6px;z-index:3;background:none;border:0;cursor:pointer;font-size:15px;opacity:.5;padding:2px 4px}
.note>.lock[aria-pressed="true"]{opacity:1}
.note.locked{opacity:.55}
.note.add{background:transparent;border:2px dashed var(--ink-soft);color:var(--ink);box-shadow:none}
.note.add input{width:100%;font-family:var(--hand);font-size:22px;border:0;background:transparent;color:var(--ink)}
.note.add input:focus{outline:none}

.pattern{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;margin-bottom:50px}
.pcard{background:#fff;color:#000;padding:28px 26px;transform:rotate(1deg)}
.pcard h3{font-family:var(--marker);font-weight:400;font-size:clamp(24px,3.2vw,32px);line-height:1.1;margin:4px 0 12px}
.pcard p{font-size:18px}
.pcard .inv{font-family:var(--hand);font-size:22px;color:#d12e24;margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:16px}
.chip{font-size:14px;font-weight:500;padding:4px 10px;background:#000;color:#fff;transform:rotate(-1deg)}
.pquotes{display:grid;gap:30px}
.ask{margin-top:20px;padding-top:14px;border-top:1.5px dashed #ddd}
.ask-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.ask-row>span{font-family:var(--hand);font-size:22px}
.ask .stick{background:#fff;color:#000}
.ask .stick[aria-pressed="true"]{background:#d12e24;color:#fff}
.ask .note-in{margin-top:12px}
.ask .note-in label{font-family:var(--hand);font-size:20px;color:#555}
.ask textarea{width:100%;min-height:60px;font:inherit;font-size:16px;color:#000;background:#f4f4f4;border:0;padding:8px 10px;margin-top:4px;resize:vertical}
.inmywords{font-family:var(--hand);font-size:21px;color:#d12e24;margin-top:10px}

.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.lane h4{font-family:var(--marker);font-weight:400;font-size:22px;margin:0 0 22px;color:var(--red)}
.lane .stack{display:grid;gap:26px}

.clues{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px}
.index{background:#fff;color:#000;padding:22px 22px 20px;background-image:repeating-linear-gradient(transparent 0 33px,#e3ecf5 33px 34px);background-position:0 54px}
.index .b{font-size:19px;font-weight:500;line-height:34px}
.blank{width:100%;font-family:var(--hand);font-size:24px;border:0;background:transparent;color:#000;border-bottom:2px dashed #d12e24;margin-top:6px;padding:2px 0}
.blank:focus{outline:none}

.page{background:#fff;color:#000;padding:30px 30px 26px 56px;max-width:780px;transform:rotate(-.6deg);
  background-image:linear-gradient(90deg,transparent 38px,#d12e24 38px 39.5px,transparent 39.5px)}
.page h3{font-family:var(--hand);font-size:28px;margin:0 0 12px;color:#d12e24;font-weight:700}
.page ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:14px}
.page li{display:flex;gap:12px;font-size:18px}
.page li input{width:20px;height:20px;margin-top:4px;accent-color:#d12e24;flex:none}
.page .q{font-family:var(--hand);font-size:23px;line-height:1.25;margin:10px 0}

.story{background:#fff;color:#000;padding:28px 26px}
.story-intro{font-size:18px;margin-bottom:18px}
.spine{display:grid;gap:22px}
.spine-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 22px;padding-bottom:18px;border-bottom:1.5px dashed #e3e3e3}
.spine-row:last-child{border-bottom:0}
.spine-row h4{font-family:var(--marker);font-weight:400;font-size:19px;margin:2px 0 0;line-height:1.2}
.starter{font-family:var(--hand);font-size:21px;color:#555;line-height:1.2}
.starter q{color:#000}
.spine-row textarea{width:100%;min-height:58px;font:inherit;font-size:17px;color:#000;background:#f6f6f6;border:0;border-bottom:2px solid #000;padding:8px 10px;margin-top:6px;resize:vertical}
.spine-row textarea:focus{outline:none;border-bottom-color:#d12e24}
.ro-text{font-size:17px;margin-top:6px;white-space:pre-wrap}
.saved-dot{font-family:var(--hand);font-size:18px;color:var(--ink-soft);margin-left:6px}

@media (max-width:900px){
  .reveal-zone{grid-template-columns:1fr;gap:36px}
  .reveal-zone .reveal{order:-1}
  .rcol{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
  .reveal-zone svg.threads{display:none}
  .pattern{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spine-row{grid-template-columns:1fr}
}
@media (max-width:520px){.wall{grid-template-columns:1fr}}

@media print{
  .lock,.ask-row,.note.add,.saved-dot{display:none!important}
  .note.locked,[data-vis="just_me"],[data-react="not_me"]{display:none!important}
  .reveal-zone svg.threads{display:block}
  .zone,.reveal,.pcard,.page,.story,.index{break-inside:avoid}
  .zone{margin-bottom:34px}
  textarea,input.blank{border:0;background:transparent}
}

/* ================= STAGED MIRROR (schema 3) ================= */
.msg .examples{font-size:15px;font-weight:400;color:var(--ink-soft);margin-top:8px;line-height:1.45}
.stepper{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.stepper .step{display:flex;align-items:center;gap:8px;background:transparent;border:1.5px dashed var(--ink-soft);color:var(--ink-soft);font-family:var(--hand);font-size:21px;padding:4px 14px 4px 6px;cursor:pointer}
.stepper .step b{font-family:var(--marker);font-weight:400;font-size:15px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ink-soft);color:var(--paper)}
.stepper .step.on{border:2px solid var(--red);color:var(--ink)}
.stepper .step.on b{background:var(--red);color:#fff}
.stepper .step:disabled{opacity:.4;cursor:not-allowed}
.stage-title{font-family:var(--marker);font-weight:400;font-size:clamp(32px,6vw,52px);line-height:1.05;margin:0;display:inline-block;position:relative}
.stage-title svg.ul{position:absolute;left:-4px;bottom:-14px;width:calc(100% + 8px);height:16px;overflow:visible}
.stage-sub{font-family:var(--hand);font-size:24px;color:var(--ink-soft);margin:22px 0 26px;max-width:40em}
.guide-box{background:#fff;color:#000;padding:16px 20px;margin:0 0 34px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:5}
.guide-box.done{position:relative;top:auto}
.guide-n{font-family:var(--hand);font-size:20px;color:#d12e24}
.guide-t{font-size:19px;font-weight:500;flex:1;min-width:220px}
.guide-box .linky{font-size:20px}
.heard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.heard{background:#fff;color:#000;padding:24px 22px 18px;transition:opacity .2s}
.heard.rejected{opacity:.5}
.heard-h{font-family:var(--marker);font-weight:400;font-size:20px;color:#d12e24;margin:0 0 8px;line-height:1.2}
.heard-t{font-size:21px;font-weight:500;line-height:1.4;margin:6px 0 4px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-family:var(--hand);font-size:18px;background:#000;color:#fff;padding:0 8px;transform:rotate(-1.5deg)}
.badge.red{background:#d12e24}
.pick-btn{display:none;font-family:var(--marker);font-size:15px;background:#d12e24;color:#fff;border:0;padding:6px 14px;margin:8px 0 4px;cursor:pointer;transform:rotate(-1deg)}
.picking .pick-btn{display:inline-block}
.heard .ask-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.heard .stick{background:#fff;color:#000;font-size:14px;padding:7px 12px}
.heard .stick[aria-pressed="true"]{background:#d12e24;color:#fff}
.card-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.card-links .linky{font-size:20px}
.mini-label{display:block;font-family:var(--hand);font-size:20px;color:#555;margin-top:10px}
.heard textarea,.thread-card textarea{width:100%;min-height:64px;font:inherit;font-size:16px;color:#000;background:#f4f4f4;border:0;padding:8px 10px;margin-top:4px;resize:vertical}
.why ul{list-style:none;padding:0;margin:4px 0 0}
.why li{margin:6px 0;font-size:15px}
.why q{font-style:italic}
.why .src{font-family:var(--hand);font-size:17px;color:#666;margin-left:8px}
.muted-note{font-family:var(--hand);font-size:20px;color:#666}
.next-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:40px 0 10px}
.next-btn:disabled{opacity:.4;cursor:not-allowed}
.hand-load{font-family:var(--hand);font-size:26px;color:var(--red);padding:40px 0}
.thread-card{background:#fff;color:#000;padding:36px 32px 28px;max-width:820px;transform:rotate(-.5deg)}
.thread-card .eyebrow{font-family:var(--hand);font-size:24px;color:#d12e24}
.thread-t{font-size:clamp(22px,3vw,28px);font-weight:500;line-height:1.4;margin:8px 0 6px}
.thread-card .ask-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.thread-card .stick{background:#fff;color:#000}
.thread-card .stick[aria-pressed="true"]{background:#d12e24;color:#fff}
.big-ta{min-height:110px!important;font-size:19px!important}
.story-sec{background:#fff;color:#000;padding:24px 24px 18px;margin:0 0 34px}
.sec-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.sec-h{font-family:var(--marker);font-weight:400;font-size:clamp(22px,3vw,28px);margin:0}
.sec-sub{font-family:var(--hand);font-size:21px;color:#555;margin:6px 0 12px}
.draft-chip{font-family:var(--hand);font-size:18px;color:#d12e24;border:1.5px dashed #d12e24;padding:0 10px}
.story-ta{width:100%;min-height:150px;font:inherit;font-size:18px;line-height:1.55;color:#000;background:#f7f7f5;border:0;border-bottom:2px solid #000;padding:12px 14px;resize:vertical}
.story-ta.tall{min-height:260px}
.story-ta:focus,.scard-ta:focus,.scard-title:focus{outline:none;border-bottom-color:#d12e24}
.meta{display:flex;justify-content:space-between;gap:10px;font-family:var(--hand);font-size:18px;color:#666;margin-top:4px}
.scards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.scard{background:#fbe4e1;padding:14px 14px 10px}
.scard:nth-child(even){background:#fff;border:1.5px solid #000}
.scard-n{display:block;font-family:var(--hand);font-size:17px;color:#555;margin-bottom:6px}
.scard-title{width:100%;font-family:var(--marker);font-size:17px;color:#000;background:transparent;border:0;border-bottom:1.5px dashed #000;padding:4px 0}
.scard-ta{width:100%;min-height:120px;font:inherit;font-size:16px;color:#000;background:transparent;border:0;padding:8px 0;resize:vertical}
.scard .meta{font-size:15px}
#printSheet{display:none}
@media (max-width:900px){.heard-grid{grid-template-columns:1fr}.scards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.scards{grid-template-columns:1fr}}

/* clean print / PDF of the story */
.ps-head{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:3px solid #d12e24;padding-bottom:12px;margin-bottom:18px}
.ps-logo{width:150px;height:auto}
.ps-name{font-family:var(--marker);font-weight:400;font-size:30px;margin:0;color:#000}
.ps-sec{margin:0 0 20px;break-inside:avoid}
.ps-sec h2{font-family:var(--marker);font-weight:400;font-size:19px;color:#d12e24;margin:0 0 6px}
.ps-body{font-size:13pt;line-height:1.6;white-space:pre-wrap;color:#000}
.ps-thread{font-size:14pt;font-weight:500;line-height:1.5;color:#000}
.ps-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ps-card{border:1.5px solid #000;padding:10px;font-size:11pt;color:#000}
.ps-card b{display:block;font-family:var(--marker);font-weight:400;font-size:12pt;margin-bottom:4px}
.ps-heard{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ps-h{border-left:3px solid #d12e24;padding:4px 10px;font-size:11pt;color:#000}
.ps-h b{font-family:var(--hand);font-size:14pt;color:#d12e24}
.ps-mine{font-family:var(--hand);font-size:14pt;color:#000}
@media print{
  body.printing{background:#fff!important}
  body.printing > .wrap, body.printing > .wrap.dash{display:none!important}
  body.printing #printSheet{display:block!important;padding:0}
  .ps-card,.ps-h{transform:none!important}
  @page{margin:16mm}
}

/* schema 4: skill-first cards + story frame */
.receipt{font-family:var(--hand);font-size:20px;color:#666;margin:4px 0 0}
.receipt::before{content:"you said: ";color:#999}
.travels{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.travels li{font-size:14px;font-weight:500;background:#000;color:#fff;padding:4px 10px;transform:rotate(-1deg)}
.travels li:nth-child(2){background:#d12e24;transform:rotate(1deg)}
.future{font-family:var(--hand);font-size:22px;color:#d12e24;line-height:1.2;margin:12px 0 2px;padding-left:10px;border-left:3px solid #d12e24}
.frame-row{background:#fbe4e1;padding:14px 16px 10px;margin:14px 0}
.frame-row:nth-child(odd){background:#fff;border:1.5px solid #000}
.frame-label{display:block;font-family:var(--marker);font-size:19px;color:#000;margin-bottom:6px}
.frame-ta{width:100%;min-height:70px;font:inherit;font-size:18px;color:#000;background:transparent;border:0;border-bottom:2px dashed #000;padding:6px 2px;resize:vertical}
.frame-ta:focus{outline:none;border-bottom-color:#d12e24}
.frame-row .meta .linky{font-size:19px;padding:0}
.chips-help{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.help-chip{font:inherit;font-size:14px;text-align:left;background:#fff;color:#000;border:1.5px dashed #d12e24;padding:6px 10px;cursor:pointer;max-width:100%}
.help-chip:hover{background:#fbe4e1}
.ps-travel{font-size:10pt;color:#444;margin-top:3px}

/* read-aloud */
.speak{display:inline-flex;align-items:center;gap:6px;font-family:var(--hand);font-size:19px;line-height:1;color:var(--red);background:transparent;border:1.5px dashed var(--red);padding:4px 10px;margin-top:8px;cursor:pointer}
.speak[aria-pressed="true"]{background:var(--red);color:#fff;border-style:solid}
.speak:focus-visible{outline:2px dashed var(--red);outline-offset:3px}
.heard .speak,.thread-card .speak,.story-sec .speak,.guide-box .speak{color:#d12e24;border-color:#d12e24}
.heard .speak[aria-pressed="true"],.thread-card .speak[aria-pressed="true"],.story-sec .speak[aria-pressed="true"],.guide-box .speak[aria-pressed="true"]{color:#fff}
.heard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.heard-top .speak{margin-top:0;flex:none}
.meta .speak{margin:0 8px 0 0;font-size:17px;padding:2px 8px}
.story-sec > .speak{margin:0 0 6px}
.guide-box .speak{margin-top:0}
.mic-tip{font-family:var(--hand);font-size:19px;color:var(--ink-soft);margin:8px 0 0}
@media print{.speak{display:none!important}}