/* Витрина sdominanta.net: только холст с объектами кистью. Шрифтов нет: надписи рисует движок. */
html, body { margin: 0; height: 100%; background: #010306; overflow: hidden; }
#scene { display: block; width: 100vw; height: 100vh; cursor: default; touch-action: none; }
#scene.over { cursor: pointer; }
#scene.edit { cursor: crosshair; }
#scene.grab-ready { cursor: grab; }
#scene.grab { cursor: grabbing; }

/* Кнопка «вся сцена»: камера возвращается к общему виду. */
.home {
  position: fixed; right: 14px; bottom: 14px; z-index: 1; width: 38px; height: 38px; padding: 8px;
  border: 1px solid rgba(0, 242, 254, 0.3); border-radius: 50%; background: rgba(2, 8, 20, 0.7); cursor: pointer;
}
.home svg { display: block; width: 100%; height: 100%; fill: none; stroke: #67e8f9; stroke-width: 1.6; stroke-linecap: round; }
.home:hover, .home:focus-visible { border-color: rgba(0, 242, 254, 0.7); outline: none; }
html:not(.js) .home { display: none; }

/* Слой ссылок и текстовый вход: доступны инструментам и экранным чтецам, не видны глазу. */
.objects, .entry {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Без скриптов холст пуст: тогда ссылки видны обычным списком. Класс снимает движок. */
html:not(.js) .objects {
  position: static; width: auto; height: auto; margin: 24px; clip: auto; clip-path: none; overflow: visible;
}
html:not(.js) .objects a { color: #a8a8b0; }
html:not(.js) #scene { display: none; }
html:not(.js) body { overflow: auto; }

/* Панель хранителя: её строит редактор /k/editor.js, который отдаётся только в сессии хранителя. */
.kp {
  position: fixed; top: 12px; right: 12px; z-index: 2; width: min(320px, calc(100vw - 24px));
  padding: 10px; border: 1px solid rgba(0, 242, 254, 0.28); border-radius: 10px;
  background: rgba(2, 8, 20, 0.88); color: #cbd5e1; font: 12px/1.4 ui-monospace, monospace;
  max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box;
}
.kp-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.kp-b {
  flex: 1 1 auto; font: inherit; color: #94a3b8; background: rgba(15, 23, 42, 0.6);
  border: 1px solid #1e293b; border-radius: 6px; padding: 5px 6px; cursor: pointer;
}
.kp-b:hover, .kp-b.on { color: #cffafe; border-color: rgba(0, 242, 254, 0.55); background: rgba(0, 242, 254, 0.12); }
.kp-sel, .kp-json {
  width: 100%; box-sizing: border-box; font: inherit; color: #e2e8f0; background: #020617;
  border: 1px solid #164e63; border-radius: 6px; padding: 5px; margin-bottom: 6px;
}
.kp-json { height: 30vh; resize: vertical; }
.kp-note { margin: 0 0 6px; color: #64748b; }
.kp-f { display: block; margin-bottom: 6px; color: #94a3b8; }
.kp-f span { display: block; margin-bottom: 2px; }
.kp-in {
  width: 100%; box-sizing: border-box; font: inherit; color: #e2e8f0; background: #020617;
  border: 1px solid #164e63; border-radius: 6px; padding: 4px 6px; resize: vertical;
}
.kp-b:disabled { opacity: 0.4; cursor: default; }
.kp-sec { margin: 0 0 6px; border-top: 1px solid #1e293b; padding-top: 4px; }
.kp-sec summary { cursor: pointer; color: #a5f3fc; margin-bottom: 4px; }
.kp-sl span { display: flex; gap: 6px; align-items: center; }
.kp-out { margin-left: auto; color: #e2e8f0; }
.kp-x { font: inherit; color: #94a3b8; background: none; border: 0; padding: 0 2px; cursor: pointer; }
.kp-range { width: 100%; accent-color: #22d3ee; }

/* Музыка: подпись трека и ▶ внизу слева. Автор, трек и SoundCloud — всегда на виду и ссылками. */
.music {
  position: fixed; left: 14px; bottom: 14px; z-index: 1; max-width: calc(100vw - 80px);
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px;
  border: 1px solid rgba(0, 242, 254, 0.25); border-radius: 19px; background: rgba(2, 8, 20, 0.7);
  color: #94a3b8; font: 12px/1.3 ui-monospace, monospace;
}
.music a { color: #a5f3fc; text-decoration: none; }
.music a:hover, .music a:focus-visible { text-decoration: underline; }
.music-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-play {
  flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(0, 242, 254, 0.4); border-radius: 50%;
  background: rgba(0, 242, 254, 0.1); color: #cffafe; font: 12px/1 system-ui, sans-serif; cursor: pointer;
}
.music-play:hover, .music-play:focus-visible { border-color: rgba(0, 242, 254, 0.8); outline: none; }
.music-note { flex: none; color: #64748b; }
html:not(.js) .music-play { display: none; }

/* Место хранителя: разделы панели или поле кода; без места в сцене — вверху слева. */
.keeper {
  position: fixed; left: 14px; top: 14px; z-index: 1; display: flex; gap: 10px; align-items: center;
  padding: 6px 10px; border: 1px solid rgba(0, 242, 254, 0.25); border-radius: 19px; background: rgba(2, 8, 20, 0.7);
  color: #94a3b8; font: 12px/1.3 ui-monospace, monospace;
}
.keeper a { color: #a5f3fc; text-decoration: none; }
.keeper a:hover, .keeper a:focus-visible { text-decoration: underline; }
.keeper form { display: flex; gap: 6px; align-items: center; margin: 0; }
.keeper input, .keeper button {
  font: inherit; color: #e2e8f0; background: rgba(2, 6, 23, 0.8); border: 1px solid #164e63; border-radius: 6px; padding: 3px 6px;
}
.keeper input { width: 7ch; letter-spacing: 0.1em; }
.keeper button { cursor: pointer; }
/* В месте сцены (slot): элемент встаёт в рамку объекта, координаты ставит движок. */
.slotted { position: fixed; right: auto; bottom: auto; max-width: none; box-sizing: border-box; overflow: hidden; justify-content: center; }
.slotted[hidden] { display: none; }

/* Рама: окно объекта или страница сети внутри прямоугольника, раздвинутого в континууме (фон рисует холст). */
.page-space {
  position: fixed; z-index: 3; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 22px 28px; box-sizing: border-box; pointer-events: none;
  color: #cbd5e1; font: 16px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* блоки внутри рамы: живыми — когда рама раскрыта (до того колёсико над ней ведёт раму) */
.page-space.live { pointer-events: auto; }
.page-space[hidden] { display: none; }
/* виджет в окне: раздел панели хранителя (iframe) или живой элемент страницы (плеер, вход) */
.widget-frame { display: block; width: 100%; height: 62vh; min-height: 16em; border: 0; border-radius: 8px; background: transparent; }
.page-body aside[data-framed] { position: static; inset: auto; width: auto; height: auto; transform: none; margin: 1em 0; }
.page-bar, .page-body { max-width: 72ch; margin: 0 auto; }
.page-bar { position: sticky; top: 0; padding: 0 0 14px; }
.page-bar button { background: rgba(1, 3, 6, 0.92); }
.page-bar button {
  font: inherit; font-size: 13px; color: #a5f3fc; background: rgba(2, 8, 20, 0.85); cursor: pointer;
  border: 1px solid rgba(0, 242, 254, 0.35); border-radius: 16px; padding: 4px 12px;
}
.page-bar button:hover, .page-bar button:focus-visible { border-color: rgba(0, 242, 254, 0.8); outline: none; }
.page-body h2, .page-body h3, .page-body h4 { color: #e0fbff; font-weight: 600; letter-spacing: 0.02em; margin: 1.4em 0 0.5em; }
.page-body h2 { font-size: 1.4em; text-shadow: 0 0 14px rgba(0, 242, 254, 0.45); }
.page-body h3 { font-size: 1.15em; }
.page-body h4 { font-size: 1em; }
.page-body p, .page-body ul { margin: 0 0 0.9em; }
.page-body ul { padding-left: 1.4em; }
.page-body a { color: #67e8f9; text-decoration: none; border-bottom: 1px solid rgba(103, 232, 249, 0.35); }
.page-body a:hover, .page-body a:focus-visible { color: #cffafe; border-bottom-color: #67e8f9; outline: none; }
.page-body code { color: #a5f3fc; }
.page-body pre { margin: 0 0 0.9em; white-space: pre-wrap; overflow-wrap: anywhere; color: #94a3b8; }
.page-body pre.page-row { margin: 0; }
.page-body hr { border: 0; height: 1px; margin: 1.4em 0; background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.45), transparent); }
.page-leaves { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin: 2em 0 1em; font-variant-numeric: tabular-nums; color: #94a3b8; }
.page-leaves button { min-width: 3em; padding: 0.45em 0.9em; font: inherit; color: #e0fbff; background: rgba(1, 3, 6, 0.6); border: 1px solid rgba(0, 242, 254, 0.35); border-radius: 999px; cursor: pointer; }
.page-leaves button:hover, .page-leaves button:focus-visible { border-color: rgba(0, 242, 254, 0.85); outline: none; }
.page-leaves button:disabled { opacity: 0.3; cursor: default; }

/* Текст в конце провала: на весь экран любого устройства, поверх живого поля (оно видно сквозь вуаль по краям).
   --col — ширина колонки (frame.width объекта), --veil — насколько приглушить поле под текстом (frame.far). */
.page-space.dive {
  inset: 0; width: auto; height: auto; border-radius: 0;
  padding: max(52px, 7vh, env(safe-area-inset-top)) max(16px, 5vw, env(safe-area-inset-right)) 14vh max(16px, 5vw, env(safe-area-inset-left));
  background: radial-gradient(ellipse 80% 90% at 50% 45%, rgba(1, 4, 9, var(--veil, 0.7)) 0%, rgba(1, 4, 9, calc(var(--veil, 0.7) * 0.85)) 55%, rgba(1, 4, 9, calc(var(--veil, 0.7) * 0.35)) 100%);
  color: #d8e4ef; font: 400 clamp(16px, 0.4vw + 14.5px, 19px)/1.72 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-shadow: 0 0 10px rgba(1, 3, 6, 0.9); text-rendering: optimizeLegibility;
  scrollbar-width: thin; scrollbar-color: rgba(0, 242, 254, 0.35) transparent;
}
.page-space.dive .page-bar, .page-space.dive .page-body { max-width: min(var(--col, 760px), 100%); }
.page-space.dive .page-bar { padding-bottom: 2.2em; }
.page-space.dive .page-body h2 { font-size: clamp(1.7em, 1.6vw + 1.1em, 2.4em); line-height: 1.18; margin: 0.2em 0 0.7em; letter-spacing: 0.01em; }
.page-space.dive .page-body h3 { font-size: 1.3em; margin-top: 1.8em; color: #bff7ff; }
.page-space.dive .page-body p { margin: 0 0 1.05em; hyphens: auto; overflow-wrap: break-word; }
.page-space.dive .page-body li { margin: 0.35em 0; }
.page-space.dive .page-body li::marker { color: rgba(0, 242, 254, 0.7); }
.page-space.dive .page-body strong { color: #f1fdff; font-weight: 600; }
.page-space.dive .page-body code, .page-space.dive .page-body pre { font: 0.88em/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.page-space.dive .page-body pre { padding: 0.8em 1em; background: rgba(0, 242, 254, 0.04); border-left: 2px solid rgba(0, 242, 254, 0.3); border-radius: 4px; }
.page-space.dive .page-body pre.page-row { padding: 0 1em; background: none; border: 0; overflow-x: auto; white-space: pre; }
.page-space.dive .widget-frame { height: calc(100vh - 13em); }

/* Предпросмотр хранителя: витрина как у гостя, одна кнопка возврата к правке. */
.kp[hidden], .kp-back[hidden] { display: none; }
.kp-back { position: fixed; left: 14px; top: 14px; z-index: 5; }
.kp-preview .keeper { visibility: hidden; }