@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lora-400.woff2) format('woff2')}
:root{--serif:'Lora',Georgia,'Times New Roman',serif;--paper:#FAF9F5;--paper2:#E8E6DC;--ink:#141413;--pencil:#B0AEA5;--or:#D97757;--ortx:#A84A2A;--blue:#6A9BCC;--green:#788C5D;--or-hover:#C6613F;--slate-m:#3D3D3A;--slate-l:#5E5D59;--cloud-l:#D1CFC5;--cloud-d:#87867F;--ivory-m:#F0EEE6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);font-family:'Patrick Hand',cursive;color:var(--ink);overflow:hidden;overscroll-behavior:none}
#frame{position:fixed;inset:0;margin:auto;width:100%;max-width:1180px;max-height:860px;display:flex;flex-direction:column;background:var(--paper)}
@media (min-width:1240px) and (min-height:900px){#frame{border-radius:10px;box-shadow:0 10px 40px rgba(20,20,19,.10)} body{background:var(--paper2)}}
#hud{flex:none;display:flex;align-items:center;gap:12px;padding:calc(6px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 6px calc(14px + env(safe-area-inset-left));min-height:52px}
#brand{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;padding:2px 0;font-size:16px;letter-spacing:.14em;color:var(--ortx)}#stepn{flex:none;white-space:nowrap;font-size:15px;color:var(--slate-l)}.sp{flex:1;margin-left:-12px}
/* #418 (Mike, t549u/t550u): the top bar shows the strat's full name (E.brand, set in the strat's own file) and gives the counter and both icons first claim on the room; the name takes what is left and ends in an ellipsis only when it would push them out. The spacer's negative margin takes back one gap only when there is no spare room, so nothing that is right-anchored moves. Narrow phones tighten the letter-spacing (then the size, never under 14 px) before any word is cut. */
@media (max-width:379px){#brand{font-size:15px;letter-spacing:.08em}}
@media (max-width:339px){#brand{font-size:14px;letter-spacing:.04em}}
#snd{flex:none;font-size:18px;background:#FAF9F5;border:2.5px solid var(--ink);border-radius:50%;width:44px;height:44px;cursor:pointer}
#pbar{flex:none;height:4px;background:var(--paper2);margin:0 calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left))}
#prog{display:block;height:100%;width:0;background:var(--or);border-radius:2px;transition:width .4s}
#stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}
#world{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#ov{position:absolute;inset:0;pointer-events:none}
.ink{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.thin{stroke-width:1.8}.fillw{fill:#FAF9F5}
.pick{cursor:grab}
/* overlay pieces: all absolutely positioned by JS at a world anchor */
.ovx{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.bub{background:#FAF9F5;border:3px solid var(--ink);border-radius:16px;padding:8px 14px 9px;font-size:clamp(19px,1.1vw + 13px,24px);line-height:1.22;max-width:min(340px,82vw);width:max-content;text-align:center;box-shadow:3px 4px 0 rgba(20,20,19,.12)}
.bub .who{display:block;font-size:13px;letter-spacing:.12em;color:var(--slate-l);margin-bottom:1px;text-transform:uppercase}
.bub .tail{position:absolute;bottom:-17px;left:var(--tx,50%);width:22px;height:18px;margin-left:-11px;overflow:visible}
.bub.cut{border-style:dashed}
.card{background:var(--paper);border:2.5px solid var(--ink);border-radius:6px;padding:8px 14px;font-size:clamp(19px,1.1vw + 13px,25px);line-height:1.25;max-width:min(330px,80vw);width:max-content;transform-origin:center;box-shadow:4px 5px 0 var(--paper2)}
.card b{color:var(--ortx);font-weight:normal}
.card.big{font-size:clamp(24px,1.6vw + 16px,34px)}
.chev{display:inline-block;margin-left:8px;color:var(--or);animation:bob 1s infinite}
@keyframes bob{50%{transform:translateX(4px)}}
.tapnote{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:15px;color:var(--slate-l);pointer-events:none}
.btn{font:inherit;font-size:clamp(19px,1vw + 14px,24px);min-height:52px;padding:8px 22px;background:var(--ink);color:#FAF9F5;border:3px solid var(--ink);border-radius:14px;cursor:pointer;box-shadow:4px 5px 0 var(--or);pointer-events:auto;white-space:nowrap}
.btn:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--or)}
.btn.lite{background:#FAF9F5;color:var(--ink);box-shadow:4px 5px 0 var(--ink)}
.counter{font-size:clamp(17px,.8vw + 13px,21px);color:#5E5D59;background:var(--paper);padding:2px 8px;border:2px solid var(--pencil);border-radius:8px}
.counter.used{border:none;background:none;color:var(--ortx);font-size:clamp(26px,2vw + 16px,40px);line-height:1.1;text-align:center}
.tag{background:#FAF9F5;border:2px solid var(--ink);border-radius:6px;padding:2px 8px;font-size:18px;transform:rotate(-3deg)}
.title{text-align:center;max-width:min(560px,92vw);width:max-content}
.title .t{font-size:clamp(44px,5vw + 18px,76px);line-height:1}.title .s{font-size:clamp(19px,1.2vw + 13px,26px);color:#5E5D59;margin-top:6px}
.title .q{font-size:clamp(21px,1.3vw + 14px,29px);color:#141413;margin-top:clamp(14px,2.2vh,26px);line-height:1.2}
.sticky{background:#EBDBBC;padding:8px 12px;font-size:clamp(17px,1vw + 12px,21px);transform:rotate(-3deg);box-shadow:2px 3px 0 rgba(20,20,19,.08);width:max-content;max-width:70vw}
.hand{width:56px;height:56px}
#sintro{position:fixed;inset:0;z-index:50;background:radial-gradient(circle 34px at var(--cx) var(--cy),transparent 30px,rgba(20,20,19,.88) 34px);font-family:'Patrick Hand',cursive}
#sintro .scard{position:absolute;left:50%;transform:translateX(-50%);width:min(92vw,440px);text-align:center;color:#FAF9F5}
.stitle{font-size:32px}.ssub{font-size:19px;opacity:.85;margin:4px 0 12px}
#sintro .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#sintro .btn{background:#FAF9F5;color:var(--ink)}#sintro .btn.lite{background:transparent;color:#FAF9F5;border-color:#FAF9F5;box-shadow:none}

.bub b,.card b{font-weight:normal;color:var(--ortx)}
.counter.used{white-space:nowrap}

/* ---- fixed button bar (shared rule: one place, one design) ---- */
#bar{flex:none;height:calc(76px + env(safe-area-inset-bottom));padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;border-top:2px solid var(--paper2);background:var(--paper)}
@media (min-width:701px){#bar{height:calc(84px + env(safe-area-inset-bottom))}}
#bar .btn{width:min(360px,100%);height:56px;min-height:56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 16px}
#bar .btn.wait{background:transparent;color:var(--pencil);border-color:var(--pencil);box-shadow:none;cursor:default}
#bar .hint{font-size:clamp(18px,1vw + 13px,22px);color:#5E5D59;text-align:center;line-height:1.2}
#sintro .sarrow{position:absolute;left:0;top:0;pointer-events:none}
.svgtxt{font-family:'Patrick Hand'}

.conf{position:absolute;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:6}

/* ---- Round 5 ---- */
.ink.paperf{fill:var(--paper)}
#bar .btn.wait{position:relative}
/* the loading Continue (Mike, Oct 20, 2026): while there's something to read, the whole button fills left to right like a
   progress bar (Ivory Dark, with a Clay leading edge), then it turns Ready. One design for every hold. */
#bar .btn.wait .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--paper2);box-shadow:inset -3px 0 0 var(--or);animation:fillw linear forwards}
#bar .btn.wait span{position:relative}
#frame.dark #bar .btn.wait .fill{background:#3D3D3A}
@keyframes fillw{to{width:100%}}
#bar .hint{color:var(--ortx);font-size:clamp(19px,1vw + 14px,23px)}
#bar .hint .up{display:inline-block;color:var(--or);font-size:1.15em;animation:upb .8s ease-in-out infinite}
@keyframes upb{50%{transform:translateY(-6px)}}
.tag{font-size:clamp(16px,.6vw + 13px,20px);background:#FAF9F5;white-space:nowrap}
.ovx{position:absolute;left:0;top:0;pointer-events:none}
.card.big{font-size:clamp(23px,1.4vw + 15px,32px)}
.pick{cursor:grab}

/* ---- Round 6 ---- */
/* narrator caption slot: one fixed spot directly above the Continue bar (same width as the bar, ≤ 560 px) */
#capslot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:4px 12px 8px;pointer-events:none;z-index:3}
#capslot .card.cap{max-width:min(560px,100%);width:max-content;text-align:center;font-size:clamp(19px,1vw + 14px,24px);line-height:1.2;padding:7px 16px}
#capslot .card.cap.big{font-size:clamp(21px,1.2vw + 15px,28px)}
/* ET scribble transition overlay */
.scratcher{position:absolute;inset:0;z-index:30;pointer-events:none;background-repeat:no-repeat}

/* ---- Round 11 ---- */
/* top bar: map icon next to the sound button, same round style */
#map{display:inline-flex;align-items:center;justify-content:center;background:#FAF9F5;border:2.5px solid var(--ink);border-radius:50%;width:44px;height:44px;cursor:pointer;flex:none}
#mapsoon{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--ink);color:#FAF9F5;border-radius:10px;padding:6px 14px;font-size:18px;z-index:40;white-space:nowrap;pointer-events:none}
/* final "Unlock all 14" screen: the bar holds the main button plus a quiet text link under it */
#bar.final{height:auto;flex-direction:column;gap:6px;padding-top:12px}
#bar.final a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
#bar .maplink{font-size:clamp(17px,.6vw + 14px,19px);color:#5E5D59;text-decoration:underline;text-underline-offset:3px;padding:4px 10px;pointer-events:auto}

/* Round 20: Anthropic palette hover accent (Accent #C6613F) on pointer devices */
@media (hover:hover){.btn:not(:disabled):not(.lite):hover{box-shadow:4px 5px 0 var(--or-hover)}}
/* Round 22: the Unlock screen's trial line + disclosure under the main button */
#bar .fnote{font-family:var(--serif);font-size:clamp(15px,.4vw + 12px,16px);line-height:1.3;color:var(--slate-m);text-align:center;max-width:100%}
#bar .fnote.disc{font-size:14px;color:var(--slate-l)}
#bar.final .maplink{padding:2px 10px}
#bar .fnote{text-wrap:balance}
@media (max-height:700px){#bar.final{gap:2px;padding-top:7px}#bar .fnote{line-height:1.17}#bar .fnote:not(.disc){margin-top:3px}}   /* short phones: the Lora notes take a little more room than the handwriting did, so the bar tightens (#414) */

/* the hook question on the title screen sits right above the button it pairs with (Workflow 2) */
.hookq{position:absolute;left:0;right:0;bottom:clamp(14px,2.4vh,26px);text-align:center;font-size:clamp(22px,1.3vw + 15px,30px);color:#141413;line-height:1.2;padding:0 16px;pointer-events:none}
/* #328 milestone screens (the trail): Anthropic's dark scheme. Ink ground, paper text, Clay for "you are here". */
#frame,#bar,#hud{transition:background-color .45s ease}
#frame.dark,#frame.dark #bar{background:#141413}
#frame.dark #bar{border-top-color:#3D3D3A}
#frame.dark #pbar{background:#3D3D3A}
#frame.dark #brand{color:#D97757}#frame.dark #stepn{color:#87867F}
#frame.dark #map,#frame.dark #snd{background:#3D3D3A;border-color:#87867F;color:#FAF9F5}
#frame.dark #map svg *,#frame.dark #snd svg *{stroke:#FAF9F5}
#frame.dark .card{background:#3D3D3A;color:#FAF9F5;border-color:#3D3D3A;box-shadow:none}
#frame.dark .card b{color:#D97757}
#frame.dark .btn{background:#FAF9F5;color:#141413;border-color:#FAF9F5;box-shadow:4px 5px 0 #D97757}
#frame.dark #bar .btn.wait{background:transparent;color:#5E5D59;border-color:#3D3D3A;box-shadow:none}

/* Tactics: HighLevel inline (Overview), a light line under the AI Studio screen; the link is live (new tab) */
#bar .btn.wait:has(.fill){color:var(--slate-l);border-color:var(--slate-l)}
/* #381/#382 (Mike, t485u: "tap targets should always be orange in some way"): a tap target with no orange fill of its own wears
   an orange outline and a soft pulsing glow on its outer shape only, so its words keep their colour (.orglow); a target that's
   only words gets an orange outline around it (.orring). Both last only while it's tappable (Overview, "Every interaction is unmistakable"). */
#scene .orglow{filter:drop-shadow(0 0 1.5px #D97757) drop-shadow(0 0 1.5px #D97757) drop-shadow(0 0 1.5px #D97757) drop-shadow(0 0 5px rgba(217,119,87,.8));animation:orglow 1.3s ease-in-out infinite}
@keyframes orglow{50%{filter:drop-shadow(0 0 1.5px #D97757) drop-shadow(0 0 1.5px #D97757) drop-shadow(0 0 1.5px #D97757) drop-shadow(0 0 11px rgba(217,119,87,1))}}
#scene .orring{pointer-events:none;animation:orring 1.3s ease-in-out infinite}
@keyframes orring{50%{stroke-width:4;opacity:.75}}

/* the Social proof cards (#409, Mike t538u): one deeper ivory over the whole screen, so the card (Ivory Light) is the lightest surface and nothing seams */
html.ivory,html.ivory body,html.ivory #frame:not(.dark),html.ivory #frame:not(.dark) #bar{background:#F0EEE6}
@media (min-width:1240px) and (min-height:900px){html.ivory body{background:var(--paper2)}}
html.ivory #frame:not(.dark) #bar{border-top-color:#F0EEE6}
html.ivory .scratcher{background-color:#F0EEE6!important}
/* the final Unlock screen (#412; unlock.js): the quiet links row under the main button, and the Resources sheet.
   The sheet (Ivory Light, the lightest surface) slides up over the one ivory ground; a Slate Dark scrim dims the rest. */
#bar .flinks{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:-2px}
#bar .flinks .maplink{display:inline-flex;align-items:center;min-height:44px;margin:-9px 0;padding:0 14px;background:none;border:0;font-family:inherit;cursor:pointer;line-height:1}
#sheet{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
#sheet .scrim{position:absolute;inset:0;background:rgba(20,20,19,.45)}
#sheet .panel{position:relative;width:100%;max-width:560px;max-height:96%;overflow:auto;background:#FAF9F5;border:1.5px solid #B0AEA5;border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(20,20,19,.12);padding:6px 22px calc(22px + env(safe-area-inset-bottom))}
#sheet .sph{display:flex;align-items:center;justify-content:space-between;min-height:52px}
#sheet .spt{font-size:26px;color:var(--ink)}
#sheet .spx{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;background:#FAF9F5;border:2.5px solid var(--or);border-radius:50%;cursor:pointer;padding:0}
#sheet .sgrid{display:grid;grid-template-columns:1fr;gap:0 28px}
#sheet .srow{padding:12px 0 14px;border-top:1.5px solid #E8E6DC}
#sheet .sn{font-size:23px;color:var(--ink);line-height:1.1}
#sheet .sd,#sheet .sx2{text-wrap:balance}
#sheet .sd{font-family:var(--serif);font-size:17px;line-height:1.4;color:var(--slate-m);margin:4px 0 2px}
#sheet a.sl{display:inline-flex;align-items:center;min-height:44px;font-size:20px;color:var(--ortx);text-decoration:underline;text-underline-offset:4px;margin:-4px 0}
#sheet .sx2{font-family:var(--serif);font-size:14px;line-height:1.35;color:var(--slate-l)}
/* the diagram in the Resources sheet (#432; #438: no enlarge control, Mike t587u): a plain picture, as big as the free height allows (unlock.js fitDg). A phone pinch-zooms it (nothing here sets touch-action, and the viewport allows zoom); a laptop gets a wide pop-up so it is readable */
#sheet .sdg{padding:4px 0 12px;border-top:1.5px solid #E8E6DC}
#sheet .sdh{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
#sheet .sdh .sn{font-size:23px}
#sheet a.sv{display:inline-flex;align-items:center;min-height:44px;font-size:20px;color:var(--ortx);text-decoration:underline;text-underline-offset:4px}
#sheet .sdb{display:block;margin:2px auto 0;padding:0;width:100%;aspect-ratio:16/9;background:#fff;border:1.5px solid #B0AEA5;border-radius:8px;overflow:hidden}
#sheet .sdb img{display:block;width:100%;height:100%;object-fit:contain}
#sheet .sdb.off{display:none}
/* a phone on its side: the diagram at the left, the tools stacked at the right */
@media (min-width:640px) and (max-height:520px){#sheet .panel{max-width:800px}#sheet .sbody{display:grid;grid-template-columns:1fr 1.3fr;gap:0 22px;align-items:start}#sheet .sdg{border-top:1.5px solid #E8E6DC}#sheet .srow{padding:8px 0 8px}#sheet .sd{line-height:1.3}}
/* a laptop or desktop: a wide pop-up so the diagram is readable (it was capped at 560 px, a 512 px picture of a 2048 px diagram), the two tools side by side under it */
@media (min-width:900px) and (min-height:600px){#sheet .panel{max-width:1040px}#sheet .sgrid{grid-template-columns:1fr 1fr}}

/* E.sideCap (opt-in, pending Mike's OK for the Kit): a short screen on its side. The caption sits in a column right of the
   scene, the hook question too, and the button bar is compact (the button stays 46px tall: still over 44 for a thumb) */
#frame.sidecap #capslot{left:auto;right:0;top:0;bottom:0;padding:8px 12px 8px 6px}
#frame.sidecap #capslot .card.cap{max-width:100%;width:auto}
#frame.sidecap #bar{height:calc(62px + env(safe-area-inset-bottom));padding:7px 16px calc(7px + env(safe-area-inset-bottom))}
#frame.sidecap #bar .btn{height:46px;min-height:46px}
#frame.sidecap .hookq{left:auto;right:0;top:0;bottom:0;width:var(--capw);display:flex;align-items:center;justify-content:center;padding:0 14px 0 6px;font-size:22px}