/* telosnexus.cloud — Canva "Industrial" mode: robust, restrained, fine system lines on Night. */
.surface-cloud { --canvas: #0D0D1A; --ink: #FFFFFF; --ink-2: rgb(232 224 213 / .82); --ink-3: rgb(232 224 213 / .6); --rule: rgb(232 224 213 / .12); background: var(--canvas); color: var(--ink); }
html:has(.surface-cloud) { background: #0D0D1A; }
.surface-cloud .top.is-solid { background: rgb(13 13 26 / .88); box-shadow: 0 1px 0 var(--rule); }
.surface-cloud .display, .surface-cloud .label, .surface-cloud .rules b { color: var(--ink); }
.surface-cloud .top__nav a:hover { background: rgb(156 92 255 / .14); color: #D9C2FF; }
.surface-cloud .arrow-link { color: var(--ink); }
.logo__sub { padding-inline-start: 12px; margin-inline-start: 2px; border-inline-start: 1px solid var(--rule); font-family: var(--text-en); font-weight: 500; font-size: 1rem; color: #9C5CFF; }
.surface-space .logo__sub { color: var(--brand); }
.c-hero { min-height: max(640px, 92svh); display: grid; align-content: end; gap: clamp(32px, 5vw, 64px); padding-block-start: calc(var(--top-h) + 64px); }
.c-hero .pair { max-width: 900px; }
.c-grid { height: clamp(140px, 18vw, 260px); border-block: 1px solid var(--rule); }
.c-grid svg { width: 100%; height: 100%; }
.c-grid__rows line { stroke: rgb(232 224 213 / .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-status, .c-rules { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.c-status > h2, .c-rules > h2 { grid-column: 1 / 6; }
.board, .c-rules .rules { grid-column: 7 / -1; }
.board li { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 12px; padding-block: 24px; border-block-start: 1px solid var(--rule); }
.board li:last-child { border-block-end: 1px solid var(--rule); }
.board__n { font-family: var(--display-en); font-weight: 700; color: #9C5CFF; }
.board b { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
.board__state { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-3); white-space: nowrap; }
.board__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #9C5CFF; }
.c-close { display: grid; gap: 40px; }
@media (max-width: 1100px) { .c-status > h2, .c-rules > h2, .board, .c-rules .rules { grid-column: 1 / -1; } .top__nav { display: none; } }
@media (max-width: 680px) { .board li { grid-template-columns: 40px 1fr; } .board__state { grid-column: 2; } }

/* motion: bus routes (kit) + status board lights row by row */
.c-grid { position: relative; overflow: hidden; }
.c-grid .tnm-trace { stroke: rgb(156 92 255 / .55); }
@media (prefers-reduced-motion: no-preference) {
  .js .c-hero .display > span { animation: rise 1s cubic-bezier(.22,.8,.24,1) both; }
  .js .c-hero .display > span:nth-child(2) { animation-delay: .09s; } .js .c-hero .display > span:nth-child(3) { animation-delay: .18s; }
  .js .board:not(.tnm-live) li { opacity: 0; transform: translateY(12px); }
  .js .board.tnm-live li { transition: opacity .7s ease, transform .8s cubic-bezier(.22,.8,.24,1); transition-delay: calc(var(--i) * 160ms); }
  .js .board.tnm-live .board__state::before { animation: c-scan 2.8s ease-in-out infinite; animation-delay: calc(1s + var(--i) * 400ms); }
}
@keyframes c-scan { 0%, 70%, 100% { background: transparent; } 80% { background: #9C5CFF; } }