/* assets/css/tokens.css */
/* Canonical design tokens. Regenerate copied assets with sync_components.py. */
:root {
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --accent: #ff3b30;
  --surface: #ffffff;
  --ink: #000000;
  --color-1: #fff;
  --color-2: #000;
  --color-3: #ff3b30;
  --color-4: #ffffff;
  --color-5: rgba(0,0,0,0.12);
  --color-6: rgba(0,0,0,0.5);
  --color-7: rgba(0,0,0,0.35);
  --color-8: rgba(255,255,255,0.2);
  --color-9: #000000;
  --color-10: #f0f0f0;
  --color-11: #999;
  --color-12: #666;
  --color-13: #333;
  --color-14: #00c853;
  --color-15: rgba(0,0,0,0.8);
  --color-16: rgba(255,255,255,0.9);
  --color-17: rgba(0,0,0,0.3);
  --color-18: rgba(0,0,0,0.85);
  --color-19: #444;
  --color-20: #666666;
  --color-21: rgba(0,0,0,.10);
  --color-22: rgba(0,0,0,.92);
  --color-23: rgba(0,0,0,.55);
  --color-24: rgba(0,0,0,.40);
  --color-25: rgba(0,0,0,.14);
  --color-26: rgba(0,0,0,.08);
  --color-27: rgba(0,0,0,.24);
  --color-28: rgba(0,0,0,.45);
  --color-29: rgba(255,255,255,.14);
  --color-30: rgba(255,255,255,.18);
  --color-31: #111;
  --color-32: rgba(255,59,48,.95);
  --color-33: rgba(255,59,48,.22);
  --color-34: rgba(0,0,0,.88);
  --size-1: 1.75rem;
  --size-2: 16px;
  --size-3: 8px;
  --size-4: 12px;
  --size-5: 10px;
  --size-6: 20px;
  --size-7: 6px;
  --size-8: 9px;
  --size-9: 24px;
  --size-10: 32px;
  --size-11: 1rem;
  --size-12: 11px;
  --size-13: 100px;
  --size-14: 60px;
  --size-15: 80px;
  --size-16: 40px;
  --size-17: 14px;
  --size-18: 18px;
  --size-19: 28px;
  --size-20: 15px;
  --size-21: 13px;
  --size-22: 120px;
  --size-23: 160px;
  --size-24: 140px;
  --size-25: -40px;
  --size-26: 48px;
  --size-27: 56px;
  --size-28: 36px;
  --size-29: -60px;
  --size-30: 64px;
  --size-31: -80px;
  --size-32: 4px;
  --size-33: 1px;
  --size-34: 90px;
  --size-35: 50px;
  --size-36: 22px;
  --size-37: 2px;
  --size-38: 0.75rem;
  --size-39: 180px;
  --size-40: 258px;
  --size-41: 300px;
  --size-42: 200px;
  --size-43: 340px;
  --size-44: 210px;
  --size-45: 250px;
  --size-46: 360px;
  --size-47: 0.6em;
  --size-48: 19px;
  --size-49: 17px;
  --size-50: 72px;
  --size-51: 30px;
  --size-52: 999px;
  --size-53: 150px;
  --size-54: 320px;
  --dimension-1: -0.01em;
  --dimension-2: 0.05em;
  --dimension-3: 1em;
  --dimension-4: 0.1em;
  --dimension-5: 1000px;
  --dimension-6: 0.02em;
  --dimension-7: 44px;
  --dimension-8: 1.5px;
  --dimension-9: 1400px;
  --dimension-10: 680px;
  --dimension-11: 720px;
  --dimension-12: 900px;
  --dimension-13: 0.15em;
  --dimension-14: 700px;
  --dimension-15: 1100px;
  --dimension-16: 3px;
  --dimension-17: 280px;
  --dimension-18: 7px;
  --dimension-19: 25px;
  --dimension-20: 34px;
  --dimension-21: 2800px;
  --typeface-1: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  --dimension-22: 800px;
  --dimension-23: 860px;
  --dimension-24: 420px;
  --dimension-25: .02em;
  --dimension-26: -.01em;
  --dimension-27: 54px;
  --dimension-28: -.005em;
  --dimension-29: 46px;
  --dimension-30: -.02em;
  --dimension-31: 70px;
  --dimension-32: -8px;
  --dimension-33: .06em;
  --dimension-34: -1px;
  --dimension-35: 112px;
  --dimension-36: -9999px;
}

/* css/base.css */
/* css/base.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--size-2);
  scroll-behavior: auto !important; /* Отключаем smooth scroll для надёжного скролла наверх */
}

body {
  font-family: var(--font-display);
  background: var(--color-2);
  color: var(--color-9);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* RTL Support */
body.rtl {
  direction: rtl;
}

body.rtl .constant-text {
  text-align: right;
}

body.rtl .ui-links {
  flex-direction: row-reverse;
}

body.rtl #name-layer {
  right: auto;
  left: 5vw;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* css/layout.css */
/* css/layout.css */

/* =========================================================
   GLOBAL - Запрет горизонтального скролла
   Карточки не выходят за границы viewport
   ========================================================= */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

/* =========================================================
   SLIDESHOWS
   ========================================================= */
.slideshow { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--color-1); }
.slideshow img.slide, .slideshow video.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}
.slideshow .slide.active { opacity: 1; z-index: 2; }

/* Видео карточка - обрезаем 5% снизу */
.card-video-vertical .slideshow video.slide {
  width: 100%;
  height: 105%;
  top: 0;
  left: 0;
}

/* =========================================================
   ТЕКСТОВЫЕ СЛОИ
   ========================================================= */
#constant-layer {
  position: fixed;
  top: 40vh;
  right: 5vw;
  text-align: right;
  z-index: 50;
  width: auto;
  pointer-events: none;
  opacity: 0;
  transform-origin: 100% 50%;
  will-change: transform;
}

#constant-layer.under-gallery { z-index: 1; }

.constant-text .line {
  font-family: var(--font-display);
  font-size: 2.6vw;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: var(--dimension-1);
  color: var(--color-2);
  text-transform: uppercase;
  white-space: nowrap;
}

#name-layer {
  position: fixed;
  bottom: 18vh;
  right: 3vw;
  text-align: right;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform-origin: right bottom;
  will-change: transform;
}

#name-layer.under-gallery { z-index: 1; }

.name-title {
  font-family: var(--font-display);
  font-size: 3vw;
  font-weight: 600;
  color: var(--color-3);
  text-transform: uppercase;
  line-height: 1;
}

/* =========================================================
   UI КНОПКИ
   ========================================================= */
.ui-layer {
  position: fixed;
  bottom: 5vh;
  right: 3vw;
  text-align: right;
  z-index: 100;
  opacity: 0;
  color: var(--color-2);
  transform-origin: bottom right;
  pointer-events: none;
}

.ui-links {
  font-family: var(--font-display);
  font-size: var(--size-1);
  font-weight: 600;
  display: flex;
  justify-content: flex-end;
  gap: var(--size-2);
  pointer-events: auto;
  text-transform: uppercase;
  letter-spacing: var(--dimension-1);
}

.link-item {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--size-37) solid currentColor;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.link-item:hover {
  opacity: 0.85;
}

.link-item.active {
  opacity: 1;
}

.divider { opacity: 0.35; }

/* =========================================================
   SCROLL CONTAINER
   ========================================================= */
.scroll-container { 
  position: relative; 
  z-index: 1;
  width: 100%; 
}

.scroll-container.gallery-active { z-index: 50; }

/* =========================================================
   HERO
   ========================================================= */
.hero { 
  height: 100vh; 
  width: 100%; 
  position: relative; 
  pointer-events: none; 
}

.hero-photo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10vw;
  height: auto;
  max-height: 70vh;
  z-index: 15;
  filter: grayscale(100%) contrast(1.1);
  will-change: transform, width, left, top;
}

.hero-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Intro text wrapper */
.intro-text-wrapper {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.intro-block {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.intro-block-1, .intro-block-3 { top: 3vh; }
.intro-block-2, .intro-block-4 { bottom: 3vh; }

.intro-line {
  font-family: var(--font-display);
  font-size: 5vw;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--dimension-2);
  white-space: nowrap;
}

.intro-line.red { color: var(--color-3); }
.intro-line.white { color: var(--color-4); }

/* Первая сцена intro: чёрный фон - оба текста КРАСНЫЕ */
.intro-block-1 .intro-line,
.intro-block-2 .intro-line {
  color: var(--color-3) !important;
}

/* Вторая сцена intro: красный фон - оба текста БЕЛЫЕ */
.intro-block-3 .intro-line,
.intro-block-4 .intro-line {
  color: var(--color-4) !important;
}

.hero-title-container {
  position: absolute;
  top: 5vh;
  right: 3vw;
  text-align: right;
  width: 60vw;
  z-index: 7;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 4.5vw;
  color: var(--color-2);
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Слова с кружочками не разрываются */
.hero-title .word-anim {
  white-space: nowrap;
  display: inline-block;
}

/* =========================================================
   БУКВА "О" КАК ФОТО
   ========================================================= */
.letter-o {
  display: inline-block;
  width: var(--dimension-3);
  height: var(--dimension-3);
  border-radius: 50%;
  overflow: hidden;
  vertical-align: baseline;
  position: relative;
  top: var(--dimension-4);
}

.letter-o img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================================================
   ДЕКОРАТИВНЫЙ СЛОЙ ELER
   ========================================================= */
.eler-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 45vw;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.eler-layer img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery { 
  position: relative; 
  z-index: 20; 
  padding: 0; 
}

.gallery-stage {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  background: transparent;
  overflow: clip;
  perspective: var(--dimension-5);
}

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
  background: var(--color-1);
  box-shadow: 0 var(--size-20) var(--size-16) var(--color-5);
  /* Предотвращаем выход за границы */
  contain: layout style;
}

/* Ограничиваем максимальную ширину карточек */
.card-small { width: min(16vw, 45vw); aspect-ratio: 3/4; }
.card-large { width: min(34vw, 90vw); aspect-ratio: 16/9; }
.card-vertical { width: min(18vw, 50vw); aspect-ratio: 9/16; }
.card-horizontal { width: min(26vw, 70vw); aspect-ratio: 4/3; }
.card-video-vertical { width: min(18vw, 50vw); aspect-ratio: 9/16; } /* Instagram Reels формат */

.footer { height: 25vh; background: var(--color-1); }
.footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: var(--size-3); }
.footer-copy { font-size: var(--size-4); color: var(--color-6); letter-spacing: var(--dimension-6); }
.footer-credit { font-size: var(--size-5); color: var(--color-7); }
.footer-credit a { color: var(--color-7); text-decoration: none; transition: opacity 0.2s ease; }
.footer-credit a:hover { opacity: 0.7; }

.mobile-footer { display: none; }
.eler-mobile-bg { display: none; }

/* =========================================================
   ЯЗЫКОВАЯ ПАНЕЛЬ
   ========================================================= */
.lang-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-2);
  z-index: 150;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.lang-panel.open { pointer-events: auto; }

.lang-panel-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-6);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lang-panel-inner::-webkit-scrollbar {
  display: none;
}

.lang-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-7);
  cursor: pointer;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.lang-item:hover {
  opacity: 0.7;
}

.lang-avatar {
  width: var(--size-28);
  height: var(--size-28);
  border-radius: 50%;
  overflow: hidden;
  border: var(--size-33) solid var(--color-8);
  transition: transform 0.3s ease;
}

.lang-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lang-name {
  font-family: var(--font-display);
  font-size: var(--size-8);
  font-weight: 500;
  color: var(--color-1);
  text-transform: none;
  letter-spacing: var(--dimension-6);
  white-space: nowrap;
}

/* Desktop - центрирование если помещается, hover +100% */
/* ТОЛЬКО для устройств с мышью/трекпадом */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .lang-panel-inner {
    justify-content: center;
    gap: var(--size-9);
    padding: var(--size-9) var(--size-10);
    overflow-x: visible;
  }
  
  .lang-item:hover .lang-avatar {
    transform: scale(2);
  }
  
  .lang-avatar {
    width: var(--dimension-7);
    height: var(--dimension-7);
  }
  
  .lang-name {
    font-size: var(--size-5);
  }
}

/* Tablet (НЕ touch) - скролл */
@media (min-width: 768px) and (max-width: 1199px) and (hover: hover) and (pointer: fine) {
  .lang-panel-inner {
    gap: var(--size-6);
    padding: var(--size-6) var(--size-9);
  }
  
  .lang-avatar {
    width: var(--size-16);
    height: var(--size-16);
  }
  
  .lang-item:hover .lang-avatar {
    transform: scale(1.5);
  }
}

/* =========================================================
   RTL SUPPORT (Arabic, Hebrew)
   Зеркальное отображение intro и hero
   ========================================================= */
body.rtl {
  direction: rtl;
}

body.rtl .constant-text {
  text-align: left;
}

body.rtl #constant-layer {
  right: auto;
  left: 5vw;
  text-align: left;
}

body.rtl #name-layer {
  right: auto;
  left: 3vw;
  text-align: left;
}

body.rtl .ui-layer {
  right: auto;
  left: 3vw;
  text-align: left;
}

body.rtl .ui-links {
  flex-direction: row-reverse;
}

body.rtl .hero-title-container {
  right: auto;
  left: 3vw;
  text-align: left;
}

/* RTL: intro блоки - зеркально */
body.rtl .intro-block {
  direction: rtl;
}

body.rtl .intro-line {
  direction: rtl;
}
@media (max-width: 768px) {
  .hero-photo-wrapper { width: 30vw; }
  .hero-title { font-size: 8vw; }
  .name-title { font-size: 5vw; }
  .constant-text .line { font-size: 4.5vw; }
  #name-layer { bottom: 20vh; right: 3vw; }
  .ui-links { font-size: var(--size-11); gap: var(--size-4); }
  .link-item { border-bottom-width: var(--dimension-8); }
  .card-small { width: 55vw; }
  .card-large { width: 75vw; }
  .card-vertical { width: 60vw; }
  .card-horizontal { width: 70vw; }
  .intro-block-1, .intro-block-3 { top: 5vh; }
  .intro-block-2, .intro-block-4 { bottom: 5vh; }
}

/* css/mobile.css */
/* css/mobile.css */

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ - ИРИНА КОСТИНА
   
   INTRO:
   - Фото ч/б маленькое по центру
   - Текст сверху +20%, текст снизу -20%
   
   HERO (после "ВПЕЧАТЛЕНИЙ"):
   - Фото пружиной на весь экран, становится цветным
   - "КОСТИНА ИРИНА" сверху красным
   - "Я СОЗДАЮ..." снизу белым
   
   GALLERY:
   - Белая шторка закрывает фото и имя
   - Текст меняет цвет на чёрный
   ========================================================= */

/* =========================================================
   TABLET (≤1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .hero-title { font-size: 5.5vw; }
  .constant-text .line { font-size: 2.2vw; }
  .name-title { font-size: 2.5vw; }
  .card-small { width: 20vw; }
  .card-large { width: 38vw; }
  .card-vertical { width: 22vw; }
  .card-horizontal { width: 30vw; }
}

/* =========================================================
   MOBILE (≤768px)
   ========================================================= */
@media (max-width: 768px) {
  
  body {
    background-color: var(--color-2);
    overflow-x: hidden;
  }
  
  .scroll-container { background: transparent; }
  
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: block;
    padding: 0;
    background: var(--color-2);
    overflow: visible;
  }
  
  /* =========================================================
     ФОТО - центр экрана
     INTRO: маленькое ч/б
     HERO: fullscreen цветное (после анимации из main.js)
     ========================================================= */
  .hero-photo-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    height: auto;
    z-index: 2;
    filter: grayscale(100%);
    pointer-events: none;
  }
  
  .hero-photo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .hero-title-container { display: none; }
  
  /* =========================================================
     INTRO TEXT - позиции +20% / -20%
     ========================================================= */
  .intro-text-wrapper {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
  }
  
  .intro-block {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 5vw;
  }
  
  /* Верхние блоки - подняты на 20% (было 3vh → стало ~23vh от верха) */
  .intro-block-1,
  .intro-block-3 {
    top: 8vh;
  }
  
  /* Нижние блоки - опущены на 20% (было 3vh → стало ~23vh от низа) */
  .intro-block-2,
  .intro-block-4 {
    bottom: 8vh;
  }
  
  .intro-line {
    font-family: var(--font-display);
    font-size: 9vw;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
  }
  
  .intro-line.red { color: var(--color-3); }
  .intro-line.white { color: var(--color-4); }
  
  /* =========================================================
     NAME LAYER - "КОСТИНА ИРИНА" сверху
     ========================================================= */
  #name-layer {
    position: fixed !important;
    top: 6vh !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    /* Card rotations come from mobile.js. */
    text-align: center;
    z-index: 5;
    pointer-events: none;
  }
  
  .name-title {
    font-size: 11vw;
    color: var(--color-3);
    line-height: 0.9;
    text-shadow: 0 var(--size-37) var(--size-51) var(--color-6);
  }
  
  /* =========================================================
     CONSTANT LAYER - "Я СОЗДАЮ..." снизу - ВСЕГДА ПОВЕРХ
     Поднят на 10% чтобы поместился полный текст
     ========================================================= */
  #constant-layer {
    position: fixed !important;
    top: auto !important;
    bottom: 16vh !important;
    left: 5vw !important;
    right: 5vw !important;
    text-align: left;
    z-index: 500 !important;
    pointer-events: none;
    transform-origin: left bottom !important;
  }
  
  .constant-text .line {
    font-size: 5vw;
    line-height: 1.2;
    color: var(--color-4);
    white-space: normal;
    text-shadow: 0 var(--size-37) var(--size-6) var(--color-15);
    transition: color 0.4s ease, text-shadow 0.4s ease;
    mix-blend-mode: normal;
  }
  
  /* Показываем ВСЕ 4 строки на mobile */
  .constant-text .line:nth-child(n+4) { 
    display: block; 
  }
  
  /* =========================================================
     UI LAYER - скрыт на mobile
     ========================================================= */
  .ui-layer { display: none !important; }
  
  /* =========================================================
     MOBILE FOOTER
     ========================================================= */
  .mobile-footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--size-28);
    justify-content: center;
    align-items: center;
    gap: 3vw;
    padding: 0 4vw;
    background: transparent;
    z-index: 150;
    font-family: var(--font-display);
    font-size: 2.6vw;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-4);
    transition: color 0.4s ease, background 0.4s ease;
  }
  
  .mobile-footer a, .mobile-footer span {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.7;
  }
  
  .mobile-footer a:hover, .mobile-footer span:hover {
    opacity: 1;
  }
  
  .mobile-footer .active {
    opacity: 1;
  }
  
  .mobile-footer .divider { opacity: 0.3; }
  
  /* =========================================================
     GALLERY - белая шторка
     ========================================================= */
  .gallery {
    position: relative;
    min-height: 200vh;
    padding: 0;
    background: var(--color-4);
    z-index: 10;
    overflow-x: clip;
    max-width: 100vw;
  }
  
  .gallery-stage {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 220vh;
    padding-top: 5vh;
    overflow-x: clip;
  }
  
  /* Desktop eler скрыт */
  .eler-layer { display: none !important; }
  
  /* =========================================================
     GALLERY ACTIVE - footer меняет фон, текст становится чёрным
     ========================================================= */
  body.gallery-active .constant-text .line {
    color: var(--color-9);
    text-shadow: none;
  }
  
  body.gallery-active .mobile-footer {
    color: var(--color-9);
    background: var(--color-16);
  }
  
  /* Текст "Я создаю..." ВСЕГДА поверх на mobile */
  #constant-layer.under-gallery {
    z-index: 500 !important;
  }
  
  /* =========================================================
     CARDS - draggable на mobile
     ========================================================= */
  .card {
    position: absolute;
    touch-action: auto;
    cursor: auto;
    background: var(--color-1);
    box-shadow: 0 var(--size-3) var(--dimension-19) var(--color-5);
    border-radius: var(--size-37);
    overflow: hidden;
    z-index: 100;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Card rotations come from mobile.js. */
  }
  
  .card:active { cursor: auto; }
  .card.dragging { z-index: 500 !important; box-shadow: 0 var(--dimension-19) var(--size-35) var(--color-17); }
  
  .card-small { width: 42vw; aspect-ratio: 3/4; }
  .card-large { width: 70vw; aspect-ratio: 16/9; }
  .card-vertical { width: 45vw; aspect-ratio: 9/16; }
  .card-horizontal { width: 60vw; aspect-ratio: 4/3; }
  .card-video-vertical { width: 45vw; aspect-ratio: 9/16; } /* Instagram Reels */
  
  /* =========================================================
     LANGUAGE PANEL
     ========================================================= */
  .lang-panel {
    height: 35vh;
    max-height: 35vh;
    background: var(--color-2);
    z-index: 500;
  }
  
  .lang-panel-inner {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 3vw 4vw;
    padding: 3vh 3vw;
    overflow-y: auto;
  }
  
  .lang-item {
    flex: 0 0 auto;
    width: calc(20% - 4vw);
    min-width: var(--size-35);
  }
  
  .lang-avatar {
    width: 10vw;
    height: 10vw;
    max-width: var(--size-35);
    max-height: var(--size-35);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .lang-avatar:hover { transform: scale(2); }
  
  .lang-name { font-size: 2vw; }
  
  .letter-o { width: var(--dimension-3); height: var(--dimension-3); }
  .footer { display: none; }
}


/* =========================================================
   LARGE PHONE (≤430px)
   ========================================================= */
@media (max-width: 430px) {
  .hero-photo-wrapper { width: 45vw; }
  .name-title { font-size: 12vw; }
  #name-layer { top: 5vh !important; }
  .intro-line { font-size: 10vw; }
  .intro-block-1, .intro-block-3 { top: 10vh; }
  .intro-block-2, .intro-block-4 { bottom: 10vh; }
  .constant-text .line { font-size: 5.5vw; }
  #constant-layer { bottom: 5vh !important; }
  .mobile-footer { font-size: 2.8vw; height: var(--dimension-20); gap: 2.5vw; }
}

/* =========================================================
   STANDARD PHONE (≤375px)
   ========================================================= */
@media (max-width: 375px) {
  .hero-photo-wrapper { width: 50vw; }
  .name-title { font-size: 13vw; }
  .intro-line { font-size: 11vw; }
  .constant-text .line { font-size: 6vw; }
  .mobile-footer { font-size: 3vw; height: var(--size-10); gap: 2vw; }
  .card-small { width: 48vw; }
  .card-large { width: 80vw; }
}

/* =========================================================
   SMALL PHONE (≤320px)
   ========================================================= */
@media (max-width: 320px) {
  .name-title { font-size: 14vw; }
  .intro-line { font-size: 12vw; }
  .constant-text .line { font-size: 6.5vw; }
  .mobile-footer { font-size: 3.2vw; height: var(--size-51); gap: 1.5vw; }
}

/* =========================================================
   LANDSCAPE - фикс горизонтального скролла (DESKTOP ONLY)
   ========================================================= */
@media (max-width: 1024px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  /* Жёсткий блок горизонтального скролла на уровне документа */
  html {
    overflow-x: hidden;
    overflow-x: clip;
  }
  
  body {
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }
  
  /* Scroll container не должен расширяться */
  .scroll-container {
    overflow-x: clip;
    max-width: 100vw;
  }
  
  /* Gallery клипает контент внутри себя */
  .gallery {
    overflow-x: clip;
    max-width: 100vw;
  }
  
  .gallery-stage {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }
  
  /* Hero не должен просвечивать */
  .hero-photo-wrapper {
    max-width: 100vw;
  }
  
  /* Размеры шрифтов для landscape */
  .name-title { font-size: 8vh; }
  #name-layer { top: 3vh !important; }
  .intro-line { font-size: 8vh; }
  .intro-block-1, .intro-block-3 { top: 5vh; }
  .intro-block-2, .intro-block-4 { bottom: 5vh; }
  .constant-text .line { font-size: 3.5vh; }
  .mobile-footer { height: var(--size-51); font-size: 2.5vh; }
}

/* Дополнительный фикс для узкого landscape (телефоны) - только desktop */
@media (max-width: 768px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  html, body {
    overscroll-behavior-x: none;
  }
}

/* =========================================================
   RTL SUPPORT - MOBILE (Arabic, Hebrew)
   ========================================================= */
@media (max-width: 768px) {
  body.rtl #constant-layer { 
    left: auto !important; 
    right: 5vw !important; 
    text-align: right; 
  }
  
  body.rtl #name-layer {
    text-align: center;
  }
  
  body.rtl .mobile-footer { 
    flex-direction: row-reverse; 
  }
  
  body.rtl .intro-block {
    direction: rtl;
  }
  
  body.rtl .intro-line {
    direction: rtl;
  }
  
  body.rtl .constant-text .line {
    text-align: right;
  }
}

/* =========================================================
   TOUCH DEVICE DETECTION
   Телефоны в landscape не должны получать desktop стили
   ========================================================= */

/* =========================================================
   IS-TOUCH: Любой touch device (JS добавляет класс)
   Только переключает UI элементы, не трогает layout
   ========================================================= */

/* Touch PORTRAIT - скрываем desktop UI */
html.is-touch.is-portrait .ui-layer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Touch LANDSCAPE - ui-layer виден (desktop стили) */
/* Не добавляем правил - пусть layout.css работает */

/* Touch portrait - скрываем desktop элементы */
html.is-touch.is-portrait .hero-title-container {
  display: none !important;
  visibility: hidden !important;
}

html.is-touch.is-portrait .eler-layer {
  display: none !important;
  visibility: hidden !important;
}

html.is-touch.is-portrait .mobile-footer {
  display: flex !important;
}

html.is-touch.is-portrait .ui-layer {
  display: none !important;
}

/* Touch landscape - НЕ ТРОГАЕМ, пусть desktop стили работают */
/* Desktop CSS использует vw/vh - автоматически масштабируется */

/* =========================================================
   IS-DESKTOP: Устройства с мышью/трекпадом
   ========================================================= */
html.is-desktop .ui-layer {
  display: block !important;
}

html.is-desktop .mobile-footer {
  display: none !important;
}

/* =========================================================
   MOBILE LANDSCAPE: Перенесено в mobile-landscape.css
   ========================================================= */

/* Fallback для hover/pointer если JS не загрузился - ТОЛЬКО PORTRAIT */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .ui-layer {
    display: none !important;
  }
  
  .mobile-footer {
    display: flex !important;
  }
  
  .hero-title-container {
    display: none !important;
  }
  
  .eler-layer {
    display: none !important;
  }
}

/* Fallback для LANDSCAPE touch - показываем desktop элементы */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .ui-layer {
    display: block !important;
  }
  
  .mobile-footer {
    display: none !important;
  }
  
  .hero-title-container {
    display: block !important;
  }
  
  .eler-layer {
    display: block !important;
  }
  
  #name-layer {
    display: block !important;
  }
  
  .eler-sticky {
    display: none !important;
  }
}

/* =========================================================
   IS-DESKTOP: Устройства с мышью/трекпадом
   ========================================================= */
html.is-desktop .ui-layer {
  display: block;
}

html.is-desktop .mobile-footer {
  display: none !important;
}

html.is-desktop .eler-layer {
  display: block;
}

/* Fallback: media queries для случаев когда JS не загрузился */
/* Только для PORTRAIT touch устройств */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  html:not(.is-desktop) .ui-layer {
    display: none !important;
  }
  
  html:not(.is-desktop) .mobile-footer {
    display: flex !important;
  }
  
  html:not(.is-desktop) .hero-title-container {
    display: none !important;
  }
  
  html:not(.is-desktop) .eler-layer {
    display: none !important;
  }
}
/*
   DESKTOP (mouse/trackpad devices only)
   Гарантирует что desktop стили применяются только к настоящим десктопам
*/
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  /* Desktop UI виден */
  .ui-layer {
    display: block;
  }
  
  /* Mobile footer скрыт */
  .mobile-footer {
    display: none;
  }
  
  /* Desktop Euler виден */
  .eler-layer {
    display: block;
  }
  
  /* Hero title виден */
  .hero-title-container {
    display: block;
  }
}

/* css/mobile-landscape.css */
/* css/mobile-landscape.css */
/* =========================================================
   MOBILE LANDSCAPE - Умное масштабирование
   
   Desktop CSS работает, но размеры адаптируются через clamp()
   для корректного отображения на узком landscape экране.
   
   Принцип: min() выбирает меньшее значение между desktop 
   и масштабированным для landscape.
   ========================================================= */

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  
  /* === СКРЫТЬ MOBILE ЭЛЕМЕНТЫ === */
  .eler-sticky {
    display: none !important;
  }
  
  .mobile-footer {
    display: none !important;
  }
  
  /* =========================================================
     УМНОЕ МАСШТАБИРОВАНИЕ
     Desktop ~1920px, Landscape ~896px = коэффициент ~0.5
     Используем min() чтобы не превышать desktop размеры
     ========================================================= */
  
  /* === HERO TITLE (текст с кружочками) === */
  .hero-title-container {
    top: 3vh;
    width: 65vw;
  }
  
  .hero-title {
    font-size: min(4.5vw, 8vh);
  }
  
  /* === CONSTANT LAYER ("Я создаю...") === */
  #constant-layer {
    top: auto;
    bottom: 22vh;
    right: 3vw;
  }
  
  .constant-text .line {
    font-size: min(2.6vw, 4.5vh);
  }
  
  /* === NAME LAYER ("КОСТИНА ИРИНА") === */
  #name-layer {
    bottom: 12vh;
    right: 3vw;
  }
  
  .name-title {
    font-size: min(3vw, 5vh);
  }
  
  /* === UI LAYER (links) === */
  .ui-layer {
    bottom: 2vh;
    right: 3vw;
  }
  
  .ui-links {
    font-size: min(var(--size-1), 3.5vh);
    gap: var(--size-3);
  }
  
  /* === HERO PHOTO === */
  .hero-photo-wrapper {
    max-width: min(25vw, 45vh);
  }
  
  /* === EULER === */
  .eler-layer {
    width: min(45vw, 70vh);
  }
  
  /* === INTRO TEXT === */
  .intro-line {
    font-size: min(5vw, 9vh);
  }
  
  /* === CARDS === */
  .card-small { width: min(16vw, 28vh); }
  .card-large { width: min(34vw, 60vh); }
  .card-vertical { width: min(18vw, 32vh); }
  .card-horizontal { width: min(26vw, 46vh); }
  .card-video-vertical { width: min(18vw, 32vh); }
  
  /* === LANGUAGE PANEL === */
  .lang-panel-inner {
    gap: var(--size-5);
    padding: var(--size-3) var(--size-4);
  }
  
  .lang-avatar {
    width: min(var(--size-28), 8vh);
    height: min(var(--size-28), 8vh);
  }
  
  .lang-name {
    font-size: min(var(--size-38), 2vh);
  }
}

/* css/euler.css */
/* css/euler.css */

:root {
  --euler-black: var(--color-9);
  --euler-red: var(--color-3);
}

/* Desktop Euler в gallery */
.euler-layer.desktop-only {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.euler-layer.desktop-only svg {
  width: min(140vw, 140vh);
  height: auto;
  max-width: var(--dimension-21);
  opacity: 0.18;
}

/* Mobile: eler-sticky */
.eler-sticky { display: none; }

@media (max-width: 768px) {
  .euler-layer.desktop-only { display: none !important; }
  
  .eler-sticky {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 30vh;
    padding: 3vh 0;
    z-index: 10;
    background: var(--color-4);
  }
  
  .eler-sticky .euler-layer {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  
  .eler-sticky #eulerScene {
    width: 90vw;
    height: auto;
    max-height: 30vh;
    opacity: 0.85;
  }
}

/* Touch Portrait: eler-sticky для мобильной версии */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .eler-layer { display: none !important; }
  
  .eler-sticky {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 25vh;
    padding: 2vh 0;
    z-index: 10;
    background: var(--color-4);
  }
  
  .eler-sticky .euler-layer {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    box-sizing: border-box;
  }
  
  .eler-sticky #eulerScene {
    width: min(80vw, 25vh);
    height: auto;
    max-height: 25vh;
    opacity: 0.85;
    display: block;
    margin: 0 auto;
    flex-shrink: 0;
  }
  
  #final-text,
  #final-text tspan {
    font-family: var(--typeface-1);
  }
}

/* Touch Landscape = DESKTOP: показываем eler-layer, скрываем eler-sticky */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .eler-sticky {
    display: none !important;
  }
  
  .eler-layer {
    display: block !important;
  }
}

/* SVG Elements */
#eulerScene line, #angle-arc {
  stroke: var(--euler-black);
  stroke-width: 27;
  fill: none;
  stroke-linecap: round;
}

#unit-circle {
  stroke: var(--euler-red);
  stroke-width: 180;
  fill: none;
}

.dash { stroke-dasharray: 66 66; }

#eulerScene text {
  font-family: var(--font-body);
  fill: var(--euler-black);
  font-weight: 800;
}

#re, #im, #cos, #sin { font-size: var(--size-39); }
#angle-x { font-size: var(--size-39); opacity: 0; }
#f1 { font-size: var(--size-40); opacity: 0; }
#f2 { font-size: var(--size-41); opacity: 0; }
.i-red, .re-red, .im-red { fill: var(--euler-red); }
#point-e { fill: var(--euler-red); opacity: 0; }
#label-e { font-size: var(--size-42); opacity: 0; }

#final-text {
  font-family: var(--font-display);
  font-size: var(--size-43);
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--color-18);
}

#final-text tspan,
#d-final-text tspan {
  text-anchor: middle;
}

#d-final-text {
  font-family: var(--font-display);
  font-size: var(--size-43);
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--color-18);
}

@media (max-width: 768px) {
  #unit-circle { stroke-width: 130; }
  #eulerScene line, #angle-arc { stroke-width: 20; }
  #re, #im, #cos, #sin, #angle-x { font-size: var(--size-23); }
  #f1 { font-size: var(--size-44); }
  #f2 { font-size: var(--size-45); }
  #final-text { font-size: var(--size-46); }
}

/* Desktop SVG */
#eulerSceneDesktop line, #d-angle-arc {
  stroke: var(--euler-black);
  stroke-width: 27;
  fill: none;
  stroke-linecap: round;
}

#d-unit-circle {
  stroke: var(--euler-red);
  stroke-width: 90;
  fill: none;
}

#eulerSceneDesktop .dash { stroke-dasharray: 66 66; }

#eulerSceneDesktop text {
  font-family: var(--font-body);
  fill: var(--euler-black);
  font-weight: 800;
}

#d-re, #d-im, #d-cos, #d-sin { font-size: var(--size-39); }
#d-angle-x { font-size: var(--size-39); opacity: 0; }
#d-f1 { font-size: var(--size-40); opacity: 0; }
#d-f2 { font-size: var(--size-41); opacity: 0; }
#d-point-e { fill: var(--euler-red); opacity: 0; }
#d-label-e { font-size: var(--size-42); opacity: 0; }

/* d-final-text стили уже объявлены выше */

/* css/repair.css */
button { font: inherit; color: inherit; cursor: pointer; }
button.lang-item, #lang-btn, #mobile-lang-btn { background: transparent; border: 0; padding: 0; }
:focus-visible { outline: var(--dimension-16) solid var(--color-3); outline-offset: var(--size-32); }
.lang-panel[hidden] { display: none !important; }
.lang-panel.open { opacity: 1 !important; transform: translateY(0) !important; }
.lang-name { white-space: normal; }
html[class*="script-"] body, html[class*="script-"] .word-anim, html[class*="script-"] .line, html[class*="script-"] h1, html[class*="script-"] h2 { font-family: var(--script-font), sans-serif; }
#skip-intro { position: fixed; inset: var(--size-4) var(--size-4) auto auto; z-index: 10000; padding: var(--size-3) var(--size-2); background: var(--color-1); color: var(--color-2); }
.intro-done .intro-text-wrapper { display: none; }
.native-motion #constant-layer, .native-motion #name-layer, .native-motion .ui-layer, .native-motion .mobile-footer { opacity: 1; }
.native-motion .hero-photo-wrapper { filter: none; }
.native-motion .hero, .native-motion body { background: var(--color-3); }
.native-motion .hero-photo-wrapper { width: 100%; height: 100%; left: 0; top: 0; transform: none; }
.native-motion .hero-photo-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.native-motion .intro-text-wrapper { display: none; }
.native-motion .gallery-stage { position: relative; }
.native-motion .card { touch-action: auto; opacity: 1; }
.method-video video { max-width: 100%; height: auto; }
@media (min-width: 769px) {
 .native-motion .gallery-stage { display: flex; flex-wrap: wrap; gap: var(--size-9); padding: var(--size-9); height: auto; min-height: 0; }
 .native-motion .card { position: relative; inset: auto; width: var(--dimension-17); height: var(--size-46); transform: none; }
 .native-motion #constant-layer, .native-motion #name-layer { position: absolute; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 768px) {
 .mobile-footer { flex-wrap: wrap; justify-content: center; gap: var(--size-32) var(--dimension-18); padding: var(--size-3); }
 .hero-title-container { display: block !important; position: absolute !important; width: var(--size-33); height: var(--size-33); overflow: hidden; clip-path: inset(50%); }
}
/* The author copy remains on the hero; the gallery needs an unobstructed viewport. */
.native-motion body.gallery-active #constant-layer,
.native-motion body.gallery-active #name-layer { visibility: hidden; }

.native-motion body.gallery-active .mobile-footer { background: var(--surface)!important; color: var(--ink)!important; opacity: 1!important; }
.native-motion body.gallery-active .mobile-footer a, .native-motion body.gallery-active .mobile-footer button { color: var(--ink)!important; opacity: 1!important; }

/* Desktop language choices stay visible and hover never covers the label. */
@media (min-width: 769px) {
  body:not(.academy-page) .lang-panel-inner {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px 12px;
    padding: 24px;
    overflow: visible;
  }
  body:not(.academy-page) .lang-item { min-width: 0; gap: 10px; }
  body:not(.academy-page) .lang-avatar { width: 44px; height: 44px; flex-shrink: 0; }
  body:not(.academy-page) .lang-item:hover .lang-avatar { transform: scale(1.12); }
  body:not(.academy-page) .lang-name {
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  body:not(.academy-page) .lang-panel { max-height: 75svh; overflow-y: auto; }
}

.lang-item:lang(zh) .lang-name { font-family: "Noto Sans SC", sans-serif; }
.lang-item:lang(ja) .lang-name { font-family: "Noto Sans JP", sans-serif; }
.lang-item:lang(ko) .lang-name { font-family: "Noto Sans KR", sans-serif; }
.lang-item:lang(hi) .lang-name { font-family: "Noto Sans Devanagari", sans-serif; }

/* assets/css/site.css */
[data-site-footer] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--footer-gap, var(--size-2)); padding: var(--footer-padding, var(--size-9)); font-family: var(--font-body); }

html body [data-site-footer] { display: flex; position: relative; height: auto; min-height: var(--dimension-35); align-items: center; background: var(--surface); color: var(--ink); padding: var(--size-9) var(--size-9) var(--size-14); }
html body [data-site-footer] a { color: inherit; text-decoration: underline; text-underline-offset: var(--dimension-16); }

/* projects/access.css */
.project-access{position:relative;z-index:1800;display:flex;justify-content:center;padding:18px 16px 70px}.project-access-fixed{position:fixed;top:12px;left:16px;padding:0;z-index:2200}.project-access-open{font:500 16px/1.3 'Oswald',Arial,sans-serif;background:#fff;color:#000;border:1px solid #111;padding:12px 20px;min-height:44px;cursor:pointer}.project-access-open span{margin-inline-start:18px}.project-access-open:focus-visible,#project-directory a:focus-visible,#project-directory button:focus-visible{outline:3px solid #ff3b30;outline-offset:4px}#project-directory{box-sizing:border-box;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid #111;background:#fff;color:#000;overflow:auto;z-index:3000;margin:auto;font:16px/1.4 'Inter',Arial,sans-serif}#project-directory::backdrop{background:#0009}#project-directory .project-directory-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}#project-directory h2{font:500 30px/1.15 'Oswald',Arial,sans-serif;margin:0}#project-directory button{color:#000;background:#fff;border:1px solid #aaa;min-width:44px;min-height:44px;font-size:24px;cursor:pointer}#project-directory nav{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}#project-directory a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 0;min-height:48px;border-bottom:1px solid #ccc;color:#000;text-decoration:none;font-size:15px;line-height:1.4}#project-directory .project-all{font-weight:600;margin-top:20px;border:0}#project-directory a:hover{color:#b82017}.direct-projects{padding:36px 0;border-top:1px solid #aaa;margin-top:28px}.direct-projects h2{margin:0 0 20px;font:500 32px/1.2 'Oswald',Arial,sans-serif}.direct-projects nav{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.direct-projects a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:12px 0;border-bottom:1px solid #bbb;color:inherit;text-decoration:none;font-size:14px;line-height:1.4}.source-document{max-width:800px;margin:20px auto 60px}.source-document p{margin:0 0 20px;line-height:1.75;overflow-wrap:anywhere}.open-project{display:block;text-decoration:underline;text-underline-offset:5px;margin-top:22px;min-height:44px;padding:10px 0}.project-material-link{font-weight:600;border-bottom:2px solid #ff3b30!important}.project-access-in-nav{padding:0;display:inline-flex}.project-access-in-nav .project-access-open{font-size:13px;padding:10px 12px}@media(max-width:600px){#project-directory{padding:20px}#project-directory nav{grid-template-columns:1fr}#project-directory h2{font-size:25px}.direct-projects nav{grid-template-columns:1fr}.project-access-fixed{top:10px;left:10px}.project-access-fixed .project-access-open{font-size:14px;padding:10px 14px}}
.source-table{max-width:100%;overflow-x:auto;margin:28px 0}.source-table table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}.source-table td{padding:12px;border:1px solid #bbb;min-width:130px;vertical-align:top}.source-table tr:first-child{font-weight:600;background:#f3f3f3}

/* assets/visual/kostina-visual.css */
/* Euler A: shared geometry, drawing sequence and type. */
.kostina-euler-background{position:fixed;inset:0;z-index:99;pointer-events:none;display:grid;place-items:center;overflow:hidden;opacity:.105;contain:layout paint;direction:ltr}
.kostina-euler-background svg{width:min(105vw,100vh);height:100vh;flex:none}
.kostina-euler{--euler-ink:#373735;--euler-accent:#ff3b30;direction:ltr}
.kostina-euler svg{display:block;overflow:visible;direction:ltr}
.kostina-euler [data-part]{vector-effect:none}
.kostina-euler line,.kostina-euler [data-part="angle-arc"]{stroke:var(--euler-ink);stroke-width:27;fill:none;stroke-linecap:round}
.kostina-euler [data-part="unit-circle"]{stroke:var(--euler-accent);stroke-width:90;fill:none}
.kostina-euler .dash{stroke-dasharray:66 66}
.kostina-euler text{font-family:Inter,Arial,sans-serif;fill:var(--euler-ink);font-weight:800;font-size:180px;direction:ltr;unicode-bidi:isolate}
.kostina-euler [data-part="f1"]{font-size:258px}
.kostina-euler [data-part="f2"]{font-size:260px}
.kostina-euler [data-part="label-e"]{font-size:200px}
.kostina-euler .i-red,.kostina-euler .re-red,.kostina-euler .im-red,.kostina-euler [data-part="point-e"]{fill:var(--euler-accent)}
.kostina-euler [data-part="final-text"]{font-family:var(--script-font,var(--font-display,Oswald)),Arial,sans-serif;font-size:340px;font-weight:600;text-transform:uppercase;text-anchor:middle;dominant-baseline:central}
.kostina-euler [data-part="final-text"] tspan{text-anchor:middle}
[data-euler-inline]{width:100%;aspect-ratio:9/10.4;position:relative}
[data-euler-inline] svg{width:100%;height:100%}
.kostina-euler-pause{position:fixed;bottom:14px;left:14px;z-index:1600;width:44px;height:44px;border:1px solid #777;background:#fff;color:#191918;border-radius:50%;font:18px/1 sans-serif;cursor:pointer;box-shadow:0 1px 5px #0002}
.kostina-euler-pause:focus-visible{outline:3px solid #ff3b30;outline-offset:3px}
.portrait-letter{display:inline-block;position:relative;vertical-align:-.055em;width:.76em;height:.76em;line-height:.76em;text-align:center;font:inherit;color:inherit;border-radius:50%;overflow:hidden;letter-spacing:0;white-space:nowrap;isolation:isolate}
html.portraits-ready .portrait-letter{color:transparent;background-image:url('/assets/visual/irina-colors-atlas.webp');background-size:300% 200%;background-position:var(--portrait-x) var(--portrait-y);background-repeat:no-repeat}
@media(min-width:769px){
 body.intro-done .hero-photo-wrapper{width:25vw!important;height:auto!important;max-height:70vh;top:auto!important;bottom:0!important;left:3vw!important;right:auto!important;transform:none!important;filter:none!important}
 body.intro-done[dir="rtl"] .hero-photo-wrapper,html[dir="rtl"] body.intro-done .hero-photo-wrapper{left:auto!important;right:3vw!important}
 body.intro-done .hero-title-container{left:auto;right:3vw;text-align:right;width:60vw;top:5vh}
 html[dir="rtl"] body.intro-done .hero-title-container{right:auto;left:3vw;text-align:right;direction:rtl}
 html[dir="rtl"] .intro-block{direction:rtl}
 html[dir="rtl"] .hero-title{font-family:var(--script-font,Arial),sans-serif;line-height:1.2}
}
@media(max-width:768px){.kostina-euler-background{display:none}.kostina-euler-pause{display:none}body:has([data-euler-inline]) .kostina-euler-pause{display:block}}
@media(prefers-reduced-motion:reduce){.kostina-euler-pause{display:none}}

.kostina-euler-background[data-dark="true"]{--euler-ink:#fff;--euler-accent:#fff}

.kostina-euler-pause[hidden]{display:none}

@media(min-width:769px){
 #constant-layer{width:40vw}
 .constant-text .line{white-space:normal}
 html[dir="rtl"] #constant-layer,html[dir="rtl"] .constant-text,html[dir="rtl"] #name-layer{text-align:right}
 html[dir="rtl"] .constant-text .line{line-height:1.15}
}

/* assets/fonts/fonts.css */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/95b9ea830580.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/1e8edb2fc100.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/6d0a674525fe.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dbc85b0dfbaa.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/4c2d4a14f23a.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/a9d11b3ffe7a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/e3237528af75.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/95b9ea830580.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/1e8edb2fc100.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/6d0a674525fe.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dbc85b0dfbaa.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/4c2d4a14f23a.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/a9d11b3ffe7a.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/e3237528af75.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/36409d4e349c.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/9efac0650169.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/d1a9b8a91840.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/266c98a166ec.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/3aaff0836aee.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* assets/fonts/scripts.css */
@font-face {
  font-family: 'V7 SC';
  unicode-range: U+3000-303F,U+3400-9FFF;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/v7-zh-0.woff2) format('woff2');
  unicode-range: U+27, U+2c, U+b7, U+3002, U+4e0e, U+4e2d, U+4f0a, U+4f53, U+52a1, U+52a8, U+5a1c, U+6587, U+65af, U+670d, U+6d3b, U+6d41, U+7433, U+79d1, U+7a0b, U+7cfb, U+8482, U+8ba8, U+8bba, U+9910, U+996e;
}
@font-face {
  font-family: 'V7 SC';
  unicode-range: U+3000-303F,U+3400-9FFF;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/v7-zh-0.woff2) format('woff2');
  unicode-range: U+27, U+2c, U+b7, U+3002, U+4e0e, U+4e2d, U+4f0a, U+4f53, U+52a1, U+52a8, U+5a1c, U+6587, U+65af, U+670d, U+6d3b, U+6d41, U+7433, U+79d1, U+7a0b, U+7cfb, U+8482, U+8ba8, U+8bba, U+9910, U+996e;
}

@font-face {
  font-family: 'V7 JP';
  unicode-range: U+3000-30FF,U+31F0-31FF,U+3400-9FFF;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/v7-ja-0.woff2) format('woff2');
  unicode-range: U+27, U+2c, U+3002, U+3044, U+3059-305a, U+3064-3069, U+306b, U+307f, U+308b-308c, U+3099, U+30a3-30a4, U+30af-30b4, U+30b9-30ba, U+30bf-30c0, U+30c6-30ca, U+30d8-30d9, U+30ea, U+30f3, U+30fb-30fc, U+4ed5, U+65e5, U+672c, U+6d41, U+76f8, U+7d44, U+8a9e, U+8ac7;
}
@font-face {
  font-family: 'V7 JP';
  unicode-range: U+3000-30FF,U+31F0-31FF,U+3400-9FFF;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/v7-ja-0.woff2) format('woff2');
  unicode-range: U+27, U+2c, U+3002, U+3044, U+3059-305a, U+3064-3069, U+306b, U+307f, U+308b-308c, U+3099, U+30a3-30a4, U+30af-30b4, U+30b9-30ba, U+30bf-30c0, U+30c6-30ca, U+30d8-30d9, U+30ea, U+30f3, U+30fb-30fc, U+4ed5, U+65e5, U+672c, U+6d41, U+76f8, U+7d44, U+8a9e, U+8ac7;
}

@font-face {
  font-family: 'V7 KR';
  unicode-range: U+1100-11FF,U+3130-318F,U+AC00-D7AF;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/v7-ko-0.woff2) format('woff2');
  unicode-range: U+20, U+27, U+2c, U+2e, U+acc4, U+ad6d, U+ae30, U+b098, U+b2f4, U+b9ac, U+b9c1, U+c0ac, U+c0c1, U+c2a4, U+c5b4, U+c640, U+c774, U+c9c4, U+ccb4, U+cf00, U+cf54, U+d130, U+d2f0, U+d558, U+d55c, U+d589;
}
@font-face {
  font-family: 'V7 KR';
  unicode-range: U+1100-11FF,U+3130-318F,U+AC00-D7AF;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/v7-ko-0.woff2) format('woff2');
  unicode-range: U+20, U+27, U+2c, U+2e, U+acc4, U+ad6d, U+ae30, U+b098, U+b2f4, U+b9ac, U+b9c1, U+c0ac, U+c0c1, U+c2a4, U+c5b4, U+c640, U+c774, U+c9c4, U+ccb4, U+cf00, U+cf54, U+d130, U+d2f0, U+d558, U+d55c, U+d589;
}

@font-face {
  font-family: 'V7 HI';
  unicode-range: U+0900-097F;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/v7-hi-0.woff2) format('woff2');
  unicode-range: U+20, U+27, U+2c, U+902, U+907, U+914-915, U+917, U+91a, U+91f, U+924-926, U+928, U+92a, U+92e-930, U+935, U+938-939, U+93e-940, U+947-948, U+94b, U+94d, U+964;
}
@font-face {
  font-family: 'V7 HI';
  unicode-range: U+0900-097F;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/v7-hi-0.woff2) format('woff2');
  unicode-range: U+20, U+27, U+2c, U+902, U+907, U+914-915, U+917, U+91a, U+91f, U+924-926, U+928, U+92a, U+92e-930, U+935, U+938-939, U+93e-940, U+947-948, U+94b, U+94d, U+964;
}

/* assets/tokens.css */
/* Canonical design tokens. Regenerate copied assets with sync_components.py. */
:root {
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --accent: #ff3b30;
  --surface: #ffffff;
  --ink: #000000;
  --color-1: #fff;
  --color-2: #000;
  --color-3: #ff3b30;
  --color-4: #ffffff;
  --color-5: rgba(0,0,0,0.12);
  --color-6: rgba(0,0,0,0.5);
  --color-7: rgba(0,0,0,0.35);
  --color-8: rgba(255,255,255,0.2);
  --color-9: #000000;
  --color-10: #f0f0f0;
  --color-11: #999;
  --color-12: #666;
  --color-13: #333;
  --color-14: #00c853;
  --color-15: rgba(0,0,0,0.8);
  --color-16: rgba(255,255,255,0.9);
  --color-17: rgba(0,0,0,0.3);
  --color-18: rgba(0,0,0,0.85);
  --color-19: #444;
  --color-20: #666666;
  --color-21: rgba(0,0,0,.10);
  --color-22: rgba(0,0,0,.92);
  --color-23: rgba(0,0,0,.55);
  --color-24: rgba(0,0,0,.40);
  --color-25: rgba(0,0,0,.14);
  --color-26: rgba(0,0,0,.08);
  --color-27: rgba(0,0,0,.24);
  --color-28: rgba(0,0,0,.45);
  --color-29: rgba(255,255,255,.14);
  --color-30: rgba(255,255,255,.18);
  --color-31: #111;
  --color-32: rgba(255,59,48,.95);
  --color-33: rgba(255,59,48,.22);
  --color-34: rgba(0,0,0,.88);
  --size-1: 1.75rem;
  --size-2: 16px;
  --size-3: 8px;
  --size-4: 12px;
  --size-5: 10px;
  --size-6: 20px;
  --size-7: 6px;
  --size-8: 9px;
  --size-9: 24px;
  --size-10: 32px;
  --size-11: 1rem;
  --size-12: 11px;
  --size-13: 100px;
  --size-14: 60px;
  --size-15: 80px;
  --size-16: 40px;
  --size-17: 14px;
  --size-18: 18px;
  --size-19: 28px;
  --size-20: 15px;
  --size-21: 13px;
  --size-22: 120px;
  --size-23: 160px;
  --size-24: 140px;
  --size-25: -40px;
  --size-26: 48px;
  --size-27: 56px;
  --size-28: 36px;
  --size-29: -60px;
  --size-30: 64px;
  --size-31: -80px;
  --size-32: 4px;
  --size-33: 1px;
  --size-34: 90px;
  --size-35: 50px;
  --size-36: 22px;
  --size-37: 2px;
  --size-38: 0.75rem;
  --size-39: 180px;
  --size-40: 258px;
  --size-41: 300px;
  --size-42: 200px;
  --size-43: 340px;
  --size-44: 210px;
  --size-45: 250px;
  --size-46: 360px;
  --size-47: 0.6em;
  --size-48: 19px;
  --size-49: 17px;
  --size-50: 72px;
  --size-51: 30px;
  --size-52: 999px;
  --size-53: 150px;
  --size-54: 320px;
  --dimension-1: -0.01em;
  --dimension-2: 0.05em;
  --dimension-3: 1em;
  --dimension-4: 0.1em;
  --dimension-5: 1000px;
  --dimension-6: 0.02em;
  --dimension-7: 44px;
  --dimension-8: 1.5px;
  --dimension-9: 1400px;
  --dimension-10: 680px;
  --dimension-11: 720px;
  --dimension-12: 900px;
  --dimension-13: 0.15em;
  --dimension-14: 700px;
  --dimension-15: 1100px;
  --dimension-16: 3px;
  --dimension-17: 280px;
  --dimension-18: 7px;
  --dimension-19: 25px;
  --dimension-20: 34px;
  --dimension-21: 2800px;
  --typeface-1: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  --dimension-22: 800px;
  --dimension-23: 860px;
  --dimension-24: 420px;
  --dimension-25: .02em;
  --dimension-26: -.01em;
  --dimension-27: 54px;
  --dimension-28: -.005em;
  --dimension-29: 46px;
  --dimension-30: -.02em;
  --dimension-31: 70px;
  --dimension-32: -8px;
  --dimension-33: .06em;
  --dimension-34: -1px;
  --dimension-35: 112px;
  --dimension-36: -9999px;
}
/* V7 semantic extensions. Existing token values above are preserved. */
:root { --v7-paper: #f0ede5; --v7-graphite: #242522; --v7-muted: #55564f; --v7-line: #c6c4bb; --v7-mono: ui-monospace, 'Courier New', monospace; }
:root { --v7-script-font: 'V7 SC'; --v7-font-body: 'Inter', var(--v7-script-font), 'V7 SC', 'V7 JP', 'V7 KR', 'V7 HI', sans-serif; --v7-font-display: 'Oswald', var(--v7-script-font), 'V7 SC', 'V7 JP', 'V7 KR', 'V7 HI', sans-serif; }

/* assets/scene-merge.css */
.v7-content *{box-sizing:border-box}.v7-content{scroll-behavior:smooth;scroll-padding-top:30px}.v7-content{margin:0;background:var(--v7-paper);color:var(--v7-graphite);font-family:var(--font-body);font-size:18px;line-height:1.55}.v7-content a{color:inherit;text-underline-offset:5px}.v7-content button,.v7-content select{font:inherit;color:inherit;background:transparent;border:1px solid var(--v7-line);min-height:44px;padding:8px 12px;cursor:pointer}.v7-content a,.v7-content button,.v7-content select{-webkit-tap-highlight-color:transparent}.v7-content a:focus-visible,.v7-content button:focus-visible,.v7-content select:focus-visible{outline:3px solid currentColor;outline-offset:4px}.v7-content header{max-width:1540px;margin:auto;display:flex;align-items:center;gap:28px;padding:24px 40px;border-bottom:1px solid var(--v7-line);font:12px var(--v7-mono)}.v7-content header nav{display:flex;gap:20px;margin-inline-start:auto}.v7-content header a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.v7-content .wordmark{font-weight:700;white-space:nowrap}.v7-content .wordmark span{padding:0 10px}.v7-content .language{display:flex;align-items:center;gap:8px}.v7-content .language select{max-width:145px}.v7-content .preview-note{max-width:1460px;margin:18px auto 0;padding:0 40px;font:11px var(--v7-mono);color:var(--v7-muted)}.v7-content main{max-width:1460px;margin:auto;padding:0 40px}.v7-content .section{padding:90px 0;border-bottom:1px solid var(--v7-line)}.v7-content h1,.v7-content h2,.v7-content h3,.v7-content p,.v7-content figure{margin:0}.v7-content p{max-width:65ch;margin-bottom:22px}.v7-content h1{font-family:var(--font-display);font-size:clamp(58px,7.2vw,112px);line-height:.98;letter-spacing:-.05em;font-weight:600;margin-bottom:36px;max-width:9ch}.v7-content h2{font-size:clamp(34px,4vw,60px);line-height:1.08;letter-spacing:-.035em;font-weight:500;margin:0 0 32px;max-width:20ch}.v7-content h3{font-size:29px;line-height:1.18;font-weight:500;margin:28px 0 18px;letter-spacing:-.02em}.v7-content .eyebrow{font:11px var(--v7-mono);letter-spacing:.08em;margin-bottom:32px}.v7-content .lead{font-size:clamp(22px,2vw,29px);line-height:1.3}.v7-content .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:10%;padding-top:60px;align-items:start}.v7-content .hero-copy{padding-top:12px}.v7-content .hero-study{max-width:470px;margin-inline-start:auto}.v7-content .hero .credentials{font-size:14px;margin-top:40px;max-width:54ch}.v7-content .action,.v7-content .secondary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 22px;text-decoration:none;font-size:15px}.v7-content .action{background:var(--v7-graphite);color:var(--v7-paper)}.v7-content .secondary{border:1px solid var(--v7-graphite)}.v7-content .text-action{display:inline-flex;align-items:center;min-height:44px;font-size:14px}.v7-content .placeholder{font:12px/1.5 var(--v7-mono);color:var(--v7-muted);border-inline-start:1px solid currentColor;padding-inline-start:12px;overflow-wrap:anywhere;margin-top:22px}.v7-content .study{min-width:0}.v7-content .study img{display:block;width:100%;height:auto;filter:grayscale(1);background:var(--v7-line)}.v7-content .study.is-accent img{filter:none}.v7-content figcaption{font:10px/1.5 var(--v7-mono);padding-top:14px}.v7-content .slot-label{display:block;font-size:11px}.v7-content .axis-key{display:block;overflow-wrap:anywhere;margin-top:5px;color:var(--v7-muted)}.v7-content .axis-help{display:block;font-size:10px;max-width:55ch;margin-top:6px;color:var(--v7-muted)}.v7-content .next{font:11px var(--v7-mono);margin-top:12px;min-height:44px}.v7-content .principle{position:relative;padding-inline-start:20%;min-height:400px}.v7-content .identity{font:clamp(44px,7vw,90px) Georgia,serif;margin-bottom:26px;letter-spacing:-.04em}.v7-content .identity sup{font-size:.48em}.v7-content .principle h2{font-size:28px}.v7-content .principle p{font-size:14px}.v7-content .euler{position:absolute;width:180px;inset-inline-start:0;top:180px;fill:none;stroke:var(--v7-graphite);stroke-width:1}.v7-content .euler-dot{fill:var(--v7-graphite)}.v7-content .cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6%;align-items:start}.v7-content .cases-grid article:nth-child(2){margin-top:190px}.v7-content .cases-grid article:nth-child(3){margin-top:70px}.v7-content .cases-grid p{font-size:16px}.v7-content .sticky-contact{position:sticky;bottom:18px;width:max-content;max-width:100%;margin-top:44px;z-index:2}.v7-content .method-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}.v7-content .route{display:block;width:100%;stroke:var(--v7-graphite);stroke-width:1.5;fill:var(--v7-paper);margin-bottom:18px}.v7-content .route text{font:18px var(--font-body);stroke:none;fill:var(--v7-graphite)}.v7-content .route-line{stroke-dasharray:5 6}.v7-content .caption{font:12px/1.5 var(--v7-mono);color:var(--v7-muted)}.v7-content ol{padding-inline-start:22px}.v7-content li{margin-bottom:12px}.v7-content blockquote{margin:0 0 42px;font-size:25px;line-height:1.3;max-width:38ch}.v7-content blockquote cite{display:block;font:11px var(--v7-mono);margin-top:18px}.v7-content .motion-grid{display:grid;grid-template-columns:1fr 1fr;gap:18%;margin:90px 0;align-items:start}.v7-content .motion-grid>.study{max-width:400px}.v7-content .film{max-width:380px;padding-top:100px}.v7-content .film video{width:100%;height:auto;display:block;filter:grayscale(1);background:var(--v7-graphite)}.v7-content .film.is-accent video{filter:none}.v7-content .film button{width:100%;margin:12px 0}.v7-content .research-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:90px 16%;align-items:start}.v7-content .research-grid .study:nth-child(even){margin-top:140px}.v7-content .research-grid .study{max-width:520px}.v7-content .contact{padding:110px 0}.v7-content .contact nav{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:50px}.v7-content .contact nav a{min-height:44px;display:inline-flex;align-items:center}.v7-content .publications{list-style:none;padding:0}.v7-content .publications li{display:grid;grid-template-columns:110px 200px 1fr;gap:20px;border-top:1px solid var(--v7-line);padding:28px 0;align-items:start}.v7-content .publications time,.v7-content .publications span{font:12px/1.5 var(--v7-mono)}.v7-content .publications a{min-height:44px;display:block}.v7-content footer{max-width:1460px;margin:auto;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:10%;font:12px/1.6 var(--v7-mono)}.v7-content footer p{margin-bottom:12px}.v7-content .skip{position:absolute;top:-100px;left:20px;z-index:10;padding:12px;background:var(--v7-paper)}.v7-content .skip:focus{top:10px}.v7-content [dir=rtl] .identity,.v7-content [dir=rtl] .axis-key{direction:ltr}.v7-content [dir=rtl] h1{letter-spacing:0}.v7-content.motion-disabled *{animation:none!important;transition:none!important}
@media (max-width:768px){.v7-content{font-size:16px}.v7-content header{padding:12px 20px;gap:10px;flex-wrap:wrap}.v7-content header nav{order:3;width:100%;gap:24px;margin:0}.v7-content header .wordmark{margin-inline-end:auto}.v7-content .language>span{display:none}.v7-content .language select{max-width:110px;font-size:12px}.v7-content #motion{font-size:11px}.v7-content .preview-note{padding:0 20px;font-size:10px}.v7-content main{padding:0 20px}.v7-content .section{padding:58px 0}.v7-content p{max-width:43ch}.v7-content h1{font-size:64px;margin-bottom:24px}.v7-content h2{font-size:36px}.v7-content h3{font-size:26px}.v7-content .hero{display:block;padding-top:38px}.v7-content .hero-copy{padding:0}.v7-content .hero .credentials{margin-top:24px;font-size:12px}.v7-content .hero-study{max-width:100%;margin-top:38px}.v7-content .hero-study img{max-height:380px;object-fit:cover}.v7-content .hero-study .axis-help{max-width:43ch}.v7-content .hero-study .study{max-width:100%}.v7-content .portrait-placeholder{min-height:48px}.v7-content .eyebrow{margin-bottom:24px}.v7-content .lead{font-size:22px}.v7-content .next{display:none}.v7-content .principle{padding-inline-start:0;min-height:0}.v7-content .identity{font-size:62px}.v7-content .euler{position:static;width:130px;margin-top:25px}.v7-content .principle h2{font-size:24px}.v7-content .cases-grid,.v7-content .method-grid,.v7-content .motion-grid,.v7-content .research-grid{display:block}.v7-content .cases-grid article{margin:0 0 64px!important}.v7-content .cases-grid article .study{max-width:100%}.v7-content .cases-grid h3{max-width:18ch}.v7-content .cases-grid p{font-size:16px}.v7-content .sticky-contact{bottom:12px;margin-top:0}.v7-content .motion-grid{margin:50px 0}.v7-content .motion-grid>.study{max-width:100%;margin-bottom:45px}.v7-content .film{max-width:100%;padding-top:0}.v7-content .research-grid .study{margin:0 0 55px!important}.v7-content .contact{padding:64px 0}.v7-content .contact .secondary{margin-top:12px}.v7-content .publications li{grid-template-columns:100px 1fr;gap:8px}.v7-content .publications li a{grid-column:1/-1}.v7-content footer{display:block;padding:30px 20px}.v7-content footer>div+div{margin-top:28px}.v7-content blockquote{font-size:23px;margin-top:35px}.v7-content .axis-help{font-size:10px}}
@media (prefers-reduced-motion:reduce){.v7-content{scroll-behavior:auto}.v7-content *,.v7-content *::before,.v7-content *::after{animation:none!important;transition:none!important}}
.v7-content footer a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:768px){.v7-content header nav{width:auto;flex:1;order:3}.v7-content #motion{order:4}}

.v7-content .study img{aspect-ratio:var(--ratio)}.v7-content .film video{aspect-ratio:3/4}
.v7-content{font-family:var(--v7-font-body)}.v7-content h1{font-family:var(--v7-font-display)}.v7-content:lang(ja){--v7-script-font:"V7 JP"}.v7-content:lang(ko){--v7-script-font:"V7 KR"}.v7-content:lang(hi){--v7-script-font:"V7 HI"}
.v7-content .language select{font-family:var(--v7-font-body)}

.v7-content [hidden]{display:none!important}.v7-content header nav{flex-wrap:wrap;gap:8px 18px}.v7-content header{flex-wrap:wrap}.v7-content h1,.v7-content h2,.v7-content h3{overflow-wrap:anywhere}.v7-content .project-directory ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 8%}.v7-content .project-directory li{margin:0;border-top:1px solid var(--v7-line)}.v7-content .project-directory a{display:block;min-height:52px;padding:12px 0}.v7-content #approach h2{max-width:24ch;font-size:clamp(28px,3.5vw,50px)}
.v7-content .merged-project,.v7-content .merged-academy,.v7-content .merged-foundation{padding-bottom:60px}.v7-content .merged-project img,.v7-content .merged-academy img{display:block;max-width:100%;height:auto}.v7-content .merged-project h1,.v7-content .merged-academy h1{max-width:18ch;font-size:clamp(40px,5.8vw,84px)}.v7-content .merged-project h2{font-size:clamp(28px,3vw,42px)}.v7-content .merged-project section,.v7-content .merged-project .hub-hero{padding:50px 0;border-bottom:1px solid var(--v7-line)}.v7-content .project-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:start}.v7-content .project-hero figure{max-width:440px}.v7-content .project-intro{font-size:23px}.v7-content .projects-grid,.v7-content .object-grid,.v7-content .related>div,.v7-content .artifacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px}.v7-content .project-card{border-top:1px solid var(--v7-line);padding-top:20px}.v7-content .project-card img{max-height:300px;width:100%;object-fit:cover}.v7-content .project-card a,.v7-content .text-link,.v7-content .related a,.v7-content .relationship-map a{display:inline-flex;align-items:center;min-height:44px}.v7-content .project-filters,.v7-content .collection-controls,.v7-content .relationship-map{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.v7-content .collection-controls label{display:grid;gap:8px}.v7-content .collection-controls input{font:inherit;min-height:44px;max-width:100%;padding:10px}.v7-content .object{padding:24px;border:1px solid var(--v7-line);min-width:0}.v7-content .editorial-row{display:grid;grid-template-columns:40px 1fr 1.4fr;gap:26px}.v7-content .editorial-row h2{margin:0}.v7-content .project-content{overflow-wrap:anywhere}.v7-content .merged-project table{display:block;max-width:100%;overflow:auto}.v7-content .merged-project details{padding:24px 0}.v7-content .merged-project summary{cursor:pointer;min-height:44px}.v7-content .merged-project li,.v7-content .merged-project p{max-width:75ch}.v7-content .merged-project a{overflow-wrap:anywhere}.v7-content .merged-project .field-archive{max-width:100%}.v7-content .merged-project .toc,.v7-content .merged-project .tagrow{display:flex;gap:16px;flex-wrap:wrap}.v7-content .merged-project .sig-row,.v7-content .merged-project .econ-row{padding:20px 0;border-bottom:1px solid var(--v7-line)}
.v7-content .merged-academy .screen{padding:65px 0;border-bottom:1px solid var(--v7-line)}.v7-content .merged-academy .hero{grid-template-columns:1fr 1fr;gap:8%}.v7-content .merged-academy video{width:100%;height:auto}.v7-content .artifact{display:grid;grid-template-columns:110px 1fr;gap:22px}.v7-content .artifact h3{margin-top:0}.v7-content .artifact-visual{max-width:110px}.v7-content .artifact-num{font:12px monospace}.v7-content .method-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;padding:0}.v7-content .method-drawing svg{width:100%;height:auto;stroke:currentColor}.v7-content .format dl{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.v7-content .format dt{font-size:13px;color:var(--v7-muted)}.v7-content .format dd{margin:0}.v7-content .teacher{display:grid;grid-template-columns:240px 1fr;gap:8%}.v7-content .teacher-photo img{max-height:320px;object-fit:cover}.v7-content .access-columns{max-width:75ch}.v7-content .merged-academy .terms-note{font-size:14px}.v7-content .merged-academy .hero-copy{padding:0}.v7-content .merged-academy #course{margin-top:50px}
.v7-content .merged-foundation .section-entry p{font-size:clamp(24px,3vw,42px)}.v7-content .merged-foundation svg{width:100%;max-width:400px;height:auto;stroke:currentColor;fill:none}.v7-content .merged-foundation .fx-diagram{max-width:420px}.v7-content .merged-foundation .fx-controls input{width:min(100%,400px);min-height:44px}.v7-content .merged-foundation .fx-stats,.v7-content .merged-foundation .fx-readout{display:flex;flex-wrap:wrap;gap:30px}.v7-content .merged-foundation .fx-stats dd{margin:0}.v7-content .merged-foundation .principles-list{list-style:none;padding:0}.v7-content .merged-foundation .principle-item{padding:20px 0;border-bottom:1px solid var(--v7-line)}.v7-content .merged-foundation .fx-choices{display:flex;flex-wrap:wrap;gap:12px}.v7-content .merged-foundation .fx-choices label{display:flex;align-items:center;gap:8px;min-height:44px}.v7-content .merged-foundation fieldset{margin:20px 0;border:1px solid var(--v7-line)}.v7-content .merged-foundation #fx-nearest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.v7-content .merged-foundation .fx-card img{width:100%;height:auto}.v7-content .merged-foundation bdi{overflow-wrap:anywhere}.v7-content .merged-foundation .fx-tags{padding-inline-start:20px}.v7-content .merged-foundation .fx-coverage{overflow-wrap:anywhere}.v7-content .merged-foundation .fx-coverage-axis{margin:25px 0}.v7-content .merged-foundation .fx-cta{display:inline-flex;min-height:44px;align-items:center;margin-inline-end:20px}
@media (max-width:768px){.v7-content header nav{width:100%;gap:6px 18px;flex:auto}.v7-content header nav a{font-size:12px}.v7-content header #motion{order:0}.v7-content .project-directory ul,.v7-content .projects-grid,.v7-content .object-grid,.v7-content .related>div,.v7-content .artifacts,.v7-content .teacher,.v7-content .merged-academy .hero,.v7-content .project-hero,.v7-content .merged-foundation #fx-nearest{display:block}.v7-content .project-card,.v7-content .object,.v7-content .artifact{margin-bottom:30px}.v7-content .project-hero figure{margin-top:30px}.v7-content .editorial-row{display:block}.v7-content .editorial-row h2{margin-bottom:20px}.v7-content .method-line{grid-template-columns:repeat(2,minmax(0,1fr))}.v7-content .artifact{display:grid;grid-template-columns:80px 1fr}.v7-content .teacher-photo{max-width:200px;margin-bottom:25px}.v7-content .format dl{grid-template-columns:1fr}.v7-content .merged-project h1{font-size:42px}.v7-content .merged-project .project-intro{font-size:20px}}
.v7-content .merged-project video{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain}.v7-content .merged-project svg{max-width:100%;height:auto}.v7-content .merged-project input,.v7-content .merged-project select{max-width:100%}
@media (max-width:768px){.v7-content header{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px}.v7-content header .wordmark{grid-column:1;grid-row:1;font-size:11px}.v7-content header .language{grid-column:2;grid-row:1;width:110px}.v7-content header .language select{width:110px}.v7-content header #motion{grid-column:1/-1;grid-row:2;justify-self:start;min-width:150px;height:44px}.v7-content header nav{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}.v7-content header nav a{min-height:44px}}

.v7-content{position:relative;z-index:80;background:#efede4;color:#242622;font:18px/1.55 var(--v7-font-body);padding:0 max(20px,calc((100vw - 1380px)/2));isolation:isolate}.v7-content .section{max-width:1380px;margin:auto}.v7-content header{padding-inline:0}.v7-content .skip{display:none}body.modern-visible .project-access-fixed,body.modern-visible .scene-content-link,body.modern-visible #constant-layer,body.modern-visible #name-layer,body.modern-visible .ui-layer,body.modern-visible .mobile-footer{visibility:hidden!important}.scene-content-link{position:fixed;bottom:85px;right:18px;z-index:150;background:var(--surface);color:var(--ink);padding:12px 18px;font:14px var(--font-body);border:1px solid;min-height:44px}.v7-content .hero{height:auto;pointer-events:auto;background:transparent!important}body:has(#lang-panel.open) .scene-content-link{visibility:hidden}.v7-content [hidden]{display:none!important}@media(max-width:768px){.v7-content{padding:0 20px}.scene-content-link{font-size:12px;right:12px}}
/* Narrow viewports use the same navigation for touch and mouse. */
@media (max-width: 768px) {
  html.native-motion.is-desktop body .ui-layer,
  html.native-motion.is-touch body .ui-layer { display: none !important; }
  html.native-motion.is-desktop body .mobile-footer,
  html.native-motion.is-touch body .mobile-footer {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    min-height: 104px;
    gap: 0 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #efede4;
    color: #242622;
    font: 12px/1.2 Arial, sans-serif;
    box-sizing: border-box;
  }
  html body .mobile-footer .divider { display: none; }
  html body .mobile-footer a,
  html body .mobile-footer button {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
    opacity: 1;
    color: inherit;
  }
  html body #constant-layer {
    bottom: calc(172px + env(safe-area-inset-bottom)) !important;
  }
  html body .scene-content-link {
    bottom: calc(116px + env(safe-area-inset-bottom));
  }
}

/* assets/visual40/visual40.css */
.visual40{position:relative;max-width:1380px;margin:48px auto;padding:24px 20px;box-sizing:border-box;color:#242622;background:#efede4;font:16px/1.5 Arial,sans-serif}
.visual40-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.visual40 figure{margin:0;min-width:0}
.visual40 img,.visual40 video{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#242622}
.visual40 video{aspect-ratio:3/4}
.visual40 figcaption{padding-top:10px}
.visual40-note{font-size:13px;margin-top:24px}
@media(max-width:768px){.visual40-grid{grid-template-columns:1fr}.visual40{margin:28px auto;padding:20px}.v7-content .visual40{padding-inline:0}.visual40 img,.visual40 video{max-height:65vh}}

/* assets/site-chrome.css */
/* Shared identity, language dialog and media feedback across all pages. */
.titi-badge{display:inline-flex!important;align-items:center;gap:.5em;padding:.65em 1em;border:1px solid currentColor;border-radius:100px;color:inherit;text-decoration:none;font:500 12px/1.2 Arial,sans-serif;letter-spacing:.025em;width:max-content;max-width:100%;transition:background .2s,color .2s}
.titi-badge:hover{background:#242622;color:#f4f1e9}.titi-badge:focus-visible{outline:2px solid #a65532;outline-offset:4px}.titi-badge small{font:inherit;opacity:.65}.titi-badge strong{font-weight:600;white-space:nowrap}.titi-badge sup{font-size:.65em;vertical-align:super;margin-inline-start:.13em}
.media-host{position:relative}.media-loading{position:absolute;inset:45% auto auto 45%;width:24px;height:24px;border:2px solid #ddd;border-top-color:#78583d;border-radius:50%;animation:media-turn .8s linear infinite;pointer-events:none}.media-loading[hidden]{display:none}@keyframes media-turn{to{transform:rotate(360deg)}}
.language-dock{position:fixed;inset:auto 20px 22px auto;z-index:10020;border:1px solid #b7b1a7;border-radius:100px;padding:12px 18px;background:#f5f2eb;color:#292922;font:500 13px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 16px #0001}
#lang-panel{position:fixed!important;inset:0!important;z-index:10040!important;background:#181b1888!important;padding:24px!important;display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;transform:none!important;opacity:1!important;visibility:visible!important}
#lang-panel[hidden]{display:none!important}#lang-panel .lang-panel-inner{position:relative!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;width:min(680px,100%)!important;max-height:85dvh!important;overflow:auto!important;padding:56px 24px 24px!important;background:#f5f2eb!important;border-radius:20px!important;box-sizing:border-box!important}
#lang-panel .lang-item{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center;gap:8px!important;border:1px solid transparent!important;border-radius:14px!important;padding:12px 5px!important;background:transparent!important;color:#292922!important;font:12px/1.3 Arial,sans-serif!important;cursor:pointer;min-width:0!important;text-align:center!important}
#lang-panel .lang-item:hover,#lang-panel .lang-item[aria-pressed=true]{background:#e5dfd3!important;border-color:#c2b5a0!important}#lang-panel .lang-avatar{width:64px!important;height:64px!important;border-radius:50%!important;overflow:hidden!important;flex-shrink:0}#lang-panel img{width:100%!important;height:100%!important;object-fit:cover!important}#lang-panel .lang-name{color:#292922!important;font:inherit!important;text-transform:none!important;letter-spacing:0!important}#lang-panel .lang-close{position:absolute;inset:12px 16px auto auto;border:0;background:transparent;color:#292922;font:28px/1 Arial;cursor:pointer;padding:6px}
body:has(#lang-panel:not([hidden])){overflow:hidden}.language-native{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;padding:0!important;margin:0!important}
@media(max-width:600px){#lang-panel{padding:12px!important}#lang-panel .lang-panel-inner{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:50px 10px 16px!important}#lang-panel .lang-avatar{width:48px!important;height:48px!important}.language-dock{right:12px;bottom:calc(16px + env(safe-area-inset-bottom));padding:12px}body{padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){.media-loading{animation:none}}
#lang-panel .lang-avatar{position:relative;background:#eee8dc}#lang-panel .lang-avatar img{position:absolute;width:400%!important;height:400%!important;max-width:none!important;left:var(--avatar-x);top:var(--avatar-y);object-fit:fill!important}

.media-pause{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:10020;width:42px;height:42px;border:1px solid #b7b1a7;border-radius:50%;background:#f5f2eb;color:#292922;cursor:pointer;font:16px Arial}
#lang-panel .lang-panel-inner{align-content:start!important;justify-items:stretch!important}
#lang-panel .lang-item{width:100%!important;max-width:none!important;box-sizing:border-box!important}
#lang-panel .lang-avatar{max-width:none!important;max-height:none!important;border:0!important;transform:none!important}
#lang-panel .lang-name{display:block!important;width:100%!important;white-space:nowrap!important;overflow-wrap:normal!important;line-height:1.4!important}

#lang-panel .lang-person{display:block!important;max-width:100%;font:11px/1.3 Arial,sans-serif!important;color:#675e50!important;white-space:normal;text-align:center}#lang-panel .lang-item{gap:5px!important}#lang-panel .lang-avatar{width:72px!important;height:72px!important}
@media(max-width:600px){#lang-panel .lang-avatar{width:56px!important;height:56px!important}}

/* One readable, tappable attribution across legacy and current page layouts. */
html body a.titi-badge{box-sizing:border-box;min-height:44px;flex-wrap:nowrap;white-space:nowrap;text-decoration:none;line-height:1.2}
html body a.titi-badge small{display:inline;font-size:12px}
html body a.titi-badge strong{display:inline;font-size:12px}
html body footer:has(.titi-badge){padding-bottom:max(88px,calc(64px + env(safe-area-inset-bottom)))}

/* assets/mobile-scenes.css */
/* Mobile scenes share a grid, with large frames alternating with details. */
.mobile-scenes{display:none}
@media(max-width:768px){
 html body #galleryPin{min-height:0;background:#242622}
 html body #galleryStage{display:none!important}
 .mobile-scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 12px 24px;background:#242622}
 .mobile-scenes .mobile-scene{position:relative;margin:0;min-width:0;overflow:hidden;background:#242622}
 .mobile-scenes .mobile-scene-lead{grid-column:1/-1;aspect-ratio:4/5;max-height:68svh}
 .mobile-scenes .mobile-scene-portrait{aspect-ratio:3/4}
 .mobile-scenes .mobile-scene-wide{grid-column:1/-1;aspect-ratio:4/3}
 .mobile-scenes .mobile-scene-detail{aspect-ratio:1/1}
 .mobile-scenes video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0;border-radius:0}
 body.gallery-active:not(.modern-visible) .scene-content-link{visibility:hidden}
 body.gallery-active:not(.modern-visible) .mobile-footer{visibility:hidden}
 .mobile-scenes .media-loading{position:absolute}
}