/* Immersive console skin. Geometry and hit targets stay in theme.css/styles.css. */
:root { color-scheme: dark; color: #d5f3ff; background: #061526; }
body { background: radial-gradient(ellipse at 78% 5%, #0d4160 0, transparent 46%), radial-gradient(ellipse at 0% 80%, #0a2d48 0, transparent 50%), #061526; }
body::before { opacity: .8; background-image: linear-gradient(#2d9ec417 1px, transparent 1px), linear-gradient(90deg, #2d9ec417 1px, transparent 1px), radial-gradient(circle, #62d8ee45 1px, transparent 1.5px); background-size: 48px 48px, 48px 48px, 144px 144px; mask-image: linear-gradient(#000, #0006); }
.intro-top { border-bottom-color: #2c7a985e; }
.intro-top::after { width: 160px; background: linear-gradient(90deg, #26c8f1, #85ffff, transparent); box-shadow: 0 0 14px #26c8f177; }
.eyebrow { color: #6ce6ff; text-shadow: 0 0 18px #27c6ef55; }
.eyebrow::before { border-color: #4bdaf1; box-shadow: 3px 3px 0 #38e1f327, 0 0 20px #31bfd34d; }
.eyebrow span { color: #82b2ca; border-left-color: #3982a1; }
.system-indicator { color: #88c7d9; }
.system-indicator i { background: #4ef9db; }
.intro h1 { color: #edfcff; letter-spacing: .06em; text-shadow: 0 0 32px #35c2e83d; }
.intro > p { color: #93b9ce; }
.process-line span { color: #9ac6d9; }
.process-line span::before { color: #85ebff; border-color: #3da0bc; background: #0a2b42; box-shadow: inset 0 0 12px #42d6ef1a; }
.process-line span:last-child::before { color: #031b2d; background: #50d7ed; border-color: #7eefff; box-shadow: 0 0 18px #42d5ef55; }
.process-line span:not(:last-child)::after { background: linear-gradient(90deg, #2183ad, #53e6f2); box-shadow: 0 0 8px #36d8ee88; }

.diagram-section { border: 1px solid #2981a0; border-radius: 16px 4px; background: #071c30; box-shadow: 0 22px 60px #0005, 0 0 0 4px #12364b66, 0 0 45px #25c9e318, inset 0 0 35px #28bce112; }
.diagram-section::before { inset: 8px; border-radius: 9px 1px; opacity: 1; filter: drop-shadow(0 0 4px #44d7f5); }
.section-heading { border-bottom: 1px solid #4ccce5; background: linear-gradient(90deg, #0a2b44f5, #0d3d58ed 65%, #09283ff5); box-shadow: 0 4px 20px #1cb9df18; }
.section-heading h2 { color: #dffaff; }
.section-heading p { color: #8fbdd0; }
.scene-icon { color: #96f7ff; border-color: #46bcd2; background: #11608233; box-shadow: inset 0 0 18px #4bdcf52b, 0 0 18px #23c7e02b; text-shadow: 0 0 10px #37dfff; }
.stage-tag { color: #67d6ea; background: #1bbbd41a; border-color: #2e8aab; }
.mode-bar { border-color: #327996; background: #03182e; }
.mode-button { color: #88b5ce; }
.mode-button.active { color: #04273c; background: linear-gradient(120deg, #a3f7fc, #2cc5ed); box-shadow: 0 0 22px #45d6ee55, inset 0 1px #fff9; }
.mode-button:hover:not(.active) { background: #1582a63d; color: #ccf5ff; }
.mode-button:focus-visible, .practice-chip:focus-visible, .reset-button:focus-visible, .drop-zone:focus-visible, .node:focus-visible { outline-color: #a0faff; }

/* Feather only the outer edge; the source asset and central colors stay intact. */
.diagram-viewport { background: radial-gradient(ellipse at 50% 45%, #0b354b, #061a2d 78%); scrollbar-color: #287592 #071b2e; }
.diagram-viewport::before { background: radial-gradient(ellipse, #1a97b52e, transparent 65%); opacity: 1; filter: none; }
.diagram-viewport::after { z-index: -1; background-image: linear-gradient(#46d4ee12 1px, transparent 1px), linear-gradient(90deg, #46d4ee12 1px, transparent 1px); background-size: 40px 40px; mask-image: none; opacity: .7; }
.base-image {
  --edge-fade: linear-gradient(90deg, transparent, #0008 1.5%, #000 4%, #000 96%, #0008 98.5%, transparent), linear-gradient(180deg, transparent, #000 1.5%, #000 96%, #0008 98.5%, transparent);
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.diagram { outline: none; }
.diagram::before, .diagram::after { content: none; display: none; animation: none; }

.node-green { --accent: #73f3c7; }
.node-orange { --accent: #ffce82; }
.node-blue, .node-deep-blue { --accent: #7bdbff; }
.node-violet { --accent: #d4adff; }
.node-yellow { --accent: #fff0a0; }
.node-red { --accent: #ffa6b4; }
.node[class] { color: var(--accent); border-color: var(--accent); border-radius: 6px 1px; background: #06283ee8; box-shadow: 0 0 10px #44d6e91a, inset 0 0 12px #62d7ed12; text-shadow: 0 0 10px #52cce333; }
.node[class]:hover, .node[class]:focus-visible { background: #12506bf2; box-shadow: 0 0 0 3px #52cce32b, 0 0 22px #44d6e94d; }
.leader.green, .dot.green { stroke: #59e9b5; }
.leader.orange, .dot.orange { stroke: #ffbd61; }
.leader.blue, .dot.blue { stroke: #60cfff; }
.leader.violet, .dot.violet { stroke: #c58bff; }
.leader.yellow, .dot.yellow { stroke: #ffe877; }
.leader.red, .dot.red { stroke: #ff829b; }
.leader { opacity: 1; filter: drop-shadow(0 0 3px #53dfff66); }
.dot { fill: #dcffff; filter: drop-shadow(0 0 4px #89f3ff); }
.flow.orange, .flow-base.orange { color: #ffb650; }
.flow.violet, .flow-base.violet { color: #bc7aff; }
.flow.blue, .flow-base.blue { color: #48d7ff; }
.flow.red, .flow-base.red { color: #ff6d8c; }
.flow { stroke-width: 5; filter: drop-shadow(0 0 5px currentColor); }
.flow-base { opacity: .28; stroke-width: 12; }
.mode-practice .leader, .mode-practice .flow, .mode-practice .flow-base, .mode-practice .dot { color: #36d7ff; stroke: #36d7ff; }
.drop-zone { color: #93f2ff; border-color: #36cbee; background: #06334ee8; box-shadow: 0 0 0 4px #36cbee18, 0 0 18px #36cbee33; }
.drop-zone.hovered, .drop-zone:focus-visible { color: white; background: #106485; }
.drop-zone.matched { color: #04283c; border-color: #7feeff; background: #57d4eb; box-shadow: 0 0 18px #36cbee66; }
.drop-zone.wrong { color: #ffe6ee; border-color: #ff6d99; background: #6c2645; box-shadow: 0 0 0 7px #ff6d9933; }

.practice-panel { color: #d0effa; border-left-color: #236783; background: linear-gradient(#37c9e50b 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, #37c9e50b 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(145deg, #0c3049, #061d32); }
.practice-kicker { color: #56c7e0; }
.practice-heading-row h3 { color: #e2f8ff; }
.progress { color: #7eefff; border-color: #2e849f; background: #052238; box-shadow: inset 0 0 10px #34cce51a; }
.progress-track { background: #17485f; }
.practice-instruction { color: #91b9cc; }
.practice-chip { color: #bdeafb; border-color: #2e6d88; border-left-color: #38bad6; background: #12374ed9; }
.practice-chip::before { color: #4c9db8; }
.practice-chip:hover, .practice-chip.selected { color: #c7fcff; border-color: #4ad0e7; background: #12536a; box-shadow: 0 0 12px #39d3ee26; }
.practice-chip.matched { color: #7e9caa; border-color: #315062; border-left-color: #467282; background: #10293b; }
.practice-chip.wrong { color: #ffe1e8; border-color: #ff7c9d; background: #692a46; }
.practice-status { color: #8cbed3; }
.practice-status.error { color: #ffa5bd; }
.practice-status.success { color: #79f0ca; }
.reset-button { color: #99d5e6; border-color: #306b84; background: #0b2c42; }
.reset-button:hover { color: #d6fbff; background: #17465e; }
.mobile-hint { color: #89bacf; border-top-color: #27627d; background: #0a2439; }
.diagram-note { color: #78a4ba; }

dialog { color: #c2dfed; border-color: #3689a7; background: #0a243b; box-shadow: 0 25px 90px #0009, 0 0 30px #27bfd32b; }
dialog::backdrop { background: #020c1bc9; }
.dialog-content { border-top-color: #4bd8ef; }
dialog h2 { color: #e6fbff; }
.dialog-kicker { color: #66cfe3; }
.role-heading { color: #7eddf0; border-left-color: #33b9da; }
.close-button { color: #b5e7f4; background: #17445d; }

@media (max-width: 1000px) {
  .practice-panel { border-bottom-color: #287390; box-shadow: 0 7px 14px #0004; }
  .practice-labels { scrollbar-color: #36869e #092a40; }
}
@media (max-width: 700px) {
  .diagram-section { border-color: #2981a0; border-radius: 14px 3px; }
  .section-heading { border-radius: 14px 3px 0 0; }
  .diagram-section::before { opacity: .8; }
  .mobile-hint { border-radius: 0 0 14px 3px; }
}

/* One title, one mode switch, one generously spaced visual workspace. */
.page { width: min(100%, 1800px); padding: 28px clamp(16px, 3vw, 48px); }
.intro { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 8px; margin: 0 0 24px; }
.title-group { display: flex; align-items: center; gap: 18px; }
.title-symbol { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid #44c5df70; border-radius: 13px 3px; background: linear-gradient(135deg, #1c65834d, #0a2d4555); box-shadow: inset 0 0 18px #34cde51a, 0 0 24px #2ecce51a; }
.title-symbol svg { width: 28px; height: 28px; fill: #89f1ff1a; stroke: #91eeff; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 0 5px #2ecce577); }
.intro h1 { margin: 0; font-size: clamp(25px, 2.2vw, 36px); font-weight: 700; letter-spacing: .12em; line-height: 1.3; }
.mode-bar { margin: 0; padding: 5px; border-color: #3979918c; border-radius: 12px; background: #0a2338cc; box-shadow: inset 0 1px #90d8ed12, 0 8px 20px #0002; }
.mode-button { min-width: 130px; padding: 12px 20px; border-radius: 8px; font-size: 15px; letter-spacing: .04em; }
.mode-button.active { background: linear-gradient(120deg, #b2f5fb, #53cee9); box-shadow: 0 2px 15px #3ed4ed33, inset 0 1px #fff9; }
.diagram-section { border-color: #4c91aa99; border-radius: 22px 7px; background: #123247; box-shadow: 0 24px 70px #0004, 0 0 0 5px #418ba012, 0 0 48px #38b6d218; }
.diagram-section::before { inset: 12px; border-radius: 12px 3px; opacity: .7; }
.diagram-section::after { content: ""; position: absolute; top: 0; left: 4%; right: 4%; height: 2px; z-index: 8; pointer-events: none; background: linear-gradient(90deg, transparent, #a3faff, transparent) 0 0 / 220px 100% no-repeat; filter: drop-shadow(0 0 5px #52dfff); animation: rim-flow 9s ease-in-out infinite alternate; }
.diagram-viewport { padding: 24px; background: radial-gradient(ellipse at 50% 40%, #80b8cc 0, #407a92 42%, #1b455d 72%, #0d2b42 100%); }
.diagram-viewport::before { background: radial-gradient(ellipse at 50% 25%, #b4efff26, transparent 65%); }
.diagram-viewport::after { opacity: .45; }
.diagram { border-radius: 12px; }
.base-image { --edge-fade: linear-gradient(90deg, transparent, #0006 1%, #000d 2.5%, #000 4%, #000 96%, #000d 97.5%, #0006 99%, transparent), linear-gradient(180deg, transparent, #000a .7%, #000 1.5%, #000 96%, #000c 97.5%, #0005 99%, transparent); }
.node[class] { border-radius: 8px 2px; padding: .5em .85em; background: #09334bea; box-shadow: 0 4px 12px #12354d36, inset 0 1px #b9f5ff26; text-shadow: none; }
.activity-layout.practice-active { grid-template-columns: minmax(0, 1fr) 300px; }
.practice-panel { padding: 24px; gap: 14px; border-left-color: #74b8cc55; }
.practice-heading-row { align-items: center; }
.practice-heading-row h3 { margin: 0; font-size: 19px; font-weight: 600; }
.practice-instruction { font-size: 13px; }
.practice-chip { padding-block: 12px; font-size: 14px; }
.practice-status { font-size: 13px; }
.reset-button { font-size: 13px; }
.mobile-hint { background: #0d2b42; text-align: center; }

@keyframes rim-flow { to { background-position: 100% 0; } }
@media (min-width: 1200px) and (min-height: 760px) {
  .page { height: 100dvh; }
  .intro { flex: none; }
  .diagram-viewport { container-type: size; }
  /* Fit both dimensions so the artwork and SVG retain their shared ratio. */
  .diagram { width: min(100cqw, 149.90234375cqh); height: auto; max-width: none; aspect-ratio: 1535 / 1024; }
}
@media (max-width: 1000px) {
  .practice-panel { padding: 16px 20px; gap: 10px; }
  .practice-chip { padding-block: 10px; }
  .practice-heading-row h3 { font-size: 17px; }
  .practice-status { font-size: 12px; }
}
@media (max-width: 700px) {
  .page { padding: 20px 10px 14px; }
  .intro { flex-direction: column; gap: 20px; padding: 0 8px; margin-bottom: 20px; }
  .title-group { gap: 13px; }
  .title-symbol { width: 40px; height: 40px; }
  .title-symbol svg { width: 24px; height: 24px; }
  .intro h1 { font-size: 25px; }
  .mode-bar { width: 100%; max-width: 360px; }
  .mode-button { min-width: 0; padding: 10px 14px; font-size: 14px; }
  .diagram-section { border-radius: 17px 5px; }
  .diagram-section::before { inset: 7px; }
  .diagram-viewport { padding: 16px 8px; }
  .practice-panel { padding: 15px; border-radius: 17px 5px 0 0; }
  .practice-instruction { font-size: 12px; }
  .mobile-hint { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .diagram-section::after { animation: none; } }

/* Readability: larger type, crisp contrast, and a roomier information dialog. */
:root { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif; }
.intro h1 { font-size: clamp(28px, 2.3vw, 38px); letter-spacing: .07em; text-shadow: none; }
.mode-button { font-size: 16px; line-height: 1.4; }
.node[class] { font-size: clamp(16px, 1.25vw, 20px); font-weight: 700; line-height: 1.25; text-shadow: none; }
.drop-zone.matched { font-size: 17px; }
.practice-heading-row h3 { font-size: 21px; font-weight: 700; }
.practice-instruction { color: #c5e5f1; font-size: 15px; line-height: 1.6; }
.practice-chip { color: #e0f7ff; font-size: 16px; line-height: 1.4; }
.practice-status { color: #c0e2ef; font-size: 14px; line-height: 1.55; }
.progress, .reset-button { font-size: 15px; }
.mobile-hint { font-size: 13px; }
dialog { width: min(760px, calc(100vw - 40px)); max-height: min(820px, calc(100dvh - 40px)); border-width: 1px; color: #eefaff; background: linear-gradient(150deg, #0e314a, #071d33 72%); box-shadow: 0 30px 100px #000b, 0 0 0 5px #55d8ee18, 0 0 42px #27bfd338; }
.dialog-content { padding: clamp(30px, 4.5vw, 56px); border-top-width: 5px; }
dialog h2 { max-width: calc(100% - 38px); margin: 0 0 24px; color: #f4fdff; font-size: clamp(28px, 3vw, 37px); line-height: 1.32; font-weight: 700; letter-spacing: .02em; text-shadow: none; }
#info-description, #info-process, #info-takeaway, #info-role { color: #e2f3fb; font-size: 18px; line-height: 1.85; font-weight: 400; }
.role-heading { margin: 28px 0 9px; padding-left: 13px; border-left-width: 3px; color: #80e8f7; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: .03em; }
.close-button { top: 22px; right: 22px; width: 48px; height: 48px; border: 1px solid #69bfd633; color: #e7faff; background: #235370; font-size: 32px; }
.close-button:hover { background: #2e7697; }
@media (max-width: 1000px) {
  .practice-heading-row h3 { font-size: 19px; }
  .practice-instruction { font-size: 14px; }
  .practice-status { font-size: 13px; }
}
@media (max-width: 700px) {
  .intro h1 { font-size: 27px; }
  .mode-button { font-size: 15px; }
  .practice-chip { font-size: 15px; }
  .mobile-hint { font-size: 13px; }
  dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .dialog-content { padding: 30px 24px 34px; }
  dialog h2 { max-width: calc(100% - 32px); font-size: 28px; }
  #info-description, #info-process, #info-takeaway, #info-role { font-size: 17px; line-height: 1.75; }
  .role-heading { font-size: 15px; margin-top: 24px; }
  .close-button { top: 16px; right: 16px; width: 44px; height: 44px; }
}

/* A moving mode indicator reinforces the content transition. */
.mode-bar { position: relative; }
.mode-bar::after { content: ""; position: absolute; left: 5px; bottom: 2px; width: calc(50% - 5px); height: 2px; border-radius: 2px; pointer-events: none; background: #a0f7ff; box-shadow: 0 0 9px #68eafa; transform: translateX(0); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
body.practice-mode-active .mode-bar::after { transform: translateX(100%); }
.mode-button { transition: color .25s ease, box-shadow .35s ease, transform .35s ease; }
.mode-button.active { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .mode-bar::after, .mode-button { transition: none; }
}