/* BrightCarbon: default pink theme. Values follow the Figma semantic variables. */
:root{
  --bc-surface-default:#000;
  --bc-surface-highlight:#51154b;
  --bc-surface-alternative:#ffdcf7;
  --bc-neutral-500:#6a6a6a;
  --bc-form-surface:#222;
  --bc-form-border:#6a6a6a;
  --bc-form-text:#a3a3a3;
  --bc-form-complete:#eaeaea;
  --bc-radius:24px;
  --bc-font:Walsheim,Arial,sans-serif;
  --bc-heading-default:#c6c6c6;
  --bc-heading-emphasis:#fff;
  --bc-heading-hover:#fff;
  --bc-heading-emphasis-hover:#e22baf;
  --bc-body-default:#c6c6c6;
  --bc-body-bold:#fff;
  --bc-accent:#ec66c7;
  --bc-border-default:#a3a3a3;
  --bc-border-hover:#e22baf;
  --bc-action-primary:#fff;
  --bc-action-primary-hover:#ec66c7;
  --bc-action-primary-text:#000;
  --bc-action-secondary:#fff;
  --pink:var(--bc-accent);
  --muted:var(--bc-body-default);
  --border:var(--bc-border-default);
}
body,body.countdown-study{background:var(--bc-surface-default);color:var(--bc-body-default)}
.intro{align-items:start;column-gap:80px;row-gap:24px}
.intro>.eyebrow{grid-column:1/-1;margin:0}
.intro-copy{padding-bottom:0}
.intro-copy p{font-size:17px;line-height:1.35;letter-spacing:-.01em}
.intro-copy p:first-child{font-size:20px;line-height:1.45;letter-spacing:-.02em}
.intro h1,.section-heading h2,.study-card h3,.study-intro h1,.handoff h2,.handoff h3{color:var(--bc-heading-default)}
.intro h1 em,.study-card h3 em,.study-intro h1 em,.handoff h2 em{font-style:normal;color:var(--bc-heading-emphasis)}
a.study-card:hover h3,a.study-card:focus-visible h3{color:var(--bc-heading-hover)}
a.study-card:hover h3 em,a.study-card:focus-visible h3 em{color:var(--bc-heading-emphasis-hover)}
.intro-copy p,.intro-copy p:first-child,.study-card p,.study-head .study-brand>span,.handoff p,.handoff li,.handoff code,.copy-status,.motion-caption,.countdown-controls p,.study-intro>p:last-child,.transport output,.transport label,.status-line,.library-footer,.section-heading>span{color:var(--bc-body-default)}
.handoff strong{color:var(--bc-body-bold)}
.eyebrow,.handoff .eyebrow{color:var(--bc-accent)}
.library-head,.library-footer,.card-action,.handoff,.handoff .code-details,.code-details textarea,.mini-clock,.mini-clock>span+span{border-color:var(--bc-border-default)}
a.study-card:hover,a.study-card:focus-visible{background:var(--bc-surface-default);border-color:var(--bc-border-hover)}
.card-action,a.study-card:hover .card-action,a.study-card:focus-visible .card-action{color:var(--bc-action-secondary)}
a.study-card:hover .card-action>span,a.study-card:focus-visible .card-action>span{color:var(--bc-accent)}
a.study-card .card-action{width:auto;height:43px;min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:16px 24px;border:0;border-radius:200px;corner-shape:round;background:var(--bc-action-primary);color:var(--bc-action-primary-text);font-size:16px;font-weight:500;line-height:1;letter-spacing:.02em;transition:background .15s ease-out}
a.study-card .card-action>span{font-size:20px;color:inherit}
a.study-card:hover .card-action,a.study-card:focus-visible .card-action{background:var(--bc-action-primary-hover);color:var(--bc-action-primary-text)}
a.study-card:hover .card-action>span,a.study-card:focus-visible .card-action>span{color:inherit}
a.study-card:hover .mini-clock{border-color:var(--bc-border-hover)}
.mini-clock small{color:var(--bc-body-default)}
.mini-clock,.mini-soon{color:var(--bc-heading-emphasis)}
.coming-soon,.coming-soon:hover{border:1px solid var(--bc-neutral-500);background:transparent;cursor:default;transition:none}
.coming-soon h3,.coming-soon:hover h3,.coming-soon p,.coming-soon .card-action,.coming-soon:hover .card-action,.coming-preview>span{color:var(--bc-body-default)}

/* Shared study controls: Figma primary pills and 2px secondary outlines. */
.study-head .back-link,.study-head button,.review-controls .transport button,.review-controls .chapters button,.countdown-transport button,.copy-button{
  display:inline-flex;align-items:center;justify-content:center;
  height:47px;min-height:47px;padding:16px 24px;border:2px solid var(--bc-action-secondary);
  border-radius:200px;corner-shape:round;background:transparent;color:var(--bc-action-secondary);
  font-family:Walsheim,Arial,sans-serif;font-size:16px;font-weight:500;line-height:1;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:background .15s ease-out,border-color .15s ease-out;
}
.study-head .back-link:hover,.study-head button:hover,.review-controls .transport button:hover,.review-controls .chapters button:hover,.review-controls .chapters button.active,.countdown-transport button:hover{
  background:transparent;border-color:var(--bc-border-hover);color:var(--bc-action-secondary);
}
.review-controls .transport #play,.countdown-transport .play-button,.copy-button{
  height:43px;min-height:43px;border:0;background:var(--bc-action-primary);color:var(--bc-action-primary-text);
}
.review-controls .transport #play:hover,.countdown-transport .play-button:hover,.copy-button:hover{
  border-color:transparent;background:var(--bc-action-primary-hover);color:var(--bc-action-primary-text);
}
.copy-button:disabled{cursor:wait}
.review-controls .transport select{background:var(--bc-surface-default);color:var(--bc-action-secondary);border:1px solid var(--bc-border-default);border-radius:200px;min-height:44px;padding:9px 14px;font-family:inherit}
.review-controls input[type=range]{accent-color:var(--bc-accent)}
.review-controls .chapters{gap:10px;flex-wrap:wrap;margin-top:8px}
.review-controls .chapters button{font-size:13px;min-height:40px;padding:10px 14px}
.code-details textarea{background:var(--bc-surface-default);color:var(--bc-body-default)}
.code-details summary,.handoff a{color:var(--bc-action-secondary)}
.handoff a:hover{color:var(--bc-accent)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,.code-details summary:focus-visible{outline-color:var(--bc-accent)}
.study-head .back-link:focus-visible,.countdown-study button:focus-visible{outline-color:var(--bc-accent)}

/* Keep the animation scenes' own theme and component geometry. */
#stage{color:#fff}
#cta .secondary:hover{border-color:var(--bc-border-hover)}
.hero-actions button:hover,.call:hover{background:var(--bc-action-primary-hover);border-color:transparent;color:#000}
.hero-actions button+button{border-width:2px}
.hero-actions button+button:hover{background:transparent;border-color:var(--bc-border-hover);color:#fff}
@media(max-width:700px){
  .review-controls .transport{flex-wrap:wrap}
  .review-controls .chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(prefers-reduced-motion:reduce){.study-head .back-link,.study-head button,.review-controls button,.countdown-transport button,.copy-button{transition:none}}


/* Typography: named BC styles; desktop/mobile pairs use the same hierarchy. */
@font-face{font-family:Walsheim;src:url('assets/light.ttf');font-weight:300;font-display:swap}
:root{
  --bc-display-size:80px; /* Desktop/Display/D1 */
  --bc-h2-size:56px; /* Desktop/Heading/H2 */
  --bc-h5-size:32px; /* Desktop/Heading/H5 */
  --bc-t1-size:24px; /* Desktop/Title/T1 */
  --bc-t2-size:20px; /* Desktop/Title/T2 */
}
body{font:400 17px/1.35 var(--bc-font);letter-spacing:-.01em}
.intro h1{font:500 var(--bc-display-size)/1.05 var(--bc-font);letter-spacing:-.02em}
.study-intro h1{font:500 var(--bc-h2-size)/1.05 var(--bc-font);letter-spacing:-.01em}
.study-card h3,.handoff h2{font:500 var(--bc-h5-size)/1.15 var(--bc-font);letter-spacing:-.01em}
.section-heading h2{font:500 var(--bc-t1-size)/1.3 var(--bc-font);letter-spacing:.01em}
.handoff h3,.mini-soon{font:500 var(--bc-t2-size)/1.3 var(--bc-font);letter-spacing:.01em}
.intro .eyebrow,.study-intro .eyebrow,.handoff .eyebrow{font:500 16px/1 var(--bc-font);letter-spacing:.03em;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.intro-copy p:first-child,.study-card p,.study-intro>p:last-child{font:400 20px/1.45 var(--bc-font);letter-spacing:-.02em}
.intro-copy p,.handoff p,.handoff li,.handoff .copy-hint{font:400 17px/1.35 var(--bc-font);letter-spacing:-.01em}
.handoff strong{font-weight:700}
.study-head .study-brand>span,.section-heading>span,.library-footer,.motion-caption,.countdown-controls p,.transport output,.transport label,.status-line,.handoff .copy-status{font:400 15px/1.35 var(--bc-font);letter-spacing:0}
.mini-clock>span{font:500 var(--bc-t1-size)/1.3 var(--bc-font);letter-spacing:.01em}
.mini-clock small{font:400 12px/1.3 var(--bc-font);letter-spacing:0}
.coming-soon .card-action,.coming-soon .card-action>span{font:400 15px/1.35 var(--bc-font);letter-spacing:0}
.coming-preview>span{font:500 var(--bc-h2-size)/1.05 var(--bc-font);letter-spacing:-.01em}
/* The implementation viewer is a form input; normal prose uses body styles. */
.handoff code{font:inherit;color:var(--bc-body-default)}
.code-details summary,.handoff a{font:500 17px/1.1 var(--bc-font);letter-spacing:.02em;text-decoration:none;transition:text-decoration-color .3s ease-out}
.code-details summary:hover,.handoff a:hover{color:var(--bc-action-secondary);text-decoration:underline;text-underline-offset:4px}
.code-details textarea{border-radius:8px;background:var(--bc-form-surface);border-color:var(--bc-form-border);color:var(--bc-form-complete);font:500 16px/1.1 var(--bc-font);letter-spacing:.02em;padding:16px}
.code-details textarea:hover{border-color:var(--bc-border-default)}
.code-details textarea:focus-visible{border-color:var(--bc-accent);outline:2px solid var(--bc-accent);outline-offset:4px}
/* Control text and geometry, including higher-specificity legacy selectors. */
.study-head .back-link,.study-head .review-actions button,.review-controls .transport button,.countdown-transport button,.countdown-study .copy-button,.copy-button,a.study-card .card-action{
  font:500 16px/1 var(--bc-font);letter-spacing:.02em;padding:16px 24px;
  text-box-trim:trim-both;text-box-edge:cap alphabetic;white-space:nowrap;
}
.study-head .review-actions button{height:47px;min-height:47px;border:2px solid var(--bc-action-secondary);border-radius:200px}
.study-head .review-actions button:hover{border-color:var(--bc-border-hover)}
.review-controls .chapters button{font:500 12px/1 var(--bc-font);letter-spacing:.03em;height:36px;min-height:36px;padding:12px 20px;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.review-controls .transport select{appearance:none;background:var(--bc-form-surface) url('assets/chevron-down.svg') right 12px center/24px 24px no-repeat;border:1px solid var(--bc-form-border);border-radius:8px;color:var(--bc-form-complete);height:45px;min-height:45px;padding:0 44px 0 16px;font:500 16px/1.1 var(--bc-font);letter-spacing:.02em;transition:border-color .15s ease-out}
.review-controls .transport select:hover{border-color:var(--bc-border-default)}
.review-controls .transport select:focus-visible{border-color:var(--bc-accent)}
.review-controls .transport{flex-wrap:wrap}
.mini-button{height:43px;padding:16px 24px;border-radius:200px;font:500 16px/1 var(--bc-font);letter-spacing:.02em;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.study-card,.handoff{border-radius:var(--bc-radius);corner-shape:squircle}
.mini-clock,.mini-soon{border-radius:var(--bc-radius);corner-shape:squircle}
#stage,.countdown-stage{border-radius:8px;box-shadow:none}
/* Actual component demos keep the correct theme within the default-themed shell. */
#homepage h1{font:500 80px/1.05 var(--bc-font);letter-spacing:-.02em;color:#fff}
#homepage h1 em{color:var(--bc-accent)}
#homepage .eyebrow,#cta .pre-title{font:500 20px/1 var(--bc-font);letter-spacing:.02em}
#homepage .description{font:400 20px/1.45 var(--bc-font);letter-spacing:-.02em;color:#fff}
#cta h1{font:500 var(--bc-h2-size)/1.05 var(--bc-font);letter-spacing:-.01em}
#cta .body-copy{font:500 var(--bc-t1-size)/1.3 var(--bc-font);letter-spacing:.01em}
#homepage .hero-actions button,#homepage .call{height:43px;min-height:43px;padding:16px 24px;border:0;border-radius:200px;font:500 16px/1 var(--bc-font);letter-spacing:.02em;text-box-trim:trim-both;text-box-edge:cap alphabetic;background:#fff;color:#000;transition:background .15s ease-out,border-color .15s ease-out}
#homepage .hero-actions button+button{height:47px;min-height:47px;border:2px solid #fff;background:transparent;color:#fff}
#homepage .hero-actions button:hover,#homepage .call:hover{background:var(--bc-action-primary-hover)}
#homepage .hero-actions button+button:hover{background:transparent;border-color:var(--bc-border-hover)}
#homepage .nav-links button{font:500 16px/1 var(--bc-font);letter-spacing:.02em;transition:color .15s ease-out}
#homepage .nav-links button:hover{background:transparent;color:var(--bc-accent)}
#skip{font:500 12px/1 var(--bc-font);letter-spacing:.03em;height:36px;padding:12px 20px;border:2px solid #fff;border-radius:200px;background:transparent;text-box-trim:trim-both;text-box-edge:cap alphabetic}
#skip:hover{border-color:var(--bc-border-hover)}
#toast{background:var(--bc-surface-highlight);border:1px solid var(--bc-border-hover);font:400 15px/1.35 var(--bc-font);letter-spacing:0;border-radius:8px}
#illustration{border:1px solid var(--bc-surface-alternative);border-radius:24px;corner-shape:squircle;background:transparent;color:var(--bc-surface-alternative);font:500 24px/1.3 var(--bc-font);letter-spacing:.01em}
#illustration:before,#illustration:after,.tile:after{display:none}
#illustration small{font:400 15px/1.35 var(--bc-font);letter-spacing:0;opacity:1}
.tile{border:0;border-radius:16px;corner-shape:squircle}
.word>span{display:block;font:500 80px/1.05 var(--bc-font);letter-spacing:-.02em;transform-origin:top left}
@media(max-width:800px){:root{--bc-display-size:54px;--bc-h2-size:32px;--bc-h5-size:24px;--bc-t1-size:20px;--bc-t2-size:18px}}
@media(max-width:700px){
  .library-shell{padding-left:15px;padding-right:15px}
  .study-head{padding-left:15px;padding-right:15px}
  .study-card,.handoff{padding:24px}
  .study-head .review-actions{gap:8px}
  .review-controls .transport .speed-label{font-size:15px}
  #cta .pre-title{font-size:16px;letter-spacing:.03em}
  #cta .body-copy{font:400 20px/1.45 var(--bc-font);letter-spacing:-.02em}
}
@media(max-width:360px){:root{--bc-display-size:48px}}
@media(prefers-reduced-motion:reduce){.study-card,.mini-button,.review-controls .transport select,#homepage button,.code-details summary,.handoff a{transition:none}}

/* Provisional study: retain navigation while reducing visual prominence. */
.study-card--tbc{position:relative;isolation:isolate;overflow:hidden;border-color:var(--bc-neutral-500)}
.study-card--tbc>.card-preview,.study-card--tbc>h3,.study-card--tbc>p,.study-card--tbc>.card-action{opacity:.65}
.study-card--tbc>.tbc-watermark{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) rotate(-25deg) scale(1.7);font:500 80px/1.05 var(--bc-font);letter-spacing:-.02em;color:var(--bc-heading-default);opacity:.3;pointer-events:none;user-select:none}
@media(max-width:560px){.study-card--tbc>.tbc-watermark{transform:translate(-50%,-50%) rotate(-25deg) scale(1.4)}}