:root{--bti-canvas: #f6f4ef;--bti-surface: #ffffff;--bti-ink: #1d2935;--bti-muted: #66727d;--bti-green: #176b55;--bti-violet: #6757e8;--bti-teal: #0f9f96;--bti-border: #dedbd3;--bti-soft: #efede7;--bti-gradient: linear-gradient(135deg,#6757e8,#0f9f96);--bti-shadow: 0 18px 45px rgba(35,48,64,.1);--primary: var(--bti-violet);--primary-dark: #5143c8;--accent: var(--bti-teal);--gradient: var(--bti-gradient);--border: var(--bti-border);--surface: var(--bti-surface);--shadow-soft: var(--bti-shadow);--surface-muted: var(--bti-soft);--text-main: var(--bti-ink);--text-muted: var(--bti-muted);}
.bti-page{color: var(--bti-ink);padding: 1.5rem 0 5rem;overflow: hidden;}
.bti-page .container{position: relative;}
.bti-page .breadcrumbs{margin-bottom: 1rem;}
.bti-page .breadcrumbs-list{display: flex;align-items: center;flex-wrap: wrap;gap: .4rem;margin: 0;padding: 0;list-style: none;font-size: .84rem;color: var(--bti-muted);}
.bti-page .breadcrumbs-item a{color: var(--bti-green);text-decoration: none;font-weight: 700;}
.bti-page .breadcrumbs-item a:hover{text-decoration: underline;}
.bti-page .breadcrumbs-separator{color: #a5aaa9;}
.bti-page .tool-hero{position: relative;display: flex;align-items: center;min-height: 250px;margin-bottom: 1.5rem;padding: clamp(1.75rem,4vw,3.5rem);overflow: hidden;border: 1px solid rgba(103,87,232,.16);border-radius: 28px;background: linear-gradient(120deg,rgba(255,255,255,.92),rgba(247,246,255,.88) 55%,rgba(232,248,244,.88));box-shadow: 0 20px 55px rgba(46,58,74,.08);}
.bti-page .tool-hero::before{content: "";position: absolute;right: -75px;top: -100px;width: 300px;height: 300px;border-radius: 50%;background: radial-gradient(circle,rgba(103,87,232,.24),rgba(15,159,150,.05) 62%,transparent 63%);}
.bti-page .tool-hero::after{content: "B64";position: absolute;right: clamp(1.5rem,6vw,5rem);bottom: -1.7rem;font-size: clamp(6rem,14vw,12rem);font-weight: 900;line-height: 1;color: rgba(23,107,85,.055);letter-spacing: -.08em;}
.bti-page .hero-text{position: relative;z-index: 1;max-width: 780px;}
.bti-page .hero-text h1{margin: 0 0 1rem;font-size: clamp(2rem,4vw,3rem);font-weight: 850;line-height: .98;letter-spacing: -.055em;color: var(--bti-ink);}
.bti-page .hero-text h1::after{content: "";display: block;width: 128px;height: 7px;margin-top: 1.25rem;border-radius: 99px;background: var(--bti-gradient);}
.bti-page .hero-subtitle{max-width: 720px;margin: 0;font-size: clamp(1rem,2vw,1.22rem);line-height: 1.75;color: var(--bti-muted);}
.bti-workbench{margin-bottom: clamp(4rem,8vw,7rem);border: 1px solid rgba(103,87,232,.18);border-radius: 28px;background: rgba(255,255,255,.78);box-shadow: var(--bti-shadow);backdrop-filter: blur(18px);overflow: hidden;}
.bti-workbench-meta{display: flex;align-items: center;justify-content: space-between;gap: 1rem;flex-wrap: wrap;padding: .85rem 1.25rem;border-bottom: 1px solid var(--bti-border);background: rgba(246,244,239,.72);font-size: .78rem;color: var(--bti-muted);}
.bti-privacy{display: inline-flex;align-items: center;gap: .45rem;font-weight: 800;color: var(--bti-green);}
.bti-meta-author{margin-left: auto;}
.bti-meta-author .author-link{color: var(--bti-violet);font-weight: 800;text-decoration: none;}
.bti-meta-author .author-link:hover{text-decoration: underline;}
.bti-meta-updated{white-space: nowrap;}
.bti-workbench-heading{display: flex;align-items: end;justify-content: space-between;gap: 1.5rem;padding: clamp(1.25rem,3.5vw,2rem);}
.bti-eyebrow,.bti-kicker{display: block;margin-bottom: .55rem;font-size: .72rem;font-weight: 900;letter-spacing: .15em;text-transform: uppercase;color: var(--bti-green);}
.bti-workbench-heading h2{margin: 0;font-size: clamp(1.65rem,3vw,2.5rem);font-weight: 850;letter-spacing: -.035em;}
.bti-format-strip{font-size: .75rem;font-weight: 800;letter-spacing: .06em;color: var(--bti-muted);}
.bti-workbench-grid{display: grid;grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);gap: 1rem;padding: 0 1rem 1rem;}
.bti-panel{min-width: 0;padding: clamp(1.1rem,3vw,1.65rem);border: 1px solid var(--bti-border);border-radius: 21px;background: var(--bti-surface);}
.bti-input-panel{background: linear-gradient(145deg,#fff,#fbfaf7);}
.bti-preview-panel{background: linear-gradient(145deg,#fff,#f8f9ff);}
.bti-panel-heading{display: flex;align-items: center;justify-content: space-between;gap: 1rem;margin-bottom: 1.15rem;}
.bti-panel-heading>div{display: flex;align-items: center;gap: .65rem;}
.bti-panel-number{display: grid;place-items: center;width: 31px;height: 31px;border-radius: 9px;background: var(--bti-soft);font-size: .7rem;font-weight: 900;color: var(--bti-green);}
.bti-panel-heading h3{margin: 0;font-size: 1rem;font-weight: 850;color: var(--bti-ink);}
.bti-live-label{display: inline-flex;align-items: center;gap: .4rem;font-size: .72rem;font-weight: 800;color: var(--bti-green);}
.bti-live-label span{width: 7px;height: 7px;border-radius: 50%;background: var(--bti-teal);box-shadow: 0 0 0 5px rgba(15,159,150,.12);}
.bti-label{display: block;margin-bottom: .55rem;font-size: .78rem;font-weight: 850;color: var(--bti-ink);}
.bti-textarea{width: 100%;min-height: 335px;padding: 1.1rem;border: 1px solid #d9d7d0;border-radius: 15px;outline: none;resize: vertical;background: #f5f3ed;color: #26313b;font: .82rem/1.65 "SFMono-Regular",Consolas,"Liberation Mono",monospace;transition: border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.bti-textarea:focus{border-color: var(--bti-violet);background: #fff;box-shadow: 0 0 0 4px rgba(103,87,232,.13);}
.bti-textarea::placeholder{color: #89918f;}
.bti-input-stats{display: flex;align-items: center;justify-content: space-between;gap: .75rem;padding: .65rem .15rem;font-size: .72rem;color: var(--bti-muted);}
.bti-actions{display: flex;align-items: center;gap: .65rem;flex-wrap: wrap;}
.bti-button{display: inline-flex;align-items: center;justify-content: center;gap: .5rem;min-height: 42px;padding: .68rem 1rem;border: 1px solid transparent;border-radius: 11px;font-size: .79rem;font-weight: 850;cursor: pointer;transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;}
.bti-button:hover:not(:disabled){transform: translateY(-2px);}
.bti-button:focus-visible,.bti-large-action:focus-visible,.bti-textarea:focus-visible,.bti-zoom input:focus-visible{outline: 3px solid rgba(103,87,232,.34);outline-offset: 3px;}
.bti-button:disabled{opacity: .42;cursor: not-allowed;}
.bti-button-primary{background: var(--bti-gradient);color: #fff;box-shadow: 0 10px 22px rgba(82,70,198,.2);}
.bti-button-primary:hover:not(:disabled){box-shadow: 0 14px 28px rgba(82,70,198,.3);}
.bti-button-soft{border-color: #ded9f8;background: #f1efff;color: #5143c8;}
.bti-button-soft:hover:not(:disabled){border-color: #bdb5f2;background: #e9e6ff;}
.bti-button-quiet{border-color: var(--bti-border);background: #fff;color: var(--bti-muted);}
.bti-button-quiet:hover:not(:disabled){border-color: #b9b6ae;color: var(--bti-ink);}
.bti-input-note{display: flex;gap: .55rem;margin: 1rem 0 0;padding-top: 1rem;border-top: 1px solid var(--bti-border);font-size: .73rem;line-height: 1.55;color: var(--bti-muted);}
.bti-input-note i{margin-top: .15rem;color: var(--bti-teal);}
.bti-large-action{display: flex;width: 100%;align-items: center;gap: .85rem;margin-top: .85rem;padding: .9rem;border: 1px solid #e4b868;border-radius: 12px;background: #fff8e8;color: #76510e;text-align: left;cursor: pointer;}
.bti-large-action[hidden]{display: none;}
.bti-large-action i{font-size: 1.2rem;}
.bti-large-action span{display: flex;flex-direction: column;gap: .15rem;}
.bti-large-action small{font-size: .7rem;color: #916c2e;}
.bti-status{max-width: 190px;padding: .38rem .65rem;border-radius: 999px;background: #eef1f2;font-size: .68rem;font-weight: 800;line-height: 1.3;text-align: right;color: var(--bti-muted);}
.bti-status[data-state="success"]{background: #e5f5ef;color: #176b55;}
.bti-status[data-state="error"]{background: #fff0ee;color: #a23c31;}
.bti-status[data-state="loading"],.bti-status[data-state="waiting"]{background: #efedff;color: #5143c8;}
.bti-status[data-state="paused"]{background: #fff4da;color: #76510e;}
.bti-preview-stage{display: grid;place-items: center;min-height: 385px;padding: 1.25rem;overflow: auto;border: 1px solid #d8d7df;border-radius: 16px;background-color: #f3f3f5;background-image: linear-gradient(45deg,#e5e5e9 25%,transparent 25%),linear-gradient(-45deg,#e5e5e9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e5e9 75%),linear-gradient(-45deg,transparent 75%,#e5e5e9 75%);background-size: 22px 22px;background-position: 0 0,0 11px,11px -11px,-11px 0;}
.bti-preview-stage img{display: block;max-width: 100%;max-height: 345px;object-fit: contain;transform-origin: center;transition: transform .18s ease;filter: drop-shadow(0 14px 24px rgba(22,31,42,.18));}
.bti-empty{display: flex;max-width: 260px;flex-direction: column;align-items: center;gap: .55rem;padding: 1.5rem;text-align: center;color: var(--bti-muted);}
.bti-empty strong{font-size: 1rem;color: var(--bti-ink);}
.bti-empty>span:last-child{font-size: .78rem;line-height: 1.5;}
.bti-empty-icon{display: grid;place-items: center;width: 70px;height: 70px;margin-bottom: .35rem;border: 1px solid rgba(103,87,232,.18);border-radius: 22px;background: linear-gradient(145deg,#fff,#ece9ff);font-size: 1.75rem;color: var(--bti-violet);box-shadow: 0 14px 30px rgba(74,64,172,.12);}
.bti-empty-error .bti-empty-icon{border-color: #f2c6c0;background: #fff0ee;color: #a23c31;}
.bti-empty-paused .bti-empty-icon{border-color: #efd392;background: #fff8e8;color: #8a641e;}
.bti-image-info{margin-top: .8rem;padding: .85rem;border: 1px solid var(--bti-border);border-radius: 13px;background: rgba(246,244,239,.7);}
.bti-image-info[hidden]{display: none;}
.bti-facts{display: grid;grid-template-columns: repeat(3,1fr);gap: .5rem;margin: 0 0 .8rem;}
.bti-facts div{min-width: 0;padding: .6rem;border-radius: 9px;background: #fff;}
.bti-facts dt{margin-bottom: .15rem;font-size: .62rem;font-weight: 850;text-transform: uppercase;letter-spacing: .08em;color: var(--bti-muted);}
.bti-facts dd{margin: 0;overflow-wrap: anywhere;font-size: .76rem;font-weight: 850;color: var(--bti-ink);}
.bti-zoom{display: grid;grid-template-columns: auto 1fr auto;align-items: center;gap: .65rem;font-size: .7rem;font-weight: 800;color: var(--bti-muted);}
.bti-zoom input{width: 100%;accent-color: var(--bti-violet);}
.bti-zoom output{min-width: 36px;text-align: right;color: var(--bti-violet);}
.bti-output-actions{margin-top: .85rem;}
.bti-editorial{display: grid;gap: clamp(4rem,8vw,7rem);}
.bti-section-intro{max-width: 760px;}
.bti-section-intro-wide{max-width: 880px;}
.bti-section-intro h2,.bti-tradeoff h2{margin: 0 0 1rem;font-size: clamp(2rem,4.5vw,3.7rem);font-weight: 850;line-height: 1.05;letter-spacing: -.05em;color: var(--bti-ink);}
.bti-lede{margin: 0;font-size: clamp(1.05rem,2vw,1.28rem);line-height: 1.7;color: #45525e;}
.bti-story{position: relative;padding: clamp(1.5rem,4vw,3.2rem);border: 1px solid var(--bti-border);border-radius: 26px;background: rgba(255,255,255,.72);}
.bti-story-copy{display: grid;grid-template-columns: .8fr 1.2fr;gap: 1rem 2rem;margin: 2rem 0;}
.bti-story-copy p{margin: 0;font-size: .96rem;line-height: 1.85;color: #4e5b65;}
.bti-story-copy p:nth-child(3){grid-column: 1 / -1;padding: 1.25rem 0;border-top: 1px solid var(--bti-border);border-bottom: 1px solid var(--bti-border);font-size: 1.08rem;color: var(--bti-ink);}
.bti-flow{display: grid;grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items: center;gap: .55rem;margin: 2.4rem 0;padding: 1rem;border-radius: 18px;background: #eeece6;}
.bti-flow-step{position: relative;display: flex;min-height: 142px;flex-direction: column;align-items: center;justify-content: center;gap: .35rem;padding: 1rem .6rem;border: 1px solid #dedad0;border-radius: 14px;background: #fff;text-align: center;}
.bti-flow-step>span{position: absolute;top: .5rem;left: .55rem;font-size: .62rem;font-weight: 900;color: #9aa09d;}
.bti-flow-step i{margin-bottom: .25rem;font-size: 1.25rem;color: var(--bti-violet);}
.bti-flow-step strong{font-size: .78rem;color: var(--bti-ink);}
.bti-flow-step small{font-size: .66rem;line-height: 1.35;color: var(--bti-muted);}
.bti-flow-arrow{font-size: .7rem;color: #98948b;}
.bti-method-note{margin: 0;padding: 1rem 1.15rem;border-left: 4px solid var(--bti-teal);background: #edf8f5;font-size: .84rem;line-height: 1.7;color: #3f5a52;}
.bti-tradeoff{display: grid;grid-template-columns: minmax(160px,.35fr) minmax(0,1fr);gap: clamp(1.5rem,5vw,4rem);padding: clamp(1.5rem,5vw,4rem);border: 1px solid #e8d4a8;border-radius: 28px;background: linear-gradient(135deg,#fff9eb,#fff 72%);box-shadow: 0 20px 45px rgba(91,66,20,.07);}
.bti-tradeoff-mark{display: grid;place-items: center;align-self: start;aspect-ratio: 1;border-radius: 28px;background: linear-gradient(145deg,#176b55,#0f9f96);font-size: clamp(2.5rem,6vw,5rem);font-weight: 900;letter-spacing: -.08em;color: #fff;box-shadow: 0 18px 34px rgba(23,107,85,.2);}
.bti-tradeoff-copy p,.bti-tradeoff-copy li{font-size: .96rem;line-height: 1.78;color: #4e5b65;}
.bti-tradeoff-copy ul{display: grid;gap: .65rem;margin: 1.35rem 0;padding-left: 1.2rem;}
.bti-opinion{padding: 1rem 1.15rem;border-radius: 12px;background: #fff;border: 1px solid #ead9b6;color: var(--bti-ink)!important;}
.bti-note-grid{display: grid;grid-template-columns: repeat(12,1fr);gap: 1rem;margin-top: 2rem;}
.bti-note{position: relative;min-height: 245px;padding: clamp(1.25rem,3vw,2rem);overflow: hidden;border: 1px solid var(--bti-border);border-radius: 22px;background: #fff;}
.bti-note::after{content: "";position: absolute;right: -40px;bottom: -55px;width: 140px;height: 140px;border-radius: 50%;background: rgba(103,87,232,.06);}
.bti-note-api,.bti-note-css{grid-column: span 7;}
.bti-note-record,.bti-note-canvas{grid-column: span 5;}
.bti-note-record{background: #edf8f5;}
.bti-note-canvas{background: #f0eeff;}
.bti-note-index{font-size: .68rem;font-weight: 900;letter-spacing: .12em;text-transform: uppercase;color: var(--bti-violet);}
.bti-note h3{max-width: 420px;margin: 1.4rem 0 .75rem;font-size: clamp(1.25rem,2.3vw,1.75rem);font-weight: 850;line-height: 1.15;letter-spacing: -.03em;color: var(--bti-ink);}
.bti-note p{position: relative;z-index: 1;margin: 0;font-size: .9rem;line-height: 1.75;color: #52606a;}
.bti-note a,.bti-diagnostics a{color: #5143c8;font-weight: 800;text-decoration-thickness: 1px;text-underline-offset: 3px;}
.bti-diagnostics-followup{margin: 1.75rem 0 0;}
.bti-fault-map{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;margin-top: 2rem;}
.bti-fault{display: grid;grid-template-columns: auto 1fr;gap: 1rem;padding: 1.35rem;border: 1px solid var(--bti-border);border-radius: 12px;background: rgba(255,255,255,.55);}
.bti-fault>span{font-size: .72rem;font-weight: 900;color: var(--bti-violet);}
.bti-fault h3{margin: 0 0 .55rem;font-size: 1rem;font-weight: 850;color: var(--bti-ink);}
.bti-fault p{margin: 0;font-size: .86rem;line-height: 1.75;color: #56636d;}
.bti-fault code{padding: .12rem .35rem;border-radius: 5px;background: #ece9ff;color: #5143c8;font-size: .8em;}
.bti-privacy-note{display: grid;grid-template-columns: auto 1fr;gap: 1.25rem;margin-top: 1.5rem;padding: clamp(1.25rem,3vw,2rem);border-radius: 20px;background: #1d2935;color: #dbe4e6;}
.bti-privacy-note>i{display: grid;place-items: center;width: 48px;height: 48px;border-radius: 14px;background: rgba(15,159,150,.18);font-size: 1.25rem;color: #6ed6cb;}
.bti-privacy-note h3{margin: 0 0 .6rem;font-size: 1.15rem;color: #fff;}
.bti-privacy-note p{margin: 0 0 .6rem;font-size: .88rem;line-height: 1.72;color: #c5d0d3;}
.bti-privacy-note p:last-child{margin-bottom: 0;}
.bti-page .faq-section{margin-top: clamp(4rem,8vw,7rem);}
.bti-page .related-tools-section{margin-top: 2rem;}
@media (max-width: 1000px){.bti-flow{grid-template-columns: repeat(5,1fr);}.bti-flow-arrow{display: none;}.bti-flow-step{min-height: 130px;}.bti-story-copy{grid-template-columns: 1fr;}.bti-story-copy p:nth-child(3){grid-column: auto;}}
@media (max-width: 900px){.bti-workbench-grid{grid-template-columns: 1fr;}.bti-textarea{min-height: 260px;}.bti-preview-stage{min-height: 340px;}.bti-note-api,.bti-note-css,.bti-note-record,.bti-note-canvas{grid-column: span 6;}.bti-tradeoff{grid-template-columns: 140px 1fr;}.bti-workbench-heading{align-items: start;flex-direction: column;}}
@media (max-width: 700px){.bti-page{padding-top: .75rem;}.bti-page .tool-hero{min-height: 220px;padding: 2rem 1.35rem;border-radius: 22px;}.bti-page .hero-text h1{font-size: 2.45rem;}.bti-workbench{border-radius: 22px;}.bti-workbench-meta{align-items: flex-start;flex-direction: column;}.bti-meta-author{margin-left: 0;}.bti-workbench-grid{padding: 0 .65rem .65rem;}.bti-workbench-heading{padding: 1.35rem 1rem;}.bti-format-strip{line-height: 1.6;}.bti-panel{border-radius: 17px;}.bti-flow{grid-template-columns: 1fr 1fr;}.bti-flow-step:last-child{grid-column: 1 / -1;}.bti-tradeoff{grid-template-columns: 1fr;}.bti-tradeoff-mark{width: 125px;}.bti-note-grid{grid-template-columns: 1fr;}.bti-note-api,.bti-note-css,.bti-note-record,.bti-note-canvas{grid-column: auto;}.bti-fault-map{grid-template-columns: 1fr;}.bti-privacy-note{grid-template-columns: 1fr;}}
@media (max-width: 520px){.bti-panel-heading{align-items: flex-start;flex-direction: column;}.bti-status{max-width: none;text-align: left;}.bti-input-stats{align-items: flex-start;flex-direction: column;gap: .2rem;}.bti-actions{align-items: stretch;flex-direction: column;}.bti-button{width: 100%;}.bti-preview-stage{min-height: 290px;padding: .75rem;}.bti-facts{grid-template-columns: 1fr;}.bti-zoom{grid-template-columns: 1fr auto;}.bti-zoom input{grid-column: 1 / -1;grid-row: 2;}.bti-zoom output{grid-column: 2;grid-row: 1;}.bti-flow{grid-template-columns: 1fr;}.bti-flow-step:last-child{grid-column: auto;}.bti-section-intro h2,.bti-tradeoff h2{font-size: 2.2rem;}}
@media (prefers-reduced-motion: reduce){.bti-page *{scroll-behavior: auto!important;transition-duration: .01ms!important;animation-duration: .01ms!important;animation-iteration-count: 1!important;}}
@media (prefers-contrast: high){.bti-workbench,.bti-panel,.bti-textarea{border-width: 2px;}}