:root {
  --teal: #02afa6; --teal-hi: #2fe0d4; --navy: #1d2040; --ink: #05060f;
  --panel: rgba(12, 15, 36, 0.8); --pline: rgba(2, 175, 166, 0.34); --ptext: #eef2ff; --pmuted: #b9c1de;
  --text: #f4f7ff; --muted: #c3cae4;
  --font: "Urbanist", "Century Gothic", "Avenir Next", "Futura", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --jp: "Urbanist", "Century Gothic", "Avenir Next", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --panel: rgba(246, 248, 255, 0.92); --pline: rgba(2, 140, 133, 0.45); --ptext: #141832; --pmuted: #3d4466; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
html[lang="ja"] body { font-family: var(--jp); }
:lang(ja) { word-break: keep-all; line-break: strict; overflow-wrap: anywhere; letter-spacing: 0 !important; font-style: normal !important; font-synthesis: none; text-transform: none !important; }
a { color: var(--teal-hi); }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lc-root { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); isolation: isolate; }
.lc-stage { position: absolute; inset: 0; touch-action: pan-y; }
.lc-stage:focus-visible { outline-offset: -4px; }
.lc-root[data-mode="explore"] .lc-stage { touch-action: none; cursor: grab; }
.lc-stage canvas { display: block; width: 100%; height: 100%; }
.lc-poster { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 1s ease;
  background:
    radial-gradient(ellipse 30% 40% at 62% 58%, rgba(2, 175, 166, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 30% at 60% 72%, rgba(46, 134, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #03040c 0%, #0b0f28 55%, #05060f 100%); }
.is-live .lc-poster { opacity: 0; }
.lc-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.lc-readout { position: absolute; left: 0; top: 0; font: 600 12px/1 var(--mono); color: #d9fffc; background: rgba(2, 36, 42, 0.78);
  border: 1px solid rgba(2, 175, 166, 0.7); padding: 4px 7px; border-radius: 4px; white-space: nowrap; opacity: 0; will-change: transform, opacity; }

.lc-scrim { position: absolute; inset: 0 auto 0 0; width: 58%; z-index: 3; pointer-events: none; transition: opacity 0.6s;
  background: linear-gradient(90deg, rgba(5, 6, 15, 0.86) 0%, rgba(5, 6, 15, 0.55) 55%, transparent 100%); }
.lc-root[data-mode="explore"] .lc-scrim { opacity: 0; }

.lc-top { position: absolute; inset: 0 0 auto 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; pointer-events: none; }
.lc-top > * { pointer-events: auto; }
.lc-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: 0.01em; }
.lc-brand:hover { color: #fff; }
.lc-brand img { width: 40px; height: 40px; display: block; }
.lc-top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lc-sim { font: 600 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px dashed rgba(195, 202, 228, 0.55); padding: 7px 9px; border-radius: 4px; background: rgba(5, 6, 15, 0.5); }
.lc-lang { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--pline); border-radius: 999px; padding: 3px; backdrop-filter: blur(10px); }
.lc-lang button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--pmuted); font-family: var(--jp); }
.lc-lang button:hover { color: var(--ptext); }
.lc-lang button[aria-pressed="true"] { background: var(--teal); color: #03161a; font-weight: 700; }
.lc-lang button:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 1px; }
.lc-iconbtn { all: unset; cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; background: var(--panel); border: 1px solid var(--pline); color: var(--ptext); }
.lc-iconbtn:hover { border-color: var(--teal); }
.lc-iconbtn:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }

.lc-hero { position: absolute; z-index: 4; left: clamp(20px, 4.2vw, 64px); top: 50%; transform: translateY(-46%); max-width: min(540px, 40vw); transition: opacity 0.5s, transform 0.5s; }
.lc-root[data-mode="explore"] .lc-hero { opacity: 0; pointer-events: none; transform: translate(-24px, -46%); }
.lc-eyebrow { margin: 0 0 16px; font: 600 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-hi); }
.lc-hero h1 { margin: 0 0 14px; font-size: clamp(36px, 4.4vw, 66px); line-height: 1.02; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
html[lang="ja"] .lc-hero h1 { line-height: 1.22; font-size: clamp(32px, 3.8vw, 56px); }
.lc-tag2 { margin: 0 0 18px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; color: var(--teal-hi); }
.lc-sub { margin: 0 0 28px; font-size: 16.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
html[lang="ja"] .lc-sub { line-height: 1.8; font-size: 15.5px; }
.lc-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font: 700 15px/1.2 inherit; font-family: inherit; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.lc-btn-primary { background: var(--teal); color: #03161a; }
.lc-btn-primary:hover { background: var(--teal-hi); color: #03161a; }
.lc-btn-ghost { background: rgba(255, 255, 255, 0.05); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.lc-btn-ghost:hover { border-color: #fff; color: #fff; }
.lc-btn-explore { background: transparent; color: var(--teal-hi); border-color: var(--teal); }
.lc-btn-explore:hover { background: rgba(2, 175, 166, 0.14); }
.lc-exit { position: absolute; z-index: 5; top: 78px; left: 22px; display: none; }
.lc-root[data-mode="explore"] .lc-exit { display: inline-flex; }

.lc-panel { position: absolute; z-index: 4; background: var(--panel); color: var(--ptext); border: 1px solid var(--pline); border-radius: 10px; backdrop-filter: blur(12px); font-size: 13px; }
.lc-panel-head { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 14px; cursor: pointer; font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pmuted); }
.lc-panel-head:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: -2px; border-radius: 10px; }
.lc-panel-head::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.lc-panel-head[aria-expanded="false"]::after { transform: rotate(-135deg) translateY(-2px); }
.lc-panel-head[aria-expanded="false"] + .lc-panel-body { display: none; }
.lc-panel-body { padding: 0 14px 13px; }

.lc-legend { right: 22px; bottom: 22px; width: 300px; }
.lc-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-legend li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; line-height: 1.3; }
.sw { display: block; justify-self: center; }
.sw-probe { width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #2fe0d4); position: relative; }
.sw-probe::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #2fe0d4; box-shadow: 0 0 8px #2fe0d4; }
.sw-tcp { width: 18px; height: 11px; border-radius: 2px; background: #2e86ff; box-shadow: 0 0 8px rgba(46, 134, 255, 0.8); }
.sw-ack { width: 10px; height: 7px; border-radius: 2px; background: #6aa9ff; box-shadow: 0 0 6px rgba(46, 134, 255, 0.8); }
.sw-udp { width: 20px; height: 9px; background: #ff8a1e; clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 4px #ff8a1e); }
.sw-measure { width: 28px; height: 1.5px; background: #7ff5ec; box-shadow: 0 0 4px #7ff5ec; }
.sw-healthy, .sw-degraded, .sw-critical { width: 28px; height: 3px; border-radius: 2px; }
.sw-healthy { background: #2ee59d; } .sw-degraded { background: #ffd23f; } .sw-critical { background: #ff2d78; }
.sw-alert { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 6px #fff; }

.lc-dock { left: 22px; bottom: 22px; width: 270px; display: none; }
.lc-root[data-mode="explore"] .lc-dock { display: block; }
.lc-group { margin-top: 10px; }
.lc-group:first-child { margin-top: 0; }
.lc-group-title { font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pmuted); margin: 0 0 7px; }
.lc-switch { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 6px 0; cursor: pointer; color: var(--ptext); }
.lc-switch::after { content: ""; flex: none; width: 30px; height: 17px; border-radius: 999px; background: rgba(185, 193, 222, 0.3);
  box-shadow: inset 0 0 0 2px transparent; background-image: radial-gradient(circle at 8.5px 50%, #fff 5.5px, transparent 6px); transition: background-color 0.2s; }
.lc-switch[aria-checked="true"]::after { background-color: var(--teal); background-image: radial-gradient(circle at 21.5px 50%, #fff 5.5px, transparent 6px); }
.lc-switch:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; border-radius: 4px; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-chip { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--pline); color: var(--ptext); font-size: 12.5px; }
.lc-chip:hover { border-color: var(--teal); }
.lc-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #03161a; font-weight: 700; }
.lc-chip:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }

.lc-caption { position: absolute; z-index: 4; left: 50%; bottom: 26px; transform: translateX(-50%); max-width: min(520px, 36vw); text-align: center;
  font-size: 15px; line-height: 1.35; color: #fff; padding: 10px 18px; border-radius: 999px; background: rgba(5, 6, 15, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); }
.lc-fps { position: absolute; z-index: 7; top: 72px; right: 22px; font: 600 11px/1 var(--mono); color: #d9fffc; background: rgba(5, 6, 15, 0.8); padding: 6px 8px; border-radius: 4px; border: 1px solid var(--pline); }
.lc-fallback { display: none; position: absolute; z-index: 4; right: clamp(20px, 5vw, 80px); top: 50%; transform: translateY(-50%); max-width: 380px; padding: 20px 22px; border-radius: 12px; background: var(--panel); color: var(--ptext); border: 1px solid var(--pline); }
.lc-fallback h2 { margin: 0 0 8px; font-size: 18px; }
.lc-fallback p { margin: 0; color: var(--pmuted); line-height: 1.5; }
.is-fallback .lc-fallback { display: block; }
.is-fallback .lc-legend, .is-fallback .lc-caption, .is-fallback [data-action="explore"] { display: none; }

.is-embed .lc-brand, .is-embed .lc-hero, .is-embed .lc-scrim { display: none; }
.is-embed .lc-top { justify-content: flex-end; }

@media (max-width: 1100px) { .lc-caption { display: none; } }
@media (max-width: 720px) {
  .lc-top { padding: 12px 14px; }
  .lc-sim { padding: 5px 7px; font-size: 10px; }
  .lc-brand span { display: none; }
  .lc-lang button { padding: 6px 9px; font-size: 12px; }
  .lc-scrim { display: none; }
  .lc-hero { left: 0; right: 0; top: auto; bottom: 0; transform: none; max-width: none; padding: 60px 18px 22px;
    background: linear-gradient(to top, rgba(5, 6, 15, 0.96) 62%, rgba(5, 6, 15, 0)); }
  .lc-root[data-mode="explore"] .lc-hero { transform: translateY(24px); }
  .lc-eyebrow { margin-bottom: 10px; font-size: 11px; }
  .lc-hero h1 { font-size: clamp(28px, 8vw, 38px); }
  .lc-sub { font-size: 14.5px; margin-bottom: 16px; }
  .lc-btn { padding: 12px 16px; font-size: 14px; min-height: 44px; }
  .lc-root[data-mode="attract"] .lc-legend { display: none; }
  .lc-legend { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .lc-dock { left: 12px; right: 12px; top: 64px; bottom: auto; width: auto; }
  .lc-exit { top: auto; bottom: 64px; left: 12px; }
  .lc-fallback { left: 14px; right: 14px; top: 76px; transform: none; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .lc-poster, .lc-hero, .lc-scrim { transition: none; } }