/* The AI Playbook – site v5 (v5: owner bubbles point UP at the speaker; full 40-prompt list) – based on v4: one world (v4: bubble + tail drawn as ONE outline; stats as a 2x2 grid).
   One continuous night sky, one centered reading column, one visual language: the glowing chat bubble.
   The bubble field (canvas #field) lives behind everything: vivid in the margins, quiet behind the column. */
@font-face{font-family:Inter;src:url(_build/fonts/Inter-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(_build/fonts/Inter-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{--ink:#0B0F14;--night:#0E1626;--cyan:#22D3EE;--pink:#F472B6;--amber:#F6C76A;--cream:#F6F4EF;--mute:#9DA8B7;
 --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
 --acc:var(--pink);--col:720px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{color:var(--cream);font:500 17px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--pink);color:var(--ink)}

/* ---------- the sky: one fixed backdrop for the whole page ---------- */
.sky{position:fixed;inset:0;z-index:-3;pointer-events:none;background:
 radial-gradient(1px 1px at 12% 18%,#fff9 50%,transparent),radial-gradient(1px 1px at 78% 12%,#fff7 50%,transparent),
 radial-gradient(1.5px 1.5px at 64% 34%,#fff6 50%,transparent),radial-gradient(1px 1px at 30% 66%,#fff5 50%,transparent),
 radial-gradient(1px 1px at 88% 72%,#fff7 50%,transparent),radial-gradient(1.5px 1.5px at 6% 84%,#fff5 50%,transparent),
 radial-gradient(1px 1px at 46% 90%,#fff5 50%,transparent),radial-gradient(1px 1px at 94% 40%,#fff6 50%,transparent),
 radial-gradient(70% 50% at 0% 70%,rgba(34,211,238,.07),transparent 70%),
 radial-gradient(60% 50% at 100% 30%,rgba(244,114,182,.07),transparent 70%),
 linear-gradient(180deg,#101B2E 0%,var(--night) 45%,#0B111C 100%)}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------- one column, one rhythm ---------- */
.col{width:min(var(--col),calc(100vw - 40px));margin-inline:auto;text-align:center;position:relative}
section{position:relative;padding:140px 0}
.eyebrow{font:700 12px/1.3 Inter;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
h1,h2{letter-spacing:-.04em;text-shadow:0 4px 40px rgba(8,12,20,.95)}
h2{font:700 clamp(38px,5.2vw,66px)/1.02 Inter;margin:16px 0 0}
h1 em,h2 em,.tag em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
h2 em{background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.lead{font-family:var(--serif);font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:#D6DCE4;margin:22px auto 0;max-width:600px;text-shadow:0 2px 20px rgba(8,12,20,.95)}

/* ---------- nav ---------- */
nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:90;display:flex;gap:2px;align-items:center;padding:6px 6px 6px 18px;border-radius:999px;
 background:rgba(11,15,20,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);font-size:14px;white-space:nowrap}
nav .brand{font-weight:700;text-decoration:none;margin-right:12px}
nav a.l{text-decoration:none;color:#C3CAD4;padding:8px 12px;border-radius:999px}
nav a.l span{color:var(--mute)}
nav a.l:hover,nav a.l[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
nav a.l[aria-current] span{color:#D6DCE4}

/* ---------- buttons ---------- */
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:999px;font:700 16px/1 Inter;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn.g{background:linear-gradient(90deg,var(--cyan),var(--pink));color:var(--ink);box-shadow:0 10px 40px rgba(244,114,182,.35),0 0 0 1px rgba(255,255,255,.2) inset}
.btn.g:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(244,114,182,.5)}
.btn.ghost{border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(11,15,20,.35);backdrop-filter:blur(8px)}
.btn.ghost:hover{border-color:rgba(255,255,255,.5)}
.btn.s{padding:10px 16px;font-size:14px;margin-left:6px;background:linear-gradient(90deg,var(--cyan),var(--pink));color:var(--ink)}

/* ---------- THE component: the chat bubble ---------- */
.say{--c:34,211,238;position:relative;width:fit-content;max-width:min(560px,88%);text-align:left;margin-right:auto}
.say.you{--c:244,114,182;margin-left:auto;margin-right:0}
.say .who{display:block;font:700 11px/1 Inter;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--c),.95);margin:0 6px 9px}
.say.you .who{text-align:right}
.say .b{position:relative;isolation:isolate;padding:15px 20px;border-radius:22px;font:500 16.5px/1.55 Inter;color:#F4F6F9;
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* the shape: box + tail as ONE path (bubblePath in the JS), redrawn on resize – no seam at the tail root */
.say .shape{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none;
 filter:drop-shadow(0 0 13px rgba(var(--c),.3)) drop-shadow(0 16px 22px rgba(0,0,0,.32))}
.say.you .shape{transform:scaleX(-1)}
.shape .s0{fill:rgba(15,24,40,.86)}
.shape .s1{fill:url(#pb-ga);stroke:rgba(var(--c),.6);stroke-width:1;stroke-linejoin:round}
.say.you .shape .s1{fill:url(#pb-gy)}
.say .b b{color:#fff}
/* entrance + typing */
.js .thread .say{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1.2)}
.js .thread .say.on{opacity:1;transform:none}
.say .b .dots{display:none}
.say.typing .b{font-size:0!important;line-height:0}.say.typing .b>*:not(.dots):not(.shape){display:none}
.say.typing .b .dots{display:inline-flex;gap:5px;padding:4px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(var(--c),.95);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-4px)}}

/* threads */
.thread{display:flex;flex-direction:column;gap:56px;margin-top:72px}
.pair{display:flex;flex-direction:column;gap:22px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(100svh,780px);display:grid;place-items:center;padding:130px 0 110px}
.street{position:absolute;inset:0 0 -22vh;z-index:-2;background:url(_build/ill/web/cover.webp) center 72%/cover no-repeat;
 -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.street::after{content:"";position:absolute;inset:0;background:
 radial-gradient(48% 52% at 50% 46%,rgba(10,15,26,.88),rgba(10,15,26,.55) 60%,rgba(10,15,26,.15)),
 linear-gradient(to bottom,rgba(10,15,26,.7),transparent 25%)}
.hero h1{font:700 clamp(68px,10.5vw,156px)/.9 Inter;margin:22px 0 0}
.hero .tag{font-size:clamp(26px,3vw,40px);margin-top:14px;color:#fff;text-shadow:0 2px 30px rgba(8,12,20,.95)}
.hero .tag em{background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin-top:26px;font-size:14px;color:var(--mute)}
.facts b{color:#fff}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}.d1{animation-delay:.1s}.d2{animation-delay:.22s}.d3{animation-delay:.34s}.d4{animation-delay:.46s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.scrollcue{position:absolute;bottom:34px;left:50%;width:24px;height:38px;margin-left:-12px;border:1.5px solid rgba(255,255,255,.35);border-radius:14px}
.scrollcue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--cyan);animation:cue 1.8s infinite}
@keyframes cue{to{transform:translateY(12px);opacity:0}}
/* hero bubbles: three depth layers in the margins */
.hbs{position:absolute;inset:0;pointer-events:none;z-index:0}
.hb{position:absolute;will-change:transform}
.hb .say{max-width:250px;animation:float 7s ease-in-out infinite alternate}
.hb .b{font-size:15px;padding:12px 16px}
.hb.d1{scale:.82;filter:blur(1px);opacity:.75}.hb.d1 .say{animation-duration:9s}
.hb.d2{scale:.62;filter:blur(2.6px);opacity:.5}.hb.d2 .say{animation-duration:11s;animation-delay:-3s}
@keyframes float{from{transform:translate(-6px,8px) rotate(-1.5deg)}to{transform:translate(8px,-10px) rotate(1.5deg)}}
/* the book */
.book{perspective:1400px}
.b3{transform:rotateY(-18deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);border-radius:4px 10px 10px 4px;
 box-shadow:-2px 0 0 rgba(255,255,255,.08),18px 30px 60px rgba(0,0,0,.6),0 0 60px rgba(244,114,182,.25)}
.b3 img{border-radius:4px 10px 10px 4px;width:100%}
.book.float{position:absolute;right:max(3vw,calc(50vw - 640px));top:50%;width:min(230px,16vw);translate:0 -40%;z-index:1}
.book.float .b3{transform:rotateY(-24deg) rotateX(6deg) rotateZ(2deg)}
.book.inline{display:none}

/* ---------- jobs (thread) ---------- */
#jobs{padding-top:60px}

/* ---------- demo console: sticky, the chat fills from the bottom ---------- */
#demo{height:340vh;padding:0}
#demo .stick{position:sticky;top:0;height:100vh;display:flex;align-items:stretch;padding:118px 0 36px}
#demo .col{display:flex;flex-direction:column;height:100%}
#demo h2{font-size:clamp(32px,4vw,52px)}
.use{color:#C9D0DA;font-size:16px;max-width:620px;margin:14px auto 0}
.use b{color:var(--acc)}
.steps{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:20px}
.steps li{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;font:700 13px/1 Inter;color:#7F8A99;border:1px solid rgba(255,255,255,.1);transition:all .4s}
.steps i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);font-style:normal;font-size:11px}
.steps li.on{color:#fff;border-color:rgba(244,114,182,.6);box-shadow:0 0 18px rgba(244,114,182,.3)}
.steps li.on i{background:linear-gradient(90deg,var(--cyan),var(--pink));color:var(--ink)}
.chat{flex:1;min-height:0;margin-top:26px;overflow:hidden}
.chat.over{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 80px);mask-image:linear-gradient(to bottom,transparent,#000 80px)}
.flow{display:flex;flex-direction:column;gap:24px;transition:transform .35s ease-out;padding:4px 2px 22px}
.chat .say{max-width:min(620px,94%);flex-shrink:0}
.chat pre{font:500 13.5px/1.55 var(--mono);white-space:pre-wrap;color:#F6EEF3;min-height:1.5em}
.chat pre .f{color:var(--amber);background:rgba(246,199,106,.12);border-radius:4px;padding:0 2px}
.chat pre .k{color:#fff;font-weight:700}
.chat pre .caret{display:inline-block;width:8px;height:1.1em;vertical-align:-2px;background:var(--pink);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chat .res{white-space:pre-line}.chat .res.mono{font:500 13.5px/1.55 var(--mono);white-space:pre-wrap}
#answer{opacity:0;transform:translateY(16px);transition:opacity .4s,transform .5s}
#answer.on{opacity:1;transform:none}
.tip{font-size:14.5px;color:#BFC7D2;text-align:left;max-width:560px;opacity:0;transition:opacity .5s;flex-shrink:0}
.tip.on{opacity:1}.tip b{color:var(--cyan)}

/* ---------- owners ---------- */
.owner{margin-top:80px;position:relative}
.owner .pic{border-radius:26px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.5),0 0 70px rgba(34,211,238,.12);
 -webkit-mask-image:radial-gradient(130% 120% at 50% 30%,#000 60%,transparent 100%);mask-image:radial-gradient(130% 120% at 50% 30%,#000 60%,transparent 100%)}
.owner .pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.owner figcaption{position:relative;margin:-90px 18px 0;display:flex;flex-direction:column}
.owner .say{max-width:min(520px,92%)}
.owner .say .who{width:fit-content;background:rgba(11,15,20,.8);padding:7px 11px;border-radius:999px}
.owner .say.you .who{margin-left:auto}
.owner .say .b{font-size:17.5px;line-height:1.5}
.owner .say .b b,.shop .say .b b{font-weight:700;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.owner.flip .chips{justify-content:flex-end}
.chips span{font:700 12.5px/1 Inter;padding:8px 12px;border-radius:999px;color:#D9DFE7;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}

/* ---------- wall of pages (the 3D one), on the same sky ---------- */
#wall{height:115vh;padding:0;overflow:hidden;display:grid;place-items:center;perspective:1100px;isolation:isolate;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
#wall .gal{position:absolute;inset:-12% -8%;pointer-events:none;transform:rotateX(26deg) rotateZ(-8deg) scale(1.15);transform-origin:50% 30%;opacity:.55;z-index:-1}
#wall .rzad{display:flex;gap:14px;height:150%}
#wall .kol{flex:1;min-width:0;overflow:hidden}
#wall .tasma{display:flex;flex-direction:column;gap:14px;will-change:transform}
#wall .kafel{aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:#1b212b;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.5)}
#wall .kafel.g{box-shadow:0 0 0 1px rgba(34,211,238,.5),0 0 38px rgba(34,211,238,.45)}
#wall .kafel.p{box-shadow:0 0 0 1px rgba(244,114,182,.5),0 0 38px rgba(244,114,182,.42)}
#wall .kafel img{width:100%;height:100%;object-fit:cover}
#wall .kol:nth-child(odd) .kafel{filter:blur(1.4px) brightness(.8)}
#wall .col::before{content:"";position:absolute;inset:-120px -160px;z-index:-1;background:radial-gradient(closest-side,rgba(10,15,26,.92),rgba(10,15,26,.6) 60%,transparent)}
#wall h2{font-size:clamp(44px,6.4vw,92px);line-height:.95}

/* ---------- ask (FAQ as conversation) ---------- */
/* "What is in the book": a 2x2 grid of big gradient numbers with the label under each */
.say.ai:has(.stats){max-width:min(620px,96%)}
.stats{list-style:none;display:grid;grid-template-columns:1fr 1fr;margin:-6px -8px}
.stats li{padding:16px 16px 18px;border-top:1px solid rgba(255,255,255,.09)}
.stats li:nth-child(-n+2){border-top:0}.stats li:nth-child(odd){border-right:1px solid rgba(255,255,255,.09)}
.say .b .stats b{display:inline-block;font:700 44px/1 Inter;letter-spacing:-.045em;margin-bottom:10px;
 background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;font-size:14.5px;line-height:1.45;color:#C6CFDA}
.ticks,.arrows{list-style:none;margin:8px 0 4px;display:grid;gap:6px}
.ticks li::before{content:"✓";color:var(--cyan);font-weight:700;margin-right:10px}
.arrows li{color:#C9D0DA}.arrows a{color:#fff;font-weight:700;text-underline-offset:3px}
.else{margin-top:12px;color:var(--mute)}

/* ---------- buy (the praised block, as the ending) ---------- */
#buy{padding:120px 0 150px}
.buybook{width:200px;margin:0 auto 40px}
.small{font-size:13.5px;color:var(--mute);margin-top:18px}
.series{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:56px;align-items:center}
.series span{width:100%;font:700 11px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.series a{text-decoration:none;font-size:14.5px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(11,15,20,.4)}
.series a:hover{border-color:rgba(34,211,238,.6)}
.series small{color:var(--mute);margin-left:4px}
footer.col{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:30px 0 22px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--mute)}
footer a{margin-left:14px;text-decoration:none}footer a:hover{color:#fff}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){.scrollcue{display:none}.book.float{display:none}.book.inline{display:block;width:180px;margin:46px auto 0}}
@media (max-width:760px){
 body{font-size:16px}
 section{padding:100px 0}
 nav{padding:5px 5px 5px 14px;font-size:13px}nav a.l{display:none}
 .hero{align-items:end;padding:calc(36vh + 40px) 0 90px}
 .street{background-position:center 64%;inset:0 0 -10vh}
 .street::after{background:linear-gradient(to bottom,rgba(10,15,26,.35),rgba(10,15,26,.2) 30%,rgba(10,15,26,.9) 52%,rgba(10,15,26,.95))}
 .hbs{bottom:auto;height:42vh}.hb .say{max-width:190px}.hb .b{font-size:13px;padding:9px 12px}
 .hb:nth-child(n+4){display:none}
 .say .b{font-size:15.5px;padding:13px 16px}
 .thread{gap:44px;margin-top:52px}
 #demo .stick{padding:96px 0 20px}
 .use{font-size:14.5px}.steps li{font-size:12px;padding:6px 10px 6px 6px}
 .chat pre,.chat .res.mono{font-size:12px}
 .owner figcaption{margin:-60px 6px 0}.owner .say .b{font-size:17px}
 .stats li{padding:12px 10px 14px}.say .b .stats b{font-size:32px}.stats span{font-size:13.5px}
 footer.col{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv,.js .thread .say{opacity:1;transform:none}#wall .tasma{transform:none!important}}

/* ================= series page ================= */
/* hero: three covers fanned in the right margin */
.fan.float{position:absolute;right:max(1.5vw,calc(50vw - 700px));top:50%;width:270px;height:360px;translate:0 -40%;z-index:1}
.fan .book{position:absolute;width:150px;top:0;left:0}
.fan .f1{left:0;top:40px;z-index:3}.fan .f1 .b3{transform:rotateY(-22deg) rotateZ(-6deg)}
.fan .f2{left:58px;top:10px;z-index:2}.fan .f2 .b3{transform:rotateY(-22deg) rotateZ(1deg)}
.fan .f3{left:116px;top:-14px;z-index:1}.fan .f3 .b3{transform:rotateY(-22deg) rotateZ(7deg)}
.fan.inline{display:none}
@media (max-width:1180px){.fan.float{display:none}.fan.inline{display:block;position:relative;width:250px;height:250px;margin:40px auto 0}.fan.inline .book{width:120px}
 .fan.inline .f2{left:64px}.fan.inline .f3{left:128px}}
/* pick a book: AI answer carries the book */
.pick{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:start}
.pick .pc img{border-radius:3px 7px 7px 3px;box-shadow:10px 16px 34px rgba(0,0,0,.55),0 0 30px rgba(var(--c),.25)}
.pick .lvl{font:700 11px/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--c),1)}
.pick h3{font:700 28px/1.05 Inter;letter-spacing:-.03em;margin:8px 0 2px}.pick h3 a{text-decoration:none}
.pick .pt{font-family:var(--serif);font-style:italic;font-size:19px;color:#fff;margin-bottom:8px}
.pick p{font-size:15.5px;color:#DCE2EA}
.pick .pf{margin-top:10px;font-size:13.5px;color:var(--mute)}
.pick .go{display:inline-block;margin-top:12px;font-weight:700;color:#fff;text-underline-offset:4px}
#books .say.ai{max-width:min(640px,96%)}
/* street of six owners: vertical scroll moves the street sideways */
#street{padding:0}
#street .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:38px;padding-top:70px;perspective:1300px}
#street .stick>.col h2{font-size:clamp(34px,4.4vw,56px)}#street .stick>.col .lead{margin-top:12px}
.track{display:flex;gap:64px;padding:0 max(6vw,calc(50vw - 230px));width:max-content;will-change:transform;transform-style:preserve-3d}
.shop{flex:0 0 460px;display:flex;flex-direction:column;text-decoration:none;transform-style:preserve-3d;transition:transform .2s linear}
.shop .pic{border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 26px 70px rgba(0,0,0,.5);
 -webkit-mask-image:radial-gradient(130% 120% at 50% 30%,#000 60%,transparent 100%);mask-image:radial-gradient(130% 120% at 50% 30%,#000 60%,transparent 100%)}
.shop .pic img{width:100%;aspect-ratio:16/10;object-fit:cover}
.shop .say{margin-top:-64px;max-width:92%}.shop .say.you{margin-right:14px}.shop .say.ai{margin-left:14px}
.shop .say .who{width:fit-content;background:rgba(11,15,20,.8);padding:7px 11px;border-radius:999px}.shop .say.you .who{margin-left:auto}
.shop .say .b{font-size:16px;line-height:1.5}
.shop .chips{margin-top:20px}.shop .chips span{font-size:11.5px;padding:7px 10px}
.shop .bk{margin-top:14px;font:700 13px/1 Inter;color:var(--cyan)}
.shop:hover .bk{text-decoration:underline;text-underline-offset:4px}
@media (max-width:980px){#street{padding:100px 0}#street .stick{position:static;height:auto;padding:0;overflow:visible}
 .track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 20px 30px;gap:22px;transform:none!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .shop{flex-basis:84vw;scroll-snap-align:center;transform:none!important}.pick{grid-template-columns:84px 1fr;gap:14px}.pick h3{font-size:23px}}

/* level marker at the top of a book page: three segments + "Level n / 3" (operator 2026-11-05) */
.lvlm{display:flex;width:fit-content;align-items:center;gap:10px;margin:0 auto 18px;padding:8px 16px 8px 12px;border-radius:999px;
 background:rgba(11,15,20,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:700 14px/1 Inter;color:#fff}
.lvlm .seg{display:inline-flex;gap:4px}
.lvlm .seg i{width:22px;height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.lvlm .seg i.on{background:linear-gradient(90deg,var(--cyan),var(--pink));box-shadow:0 0 10px rgba(244,114,182,.5)}
.lvlm b{font-size:15px;letter-spacing:-.01em}.lvlm .of{color:var(--mute);font-weight:500;margin-left:-6px}
.lvlm .nm{color:var(--cyan);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.lvlm b,.lvlm .of{white-space:nowrap}
@media (max-width:760px){.lvlm .nm{display:none}}
/* creator mark under the footer */
.maker{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0 46px;font:600 11px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.maker img{height:24px;width:auto;opacity:.92}
/* the owner's prompts: a labelled list under the bubble, tied to it by a rule (replaces loose pills) */
.inbook{margin:22px 8px 0;max-width:min(500px,92%);text-align:left}
.owner.flip .inbook{margin-left:auto}
.inbook .lab{display:block;font:700 10.5px/1 Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0 0 8px 14px}
.inbook ul{list-style:none;margin:0;padding:0;border-left:2px solid rgba(34,211,238,.35)}
.inbook li{display:flex;gap:10px;align-items:center;padding:5px 0 5px 12px;font:600 14px/1.35 Inter;color:#DCE2EA}
.inbook li b{flex:none;font:700 11.5px/1 ui-monospace,Consolas,monospace;color:var(--cyan);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);border-radius:6px;padding:4px 0;width:40px;text-align:center}
.shop .inbook{margin:18px 4px 0}.shop .inbook li{font-size:12.5px}
/* book pages: the owner's full list (20 prompts) in two columns; street cards: link centred */
.inbook.all{max-width:min(720px,100%);margin-left:0;margin-right:0}
.owner.flip .inbook.all{margin-left:0}
.inbook.all ul{columns:2;column-gap:28px;padding:4px 0}
.inbook.all li{break-inside:avoid;font-size:13.5px;padding:4px 0 4px 12px}
.shop .bk{align-self:center}
@media (max-width:760px){.inbook.all ul{columns:1}}
/* creator mark: label centred above the logo, same size as the footer text (operator 2026-11-06) */
.maker{flex-direction:column;gap:10px;font:500 13px/1 Inter;letter-spacing:.04em;text-transform:none;color:var(--mute);padding:10px 0 50px}
.maker img{height:28px}

/* the owner's full prompt list: a glass card like the 'what is in the book' grid */
.inbook.all{background:linear-gradient(160deg,rgba(34,211,238,.12),rgba(34,211,238,.04) 70%),rgba(15,24,40,.72);border:1px solid rgba(34,211,238,.32);
 border-radius:22px;padding:18px 20px 14px;box-shadow:0 0 26px rgba(34,211,238,.12),0 18px 50px rgba(0,0,0,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.inbook.all .lab{margin:0 0 12px 2px;color:#C6CFDA}
.inbook.all ul{border-left:0}
.inbook.all li{padding:5px 0;border-top:1px solid rgba(255,255,255,.06)}

/* bubbles arrive: rise from their tail with a little overshoot, glow flash, then settle */
.js .thread .say{opacity:0;transform:translateY(22px) scale(.86);transform-origin:12% 100%;filter:blur(6px);
 transition:opacity .45s ease-out,transform .7s cubic-bezier(.18,1.35,.4,1),filter .5s ease-out}
.js .thread .say.you{transform-origin:88% 100%}
.js .thread .say.on{opacity:1;transform:none;filter:none}
.js .thread .say.on .b{animation:arrive 1.1s ease-out}
@keyframes arrive{0%{box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 60px rgba(var(--c),.75)}100%{box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 0 rgba(var(--c),0)}}
.say.typing .b .dots{animation:none}

/* bigger book on the book pages; hover opens it and flips through the pages to the end */
.book.float{width:min(280px,19vw)}
.book .leaf{position:absolute;inset:0;border-radius:3px 9px 9px 3px;background:#f4f2ec center/cover no-repeat;transform-origin:0 50%;
 transform:rotateY(0deg);backface-visibility:hidden;box-shadow:inset 6px 0 14px rgba(0,0,0,.18);pointer-events:none}
.book .b3{position:relative}
.book .b3 > img{position:relative;z-index:30;transform-origin:0 50%;transition:transform .9s cubic-bezier(.3,.7,.2,1);backface-visibility:hidden}
.book.open .b3 > img{transform:rotateY(-165deg)}
/* series picker: the small cover moves gently under the mouse (operator 2026-11-06) */
.pick .pc{display:block;perspective:700px}
.pick .pc img{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
/* full list: this owner's prompts bold and white, the other owner's thin and grey; more air under the bubble */
.inbook.all{margin-top:44px}
.inbook.all li span{font-weight:500}
.inbook.all li.own span{font-weight:700;color:#F4F6F9}
.inbook.all li.other span{color:#6E7A8A}
.inbook.all li.other b{color:#56677A;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
/* owner and street bubbles: the tail points UP to the person in the picture, on the side away from the name label */
.owner figcaption .say .shape,.shop .say .shape{transform:translateY(-16px) scaleY(-1)}  /* tail drawn under the person (JS), flipped up */
/* v6: level meter – each level its own solid colour, the book accents (1 pink, 2 cyan, 3 amber), no gradient */
.lvlm .seg i.on{background:var(--lv);box-shadow:0 0 10px var(--lv)}
.lvlm .seg i:nth-child(1){--lv:#F472B6}.lvlm .seg i:nth-child(2){--lv:#22D3EE}.lvlm .seg i:nth-child(3){--lv:#F6C76A}
/* v7 (operator 2026-11-06): lighter type in the prompt list; CTA buttons solid pink, no gradient */
.inbook .lab{font-weight:500}
.inbook li{font-weight:500}
.inbook.all li.own span{font-weight:500;color:#F4F6F9}
.inbook.all li.other span{font-weight:500;color:#5E6977}
.inbook li b{font-weight:500}
.btn.g,.btn.s{background:var(--pink);color:var(--ink)}
/* v8 (operator 2026-11-06 night): 5 + 5 random prompts per hero, the bubble's prompt in pink, greyed ones link
   to the other hero; bubble text smaller and lighter, like the prompt list */
.inbook.pick5 li[hidden]{display:none}
.inbook.all li.other a{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none;width:100%}
.inbook.all li.other a:hover span{color:#C9D0DA;text-decoration:underline;text-underline-offset:3px}
.inbook.all li.other a:hover b{color:var(--cyan);border-color:rgba(34,211,238,.35)}
.inbook.all li.hot span{color:var(--pink)}
.inbook.all li.hot b{color:var(--ink);background:var(--pink);border-color:var(--pink);box-shadow:0 0 12px rgba(244,114,182,.5)}
.owner .say .b,.shop .say .b{font-size:15px;line-height:1.55;font-weight:500}
.owner .say .b b,.shop .say .b b{font-weight:700}
html{scroll-behavior:smooth}.owner{scroll-margin-top:90px}
/* v9 (operator 2026-11-06 night): thinner type everywhere except headlines (Inter 400), secondary text greyed;
   the buy button and the level meter take the level colour: series pink, level 1 cyan, 2 amber, 3 pink */
@font-face{font-family:Inter;src:url(_build/fonts/Inter-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(_build/fonts/Inter-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--lvl:#F472B6}
body{font-weight:400}
p,li,.lead,.say .b,.owner .say .b,.shop .say .b,.chat .res{font-weight:400}
.inbook li,.inbook.all li span,.inbook.all li.own span,.inbook.all li.other span{font-weight:400}
.say .b b,.owner .say .b b,.shop .say .b b{font-weight:500}
.arrows li,.else,.ticks li{font-weight:400}
.else,.arrows li{color:#7F8A99}.arrows a{color:#C9D0DA;font-weight:500}
.lead{color:#B4BDC9}
.btn.g,.btn.s{background:var(--lvl);color:var(--ink);box-shadow:0 10px 36px color-mix(in srgb,var(--lvl) 35%,transparent)}
.lvlm .seg i:nth-child(1){--lv:#22D3EE}.lvlm .seg i:nth-child(2){--lv:#F6C76A}.lvlm .seg i:nth-child(3){--lv:#F472B6}
.lvlm .nm{color:var(--lvl)}
/* v10 (operator 2026-11-07): one spacing rhythm between sections – 112px desktop / 72px mobile between blocks,
   the buy block closes the page tight to the series links, footer and creator mark */
section{padding:112px 0}
#buy{padding:112px 0 64px}
.series{margin-top:44px}
footer.col{padding:24px 0 18px}
.maker{padding:6px 0 32px}
@media (max-width:760px){
 section{padding:72px 0}
 #buy{padding:72px 0 44px}
 .series{margin-top:32px}
 footer.col{padding:20px 0 14px;gap:8px}
 .maker{padding:4px 0 26px}
}
/* v11 (operator 2026-11-07, mobile test): the floating sound button is icon-only on phones so it never covers text */
@media (max-width:640px){.snd{padding:11px;gap:0;right:12px;bottom:12px}.snd>span{display:none}}
/* v11: step-number circles one solid colour, the page's level colour (operator 2026-11-07: "jednolity kolor w kolkach") */
.steps li.on i{background:var(--lvl);color:var(--ink)}
.steps li.on{border-color:color-mix(in srgb,var(--lvl) 60%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--lvl) 30%,transparent)}

/* v12 (operator 2026-11-07, step-out v8 round 2): the last hero of each book walks up to the viewer and their head and
   shoulders rise ABOVE the card top. That space must be EMPTY page ("nachodzenie postaci na klatki swoje inne popraw"):
   margin above the second hero card on book pages, padding above the street cards. Sized from anim-v8/pop.json
   by _build/mk_test_anim_v8.py (rise dev 0.30, jess 0.00, tom -0.04, tom-pl 0.15 card heights). */
#owners #hero-dev{margin-top:max(80px,calc(22.6% + 14px))}
#owners #hero-jess{margin-top:80px}
#owners #hero-tom{margin-top:max(80px,calc(-3.2% + 14px))}
html[lang="pl"] #owners #hero-tom{margin-top:max(80px,calc(11.5% + 14px))}
#street .track{padding-top:85px}
html[lang="pl"] #street .track{padding-top:85px}
@media (max-width:980px){#street .track{padding-top:max(20px,calc(84vw * 0.162 + 10px))}html[lang="pl"] #street .track{padding-top:max(20px,calc(84vw * 0.162 + 10px))}}

/* v12b (operator 2026-11-07: "postać wyżej bo nie widać palca"): on the step-out heroes the caption no longer
   overlaps the lower part of the picture, so the pointing hand is visible */
#owners #hero-dev figcaption,#owners #hero-jess figcaption,#owners #hero-tom figcaption{margin-top:14px}

/* Release: linked series covers and a readable hero lead. */
.hero .lead{font-family:Inter,system-ui,sans-serif}
.hero .lead strong{color:var(--cream);font-weight:700}
.hero .series-title-pl{font-size:clamp(38px,9vw,124px)}
.fan a.book:focus-visible{z-index:4;outline:none}
.fan a.book:focus-visible .b3,.pick a.pc:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
.pick a.pc:focus-visible{border-radius:4px 10px 10px 4px}
.pick .pc.pick-flip{perspective:700px}
.pick .pick-flip .b3{box-shadow:none}
.pick .pick-flip .b3 > img{transition:transform .9s cubic-bezier(.3,.7,.2,1),box-shadow .5s}

/* Keep the pinned card, its prompt list and its link inside the desktop viewport.
   Track padding reserves space for Dev's cap above the portrait. */
@media (min-width:981px){
 #street .stick{justify-content:flex-start;padding-top:104px;gap:4px}
 #street .stick > .col{width:min(1040px,92vw)}
 #street .stick > .col h2{font-size:clamp(34px,3.3vw,48px);margin-top:6px}
 #street-h br{display:none}
 #street .stick > .col .lead{font-size:17px;line-height:1.4;margin-top:6px}
 #street .track,html[lang="pl"] #street .track{padding-top:112px}
 #street .shop .pic img{aspect-ratio:16/9}
 #street .shop .say .who{margin-bottom:6px}
 #street .shop .say .b{font-size:14.5px;line-height:1.45;padding:11px 16px}
 #street .shop .inbook{margin-top:12px}
 #street .shop .inbook li{padding-block:4px}
 #street .shop .bk{margin-top:8px}
}

/* Demo answers use readable prose; structured output retains its aligned columns. */
.chat .res{max-width:65ch;font:400 16px/1.6 system-ui,"Segoe UI",sans-serif;color:#F4F6F9;overflow-wrap:anywhere}
.chat .res.mono{max-width:65ch;font:500 13.5px/1.6 var(--mono);white-space:pre-wrap}
.chat .res strong,.chat .res .demo-key{color:#fff;font-weight:700}
#ptyped .f,.chat .res .demo-var{color:#FFD271;font-weight:700}

/* Keep a full book title together when it wraps to a new line. */
.arrows li a{display:inline-block;white-space:nowrap;overflow-wrap:normal;max-width:100%}

/* Compact prompt number beside speaker labels and section eyebrows. */
.prompt-tag{display:inline-block;vertical-align:middle;min-width:3ch;padding:3px 5px;border:1px solid rgba(34,211,238,.35);
 border-radius:5px;background:rgba(34,211,238,.1);color:var(--cyan);text-align:center;white-space:nowrap;
 font:700 11px/1 var(--mono);letter-spacing:0}