/* /tools/<name> v10 (2026-10-08): the 13 tool pages. A layer over the existing page; the tools' own markup and logic are untouched. */
main.tl[data-scene]{position:relative;isolation:isolate;background:#05070F!important;overflow:clip}
main.tl[data-scene]::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(55% 40% at 80% 0%,rgba(92,155,255,.18),transparent 70%),radial-gradient(45% 35% at 8% 35%,rgba(255,138,42,.12),transparent 70%),#05070F}
main.tl[data-scene] #ixCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;opacity:0;transition:opacity .35s ease-out}
main.tl[data-scene].ix-3d #ixCanvas{opacity:1}
main.tl[data-scene] .tl-hero,main.tl[data-scene] .tl-sec,main.tl[data-scene] .tl-sec.alt{background:transparent!important}
main.tl[data-scene] .tl-hero::before,main.tl[data-scene] .tl-hero::after{content:none!important}

/* hero: text on the reading side, the scene beside it */
main.tl[data-scene] .tl-hero{padding:clamp(44px,8vh,92px) 0 clamp(20px,3vh,36px)!important;overflow:visible}
main.tl[data-scene] .tl-hero .tl-w{text-align:start}
main.tl[data-scene] .tl-crumbs{justify-content:flex-start}
.tlx-chip{display:grid;place-items:center;width:68px;height:68px;margin:18px 0 16px;border-radius:22px;border:1px solid rgba(255,138,42,.45);background:linear-gradient(160deg,rgba(255,138,42,.22),rgba(255,138,42,.05));color:#FFB070;box-shadow:0 18px 44px -22px rgba(255,138,42,.8),inset 0 1px 0 rgba(255,255,255,.18)}
.tlx-chip svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
main.tl[data-scene] .tl-kick{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#FFD9BC}
main.tl[data-scene] .tl-hero .tl-h1{max-width:16ch;margin:16px 0 0!important;font-size:clamp(36px,5.2vw,72px)!important;line-height:1.05;letter-spacing:-.035em;text-wrap:balance;background:linear-gradient(100deg,#fff 30%,#FFD9BC 70%,#FF9B55);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
main.tl[data-scene] .tl-lead{max-width:40rem;margin:16px 0 0!important;font-size:clamp(16px,1.35vw,19px);line-height:1.7;color:#B8C2DA}
@media (min-width:820px){main.tl[data-scene] .tl-hero .tl-w>*{max-width:min(100%,44rem)}}

/* the tool itself: one glass panel, the brightest thing on the page */
main.tl[data-scene] .tl-panel{border:1px solid rgba(255,255,255,.14)!important;border-radius:30px!important;background:linear-gradient(165deg,rgba(22,29,62,.9),rgba(7,10,24,.95))!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,138,42,.08),inset 0 1px 0 rgba(255,255,255,.08)!important}
main.tl[data-scene] .tl-panel input:focus-visible,main.tl[data-scene] .tl-panel select:focus-visible,main.tl[data-scene] .tl-panel textarea:focus-visible,main.tl[data-scene] .tl-panel button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,138,42,.6)}
main.tl[data-scene] .tl-sg.is-on{background:linear-gradient(180deg,#FF9B4A,#E2670F)!important;color:#1A0B00!important}
main.tl[data-scene] .tl-res-i b{font-variant-numeric:tabular-nums}

/* sections */
main.tl[data-scene] .tl-h2{font-size:clamp(26px,3.2vw,42px);letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
main.tl[data-scene] .tl-eyebrow{color:#FFB070}
main.tl[data-scene] .tl-steps li,main.tl[data-scene] .tl-q,main.tl[data-scene] .tl-rel a{border:1px solid rgba(255,255,255,.1)!important;border-radius:22px!important;background:rgba(10,14,32,.62)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
main.tl[data-scene] .tl-sn{display:block;width:auto;height:auto;margin-bottom:10px;padding:0;border:0;background:none!important;font-size:13px;font-weight:800;letter-spacing:.08em;color:#FFB070!important;font-variant-numeric:tabular-nums}
main.tl[data-scene] .tl-sn::before{content:"0"}
main.tl[data-scene] .tl-rel a{transition:transform .2s ease-out,border-color .2s ease-out}
@media (hover:hover){main.tl[data-scene] .tl-rel a:hover{transform:translateY(-4px);border-color:rgba(255,138,42,.5)!important}}

@media (max-width:819px){
  main.tl[data-scene] .tl-hero{padding-top:clamp(170px,28vh,230px)!important}
  .tlx-chip{display:none}
}
@media (prefers-reduced-motion:reduce){main.tl[data-scene] #ixCanvas,main.tl[data-scene] .tl-rel a{transition:none}}
main.tl[data-scene].ix-3d .tlx-chip{display:none}