:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #173a5c; background: #eaf7ff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
button { -webkit-tap-highlight-color: transparent; }
.page { width: min(100%, 1640px); margin: 0 auto; padding: 32px clamp(14px, 3vw, 40px) 36px; }
.intro { margin: 0 0 24px; }
.eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .18em; color: #1784bd; }
.intro h1 { margin: 0; color: #123d62; font-size: clamp(27px, 3.3vw, 45px); line-height: 1.15; }
.intro > p:last-child { margin: 11px 0 0; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.65; color: #42677e; }
.mode-bar { display: inline-flex; gap: 5px; margin-bottom: 17px; padding: 5px; border: 1px solid #b8dfee; border-radius: 14px; background: #d8edf9; }
.mode-button { min-width: 114px; border: 0; border-radius: 10px; padding: 10px 18px; background: transparent; color: #35637c; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.mode-button.active { color: white; background: #096eaa; box-shadow: 0 3px 9px rgba(0, 82, 143, .2); }
.mode-button:focus-visible, .reset-button:focus-visible, .practice-chip:focus-visible, .drop-zone:focus-visible { outline: 3px solid #0d4f83; outline-offset: 3px; }
.diagram-section { overflow: hidden; border: 1px solid rgba(24, 116, 168, .16); border-radius: 22px; background: #fff; box-shadow: 0 16px 50px rgba(21, 92, 141, .12); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 24px; background: #f9fdff; border-bottom: 1px solid #dceef8; }
.section-heading h2 { margin: 0 0 4px; font-size: 20px; }
.section-heading p { margin: 0; font-size: 13px; color: #628095; }
.stage-tag { flex: none; padding: 7px 12px; border-radius: 999px; color: #126996; background: #e2f4ff; font-size: 12px; font-weight: 700; }
.activity-layout { display: block; }
.activity-layout.practice-active { display: grid; grid-template-columns: minmax(0, 1fr) 292px; }
.diagram-viewport { overflow-x: auto; overflow-y: hidden; outline-offset: -4px; scrollbar-color: #98cde8 #eaf7ff; }
.diagram { position: relative; width: max(100%, 980px); max-width: 1535px; aspect-ratio: 1535 / 1024; overflow: hidden; background: #dff4ff; }
.base-image, .flow-layer { display: block; width: 100%; height: 100%; }
.base-image { position: absolute; inset: 0; object-fit: fill; }
.flow-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.node { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); border: 2px solid currentColor; border-radius: 12px; padding: .42em .78em; font-family: inherit; font-size: clamp(14px, 1.45vw, 21px); font-weight: 800; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 12px rgba(23, 63, 90, .2), inset 0 1px rgba(255,255,255,.5); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.node:hover, .node:focus-visible { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 7px 19px rgba(23, 63, 90, .3); }
.node:focus-visible, .close-button:focus-visible { outline: 3px solid #113e66; outline-offset: 3px; }
.node-green { color: #fff; background: #087d49; border-color: #06673e; }
.node-orange { color: #fff; background: #f4780b; border-color: #df6103; }
.node-blue { color: #fff; background: #1768b9; border-color: #0d519b; }
.node-violet { color: #fff; background: #ac24d6; border-color: #9220ba; }
.node-yellow { color: #713500; background: #ffec2d; border-color: #f4ca00; }
.node-red { color: #fff; background: #dd2a35; border-color: #bd1726; }
.node-deep-blue { color: #fff; background: #1266ae; border-color: #0a4b8d; }
.mode-practice .node { display: none; }
.drop-zone { display: none; position: absolute; z-index: 3; left: var(--x); top: var(--y); transform: translate(-50%, -50%); align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 2px dashed #0786c9; border-radius: 14px; padding: 8px 13px; background: rgba(232, 250, 255, .92); color: #08618f; font-family: inherit; font-size: 20px; font-weight: 800; box-shadow: 0 0 0 5px rgba(12, 173, 231, .14), 0 5px 17px rgba(0, 79, 135, .17); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.mode-practice .drop-zone { display: flex; }
.drop-zone.hovered, .drop-zone:focus-visible { background: #a7eaff; transform: translate(-50%, -50%) scale(1.1); }
.drop-zone.matched { border-style: solid; border-color: #087bb9; background: #087bb9; color: white; font-size: 15px; white-space: nowrap; box-shadow: 0 0 0 5px rgba(12, 173, 231, .18), 0 5px 17px rgba(0, 79, 135, .18); cursor: default; animation: success-pop .35s ease-out; }
.drop-zone.wrong { border-color: #e33c4a; background: #ffe8ed; color: #c52034; box-shadow: 0 0 0 8px rgba(227, 60, 74, .2); animation: shake .42s ease-in-out; }
.practice-panel { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 18px; color: #eaf8ff; background: linear-gradient(155deg, #073e70, #082f58 65%, #062847); border-left: 1px solid #246087; }
.practice-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.practice-kicker { margin: 0 0 4px; color: #65d8ff; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.practice-heading-row h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.progress { flex: none; border: 1px solid #419bcb; border-radius: 999px; padding: 4px 9px; color: #b8edff; font-size: 12px; font-weight: 800; }
.practice-instruction { margin: 0; color: #c4deee; font-size: 13px; line-height: 1.55; }
.practice-labels { display: grid; gap: 9px; }
.practice-chip { width: 100%; border: 1px solid #69c8f5; border-radius: 10px; padding: 10px 12px; background: #e4f7ff; color: #124e78; font-family: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: grab; touch-action: none; user-select: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.practice-chip:hover, .practice-chip.selected { background: #8fe4ff; box-shadow: 0 0 0 3px rgba(82, 209, 255, .4); transform: translateX(3px); }
.practice-chip.dragging { opacity: .45; cursor: grabbing; }
.practice-chip.matched { opacity: .55; text-decoration: line-through; cursor: default; }
.practice-chip.wrong { color: #a51125; background: #ffe5ea; box-shadow: 0 0 0 3px rgba(255, 89, 111, .5); animation: chip-shake .42s ease-in-out; }
.practice-status { min-height: 42px; margin: auto 0 0; color: #b8e8fb; font-size: 13px; line-height: 1.5; }
.practice-status.error { color: #ffb5c0; }.practice-status.success { color: #9cf7d3; }
.reset-button { border: 1px solid #5fb9e1; border-radius: 10px; padding: 9px 14px; background: transparent; color: #daf4ff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.reset-button:hover { background: rgba(130, 222, 255, .14); }
.drag-ghost { position: fixed; z-index: 9999; width: max-content; max-width: 230px; pointer-events: none; transform: translate(-50%, -50%); border: 2px solid #0db1ed; border-radius: 10px; padding: 10px 14px; background: #dff7ff; color: #075b8d; font: 800 14px/1.3 "Microsoft YaHei", "PingFang SC", sans-serif; box-shadow: 0 12px 25px rgba(2, 56, 93, .35); }
.leader { fill: none; stroke-width: 3; stroke-dasharray: 8 7; stroke-linecap: round; animation: dash 1.5s linear infinite; filter: drop-shadow(0 0 3px rgba(255,255,255,.95)); }
.leader.green, .dot.green { stroke: #09875b; }.leader.orange, .dot.orange { stroke: #f48b1b; }.leader.blue, .dot.blue { stroke: #1679c8; }.leader.violet, .dot.violet { stroke: #a238df; }.leader.yellow, .dot.yellow { stroke: #e7a400; }.leader.red, .dot.red { stroke: #e63949; }
.dot { stroke-width: 2; fill: white; animation: dot 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.flow-base, .flow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flow-base { stroke-width: 10; opacity: .21; }
.flow { stroke-width: 5; stroke-dasharray: 16 13; animation: dash 1s linear infinite; filter: drop-shadow(0 0 4px currentColor); }
.flow-base.orange, .flow.orange { color: #ff8a00; stroke: currentColor; }.flow-base.violet, .flow.violet { color: #a53bdf; stroke: currentColor; }.flow-base.blue, .flow.blue { color: #16a4ea; stroke: currentColor; }.flow-base.red, .flow.red { color: #ef4451; stroke: currentColor; }
.mode-practice .leader, .mode-practice .flow, .mode-practice .flow-base { color: #07adf2; stroke: #07adf2; }
.mode-practice .flow-base { opacity: .25; }
.mode-practice .dot { stroke: #07adf2; fill: #e9fbff; }
.mode-practice marker path { stroke: #07adf2; }
@keyframes dash { to { stroke-dashoffset: -29; } }
@keyframes dot { 50% { transform: scale(1.4); opacity: .65; } }
@keyframes shake { 20%, 60% { transform: translate(-54%, -50%); } 40%, 80% { transform: translate(-46%, -50%); } }
@keyframes chip-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes success-pop { 50% { transform: translate(-50%, -50%) scale(1.17); } }
.mobile-hint { display: none; margin: 0; padding: 10px 16px 14px; font-size: 12px; color: #51748a; background: #f9fdff; }
.diagram-note { margin: 12px 3px 0; font-size: 12px; line-height: 1.5; color: #637f90; }
dialog { width: min(550px, calc(100vw - 28px)); max-height: min(640px, calc(100dvh - 30px)); overflow: auto; padding: 0; border: 0; border-radius: 20px; color: #183c5b; background: #fff; box-shadow: 0 24px 80px rgba(6, 45, 77, .35); }
dialog::backdrop { background: rgba(6, 36, 60, .64); backdrop-filter: blur(3px); }
.dialog-content { position: relative; padding: clamp(24px, 4vw, 36px); }
.close-button { position: absolute; top: 13px; right: 15px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: #365c74; background: #ecf5fa; font-size: 27px; line-height: 1; cursor: pointer; }
.dialog-kicker { margin: 0 0 8px; color: #1784bd; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
dialog h2 { margin: 0 0 17px; color: #103d63; font-size: clamp(23px, 4vw, 30px); }
dialog p { line-height: 1.75; }
#info-description, #info-takeaway, #info-role { margin: 0; font-size: 15px; }
.role-heading { margin: 20px 0 5px; color: #0b76aa; font-size: 13px; font-weight: 800; }
@media (max-width: 1000px) { .activity-layout.practice-active { display: flex; flex-direction: column; }.practice-panel { border-left: 0; border-top: 1px solid #246087; }.practice-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .page { padding: 18px 0 24px; }.intro { padding: 0 17px; margin-bottom: 18px; }.mode-bar { margin-left: 16px; }.mode-button { min-width: 98px; padding: 9px 12px; font-size: 14px; }.diagram-section { border-radius: 0; border-left: 0; border-right: 0; }.section-heading { padding: 13px 16px; align-items: flex-start; }.section-heading h2 { font-size: 17px; }.section-heading p { font-size: 12px; }.stage-tag { padding: 6px 8px; font-size: 11px; }.mobile-hint { display: block; }.diagram-note { padding: 0 15px; }.practice-panel { padding: 18px 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
[hidden] { display: none !important; }