:root {
  color-scheme: dark;
  --bg: #06101d;
  --panel: rgba(11, 27, 45, .76);
  --panel-strong: rgba(13, 33, 55, .94);
  --line: rgba(139, 203, 255, .16);
  --muted: #8ca2b6;
  --text: #eff8ff;
  --cyan: #37e6ff;
  --blue: #4887ff;
  --violet: #9f7cff;
  --green: #57edac;
  --amber: #ffcc68;
  --red: #ff627b;
  --radius: 22px;
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 84% 9%, rgba(25, 105, 174, .18), transparent 30%), radial-gradient(circle at 13% 82%, rgba(100, 48, 178, .12), transparent 31%), #06101d; overflow-x: hidden; }
button, textarea { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 10px; top: -80px; padding: 10px 14px; background: white; color: #07111f; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 10px; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.ambient span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .16; }
.ambient span:nth-child(1) { width: 410px; height: 410px; right: -120px; top: 80px; background: #04cbff; }
.ambient span:nth-child(2) { width: 340px; height: 340px; left: 16%; bottom: -170px; background: #744dff; }
.ambient span:nth-child(3) { width: 240px; height: 240px; left: 38%; top: -120px; background: #0c7bff; }

.topbar { height: 78px; display: flex; align-items: center; gap: 28px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(5, 15, 27, .8); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 30; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { position: relative; width: 34px; height: 34px; display: grid; place-items: center; }
.brand-mark::before { content: ""; width: 9px; height: 9px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 18px var(--cyan); }
.brand-mark i { position: absolute; inset: 3px; border: 1px solid rgba(55, 230, 255, .48); border-radius: 45% 55% 50% 50%; animation: orbit 8s linear infinite; }
.brand-mark i:nth-child(2) { transform: rotate(60deg); animation-duration: 11s; }
.brand-mark i:nth-child(3) { transform: rotate(120deg); animation-duration: 14s; }
@keyframes orbit { to { rotate: 360deg; } }
.brand b { display: block; font-size: 20px; letter-spacing: .02em; }
.brand small { display: block; color: #7ecfe3; font-size: 10px; letter-spacing: .16em; margin-top: 1px; }
.live-badge { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #8aa4b8; letter-spacing: .12em; font-size: 11px; }
.live-badge span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green); animation: blink 1.8s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.share-button { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; background: rgba(71, 134, 255, .1); border: 1px solid rgba(123, 185, 255, .25); border-radius: 12px; cursor: pointer; }
.share-button:hover { background: rgba(71, 134, 255, .2); }
.share-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.detail-button { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; color: #d9faff; text-decoration: none; white-space: nowrap; border: 1px solid rgba(55,230,255,.34); border-radius: 12px; background: linear-gradient(110deg, rgba(8,122,159,.24), rgba(36,101,215,.18)); }
.detail-button:hover { border-color: var(--cyan); background: rgba(55,230,255,.13); }

.shell { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.side-nav { position: sticky; top: 78px; align-self: start; height: calc(100vh - 78px); padding: 28px 18px; border-right: 1px solid var(--line); background: rgba(6, 17, 30, .64); display: flex; flex-direction: column; min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #24445b transparent; }
.nav-label { margin: 0 12px 14px; color: #58768d; font-size: 11px; letter-spacing: .19em; }
.demo-tab { width: 100%; display: grid; grid-template-columns: 35px 1fr; gap: 7px; align-items: center; text-align: left; border: 1px solid transparent; background: transparent; padding: 14px 12px; margin: 2px 0; border-radius: 14px; cursor: pointer; color: #9aafc1; transition: background .2s, color .2s, transform .2s; }
.demo-tab:hover { color: white; background: rgba(92, 163, 227, .07); transform: translateX(2px); }
.demo-tab.is-active { color: white; border-color: rgba(67, 213, 255, .2); background: linear-gradient(100deg, rgba(41, 185, 232, .16), rgba(57, 100, 211, .07)); box-shadow: inset 3px 0 var(--cyan); }
.tab-no { color: #53768d; font: 600 12px ui-monospace, monospace; }
.demo-tab.is-active .tab-no { color: var(--cyan); }
.demo-tab b { display: block; font-size: 14px; margin-bottom: 4px; }
.demo-tab small { color: #70899d; font-size: 11px; }
.nav-foot { margin: auto 7px 0; padding: 16px 10px 0; border-top: 1px solid var(--line); }
.demo-pill { display: inline-block; font: 700 10px ui-monospace, monospace; letter-spacing: .1em; padding: 5px 7px; color: var(--amber); background: rgba(255, 204, 104, .1); border: 1px solid rgba(255, 204, 104, .26); border-radius: 5px; }
.nav-foot p { color: #677f91; font-size: 11px; line-height: 1.7; margin: 8px 0 0; }
.future-label { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); color: #8f75cf; }
.future-tab .tab-no { color: #806bb4; }
.future-tab:hover { background: rgba(159, 124, 255, .08); }
.future-tab.is-active { border-color: rgba(159, 124, 255, .25); background: linear-gradient(100deg, rgba(140, 92, 237, .2), rgba(21, 96, 177, .07)); box-shadow: inset 3px 0 var(--violet); }
.future-tab.is-active .tab-no { color: #c5aaff; }

.stage { padding: clamp(24px, 3.6vw, 54px); min-width: 0; }
.demo-panel { max-width: 1370px; margin: 0 auto; animation: reveal .48s ease both; }
.demo-panel[hidden] { display: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
.panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 9px; color: var(--cyan); font: 700 11px ui-monospace, monospace; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(27px, 3.3vw, 48px); line-height: 1.32; letter-spacing: -.035em; }
h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 28px rgba(55, 230, 255, .25); }
.glass { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(15, 37, 60, .84), rgba(8, 23, 39, .72)); border-radius: var(--radius); box-shadow: 0 22px 70px rgba(0, 3, 12, .22), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(13px); }
.clock-card, .edge-chip, .mesh-summary, .fleet-badge { flex: 0 0 auto; border-left: 1px solid rgba(87, 231, 255, .3); padding: 3px 0 3px 18px; }
.clock-card span, .edge-chip span, .mesh-summary span, .fleet-badge span { display: block; font-size: 10px; color: #6f8ba0; letter-spacing: .15em; }
.clock-card strong { display: inline-block; margin-top: 6px; font: 600 21px ui-monospace, monospace; letter-spacing: .05em; }
.clock-card small { color: var(--cyan); font-size: 10px; margin-left: 7px; }

.twin-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .85fr); gap: 18px; }
.map-card, .forecast-card { overflow: hidden; }
.card-title { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; color: #93aabd; font: 600 11px ui-monospace, monospace; letter-spacing: .09em; border-bottom: 1px solid var(--line); }
.status-ok { color: var(--green); }
.city-map { position: relative; min-height: clamp(350px, 42vw, 510px); overflow: hidden; color: #4594bd; background: radial-gradient(circle at 60% 30%, rgba(19, 113, 165, .18), transparent 38%), #071728; }
.city-map > svg { position: absolute; width: 100%; height: 100%; inset: 0; }
.terrain { fill: rgba(26, 91, 113, .13); stroke: rgba(83, 169, 189, .22); }
.river { fill: none; stroke: url(#river); stroke-width: 12; opacity: .46; }
.road { fill: none; stroke: rgba(149, 206, 224, .22); stroke-width: 5; stroke-dasharray: 9 8; }
.road.thin { stroke-width: 3; }
.buildings { fill: rgba(79, 160, 184, .14); stroke: rgba(114, 202, 224, .3); }
.sensor { --tone: var(--cyan); position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 64px; height: 64px; border: 0; background: rgba(5, 22, 35, .84); border-radius: 50%; box-shadow: 0 0 0 1px var(--tone), 0 0 26px color-mix(in srgb, var(--tone) 30%, transparent); cursor: pointer; z-index: 4; }
.sensor::before, .sensor::after { content: ""; position: absolute; inset: -10px; border: 1px solid var(--tone); border-radius: 50%; opacity: 0; animation: sensorPing 2.4s infinite; }
.sensor::after { animation-delay: 1.2s; }
@keyframes sensorPing { 0% { opacity: .45; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.65); } }
.sensor > i { width: 6px; height: 6px; display: block; border-radius: 50%; background: var(--tone); margin: 0 auto 3px; box-shadow: 0 0 8px var(--tone); }
.sensor > span { font: 700 15px ui-monospace, monospace; white-space: nowrap; }
.sensor small { font-size: 8px; margin-left: 2px; color: #95aabd; }
.sensor.river-sensor { --tone: var(--blue); }
.sensor.warn { --tone: var(--red); }
.sensor.energy { --tone: var(--green); }
.scan-line { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(64, 224, 255, .8), transparent); box-shadow: 0 0 18px #28cfff; animation: scan 5s ease-in-out infinite; }
@keyframes scan { 0%,100% { top: 4%; opacity: 0; } 15%,80% { opacity: .75; } 85% { top: 96%; } }
.sensor-pop { position: absolute; z-index: 8; left: 50%; top: 18px; transform: translateX(-50%); padding: 10px 14px; background: #102a43; border: 1px solid var(--cyan); border-radius: 10px; box-shadow: 0 10px 30px #0008; font-size: 13px; }
.map-legend { min-height: 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 23px; color: #708a9e; font-size: 11px; }
.map-legend i { width: 7px; height: 7px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--cyan); }
.map-legend .water-dot { background: var(--blue); }.map-legend .warn-dot { background: var(--red); }.map-legend .energy-dot { background: var(--green); }
.forecast-card { padding-bottom: 17px; }
.forecast-card canvas { display: block; width: calc(100% - 24px); height: 240px; margin: 10px 12px 0; }
.prediction { margin: 6px 16px 16px; padding: 15px; display: flex; gap: 12px; border: 1px solid rgba(159, 124, 255, .22); background: rgba(103, 73, 187, .1); border-radius: 14px; }
.prediction-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; background: var(--violet); color: white; font: 800 11px ui-monospace, monospace; border-radius: 9px; box-shadow: 0 0 18px rgba(159, 124, 255, .35); }
.prediction b { font-size: 14px; }.prediction p { color: #8fa4b5; font-size: 12px; line-height: 1.65; margin: 5px 0 0; }
.action { width: calc(100% - 32px); min-height: 48px; margin: 0 16px; padding: 0 17px; border-radius: 13px; border: 1px solid transparent; cursor: pointer; font-weight: 700; transition: transform .2s, filter .2s; }
.action:hover { transform: translateY(-2px); filter: brightness(1.12); }
.action.primary { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(100deg, #087a9f, #2465d7); box-shadow: 0 9px 28px rgba(21, 127, 218, .24); }
.action.danger { background: rgba(255, 98, 123, .11); color: #ff96a6; border-color: rgba(255, 98, 123, .34); }

.pulse-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .7fr); gap: 18px; }
.machine-card { overflow: hidden; min-height: 570px; }
.machine-visual { position: relative; min-height: 470px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(10, 174, 219, .13), transparent 43%); }
.machine-ring { position: relative; width: 235px; height: 235px; display: grid; place-items: center; border: 1px solid rgba(55, 230, 255, .3); border-radius: 50%; box-shadow: inset 0 0 45px rgba(55, 230, 255, .08), 0 0 60px rgba(55, 230, 255, .08); }
.machine-ring::before, .machine-ring::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(55, 230, 255, .2); animation: orbit 13s linear infinite; }
.machine-ring::before { inset: -27px; }.machine-ring::after { inset: 27px; animation-direction: reverse; animation-duration: 9s; }
.machine-core { width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(7, 24, 40, .88); border-radius: 50%; box-shadow: 0 0 0 7px rgba(55, 230, 255, .05); }
.machine-core span { color: var(--cyan); font: 700 10px ui-monospace, monospace; letter-spacing: .2em; }.machine-core b { font: 600 35px ui-monospace, monospace; margin: 8px 0 1px; }.machine-core small { color: #758ea2; }
.machine-visual canvas { position: absolute; width: 100%; height: 180px; left: 0; bottom: 0; opacity: .72; }
.sensor-strip { min-height: 98px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.sensor-strip span { padding: 23px; border-right: 1px solid var(--line); }.sensor-strip span:last-child { border: 0; }.sensor-strip small { display: block; color: #718b9f; font-size: 11px; }.sensor-strip b { display: block; margin-top: 9px; font: 600 17px ui-monospace, monospace; }
.diagnosis-card { padding: 42px 30px 28px; text-align: center; }
.ai-orb { width: 114px; height: 114px; display: grid; place-items: center; margin: 8px auto 27px; border: 1px solid var(--green); border-radius: 50%; box-shadow: 0 0 0 12px rgba(87, 237, 172, .04), 0 0 40px rgba(87, 237, 172, .13); transition: border-color .3s, box-shadow .3s; }
.ai-orb::before { content: ""; position: absolute; width: 84px; height: 84px; border: 1px dashed rgba(87,237,172,.4); border-radius: 50%; animation: orbit 8s linear infinite; }
.ai-orb span { font: 800 25px ui-monospace, monospace; color: var(--green); }.ai-orb.is-danger { border-color: var(--red); box-shadow: 0 0 0 12px rgba(255,98,123,.05), 0 0 46px rgba(255,98,123,.22); }.ai-orb.is-danger span { color: var(--red); }
.diagnosis-label { color: #6f8a9f; font-size: 12px; }.diagnosis-card h2 { font-size: 29px; margin: 7px 0 10px; }.diagnosis-card > p:not(.diagnosis-label) { min-height: 45px; color: #90a5b6; line-height: 1.65; font-size: 13px; }
.confidence { margin: 30px 0; text-align: left; }.confidence span { color: #7c94a7; font-size: 12px; }.confidence b { float: right; font: 600 14px ui-monospace, monospace; }.confidence i { display: block; height: 5px; background: #132b3e; border-radius: 5px; margin-top: 10px; overflow: hidden; }.confidence em { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .5s; }
.diagnosis-card .action { width: 100%; margin: 0; }.reset-hint { display: block; color: #5f7789; margin-top: 10px; font-size: 10px; }
.edge-chip i { width: 7px; height: 7px; display: inline-block; margin-right: 5px; background: var(--green); border-radius: 50%; box-shadow: 0 0 9px var(--green); }.edge-chip span { display: inline; color: var(--green); }.edge-chip b { display: block; margin-top: 7px; font: 500 13px ui-monospace, monospace; }

.mesh-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .64fr); gap: 18px; }
.network-card { position: relative; min-height: 570px; overflow: hidden; background: radial-gradient(circle at 52% 45%, rgba(49,128,204,.14), transparent 38%), rgba(8, 23, 39, .76); }
.network { display: block; width: 100%; height: 560px; }
.links path { fill: none; stroke: #287498; stroke-width: 2; stroke-dasharray: 5 9; transition: stroke .5s, opacity .5s; }.links path.failed { stroke: var(--red); opacity: .18; }.links path.rerouted { stroke: var(--amber); stroke-width: 3; filter: url(#glow); }
.packets circle { fill: var(--cyan); filter: url(#glow); }
.nodes g circle { fill: #0b2236; stroke: var(--cyan); stroke-width: 2; transition: .4s; }.nodes g text { text-anchor: middle; fill: #dff8ff; font-size: 13px; font-weight: 700; }.nodes .node-id { fill: #62869c; font: 10px ui-monospace, monospace; }.nodes .cloud-node circle { fill: #153966; stroke: #6aa1ff; }.nodes g.failed circle { stroke: var(--red); fill: rgba(113,22,39,.38); }.nodes g.failed text { fill: #ff8fa0; }
.network-event { position: absolute; left: 25px; bottom: 24px; padding: 14px 17px; background: rgba(5, 20, 33, .92); border: 1px solid var(--line); border-radius: 12px; }.network-event b { display: block; color: var(--green); font-size: 13px; }.network-event span { display: block; color: #7892a5; font-size: 11px; margin-top: 4px; }
.mesh-controls { padding: 34px 25px; }.mesh-controls h2 { margin: 8px 0 15px; font-size: 25px; }.mesh-controls > p:not(.eyebrow) { min-height: 94px; color: #8ca2b3; font-size: 13px; line-height: 1.8; }
.mesh-metrics { margin: 20px 0 30px; border-top: 1px solid var(--line); }.mesh-metrics span { display: flex; align-items: center; justify-content: space-between; min-height: 63px; border-bottom: 1px solid var(--line); }.mesh-metrics small { color: #7891a4; }.mesh-metrics b { font: 600 17px ui-monospace, monospace; }.mesh-controls .action { width: 100%; margin: 0; }.text-action { width: 100%; padding: 13px; margin-top: 8px; border: 0; background: none; color: #79a7c2; cursor: pointer; }.text-action:disabled { opacity: .3; cursor: default; }
.mesh-summary b { display: block; margin-top: 5px; font: 600 20px ui-monospace, monospace; }.mesh-summary i { display: block; width: 130px; height: 4px; margin-top: 8px; background: #153047; border-radius: 4px; }.mesh-summary em { display: block; width: 100%; height: 100%; background: var(--green); transition: width .4s; }

.privacy-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr); gap: 18px; }
.room-card { overflow: hidden; }.room { position: relative; min-height: 470px; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; padding: 33px; background: radial-gradient(circle at 47% 48%, rgba(55,230,255,.12), transparent 34%); }
.zone { position: relative; border: 1px solid rgba(95, 165, 195, .19); background: rgba(36, 91, 113, .07); border-radius: 14px; }.zone span { position: absolute; left: 12px; top: 10px; color: #436980; font: 700 9px ui-monospace, monospace; letter-spacing: .11em; }.zone.living { grid-row: 1 / 3; }.zone::after { content: ""; position: absolute; inset: 50% 18%; border-top: 6px solid rgba(74,143,167,.11); border-bottom: 6px solid rgba(74,143,167,.11); }
.anonymous-person { position: absolute; z-index: 4; left: 47%; top: 54%; width: 48px; height: 78px; transform: translate(-50%,-50%); transition: .7s cubic-bezier(.2,.8,.2,1); }.anonymous-person i { width: 24px; height: 24px; display: block; margin: auto; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 25px rgba(55,230,255,.6); }.anonymous-person b { width: 36px; height: 42px; display: block; margin: 4px auto 0; background: linear-gradient(var(--cyan), #1a73c6); border-radius: 16px 16px 8px 8px; }.anonymous-person.fallen { left: 68%; top: 78%; rotate: 88deg; }
.radar-wave { position: absolute; z-index: 3; left: 47%; top: 54%; width: 80px; height: 80px; border: 1px solid rgba(55,230,255,.35); border-radius: 50%; transform: translate(-50%,-50%); animation: radar 3s infinite; }.radar-wave.two { animation-delay: 1s; }.radar-wave.three { animation-delay: 2s; } @keyframes radar { from { opacity: .8; scale: .3; } to { opacity: 0; scale: 4.2; } }
.fusion-row { min-height: 102px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }.fusion-row > span { padding: 20px; border-right: 1px solid var(--line); }.fusion-row > span:last-child { border: 0; }.fusion-row i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: var(--green); border-radius: 50%; }.fusion-row small { color: #7890a2; font-size: 10px; }.fusion-row b { display: block; margin-top: 9px; font-size: 14px; }
.insight-card { padding: 30px; }.state-ring { height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(55,230,255,.22); border-radius: 50%; background: radial-gradient(circle, rgba(55,230,255,.1), transparent 63%); }.state-ring span { color: #718b9e; font-size: 11px; }.state-ring b { margin: 13px 0 8px; font-size: 22px; }.state-ring small { color: var(--cyan); }
.event-timeline { list-style: none; padding: 0; margin: 27px 0; }.event-timeline li { position: relative; display: grid; grid-template-columns: 50px 1fr; min-height: 42px; padding-left: 16px; color: #71899b; font-size: 12px; border-left: 1px solid #254157; }.event-timeline li::before { content: ""; position: absolute; width: 7px; height: 7px; left: -4px; top: 5px; background: #31556e; border-radius: 50%; }.event-timeline li.active { color: #dff8ff; }.event-timeline li.active::before { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }.event-timeline time { font: 500 11px ui-monospace, monospace; }.insight-card .action { width: 100%; margin: 0; }
.alert-flow { margin-top: 13px; padding: 13px; background: rgba(255,98,123,.1); border: 1px solid rgba(255,98,123,.3); border-radius: 10px; }.alert-flow b { display: block; color: #ff9aaa; font-size: 13px; }.alert-flow span { display: block; color: #9f8290; font-size: 10px; margin-top: 4px; }
.privacy-seal { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(87,237,172,.22); color: var(--green); background: rgba(87,237,172,.06); border-radius: 12px; font-size: 11px; }.privacy-seal svg { width: 19px; fill: currentColor; }

.copilot-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; }
.command-card, .ops-card { min-height: 590px; }.command-card { padding: 25px; display: flex; flex-direction: column; }.assistant-head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.copilot-logo { width: 40px; height: 40px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #07111f; border-radius: 12px; font: 900 13px ui-monospace, monospace; box-shadow: 0 0 20px rgba(55,230,255,.2); }.assistant-head b { display: block; }.assistant-head small { display: block; color: #6f899c; margin-top: 4px; }
.conversation { flex: 1; max-height: 330px; padding: 22px 2px; overflow-y: auto; }.assistant-message, .user-message { width: fit-content; max-width: 86%; margin-bottom: 12px; padding: 12px 14px; line-height: 1.65; font-size: 13px; border-radius: 4px 14px 14px 14px; }.assistant-message { background: rgba(49, 107, 148, .17); color: #bfd1de; border: 1px solid rgba(92, 155, 196, .15); }.user-message { margin-left: auto; background: linear-gradient(110deg, rgba(28,135,167,.48), rgba(48,95,181,.45)); border-radius: 14px 4px 14px 14px; }.assistant-message.result { border-color: rgba(87,237,172,.25); }.assistant-message.result b { color: var(--green); }.typing { display: inline-flex; gap: 4px; }.typing i { width: 5px; height: 5px; background: #6f8a9c; border-radius: 50%; animation: typing 1s infinite alternate; }.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}@keyframes typing{to{transform:translateY(-5px);background:var(--cyan)}}
.command-form { display: flex; align-items: flex-end; gap: 8px; padding: 9px; background: rgba(3, 15, 27, .65); border: 1px solid rgba(79, 184, 219, .24); border-radius: 15px; }.command-form:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(55,230,255,.06); }.command-form textarea { width: 100%; resize: none; padding: 8px 9px; color: white; background: transparent; border: 0; outline: 0; line-height: 1.5; }.command-form textarea::placeholder { color: #4f6b7e; }.command-form button { width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 11px; color: #06101d; background: var(--cyan); cursor: pointer; font-size: 21px; }.command-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }.command-chips button { padding: 7px 10px; border: 1px solid var(--line); background: transparent; color: #7e9caf; border-radius: 20px; font-size: 10px; cursor: pointer; }.command-chips button:hover { border-color: var(--cyan); color: var(--cyan); }
.ops-card { padding: 25px; }.ops-head { display: flex; align-items: center; justify-content: space-between; }.ops-head span { color: #6e899c; font: 600 11px ui-monospace, monospace; letter-spacing: .13em; }.ops-head b { color: var(--green); font: 600 12px ui-monospace, monospace; }
.device-map { height: 330px; display: grid; grid-template-columns: repeat(12, 1fr); align-content: center; gap: clamp(5px, .7vw, 10px); padding: 28px 4px; }.device-dot { aspect-ratio: 1; border-radius: 50%; background: #225269; box-shadow: 0 0 7px rgba(55,230,255,.16); animation: dotPulse 3s infinite alternate; }.device-dot:nth-child(3n){animation-delay:-1s}.device-dot:nth-child(5n){animation-delay:-2s}@keyframes dotPulse{to{background:#2a8198;box-shadow:0 0 9px rgba(55,230,255,.3)}}.device-dot.warn{background:var(--amber);box-shadow:0 0 13px rgba(255,204,104,.6)}.device-dot.danger{background:var(--red);box-shadow:0 0 13px rgba(255,98,123,.6)}
.analysis-stack { border-top: 1px solid var(--line); }.analysis-stack > div { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 0; }.analysis-stack > div > span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #315169; border-radius: 8px; color: #5f8299; font: 600 10px ui-monospace, monospace; }.analysis-stack p { margin: 0; }.analysis-stack b { display: block; font-size: 12px; }.analysis-stack small { display: block; color: #668195; font-size: 10px; margin-top: 3px; }.analysis-stack i { width: 7px; height: 7px; margin-left: auto; background: #365269; border-radius: 50%; transition: .3s; }.analysis-stack > div.running i { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.analysis-stack > div.done i { background: var(--green); }.fleet-badge { display: flex; align-items: baseline; gap: 6px; }.fleet-badge span { margin-right: 6px; }.fleet-badge b { font: 600 24px ui-monospace, monospace; }.fleet-badge small { color: #6c879b; }

/* 06—10: Future AIoT experiences */
.future-eyebrow { color: #c6a9ff; }
.future-badge { flex: 0 0 auto; min-width: 176px; padding: 10px 14px; border: 1px solid rgba(159,124,255,.25); border-radius: 13px; background: rgba(120,80,199,.08); }
.future-badge span { display: block; color: #897ba7; font: 700 9px ui-monospace, monospace; letter-spacing: .16em; }
.future-badge b { display: block; margin-top: 7px; font: 600 15px ui-monospace, monospace; color: #d7c8ff; }
.future-badge small { display: block; margin-top: 4px; color: #8c80a6; font-size: 10px; }
.future-grid, .century-grid, .heal-grid, .air-grid, .economy-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr); gap: 18px; }
.future-visual, .swarm-card, .structure-card, .air-stage, .market-card { position: relative; min-height: 570px; overflow: hidden; }
.future-control { min-height: 570px; display: flex; flex-direction: column; padding: 32px 26px 25px; }
.future-control h2 { margin: 8px 0 14px; font-size: 25px; line-height: 1.45; }
.future-control > p:not(.eyebrow) { min-height: 84px; margin: 0; color: #8ba2b5; font-size: 13px; line-height: 1.8; }
.metric-cards { display: grid; grid-template-columns: 1fr; margin: 20px 0 28px; border-top: 1px solid var(--line); }
.metric-cards span { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-bottom: 1px solid var(--line); }
.metric-cards small { color: #728da1; }.metric-cards b { font: 600 17px ui-monospace, monospace; color: #eefaff; }
.future-control .action { width: 100%; margin: auto 0 0; }
.future-action { color: #eadfff; border-color: rgba(159,124,255,.4); background: linear-gradient(110deg, rgba(126,80,218,.38), rgba(20,126,170,.27)); box-shadow: 0 12px 34px rgba(102,61,184,.15); }
.future-note { display: block; min-height: 34px; margin-top: 11px; color: #5f7588; font-size: 10px; line-height: 1.6; }

.world-field { min-height: 444px; display: grid; grid-template-columns: repeat(8, 1fr); align-content: center; gap: 9px; padding: 42px; perspective: 800px; background: radial-gradient(circle at 50% 52%, rgba(159,124,255,.15), transparent 40%); }
.future-cell { position: relative; aspect-ratio: 1.6; border: 1px solid rgba(110,170,210,.18); border-radius: 5px; background: linear-gradient(145deg, rgba(42,114,151,.21), rgba(8,30,48,.6)); transform: rotateX(48deg) rotateZ(-5deg); animation: futureFlicker 3.7s infinite alternate; transition: opacity .4s, border-color .4s, background .4s, transform .4s; }
.future-cell::after { content: ""; position: absolute; inset: 35% 12%; background: #37e6ff; opacity: .35; box-shadow: 0 0 10px #37e6ff; }
.future-cell:nth-child(3n) { animation-delay: -1.4s; }.future-cell:nth-child(5n) { animation-delay: -2.5s; }
.future-cell.lost { opacity: .2; border-color: rgba(255,98,123,.3); background: rgba(92,20,39,.3); }.future-cell.lost::after { background: var(--red); }
.future-cell.best { transform: rotateX(48deg) rotateZ(-5deg) scale(1.12); border-color: var(--green); background: rgba(45,161,116,.2); box-shadow: 0 0 18px rgba(87,237,172,.2); }.future-cell.best::after { background: var(--green); box-shadow: 0 0 12px var(--green); }
@keyframes futureFlicker { to { filter: brightness(1.55); translate: 0 -3px; } }
.timeline-beam { height: 70px; display: flex; align-items: center; gap: 11px; padding: 0 35px; border-top: 1px solid var(--line); color: #71889b; font: 600 9px ui-monospace, monospace; letter-spacing: .13em; }
.timeline-beam i { height: 2px; flex: 1; background: linear-gradient(90deg, #386f91, var(--violet), var(--green)); box-shadow: 0 0 11px rgba(159,124,255,.45); }.timeline-beam strong { color: var(--green); font-size: 9px; }

.swarm-orbit { position: relative; min-height: 445px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(45,159,142,.12), transparent 48%); }
.energy-sun { position: relative; z-index: 4; width: 144px; height: 144px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--green); border-radius: 50%; background: #0a2631; box-shadow: 0 0 55px rgba(87,237,172,.16); }
.energy-sun span { color: #739a91; font-size: 10px; }.energy-sun b { margin: 8px 0 2px; font: 600 30px ui-monospace, monospace; color: var(--green); }.energy-sun small { color: #719087; font-size: 9px; }
.energy-ring { position: absolute; border: 1px dashed rgba(87,237,172,.2); border-radius: 50%; animation: orbit 30s linear infinite; }.ring-a { width: 240px; height: 240px; }.ring-b { width: 340px; height: 340px; animation-direction: reverse; animation-duration: 42s; }.ring-c { width: 430px; height: 430px; animation-duration: 55s; }
.swarm-node { --angle: 0deg; position: absolute; z-index: 5; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border: 1px solid var(--cyan); border-radius: 50%; background: #143b4b; box-shadow: 0 0 10px rgba(55,230,255,.35); transform: rotate(var(--angle)) translateX(var(--radius, 120px)) rotate(calc(-1 * var(--angle))); transition: background .3s, box-shadow .3s; }
.swarm-node.awake { background: var(--green); border-color: var(--green); box-shadow: 0 0 18px rgba(87,237,172,.8); }.swarm-node.old { border-color: var(--amber); background: #614e25; }
.energy-sources { height: 74px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--line); color: #738b9b; font-size: 11px; }.energy-sources i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }

.structure-map { position: relative; min-height: 430px; overflow: hidden; background: linear-gradient(180deg, rgba(35,91,122,.08), rgba(5,17,29,.3)); }
.bridge-deck { position: absolute; z-index: 3; left: 7%; right: 7%; top: 44%; height: 58px; display: flex; justify-content: space-around; align-items: center; border: 1px solid #4c7b95; background: linear-gradient(#1e4258, #0e283a); box-shadow: 0 12px 45px rgba(0,0,0,.28); }
.bridge-deck > i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.bridge-pier { position: absolute; z-index: 2; top: calc(44% + 58px); width: 11%; height: 135px; background: linear-gradient(90deg, #132d40, #24485d, #132d40); clip-path: polygon(10% 0,90% 0,100% 100%,0 100%); }.bridge-pier.left { left: 21%; }.bridge-pier.right { right: 21%; }
.micro-crack { position: absolute; left: 54%; top: 0; width: 3px; height: 0; background: var(--red); box-shadow: 0 0 15px var(--red); transform: rotate(13deg); transition: height .35s; }.micro-crack.active { height: 44px; animation: crackPulse .7s infinite alternate; }.micro-crack.repaired { background: var(--green); box-shadow: 0 0 15px var(--green); height: 9px; }
@keyframes crackPulse { to { filter: brightness(1.8); } }
.healing-flow { position: absolute; left: 45%; right: 31%; bottom: 8px; height: 3px; background: var(--green); box-shadow: 0 0 14px var(--green); transform: scaleX(0); transform-origin: left; transition: transform .7s; }.healing-flow.active { transform: scaleX(1); }
.strain-grid { position: absolute; inset: 28px; background-image: linear-gradient(rgba(61,128,159,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(61,128,159,.09) 1px,transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle,black 20%,transparent 76%); }
.strain-grid.danger { background-image: radial-gradient(circle at 55% 48%,rgba(255,98,123,.35),transparent 18%),linear-gradient(rgba(61,128,159,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(61,128,159,.09) 1px,transparent 1px); }
.healing-readout { min-height: 90px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }.healing-readout span { padding: 20px; border-right: 1px solid var(--line); }.healing-readout span:last-child { border: 0; }.healing-readout small { display: block; color: #71899c; font-size: 10px; }.healing-readout b { display: block; margin-top: 8px; font: 600 15px ui-monospace, monospace; }
.healing-stages { list-style: none; padding: 4px 0; margin: 10px 0 22px; }.healing-stages li { display: flex; align-items: center; gap: 10px; min-height: 39px; color: #657f92; font-size: 12px; }.healing-stages i { width: 10px; height: 10px; border: 1px solid #476176; border-radius: 50%; }.healing-stages li.running { color: var(--amber); }.healing-stages li.running i { border-color: var(--amber); box-shadow: 0 0 9px var(--amber); }.healing-stages li.done { color: var(--green); }.healing-stages li.done i { border-color: var(--green); background: var(--green); }

.air-space { position: relative; min-height: 440px; overflow: hidden; perspective: 700px; background: radial-gradient(circle at 50% 53%, rgba(55,230,255,.15), transparent 38%); }
.air-axis { position: absolute; left: 50%; top: 52%; height: 1px; width: 68%; transform-origin: left; background: linear-gradient(90deg,rgba(55,230,255,.65),transparent); }.air-axis.x { transform: rotate(0); }.air-axis.y { transform: rotate(120deg); }.air-axis.z { transform: rotate(240deg); }
.gesture-point { position: absolute; z-index: 5; left: 32%; top: 56%; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; transition: left .55s, top .55s, transform .55s; }.gesture-point::before,.gesture-point::after { content:"";position:absolute;inset:-14px;border:1px solid rgba(55,230,255,.25);border-radius:50%;animation:sensorPing 2s infinite }.gesture-point::after{animation-delay:1s}.gesture-point i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }.gesture-point span { position: absolute; top: 66px; white-space: nowrap; color: #668ca2; font: 600 9px ui-monospace, monospace; }.gesture-point.swipe { left: 73%; }.gesture-point.pinch { transform: scale(.58); }.gesture-point.hold { top: 34%; }
.haptic-pulse { position: absolute; left: 73%; top: 56%; width: 20px; height: 20px; border: 1px solid var(--violet); border-radius: 50%; opacity: 0; }.haptic-pulse.active { animation: haptic 1s 2; } @keyframes haptic { from { opacity: 1; scale: .4; } to { opacity: 0; scale: 6; } }
.virtual-control { position: absolute; right: 8%; top: 15%; width: 160px; padding: 15px; border: 1px solid rgba(159,124,255,.35); border-radius: 13px; background: rgba(15,29,51,.83); }.virtual-control span { color: #748ca0; font-size: 10px; }.virtual-control b { display: block; margin: 8px 0; font: 600 22px ui-monospace,monospace; }.virtual-control > i { display: block; height: 4px; background: #20384a; }.virtual-control em { display:block;width:42%;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .5s; }
.gesture-list { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid var(--line); }.gesture-list button { padding: 9px 13px; border: 1px solid var(--line); border-radius: 18px; background: transparent; color: #7e9caf; cursor: pointer; }.gesture-list button:hover { color: var(--cyan); border-color: var(--cyan); }

.agent-market { position: relative; min-height: 442px; display: grid; grid-template-columns: repeat(6,1fr); align-content: center; gap: 22px; padding: 48px; background: radial-gradient(circle,rgba(159,124,255,.13),transparent 45%); }
.market-agent { position: relative; z-index: 2; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(55,230,255,.24); border-radius: 16px; background: #0c2639; color: #7898aa; font: 700 9px ui-monospace,monospace; transition: .4s; }.market-agent::after { content:"";position:absolute;width:5px;height:5px;right:8px;top:8px;border-radius:50%;background:var(--green); }.market-agent.trading { border-color: var(--violet); color: #d3c1ff; box-shadow: 0 0 21px rgba(159,124,255,.25); transform: translateY(-4px); }.market-agent.needy::after { background: var(--amber); }
.trade-beam { position: absolute; z-index: 1; left: 10%; right: 10%; top: 50%; height: 1px; background: linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent); opacity: .4; box-shadow: 0 0 18px var(--violet); animation: tradeSweep 3s infinite; } @keyframes tradeSweep { 50% { top: 31%; opacity: .8; } }
.market-ticker { min-height: 78px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 14px 23px; border-top: 1px solid var(--line); }.market-ticker span { color: #7b94a7; font-size: 11px; }.market-ticker b { grid-row: 1/3; grid-column: 2; color: var(--cyan); font-size: 12px; }.market-ticker small { color: #566e80; font-size: 9px; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: 25px; transform: translate(-50%, 20px); padding: 11px 16px; color: #dffaff; background: #12314a; border: 1px solid rgba(55,230,255,.35); border-radius: 12px; box-shadow: 0 12px 45px #0009; opacity: 0; pointer-events: none; transition: .25s; font-size: 13px; }.toast.show { opacity: 1; transform: translate(-50%,0); }
button:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

body.embed .topbar { display: none; } body.embed .shell { min-height: 100vh; grid-template-columns: 1fr; } body.embed .side-nav { display: none; } body.embed .stage { padding: clamp(16px, 2.5vw, 32px); }

@media (max-width: 1020px) {
  .shell { grid-template-columns: 1fr; }
  .side-nav { position: sticky; top: 78px; z-index: 20; height: auto; display: flex; flex-direction: row; gap: 7px; padding: 10px 14px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
  .nav-label, .nav-foot { display: none; }.demo-tab { min-width: 175px; grid-template-columns: 28px 1fr; padding: 10px; margin: 0; }.demo-tab small { display: none; }
  .twin-grid, .pulse-grid, .mesh-layout, .privacy-grid, .copilot-grid, .future-grid, .century-grid, .heal-grid, .air-grid, .economy-grid { grid-template-columns: 1fr; }
  .diagnosis-card { min-height: 500px; }.insight-card { min-height: 530px; }
}
@media (max-width: 640px) {
  .topbar { height: 66px; padding: 0 12px; gap: 8px; }.brand b { max-width: 155px; font-size: 13px; line-height: 1.25; }.brand small, .live-badge { display: none; }.detail-button { margin-left: auto; min-height: 38px; padding: 7px 9px; font-size: 11px; }.share-button span { display: none; }.share-button { padding: 8px 10px; }
  .side-nav { top: 66px; }.stage { padding: 23px 14px 40px; }.panel-head { align-items: flex-start; flex-direction: column; gap: 18px; }.panel-head > :last-child { align-self: stretch; }
  h1 { font-size: 28px; }.city-map { min-height: 390px; }.sensor { width: 56px; height: 56px; }.forecast-card canvas { height: 210px; }
  .machine-card { min-height: auto; }.machine-visual { min-height: 410px; }.machine-ring { width: 200px; height: 200px; }.sensor-strip { grid-template-columns: 1fr; }.sensor-strip span { border-right: 0; border-bottom: 1px solid var(--line); padding: 15px 20px; }.sensor-strip span:last-child { border: 0; }
  .network-card { min-height: 430px; }.network { height: 430px; }.network-event { left: 14px; bottom: 13px; }.fusion-row { grid-template-columns: repeat(2, 1fr); }.fusion-row > span:nth-child(2) { border-right: 0; }.room { min-height: 390px; padding: 20px; }
  .command-card, .ops-card { min-height: 560px; padding: 19px; }.device-map { grid-template-columns: repeat(10, 1fr); height: 300px; }.command-chips { overflow-x: auto; flex-wrap: nowrap; }.command-chips button { white-space: nowrap; }
  .future-badge { width: 100%; }.future-control { min-height: 520px; padding: 25px 20px; }.world-field { min-height: 380px; padding: 25px 16px; gap: 6px; }.swarm-orbit { min-height: 390px; }.ring-c { width: 360px; height: 360px; }.agent-market { min-height: 390px; grid-template-columns: repeat(4,1fr); gap: 13px; padding: 28px 22px; }.structure-map { min-height: 370px; }.healing-readout { grid-template-columns: 1fr; }.healing-readout span { border-right: 0; border-bottom: 1px solid var(--line); padding: 13px 20px; }.air-space { min-height: 390px; }.virtual-control { right: 5%; width: 140px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }