/* C бағыты · ортақ стиль: сахна, интерфейс («сайт» элементтері), жүктеуші */
:root{
  --cream:#EFE6D6; --cream-2:#F6EFE3; --terra:#B5532E; --terra-d:#9A4322; --ochre:#D9A441; --teal:#1F4E5A;
  --brown:#3A2418; --ink:#24150D; --night:#0B0705;
  /* Мәтінге арналған күшті токендер (проектор, контраст аудиті 17.10):
     кіші мәтін (< 44 px): қараңғыда --gold-txt / --cream-txt-2, кремде --terra-txt / --teal-txt / --ink-2 (≥ 7:1)
     ірі мәтін (≥ 44 px): --gold-hi қараңғыда, --terra-hi / --teal кремде (≥ 4.5:1) */
  --gold-txt:#F3DCAB; --gold-hi:#EDCF92; --cream-txt-2:#EDE4D5;
  --terra-txt:#5E2611; --terra-hi:#7E3417; --teal-txt:#12343D; --ink-2:#3B2B20;
  --serif:'Noto Serif Display', 'Times New Roman', serif;
  --sans:'Golos Text', 'Segoe UI', Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--night);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;user-select:none}
body.no-cursor, body.no-cursor *{cursor:none!important}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
#deck{position:fixed;inset:0;z-index:1;pointer-events:none}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.scenes{position:absolute;inset:0}
.scene{position:absolute;inset:0;visibility:hidden}
.scene.is-active{visibility:visible}

/* ---- Интерфейс: сайттағыдай жіңішке «chrome» ---- */
.chrome{position:absolute;inset:0;z-index:20;font-family:var(--sans);pointer-events:none}
.chrome-top{position:absolute;left:72px;right:72px;top:46px;display:flex;align-items:center;justify-content:space-between;
  color:var(--cream-2);font-size:17px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.chrome-brand{display:flex;align-items:center;gap:14px}
.chrome-brand svg{width:44px;height:22px;fill:none;stroke:var(--ochre);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chrome-forum{display:flex;align-items:center;gap:14px}
.chrome-forum i{width:7px;height:7px;border-radius:50%;background:var(--ochre);display:inline-block;box-shadow:0 0 12px 2px rgba(217,164,65,.7)}
.chrome-bottom{position:absolute;left:72px;right:72px;bottom:40px;display:flex;align-items:flex-end;justify-content:space-between}
.chrome-count{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:.14em;color:var(--cream-2);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.chrome-count b{font-size:30px;font-weight:700;letter-spacing:.02em}
.chrome-count i{font-style:normal;opacity:.85}
.chrome-left{display:flex;align-items:baseline;gap:22px}
.chrome-section{font-size:16px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-2);opacity:.85}
.chrome-next{display:flex;align-items:center;gap:16px;color:var(--ink);font-size:16px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.chrome-next .arrow{width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(36,21,13,.55);display:grid;place-items:center}
.chrome-next svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chrome-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(239,230,214,.18)}
.chrome-progress i{position:absolute;inset:0;background:var(--ochre);transform-origin:0 50%;transform:scaleX(0)}

#loader{position:fixed;inset:0;z-index:50;background:var(--night);display:grid;place-items:center;color:rgba(239,230,214,.5);
  font:600 14px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
#blackout{position:fixed;inset:0;z-index:60;background:#000;opacity:0;visibility:hidden}

/* 1-бетте үлкен тақырып тұр, сондықтан логотип мәтіні жасырын */
body.on-p01 .chrome-brand{opacity:0!important}

/* Мәтін маскалары (src/core/text.js): кесу аумағы жолдан 0.34em үлкен — әріптің құйрығы мен белгілері кесілмейді,
   ал жасырын жол 175 %-ға жылжып, visibility: hidden болады. Тыныш күйде маска мүлдем жоқ. */
.tl-line-mask{overflow:visible!important;clip-path:inset(-.34em -.6em -.34em -.6em)}
.tc-layer{position:absolute;left:0;top:0;right:0;bottom:0;visibility:visible;pointer-events:none}
/* Беттің реңкі (Deck.register({ tone })) → body.tone-*: интерфейс түсі соған бейімделеді
   mixed (1-бет): жоғары/санағыш ашық, «Келесі» қою · dark: бәрі ашық · light: бәрі қою */
body.tone-dark .chrome-next{color:var(--cream-2)}
body.tone-dark .chrome-next .arrow{border-color:rgba(239,230,214,.55)}
body.tone-dark .chrome-next svg{stroke:var(--cream-2)}
body.tone-light .chrome-top,body.tone-light .chrome-count,body.tone-light .chrome-section{color:var(--ink)}
body.tone-light .chrome-progress{background:rgba(36,21,13,.14)}

/* Дайын емес беттің орнындағы белгі (src/scenes/pNN_*.js үлгісі) */
.stub{position:absolute;left:210px;top:300px;width:1500px}
.stub-eyebrow{display:flex;align-items:center;gap:18px;font:700 22px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--terra-d);margin:0 0 28px 4px}
.stub-eyebrow i{display:block;width:56px;height:2px;background:currentColor}
.stub-title{font:600 110px/1.02 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0}
.stub-note{margin:40px 0 0 6px;font:600 24px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(36,21,13,.5)}
body.tone-dark .stub-title{color:var(--cream-2)}
body.tone-dark .stub-eyebrow{color:var(--ochre)}
body.tone-dark .stub-note{color:rgba(239,230,214,.5)}
.stub-cssbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.9)}
body.tone-dark .stub-cssbg{filter:brightness(.55)}

/* Фото беттер (tone: 'photo'): интерфейс ашық түсті, жоғарғы/төменгі жолақтың артында жұмсақ қараңғы скрим */
body.tone-photo .chrome::before,body.tone-photo .chrome::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
body.tone-photo .chrome::before{top:0;height:190px;background:linear-gradient(180deg,rgba(8,5,3,.72),rgba(8,5,3,.38) 55%,rgba(8,5,3,0))}
body.tone-photo .chrome::after{bottom:0;height:200px;background:linear-gradient(0deg,rgba(8,5,3,.74),rgba(8,5,3,.36) 55%,rgba(8,5,3,0))}
body.tone-photo .chrome-next{color:var(--cream-2)}
body.tone-photo .chrome-next .arrow{border-color:rgba(239,230,214,.7)}
body.tone-photo .chrome-next svg{stroke:var(--cream-2)}