.single-tb_block .tb-site-header{background:rgba(255,253,248,.94);color:var(--tb-ink);border-bottom:1px solid rgba(16,19,26,.07);backdrop-filter:blur(18px)}
.single-tb_block .tb-site-footer{margin-top:0}
.tbb-page{--tbb-bg:#f6f2e9;--tbb-paper:#fffdf8;--tbb-ink:#111318;--tbb-muted:#666b73;--tbb-line:rgba(17,19,24,.12);--tbb-blue:#4c8df6;--tbb-coral:#ef684f;--tbb-yellow:#f1c84c;--tbb-dark:#111318;--tbb-shell:1400px;--tbb-side:100px;color:var(--tbb-ink);background:var(--tbb-paper)}
.tbb-shell{width:min(var(--tbb-shell),calc(100% - (var(--tbb-side)*2)));margin-inline:auto}.tbb-eyebrow,.tbb-kicker{margin:0 0 22px;font-size:12px;font-weight:800;letter-spacing:.14em}.tbb-kicker--dark{color:#959ca6}.tbb-page h1,.tbb-page h2{letter-spacing:-.055em;line-height:.98}.tbb-page h2{margin:0;font-size:clamp(46px,4vw,72px)}
.tbb-hero{min-height:838px;background:var(--tbb-bg);display:flex;align-items:center;overflow:hidden;padding-top:78px}.tbb-hero__grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center;padding-block:82px}.tbb-hero h1{margin:0;font-size:clamp(68px,5.4vw,94px)}.tbb-hero__lead{max-width:610px;margin:30px 0 0;color:#41464e;font-size:18px;line-height:1.9}.tbb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.tbb-tags span{padding:8px 12px;border:1px solid var(--tbb-line);border-radius:999px;background:rgba(255,255,255,.45);font-size:11px;font-weight:700}.tbb-hero__meta{display:flex;gap:42px;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--tbb-line)}.tbb-hero__meta dt,.tbb-specs dt{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--tbb-muted);font-weight:800}.tbb-hero__meta dd,.tbb-specs dd{margin:6px 0 0;font-size:14px;font-weight:700}.tbb-hero__visual{min-height:560px;position:relative;display:grid;place-items:center}.tbb-hero__visual img{width:100%;height:560px;object-fit:cover;border-radius:24px}.tbb-pixel-title{position:relative;z-index:2;font-size:clamp(76px,6.2vw,110px);font-weight:900;letter-spacing:-.08em;line-height:.79;transform:rotate(-2deg)}.tbb-pixel-title span{display:block}.tbb-pixel-title span:last-child{transform:translateX(54px)}.tbb-particles,.tbb-workings__trail{position:absolute;inset:0;background:radial-gradient(circle at 22% 36%,var(--tbb-coral) 0 4px,transparent 5px),radial-gradient(circle at 32% 63%,var(--tbb-blue) 0 6px,transparent 7px),radial-gradient(circle at 68% 26%,var(--tbb-yellow) 0 5px,transparent 6px),radial-gradient(circle at 77% 66%,#30343a 0 7px,transparent 8px),radial-gradient(circle at 55% 49%,var(--tbb-coral) 0 8px,transparent 9px);background-size:110px 110px,150px 150px,130px 130px,170px 170px,190px 190px;opacity:.82;transform:rotate(10deg)}
.tbb-section{padding:128px 0}.tbb-section__intro p,.tbb-section__head>p:not(.tbb-kicker),.tbb-prose{color:var(--tbb-muted);font-size:17px;line-height:1.9}.tbb-section__intro p{max-width:560px}.tbb-preview{background:#fff}.tbb-preview__grid{display:grid;grid-template-columns:4fr 8fr;gap:80px;align-items:center}.tbb-preview__media video,.tbb-preview__media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:22px;box-shadow:0 24px 70px rgba(17,19,24,.12);background:#111}
.tbb-demo{background:var(--tbb-paper);padding-top:142px;padding-bottom:142px}.tbb-section__head{margin-bottom:56px}.tbb-section__head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}.tbb-demo__actions{display:flex;gap:10px}.tbb-demo__actions button,.tbb-copy{border:1px solid var(--tbb-line);background:transparent;border-radius:999px;padding:12px 18px;cursor:pointer}.tbb-demo__frame-wrap{overflow:hidden;border-radius:22px;background:var(--tbb-bg);box-shadow:0 28px 80px rgba(17,19,24,.09)}.tbb-demo__frame{display:block;width:100%;height:700px;border:0;background:var(--tbb-bg)}
.tbb-howto{padding:95px 0;background:#f1f1ef}.tbb-howto__grid{display:grid;grid-template-columns:2fr 7fr;gap:70px;align-items:center}.tbb-howto__number{font-size:170px;line-height:1;font-weight:900;letter-spacing:-.08em;color:rgba(17,19,24,.07)}.tbb-howto h2{font-size:clamp(56px,4.7vw,80px);margin:0}.tbb-howto p:not(.tbb-kicker){max-width:780px;color:var(--tbb-muted);font-size:17px;line-height:1.85}
.tbb-about{background:#f1f1ef;padding-top:78px}.tbb-about__grid{display:grid;grid-template-columns:7fr 5fr;gap:110px}.tbb-prose p{margin:0 0 20px;max-width:760px}.tbb-specs{margin:0}.tbb-specs div{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--tbb-line)}.tbb-specs div:last-child{border-bottom:1px solid var(--tbb-line)}
.tbb-workings{background:#f1f1ef;padding-top:90px;padding-bottom:145px}.tbb-workings__grid{display:grid;grid-template-columns:8fr 4fr;gap:88px}.tbb-workings__diagram{min-height:560px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(17,19,24,.08)}.tbb-workings__letter{position:relative;z-index:2;font-size:280px;font-weight:900;line-height:1}.tbb-workings__cursor{position:absolute;right:20%;bottom:20%;z-index:3;font-size:34px}.tbb-steps{list-style:none;margin:0;padding:0}.tbb-steps li{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--tbb-line)}.tbb-steps li:last-child{border-bottom:1px solid var(--tbb-line)}.tbb-steps span{font-size:12px;color:var(--tbb-blue);font-weight:900}.tbb-steps h3{margin:0 0 6px;font-size:18px}.tbb-steps p{margin:0;color:var(--tbb-muted);font-size:14px;line-height:1.75}
.tbb-code{padding:132px 0 145px;background:var(--tbb-dark);color:#f6f7f8}.tbb-code__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}.tbb-code__head h2{font-size:clamp(52px,4.4vw,76px)}.tbb-code__head p:not(.tbb-kicker){max-width:760px;color:#aeb4bc;line-height:1.85}.tbb-copy{border-color:rgba(255,255,255,.22);color:#fff}.tbb-code__viewer{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#0c0e12}.tbb-code__tabs{display:flex;gap:2px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:#14171c}.tbb-code__tabs button{border:0;background:transparent;color:#9ea5ae;padding:11px 15px;border-radius:8px;cursor:pointer}.tbb-code__tabs button.is-active{background:#232832;color:#fff}.tbb-code__pre{display:none;height:680px;margin:0;overflow:auto;padding:28px;color:#c7d1df;font:13px/1.75 Consolas,Monaco,monospace;white-space:pre;tab-size:2}.tbb-code__pre.is-active{display:block}.tbb-code__locked{padding:42px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#171a20}.tbb-code__locked p{color:#aeb4bc}
.tbb-usecase{background:#fff}.tbb-usecase__layout{display:grid;grid-template-columns:2fr 1fr;gap:28px}.tbb-usecase__item--large{grid-row:span 2}.tbb-usecase__visual{min-height:270px;border-radius:18px;overflow:hidden;background:#ecebe7;display:grid;place-items:center;font-size:26px;font-weight:900}.tbb-usecase__item--large .tbb-usecase__visual{min-height:610px}.tbb-usecase__visual img{width:100%;height:100%;object-fit:cover}.tbb-usecase__body h3{margin:14px 0 8px;font-size:18px}.tbb-usecase__body p{margin:0;color:var(--tbb-muted);line-height:1.75;font-size:14px}
.tbb-notes{padding-top:110px;padding-bottom:115px}.tbb-notes__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--tbb-line);border-bottom:1px solid var(--tbb-line)}.tbb-notes__grid>div{min-height:220px;padding:28px 30px}.tbb-notes__grid>div+div{border-left:1px solid var(--tbb-line)}.tbb-notes h3{margin:0 0 15px;font-size:16px}.tbb-notes p{margin:0;color:var(--tbb-muted);font-size:14px;line-height:1.8}
.tbb-related{padding:118px 0 120px;background:#111318;color:#fff}.tbb-related__head{margin-bottom:42px}.tbb-related__cards,.tb-block-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tb-block-card__link{display:block;height:100%;overflow:hidden;border:1px solid var(--tb-line);border-radius:14px;background:#fff}.tbb-related .tb-block-card__link{border-color:rgba(255,255,255,.12);background:#171a20;color:#fff}.tb-block-card__visual{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0f1218}.tb-block-card__visual img,.tb-block-card__visual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.tb-block-card__visual video{opacity:0;transition:.2s}.tb-block-card__visual.is-playing video{opacity:1}.tb-block-card__placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:72px;font-weight:900;color:#87909d;background:linear-gradient(135deg,#111722,#1a2230)}.tb-block-card__body{padding:14px}.tb-block-card__body h3{margin:5px 0 12px;font-size:16px}.tbb-related .tb-tags span{background:#252a32;color:#c7ccd3;border-color:transparent}
.single-tb_block .tb-site-footer{background:#111318;border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:1199px){.tbb-page{--tbb-side:32px}.tbb-hero{min-height:auto}.tbb-hero__grid{grid-template-columns:1fr 1fr;gap:42px;padding-block:72px}.tbb-hero__visual{min-height:460px}.tbb-preview__grid{grid-template-columns:1fr;gap:44px}.tbb-demo__frame{height:600px}.tbb-about__grid{grid-template-columns:1fr;gap:50px}.tbb-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}.tbb-specs div{grid-template-columns:1fr}.tbb-workings__grid{grid-template-columns:1fr;gap:42px}.tbb-steps{display:grid;grid-template-columns:1fr 1fr;column-gap:34px}.tbb-usecase__layout{grid-template-columns:1fr 1fr}.tbb-usecase__item--large{grid-column:1/-1;grid-row:auto}.tbb-usecase__item--large .tbb-usecase__visual{min-height:500px}.tbb-notes__grid{grid-template-columns:1fr 1fr}.tbb-notes__grid>div:nth-child(3){border-left:0;border-top:1px solid var(--tbb-line)}.tbb-notes__grid>div:nth-child(4){border-top:1px solid var(--tbb-line)}.tbb-related__cards,.tb-block-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.tbb-page{--tbb-side:20px}.tbb-hero{padding-top:60px}.tbb-hero__grid{grid-template-columns:1fr;padding-block:54px 68px}.tbb-hero h1{font-size:52px}.tbb-hero__lead{font-size:15px}.tbb-hero__meta{flex-direction:column;gap:18px}.tbb-hero__visual{min-height:340px}.tbb-pixel-title{font-size:58px}.tbb-pixel-title span:last-child{transform:translateX(24px)}.tbb-section{padding:82px 0}.tbb-page h2{font-size:42px}.tbb-demo{padding-top:86px;padding-bottom:86px}.tbb-section__head--split,.tbb-code__head{align-items:flex-start;flex-direction:column}.tbb-demo__actions{width:100%}.tbb-demo__actions button,.tbb-copy{flex:1}.tbb-demo__frame{height:420px}.tbb-howto{padding:72px 0}.tbb-howto__grid{grid-template-columns:1fr;gap:8px}.tbb-howto__number{font-size:98px}.tbb-howto h2{font-size:48px}.tbb-about{padding-top:70px}.tbb-specs{grid-template-columns:1fr}.tbb-workings{padding-top:78px;padding-bottom:96px}.tbb-workings__diagram{min-height:350px}.tbb-workings__letter{font-size:180px}.tbb-steps{grid-template-columns:1fr}.tbb-code{padding:88px 0 98px}.tbb-code__pre{height:440px;padding:20px;font-size:12px}.tbb-copy{width:100%}.tbb-usecase__layout{grid-template-columns:1fr}.tbb-usecase__item--large{grid-column:auto}.tbb-usecase__item--large .tbb-usecase__visual{min-height:380px}.tbb-notes__grid{grid-template-columns:1fr}.tbb-notes__grid>div+div{border-left:0;border-top:1px solid var(--tbb-line)}.tbb-related{overflow:hidden}.tbb-related__cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:calc(var(--tbb-side)*-1);padding-bottom:10px;scrollbar-width:none}.tbb-related__cards::-webkit-scrollbar{display:none}.tbb-related__cards .tb-block-card{flex:0 0 86%;scroll-snap-align:start}.tb-block-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   Block single visual polish — v0.3.1
   Refines spacing, reading rhythm and responsive balance without
   changing the established section order or visual direction.
------------------------------------------------------------- */

/* Shared reading rhythm */
.tbb-page h1,
.tbb-page h2,
.tbb-page h3,
.tbb-page p,
.tbb-page dl,
.tbb-page ol{word-break:normal;overflow-wrap:anywhere}

.tbb-eyebrow,
.tbb-kicker{margin-bottom:20px}

.tbb-section__head{margin-bottom:72px}
.tbb-section__head>p:not(.tbb-kicker){
  max-width:760px;
  margin:28px 0 0;
}
.tbb-section__intro h2 + p{margin:30px 0 0}
.tbb-section__intro p{line-height:2}

/* Hero: separate each information group more clearly */
.tbb-hero__grid{gap:96px}
.tbb-hero__lead{
  margin-top:38px;
  max-width:590px;
  line-height:2;
}
.tbb-tags{margin-top:34px;gap:10px}
.tbb-tags span{padding:9px 14px}
.tbb-hero__meta{
  gap:56px;
  margin-top:48px;
  padding-top:28px;
}
.tbb-hero__meta dd{margin-top:9px;line-height:1.6}

/* Preview / demo */
.tbb-preview__grid{gap:104px}
.tbb-demo{padding-top:154px;padding-bottom:158px}
.tbb-demo .tbb-section__head{margin-bottom:68px}
.tbb-demo__actions{gap:12px;padding-bottom:2px}
.tbb-demo__actions button{padding:13px 21px}

/* Interaction: keep it short, but not cramped */
.tbb-howto{padding:112px 0 118px}
.tbb-howto__grid{gap:86px}
.tbb-howto .tbb-kicker{margin-bottom:18px}
.tbb-howto h2{line-height:.98}
.tbb-howto h2 + p{margin-top:30px}
.tbb-howto p:not(.tbb-kicker){line-height:2}

/* About: reading block and specification block need distinct breathing room */
.tbb-about{padding-top:122px;padding-bottom:146px}
.tbb-about__grid{grid-template-columns:minmax(0,7fr) minmax(330px,5fr);gap:148px;align-items:start}
.tbb-about__copy h2{max-width:780px}
.tbb-about__copy h2 + .tbb-prose{margin-top:38px}
.tbb-prose{max-width:790px;line-height:2.05}
.tbb-prose p{margin:0 0 30px;max-width:790px}
.tbb-prose p:last-child{margin-bottom:0}
.tbb-specs div{
  grid-template-columns:170px 1fr;
  gap:30px;
  padding:30px 0;
}
.tbb-specs dt{padding-top:2px}
.tbb-specs dd{margin-top:0;line-height:1.75}

/* How it works: stronger separation between explanation groups */
.tbb-workings{padding-top:132px;padding-bottom:162px}
.tbb-workings .tbb-section__head{margin-bottom:76px}
.tbb-workings__grid{gap:112px;align-items:start}
.tbb-steps li{
  grid-template-columns:58px 1fr;
  gap:24px;
  padding:28px 0 30px;
}
.tbb-steps h3{margin:0 0 12px;font-size:19px;line-height:1.45}
.tbb-steps p{font-size:14px;line-height:1.95}

/* Code: create a clear transition from explanation to source */
.tbb-code{padding-top:154px;padding-bottom:166px}
.tbb-code__head{gap:64px;margin-bottom:64px}
.tbb-code__head h2{margin:0}
.tbb-code__head h2 + p{margin:28px 0 0}
.tbb-code__head p:not(.tbb-kicker){max-width:800px;line-height:2}
.tbb-code__tabs{padding:14px 18px}
.tbb-code__tabs button{padding:12px 18px}
.tbb-code__pre{padding:34px 36px;line-height:1.85}

/* Use cases: add room between heading, visuals and captions */
.tbb-usecase{padding-top:148px;padding-bottom:154px}
.tbb-usecase .tbb-section__head{margin-bottom:76px}
.tbb-usecase__layout{gap:36px}
.tbb-usecase__body{padding-top:4px}
.tbb-usecase__body h3{margin:20px 0 12px;font-size:19px;line-height:1.45}
.tbb-usecase__body p{font-size:14px;line-height:1.95}

/* Technical notes: improve column readability */
.tbb-notes{padding-top:132px;padding-bottom:142px}
.tbb-notes .tbb-section__head{margin-bottom:66px}
.tbb-notes__grid>div{min-height:245px;padding:36px 38px 40px}
.tbb-notes h3{margin-bottom:20px;font-size:17px;line-height:1.4}
.tbb-notes p{font-size:14px;line-height:1.95}

/* Related content */
.tbb-related{padding-top:132px;padding-bottom:132px}
.tbb-related__head{margin-bottom:56px}
.tbb-related__cards,.tb-block-grid{gap:26px}
.tbb-related .tb-block-card__body{padding:20px}
.tbb-related .tb-block-card__body h3{margin:8px 0 15px;font-size:17px}

@media(max-width:1199px){
  .tbb-section{padding:112px 0}
  .tbb-section__head{margin-bottom:58px}
  .tbb-hero__grid{gap:58px}
  .tbb-hero__lead{margin-top:30px}
  .tbb-hero__meta{margin-top:40px;gap:36px}
  .tbb-preview__grid{gap:56px}
  .tbb-demo{padding-top:122px;padding-bottom:126px}
  .tbb-demo .tbb-section__head{margin-bottom:56px}
  .tbb-howto{padding:96px 0 102px}
  .tbb-howto__grid{gap:54px}
  .tbb-about{padding-top:106px;padding-bottom:126px}
  .tbb-about__grid{gap:64px}
  .tbb-about__copy h2 + .tbb-prose{margin-top:32px}
  .tbb-prose p{margin-bottom:26px}
  .tbb-specs div{padding:26px 0;gap:14px}
  .tbb-workings{padding-top:112px;padding-bottom:132px}
  .tbb-workings .tbb-section__head{margin-bottom:60px}
  .tbb-workings__grid{gap:58px}
  .tbb-steps{row-gap:0}
  .tbb-steps li{padding:25px 0 27px}
  .tbb-code{padding-top:124px;padding-bottom:134px}
  .tbb-code__head{margin-bottom:54px}
  .tbb-usecase{padding-top:122px;padding-bottom:128px}
  .tbb-usecase .tbb-section__head{margin-bottom:62px}
  .tbb-notes{padding-top:112px;padding-bottom:120px}
  .tbb-notes .tbb-section__head{margin-bottom:54px}
  .tbb-notes__grid>div{min-height:220px;padding:32px 34px 36px}
  .tbb-related{padding-top:112px;padding-bottom:116px}
}

@media(max-width:767px){
  .tbb-section{padding:88px 0}
  .tbb-eyebrow,.tbb-kicker{margin-bottom:16px}
  .tbb-section__head{margin-bottom:44px}
  .tbb-section__head>p:not(.tbb-kicker){margin-top:20px;line-height:1.9}
  .tbb-section__intro h2 + p{margin-top:22px}
  .tbb-hero__grid{gap:44px}
  .tbb-hero__lead{margin-top:26px;line-height:1.9}
  .tbb-tags{margin-top:26px}
  .tbb-hero__meta{margin-top:34px;padding-top:24px;gap:22px}
  .tbb-demo{padding-top:92px;padding-bottom:96px}
  .tbb-demo .tbb-section__head{margin-bottom:46px}
  .tbb-demo__actions{margin-top:4px}
  .tbb-howto{padding:82px 0 88px}
  .tbb-howto__grid{gap:14px}
  .tbb-howto h2 + p{margin-top:24px}
  .tbb-howto p:not(.tbb-kicker){line-height:1.9}
  .tbb-about{padding-top:90px;padding-bottom:104px}
  .tbb-about__grid{gap:48px}
  .tbb-about__copy h2 + .tbb-prose{margin-top:28px}
  .tbb-prose{line-height:1.95}
  .tbb-prose p{margin-bottom:24px}
  .tbb-specs div{padding:24px 0;gap:8px}
  .tbb-specs dd{line-height:1.65}
  .tbb-workings{padding-top:94px;padding-bottom:108px}
  .tbb-workings .tbb-section__head{margin-bottom:48px}
  .tbb-workings__grid{gap:42px}
  .tbb-steps li{grid-template-columns:46px 1fr;gap:16px;padding:24px 0 26px}
  .tbb-steps h3{margin-bottom:10px;font-size:18px}
  .tbb-steps p{line-height:1.85}
  .tbb-code{padding-top:96px;padding-bottom:106px}
  .tbb-code__head{gap:28px;margin-bottom:46px}
  .tbb-code__head h2 + p{margin-top:22px}
  .tbb-code__pre{padding:24px 22px;line-height:1.75}
  .tbb-usecase{padding-top:94px;padding-bottom:104px}
  .tbb-usecase .tbb-section__head{margin-bottom:48px}
  .tbb-usecase__layout{gap:34px}
  .tbb-usecase__body h3{margin-top:18px}
  .tbb-notes{padding-top:94px;padding-bottom:104px}
  .tbb-notes .tbb-section__head{margin-bottom:46px}
  .tbb-notes__grid>div{min-height:auto;padding:30px 0 32px}
  .tbb-notes h3{margin-bottom:14px}
  .tbb-related{padding-top:94px;padding-bottom:104px}
  .tbb-related__head{margin-bottom:44px}
}

/* ------------------------------------------------------------
   Section integrity — v0.3.3
   Keeps MOTION PREVIEW and RELATED BLOCKS visible while their
   dynamic data is still incomplete. Real media/cards replace
   these temporary states automatically once registered.
------------------------------------------------------------- */
.tbb-preview__fallback{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:22px;
  background:#111318;
  box-shadow:0 24px 70px rgba(17,19,24,.12);
  color:#fff;
  display:grid;
  place-items:center;
}
.tbb-preview__fallback-word{
  position:relative;
  z-index:2;
  font-size:clamp(48px,5vw,86px);
  line-height:.78;
  letter-spacing:-.08em;
  font-weight:900;
  text-align:center;
}
.tbb-preview__fallback-word span{display:block}
.tbb-preview__fallback-particles{
  position:absolute;
  inset:-12%;
  opacity:.55;
  transform:rotate(-8deg);
  background:
    radial-gradient(circle at 18% 22%,#ef684f 0 4px,transparent 5px),
    radial-gradient(circle at 34% 72%,#4c8df6 0 6px,transparent 7px),
    radial-gradient(circle at 62% 24%,#f1c84c 0 4px,transparent 5px),
    radial-gradient(circle at 78% 68%,#67717e 0 6px,transparent 7px),
    radial-gradient(circle at 52% 48%,#ef684f 0 5px,transparent 6px);
  background-size:92px 92px,132px 132px,118px 118px,156px 156px,174px 174px;
}
.tbb-preview__fallback-note{
  position:absolute;
  z-index:3;
  left:24px;
  right:24px;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:18px;
  color:#aab1ba;
  font-size:11px;
  line-height:1.5;
}
.tbb-preview__fallback-note strong{
  color:#fff;
  font-size:10px;
  letter-spacing:.12em;
}

.tbb-related__head--split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}
.tbb-related__head--split>div>p:not(.tbb-kicker){
  margin:20px 0 0;
  color:#9ba2ac;
  line-height:1.8;
  font-size:14px;
}
.tbb-related__all{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.tbb-related__empty{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}
.tbb-related__placeholder{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:#171a20;
}
.tbb-related__placeholder-visual{
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 70% 34%,rgba(76,141,246,.7) 0 5px,transparent 6px),
    radial-gradient(circle at 28% 66%,rgba(239,104,79,.78) 0 6px,transparent 7px),
    linear-gradient(135deg,#111722,#1a2230);
  background-size:96px 96px,130px 130px,auto;
}
.tbb-related__placeholder-visual span{
  color:#89919c;
  font-size:58px;
  font-weight:900;
  letter-spacing:-.07em;
}
.tbb-related__placeholder-body{padding:20px}
.tbb-related__placeholder-body p{
  margin:0 0 7px;
  color:#747c87;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.tbb-related__placeholder-body h3{
  margin:0 0 10px;
  color:#fff;
  font-size:17px;
}
.tbb-related__placeholder-body span{
  color:#8d95a0;
  font-size:12px;
  line-height:1.7;
}

@media(max-width:1199px){
  .tbb-related__head--split{align-items:flex-start}
  .tbb-related__empty{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .tbb-preview__fallback-note{left:18px;right:18px;bottom:16px;align-items:flex-start;flex-direction:column;gap:5px}
  .tbb-related__head--split{flex-direction:column;gap:26px}
  .tbb-related__all{width:max-content}
  .tbb-related__empty{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-right:calc(var(--tbb-side)*-1);
    padding-bottom:10px;
    scrollbar-width:none;
  }
  .tbb-related__empty::-webkit-scrollbar{display:none}
  .tbb-related__placeholder{flex:0 0 86%;scroll-snap-align:start}
}


/* 0.3.4 generic Block fallbacks: no Block-specific words in the Theme. */
.tbb-fallback-title{
  position:relative;
  z-index:2;
  max-width:760px;
  font-size:clamp(66px,5.7vw,104px);
  font-weight:900;
  letter-spacing:-.07em;
  line-height:.86;
  text-align:center;
  text-wrap:balance;
  transform:rotate(-2deg);
}
.tbb-preview__fallback-title{
  position:relative;
  z-index:2;
  max-width:80%;
  font-size:clamp(48px,4.7vw,82px);
  font-weight:900;
  letter-spacing:-.065em;
  line-height:.9;
  text-align:center;
  text-wrap:balance;
}
@media(max-width:767px){
  .tbb-fallback-title{font-size:54px;max-width:92%}
  .tbb-preview__fallback-title{font-size:42px;max-width:88%}
}


/* ------------------------------------------------------------
   HOW TO INTERACT — v0.3.6
   A single interaction has no sequence number. Keep the section
   as a quiet typographic pause between Demo and About.
------------------------------------------------------------- */
.tbb-howto__grid{
  display:block;
  max-width:none;
  margin-inline:auto;
}
.tbb-howto__number{display:none}
.tbb-howto__content{
  max-width:900px;
}
.tbb-howto__content h2{
  max-width:820px;
}
.tbb-howto__content p:not(.tbb-kicker){
  max-width:820px;
}

@media(max-width:1199px){
  .tbb-howto__grid{max-width:none}
}
@media(max-width:767px){
  .tbb-howto__grid{max-width:none}
  .tbb-howto__content{max-width:none}
}

/* ------------------------------------------------------------
   LIVE DEMO + HOW TO INTERACT relationship — v0.3.7
   Treat HOW TO INTERACT as the explanation that belongs directly
   to the live demo, rather than as a separate visual chapter.
------------------------------------------------------------- */
.tbb-demo{
  padding-bottom:68px;
}
.tbb-howto{
  background:var(--tbb-paper);
  padding-top:0;
  padding-bottom:124px;
}
.tbb-howto__grid{
  border-top:1px solid var(--tbb-line);
  padding-top:58px;
}

@media(max-width:1199px){
  .tbb-demo{padding-bottom:58px}
  .tbb-howto{padding-top:0;padding-bottom:106px}
  .tbb-howto__grid{padding-top:50px}
}

@media(max-width:767px){
  .tbb-demo{padding-bottom:44px}
  .tbb-howto{padding-top:0;padding-bottom:90px}
  .tbb-howto__grid{padding-top:40px}
}