/* Coordinates below are measured from the supplied AI/PDF, in its 192 × 112.18298 console. */
.demo-section.wide{width:min(100%,1920px)}
.dashboard{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff}
.console-stage{position:relative;width:100%;aspect-ratio:192/112.18298;container-type:inline-size;--console-small:max(14px,.625cqw);--console-value:max(18px,.9375cqw);font-family:var(--sans);font-weight:500;line-height:1;letter-spacing:.05em}
.console-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.dashboard .dashboard-stats{position:absolute;left:2.09458%;top:1.8632%;width:95.81073%;height:9.52016%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.81915%}
.dashboard .metric{position:relative;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font-size:var(--console-small);line-height:1}
.dashboard-stats .metric-label,.dashboard-stats .metric>b,.dashboard-stats .metric>small{position:absolute;left:4.6323%;margin:0;padding:0;white-space:nowrap;line-height:1;color:inherit}
.dashboard-stats .metric-label{top:calc(29.1648% - 1em);font-size:var(--console-small);letter-spacing:.1em}
.dashboard-stats .metric>b{top:calc(64.1861% - 1em);left:4.927%;font-family:var(--sans);font-size:max(20px,1.348cqw);font-weight:600;line-height:1;letter-spacing:.02em}
.dashboard-stats .metric>small{top:calc(84.4004% - 1em);font-size:var(--console-small)}
.dashboard-stats em{font-style:normal;color:#aea341}
.dashboard-main{position:absolute;inset:0;display:block;margin:0;padding:0}
.dashboard .bridge-scene{position:absolute;left:2.09474%;top:15.32755%;width:55.07708%;height:58.70668%;min-height:0;aspect-ratio:auto;perspective:none;display:block;background:none;border:0;border-radius:0;overflow:visible;container-type:inline-size}
.console-scene-art{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.scene-person-original{position:absolute;max-width:none;pointer-events:none}
.scene-captions{position:absolute;inset:0;overflow:visible;pointer-events:none}
/* Original baselines, actual font outlines, 0.1em tracking and unattenuated ink.
   Keep the user's 14px PC floor; the AI's original fine print was 12px at 1920. */
.scene-caption{font-family:var(--sans);font-size:max(14px,1.1347722cqw);font-weight:500;letter-spacing:.1em;fill:#d88344;opacity:1}
.dashboard .sensor{position:absolute;left:var(--point-x);top:var(--point-y);width:var(--point-size);height:auto;aspect-ratio:1;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:inherit;box-shadow:none;outline:0;translate:-50% -50%;transform:none;overflow:visible}
.dashboard .sensor::before{display:none}
.dashboard .sensor::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);translate:-50% -50%}
.sensor-symbol{width:100%;height:100%;max-width:none;pointer-events:none}
.sensor.active .sensor-symbol{content:var(--point-active,url('../images/digital-point-gold.svg'))}
.dashboard .sensor-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.dashboard .sensor:focus-visible{outline:2px solid white;outline-offset:4px}
.dashboard .sensor-detail{position:absolute;left:58.68458%;top:15.32755%;width:39.22083%;height:58.70668%;margin:0;padding:0;border:0;border-radius:0;background:none;display:block;color:#fff}
.sensor-detail h3{position:absolute;left:2.89015%;top:calc(5.76282% - 1em);margin:0;padding:0;font:500 max(16px,.833333cqw)/1 var(--sans);white-space:nowrap}
.sensor-detail .sensor-subtitle{position:static;margin:0;padding:0;border:0}
.sensor-detail .sensor-en{position:absolute;left:2.89015%;top:calc(9.10354% - 1em);font-size:var(--console-small);color:#b6ae59;letter-spacing:0;line-height:1;white-space:nowrap}
.sensor-detail .status-ok{position:absolute;left:93.48465%;top:calc(6.91649% - 1em);float:none;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:var(--console-small);line-height:1;color:#6dbe44}
.sensor-detail .module-metrics{position:absolute;left:2.95801%;top:13.85522%;width:94.78089%;height:20.69485%;margin:0;padding:0;background:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6.77505% 1.47226%}
.sensor-detail .metric-label{position:absolute;left:3.48897%;top:calc(34.79429% - 1em);font-size:var(--console-small);line-height:1;color:#fff}
.sensor-detail .metric b{position:absolute;left:3.48897%;top:calc(73.95718% - 1em);font:500 var(--console-value)/1 var(--sans);color:#fff;white-space:nowrap}
.sensor-detail .metric-unit{display:inline;font:500 var(--console-small)/1 var(--sans);margin-left:.15em;color:inherit}
.sensor-detail .log-line{position:absolute;left:2.89%;top:36.136%;width:94.848%;height:5.2651%;margin:0;padding:0 1.696%;display:flex;align-items:center;gap:.75em;background:none;border:0;font-size:var(--console-small);line-height:1;color:#fff}
.log-line time{flex-shrink:0;color:#aea341;font-size:var(--console-small)}
.log-message{min-width:0;font-size:var(--console-small);line-height:1.2}
.sensor-detail .demo-actions{position:absolute;left:2.95801%;top:90.83667%;width:94.78089%;height:5.94907%;margin:0;display:flex;gap:.7354%}
.sensor-detail .demo-actions button{flex:1;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#231f20;font-family:var(--sans);font-weight:500;font-size:max(14px,.729167cqw);line-height:1;white-space:nowrap}
.sensor-detail .demo-actions button+button{background:transparent;color:white;border:0}
.dashboard .history-chart{position:absolute;left:2.0949%;top:77.11072%;width:95.81042%;height:13.87733%;margin:0;padding:0;background:none;border:0;border-radius:0}
.console-history-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.history-chart .timeline{position:absolute;inset:0;display:block;margin:0;font-size:var(--console-small);line-height:1;color:#fff}
.history-chart .timeline span{position:absolute;left:var(--time-x);top:calc(91.51028% - 1em);font-size:inherit;line-height:1;white-space:nowrap}
.history-chart .chart-event{position:absolute;left:59.799%;top:34.99%;translate:-50% -100%;padding:2px 7px;border-radius:3px;background:white;color:#ada347;font-family:var(--sans);font-weight:500;font-size:var(--console-small);line-height:1;white-space:nowrap}
.history-chart .chart-event::after{content:'';position:absolute;top:100%;left:50%;translate:-50% 0;border:6px solid transparent;border-top-color:white}
.dashboard .demo-notice{margin:14px 16px 0;font-size:max(var(--pc-min-font),12px);line-height:1.6;color:#68718b}
@media(hover:hover) and (pointer:fine){
 .dashboard .sensor:hover{background:none;box-shadow:0 0 0 3px #ffffff35}
 .sensor-detail .demo-actions button:hover{background:#ffffff20;color:#fff}
 .sensor-detail .demo-actions button+button:hover{background:#ffffff12;color:#fff}
}
/* The supplied design has a desktop canvas; narrow screens keep native, legible controls. */
@media(max-width:1200px){
 .demo-section.wide{width:94%}
 .console-stage{aspect-ratio:auto;container-type:normal;--console-small:14px;--console-value:20px;background:linear-gradient(110deg,#0b101c,#2f3055);padding:16px;border-radius:28px;box-shadow:0 5px 12px #14192b40}
 .console-art{display:none}
 .dashboard .dashboard-stats{position:static;display:grid;width:100%;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .dashboard-stats .metric{height:125px;border:1px solid #ada34780;border-radius:7px;background:#080918}
 .dashboard-stats .metric-label{left:14px;top:14px;font-size:var(--console-small)}
 .dashboard-stats .metric>b{left:14px;top:40px;font-size:26px}
 .dashboard-stats .metric>small{left:14px;right:12px;top:78px;font-size:var(--console-small);white-space:normal;line-height:1.4}
 .dashboard .dashboard-main{position:static;display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
 .dashboard .bridge-scene{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:105.748/65.859;min-height:0;background:none;overflow:visible}
 .console-scene-art{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
 .dashboard .sensor-detail{position:relative;left:auto;top:auto;width:100%;height:450px;min-height:0;background:linear-gradient(#080918,#1a1c34);border:1px solid #ada34780;border-radius:7px}
 .sensor-detail h3{left:16px;top:18px;font-size:20px}
 .sensor-detail .sensor-en{left:16px;top:50px;font-size:var(--console-small)}
 .sensor-detail .status-ok{left:auto;right:16px;top:20px;padding:3px 8px;border-radius:15px;background:#203a2b;font-size:var(--console-small)}
 .sensor-detail .module-metrics{left:16px;top:85px;width:calc(100% - 32px);height:150px;gap:8px;grid-template-rows:repeat(2,1fr)}
 .sensor-detail .metric{border:1px solid #ada347;border-radius:7px;background:#24253c}
 .sensor-detail .metric-label{left:10px;top:12px;font-size:var(--console-small)}
 .sensor-detail .metric b{left:10px;top:38px;font-size:var(--console-value)}
 .sensor-detail .log-line{left:16px;top:247px;width:calc(100% - 32px);height:auto;min-height:52px;padding:8px;align-items:flex-start;border-left:1px solid #ada347;background:#101223;font-size:var(--console-small)}
 .log-message{line-height:1.5}
 .log-line time{line-height:1.5}
 .sensor-detail .demo-actions{left:16px;top:auto;bottom:16px;width:calc(100% - 32px);height:42px;gap:5px}
 .sensor-detail .demo-actions button{font-size:14px;background:#ada347;border-radius:3px}
 .sensor-detail .demo-actions button+button{border:1px solid #ada347;background:none}
 .dashboard .history-chart{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:183.956/15.568;margin-top:18px;min-height:110px;background:#080b19;border-radius:7px}
 .history-chart .timeline{font-size:var(--console-small)}
 .history-chart .timeline span:nth-child(even){display:none}
 .history-chart .chart-event{font-size:var(--console-small);top:32%}
}
@media(max-width:800px){
 .console-stage{padding:12px;border-radius:20px;--console-small:12px;--console-value:20px}
 .scene-caption{font-size:10px}
 /* Preserve the source gaps when minimum readable type outgrows a small scene. */
 .scene-caption:nth-child(2){x:29.96%;text-anchor:end}
 .scene-caption:last-child{x:96%;text-anchor:end}
 .sensor-detail h3{font-size:18px}
 .sensor-detail .sensor-en{font-size:12px}
 .sensor-detail .metric-label,.sensor-detail .log-line,.log-message,.log-line time{font-size:12px}
 .history-chart .timeline,.history-chart .chart-event{font-size:10px}
 .log-line{gap:.5em}
}

/* Anchor the final tick inside the chart when the complete CJK face is wider. */
@media (max-width: 800px) { .history-chart .timeline span:last-child { left: auto; right: 0; } }