/* txtCaster product page: framed rails, split rows, product visuals on the blue field. */
main:has(.tc-hero){--tc-blue:#2456d6;--tc-blue-hi:#3a6cff;--tc-on-field:#eef3ff;--tc-on-field-2:rgb(238 243 255 / .74);--tc-ease:cubic-bezier(.2,.7,.2,1);--tc-pad:clamp(1.25rem,4.5vw,4rem)}
main:has(.tc-hero)::before,main:has(.tc-hero)::after{display:none}

/* Rails: two hairlines frame the content column through every section; sections close with full-width rules. */
.tc-hero,.tc-sec{border-block-end:1px solid var(--rule)}
.tc-rails{width:min(1280px,100%);margin-inline:auto;border-inline:1px solid var(--rule)}

/* Status bar: where the product sits and what state it is in, nothing more. */
.tc-subbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding-inline:var(--tc-pad);font-size:var(--t-xs);color:var(--muted)}
.tc-subbar::after,.tc-intro::after{content:'';position:absolute;inset-inline:-100vmax;inset-block-end:0;height:1px;background:var(--rule)}
.tc-crumbs,.tc-state{display:flex;align-items:center;gap:.6rem;margin:0}
.tc-crumbs a{color:inherit;text-decoration:none;transition:color .2s}
.tc-crumbs a:hover{color:var(--ink)}
.tc-crumbs bdi{color:var(--ink)}
.tc-status-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--tc-blue-hi);box-shadow:0 0 0 0 color-mix(in srgb,var(--tc-blue-hi) 60%,transparent);animation:tc-ping 2.4s var(--tc-ease) infinite}
@keyframes tc-ping{70%,100%{box-shadow:0 0 0 7px transparent}}

/* Intro: split by a rail. */
.tc-intro{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.tc-intro-main,.tc-intro-side{padding:clamp(3rem,7vw,6.5rem) var(--tc-pad)}
.tc-intro-main{display:flex;flex-direction:column;justify-content:center;gap:1.6rem}
.tc-intro-side{border-inline-start:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center;gap:1.4rem}

/* Kicker: product mark, name in mono caps, and a cursor that blinks like a paused playhead. */
.tc-kicker{display:inline-flex;align-items:center;gap:.6rem;margin:0;font:500 .8125rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tc-cursor{width:.5rem;height:.95rem;background:var(--tc-blue-hi);animation:tc-blink 1.1s steps(1) infinite}
@keyframes tc-blink{50%{opacity:0}}

/* Headline: words settle from faint to full ink in reading order, once. */
.tc-title{margin:0;font-size:clamp(2.6rem,1.3rem + 3.9vw,4.75rem);font-weight:500;line-height:1.02;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
[dir=rtl] .tc-title,[dir=rtl] .tc-h2{letter-spacing:0;line-height:1.25}
.tc-title span{animation:tc-read .7s var(--tc-ease) both}
.tc-title span:nth-child(2){animation-delay:.12s}.tc-title span:nth-child(3){animation-delay:.24s}.tc-title span:nth-child(4){animation-delay:.36s}.tc-title span:nth-child(5){animation-delay:.48s}
@keyframes tc-read{from{color:color-mix(in srgb,var(--ink) 22%,transparent)}}

.tc-platforms{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.tc-platforms li{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding-inline:.8rem;border:1px solid var(--rule);border-radius:10px;background:var(--surface);font-size:var(--t-xs);color:var(--text)}
.tc-platforms svg{transition:transform .35s var(--tc-ease)}
.tc-platforms li:hover svg{transform:translateY(-2px)}
.tc-lede{margin:0;max-width:36ch;font-size:var(--t-lg);line-height:1.55;color:var(--text)}
.tc-note,.tc-fine{margin:0;max-width:46ch;font-size:var(--t-xs);line-height:1.5;color:var(--muted)}

/* Actions: the play chip sends out a ring like a speaker; the arrow travels in reading direction. */
.tc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem}
.tc-btn{position:relative;display:inline-flex;align-items:center;gap:.7rem;height:3rem;padding-inline:1.3rem;border-radius:999px;background:var(--tc-blue);color:#fff;font-weight:500;text-decoration:none;transition:background-color .3s,transform .2s}
.tc-btn:has(.tc-btn-icon){padding-inline-start:.4rem}
.tc-btn:hover{background:var(--tc-blue-hi)}
.tc-btn:active{transform:scale(.97)}
.tc-btn-icon{position:relative;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#fff;color:var(--tc-blue)}
.tc-btn-icon::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid #fff;opacity:0}
.tc-btn:hover .tc-btn-icon::after{animation:tc-ring 1.2s var(--tc-ease) infinite}

@keyframes tc-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.tc-link{display:inline-flex;align-items:center;gap:.5rem;width:fit-content;padding-block:.4rem;color:var(--ink);font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .35s var(--tc-ease)}
[dir=rtl] .tc-link{background-position:100% 100%}
.tc-link:hover{background-size:100% 1px}
.tc-link-arrow{transition:transform .35s var(--tc-ease)}
.tc-link:hover .tc-link-arrow{transform:translateX(4px)}
[dir=rtl] .tc-link-arrow{transform:scaleX(-1)}
[dir=rtl] .tc-link:hover .tc-link-arrow{transform:scaleX(-1) translateX(4px)}
main:has(.tc-hero) :is(a,summary,button):focus-visible{outline:2px solid var(--tc-blue-hi);outline-offset:3px}

/* The blue field: one drifting surface reused behind every product visual. It stays dark in both themes. */
.tc-band,.tc-tile{position:relative;isolation:isolate;overflow:hidden;background:#030716;color:var(--tc-on-field)}
.tc-field{position:absolute;inset:-6%;z-index:-1;background:url('/brand/txtcaster-field.webp') center/cover no-repeat;animation:tc-drift 28s ease-in-out infinite alternate}
@media(max-width:767px){.tc-field{background-image:url('/brand/txtcaster-field-800.webp')}}
@keyframes tc-drift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
.tc-tile:nth-of-type(odd) .tc-field{animation-direction:alternate-reverse}

.tc-band{padding:clamp(2rem,5vw,4.5rem) clamp(1rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem)}
.tc-window{max-width:1100px;margin-inline:auto;border:1px solid rgb(255 255 255 / .16);border-radius:14px;overflow:hidden;background:rgb(6 10 26 / .7);box-shadow:0 40px 90px -40px #000c,0 0 0 6px rgb(255 255 255 / .04);animation:tc-rise 1s var(--tc-ease) .2s both}
@keyframes tc-rise{from{transform:translateY(28px);opacity:.4}}
.tc-window-bar{display:flex;align-items:center;justify-content:space-between;height:2.4rem;padding-inline:1rem;border-block-end:1px solid rgb(255 255 255 / .1);font-size:.8125rem;color:var(--tc-on-field-2)}
.tc-window-title{display:inline-flex;align-items:center;gap:.5rem}
.tc-window-dots{display:flex;gap:.45rem}
.tc-window-dots i{width:.6rem;height:.6rem;border-radius:50%;background:rgb(255 255 255 / .2)}
.tc-panel{margin:0}
.tc-panel picture,.tc-panel img,.tc-shot picture,.tc-shot img{display:block;width:100%;height:auto}
.tc-caption{margin:0;padding:.8rem 1.1rem;border-block-start:1px solid rgb(255 255 255 / .1);font-size:var(--t-sm);line-height:1.5;color:var(--tc-on-field-2)}
.tc-disclosure{margin:1rem auto 0;max-width:60ch;text-align:center;font-size:var(--t-xs);color:rgb(238 243 255 / .62)}

/* Section heads. The second half of a heading steps back in tone. */
.tc-sec-head{padding:clamp(3rem,6vw,5rem) var(--tc-pad) clamp(2rem,4vw,3rem);display:grid;gap:1rem}
.tc-sec-head-center{text-align:center;justify-items:center}
.tc-eyebrow{margin:0;font:500 .75rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.14em;color:var(--accent)}
[dir=rtl] .tc-eyebrow{font-family:inherit;font-size:.85rem;letter-spacing:0}
.tc-h2{margin:0;max-width:22ch;font-size:clamp(1.9rem,1.15rem + 2.3vw,3.1rem);font-weight:500;line-height:1.08;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.tc-h2 span{color:var(--muted)}
.tc-body{margin:0;max-width:42ch;font-size:var(--t-lg);line-height:1.6;color:var(--text)}
.tc-sec-lead{max-width:62ch}

/* How it works: four steps on one rail; the rule fills and each number lights in turn as the row enters. */
.tc-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-block-start:1px solid var(--rule)}
.tc-steps::before{content:'';position:absolute;inset-inline:0;inset-block-start:-1px;height:2px;background:var(--tc-blue-hi);transform-origin:0 50%;transition:transform 1.4s var(--tc-ease)}
[dir=rtl] .tc-steps::before{transform-origin:100% 50%}
.tc-steps li{display:grid;align-content:start;gap:1rem;padding:2rem var(--tc-pad) 2.6rem;color:var(--ink)}
.tc-steps li+li{border-inline-start:1px solid var(--rule)}
.tc-steps strong{font-weight:500;font-size:1.0625rem;line-height:1.35}
.tc-step-n{font:500 .75rem/1 'Geist Mono',ui-monospace,monospace;color:var(--tc-blue-hi);transition:color .4s}
.tc-steps li:nth-child(2) .tc-step-n{transition-delay:.3s}.tc-steps li:nth-child(3) .tc-step-n{transition-delay:.6s}.tc-steps li:nth-child(4) .tc-step-n{transition-delay:.9s}
.tc-js .tc-steps:not(.is-in)::before{transform:scaleX(0)}
.tc-js .tc-steps:not(.is-in) .tc-step-n{color:var(--muted)}
.tc-icon{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--text)}
.tc-icon-wave{color:var(--tc-blue-hi)}
.tc-fork{display:flex;gap:.35rem}
.tc-fork span{padding:.25rem .6rem;border:1px solid var(--rule);border-radius:999px;font-size:var(--t-xs);color:var(--text)}
.tc-fork span:last-child{background:var(--tc-blue);border-color:var(--tc-blue);color:#fff}

/* The reading machine: an isometric figure on the rail, driven by the step list below it. */
.tc-machine{position:relative;overflow:hidden;border-block-start:1px solid var(--rule);padding:clamp(1.5rem,4vw,3rem) var(--tc-pad);background:radial-gradient(60% 70% at 50% 55%,color-mix(in srgb,var(--tc-blue) 7%,transparent),transparent 70%)}
.tc-fig{width:min(860px,100%);margin-inline:auto}
/* Zoomed on the laptop, the frame cuts through the keyboard; a fade makes that cut deliberate. */
.tc-machine::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:26%;background:linear-gradient(to bottom,transparent,var(--bg) 92%);opacity:0;pointer-events:none;transition:opacity .6s var(--tc-ease)}
.tc-machine.is-zoomed::after{opacity:1}
.tc-machine-readout{z-index:1}
.tc-fig-svg{display:block;width:100%;height:auto}
.tc-machine-fig,.tc-machine-readout{position:absolute;margin:0;font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--muted)}
.tc-machine-fig{inset-block-start:1.25rem;inset-inline-start:var(--tc-pad)}
.tc-machine-readout{inset-block-end:1.25rem;inset-inline-end:var(--tc-pad);color:var(--text);font-variant-numeric:tabular-nums;min-height:1em}
.tc-machine-readout:not(:empty)::before{content:'';display:inline-block;width:6px;height:6px;margin-inline-end:.55rem;border-radius:50%;background:var(--tc-blue-hi);vertical-align:1px;animation:tc-blink 1.6s ease-in-out infinite}
@keyframes tc-blink{50%{opacity:.25}}
.tc-js .tc-steps li{position:relative;transition:background-color .4s var(--tc-ease)}
.tc-js .tc-steps li::after{content:'';position:absolute;inset-inline:0;inset-block-start:-1px;height:2px;background:var(--tc-blue-hi);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--tc-ease)}
.tc-js[dir=rtl] .tc-steps li::after{transform-origin:100% 50%}
.tc-steps li[aria-current=step]{background:color-mix(in srgb,var(--tc-blue) 6%,transparent)}
.tc-steps li[aria-current=step]::after{transform:none}
.tc-js .tc-steps::before{opacity:.25}
.tc-js .tc-steps li .tc-step-n{transition:color .4s,transform .5s var(--tc-ease)}
.tc-js .tc-steps li:not([aria-current=step]) .tc-step-n{color:var(--muted)}
.tc-steps li[aria-current=step] .tc-step-n{transform:translateY(-2px)}

/* Under the figure the steps are a compact progress rail: a numbered badge and one line each.
   The figure already shows the icons and the mode choice, so they step aside here. */
#how .tc-steps li{grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:center;gap:.85rem;padding:1.1rem var(--tc-pad);background:none}
#how .tc-steps .tc-icon,#how .tc-steps .tc-fork{display:none}
#how .tc-steps strong{font-size:.95rem;line-height:1.3;color:var(--muted);transition:color .4s}
#how .tc-step-n{display:grid;place-items:center;width:1.9rem;height:1.9rem;border:1px solid var(--rule);border-radius:50%;font-size:.7rem;color:var(--muted);transition:background-color .4s,border-color .4s,color .4s,transform .5s var(--tc-ease)}
#how .tc-steps li[aria-current=step] .tc-step-n{background:var(--tc-blue);border-color:var(--tc-blue);color:#fff;transform:none}
#how .tc-steps li[aria-current=step] strong{color:var(--ink)}
#how .tc-steps:not(.is-in) li strong,#how .tc-steps li:not([aria-current]) strong{color:var(--ink)}

/* Accordion bodies open and close by height rather than snapping. */
main:has(.tc-hero){interpolate-size:allow-keywords}
.tc-acc details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--tc-ease),content-visibility .5s allow-discrete}
.tc-acc details[open]::details-content{block-size:auto}

/* Split rows: copy on one side of the rail, the field tile on the other. */
.tc-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.tc-split-text{display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding:clamp(3rem,6vw,5.5rem) var(--tc-pad)}
.tc-split>.tc-tile{border-inline-start:1px solid var(--rule)}
.tc-split-flip>.tc-tile{order:-1;border-inline-start:0;border-inline-end:1px solid var(--rule)}
.tc-tile{display:grid;place-items:center;min-height:32rem;padding:clamp(1.5rem,4vw,3.5rem)}
.tc-shot{margin:0;width:100%;border:1px solid rgb(255 255 255 / .16);border-radius:12px;overflow:hidden;box-shadow:0 30px 70px -30px #000d}
/* Accordion frames: with script the screenshots share one cell and cross-fade, the new one
   lifting into place as the old one settles back. */
.tc-stack{grid-template-areas:'frame'}
.tc-stack>.tc-shot{grid-area:frame;transition:opacity .55s var(--tc-ease),transform .7s var(--tc-ease),filter .55s var(--tc-ease)}
.tc-stack>.tc-shot[data-off]{opacity:0;transform:translateY(14px) scale(.97);filter:blur(6px);pointer-events:none}
/* Tiles open from a slightly zoomed field as they enter; copy inside is never hidden. */
.tc-tile .tc-field{transition:scale 1.4s var(--tc-ease),opacity 1.4s}
.tc-js .tc-tile:not(.is-in) .tc-field{scale:1.25;opacity:.35}

/* Accordion: one open item at a time; the open item carries a blue rail that draws downward. */
.tc-acc{border-block-start:1px solid var(--rule)}
.tc-acc details{position:relative;border-block-end:1px solid var(--rule);padding-inline-start:1.1rem}
.tc-acc details::before{content:'';position:absolute;inset-inline-start:0;inset-block:0;width:2px;background:var(--tc-blue-hi);transform:scaleY(0);transform-origin:50% 0;transition:transform .6s var(--tc-ease)}
.tc-acc details[open]::before{transform:scaleY(1)}
.tc-acc summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.15rem;list-style:none;cursor:pointer;font-size:1.2rem;letter-spacing:-.01em;color:var(--muted);transition:color .25s}
.tc-acc summary::-webkit-details-marker{display:none}
.tc-acc summary:hover,.tc-acc details[open] summary{color:var(--ink)}
.tc-acc summary svg{flex:none;transition:transform .35s var(--tc-ease)}
.tc-acc details[open] summary svg{transform:rotate(180deg)}
.tc-acc details p{margin:0 0 1.25rem;max-width:44ch;line-height:1.6;color:var(--text);animation:tc-fade .5s var(--tc-ease)}
@keyframes tc-fade{from{opacity:0;transform:translateY(-4px)}}

/* Comparison: the source passage and two real outputs. */
.tc-source{margin:0;padding:1.1rem 1.25rem;border:1px solid var(--rule);border-inline-start:2px solid var(--tc-blue-hi);border-radius:8px;background:var(--surface);font-size:var(--t-sm);line-height:1.6;color:var(--text)}
.tc-source p{margin:0}
.tc-source .tc-source-title{margin-block-end:.4rem;font-weight:500;color:var(--ink)}
.tc-tracks{display:grid;gap:.9rem;width:100%;max-width:32rem}
.tc-track{display:grid;gap:.7rem;padding:1.25rem;border:1px solid rgb(255 255 255 / .14);border-radius:14px;background:rgb(6 10 26 / .72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .3s,transform .4s var(--tc-ease)}
.tc-track:hover{border-color:rgb(255 255 255 / .3);transform:translateY(-2px)}
.tc-track-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.tc-track h3{margin:0;font-size:1.25rem;font-weight:500;color:var(--tc-on-field)}
.tc-track-head span,.tc-track>p{margin:0;font-size:var(--t-sm);color:var(--tc-on-field-2)}
.tc-track audio{width:100%;height:2.5rem;color-scheme:dark}
.tc-track details{font-size:var(--t-xs);color:var(--tc-on-field-2)}
.tc-track summary{cursor:pointer;width:fit-content}
.tc-track details p{margin:.6rem 0 0;line-height:1.6}

/* Figures: development records set large on the field. */
.tc-figures{display:grid;width:100%;max-width:32rem;margin:0}
.tc-figures>div{display:grid;gap:.4rem;padding-block:1.4rem;border-block-end:1px solid rgb(255 255 255 / .14)}
.tc-figures>div:first-child{padding-block-start:0}
.tc-figures>div:last-child{border:0;padding-block-end:0}
.tc-figures dt{font-size:clamp(2.6rem,1.8rem + 2.4vw,3.8rem);font-weight:500;line-height:1;letter-spacing:-.04em;color:var(--tc-on-field);font-variant-numeric:tabular-nums}
.tc-figures dd{margin:0;max-width:34ch;font-size:var(--t-sm);line-height:1.5;color:var(--tc-on-field-2)}

/* Capabilities: a calm 3 by 2 grid; hovering an item redraws its icon. */
.tc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem;margin:0;padding:0 var(--tc-pad) clamp(3rem,6vw,5rem);list-style:none}
.tc-grid li{display:flex;gap:1rem;align-items:flex-start}
.tc-grid .tc-icon{flex:none;box-sizing:content-box;width:1.4rem;height:1.4rem;padding:.7rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--accent);stroke-dasharray:80;transition:border-color .3s}
.tc-grid li:hover .tc-icon{border-color:var(--accent);animation:tc-draw .9s var(--tc-ease)}
@keyframes tc-draw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.tc-grid h3{margin:.2rem 0 .35rem;font-size:1.0625rem;font-weight:500;color:var(--ink)}
.tc-grid p{margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--muted)}

/* Availability: what exists now, what is planned, and one way to reach Torkiv. */
.tc-avail{display:grid;grid-template-columns:1fr 1fr;border-block-start:1px solid var(--rule)}
.tc-avail>div{display:grid;align-content:start;gap:.9rem;padding:2.2rem var(--tc-pad) 2.8rem}
.tc-avail>div+div{border-inline-start:1px solid var(--rule)}
.tc-avail h3{display:flex;align-items:center;gap:.6rem;margin:0;font-size:1.2rem;font-weight:500;color:var(--ink)}
.tc-avail p{margin:0;max-width:52ch;line-height:1.6;color:var(--text)}
.tc-avail-dot{width:.55rem;height:.55rem;border-radius:50%;border:1.5px solid var(--muted)}
.tc-avail-dot.is-now{border-color:var(--tc-blue-hi);background:var(--tc-blue-hi)}
.tc-closing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.6rem var(--tc-pad);border-block-start:1px solid var(--rule)}
.tc-closing p{margin:0;color:var(--muted)}

@media(max-width:899px){
  .tc-intro,.tc-split,.tc-avail{grid-template-columns:1fr}
  .tc-intro-main{padding-block-end:1.5rem}
  .tc-intro-side{border-inline-start:0;padding-block-start:0}
  .tc-split>.tc-tile,.tc-split-flip>.tc-tile{order:0;border-inline:0;border-block-start:1px solid var(--rule);min-height:0}
  .tc-steps{grid-template-columns:1fr 1fr}
  .tc-steps li:nth-child(3){border-inline-start:0}
  .tc-steps li:nth-child(n+3){border-block-start:1px solid var(--rule)}
  .tc-grid{grid-template-columns:1fr 1fr}
  .tc-avail>div+div{border-inline-start:0;border-block-start:1px solid var(--rule)}
}
@media(max-width:599px){
  .tc-subbar{min-height:2.6rem}
  .tc-crumbs a,.tc-crumbs span{display:none}
  .tc-window-bar{height:2rem}
  .tc-steps,.tc-grid{grid-template-columns:1fr}
  .tc-steps li+li{border-inline-start:0;border-block-start:1px solid var(--rule)}
  .tc-steps li{padding-block:1.5rem 1.8rem}
}
/* Section to section: each section's copy rises in as it enters, the tile follows a beat later. */
.tc-sec .tc-sec-head,.tc-sec .tc-split-text,.tc-sec .tc-machine,.tc-sec .tc-grid,.tc-sec .tc-avail{transition:opacity .9s var(--tc-ease),translate 1.1s var(--tc-ease)}
.tc-sec .tc-machine,.tc-sec .tc-grid,.tc-sec .tc-avail{transition-delay:.15s}
.tc-js .tc-sec:not(.is-in) :is(.tc-sec-head,.tc-split-text,.tc-machine,.tc-grid,.tc-avail){opacity:0;translate:0 28px}
.tc-sec{scroll-margin-block-start:5rem}
@media(prefers-reduced-motion:no-preference){html:has(.tc-hero){scroll-behavior:smooth}}
@media(prefers-reduced-motion:reduce){
  main:has(.tc-hero) *,main:has(.tc-hero) *::before,main:has(.tc-hero) *::after{animation:none!important;transition:none!important}
}
[dir=rtl] .tc-machine-readout{font-family:inherit;letter-spacing:0;font-size:.8rem}

/* LED headlines (site.js adds .tc-led and, on entry, .is-lit). Each word drops in as a grid
   of LED dots cut from its own letters, deep blue warming to bright, then the dots fill to
   the word's own colour. The staggered words make the dot phase travel along the line like
   a band of light. Without JS or with reduced motion the headline is plain text. */
.tc-led{--led-dot:#2456d6}
@media(prefers-color-scheme:dark){.tc-led{--led-dot:#b4c9ff}}
.tc-led .tc-lw{color:inherit;display:inline-block;padding-inline:.08em;margin-inline:-.08em;background:radial-gradient(circle,var(--led-dot) 0 36%,transparent 42%) 0 0/.085em .085em;-webkit-background-clip:text;background-clip:text}
.tc-led.tc-led span:not(.tc-lw,.hm-chip){animation:none}
.tc-led :is(.tc-lw,.hm-chip){opacity:0}
.tc-led.is-lit .tc-lw{animation:tc-led-word .5s cubic-bezier(.22,1,.36,1) calc(var(--i) * 28ms) both}
.tc-led.is-lit .hm-chip{animation:tc-led-chip .45s cubic-bezier(.22,1,.36,1) calc(var(--i) * 28ms) both}
@keyframes tc-led-word{
  0%{opacity:0;transform:translateY(-.12em);color:transparent;filter:brightness(.5) saturate(1.7)}
  25%{opacity:1;color:transparent}
  50%{transform:none;color:transparent;filter:brightness(1.3)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes tc-led-chip{from{opacity:0;transform:translateY(-.12em) scale(.85)}to{opacity:1;transform:none}}
/* A preference change cancels animation fill as well as motion. Preserve its readable end state. */
@media(prefers-reduced-motion:reduce){.tc-led :is(.tc-lw,.hm-chip){opacity:1;transform:none;filter:none}}

.tc-demo-error{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-block:1rem 3rem;padding:1rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 10px 30px -20px #0008}
.tc-demo-error[hidden]{display:none}
.tc-demo-error p{flex-basis:100%;margin:0;line-height:1.5}
.tc-demo-error button{min-height:36px;padding:.5rem 1rem;border:0;border-radius:8px;background:var(--tc-blue);color:#fff;font:inherit;cursor:pointer}
.tc-demo-error a{color:inherit}