/* JOIS: лонгрид поверх одной 3D-сцены, нативная прокрутка. Палитра и шрифты — фирменные (см. :root в style.css). */
:root { --story-header: 76px; --copy-ink: #34405f; --u: min(1vw, 1.6vh); /* шаг шкалы: 14.4px на 1440×900, 17px на 1920×1080, 23px на 2560×1440 */ }
html { scroll-behavior:auto; }
body { overflow-x:clip; }
html:has(dialog.lead[open]) { overflow:hidden; }

/* Прелоадер: закрывает экран до первой отрисовки 3D. Если скрипт не ответил, через 30 с уходит сам */
#preloader { position:fixed; inset:0; z-index:1000; display:grid; place-content:center; justify-items:center; gap:24px; background:var(--paper); transition:opacity .6s ease, visibility 0s .6s; }
#preloader.is-done { opacity:0; visibility:hidden; pointer-events:none; }
html:has(#preloader:not(.is-done)) { overflow:hidden; }
.preloader-brand { font-family:var(--display); font-weight:600; font-size:clamp(64px, 7vw, 132px); line-height:1; letter-spacing:.02em; color:var(--brand-deep); }
.preloader-bar { width:clamp(180px, 14vw, 280px); height:2px; background:var(--line); overflow:hidden; }
.preloader-bar i { display:block; height:100%; background:var(--brand); transform-origin:left; transform:scaleX(.3); animation:preloader-slide 1.2s ease-in-out infinite; }
#preloader.has-progress .preloader-bar i { animation:none; transform:scaleX(var(--p)); transition:transform .25s ease-out; }
.preloader-text { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums; }
@keyframes preloader-slide { from { transform:translateX(-30%) scaleX(.3); } to { transform:translateX(100%) scaleX(.3); } }
@media (prefers-reduced-motion: reduce) { .preloader-bar i { animation:none; } #preloader { transition:none; } }

/* Шапка */
header { position:sticky; top:0; height:var(--story-header); padding:0 38px; background:#f4f6faeb; backdrop-filter:blur(16px); border-bottom:1px solid var(--line); gap:28px; }
header .brand { font-size:38px; }
header nav { margin-left:32px; gap:25px; }
header .nav { font-size:13px; }
header .window-nav { margin-left:auto; font-size:13px; }
.story-skip { font-size:12px; font-weight:600; border:1px solid #12274433; border-radius:30px; padding:11px 16px; white-space:nowrap; }
.lead-cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 22px; border-radius:40px; background:var(--brand); color:#fff; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; transition:background .2s, transform .2s; }
.lead-cta:hover { filter:none; background:var(--brand-deep); }
.lead-cta:active { transform:scale(.97); }
.rail-cta { display:none; }

/* Сцена и главы */
#story-wrap { position:relative; background:var(--stage); }
#story-wrap #explore { position:sticky; top:var(--story-header); min-height:0; height:calc(100svh - var(--story-header)); padding:0; overflow:hidden; }
#story-chapters { position:relative; margin-top:calc(-100svh + var(--story-header)); pointer-events:none; }
.story-chapter { position:relative; height:120svh; min-height:650px; padding:14vh 4.3vw 18vh; display:flex; align-items:flex-start; }
.story-intro { height:calc(112svh - var(--story-header)); }
.story-final { height:calc(100svh - var(--story-header)); min-height:0; padding:0; }
.story-copy { width:clamp(380px, calc(30 * var(--u)), 720px); position:sticky; top:calc(var(--story-header) + 7vh); align-self:flex-start; z-index:2; pointer-events:auto; padding:0 14px 0 0; }

/* Типографика: узкие жирные заглавные — как у бренда, текст — Inter. Всё растёт от --u, нижняя граница = размер на ноутбуке */
.story-kicker { display:block; font-size:clamp(12px, calc(.85 * var(--u)), 17px); letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--brand); margin-bottom:clamp(18px, calc(1.4 * var(--u)), 30px); }
.story-copy h1,.story-copy h2 { font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--brand-deep); line-height:.98; letter-spacing:0; margin:0 0 clamp(20px, calc(1.6 * var(--u)), 36px); text-wrap:balance; }
.story-copy h1 { font-size:clamp(40px, calc(4.4 * var(--u)), 120px); }
.story-copy h2 { font-size:clamp(38px, calc(4.1 * var(--u)), 112px); }
.story-copy p { max-width:92%; margin:0; font-size:clamp(15px, calc(1.1 * var(--u)), 22px); line-height:1.55; color:var(--copy-ink); text-wrap:pretty; }
.story-copy small { display:block; max-width:85%; margin-top:14px; font-size:clamp(12px, calc(.85 * var(--u)), 15px); line-height:1.5; color:var(--muted); }
.story-fact { display:flex; align-items:center; gap:16px; padding:clamp(22px, calc(1.6 * var(--u)), 36px) 0 18px; }
.story-fact strong { font-family:var(--display); font-size:clamp(64px, calc(5.6 * var(--u)), 140px); font-weight:300; line-height:.9; color:var(--brand); font-variant-numeric:tabular-nums; }
.story-fact span { font-size:clamp(12px, calc(.85 * var(--u)), 16px); line-height:1.4; color:var(--muted); }
.story-pair strong { font-size:clamp(52px, calc(3.8 * var(--u)), 96px); }
.story-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:clamp(22px, calc(1.8 * var(--u)), 40px); }
.story-actions .lead-cta { min-height:clamp(44px, calc(3.3 * var(--u)), 64px); padding:0 clamp(22px, calc(1.7 * var(--u)), 38px); font-size:clamp(12px, calc(.85 * var(--u)), 16px); }
.story-text-link { font-size:clamp(13px, calc(.95 * var(--u)), 18px); font-weight:500; color:var(--brand); border-bottom:1px solid #1e2b9e55; padding:4px 0; text-align:left; }
.story-text-link:hover { filter:none; border-color:var(--brand); }
.story-window-link { display:inline-block; margin-top:16px; }
.story-facts { display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:clamp(26px, calc(2 * var(--u)), 48px); margin:clamp(24px, calc(1.8 * var(--u)), 44px) 0 0; padding:clamp(16px, calc(1.2 * var(--u)), 28px) 0 0; border-top:1px solid var(--line); }
.story-facts div { display:grid; gap:6px; }
.story-facts dt { font-family:var(--display); font-size:clamp(30px, calc(2.5 * var(--u)), 60px); font-weight:500; line-height:1; color:var(--brand-deep); font-variant-numeric:tabular-nums; }
.story-facts dd { margin:0; font-size:clamp(11px, calc(.8 * var(--u)), 15px); line-height:1.35; color:var(--muted); }
.story-copy .story-disclaimer { margin-top:28px; font-size:clamp(11px, calc(.78 * var(--u)), 14px); }

/* Проявление текста при входе главы в кадр; без JS (нет класса story-anim) всё видно сразу */
.story-anim .story-copy > * { transition:opacity .6s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.story-anim .story-chapter:not(.is-in) .story-copy > * { opacity:0; translate:0 22px; }
.story-anim .story-chapter.is-in .story-copy > :nth-child(2) { transition-delay:.06s; }
.story-anim .story-chapter.is-in .story-copy > :nth-child(3) { transition-delay:.12s; }
.story-anim .story-chapter.is-in .story-copy > :nth-child(4) { transition-delay:.18s; }
.story-anim .story-chapter.is-in .story-copy > :nth-child(n+5) { transition-delay:.24s; }

/* Нижняя панель маршрута */
.story-rail { display:flex; position:fixed; z-index:10; bottom:0; left:0; right:0; height:66px; align-items:center; gap:26px; padding:0 4.3vw; background:#f4f6faed; backdrop-filter:blur(16px); border-top:1px solid #1227441a; }
#story-counter { font-family:var(--display); font-size:15px; letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--brand-deep); }
#story-current { font-size:13px; margin-left:auto; }
#story-next { width:42px; height:42px; font-size:20px; color:var(--brand); }
.story-dots { display:flex; gap:3px; align-items:center; }
.story-dots button { width:26px; height:42px; display:grid; place-items:center; position:relative; }
.story-dots button i { width:6px; height:6px; border-radius:50%; background:#12274433; transition:transform .25s,background .25s; }
.story-dots button[aria-current="step"] i { background:var(--brand); transform:scale(1.6); }
.story-dots button span { position:absolute; pointer-events:none; bottom:43px; opacity:0; translate:0 4px; transition:opacity .15s,translate .15s; background:var(--brand-deep); color:white; border-radius:6px; padding:6px 9px; white-space:nowrap; font-size:12px; }
.story-dots button:hover span,.story-dots button:focus-visible span { opacity:1; translate:0 0; }
.story-progress { position:absolute; top:-1px; left:0; right:0; height:2px; background:#1227440f; }
.story-progress i { display:block; height:100%; background:var(--brand); transform-origin:left; transform:scaleX(0); }
#story-chapter-menu { display:none; }

/* Статус модели и запасные картинки */
.story-status { position:absolute; z-index:5; right:28px; top:23px; display:flex; align-items:center; gap:8px; color:var(--copy-ink); font-size:11px; padding:7px 12px; background:#f4f6fadf; border:1px solid var(--line); border-radius:20px; max-width:calc(100% - 35px); }
.story-status i { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:#3c9a6a; }
body[data-story-renderer="fallback"] .story-status i { background:#bd7348; }
.story-poster { position:absolute; inset:0 0 0 27%; z-index:1; overflow:hidden; background:var(--stage); }
.story-poster img { width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; }
.story-poster:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--stage),transparent 9%); pointer-events:none; }
.story-image-enter { animation:storyReveal .45s ease-out; }
@keyframes storyReveal { from {opacity:.25} to {opacity:1} }

/* 3D во всю ширину; --stage-inset читает scene-glb.js и сдвигает кадр правее колонки текста */
.story-guided #scene-wrap { left:0; --stage-inset:.27; }
.story-guided #explore { background:var(--stage); }
.story-guided #scene { background:var(--stage); }
.story-guided #scene canvas { touch-action:pan-y; pointer-events:none; }
.story-guided #scene-wrap:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--stage) 0,#e4e9f2db 22%,#e4e9f200 42%); }
.story-guided #labels { pointer-events:none; }
.story-guided #labels .building-label { pointer-events:none; animation:storyLabel .5s ease-out; }
.story-guided #labels .amenity-label { pointer-events:none; animation:storyLabel .5s ease-out; }
@keyframes storyLabel { from { opacity:0; translate:0 8px; } }
.story-guided #baked-scene,.story-guided .scene-tools,.story-guided .scene-foot,.story-guided #panel,.story-guided .scene-top { visibility:hidden; pointer-events:none; }
.story-guided #panel { display:none; }
.story-guided #loading { inset:auto 20px 80px auto; padding:12px 16px; font-size:12px; border-radius:8px; background:#eef1f8d9; height:auto; max-width:65%; }
.story-guided footer { display:none; }
@media(min-width:701px) { .story-guided #scene-wrap,.story-poster { bottom:66px; } }

/* Свободный режим */
.story-free .story-rail { display:none; }
.story-free #story-status { display:none; }
.story-free-banner { display:none; position:absolute; top:18px; left:38px; right:38px; justify-content:space-between; align-items:center; z-index:5; font-size:12px; }
.story-free-banner span { letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--brand); }
.story-free-banner button { font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.story-free .story-free-banner { display:flex; }
.story-free #panel { top:60px; max-height:calc(100% - 170px); }
.story-free .scene-top { top:58px; }
.story-free #overview h1 { font-size:30px; }
.story-free #overview .pilot-entry { display:none; }
.story-free .catalog-stat { margin-top:16px; }
.story-free .intro { font-size:12px; }
/* Свободный режим — стабильная рабочая область; вернуться к маршруту можно только явной кнопкой */
.story-free #story-chapters { display:none; }
.story-free #story-wrap #explore { position:relative; top:auto; }
.story-other-page .story-skip { display:none; }
.story-other-page header .window-nav { margin-left:auto; }
.story-other-page footer { display:block; }

@media(min-width:1700px) {
  header .brand { font-size:clamp(38px, calc(2.4 * var(--u)), 52px); }
  header .nav,header .window-nav { font-size:clamp(13px, calc(.85 * var(--u)), 16px); }
  .story-skip,header .lead-cta { font-size:clamp(12px, calc(.75 * var(--u)), 14px); }
  #story-counter,#story-current { font-size:clamp(13px, calc(.85 * var(--u)), 17px); }
}
@media(max-width:1000px) { header { padding:0 24px; gap:20px; } header nav { margin-left:0; gap:18px; } .story-copy { width:34vw; } .story-copy h1,.story-copy h2 { font-size:42px; } .story-copy p { font-size:14px; } .story-skip { padding:10px 13px; } .lead-cta { padding:0 16px; } header .window-nav { display:none; } .story-facts { grid-template-columns:repeat(2,auto); } }

@media(max-width:700px) {
  :root { --story-header:64px; }
  header { padding:0 16px; gap:12px; flex-wrap:nowrap; }
  header .brand { font-size:32px; }
  header nav { gap:12px; margin-left:auto; }
  header .nav { font-size:12px; }
  header .header-cta { display:none; }
  .story-skip { flex:0 0 32px; width:32px; height:32px; overflow:hidden; padding:0; font-size:0!important; border-radius:50%; }
  .story-skip:after { content:'↗' / ''; font-size:16px; }
  .story-free .story-skip:after { content:'↑' / ''; }
  .story-chapter { min-height:650px; height:118svh; padding:0 20px; align-items:flex-start; }
  .story-intro { min-height:590px; height:calc(118svh - var(--story-header)); }
  .story-final { height:calc(100svh - var(--story-header)); min-height:0; }
  .story-copy { width:100%; max-width:460px; top:calc(var(--story-header) + 10px); padding:16px 0 14px; background:linear-gradient(var(--stage) 84%,#e4e9f200); }
  .story-kicker { font-size:11px; margin-bottom:10px; }
  .story-copy h1,.story-copy h2 { font-size:34px; margin-bottom:12px; }
  .story-copy h1 br,.story-copy h2 br { display:none; }
  .story-copy p { font-size:14px; line-height:1.5; max-width:none; }
  .story-copy small { font-size:11px; margin-top:8px; }
  .story-fact { display:inline-flex; padding:10px 0 2px; gap:10px; }
  .story-fact strong { font-size:40px; }
  .story-fact span { font-size:11px; }
  .story-pair strong { font-size:32px; }
  .story-actions { margin-top:10px; gap:10px 18px; }
  .story-actions .lead-cta { min-height:40px; padding:0 16px; font-size:11px; }
  .story-text-link { font-size:12px; }
  .story-intro .story-text-link { display:none; }
  .story-facts { display:none; }
  .story-copy .story-disclaimer { margin-top:12px; font-size:10px; line-height:1.45; }
  .story-guided #scene-wrap,.story-poster { inset:290px 0 58px; height:auto; }
  .story-guided #scene-wrap { --stage-inset:0; }
  #story-wrap #scene-wrap { min-height:0; }
  /* На узком экране четыре полные плашки налезают друг на друга — только имя */
  .story-guided #labels .building-label { min-width:0; padding:5px 8px; }
  .story-guided #labels .building-label strong { font-size:11px; line-height:1.4; }
  .story-guided #labels .building-label span { display:none; }
  .story-guided #scene-wrap:after { background:linear-gradient(var(--stage),transparent 8%); }
  .story-poster img { object-fit:cover; }
  .story-poster[data-view="top"] img { object-fit:contain; }
  .story-poster:after { background:linear-gradient(var(--stage),transparent 10%); }
  .story-status { top:auto; bottom:62px; right:12px; left:12px; justify-content:center; margin:auto; font-size:10px; border:0; border-radius:0; background:#e4e9f2c7; padding:6px; }
  .story-rail { height:56px; padding:0 12px 0 16px; gap:10px; }
  .story-dots { display:none; }
  #story-counter { font-size:13px; white-space:nowrap; }
  #story-current { display:none; }
  #story-chapter-menu { display:block; min-width:0; flex:1; }
  #story-next { width:40px; height:44px; flex:0 0 40px; }
  .rail-cta { display:inline-flex; min-height:38px; padding:0 14px; font-size:11px; }
  /* Финальный каталог — своя прокручиваемая панель, размеры сцены не меняются при входе в свободный режим */
  .story-free #explore { height:calc(100svh - var(--story-header))!important; min-height:0; overflow:hidden!important; background:var(--stage); }
  .story-free #scene-wrap { position:absolute; inset:82px 0 auto; height:42svh; }
  .story-free #panel { position:absolute; top:calc(42svh + 126px)!important; bottom:0; left:0; right:0; width:100%!important; margin:0; padding:20px 24px 36px; max-height:none; overflow-y:auto; overscroll-behavior:contain; background:var(--paper); border-radius:0; }
  .story-free .story-free-banner { top:14px; left:19px; right:19px; font-size:11px; }
  .story-free .story-free-banner button { font-size:11px; }
  .story-free .scene-top { top:44px; left:18px; right:18px; transform:none; }
  .story-free .scene-tools { top:calc(42svh + 36px); bottom:auto; left:18px; right:18px; }
  .story-free .scene-foot { position:absolute; top:calc(42svh + 81px); bottom:auto; height:42px; display:flex; align-items:center; gap:12px; font-size:10px; z-index:5; padding:4px 18px; }
  .story-free .scene-foot .model-notice,.story-free .model-notice,.story-free .scene-foot #landscape-toggle { font-size:10px; }
  .story-free .scene-foot .model-notice { max-width:170px; }
  .story-free #mobile-select-button { display:none; }
  .story-free #story-chapters { margin-top:calc(-100svh + var(--story-header)); }
  .story-free #overview .eyebrow,.story-free #overview .intro { display:none; }
  .story-free #overview h1 { font-size:24px; margin:0 0 10px; }
  .story-free #overview h1 br { display:none; }
  .story-free .select-hint { margin:15px 0 10px; }
}
@media(max-width:360px) { header { padding:0 12px; gap:9px; } header nav { gap:9px; } header .nav { font-size:11px; } .story-chapter { padding-left:16px; padding-right:16px; } .story-copy h1,.story-copy h2 { font-size:30px; } .story-rail { padding:0 10px; gap:8px; } .rail-cta { padding:0 10px; } }
@media(max-height:540px) and (min-width:701px) {
  :root { --story-header:58px; }
  header .brand { font-size:30px; }
  .story-rail { height:50px; }
  .story-guided #scene-wrap,.story-poster { bottom:50px; }
  .story-poster { left:34%; }
  .story-guided #scene-wrap { --stage-inset:.34; }
  .story-facts { display:none; }
  .story-chapter { padding:20px 4.3vw 35px; min-height:600px; }
  .story-copy { width:30vw; top:calc(var(--story-header) + 12px); }
  .story-copy h1,.story-copy h2 { font-size:30px; margin-bottom:10px; }
  .story-kicker { font-size:10px; margin-bottom:10px; }
  .story-copy p { font-size:12px; line-height:1.5; }
  .story-copy small { font-size:10px; }
  .story-fact { padding:8px 0; }
  .story-fact strong { font-size:40px; }
  .story-actions { margin-top:10px; }
  .story-status { top:10px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .story-image-enter,.story-guided #labels .building-label,.story-guided #labels .amenity-label { animation:none; }
  .story-dots button i,.story-anim .story-copy > * { transition:none; }
  .story-anim .story-chapter:not(.is-in) .story-copy > * { opacity:1; translate:none; }
}

/* Форма заявки: одна модалка на все кнопки [data-lead] */
.lead { width:min(440px,calc(100% - 32px)); max-height:calc(100svh - 32px); padding:0; border:0; border-radius:20px; color:#fff; background:linear-gradient(160deg,#2a38b8 0%,var(--brand) 28%,var(--brand-deep) 70%,var(--night)); overflow:auto; transition:opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), overlay .3s allow-discrete, display .3s allow-discrete; }
@starting-style { .lead[open] { opacity:0; transform:translateY(16px) scale(.98); } }
.lead::backdrop { background:#08114e8c; backdrop-filter:blur(4px); }
.lead-body { padding:34px 32px 26px; }
.lead-close { position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; font-size:24px; line-height:1; color:#ffffffcc; }
.lead-close:hover { filter:none; background:#ffffff1a; }
.lead-kicker { margin:0 0 12px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#dee8ffb3; }
.lead h2 { font-family:var(--display); font-weight:500; font-size:34px; line-height:1.05; text-transform:uppercase; margin:0 40px 10px 0; }
.lead-sub { margin:0 0 22px; font-size:14px; line-height:1.5; color:#dee8ffd9; }
.lead-field { display:grid; gap:6px; margin-bottom:12px; font-size:12px; color:#dee8ffcc; }
.lead-field input { height:50px; padding:0 16px; border:1px solid transparent; border-radius:12px; background:#fff; color:var(--ink); font:16px Inter,Arial,sans-serif; outline:none; }
.lead-field input:focus { border-color:var(--mist); box-shadow:0 0 0 3px #dee8ff59; }
.lead-field input[aria-invalid="true"] { border-color:#ff8a8a; box-shadow:0 0 0 3px #ff8a8a40; }
.lead-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead-consent { display:flex; gap:10px; align-items:flex-start; margin:14px 0 18px; font-size:12px; line-height:1.45; color:#dee8ffcc; cursor:pointer; }
.lead-consent input { flex:none; width:18px; height:18px; margin:0; accent-color:#fff; }
.lead-consent a { color:#fff; }
.lead-submit { width:100%; height:52px; border-radius:40px; background:#fff; color:var(--brand-deep); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:transform .2s, background .2s; }
.lead-submit:hover { filter:none; background:var(--mist); }
.lead-submit:active { transform:scale(.98); }
.lead-submit[aria-busy="true"] { opacity:.7; cursor:progress; }
.lead-error { margin:12px 0 0; font-size:13px; color:#ffc2c2; }
.lead-note { display:block; margin-top:16px; font-size:11px; line-height:1.45; color:#dee8ff8c; }
.lead-done { padding:46px 32px 34px; text-align:center; }
.lead-done b { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:#ffffff1f; font-size:28px; font-weight:400; }
.lead-done h2 { margin-right:0; }
.lead-done p { margin:0 0 24px; font-size:14px; line-height:1.5; color:#dee8ffd9; }
.lead-done .lead-submit { width:auto; padding:0 28px; }
.lead-done .lead-demo { margin-top:-12px; font-size:12px; color:#dee8ff99; }
.lead :focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media(max-width:700px) {
  .lead { width:100%; max-width:none; margin:auto 0 0; border-radius:20px 20px 0 0; }
  @starting-style { .lead[open] { transform:translateY(40px); } }
  .lead-body { padding:28px 20px 22px; }
  .lead h2 { font-size:28px; }
}
@media(prefers-reduced-motion:reduce) { .lead { transition:none; } }

/* Свой выпадающий список вместо системного (select-ui.js) */
select.ui-native { position:absolute!important; width:1px!important; height:1px!important; min-width:0!important; padding:0!important; border:0!important; opacity:0; pointer-events:none; clip-path:inset(50%); }
.ui-select-button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:36px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-family:Inter,Arial,sans-serif; font-size:13px; text-align:left; }
.ui-select-button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-select-button:after { content:''; flex:none; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; rotate:45deg; translate:0 -2px; opacity:.6; }
.ui-select-button[aria-expanded="true"]:after { rotate:225deg; translate:0 2px; }
.ui-select-button:disabled { opacity:.5; }
.ui-listbox { position:fixed; z-index:200; margin:0; padding:6px; list-style:none; max-height:min(320px,60svh); overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px #08114e24; font:14px Inter,Arial,sans-serif; color:var(--ink); outline:none; }
.ui-listbox[hidden] { display:none; }
.ui-listbox li { padding:10px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.ui-listbox li.active { background:var(--mist); }
.ui-listbox li[aria-selected="true"] { color:var(--brand); font-weight:600; }
.ui-listbox li[aria-disabled="true"] { opacity:.4; cursor:default; }
#story-chapter-menu + .ui-select-button { display:none; }
@media(max-width:700px) { #story-chapter-menu + .ui-select-button { display:flex; flex:1; height:44px; border:0; background:transparent; font-size:13px; } }