/* Blocks page (/blocks/): the block library and the video player. ASCII only. */
body{background:radial-gradient(1100px 600px at 10% 0%,#F4F7FC 0,transparent 60%),radial-gradient(900px 600px at 100% 100%,#DCE4F4 0,transparent 60%),var(--bg);background-attachment:fixed;min-height:100vh}
/* the app's stylesheet makes the body one screen tall (the editor needs it); a page you scroll must grow with its content,
   or the sticky site header slides away after the first screen (owner's report, 2026-10-15) */
html,body{height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:34px 20px 70px}   /* the site's one width, as the header (audit, 2026-10-18) */
.hero h1{font-size:40px;line-height:1.1;letter-spacing:-.02em;margin:0 0 10px;font-weight:600}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{font-size:17px;color:var(--ink-2);max-width:760px;margin:0 0 24px}
.bk-feats{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.bk-feat{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--r,10px);padding:14px 16px;box-shadow:var(--shadow);max-width:640px;width:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.bk-feat .bk-ico{width:44px;height:44px;border-radius:var(--r,10px)}
.bk-feat .bk-ico svg{width:22px;height:22px}
/* the overview film: a big Play card at the top */
.bk-big{width:100%;display:flex;align-items:center;gap:22px;text-align:left;font:inherit;color:#fff;cursor:pointer;border:0;border-radius:var(--r,10px);padding:30px 30px;background:radial-gradient(700px 260px at 85% 0%,#3D63D9 0,transparent 70%),linear-gradient(135deg,#233F99,#16296B);box-shadow:var(--shadow-lg);transition:transform .2s}
.bk-big:hover{transform:translateY(-2px)}
.bk-bp{width:72px;height:72px;border-radius:50%;background:#fff;color:#233F99;display:grid;place-items:center;flex:none}
.bk-bp svg{width:30px;height:30px;margin-left:4px}
.bk-bt{display:flex;flex-direction:column;gap:4px;min-width:0}
.bk-bt small{font:500 12px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.bk-bt b{font-size:24px;font-weight:600;letter-spacing:-.01em}
.bk-bt>span{font-size:15.5px;line-height:1.5;opacity:.88;max-width:720px}
@media (max-width:640px){.bk-big{padding:20px 18px;gap:14px;align-items:flex-start}.bk-bp{width:52px;height:52px}.bk-bp svg{width:22px;height:22px}.bk-bt b{font-size:19px}.bk-bt>span{font-size:14px}}
.bk-ft{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:1px}
.bk-ft small{font:600 11px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.bk-ft b{font-size:17px;font-weight:600}
.bk-ft>span{font-size:13.5px;color:var(--ink-2)}
.bk-fa{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 8px}
.bk-search{flex:1 1 320px;max-width:460px;display:flex;align-items:center;gap:8px;height:var(--ctl-h,38px);padding:0 14px;border:1px solid var(--line);border-radius:var(--r,10px);background:#fff;color:var(--muted)}
.bk-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bk-search svg{width:18px;height:18px;flex:none}
.bk-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.bk-count{font-size:13px;margin-left:auto}
.bk-empty{text-align:center;padding:40px 0}
.bk-group{margin-top:26px}
.bk-gh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.bk-gh h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0}
.bk-gh .muted{font-size:14px}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.bk-card{position:relative;padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);background:#fff;min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}
.bk-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.bk-link{color:inherit;text-decoration:none}
.bk-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.bk-link:focus-visible{outline:0}
.bk-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:2px}
.bk-card[hidden]{display:none}
.bk-card.has-video{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.bk-top{display:flex;align-items:center;gap:10px;min-width:0}
.bk-ico{width:36px;height:36px;border-radius:var(--r,10px);display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);flex:none}
.bk-ico svg{width:18px;height:18px}
.bk-ico img{width:20px;height:20px;object-fit:contain}
.bk-name{flex:1;min-width:0}
.bk-name h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.bk-cat{font:600 10.5px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bk-badge{font:11px/1 var(--sans,'Nunito Sans',sans-serif);color:var(--muted);background:var(--surface-2);padding:4px 6px;border-radius:var(--r,10px);flex:none}
/* the same look as the editor's library (.li-badge): grey, sample in orange */
.bk-badge.smp{color:var(--warn-ink,#8A5200);background:var(--warn-bg)}
.bk-card p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.5;flex:none;max-height:4.5em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.bk-logos{display:flex;gap:6px;flex-wrap:wrap}
.bk-logos img{width:22px;height:22px;object-fit:contain;border-radius:var(--r,10px);background:#fff;border:1px solid var(--line-2);padding:2px}
.bk-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--line-2);font-size:12.5px}
.bk-price{color:var(--muted)}
.bk-acts{display:inline-flex;align-items:center;gap:10px}
.bk-play{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:500;color:#fff;background:var(--accent-strong);border:0;border-radius:var(--r,10px);padding:5px 11px 5px 9px;white-space:nowrap;cursor:pointer}
.bk-play:hover{background:#16296B}
.bk-more{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--accent);white-space:nowrap;text-decoration:none}
.bk-more svg{width:13px;height:13px;transform:rotate(180deg)}
.bk-play svg{width:13px;height:13px}
.bk-play span{opacity:.8;font-weight:400}
.cta{margin-top:40px;text-align:center;color:var(--ink-2)}
.cta .btn{margin:6px}

/* ------------------------------------------------ player (the frame is the Showcases' player) */
#player{position:fixed;inset:0;z-index:70;background:rgba(15,27,45,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
body.playing{overflow:hidden}
.pl{width:min(1120px,100%);background:#fff;border-radius:var(--r,10px);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.pl-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.pl-head .chip{font:600 11px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--cc,var(--accent));border-radius:var(--r,10px);padding:4px 10px}
.pl-head b{font-size:16px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-head b:has(+ #plSub:not([hidden])){flex:0 1 auto}
#plSub{flex:1;min-width:0;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#plClose{margin-left:auto;flex:none}.pl-head .chip{flex:none}
@media (max-width:560px){#plSub{display:none}}
#plClose{width:34px;padding:0}
#stage{position:relative;aspect-ratio:16/9;background:var(--paper);overflow:hidden}
#stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--grid) 1.1px,transparent 1.4px) 0 0/22px 22px;opacity:.8}
#cap{min-height:52px;padding:12px 18px;font-size:15.5px;line-height:1.45;color:var(--ink);border-top:1px solid var(--line-2);background:#fff}
.ctl{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line-2)}
.ctl .btn.icon{width:36px;padding:0;flex:none}
.ctl .btn.on{color:var(--bad)}
#bar{flex:1;display:flex;gap:4px;min-width:120px}
#bar button{flex:1;height:18px;border:0;background:none;padding:6px 0;cursor:pointer}
#bar i{display:block;height:6px;border-radius:var(--r,10px);background:var(--line);position:relative;overflow:hidden}
#bar i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left}
#bar button.on i{box-shadow:0 0 0 2px var(--accent-soft)}
#startOverlay{position:fixed;inset:0;z-index:80;background:rgba(15,27,45,.55);display:grid;place-items:center;padding:16px}
#startOverlay .card{padding:26px;text-align:center;max-width:420px}
#startOverlay h3{margin:0 0 6px;font-weight:600}
#startOverlay p{margin:0 0 16px}
@keyframes endIn{from{opacity:0}to{opacity:1}}
@keyframes endUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.end{position:absolute;inset:0;z-index:1000;background:rgba(246,248,251,.95);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;animation:endIn 1.2s ease both}
.end>*{animation:endUp .9s .55s ease both}
.end-ico{width:52px;height:52px;border-radius:var(--r,10px);display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);margin-bottom:10px}
.end-ico svg{width:26px;height:26px}
.end-ico img{width:28px;height:28px;object-fit:contain}
.end h3{font-size:26px;font-weight:600;margin:0 0 6px}
.end p{margin:0 0 12px;color:var(--ink-2);max-width:460px}
.end-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@media (prefers-reduced-motion:reduce){.end,.end>*{animation:none}}

@media (max-width:760px){
  .hero h1{font-size:30px}
  #player{padding:0;place-items:stretch}
  .pl{max-height:none;height:100%;border-radius:0}
  #stage{aspect-ratio:auto;flex:1;min-height:0}
  #cap{font-size:14.5px;min-height:70px;padding:10px 14px}
  .ctl{padding:8px 10px}
  .bk-search{max-width:none;flex-basis:100%}
  .bk-count{margin-left:0}
  .bk-grid{gap:10px}
  .bk-feat{display:grid;grid-template-columns:44px 1fr;align-items:start}
  .bk-fa{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}
}

/* ------------------------------------------------ a block's own page (/blocks/<id>/) */
.bd-page .wrap{max-width:1160px;padding-top:22px}
.bd-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--muted);margin:0 0 18px}
.bd-crumbs a{color:var(--accent);text-decoration:none;font-weight:500}
.bd-crumbs svg{width:12px;height:12px;transform:rotate(180deg);opacity:.6}
.bd-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start}   /* as the Help center's articles (kb-layout) */
.bd-toc{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.bd-toc b{font:600 11px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.bd-toc a{color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:var(--r,10px);border-left:2px solid transparent}
.bd-toc a:hover{background:#fff;color:var(--accent)}
.bd-toc .bd-back{margin-top:14px;display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:500}
.bd-toc .bd-back svg{width:14px;height:14px}
.bd-main{min-width:0;max-width:820px}
.bd-main section{margin-top:44px;scroll-margin-top:90px}
.bd-main h2{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.bd-main h3{font-size:16px;font-weight:600;margin:0}
.bd-head{display:flex;align-items:center;gap:16px;scroll-margin-top:90px}
.bd-ico{width:60px;height:60px;border-radius:var(--r,10px);display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);flex:none}
.bd-ico svg{width:30px;height:30px}
.bd-ico img{width:32px;height:32px;object-fit:contain}
.bd-ht{min-width:0}
.bd-kick{font:500 12px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}   /* the eyebrow of every page (site.css) */
.bd-head h1{font-size:38px;line-height:1.1;letter-spacing:-.02em;font-weight:600;margin:2px 0 8px}
.bd-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bd-price{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--accent);background:var(--accent-soft);border-radius:var(--r,10px);padding:4px 12px}
.bd-price svg{width:14px;height:14px}
.bd-sum{font-size:18px;line-height:1.55;color:var(--ink);margin:20px 0 8px}
.bd-ed{font-size:14px;color:var(--muted);margin:0 0 8px}
.bd-ed span,.bd-hint span{font-weight:500;color:var(--ink-2)}
.bd-warn{font-size:14px;background:var(--warn-bg);color:var(--ink);border-radius:var(--r,10px);padding:10px 14px}
.bd-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.bd-cta .btn{height:40px;padding:0 16px;font-size:14px}
.bd-lead{margin:0 0 16px;font-size:15px}
.bd-video{width:100%;display:flex;align-items:center;gap:18px;text-align:left;font:inherit;color:#fff;cursor:pointer;border:0;border-radius:var(--r,10px);padding:28px 26px;background:radial-gradient(600px 240px at 85% 0%,#3D63D9 0,transparent 70%),linear-gradient(135deg,#233F99,#16296B);box-shadow:var(--shadow-lg);transition:transform .2s}
.bd-video:hover{transform:translateY(-2px)}
.bd-vp{width:64px;height:64px;border-radius:50%;background:#fff;color:#233F99;display:grid;place-items:center;flex:none}
.bd-vp svg{width:28px;height:28px;margin-left:3px}
.bd-video b{display:block;font-size:20px;font-weight:600}
.bd-video small{display:block;font-size:14.5px;opacity:.85;margin-top:4px;line-height:1.45}
/* settings */
.bd-fields{display:flex;flex-direction:column;gap:12px}
.bd-f{background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);padding:16px 18px}
.bd-f p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.bd-fh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bd-kind{font:12px var(--sans,'Nunito Sans',sans-serif);color:var(--muted)}
.bd-when{display:flex;gap:7px;align-items:flex-start;color:var(--accent)!important;font-size:13.5px!important}
.bd-when svg{width:15px;height:15px;flex:none;margin-top:2px}
.bd-hint{color:var(--muted)!important}
.bd-def{font-size:13.5px!important;color:var(--muted)!important}
.bd-def code,.bd-main code{font:13px var(--mono);background:var(--surface-2);border-radius:var(--r,10px);padding:1px 6px;color:var(--ink)}
.bd-ch{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.bd-ch li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:6px 10px;border-radius:var(--r,10px);background:var(--surface-2);font-size:14px}
.bd-ch li.on{background:var(--accent-soft)}
.bd-ch em{font:normal 11px var(--sans,'Nunito Sans',sans-serif);color:var(--accent);background:#fff;border-radius:var(--r,10px);padding:1px 6px}
.bd-ch small{flex-basis:100%;color:var(--ink-2);font-size:13px;line-height:1.45}
.bd-sub{margin:26px 0 10px!important;font-size:18px!important}
/* what comes out */
.bd-og{margin-top:18px}
.bd-og h3{font-size:17px}
.bd-ot{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);overflow:hidden}
.bd-or{display:grid;grid-template-columns:minmax(150px,auto) 1fr minmax(120px,auto);gap:6px 16px;align-items:baseline;padding:10px 16px;border-top:1px solid var(--line-2);font-size:14px}
.bd-or:first-child{border-top:0}
.bd-chips{display:flex;flex-wrap:wrap;gap:4px}
.bd-chip{font:12.5px var(--mono)!important;color:var(--accent)!important;background:var(--accent-soft)!important;border-radius:var(--r,10px);padding:2px 7px!important;white-space:nowrap}
.bd-ow{color:var(--ink-2);line-height:1.45}
.bd-ox{font:13px var(--sans,'Nunito Sans',sans-serif);color:var(--muted);text-align:right;overflow-wrap:anywhere}
.bd-acts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.bd-acts li{background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);padding:10px 12px;font-size:14px}
.bd-acts b{font-weight:500}
.bd-acts small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.4}
/* how to use it */
.bd-recipes{display:flex;flex-direction:column;gap:16px}
.bd-r{background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);padding:16px 18px}
.bd-r>p{margin:4px 0 0;font-size:14px}
.bd-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 0;margin:14px 0 4px}
.bd-step{display:flex;align-items:center}
.bd-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bd-pills span{font-size:13.5px;border:1px solid var(--line);border-radius:var(--r,10px);padding:3px 11px;background:#fff;color:var(--ink-2)}
.bd-pills span.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.bd-col{display:flex;flex-direction:column;gap:6px}
.bd-arrow{color:var(--edge-strong);display:grid;place-items:center;width:22px;flex:none}
.bd-arrow svg{width:14px;height:14px;transform:rotate(180deg)}
.bd-node{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);padding:6px 10px 6px 7px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);max-width:220px}
a.bd-node:hover{border-color:var(--cc)}
.bd-node.me{border-color:var(--cc);box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 20%,transparent)}
.bd-ni{width:26px;height:26px;border-radius:var(--r,10px);display:grid;place-items:center;color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,transparent);flex:none}
.bd-ni svg{width:14px;height:14px}
.bd-ni img{width:16px;height:16px;object-fit:contain}
.bd-node b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.bd-node small{display:block;font-size:12px;color:var(--muted);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.bd-node em{font:normal 10px var(--sans,'Nunito Sans',sans-serif);color:var(--warn-ink,#8A5200);background:var(--warn-bg);border-radius:var(--r,10px);padding:1px 4px}
.bd-why{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);border-left:3px solid var(--accent-soft);padding-left:10px}
/* good to know, works well with, try it */
.bd-good{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.bd-with{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.bd-wc{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);padding:12px 14px;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.bd-wc:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.bd-wc .bk-ico{width:32px;height:32px;border-radius:var(--r,10px)}
.bd-wc b{display:block;font-size:14.5px;font-weight:600}
.bd-wc small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.bd-try{background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);padding:22px 24px;box-shadow:var(--shadow)}
.bd-try p{margin:0;color:var(--ink-2);font-size:15px}
.bd-missing{text-align:center;padding:60px 0}
.bd-missing h1{font-size:28px;font-weight:600}
@media (max-width:960px){.bd-wrap{grid-template-columns:1fr}.bd-toc{display:none}}
@media (max-width:640px){
  .bd-head{align-items:flex-start}
  .bd-ico{width:48px;height:48px;border-radius:var(--r,10px)}
  .bd-ico svg{width:24px;height:24px}
  .bd-head h1{font-size:28px}
  .bd-sum{font-size:16px}
  .bd-main section{margin-top:34px}
  .bd-main h2{font-size:21px}
  .bd-f{padding:14px}
  .bd-or{grid-template-columns:1fr;gap:3px;padding:10px 14px}
  .bd-ox{text-align:left}
  .bd-video{padding:20px 18px;gap:14px}
  .bd-vp{width:52px;height:52px}
  .bd-video b{font-size:17px}
  .bd-strip{flex-direction:column;align-items:stretch;gap:0}
  .bd-step{flex-direction:column;align-items:stretch}
  .bd-arrow{width:auto;height:20px}
  .bd-col{flex-direction:row;flex-wrap:wrap}
  .bd-node{max-width:none;flex:1 1 140px}
  .bd-node{min-width:0}
  .bd-node>span,.bd-node>div{min-width:0}
  .bd-node small{max-width:none;white-space:normal}
  .bd-arrow svg{transform:rotate(-90deg)}
  .bd-try{padding:18px}
}
/* use cases: an industry tag, a story, before and after, example figures */
.bd-ind{display:inline-block;font:600 11px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:var(--r,10px);padding:2px 8px;margin-bottom:6px}
.bd-story{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--ink)}
.bd-ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.bd-ba>div{background:var(--surface-2);border-radius:var(--r,10px);padding:10px 12px}
.bd-ba>div.after{background:var(--ok-bg)}
.bd-ba small{font:600 11px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bd-ba .after small{color:var(--ok-ink)}
.bd-ba p{margin:3px 0 0;font-size:14px;line-height:1.5}
.bd-figs{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding-bottom:18px}
.bd-figs>div{flex:1 1 140px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r,10px);padding:8px 12px}
.bd-figs b{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em}
.bd-figs span{font-size:13px;color:var(--ink-2)}
.bd-figs em{position:absolute;left:0;bottom:0;font:normal 10.5px var(--sans,'Nunito Sans',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){.bd-ba{grid-template-columns:1fr}}

/* the plain list of every block page under the gallery (dev/blocks_pages.mjs) */
.bk-all{margin:28px 0 8px;background:#fff;border:1px solid var(--line);border-radius:var(--r,10px);padding:0 18px}
.bk-all summary{cursor:pointer;padding:14px 0;font-weight:500}
.bk-all h3{font-size:14px;font-weight:600;margin:10px 0 4px}
.bk-all p{margin:0 0 10px;font-size:14px;line-height:1.7}
.bk-all a{color:var(--accent)}
/* a block's film inside the editor (UX upgrade 5, blocks/film.html): the player fills its small window, which brings its
   own frame; the end card keeps Replay and Close (its links would leave the editor) */
.bf-embed{background:transparent;overflow:hidden}
.bf-embed #player{position:fixed;inset:0;padding:0;background:transparent;backdrop-filter:none;place-items:stretch}
.bf-embed .pl{width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none}
.bf-embed #stage{flex:1;min-height:0;aspect-ratio:auto}
.bf-embed .end p,.bf-embed .end .end-cta:first-of-type{display:none}
.bf-embed #startOverlay{position:fixed;inset:0;background:var(--paper,#F6F8FC)}