:root { color-scheme: light; color: #183e58; background: #eef7fc; }
body { min-height: 100vh; background: radial-gradient(ellipse at 85% 0%, #cfeefa 0, transparent 45%), linear-gradient(145deg, #f6fbfe, #e8f4fa); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(#4d91b908 1px, transparent 1px), linear-gradient(90deg, #4d91b908 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(#000, transparent 80%); }
.page { position: relative; width: min(100%, 1800px); padding: 22px clamp(16px, 3vw, 52px) 18px; }

/* Compact header keeps the illustration at the center of the experience. */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 36px; margin: 0 0 25px; }
.intro-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 17px; margin-bottom: 24px; border-bottom: 1px solid #bbd4e26b; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: #20648b; font-size: 12px; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 22px; height: 22px; flex: none; border: 5px solid #268db6; border-radius: 7px 2px 7px 2px; transform: rotate(-8deg); box-shadow: 3px 3px 0 #a7dcea; }
.eyebrow span { padding-left: 12px; border-left: 1px solid #bfd6e3; color: #6c8a9e; font-size: 11px; font-weight: 500; letter-spacing: .05em; }
.system-indicator { display: inline-flex; align-items: center; gap: 8px; color: #6b8a9e; font-size: 11px; letter-spacing: .08em; }
.system-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #21aa9b; box-shadow: 0 0 0 4px #21aa9b12; }
.intro h1 { grid-column: 1; margin: 0; color: #173f5a; font-size: clamp(27px, 2.25vw, 39px); font-weight: 800; letter-spacing: .025em; }
.intro > p { grid-column: 1; margin: 10px 0 0; max-width: 52ch; color: #668297; font-size: 13px; line-height: 1.7; }
.process-line { grid-column: 2; grid-row: 2 / 4; display: flex; align-items: center; align-self: center; counter-reset: step; }
.process-line span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 76px; padding-inline: 7px; color: #648194; font-size: 11px; white-space: nowrap; counter-increment: step; }
.process-line span::before { content: "0" counter(step); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c0dce9; border-radius: 50%; color: #3984a7; background: #f7fcff; font-size: 10px; font-weight: 700; }
.process-line span:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 19px); width: calc(100% - 38px); height: 1px; background: #b8d8e7; }
.process-line span:last-child::before { color: white; border-color: #369cbd; background: #369cbd; box-shadow: 0 3px 9px #369cbd20; }

.diagram-section { position: relative; border: 1px solid #fff; border-radius: 24px; background: #dff2fa; box-shadow: 0 18px 50px #377a9e14, 0 2px 5px #377a9e08; }
.section-heading { position: relative; z-index: 4; padding: 17px 24px; gap: 18px; border-bottom: 1px solid #b6d7e54d; background: #f5fbfee6; }
.scene-heading { display: flex; align-items: center; gap: 13px; }
.scene-icon { display: grid; place-items: center; flex: none; width: 40px; height: 42px; border: 1px solid #c8e5f2; border-radius: 12px; color: #268db6; background: linear-gradient(135deg, #fff, #e2f4fc); font: 600 32px/1 Georgia, serif; }
.section-heading h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 5px; color: #234f69; font-size: 17px; letter-spacing: .025em; }
.section-heading p { color: #7491a3; font-size: 11px; line-height: 1.5; }
.stage-tag { padding: 3px 7px; border: 1px solid #d0e3ec; border-radius: 5px; color: #7995a5; background: transparent; font-size: 10px; font-weight: 500; }
.mode-bar { flex: none; display: flex; width: max-content; margin: 0; padding: 4px; border: 1px solid #d7e7ef; border-radius: 11px; background: #e9f2f7; }
.mode-button { min-width: 105px; border-radius: 8px; padding: 9px 15px; color: #7590a2; font-size: 12px; }
.mode-button.active { color: #fff; background: linear-gradient(120deg, #288eb5, #2675a3); box-shadow: 0 3px 8px #257fa329; }
.mode-button:hover:not(.active) { background: #f7fcff; color: #2b7398; }
.mode-button:focus-visible, .practice-chip:focus-visible, .reset-button:focus-visible, .drop-zone:focus-visible { outline-color: #248eb8; }

/* Extend the illustration's sky into the gutters and soften its side edges.
   Image, SVG and interactive labels keep their shared coordinate system. */
.diagram-viewport { position: relative; isolation: isolate; background: #d7f1fc; scrollbar-color: #83bfd7 #e5f4fa; }
.diagram-viewport::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("assets/power-system-clean.webp") center / 100% 100% no-repeat; filter: blur(30px); opacity: .48; }
.diagram-viewport:focus-visible { outline: 2px solid #288fbb; outline-offset: -3px; }
.diagram { isolation: isolate; margin-inline: auto; background: transparent; }
.base-image { mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.diagram::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 12px 18px -16px #e4f6ff; }
.node { border-width: 1px; border-radius: 8px; padding: .48em .8em; font-size: clamp(13px, 1.05vw, 17px); font-weight: 700; box-shadow: 0 3px 8px #234f6824; }
.node:hover, .node:focus-visible { box-shadow: 0 5px 16px #234f6838; }
.node-green { color: #167454; background: #f4fffaed; border-color: #4d9c7c; }
.node-orange { color: #a3631b; background: #fffaf0f2; border-color: #cf9b58; }
.node-blue, .node-deep-blue { color: #256f9f; background: #f1fafff2; border-color: #6da1c2; }
.node-violet { color: #815ca6; background: #fcf7fff2; border-color: #ad8bc8; }
.node-yellow { color: #8b701d; background: #fffdebf2; border-color: #cbb85f; }
.node-red { color: #a45860; background: #fff5f6f2; border-color: #cf969e; }
.leader { stroke-width: 2.5; opacity: .9; }
.flow { stroke-width: 4; }
.flow-base { stroke-width: 9; opacity: .15; }
.drop-zone { border-radius: 10px; box-shadow: 0 0 0 4px #0cade712, 0 4px 12px #064f7a12; }

.practice-panel { position: relative; gap: 12px; padding: 22px; border-left: 1px solid #c8e2ef; color: #305c75; background: linear-gradient(145deg, #f6fcff, #e7f3fa); }
.practice-kicker { margin-bottom: 6px; color: #72a0b8; font-size: 10px; }
.practice-heading-row h3 { color: #294e68; font-size: 17px; }
.progress { padding: 5px 8px; border: 1px solid #bfdde9; color: #2d89af; background: #fff; }
.progress-track { height: 4px; overflow: hidden; border-radius: 10px; background: #d6e9f2; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2686b1, #58c5cd); transition: width .3s ease; }
.practice-instruction { color: #7a95a5; font-size: 12px; }
.practice-labels { gap: 8px; }
.practice-chip { position: relative; padding: 10px 13px 10px 28px; border: 1px solid #cde2ee; border-radius: 9px; color: #3e6c86; background: #ffffffcf; font-size: 13px; box-shadow: 0 2px 4px #28638305; }
.practice-chip::before { content: "⠿"; position: absolute; left: 10px; color: #9ab7c8; }
.practice-chip:hover, .practice-chip.selected { color: #216b92; border-color: #67adc9; background: #e4f5fd; box-shadow: 0 0 0 2px #348fb414; }
.practice-chip.matched { color: #91a7b4; border-color: #dbe8ee; background: #edf4f7; }
.practice-chip.wrong { color: #b94152; border-color: #df8e9b; background: #fff0f2; }
.practice-status { color: #64859a; font-size: 12px; }
.practice-status.error { color: #bd5361; }
.practice-status.success { color: #21897c; }
.practice-panel.completed { box-shadow: inset 0 0 0 2px #58b9a577; }
.reset-button { border-color: #c5dfe9; color: #55869e; background: #ffffff80; font-size: 12px; }
.reset-button:hover { background: #fff; }
.mobile-hint { border-top: 1px solid #cce2ec; color: #7395a7; background: #f1f9fd; }
.diagram-note { margin: 13px 4px 0; color: #8aa2b1; font-size: 11px; }

dialog { border: 1px solid #d5e8f0; border-radius: 22px; background: #fbfdff; box-shadow: 0 25px 90px #1b577346; }
dialog::backdrop { background: #244c6770; backdrop-filter: blur(6px); }
.dialog-content { border-top: 4px solid #57b4cf; }
.dialog-kicker { color: #57a4be; }
.close-button { color: #6b90a7; background: #eaf4fa; }
.role-heading { padding-left: 10px; border-left: 2px solid #66b6d0; color: #4387a4; }

/* Cyan instrumentation details keep the bright illustration in a technical UI. */
body { background: radial-gradient(ellipse at 86% 0%, #b9e9fc 0, transparent 42%), radial-gradient(ellipse at 0% 70%, #d1edf9 0, transparent 50%), linear-gradient(145deg, #eff9ff, #deeff8); }
body::before { background-image: linear-gradient(#2688b410 1px, transparent 1px), linear-gradient(90deg, #2688b410 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(#000, #0005); }
.intro-top { position: relative; border-bottom-color: #80bdd459; }
.intro-top::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 92px; height: 2px; background: linear-gradient(90deg, #198cb9, #38d1e1); box-shadow: 0 0 10px #29c1df55; }
.intro h1 { color: #164a68; text-shadow: 0 2px 0 #ffffff80; }
.eyebrow { color: #16638c; letter-spacing: .2em; }
.eyebrow::before { border-color: #1589b6; box-shadow: 3px 3px 0 #5fcde24d, 0 0 14px #31bfd322; }
.system-indicator i { background: #21b4c4; box-shadow: 0 0 0 4px #21b4c418, 0 0 10px #21b4c480; animation: status-glow 3s ease-in-out infinite; }
.process-line span::before { border-color: #76b9d1; border-radius: 8px 3px; font-family: Consolas, monospace; box-shadow: inset 0 0 8px #39b8db0d; animation: circuit-step 5s ease-in-out infinite; }
.process-line span:nth-child(2)::before { animation-delay: 1s; }
.process-line span:nth-child(3)::before { animation-delay: 2s; }
.process-line span:nth-child(4)::before { animation-delay: 3s; }
.process-line span:nth-child(5)::before { animation-delay: 4s; }
.process-line span:not(:last-child)::after { background: linear-gradient(90deg, #44afce, #8dd9e7); box-shadow: 0 0 4px #31bddb44; }
.diagram-section { border-color: #78bbd3; box-shadow: 0 16px 44px #2364851a, 0 0 0 4px #ffffff75, 0 0 30px #32b4d00d; }
.diagram-section::before { content: ""; position: absolute; inset: 9px; z-index: 8; border-radius: 15px; pointer-events: none; background: linear-gradient(#5fe1ef, #5fe1ef) left top / 25px 2px no-repeat, linear-gradient(#5fe1ef, #5fe1ef) left top / 2px 25px no-repeat, linear-gradient(#5fe1ef, #5fe1ef) right top / 25px 2px no-repeat, linear-gradient(#5fe1ef, #5fe1ef) right top / 2px 25px no-repeat, linear-gradient(#58a9c6, #58a9c6) left bottom / 25px 2px no-repeat, linear-gradient(#58a9c6, #58a9c6) left bottom / 2px 25px no-repeat, linear-gradient(#58a9c6, #58a9c6) right bottom / 25px 2px no-repeat, linear-gradient(#58a9c6, #58a9c6) right bottom / 2px 25px no-repeat; opacity: .65; }
.section-heading { border-bottom: 2px solid #6bd1e6; background: radial-gradient(ellipse at 70% 0%, #328fb0, transparent 65%), linear-gradient(115deg, #123e5b, #205d7a); box-shadow: 0 3px 14px #1a749a20; }
.section-heading h2 { color: #effbff; letter-spacing: .06em; }
.section-heading p { color: #b5d8e7; }
.scene-icon { color: #8becf8; border-color: #65c3df66; border-radius: 10px 3px; background: #2788a72b; box-shadow: inset 0 0 15px #48cbe51c, 0 0 12px #23c7e018; }
.stage-tag { border-color: #73c4dc66; color: #a1dfef; background: #74d5ed0d; font-family: Consolas, "Microsoft YaHei", monospace; }
.mode-bar { border-color: #66afca66; background: #0b304b66; border-radius: 8px; }
.mode-button { color: #bad6e5; border-radius: 5px; }
.mode-button.active { color: #08445f; background: linear-gradient(120deg, #9dedf6, #4dc6e6); box-shadow: 0 0 14px #45d6ee33, inset 0 1px #e6ffff99; }
.mode-button:hover:not(.active) { background: #7ad9ee1a; color: #e6faff; }
.diagram-viewport::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background-image: linear-gradient(#167ba60c 1px, transparent 1px), linear-gradient(90deg, #167ba60c 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 25%, transparent 75%, #000); }
.diagram::before { content: ""; position: absolute; z-index: 1; top: -16%; left: 0; right: 0; height: 16%; pointer-events: none; border-bottom: 1px solid #4bc8e52e; background: linear-gradient(transparent, #79dfef12); animation: field-scan 12s linear infinite; }
.node { border-radius: 7px 2px; backdrop-filter: blur(5px); box-shadow: 0 3px 10px #20587924, inset 0 1px #ffffffbf; }
.node:hover, .node:focus-visible { box-shadow: 0 0 0 3px #52cce32b, 0 4px 15px #247da430; }
.flow { filter: drop-shadow(0 0 3px currentColor); }
.practice-panel { border-left-color: #91c5d9; background: linear-gradient(#37a4ca08 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, #37a4ca08 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(145deg, #f3fcff, #dcedf7); }
.practice-kicker { color: #468ca9; letter-spacing: .18em; }
.progress { border-color: #87bfd4; border-radius: 5px; font-family: Consolas, monospace; }
.progress-track { height: 5px; box-shadow: inset 0 1px 3px #20688914; }
.progress-track span { background: linear-gradient(90deg, #167eaf, #37d3df); box-shadow: 0 0 8px #2bc7df66; }
.practice-chip { border-radius: 7px 2px; border-left: 3px solid #77b9d1; }
.practice-chip.selected { border-left-color: #16a9ce; box-shadow: 0 0 0 2px #38bfe22b, 0 0 14px #3bb2d21a; }
.practice-chip.wrong { border-left-color: #df8e9b; }
.practice-chip.matched { border-left-color: #aacbd7; }
.dialog-content { border-top-color: #33bedb; }

@keyframes status-glow { 50% { box-shadow: 0 0 0 6px #21b4c40b, 0 0 13px #21b4c466; } }
@keyframes circuit-step { 0%, 18%, 100% { box-shadow: inset 0 0 8px #39b8db0d; } 8% { box-shadow: 0 0 0 3px #44bfda26, 0 0 13px #33bdd54d; border-color: #2fb8d2; } }
@keyframes field-scan { to { transform: translateY(750%); } }

/* Desktop composition fits the 1980 × 1080 reference viewport. */
@media (min-width: 1200px) and (min-height: 760px) {
  .page { height: 100dvh; display: flex; flex-direction: column; }
  .intro { flex: none; }
  .diagram-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .section-heading { flex: none; }
  .activity-layout { flex: 1; min-height: 0; }
  .diagram-viewport { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .diagram { flex: none; width: auto; min-width: 0; max-width: 100%; height: min(100%, calc(66.71vw - 294px), 900px); aspect-ratio: 1535 / 1024; }
  .practice-panel { min-height: 0; overflow-y: auto; }
  .diagram-note { flex: none; }
}
@media (max-width: 1199px) {
  .intro { grid-template-columns: 1fr; }
  .process-line { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 20px; }
  .process-line span { min-width: 80px; }
}
@media (max-width: 1000px) {
  body.practice-mode-active .diagram-section { overflow: visible; }
  .activity-layout.practice-active { display: flex; flex-direction: column; }
  .practice-panel { order: -1; position: sticky; top: 0; z-index: 6; gap: 10px; padding: 15px 20px; border: 0; border-bottom: 1px solid #c5e1ec; box-shadow: 0 7px 12px #356b8612; }
  .practice-labels { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 6px; scrollbar-color: #8fc1d5 #edf7fc; }
  .practice-chip { width: max-content; min-width: max-content; white-space: nowrap; }
  .practice-status { margin: 0; min-height: 0; padding-right: 85px; }
  .reset-button { position: absolute; right: 20px; bottom: 12px; padding: 5px 8px; }
}
@media (max-width: 700px) {
  .page { padding: 17px 12px 14px; }
  .intro { padding: 0 5px; margin-bottom: 19px; }
  .intro-top { padding-bottom: 14px; margin-bottom: 21px; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; }
  .eyebrow span { display: none; }
  .system-indicator { font-size: 9px; letter-spacing: 0; }
  .intro h1 { font-size: 27px; }
  .intro > p { font-size: 12px; }
  .process-line { margin-top: 18px; justify-content: space-between; }
  .process-line span { min-width: 0; flex: 1; padding-inline: 2px; font-size: 10px; }
  .process-line span::before { width: 25px; height: 25px; }
  .process-line span:not(:last-child)::after { top: 12px; }
  .diagram-section { border: 1px solid #78bbd3; border-radius: 18px; }
  .diagram-section::before { inset: 6px; opacity: .4; }
  .section-heading { flex-wrap: wrap; align-items: center; padding: 15px; gap: 14px; border-radius: 18px 18px 0 0; }
  .scene-icon { width: 34px; height: 37px; font-size: 27px; }
  .scene-heading { gap: 10px; }
  .section-heading h2 { font-size: 15px; gap: 7px; }
  .section-heading p { max-width: none; font-size: 10px; }
  .stage-tag { font-size: 9px; }
  .mode-bar { width: 100%; margin: 0; }
  .mode-button { flex: 1; padding: 8px; font-size: 12px; }
  .practice-panel { padding: 13px; }
  .practice-kicker { display: none; }
  .practice-heading-row h3 { font-size: 15px; }
  .practice-instruction, .practice-status { font-size: 11px; }
  .reset-button { right: 13px; }
  .diagram-note { padding: 0 4px; font-size: 10px; line-height: 1.7; }
  .mobile-hint { font-size: 11px; border-radius: 0 0 18px 18px; }
  dialog { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-track span { transition: none; }
  .system-indicator i, .process-line span::before, .diagram::before { animation: none; }
  .diagram::before { display: none; }
}