/* One quiet hero screen inside the shared tablet; analysis opens on demand. */
body[data-section=preprocessing] .preprocessing-page{padding:0}
body[data-section=preprocessing] #main{overflow:hidden}
/* Let the scene continue behind the transparent navigation; the tablet remains
   the clipping boundary, so there is no separate dark header strip. */
body[data-section=preprocessing] .tablet #main{overflow:visible}
body[data-section=preprocessing] .header{background:transparent;border-bottom:0;box-shadow:none;backdrop-filter:none}
body[data-section=preprocessing] .preprocessing-hero{overflow:visible}
body[data-section=preprocessing] .preprocessing-art{top:calc(-1 * var(--tablet-header-height))}
.preprocessing-hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;box-sizing:border-box;height:var(--tablet-scene-height);padding:35px 4.2% 45px;overflow:hidden}
.preprocessing-hero-copy{position:relative;z-index:2;width:65%;margin-bottom:32px}
.preprocessing-hero h1{font-size:clamp(30px,3.4vw,52px);line-height:1.2;letter-spacing:-.035em;margin:0 0 18px;color:#f4f6f8;font-weight:700;overflow-wrap:anywhere}
.preprocessing-hero-copy p{max-width:355px;font-size:14px;line-height:1.8;color:#c0cad4;margin:0}
.preprocessing-art{position:absolute;z-index:0;right:-1%;top:0;bottom:0;width:70%;pointer-events:none;mix-blend-mode:screen;opacity:.92}
.preprocessing-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 95%,transparent)}
html[data-theme=human] .preprocessing-art img{filter:grayscale(1) sepia(1) saturate(3) hue-rotate(4deg) brightness(1.1)}
.preparation-flow{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;width:min(74%,790px);margin:0 0 34px;padding:0;list-style:none}
.preparation-flow li{position:relative;display:flex;align-items:center;flex-direction:column;gap:14px;min-width:0;text-align:center;font-size:13px;line-height:1.5;color:#d7e1e9}
.preparation-icon{display:grid;place-items:center;width:clamp(64px,6.1vw,90px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 43%,transparent);background:radial-gradient(circle,var(--halo),#030c14d9 75%);box-shadow:inset 0 0 18px var(--halo),0 0 13px var(--halo);color:var(--accent)}
.preparation-icon .ui-icon{width:34px;height:34px}
.preparation-flow li:not(:last-child):after{content:'→';position:absolute;top:clamp(20px,2vw,33px);left:calc(100% + 2px);font-size:22px;font-weight:400;color:var(--accent)}
.preparation-flow li>span:last-of-type{max-width:125px;min-height:39px}
.preprocessing-example-button{position:relative;z-index:2;display:flex;align-items:center;gap:24px;min-height:48px;padding:13px 20px;border:1px solid color-mix(in srgb,var(--accent) 58%,#978674);border-radius:8px;background:#070d14b8;box-shadow:inset 0 0 18px var(--halo);color:#edf4fa;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.preprocessing-example-button>span{font-size:22px;line-height:1}
.preprocessing-example-button:hover{background:var(--halo);border-color:var(--accent)}
#preprocessing-dialog{position:fixed;inset:0;margin:auto;width:min(1200px,94vw);max-width:94vw;max-height:88svh;box-sizing:border-box;border:1px solid var(--edge);border-radius:18px;padding:28px;background:var(--bg);color:var(--text);overflow:auto;box-shadow:0 25px 80px #000b}
#preprocessing-dialog{height:88svh;scrollbar-gutter:stable;overflow-anchor:none;backface-visibility:hidden}
#preprocessing-dialog::backdrop{background:#02060bcc;backdrop-filter:blur(6px)}
/* Bring the example forward from a distant, smaller view on every opening. */
@media(prefers-reduced-motion:no-preference){
 #preprocessing-dialog[open]{transform-origin:center;will-change:transform,opacity,filter;animation:preprocessing-example-appear 950ms cubic-bezier(.22,.61,.36,1) both,preprocessing-example-focus 380ms ease-out both}
 #preprocessing-dialog[open]::backdrop{animation:preprocessing-backdrop-appear 650ms ease both}
 #preprocessing-dialog[open].is-closing{width:var(--preview-close-width);height:var(--preview-close-height);animation:preprocessing-example-disappear 950ms cubic-bezier(.4,0,.2,1) both,preprocessing-example-defocus 380ms ease-in 570ms both}
 /* Hold the dimmed background until the window has disappeared. */
 #preprocessing-dialog[open].is-closing::backdrop{animation:preprocessing-backdrop-disappear 350ms ease 950ms both}
}
@keyframes preprocessing-example-appear{
 from{opacity:0;transform:translateZ(0) scale(.45)}
 to{opacity:1;transform:translateZ(0) scale(1)}
}
@keyframes preprocessing-backdrop-appear{
 from{opacity:0}
 to{opacity:1}
}
@keyframes preprocessing-backdrop-disappear{
 from{opacity:1}
 to{opacity:0}
}
@keyframes preprocessing-example-focus{
 from{filter:blur(5px)}
 to{filter:blur(0)}
}
@keyframes preprocessing-example-disappear{
 from{opacity:var(--preview-close-opacity,1);transform:var(--preview-close-transform,translateZ(0) scale(1))}
 to{opacity:0;transform:translateZ(0) scale(.45)}
}
.preprocessing-dialog-close{display:flex;justify-content:flex-end;position:sticky;top:0;z-index:5;height:20px}
.preprocessing-dialog-close button{width:40px;height:40px;border:1px solid var(--edge);border-radius:50%;font-size:24px;color:var(--text);background:var(--bg);cursor:pointer}
#preprocessing-example-title{font-size:25px;line-height:1.4;margin:0 55px 26px 0}
@media(max-width:1439px){.preprocessing-art{opacity:.22}}
@media(max-width:1100px){.preparation-flow{width:88%;gap:20px}.preparation-flow li{font-size:12px}.preparation-flow li:not(:last-child):after{left:calc(100% - 1px)}.preprocessing-art{width:82%;opacity:.22}.preprocessing-hero-copy{width:80%}}
@media(max-width:767px){.preprocessing-hero{height:calc(var(--tablet-header-height) + var(--tablet-scene-height) - 118px);padding:28px 20px;justify-content:center}.preprocessing-hero-copy{width:100%;margin-bottom:32px}.preprocessing-hero h1{font-size:clamp(25px,5.3vw,38px);margin-bottom:14px}.preprocessing-hero-copy p{font-size:13px;max-width:300px}.preparation-flow{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:26px;margin-bottom:30px}.preparation-flow li{font-size:11px;gap:10px}.preparation-flow li>span:last-of-type{min-height:33px}.preparation-icon{width:62px}.preparation-icon .ui-icon{width:28px;height:28px}.preparation-flow li:after{display:none}.preparation-flow li:nth-child(4){grid-column:1}.preprocessing-art{top:25%;bottom:0;width:125%;right:-35%;opacity:.52}.preprocessing-art img{object-fit:contain}.preprocessing-example-button{font-size:10px;min-height:46px}#preprocessing-dialog{padding:18px;max-height:92svh}#preprocessing-example-title{font-size:20px;margin-bottom:22px}}
@media(prefers-reduced-motion:no-preference){.preprocessing-example-button{transition:background .2s,border-color .2s}.preprocessing-art img{transition:filter .3s}}

/* Reflow the actual workspace as well as the hero at narrow widths. */
.preparation-flow li>span:last-of-type{overflow-wrap:anywhere}
#preprocessing-dialog{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
#preprocessing-dialog .preprocess-workspace>*{min-width:0}
#preprocessing-dialog .panel-title{flex-wrap:wrap}
#preprocessing-dialog .panel-title label,#preprocessing-dialog .panel-title h2{min-width:0;overflow-wrap:anywhere}
#preprocessing-dialog .processing-value-row{flex-wrap:wrap}
#preprocessing-dialog .processing-value-row>strong{max-width:100%}
#preprocessing-dialog textarea{max-width:100%;resize:vertical}
@media(max-width:900px){
 .preparation-flow{width:100%;gap:18px}
 .preprocessing-hero-copy{width:100%}
 .preparation-flow li:not(:last-child):after{left:calc(100% - 2px);font-size:20px}
 #preprocessing-dialog .preprocess-workspace{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:767px){
 .preprocessing-hero-copy p{max-width:340px}
 .preprocessing-art{opacity:.16;mask-image:linear-gradient(0deg,#000,transparent 95%)}
 .preprocessing-example-button{min-height:48px;font-size:12px;max-width:100%;white-space:normal;text-align:left}
 .preprocessing-dialog-close button{width:44px;height:44px;flex-shrink:0}
 #preprocessing-dialog .preprocess-input textarea{font-size:16px;min-height:160px;height:180px}
 #preprocessing-dialog .example-choices{align-items:center;flex-wrap:wrap}
 #preprocessing-dialog .example-choices button{min-height:44px;padding:9px 12px;font-size:12px}
 #preprocessing-dialog .preprocess-input .primary-button{min-height:48px}
 #preprocessing-dialog .pipeline{grid-template-columns:minmax(0,1fr)}
 #preprocessing-dialog .tone-row{grid-template-columns:minmax(0,1fr) auto;gap:7px;font-size:12px}
 #preprocessing-dialog .tone-track{grid-column:1/-1;grid-row:2;height:7px}
 #preprocessing-dialog .tone-row>b{grid-column:2;grid-row:1}
 #preprocessing-dialog .extracted-values{grid-template-columns:repeat(2,minmax(0,1fr))}
 #preprocessing-dialog .processing-step-heading{flex-wrap:wrap;gap:8px}
}
@media(max-width:420px){
 .preprocessing-hero{padding:24px 18px}
 .preprocessing-hero-copy{margin-bottom:24px}
 .preparation-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;margin-bottom:24px}
 .preparation-flow li{font-size:12px;gap:8px}
 .preparation-flow li:nth-child(4){grid-column:auto}
 .preparation-flow li:last-child{grid-column:1/-1}
 .preparation-flow li>span:last-of-type{min-height:36px;max-width:130px}
 .preparation-icon{width:58px}
 #preprocessing-dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);padding:14px;border-radius:14px}
 #preprocessing-dialog .preprocess-input,#preprocessing-dialog .live-result{padding:14px}
 #preprocessing-dialog .extracted-values{grid-template-columns:minmax(0,1fr)}
 #preprocessing-dialog .panel-title label,#preprocessing-dialog .panel-title h2{font-size:17px;gap:8px}
 #preprocessing-dialog .preprocess-intent{flex-wrap:wrap;gap:8px}
}
@media(hover:none) and (pointer:coarse){
 #preprocessing-dialog .entity-mark{min-height:44px;padding:7px 8px;display:inline-flex;align-items:center}
}
@media(max-width:767px){body[data-section=preprocessing] .preprocessing-art{top:-118px}}

/* Keep the CTA dark through reload, hover and restored focus. Native button
   appearance and a background transition must not introduce a pale fill. */
body[data-section=preprocessing] #preprocessing-open{appearance:none;-webkit-appearance:none;color-scheme:dark;background:#070d14;color:#edf4fa;transition:border-color .2s,box-shadow .2s}
body[data-section=preprocessing] #preprocessing-open:hover,
body[data-section=preprocessing] #preprocessing-open:active{background:color-mix(in srgb,var(--accent,#2995ff) 9%,#070d14);color:#edf4fa;border-color:var(--accent)}
body[data-section=preprocessing] #preprocessing-open:focus{outline:none}
body[data-section=preprocessing] #preprocessing-open:focus-visible{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
body[data-section=preprocessing] .preprocessing-dialog-close button:focus{outline:none}
body[data-section=preprocessing] .preprocessing-dialog-close button:focus-visible{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.preparation-flow li>span:last-of-type{max-width:none;white-space:nowrap}
@media(max-width:600px){.preparation-flow{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}.preparation-flow li:nth-child(4){grid-column:auto}.preparation-flow li:last-child{grid-column:1/-1}}

@keyframes preprocessing-example-defocus{from{filter:var(--preview-close-filter,blur(0))}to{filter:blur(5px)}}

/* Align each step's icon and caption to its grid column's left edge. */
body[data-section=preprocessing] .preparation-flow li{align-items:flex-start;text-align:left}

/* Center connectors in the free space between the actual icon circles. */
@media(min-width:768px){
 body[data-section=preprocessing] .preparation-flow{--flow-icon-size:clamp(64px,6.1vw,90px);--flow-gap:24px;column-gap:var(--flow-gap)}
 body[data-section=preprocessing] .preparation-icon{width:var(--flow-icon-size)}
 body[data-section=preprocessing] .preparation-flow li:not(:last-child)::after{left:var(--flow-icon-size);top:calc(var(--flow-icon-size)/2);width:calc(100% + var(--flow-gap) - var(--flow-icon-size));height:24px;display:flex;align-items:center;justify-content:center;transform:translateY(-50%);font-size:22px;line-height:1;pointer-events:none}
}
@media(min-width:901px) and (max-width:1100px){body[data-section=preprocessing] .preparation-flow{--flow-gap:20px}}
@media(min-width:768px) and (max-width:900px){body[data-section=preprocessing] .preparation-flow{--flow-gap:18px}}

/* Keep the long stop-word caption centered on its own circle. */
body[data-section=preprocessing] .preparation-flow li:is(:nth-child(3),:nth-child(4))>span:last-child{
 position:relative;
 left:calc(var(--flow-icon-size,62px)/2);
 transform:translateX(-50%);
 text-align:center;
}
@media(max-width:600px){body[data-section=preprocessing] .preparation-flow li:is(:nth-child(3),:nth-child(4))>span:last-child{left:29px}}

/* Reserve the same description rows in RU and EN so the pipeline and CTA do not jump. */
body[data-section=preprocessing] .preprocessing-hero-copy p{min-height:3.2em}
@media(max-width:420px){
 body[data-section=preprocessing] #preprocessing-hero-title{min-height:2.24em}
 body[data-section=preprocessing] .preprocessing-hero-copy p{min-height:4.8em}
}