/* /system/ — 3D system explorer. Builds on main.css. */
.sx-page .nav { position: sticky; }
.sx { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 48px); align-items: center; min-height: calc(100dvh - 80px); padding: 24px var(--gutter) 40px; }
.sx__copy h1 { font-size: clamp(34px, 4vw, 64px); line-height: 1.15; margin: 0; }
.sx__copy .lead { max-width: 30em; }
.sx__caption { min-height: 3.4em; margin: 22px 0 10px; padding: 12px 14px; border-radius: 14px; font-size: 15px; background: rgba(13,16,32,.7); box-shadow: inset 0 0 0 1px rgba(0,213,255,.25); }
.sx__caption:empty { visibility: hidden; }
.sx__caption b { display: block; font-size: 11px; color: var(--cyan); letter-spacing: .1em; margin-bottom: 2px; }
.sx__caption.is-in { animation: qa-in .5s var(--ease) both; }
.sx__run[disabled] { opacity: .6; cursor: progress; }
.sx__stage { position: relative; height: min(76vh, 720px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 55%, rgba(108,99,255,.18), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); box-shadow: inset 0 0 0 1px var(--line); }
.sx__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.sx__stage canvas:active { cursor: grabbing; }
.sx__labels { position: absolute; inset: 0; pointer-events: none; }
.sx__label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 999px; cursor: pointer; pointer-events: auto; white-space: nowrap;
  font: 500 12px var(--ar); color: var(--white); background: rgba(9,11,19,.78); box-shadow: inset 0 0 0 1px rgba(150,162,189,.25); backdrop-filter: blur(8px); transition: background .3s, box-shadow .3s, opacity .3s; will-change: transform; }
html[lang="en"] .sx__label { font-family: var(--en); }
.sx__label .ic { width: 14px; height: 14px; color: var(--cyan); }
.sx__label:hover, .sx__label.is-on { background: rgba(0,213,255,.16); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 24px -4px rgba(0,213,255,.6); }
.sx__panel { position: absolute; z-index: 3; top: 18px; inset-inline-end: 18px; width: min(320px, calc(100% - 36px)); padding: 18px 18px 16px; border-radius: 18px; background: rgba(13,16,32,.94); box-shadow: inset 0 0 0 1px rgba(0,213,255,.35), 0 30px 80px -20px rgba(0,0,0,.9); animation: qa-in .4s var(--ease); }
.sx__panel[hidden] { display: none; }
.sx__panel h3 { margin: 4px 0 6px; font-size: 22px; }
.sx__panel p:last-child { margin: 0; color: #C9D0E2; font-size: 15px; }
.sx__tag { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; color: var(--cyan); letter-spacing: .08em; }
.sx__tag .ic { width: 14px; height: 14px; }
.sx__x { position: absolute; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; color: var(--white); background: rgba(245,247,255,.06); font: 400 20px/1 var(--en); }
.sx__hint { position: absolute; bottom: 14px; inset-inline-start: 18px; margin: 0; font-size: 11px; color: var(--gray); pointer-events: none; }
.sx__index { position: absolute; bottom: 14px; inset-inline-end: 14px; display: none; }
.sx__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sx__list button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 500 13px var(--ar); color: var(--white); background: rgba(13,16,32,.85); box-shadow: inset 0 0 0 1px var(--line); }
.sx__list button.is-on { box-shadow: inset 0 0 0 1px var(--cyan); background: rgba(0,213,255,.12); }
.sx__list .ic { width: 15px; height: 15px; color: var(--cyan); }
.sx__stage.is-flat .sx__index { display: block; position: static; padding: 24px; }
.sx__stage.is-flat { height: auto; }
.sx__stage.is-flat canvas, .sx__stage.is-flat .sx__hint { display: none; }
.sx__index .mono { display: none; }
.sx__note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--gray); text-align: center; }
@media (max-width: 960px) {
  .sx { grid-template-columns: 1fr; min-height: 0; }
  .sx__stage { height: 62vh; min-height: 420px; }
  .sx__panel { top: auto; bottom: 14px; inset-inline: 14px; width: auto; }
}
/* v2: labels sit under each block with its colour; lane names on the side */
.sx__label { gap: 7px; padding: 6px 12px 6px 10px; font-size: 12.5px; background: rgba(9,11,19,.86); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #00d5ff) 45%, transparent), 0 8px 24px -10px rgba(0,0,0,.9); }
.sx__label .ic { color: var(--c, var(--cyan)); }
.sx__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--cyan)); box-shadow: 0 0 8px var(--c, var(--cyan)); }
.sx__label:hover, .sx__label.is-on { background: color-mix(in srgb, var(--c, #00d5ff) 18%, rgba(9,11,19,.9)); box-shadow: inset 0 0 0 1px var(--c, var(--cyan)), 0 0 26px -6px var(--c, var(--cyan)); }
.sx__lane { position: absolute; left: 0; top: 0; font-size: 11px; letter-spacing: .14em; color: rgba(150,162,189,.7); pointer-events: none; white-space: nowrap; }
.sx__stage { background: radial-gradient(60% 55% at 50% 58%, rgba(108,99,255,.16), transparent 70%), radial-gradient(40% 30% at 50% 100%, rgba(0,213,255,.08), transparent 70%), #070912; }
@media (max-width: 760px) { .sx__lane { display: none; } .sx__label span { font-size: 12px; } .sx__label { padding: 5px 9px; gap: 5px; } .sx__label::before { display: none; } /* compact: the side labels overlapped on phones */
  .sx__label:not(.is-on) span { display: none; } .sx__label:not(.is-on) { width: 34px; height: 34px; padding: 0; justify-content: center; } /* icon only; the tapped piece shows its name */ }

/* Readable copy of the 3D model (search engines and AI assistants read it; visitors who skip the 3D too) */
.sx-read { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding: clamp(40px, 6vw, 88px) var(--gutter); border-top: 1px solid var(--line); }
.sx-read h2 { font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 8px; }
.sx-read .lead { margin: 0 0 24px; color: var(--gray); font-size: 16px; }
.sx-read__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.sx-read__parts > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(245,247,255,.03); }
.sx-read__parts dt { display: flex; align-items: center; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.sx-read__parts dt .ic { width: 18px; height: 18px; color: var(--cyan); flex: none; }
.sx-read__parts dt .mono { font-size: 11px; font-weight: 400; color: var(--gray); margin-inline-start: auto; }
.sx-read__parts dd { margin: 6px 0 0; color: #C9D0E2; font-size: 14px; line-height: 1.6; }
.sx-read__flow { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.sx-read__flow li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; color: #C9D0E2; line-height: 1.6; }
.sx-read__flow li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono, monospace); font-size: 12px; color: var(--cyan); flex: none; }
@media (max-width: 960px) { .sx-read { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sx-read__parts { grid-template-columns: 1fr; } }