/* The AI Playbook (playbook/): the tutorial listing and every tutorial page. Each is a page of its own, set straight on
   the homepage's sky like After Hours, in the site's type and navy ink. Every page sits in one centered container that
   the header and footer share, and everything inside it lines up on its left edge, the same one as the wordmark.
   Layered over styles.css, prototype.css and blue.css for the header, footer and colours.
   A tutorial is plain HTML made of the pb- blocks below; tutorial.js wires up the ones that do something (copy buttons,
   the before/after slider, checklists, video) and playbook.js runs the listing. */

/* Text sits on the blue itself, so the inks here are a step darker than on white: body text, small labels and the
   accent all stay readable against the darkest part of the sky */
.pb-page{--pb-text:#263f66;--pb-muted:#36507a;--pb-accent:#2f5a96;--pb-accent-small:#284d86;--pb-rule:#0f2c5624;--pb-rule-strong:#0f2c5638;
 --pb-surface:#f8fbfdf2;--pb-surface-soft:#ffffff80;--pb-edge:#0f2c561c;--pb-lift:0 0 0 1px #0f2c5614,0 18px 40px -26px #14233a73;
 --pb-gutter:4.5%;--pb-container:1200px;--pb-measure:720px;--pb-mid:880px;--pb-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#b3cfec}
/* The homepage's sky, with its clouds banked up on the right (sky.svg is the same drawing as index.html's .sky) */
.pb-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:url(/playbook/sky.svg) 100% 50%/cover no-repeat,radial-gradient(ellipse 60% 60% at 0 0,#ffffffa6,#fff0 70%),linear-gradient(#c2d8ef,#a9c7e9 38%,#a5c4e7 72%,#bad3ee)}
.pb-page [hidden]{display:none!important}
.pb-page .site-header{position:relative} /* the header scrolls away, so it doesn't stack on top of the pinned search bar */
.pb-page .site-header nav a[aria-current]{border-bottom-color:var(--forest)} /* tutorials mark AI Playbook as the current section */
@media (prefers-reduced-motion:no-preference){:root:has(.pb-page){scroll-behavior:smooth}}
@media (max-width:600px){.pb-page{--pb-gutter:5%}}

/* ---------- The page and its eyebrow ---------- */
/* One container, centered in the window and never wider than --pb-container. The header and footer take the same
   width, so the wordmark, the content and the footer keep one left edge however wide the screen is */
.pb-page :is(.site-header,.pb,.site-footer){width:min(100% - 2 * var(--pb-gutter),var(--pb-container));margin-inline:auto}
.pb{padding:clamp(20px,3.5vw,48px) 0 clamp(72px,10vw,140px)}
.pb-article{color:var(--forest)}
.pb-masthead{margin:0 0 clamp(16px,2vw,24px);font-size:11px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--pb-muted)}
.pb-masthead a,.pb-meta a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.pb-masthead a:hover,.pb-meta a:hover{color:var(--forest);text-decoration-color:currentColor}

/* ---------- A tutorial's opening: headline, standfirst, date, read time and topics, contents, hero ---------- */
.pb-head h1{margin:0 0 clamp(20px,2.8vw,34px);font-family:var(--serif);font-weight:400;font-size:clamp(48px,8.2vw,112px);line-height:.94;letter-spacing:-.025em;color:var(--forest);text-wrap:balance}
.pb-head h1 em{display:block;color:var(--pb-accent)}
.pb-dek{max-width:24em;margin:0 0 20px;font-family:var(--serif);font-size:clamp(22px,2.4vw,31px);line-height:1.22;letter-spacing:-.01em;color:var(--ink-soft);text-wrap:pretty}
.pb-meta{margin:0;font-size:11px;font-weight:550;line-height:1.7;letter-spacing:.2em;text-transform:uppercase;color:var(--pb-muted)}
.pb-meta>*{white-space:nowrap}
.pb-meta:empty{display:none}
/* "Inside": jump links to the sections, as a line of text or, with .is-visual, as thumbnails */
.pb-contents{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;margin:clamp(32px,4vw,48px) 0 0;padding-top:16px;border-top:1px solid var(--pb-rule);font-size:15px}
.pb-contents>span{font-size:11px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--pb-muted)}
.pb-contents a{padding-bottom:3px;border-bottom:1px solid #0f2c5640;color:var(--forest);transition:border-color .2s}
.pb-contents a:hover{border-bottom-color:currentColor}
.pb-contents b{margin-right:7px;font-weight:550;font-variant-numeric:tabular-nums;color:var(--pb-accent-small)}
.pb-contents.is-visual{gap:20px}
.pb-contents.is-visual>span{flex-basis:100%}
.pb-contents.is-visual a{flex:1 1 190px;display:block;max-width:420px;padding:0;border:0;font-family:var(--serif);font-size:21px;line-height:1.15}
.pb-contents.is-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;margin-bottom:12px;object-fit:cover;object-position:top;border-radius:8px;background:#d5e2f1;
 box-shadow:var(--pb-lift);transition:transform .7s var(--ease),box-shadow .3s}
.pb-contents.is-visual a:hover img{transform:translateY(-3px);box-shadow:0 0 0 1px #0f2c5614,0 22px 40px -22px #14233a8c}
.pb-contents.is-visual b{display:block;margin:0 0 4px;font-family:var(--sans);font-size:11px;letter-spacing:.2em}
.pb-hero{margin:clamp(32px,5vw,56px) 0 0}

/* ---------- Sections: words in a reading column, prompts and tables a little wider, pictures the full width,
   all starting from the same left edge. Sections are set apart by space alone, never a line between them ---------- */
.pb-body{margin-top:clamp(56px,8vw,112px)}
.pb-section{scroll-margin-top:24px}
.pb-section+.pb-section,.pb-type+.pb-section{margin-top:clamp(64px,9vw,128px)}
.pb-section>*{max-width:var(--pb-measure);margin:0}
.pb-section>*+*{margin-top:20px}
.pb-section>:is(.pb-prompt-card,pre.pb-prompt,.pb-table){max-width:var(--pb-mid)}
.pb-section>:is(.pb-figure,.pb-compare,.pb-grid,.pb-steps,.pb-stats,.pb-embed){max-width:none}
.pb-section>:is(.pb-figure,.pb-compare,.pb-grid,.pb-steps,.pb-stats,.pb-embed,.pb-prompt-card,pre.pb-prompt,.pb-table,.pb-changes,.pb-why,.pb-callout,.pb-checklist,.pb-actions),
.pb-section>*+:is(.pb-figure,.pb-compare,.pb-grid,.pb-steps,.pb-stats,.pb-embed,.pb-prompt-card,pre.pb-prompt,.pb-table,.pb-changes,.pb-why,.pb-callout,.pb-checklist,.pb-actions){margin-top:clamp(28px,3.6vw,44px)}
.pb-section>.pb-label+h2{margin-top:14px}
.pb-label{font-size:11px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--pb-accent-small)}
.pb-section h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.8vw,60px);line-height:1;letter-spacing:-.02em;color:var(--forest);text-wrap:balance}
.pb-section h2 em,.pb-signoff h2 em,.pb-related h2 em,.pb-intro h1 em{color:var(--pb-accent)}
.pb-section>h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,32px);line-height:1.1;letter-spacing:-.01em;color:var(--forest)}
:where(.pb-section) :is(p,li){font-size:17px;line-height:1.75;color:var(--pb-text)}
.pb-section p{text-wrap:pretty}
.pb-section>ul:not([class]),.pb-section>ol:not([class]){padding-left:1.2em}
.pb-page strong{font-weight:600;color:var(--forest)}
/* Links in running text get an underline; links set in their own row (the table's jump links, the sign-off's links)
   already have a rule under them, so they don't get a second one */
.pb-section :is(p,li,figcaption) a:not([class]),.pb-signoff p:not(.pb-signoff-links) a:not([class]){text-decoration:underline;text-decoration-color:#0f2c5666;text-underline-offset:3px;color:var(--forest);transition:text-decoration-color .2s}
.pb-section :is(p,li,figcaption) a:not([class]):hover,.pb-signoff p:not(.pb-signoff-links) a:not([class]):hover{text-decoration-color:currentColor}
.pb-section code{padding:.1em .35em;border-radius:5px;background:#ffffff8c;font-family:var(--pb-mono);font-size:.86em;color:var(--forest)}
/* The small uppercase heading that opens a block: "What changed", "Why it works", "The one rule", "Before you ship" */
.pb-changes h3,.pb-why h3,.pb-callout h3,.pb-checklist h3{margin:0 0 12px;font-family:var(--sans);font-size:11px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--pb-muted)}

/* ---------- Steps and levers, numbered in big serif numerals ---------- */
.pb-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px clamp(20px,3vw,40px);padding:0;list-style:none;counter-reset:pb-step}
.pb-steps>li{counter-increment:pb-step;padding-top:18px;border-top:1px solid var(--pb-rule-strong)}
.pb-steps>li::before{content:counter(pb-step,decimal-leading-zero);display:block;margin-bottom:16px;font-family:var(--serif);font-size:clamp(42px,4.4vw,56px);line-height:.9;color:var(--pb-accent)}
.pb-steps h3{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.1;color:var(--forest)}
.pb-steps p{margin:0;font-size:15.5px;line-height:1.6}

/* ---------- Copy-paste prompts: a light card on the sky, its [PLACEHOLDERS] picked out, with a copy button ---------- */
.pb-prompt-card,pre.pb-prompt{border-radius:14px;background:var(--pb-surface);box-shadow:inset 0 0 0 1px var(--pb-edge),0 14px 34px -28px #14233a66}
.pb-prompt-card{overflow:hidden}
.pb-prompt-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:54px;padding:9px 10px 9px 22px;border-bottom:1px solid var(--pb-edge)}
.pb-prompt-title{flex:1 1 220px;margin:0;font-size:11px;font-weight:550;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--pb-muted)}
.pb-prompt{margin:0;padding:20px 22px 24px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--sans);font-size:15.5px;line-height:1.72;color:#1f3a63;tab-size:2}
.pb-prompt-card .pb-prompt{border-radius:0;background:none;box-shadow:none}
.pb-prompt.is-code{font-family:var(--pb-mono);font-size:13.5px;line-height:1.72}
.pb-slot{padding:.08em .32em;border-radius:5px;background:#d8e5f5;color:#1b4378;font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Long, code-heavy prompts start folded, with the end fading out above "Show full prompt" */
.pb-prompt-card.is-folded .pb-prompt{max-height:19em;overflow:hidden;-webkit-mask:linear-gradient(#000 55%,#0000);mask:linear-gradient(#000 55%,#0000)}
.pb-fold{display:flex;padding:0 22px 18px}
.pb-prompt-card.is-folded .pb-fold{margin-top:-30px;position:relative}
.pb-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #0f2c561f,0 1px 2px #14233a14;
 font-size:13px;font-weight:500;white-space:nowrap;color:var(--forest);transition:box-shadow .2s,background .2s,color .2s}
.pb-pill:hover{box-shadow:0 0 0 1px #0f2c5645,0 3px 8px -2px #14233a29}
.pb-pill svg{flex:none;width:15px;height:15px}
.pb-pill.is-done{background:var(--forest);color:#fff;box-shadow:none}

/* ---------- Before / after: a slider over the two pictures (or videos), with tags in the corners ---------- */
.pb-compare-stage{position:relative;aspect-ratio:var(--ratio,16/10);border-radius:10px;overflow:hidden;background:#d5e2f1;box-shadow:var(--pb-lift);
 cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pb-compare-stage>:is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.pb-compare-stage>:is(img,video).is-after{clip-path:inset(0 0 0 var(--pos,50%))}
.pb-compare-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 .5px #0f2c5626,0 0 12px #14233a40;pointer-events:none}
.pb-compare-knob{position:absolute;top:50%;left:var(--pos,50%);width:48px;height:48px;margin:-24px 0 0 -24px;display:grid;place-items:center;border-radius:50%;
 background:#fff;color:var(--forest);box-shadow:0 2px 12px #14233a4d;pointer-events:none;transition:transform .25s var(--ease)}
.pb-compare-knob svg{width:22px;height:22px}
.pb-compare-stage:active .pb-compare-knob{transform:scale(.94)}
.pb-compare-stage:has(.pb-compare-range:focus-visible) .pb-compare-knob{outline:2px solid #4a6d9c;outline-offset:3px}
.pb-compare-tag{position:absolute;top:12px;z-index:1;max-width:calc(50% - 24px);padding:6px 11px;border-radius:999px;background:#fbfcfde8;box-shadow:0 1px 3px #14233a1f;
 font-size:10.5px;font-weight:550;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--forest);pointer-events:none}
.pb-compare-tag.is-before{left:12px}
.pb-compare-tag.is-after{right:12px}
.pb-compare-stage .art-controls{z-index:2}
/* Before the slider is built, or without scripts, the pair simply sits one under the other */
.pb-compare:not(.is-ready)>:is(img,video){display:block;width:100%;height:auto;border-radius:10px}
.pb-compare:not(.is-ready)>:is(img,video)+:is(img,video){margin-top:12px}

/* ---------- What changed, why it works ---------- */
.pb-changes ul{margin:0;padding:0;list-style:none}
.pb-changes li{position:relative;padding:12px 0 13px 28px;border-bottom:1px solid var(--pb-rule);font-family:var(--serif);font-size:clamp(19px,1.8vw,22px);line-height:1.3;color:var(--forest);text-wrap:pretty}
.pb-changes li:first-child{border-top:1px solid var(--pb-rule)}
.pb-changes li::before{content:"→";position:absolute;left:0;top:13px;font-family:var(--sans);font-size:15px;line-height:1.75;color:var(--pb-accent-small)}
.pb-why{padding-top:20px;border-top:1px solid #2f5a9666}
.pb-why p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,33px);line-height:1.18;letter-spacing:-.01em;color:var(--pb-accent);text-wrap:pretty}
.pb-why p+p{margin-top:12px}

/* ---------- Callouts: a soft light note on the sky; .is-warning for heads-ups ---------- */
.pb-callout{padding:20px 24px 22px;border-radius:14px;background:var(--pb-surface-soft);box-shadow:inset 0 0 0 1px var(--pb-edge)}
.pb-callout h3{margin-bottom:8px;color:var(--pb-accent-small)}
.pb-callout p{margin:0;font-size:16px;line-height:1.65}
.pb-callout p+p{margin-top:10px}
.pb-callout.is-warning{background:#fbf4e6e8;box-shadow:inset 0 0 0 1px #8a5a1424}
.pb-callout.is-warning h3{color:#8a5a12}

/* ---------- Stats: big serif numbers over small captions ---------- */
.pb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,96px),1fr));gap:28px clamp(16px,3vw,40px);padding:0;list-style:none}
.pb-stats li{padding-top:16px;border-top:2px solid var(--forest)}
.pb-stats strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(46px,7vw,96px);line-height:.9;letter-spacing:-.02em;color:var(--forest)}
.pb-stats span{display:block;margin-top:12px;font-size:11px;font-weight:550;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:var(--pb-muted)}

/* ---------- Tables: rows on thin rules, stacked into cards on phones (tutorial.js copies each heading into its cells) ---------- */
.pb-table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55}
.pb-table th{padding:0 18px 10px 0;text-align:left;vertical-align:bottom;border-bottom:1px solid var(--pb-rule-strong);font-size:11px;font-weight:550;letter-spacing:.18em;text-transform:uppercase;color:var(--pb-muted)}
.pb-table td{padding:16px 18px 16px 0;vertical-align:top;border-bottom:1px solid var(--pb-rule);color:var(--pb-text)}
.pb-table td:first-child{min-width:7.5em;font-family:var(--serif);font-size:22px;line-height:1.2;color:var(--forest)}
.pb-table td a{display:block;width:max-content;max-width:100%;padding-bottom:2px;border-bottom:1px solid #0f2c5640;font-weight:500;color:var(--forest);transition:border-color .2s}
.pb-table td a+a{margin-top:8px}
.pb-table td a:hover{border-bottom-color:currentColor}
@media (max-width:640px){
 .pb-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .pb-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--pb-rule)}
 .pb-table td{display:block;padding:4px 0;border:0}
 .pb-table td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin:10px 0 2px;font-size:10.5px;font-weight:550;letter-spacing:.18em;text-transform:uppercase;color:var(--pb-muted)}
}

/* ---------- Checklists: real checkboxes, ticked items fading back ---------- */
.pb-checklist ul{margin:0;padding:0;list-style:none}
.pb-checklist li{border-bottom:1px solid var(--pb-rule);font-size:16px;line-height:1.55}
.pb-checklist li:first-child{border-top:1px solid var(--pb-rule)}
.pb-checklist:not(.is-ready) li{position:relative;padding:13px 0 13px 36px}
.pb-checklist:not(.is-ready) li::before{content:"";position:absolute;left:0;top:14px;width:22px;height:22px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px #0f2c5640}
.pb-checklist label{display:flex;align-items:flex-start;gap:14px;padding:13px 0;cursor:pointer}
.pb-checklist input{flex:none;display:grid;place-items:center;width:22px;height:22px;margin:1px 0 0;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px #0f2c5640;
 -webkit-appearance:none;appearance:none;cursor:pointer;transition:background .2s,box-shadow .2s}
.pb-checklist input::after{content:"";width:11px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .25s var(--ease)}
.pb-checklist input:checked{background:var(--forest);box-shadow:none}
.pb-checklist input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.pb-checklist input:focus-visible{outline:2px solid #4a6d9c;outline-offset:3px}
.pb-checklist input:checked+span{color:var(--pb-muted)}

/* ---------- Pictures and video ---------- */
/* A figure takes the shape of what's in it (tutorial.js sets --ratio), so a tall one, like a reel or a phone screenshot,
   stops at most of the screen's height, still on the left edge, with its caption under it */
.pb-section>:is(.pb-figure,.pb-embed),.pb-hero{width:min(100%,calc(var(--pb-max-h,84vh) * var(--ratio,1.6)))}
.pb-media{position:relative}
:is(.pb-figure,.pb-hero,.pb-grid figure)>img,.pb-media>:is(img,video,iframe){display:block;width:100%;height:auto;border-radius:10px;background:#d5e2f1;box-shadow:var(--pb-lift)}
.pb-media>video,.pb-media>iframe{aspect-ratio:var(--ratio,16/9)}
.pb-media>iframe{border:0}
.pb-embed-blank{aspect-ratio:var(--ratio,16/9);border-radius:10px;background:#d5e2f1}
.pb-figure,.pb-hero,.pb-grid figure{position:relative}
.pb-page figcaption{margin-top:12px;font-size:13px;font-weight:500;line-height:1.5;color:var(--pb-muted)}
.pb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.pb-grid figure{margin:0}
.pb-media:hover .art-button,.pb-compare-stage:hover .art-button{opacity:1}
/* A video with sound waits behind a big play button, then gets the browser's own controls */
.pb-play{position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;background:linear-gradient(#0f2c5600 50%,#0f2c5640);color:var(--forest)}
.pb-play>span{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#fbfcfdf2;box-shadow:0 10px 32px -10px #14233a99;transition:transform .35s var(--ease)}
.pb-play:hover>span{transform:scale(1.07)}
.pb-play svg{width:26px;height:26px;margin-left:4px}
.pb-play>em{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:#fbfcfde8;font-style:normal;font-size:10.5px;font-weight:550;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Buttons under a block: a live demo (opens in the page's own browser window), a link out ---------- */
.pb-actions{display:flex;flex-wrap:wrap;gap:12px}
.pb-demo{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;background:var(--forest);color:#fff;font-size:15px;font-weight:500;transition:background .2s,transform .3s var(--ease)}
.pb-demo:hover{background:#18406f;transform:translateY(-1px)}
.pb-demo svg{width:16px;height:16px}

/* ---------- Sign-off and "More in this topic" ---------- */
.pb-signoff{margin-top:clamp(72px,10vw,140px);padding-top:clamp(28px,4vw,44px);border-top:2px solid var(--forest)}
.pb-signoff h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.4vw,88px);line-height:.96;letter-spacing:-.025em;color:var(--forest);text-wrap:balance}
.pb-signoff h2 em{display:block}
.pb-signoff p{max-width:36em;margin:22px 0 0;font-size:16px;line-height:1.65;color:var(--pb-text)}
.pb-signoff-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px}
.pb-signoff-links a{padding-bottom:4px;border-bottom:1px solid #0f2c5640;font-size:14px;letter-spacing:.02em;color:var(--forest);transition:border-color .2s}
.pb-signoff-links a:hover{border-bottom-color:currentColor}
/* ---------- Share buttons: added for you under a tutorial's date, in its sign-off, and at the foot of the listing ---------- */
.pb-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pb-share-label{margin:0 6px 0 0;font-size:11px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--pb-muted)}
.pb-share-button{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 13px;border-radius:999px;background:#fff;
 box-shadow:inset 0 0 0 1px #0f2c561f,0 1px 2px #14233a14;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--forest);
 transition:box-shadow .2s,transform .25s var(--ease),background .2s,color .2s}
.pb-share-button:hover{box-shadow:inset 0 0 0 1px #0f2c5645,0 6px 14px -8px #14233a59;transform:translateY(-1px)}
.pb-share-button svg{flex:none;width:16px;height:16px}
.pb-share-button.is-done{background:var(--forest);color:#fff;box-shadow:none}
.pb-share.is-compact{gap:6px}
.pb-share.is-compact .pb-share-button{justify-content:center;width:36px;height:36px;padding:0}
.pb-share.is-compact .pb-share-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pb-head>.pb-share{margin-top:18px}
.pb-signoff>.pb-share,.pb-listing>.pb-share{margin-top:clamp(36px,4vw,48px);padding-top:24px;border-top:1px solid var(--pb-rule)}
.pb-share:not(.is-compact)>.pb-share-label{margin-right:12px}
.pb-listing>.pb-share{margin-top:clamp(56px,7vw,96px)}

.pb-related{margin-top:clamp(64px,9vw,112px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--pb-rule)}
.pb-related h2{margin:0 0 clamp(24px,3vw,36px);font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.8vw,48px);line-height:1;letter-spacing:-.02em;color:var(--forest)}

/* ---------- Tutorial cards (the listing, and "More in this topic"): the cover lifts off the sky, the words sit on it ---------- */
.pb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,32px);margin:0;padding:0;list-style:none}
.pb-card{position:relative;display:flex;flex-direction:column}
.pb-card-thumb{position:relative;aspect-ratio:16/10;margin:0 0 16px;border-radius:10px;overflow:hidden;background:#d5e2f1;box-shadow:var(--pb-lift);transition:box-shadow .4s}
.pb-card-thumb>:is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .35s}
.pb-card-thumb>video{opacity:0}
.pb-card-thumb>video.is-playing{opacity:1}
.pb-card:hover .pb-card-thumb{box-shadow:0 0 0 1px #0f2c5614,0 24px 44px -24px #14233a99}
.pb-card:hover .pb-card-thumb>img{transform:scale(1.04)}
.pb-card:has(a:focus-visible) .pb-card-thumb{outline:2px solid #4a6d9c;outline-offset:4px}
.pb-card-topic{margin:0 0 8px;font-size:11px;font-weight:550;letter-spacing:.18em;text-transform:uppercase;color:var(--pb-accent-small)}
.pb-card h3{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2vw,28px);line-height:1.08;letter-spacing:-.01em;color:var(--forest);text-wrap:balance}
.pb-card h3 a{outline:none}
.pb-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pb-card-text{display:-webkit-box;margin:0 0 12px;overflow:hidden;font-size:15px;line-height:1.55;color:var(--pb-text);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pb-card-meta{margin:auto 0 0;font-size:12.5px;letter-spacing:.02em;color:var(--pb-muted)}

/* ---------- The listing: headline, the search and filter bar (pinned while scrolling), the grid ---------- */
.pb-intro{margin-bottom:clamp(28px,4vw,52px)}
.pb-intro h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(64px,11vw,160px);line-height:.86;letter-spacing:-.03em;color:var(--forest)}
.pb-intro p{max-width:24em;margin:clamp(18px,2.2vw,28px) 0 0;font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.22;color:var(--ink-soft);text-wrap:pretty}
/* Once pinned, the bar sits on a band of frosted sky running the full width of the window */
.pb-toolbar{position:sticky;top:0;z-index:15;display:grid;gap:14px;padding:14px 0}
.pb-toolbar::before{content:"";position:absolute;inset:0 -100vmax;z-index:-1;background:#c3d8eeb8;-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
 box-shadow:0 1px 0 var(--pb-rule),0 18px 30px -28px #14233a80;opacity:0;transition:opacity .25s}
.pb-toolbar.is-stuck::before{opacity:1}
.pb-search-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.pb-search{position:relative;flex:1 1 320px;display:flex;align-items:center}
.pb-search>svg{position:absolute;left:22px;width:21px;height:21px;color:var(--pb-muted);pointer-events:none}
.pb-search input{width:100%;height:64px;padding:0 64px 0 56px;border:0;border-radius:999px;background:#fff;outline:none;
 box-shadow:inset 0 0 0 1px #0f2c5629,0 1px 2px #14233a14,0 14px 34px -20px #14233a73;font:inherit;font-size:19px;color:var(--forest);transition:box-shadow .2s;-webkit-appearance:none;appearance:none}
.pb-search input::placeholder{color:#6f82a0}
.pb-search input:focus{box-shadow:inset 0 0 0 1.5px var(--pb-accent),0 0 0 5px #2f5a9629,0 14px 34px -20px #14233a73}
.pb-search input::-webkit-search-cancel-button,.pb-search input::-webkit-search-decoration{display:none;-webkit-appearance:none}
.pb-search kbd{position:absolute;right:20px;display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:7px;box-shadow:inset 0 0 0 1px #0f2c5626,0 1px 0 #0f2c561f;
 font-family:var(--sans);font-size:13px;color:var(--pb-muted);pointer-events:none}
.pb-search-clear{position:absolute;right:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--pb-muted);transition:background .2s,color .2s}
.pb-search-clear:hover{background:#0f2c560d;color:var(--forest)}
.pb-search-clear svg{width:18px;height:18px}
.pb-search:not(.has-value) .pb-search-clear,.pb-search.has-value kbd{display:none}
.pb-sort{display:flex;flex:none;padding:4px;border-radius:999px;background:#ffffff59;box-shadow:inset 0 0 0 1px #0f2c561f}
.pb-sort button{height:44px;padding:0 17px;border-radius:999px;font-size:14px;color:var(--ink-soft);transition:background .2s,color .2s,box-shadow .2s}
.pb-sort button[aria-pressed="true"]{background:#fff;color:var(--forest);box-shadow:0 1px 3px #14233a24}
.pb-topics-bar{--bleed:4.5vw;display:flex;gap:8px;margin:0 calc(var(--bleed) * -1);padding:2px var(--bleed);overflow-x:auto;scrollbar-width:none}
@media (max-width:600px){.pb-topics-bar{--bleed:5vw}}
.pb-topics-bar::-webkit-scrollbar{display:none}
.pb-chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #0f2c5626;
 font-size:14px;color:var(--forest);transition:background .2s,color .2s,box-shadow .2s}
.pb-chip:hover{box-shadow:inset 0 0 0 1px #0f2c5666}
.pb-chip small{font-size:12px;font-variant-numeric:tabular-nums;color:var(--pb-muted)}
.pb-chip.is-empty{color:#5f7495}
.pb-chip[aria-pressed="true"]{background:var(--forest);color:#fff;box-shadow:none}
.pb-chip[aria-pressed="true"] small{color:#ffffffb3}
@media (min-width:900px){.pb-topics-bar{flex-wrap:wrap;margin:0;padding:0;overflow:visible}}
.pb-status{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:clamp(20px,3vw,32px) 0 clamp(24px,3vw,36px);
 font-size:11px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--pb-muted)}
.pb-status>p{margin:0}
.pb-status>button{font-size:11px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;text-decoration:underline;text-decoration-color:#0f2c5666;text-underline-offset:3px;color:var(--forest)}
.pb-empty{padding:clamp(32px,6vw,72px) 0}
.pb-empty h2{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,52px);line-height:1;letter-spacing:-.02em;color:var(--forest);text-wrap:balance}
.pb-empty p{max-width:30em;margin:0 0 26px;font-size:16px;line-height:1.6;color:var(--pb-text)}
.pb-more{display:flex;margin-top:clamp(44px,5vw,72px)}
.pb-button{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #0f2c5640;
 font-size:15px;color:var(--forest);transition:box-shadow .2s,background .2s}
.pb-button:hover{box-shadow:inset 0 0 0 1px var(--forest)}

/* ---------- The kit page (playbook/_kit/): the page layout, the text styles, and each example's markup folded away under it ---------- */
.pb-section>.pb-guides{max-width:none}
.pb-guides{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pb-guides>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;min-height:52px;padding:10px 18px;border-radius:10px;
 background:var(--pb-surface-soft);box-shadow:inset 0 0 0 1px var(--pb-edge);font-size:14px;line-height:1.4;color:var(--forest)}
.pb-guides>li.is-mid{max-width:var(--pb-mid)}
.pb-guides>li.is-measure{max-width:var(--pb-measure)}
.pb-guides b{font-family:var(--pb-mono);font-size:12px;font-weight:400;color:var(--pb-muted)}
.pb-guides-now{font-family:var(--pb-mono);font-size:12.5px;line-height:1.6;color:var(--pb-muted)}
.pb-type{margin:clamp(28px,3.6vw,44px) 0 0;border-top:1px solid var(--pb-rule)}
.pb-type-row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,300px);gap:14px 36px;align-items:center;padding:24px 0;border-bottom:1px solid var(--pb-rule)}
.pb-type-row>dt{font-size:14px;font-weight:550;line-height:1.4;color:var(--forest)}
.pb-type-row>dt small{display:block;margin-top:4px;font-size:13px;font-weight:450;color:var(--pb-muted)}
.pb-type-row>dd{min-width:0;margin:0}
.pb-type-sample :is(.pb-head,.pb-section)>*,.pb-type-sample :is(.pb-head h1,figcaption){margin:0}
.pb-type-sample .pb-section>*+*{margin-top:12px}
.pb-type-sample .pb-signoff{margin:0;padding:0;border:0}
.pb-type-spec{display:grid;gap:6px;font-family:var(--pb-mono);font-size:12px;line-height:1.55;color:var(--pb-muted)}
@media (max-width:900px){.pb-type-row{grid-template-columns:1fr;gap:12px}}
.pb-markup>summary{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:#ffffff59;box-shadow:inset 0 0 0 1px #0f2c5629;
 font-size:13px;font-weight:500;color:var(--forest);list-style:none;cursor:pointer;transition:box-shadow .2s}
.pb-markup>summary::-webkit-details-marker{display:none}
.pb-markup>summary::before{content:"+";font-size:16px;line-height:1;color:var(--pb-accent-small)}
.pb-markup[open]>summary::before{content:"–"}
.pb-markup>summary:hover{box-shadow:inset 0 0 0 1px #0f2c5666}
.pb-markup[open]>summary{margin-bottom:14px}

/* ---------- Motion: the opening settles in, and blocks further down rise as they scroll into view ---------- */
@media (prefers-reduced-motion:no-preference){
 .pb-head>*,.pb-hero,.pb-intro>*{animation:pb-rise .9s var(--ease) both}
 .pb-head>h1,.pb-intro>h1{animation-delay:.06s}
 .pb-head>.pb-dek,.pb-intro>p{animation-delay:.14s}
 .pb-head>.pb-meta,.pb-head>.pb-contents{animation-delay:.22s}
 .pb-hero{animation-delay:.3s}
 @keyframes pb-rise{from{opacity:0;transform:translateY(14px)}}
 .pb-rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
 .pb-rise.is-in{opacity:1;transform:none}
}

@media (max-width:820px){
 .pb-search input{height:56px;font-size:17px}
 .pb-search kbd{display:none}
}
/* On a phone the newest/oldest switch sits by the results count (playbook.js moves it), so the pinned bar is only
   the search and the topics and doesn't eat the screen */
.pb-status .pb-sort{order:3}
.pb-status .pb-sort button{height:36px;padding:0 14px;font-size:13px}
@media (max-width:620px){.pb-status{align-items:center}.pb-toolbar{gap:10px;padding-block:10px}}
@media (max-width:600px){
 :where(.pb-section) :is(p,li){font-size:16px}
 .pb-compare-tag{top:8px;padding:5px 9px;font-size:9.5px}
 .pb-compare-tag.is-before{left:8px}
 .pb-compare-tag.is-after{right:8px}
 .pb-compare-knob{width:40px;height:40px;margin:-20px 0 0 -20px}
 .pb-prompt{padding:16px 16px 20px;font-size:15px}
 .pb-prompt.is-code{font-size:12.5px}
 .pb-prompt-head{padding-left:16px}
 .pb-fold{padding-inline:16px}
 .pb-contents.is-visual{gap:18px 14px}
 .pb-contents.is-visual a{flex-basis:140px;font-size:18px}
}