@property --edge-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --ink: #020407;
  --panel: #071017e8;
  --cyan: #6beaff;
  --cyan-dim: #24647a;
  --gold: #e8c982;
  --purple: #bc7bff;
  --green: #6df3a9;
  --red: #ff6f7c;
  --stage-width: max(100vw, 1600px);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); scroll-behavior: smooth; }
body {
  min-width: 100%; min-height: 100%; margin: 0; overflow-x: auto;
  color: #dcecf2; background: #020407;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
body::-webkit-scrollbar { width: 12px; height: 12px; }
body::-webkit-scrollbar-track { background: #020407; }
body::-webkit-scrollbar-thumb { border: 3px solid #020407; border-radius: 20px; background: linear-gradient(90deg, #163a49, #56dfff, #163a49); }
button, textarea { font: inherit; }
button { cursor: pointer; }

#particleCanvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.scanlines { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .28; mix-blend-mode: screen; background: repeating-linear-gradient(0deg, transparent 0 3px, #c8f5ff09 4px); }
.workshop-page { position: relative; z-index: 1; width: var(--stage-width); min-width: 1600px; }

.factory-stage {
  position: relative; width: var(--stage-width); min-width: 1600px; aspect-ratio: 2048 / 940;
  isolation: isolate; overflow: hidden; background: #020407;
}
.factory-backdrop {
  position: absolute; inset: 0; z-index: -4;
  background: url("assets/tokenizer-factory-cinematic-v1.png") center / 100% 100% no-repeat;
}
.factory-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #0103062b 0 24%, transparent 38% 73%, #0102052b 100%);
}
.factory-vignette {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  box-shadow: inset 0 0 100px #000, inset 0 -45px 85px #0008;
  background: radial-gradient(ellipse at 50% 58%, transparent 48%, #0006 100%);
}

.factory-title { position: absolute; z-index: 20; left: 19%; right: 19%; top: 2.4%; text-align: center; }
.title-rule { display: flex; align-items: center; justify-content: center; gap: 14px; color: #78919e; font: 9px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .28em; }
.title-rule i { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #b88c47); }
.title-rule i:last-child { transform: scaleX(-1); }
.factory-title h1 { margin: .7% 0 0; color: var(--gold); font: 700 clamp(54px, 4.6vw, 88px)/.98 Georgia, "Times New Roman", "Songti SC", serif; letter-spacing: .015em; text-shadow: 0 3px 2px #000, 0 0 28px #c69c4c30; }
.factory-title h1 em { font-style: normal; font-weight: 600; }
.factory-title p { margin: .9% 0 0; color: #d8d0c0; font-size: clamp(15px, 1.2vw, 24px); letter-spacing: .025em; text-shadow: 0 2px 3px #000; }

.station-nav { position: absolute; z-index: 22; left: 2.9%; right: 2.9%; top: 19.2%; display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1.05fr 1.2fr; gap: 3.4%; }
.station-nav button { min-width: 0; height: 58px; display: flex; align-items: center; gap: 12px; padding: 5px 9px; color: #b6cbd5; border: 0; background: transparent; text-align: left; filter: grayscale(.35); transition: .35s ease; }
.station-nav button b { flex: 0 0 43px; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #3d6171; border-radius: 50%; color: #9fb9c4; background: #03070bbd; box-shadow: inset 0 0 12px #1a5368, 0 0 8px #0d83aa55; font: 600 20px Georgia, serif; }
.station-nav button span { overflow: hidden; color: inherit; font-size: clamp(16px, 1.35vw, 27px); font-weight: 800; white-space: nowrap; text-shadow: 0 0 10px #5ee4ff55; }
.station-nav button small { display: block; margin-top: 2px; color: #5b7683; font: 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .11em; }
.station-nav button:hover, .station-nav button.active { color: #ecfbff; filter: none; transform: translateY(-2px); }
.station-nav button.active b { color: #071013; border-color: #e8c982; background: radial-gradient(circle, #f6dc9f, #b07d32); box-shadow: 0 0 17px #e9bb60; }
.station-nav button.done b { color: #d7faff; border-color: #5ce5ff; box-shadow: inset 0 0 13px #1185a9, 0 0 13px #49dfff8a; }

.machine-labels span { position: absolute; z-index: 7; top: 34%; padding: 4px 9px; color: #65dff4; border: 1px solid #2b5e70; background: #061018d4; box-shadow: 0 0 9px #1aa9d743; font: 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.label-intake { left: 4.6%; }.label-scanner { left: 23.7%; }.label-cutter { left: 45.8%; }.label-encoder { left: 66.2%; }.label-embedding { left: 85.8%; }

.material-console, .process-panel { position: absolute; z-index: 9; overflow: hidden; color: #dff8ff; border: 1px solid #3b7185; background: linear-gradient(145deg, #06141dcf, #020609e8); box-shadow: inset 0 0 24px #115d7a53, 0 0 14px #44dfff28; backdrop-filter: blur(2px); }
.material-console { left: 1.55%; top: 40.4%; width: 14.3%; height: 22.3%; padding: 11px; }
.console-heading, .panel-head { height: 24px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; border-bottom: 1px solid #234a5a; color: #bdeefa; font-size: 10px; }
.console-heading i, .panel-head i { width: 7px; height: 7px; border-radius: 50%; background: #67ebff; box-shadow: 0 0 9px #67ebff; }
.console-heading b, .panel-head b { color: #63808e; font: 7px ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.material-console textarea { width: 100%; height: 46%; margin-top: 8px; resize: none; outline: 0; padding: 9px 10px; color: #effdff; border: 1px solid #296178; background: #020a0fbd; box-shadow: inset 0 0 16px #0e58757d; font-size: clamp(12px, .9vw, 17px); line-height: 1.45; text-shadow: 0 0 8px #62e5ff; }
.console-actions { display: grid; grid-template-columns: 1fr 38px; gap: 7px; margin-top: 7px; }
.console-actions button { height: 33px; color: #ecfdff; border: 1px solid #63e5ff; background: linear-gradient(90deg, #0b3041, #147d9d); box-shadow: 0 0 10px #48dfff45; font-weight: 800; }
.console-actions button:first-child { display: flex; align-items: center; justify-content: center; gap: 12px; }
.console-actions button:disabled { cursor: wait; opacity: .72; }
.material-console p { margin: 7px 0 0; overflow: hidden; color: #7195a2; font: 7px/1.25 ui-monospace, Consolas, monospace; white-space: nowrap; text-overflow: ellipsis; }

.scanner-readout { left: 19.1%; top: 43.1%; width: 20.2%; height: 15.3%; padding: 10px 13px; border-radius: 38% / 13%; background: radial-gradient(ellipse, #092d3bc9, #02070be8 73%); }
.scanner-readout > p { position: relative; z-index: 2; margin: 10px 4px 7px; overflow: hidden; color: #dcfbff; font-size: clamp(10px, .83vw, 16px); text-align: center; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 9px #5ee7ff; }
.recognized-segment { position: relative; display: inline-block; margin: 0 1px; padding: 0 2px 2px; color: var(--segment-color, #dffbff); font-weight: 900; text-shadow: 0 0 7px currentColor, 0 0 13px currentColor; }
.recognized-segment::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 1px; background: currentColor; box-shadow: 0 0 5px currentColor; opacity: .85; }
.recognized-segment.blue { --segment-color: #63dfff; }.recognized-segment.purple { --segment-color: #c57cff; }.recognized-segment.green { --segment-color: #6df3a6; }.recognized-segment.gold { --segment-color: #efc76d; }.recognized-segment.red { --segment-color: #ff6d78; }.recognized-segment.cyan { --segment-color: #66edf2; }.recognized-segment.violet { --segment-color: #9f87ff; }.recognized-segment.emerald { --segment-color: #62e8bd; }.recognized-segment.amber { --segment-color: #f2aa58; }.recognized-segment.rose { --segment-color: #ff7fb5; }.recognized-segment.azure { --segment-color: #62b2ff; }.recognized-segment.lime { --segment-color: #a9eb60; }
.detected-types { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; max-height: 53px; overflow: hidden; }
.detected-types span { display: flex; gap: 5px; align-items: center; padding: 3px 6px; color: var(--cyan); border: 1px solid currentColor; border-radius: 3px; background: #061119e8; box-shadow: 0 0 7px currentColor; font-size: 8px; animation: typeReveal .35s both; }
.detected-types span i { opacity: .65; font-style: normal; font-size: 7px; }
.scanner-sweep { position: absolute; z-index: 1; top: 0; bottom: 0; left: -25%; width: 18%; opacity: 0; transform: skewX(-9deg); background: linear-gradient(90deg, transparent, #c6fbffff, transparent); filter: blur(1px); }
.factory-stage.scanning .scanner-sweep { opacity: .9; animation: scannerSweep 1.3s ease-in-out 2; }

.encoder-readout { left: 65.3%; top: 40.4%; width: 15.8%; height: 20.7%; padding: 10px 12px; border-color: #78529a; background: linear-gradient(180deg, #120822dc, #05030ae8); box-shadow: inset 0 0 25px #6b329765, 0 0 15px #9d58d34a; }
.encoder-rows { display: grid; gap: 3px; margin-top: 7px; max-height: calc(100% - 28px); overflow: hidden; }
.encoder-rows > p { margin: 20px 0; color: #745c87; text-align: center; font: 9px ui-monospace, Consolas, monospace; }
.id-row { display: grid; grid-template-columns: minmax(0,1fr) 15px 42px; align-items: center; gap: 2px; min-height: 19px; padding: 2px 5px; color: var(--cyan); border: 1px solid color-mix(in srgb, currentColor 45%, #351f4a); background: #0a0611c4; box-shadow: inset 0 0 7px color-mix(in srgb, currentColor 16%, transparent); animation: rowReveal .35s both; }
.id-row b { overflow: hidden; color: #f3eaff; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }.id-row i { color: #8feaff; font-style: normal; text-align: center; }.id-row span { color: #eadcff; font: 8px ui-monospace, Consolas, monospace; text-align: right; }

.embedding-readout { left: 84.2%; top: 47%; width: 13%; height: 15%; padding: 9px 10px; border-color: #347896; border-radius: 14px 14px 38% 38% / 10px 10px 12% 12%; background: radial-gradient(circle at 50% 30%, #12379bd1, #05101bda 64%, #02070be8); }
.embedding-readout > p { margin: 8px 0 5px; overflow: hidden; color: #dffbff; font: 7px/1.35 ui-monospace, Consolas, monospace; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.vector-bars { height: 47px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; opacity: .25; }
.vector-bars i { width: 4px; height: var(--h); background: linear-gradient(#f4ffff, #50e4ff 40%, #7057ff); box-shadow: 0 0 6px #51e2ff; animation: vectorPulse .75s ease-in-out infinite alternate; animation-delay: calc(var(--i) * 35ms); }
.factory-stage.embedding-active .embedding-readout { animation: chamberPulse .75s ease-in-out infinite alternate; }
.factory-stage.embedding-active .vector-bars { opacity: 1; }

.belt-energy { position: absolute; z-index: 3; left: 3.5%; right: 5%; top: 63.6%; height: 7.8%; overflow: hidden; pointer-events: none; transform: perspective(900px) rotateX(4deg); }
.belt-energy::before { content: ""; position: absolute; inset: 6% 0 24%; opacity: .32; background: repeating-linear-gradient(90deg, transparent 0 31px, #61e8ff 32px 34px, transparent 35px 68px); background-size: 68px 100%; animation: beltDeck .55s linear infinite; }
.belt-energy i { position: absolute; top: 12%; width: 90px; height: 3px; opacity: 0; background: linear-gradient(90deg, transparent, #e8fdff, #5ee8ff, transparent); filter: drop-shadow(0 0 5px #4bdfff); }
.factory-stage.belt-running .belt-energy i { opacity: .65; animation: beltEnergy 1.65s linear infinite; }
.belt-energy i:nth-child(2) { animation-delay: -.55s !important; }.belt-energy i:nth-child(3) { animation-delay: -1.1s !important; }

.cargo-layer { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.cargo {
  --cargo-color: var(--cyan); position: absolute; left: 0; top: 0; width: var(--cargo-width, 78px); height: var(--cargo-height, 49px);
  display: grid; place-items: center; transform: translate(-50%, -100%); transform-origin: 50% 100%;
  color: var(--cargo-color); border: 2px solid currentColor; border-radius: 7px;
  background: linear-gradient(145deg, color-mix(in srgb, currentColor 24%, #111b22) 0 17%, #061016 47%, color-mix(in srgb, currentColor 16%, #020508));
  box-shadow: 0 0 10px currentColor, inset 0 0 11px color-mix(in srgb, currentColor 30%, transparent), 5px 7px 5px #000a;
  will-change: left, top, opacity, transform;
}
.cargo::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, currentColor 58%, transparent); clip-path: polygon(0 0, 18px 0, 22px 3px, calc(100% - 22px) 3px, calc(100% - 18px) 0, 100% 0, 100% 13px, calc(100% - 4px) 17px, calc(100% - 4px) calc(100% - 15px), 100% calc(100% - 11px), 100% 100%, 0 100%, 0 calc(100% - 11px), 4px calc(100% - 15px), 4px 17px, 0 13px); opacity: .75; }
.cargo::after { content: ""; position: absolute; left: 7px; right: -5px; bottom: -7px; height: 7px; border: 1px solid color-mix(in srgb, currentColor 40%, #10191e); border-top: 0; transform: skewX(-35deg); transform-origin: top; background: linear-gradient(90deg, #020407, color-mix(in srgb, currentColor 14%, #071017)); filter: brightness(.7); }
.cargo b { position: relative; z-index: 2; max-width: calc(100% - 15px); overflow: hidden; color: #f7feff; font-size: clamp(11px, .85vw, 17px); white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 8px currentColor; }
.cargo.raw { --cargo-width: 235px; --cargo-height: 59px; border-radius: 8px; }
.cargo.raw b { font-size: clamp(13px, 1vw, 20px); }
.cargo.raw.recognized-raw { border-color: #8ceeff; box-shadow: 0 0 11px #68e7ff, 0 0 24px #9a68ff55, inset 0 0 13px #45dfff48, 5px 7px 5px #000a; }
.cargo.raw b.recognized-material { display: block; max-width: calc(100% - 17px); overflow: hidden; color: #dffaff; font-size: clamp(12px, .9vw, 18px); white-space: pre; text-overflow: ellipsis; }
.cargo.raw .recognized-segment { margin: 0; padding-inline: 1px; }
.cargo.id { --cargo-width: 61px; --cargo-height: 43px; border-color: #b77aff; background: linear-gradient(145deg, #3b2058, #0d0715); box-shadow: 0 0 11px #a662ff, inset 0 0 10px #9d56ff55, 5px 7px 5px #000a; }
.cargo.riding { animation: cargoRide .34s ease-in-out infinite alternate; }
.cargo.processing { animation: cargoProcess .3s ease-in-out infinite alternate; filter: brightness(1.35); }
.cargo.flip { animation: cargoFlip .46s ease-in-out; }

.cargo.blue { --cargo-color: #69dfff; }.cargo.purple { --cargo-color: #bd7cff; }.cargo.green { --cargo-color: #6bf1a3; }.cargo.gold { --cargo-color: #e8bf63; }.cargo.red { --cargo-color: #ff6c76; }.cargo.cyan { --cargo-color: #6deef5; }.cargo.violet { --cargo-color: #947dff; }.cargo.emerald { --cargo-color: #61e6bd; }.cargo.amber { --cargo-color: #f0a957; }.cargo.rose { --cargo-color: #ff7db3; }.cargo.azure { --cargo-color: #5fafff; }.cargo.lime { --cargo-color: #a7e95c; }

.laser-overlay { position: absolute; z-index: 13; left: 43.2%; top: 45.5%; width: 17.2%; height: 22%; pointer-events: none; opacity: 0; }
.laser-overlay i { position: absolute; top: var(--laser-top, 0); width: 2px; height: var(--laser-height, 100%); color: var(--cyan); transform: translateX(-50%); background: linear-gradient(transparent, #f4ffff 17%, currentColor 56%, transparent 100%); box-shadow: 0 0 8px currentColor, 0 0 18px currentColor; animation: laserFlicker .18s linear infinite alternate; }
.laser-overlay i::after { content: ""; position: absolute; left: 50%; bottom: 2%; width: 29px; height: 19px; transform: translateX(-50%); background: radial-gradient(circle, #fff 0 1px, currentColor 2px, transparent 3px); background-size: 9px 7px; animation: sparkDance .17s steps(2) infinite; }
.factory-stage.laser-active .laser-overlay { opacity: .95; }

.runtime-status { position: absolute; z-index: 21; left: 2.6%; right: 2.6%; bottom: 2.3%; height: 32px; display: grid; grid-template-columns: 8px minmax(180px,1fr) auto 25%; align-items: center; gap: 10px; padding: 0 12px; color: #a7c6d2; border: 1px solid #1e3947; background: #03070be0; box-shadow: inset 0 0 15px #0b496228; font-size: 10px; }
.runtime-status > i { width: 7px; height: 7px; border-radius: 50%; background: #62ecb2; box-shadow: 0 0 9px #62ecb2; animation: statusBlink 1s infinite; }
.runtime-status strong { overflow: hidden; color: #d8edf3; white-space: nowrap; text-overflow: ellipsis; }.runtime-status span { color: #53717e; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.progress-track { height: 3px; overflow: hidden; background: #12232c; }.progress-track b { display: block; width: 8%; height: 100%; background: linear-gradient(90deg, #d5a752, #64e8ff); box-shadow: 0 0 8px #5ce4ff; transition: width .45s ease; }

.lesson-dock { position: relative; z-index: 8; width: var(--stage-width); min-width: 1600px; min-height: 150px; display: grid; grid-template-columns: 135px minmax(360px, 1.2fr) minmax(430px, 1.5fr) 260px 245px; align-items: stretch; gap: 0; color: #d9e8ed; border-top: 1px solid #775d32; border-bottom: 1px solid #183847; background: linear-gradient(180deg, #071017, #020508); box-shadow: inset 0 1px #d0a75e34, inset 0 24px 44px #081925; }
.lesson-dock > * { min-width: 0; padding: 24px 22px; border-right: 1px solid #193441; }
.lesson-index { display: grid; place-items: center; align-content: center; background: radial-gradient(circle, #152536, #04080c 68%); }
.lesson-index b { width: 58px; height: 58px; display: grid; place-items: center; color: var(--gold); border: 1px solid #b68d4f; border-radius: 50%; box-shadow: inset 0 0 15px #b98534, 0 0 13px #d2a34e54; font: 600 26px Georgia, serif; }.lesson-index span { margin-top: 8px; color: #62808d; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.lesson-copy h2 { margin: 0 0 9px; color: var(--gold); font: 700 24px Georgia, "Songti SC", serif; }.lesson-copy p { margin: 0; color: #9fb3bb; font-size: 13px; line-height: 1.75; }
.micro-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0; padding: 27px 18px !important; list-style: none; counter-reset: step; }
.micro-steps li { position: relative; display: grid; place-items: center; padding: 10px 7px 10px 32px; color: #66818c; border: 1px solid #233d49; background: #050b0f; font-size: 11px; text-align: center; }.micro-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 8px; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 8px ui-monospace, Consolas, monospace; }.micro-steps li.done { color: #69dba5; border-color: #245f4b; }.micro-steps li.active { color: #eafcff; border-color: #63e7ff; box-shadow: inset 0 0 11px #1a7d9e55, 0 0 8px #44dfff38; }
.lesson-dock code { display: grid; place-items: center; color: #e2c88c; background: #050807; font: 12px/1.55 ui-monospace, Consolas, monospace; text-align: center; white-space: normal; }
.lesson-controls { display: grid; grid-template-columns: 42px 1fr 42px; align-content: center; gap: 7px; }.lesson-controls button { height: 42px; color: #b8d4df; border: 1px solid #2b5364; background: #07131a; font-weight: 800; }.lesson-controls #autoDemo { color: #061015; border-color: #d4af6c; background: linear-gradient(135deg, #f0d292, #a87933); }
.lesson-deep-link { grid-column: 1 / -1; display: grid; place-items: center; height: 25px; color: #73dff3; border: 1px solid #24586b; background: #061119; font: 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .12em; text-decoration: none; }
.lesson-deep-link:hover { color: #fff; border-color: #65e8ff; box-shadow: 0 0 10px #44dfff42; }

.tokenizer-lab {
  position: relative; width: var(--stage-width); min-width: 1600px; padding: 56px 52px 72px; overflow: hidden;
  color: #dbeaf0; border-top: 1px solid #9c763c; background:
    radial-gradient(circle at 50% 0, #19354a66, transparent 31%),
    linear-gradient(90deg, transparent 49.92%, #3fc7ed0b 50%, transparent 50.08%),
    repeating-linear-gradient(0deg, #061017 0 1px, #020508 1px 42px);
  box-shadow: inset 0 40px 80px #020406, inset 0 1px #ebc77f55;
}
.tokenizer-lab::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(90deg, transparent 0 119px, #4ddcf61b 120px, transparent 121px 239px); }
.tokenizer-lab::after { content: "TOKENIZER KNOWLEDGE SYSTEM / FACTORY FLOOR 02"; position: absolute; right: 52px; bottom: 22px; color: #33505d; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .2em; }

.lab-hero { position: relative; z-index: 1; display: grid; grid-template-columns: 170px minmax(600px, 1fr) 390px; align-items: center; gap: 34px; max-width: 1940px; margin: 0 auto 36px; }
.lab-badge { height: 118px; display: grid; place-items: center; align-content: center; gap: 13px; border: 1px solid #745a31; clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); background: radial-gradient(circle, #162d3a, #04090d 70%); box-shadow: inset 0 0 30px #16485f5c; }
.lab-badge i { width: 48px; height: 48px; border: 1px solid #e1bd74; border-radius: 50%; box-shadow: inset 0 0 15px #c39139, 0 0 16px #d6a44f55; }
.lab-badge i::before { content: "Ⅱ"; display: grid; place-items: center; height: 100%; color: var(--gold); font: 22px Georgia, serif; }
.lab-badge span { color: #6b8793; font: 7px ui-monospace, Consolas, monospace; letter-spacing: .11em; text-align: center; }
.lab-eyebrow { margin: 0 0 9px; color: #5edcf4; font: 9px ui-monospace, Consolas, monospace; letter-spacing: .24em; }
.lab-hero h2 { margin: 0; color: var(--gold); font: 700 47px/1.04 Georgia, "Songti SC", serif; text-shadow: 0 0 22px #c89d4c22; }
.lab-hero h2 em { color: #f0d796; font-style: normal; font-weight: 600; }
.lab-hero > div:nth-child(2) > p:last-child { max-width: 970px; margin: 13px 0 0; color: #8fa6af; font-size: 14px; line-height: 1.8; }
.lab-principle { min-height: 98px; display: grid; grid-template-columns: repeat(5, auto); align-content: center; align-items: center; justify-content: center; gap: 9px; padding: 18px; border: 1px solid #274956; background: linear-gradient(145deg, #07151d, #020609); box-shadow: inset 0 0 25px #0f49604d; }
.lab-principle b { grid-column: 1 / -1; margin-bottom: 7px; color: #6a8995; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .16em; text-align: center; }
.lab-principle span { color: #dceef3; font-size: 13px; font-weight: 800; }.lab-principle i { color: var(--gold); font-style: normal; }

.granularity-deck { position: relative; z-index: 1; display: grid; grid-template-columns: 315px minmax(700px, 1fr) 360px; gap: 16px; max-width: 1940px; margin: 0 auto 30px; }
.granularity-switcher, .segmentation-console, .concept-terminal, .subword-foundry, .strategy-matrix { border: 1px solid #284854; background: linear-gradient(155deg, #08141be8, #020609f2); box-shadow: inset 0 0 34px #0e405342, 0 12px 34px #0007; }
.granularity-switcher, .concept-terminal { min-height: 376px; padding: 15px; }
.segmentation-console { min-height: 376px; padding: 15px 18px; border-color: #406473; background: radial-gradient(circle at 50% 35%, #0a2935, #03080c 68%); }
.deck-head { height: 29px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; padding: 0 2px 8px; color: #badce6; border-bottom: 1px solid #24404c; font-size: 10px; }
.deck-head > i { width: 7px; height: 7px; border-radius: 50%; background: #66eaff; box-shadow: 0 0 9px #66eaff; }.deck-head > b { color: #536e79; font: 7px ui-monospace, Consolas, monospace; letter-spacing: .09em; }
.mode-tabs { display: grid; gap: 7px; margin-top: 12px; }
.mode-tab { height: 62px; display: grid; grid-template-columns: 38px 1fr 27px; align-items: center; gap: 8px; padding: 7px 10px; color: #75909a; border: 1px solid #213e49; background: #040a0e; text-align: left; transition: .25s ease; }
.mode-tab > b { width: 31px; height: 31px; display: grid; place-items: center; color: #63818d; border: 1px solid #365a68; border-radius: 50%; font: 10px ui-monospace, Consolas, monospace; }.mode-tab strong { display: block; color: #b7ced6; font-size: 12px; }.mode-tab small { display: block; margin-top: 3px; color: #56717c; font-size: 9px; }.mode-tab > i { display: grid; place-items: center; width: 25px; height: 25px; color: #57717c; border: 1px solid currentColor; font-style: normal; font-size: 11px; }
.mode-tab:hover, .mode-tab.active { color: #69e6ff; border-color: #55dff5; transform: translateX(3px); background: linear-gradient(90deg, #0a2632, #071019); box-shadow: inset 0 0 18px #15728e4d, 0 0 10px #33d7ff2b; }
.mode-tab.active > b { color: #061016; border-color: var(--gold); background: var(--gold); box-shadow: 0 0 10px #d5a750; }.mode-tab.active strong { color: #effcff; }.mode-tab.active > i { color: #e7c87f; }
.mode-gauges { display: grid; gap: 7px; margin-top: 12px; }
.mode-gauges label { display: grid; grid-template-columns: 72px 1fr 22px; align-items: center; gap: 7px; color: #6f8994; font-size: 8px; }.mode-gauges label > b { height: 3px; overflow: hidden; background: #102630; }.mode-gauges label > b i { display: block; width: 50%; height: 100%; background: linear-gradient(90deg, #4ae2ff, #e0b762); box-shadow: 0 0 7px #51ddf5; transition: width .4s ease; }.mode-gauges em { color: #d7c287; font-style: normal; text-align: right; }

.lab-input-row { padding: 17px 8px 14px; }.lab-input-row > label { display: block; margin-bottom: 8px; color: #7897a3; font-size: 10px; }.lab-input-row > div { display: grid; grid-template-columns: 1fr 128px; gap: 8px; }
.lab-input-row input { min-width: 0; height: 43px; padding: 0 14px; outline: 0; color: #eefcff; border: 1px solid #367184; background: #02090d; box-shadow: inset 0 0 16px #145a7169; font: 14px ui-monospace, Consolas, "Microsoft YaHei", monospace; text-shadow: 0 0 8px #67e8ff5e; }.lab-input-row input:focus { border-color: #6feaff; box-shadow: inset 0 0 18px #167c9b73, 0 0 10px #46dfff47; }
.lab-input-row button { color: #061116; border: 1px solid #e2c079; background: linear-gradient(135deg, #f1d594, #a77932); font-size: 11px; font-weight: 900; }.lab-input-row button span { margin-left: 8px; }
.console-route { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 9px; padding: 0 8px 11px; color: #587682; font: 7px ui-monospace, Consolas, monospace; letter-spacing: .11em; }.console-route i { height: 1px; background: linear-gradient(90deg, #235766, #65e7ff, #235766); box-shadow: 0 0 6px #4adbf0; }.console-route b { color: #d7bd7d; }
.lab-output { min-height: 118px; display: flex; align-content: flex-start; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 15px; border: 1px solid #1e4655; background: repeating-linear-gradient(90deg, #03090d 0 53px, #07151d 54px 55px); box-shadow: inset 0 0 28px #0e4d6540; }
.lab-token { --token-color: #65dfff; position: relative; display: grid; place-items: center; min-width: 50px; height: 43px; padding: 0 13px; color: #f1fdff; border: 1px solid var(--token-color); clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); background: linear-gradient(145deg, color-mix(in srgb, var(--token-color) 20%, #071015), #03080c); box-shadow: inset 0 0 11px color-mix(in srgb, var(--token-color) 25%, transparent), 0 0 8px color-mix(in srgb, var(--token-color) 55%, transparent); font: 800 13px ui-monospace, Consolas, "Microsoft YaHei", monospace; animation: labTokenReveal .42s cubic-bezier(.2,.85,.25,1) both; animation-delay: calc(var(--token-index) * 45ms); }
.lab-token:nth-child(5n+2) { --token-color: #bc7bff; }.lab-token:nth-child(5n+3) { --token-color: #6decad; }.lab-token:nth-child(5n+4) { --token-color: #e7bc66; }.lab-token:nth-child(5n) { --token-color: #ff7180; }
.output-summary { min-height: 41px; display: grid; grid-template-columns: 170px 1fr 250px; align-items: center; gap: 12px; padding: 8px 10px 0; color: #6e8994; font-size: 9px; }.output-summary span:first-child i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #64eab1; box-shadow: 0 0 8px #64eab1; }.output-summary b { color: #effcff; }.output-summary code { color: #d8bf83; text-align: right; }

.concept-kicker { margin: 16px 0 7px; color: #56dff7; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .17em; }.concept-terminal h3 { margin: 0; color: #e8c982; font: 700 21px Georgia, "Songti SC", serif; }.concept-terminal > p:nth-of-type(2) { min-height: 62px; margin: 11px 0; color: #8ea4ad; font-size: 11px; line-height: 1.7; }
.concept-terminal ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }.concept-terminal li { display: grid; grid-template-columns: 37px 1fr; gap: 8px; padding: 6px 8px; border-left: 2px solid #337184; background: #071118; }.concept-terminal li b { color: #68def3; font-size: 9px; }.concept-terminal li span { color: #718c97; font-size: 9px; line-height: 1.45; }
.takeaway { margin-top: 10px; padding: 8px 10px; border: 1px solid #594729; background: linear-gradient(90deg, #181306, #070908); }.takeaway b { color: #e5c47c; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .1em; }.takeaway p { margin: 4px 0 0; color: #a89b7d; font-size: 9px; line-height: 1.5; }

.subword-foundry { position: relative; z-index: 1; max-width: 1940px; margin: 0 auto 30px; padding: 24px; border-color: #4e4939; background: linear-gradient(160deg, #0b1216f4, #030608f7); }
.foundry-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 0 2px 18px; border-bottom: 1px solid #50452e; }.foundry-title span { color: #6a8b97; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .18em; }.foundry-title h3 { margin: 6px 0 0; color: var(--gold); font: 700 29px Georgia, "Songti SC", serif; }.foundry-title p { max-width: 530px; margin: 0; color: #6f858e; font-size: 11px; text-align: right; }
.algorithm-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; padding: 18px 0; }
.algorithm-card { position: relative; min-height: 108px; display: grid; align-content: center; gap: 4px; padding: 15px 16px; overflow: hidden; color: #77909a; border: 1px solid #293e45; background: linear-gradient(145deg, #071016, #030607); text-align: left; transition: .25s ease; }.algorithm-card::after { content: ""; position: absolute; right: -24px; top: -24px; width: 72px; height: 72px; border: 1px solid #234652; transform: rotate(45deg); }.algorithm-card > span { color: #52707b; font: 7px ui-monospace, Consolas, monospace; letter-spacing: .12em; }.algorithm-card > b { color: #c8dbe1; font: 700 18px Georgia, "Times New Roman", serif; }.algorithm-card small { color: #6c838c; font-size: 9px; }.algorithm-card > i { margin-top: 6px; color: #48636d; font: 7px ui-monospace, Consolas, monospace; letter-spacing: .13em; }
.algorithm-card:hover, .algorithm-card.active { border-color: #d3ad63; transform: translateY(-3px); background: radial-gradient(circle at 20% 50%, #26301f, #071017 65%); box-shadow: inset 0 0 22px #ad7e2c33, 0 0 14px #d4a94d22; }.algorithm-card.active > span, .algorithm-card.active > i { color: #bc9753; }.algorithm-card.active > b { color: #f0d493; }.algorithm-card.active small { color: #aebec3; }
.algorithm-workbench { display: grid; grid-template-columns: 360px minmax(660px, 1fr) 330px; min-height: 256px; border: 1px solid #35505b; background: radial-gradient(circle at 56% 50%, #0b2630, #030709 68%); }
.algorithm-workbench > div { min-width: 0; padding: 24px; }.algorithm-workbench > div + div { border-left: 1px solid #29434d; }
.algorithm-identity > span { color: #5bdcf5; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .16em; }.algorithm-identity h4 { margin: 9px 0; color: #ecd08d; font: 700 22px Georgia, "Times New Roman", serif; }.algorithm-identity p { margin: 0; color: #8199a2; font-size: 10px; line-height: 1.75; }
.algorithm-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }.algorithm-tags span { padding: 4px 7px; color: #6edff3; border: 1px solid #2c6678; background: #06131a; font: 7px ui-monospace, Consolas, monospace; }
.algorithm-timeline { display: grid; align-content: center; gap: 11px; }.timeline-step { display: grid; grid-template-columns: 26px 95px 1fr; align-items: center; gap: 9px; min-height: 49px; padding: 7px 10px; color: #6f8994; border: 1px solid #1c3f4c; background: #040b0f; animation: timelineReveal .45s both; animation-delay: calc(var(--step-index) * 110ms); }.timeline-step > b { width: 24px; height: 24px; display: grid; place-items: center; color: #061015; border-radius: 50%; background: #67dff5; box-shadow: 0 0 9px #4ddaf3; font: 9px ui-monospace, Consolas, monospace; }.timeline-step > span { color: #6b8a96; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .08em; }.timeline-step code { overflow: hidden; color: #d9eef3; font: 11px ui-monospace, Consolas, "Microsoft YaHei", monospace; white-space: nowrap; text-overflow: ellipsis; }
.algorithm-result { display: grid; align-content: center; }.algorithm-result > span { color: #607c87; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .12em; }.algorithm-result > div { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }.algorithm-result > div b { padding: 9px 10px; color: #f5fdff; border: 1px solid #a774e4; background: linear-gradient(145deg, #2a1641, #0a0710); box-shadow: inset 0 0 8px #9e59e333, 0 0 7px #9556db44; font: 800 12px ui-monospace, Consolas, "Microsoft YaHei", monospace; }.algorithm-result p { margin: 0; color: #6a7f87; font-size: 9px; line-height: 1.6; }
.sentencepiece-note { display: grid; grid-template-columns: 285px 1fr; gap: 22px; align-items: center; margin-top: 15px; padding: 15px 18px; border: 1px solid #56462c; background: linear-gradient(90deg, #1b1609, #071015 45%, #041017); }.sentencepiece-note b { color: #e7c87d; font: 700 15px Georgia, "Songti SC", serif; }.sentencepiece-note p { margin: 0; color: #8ca1a8; font-size: 10px; line-height: 1.75; }.sentencepiece-note strong { color: #e6d7ae; }.sentencepiece-note code { color: #67e4f7; }

.strategy-matrix { position: relative; z-index: 1; max-width: 1940px; margin: 0 auto; padding: 24px; }.strategy-matrix header { display: grid; grid-template-columns: 250px 1fr 600px; align-items: end; gap: 18px; padding-bottom: 16px; }.strategy-matrix header > span { color: #5d808d; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .17em; }.strategy-matrix h3 { margin: 0; color: #e7ca87; font: 700 25px Georgia, "Songti SC", serif; }.strategy-matrix header p { margin: 0; color: #718993; font-size: 10px; text-align: right; }
.matrix-grid { border: 1px solid #2d4853; }.matrix-row { display: grid; grid-template-columns: 180px 1.2fr .65fr .65fr .65fr 1.65fr; min-height: 49px; align-items: stretch; }.matrix-row + .matrix-row { border-top: 1px solid #1e3741; }.matrix-row > * { display: flex; align-items: center; min-width: 0; padding: 10px 13px; color: #859ba4; border-right: 1px solid #1e3741; font-size: 10px; }.matrix-row > *:last-child { border-right: 0; }.matrix-head { min-height: 36px; background: #0a1920; }.matrix-head b { color: #5f7e8a; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .08em; }.matrix-row strong { color: #d8edf2; }.matrix-row.featured { background: linear-gradient(90deg, #112419, #07151b); box-shadow: inset 3px 0 #d0a755; }.matrix-row.featured strong { color: #e7ca84; }.matrix-row .warn { color: #ee9972; }.matrix-row .good { color: #68dda5; }.matrix-footnote { margin: 11px 0 0; color: #536d77; font-size: 9px; line-height: 1.6; }

@keyframes labTokenReveal { from { opacity: 0; transform: translateY(14px) scale(.75); filter: brightness(1.8); } }
@keyframes timelineReveal { from { opacity: 0; transform: translateX(-14px); } }

@keyframes scannerSweep { 0% { left: -25%; } 100% { left: 110%; } }
@keyframes typeReveal { from { opacity: 0; transform: translateY(7px) scale(.85); } }
@keyframes rowReveal { from { opacity: 0; transform: translateX(-12px); } }
@keyframes vectorPulse { to { height: calc(var(--h) * .45); filter: brightness(1.5); } }
@keyframes chamberPulse { to { filter: brightness(1.32); box-shadow: inset 0 0 34px #3a54e7a3, 0 0 28px #4de4ff90; } }
@keyframes beltDeck { to { background-position-x: 68px; } }
@keyframes beltEnergy { from { left: -90px; } to { left: 100%; } }
@keyframes cargoRide { to { margin-top: -3px; transform: translate(-50%, -100%) rotate(-.5deg); } }
@keyframes cargoProcess { to { transform: translate(-50%, -100%) scale(1.06); } }
@keyframes cargoFlip { 50% { transform: translate(-50%, -100%) rotateY(90deg) scale(1.08); } }
@keyframes laserFlicker { to { opacity: .72; filter: brightness(1.65); } }
@keyframes sparkDance { to { background-position: 5px 4px; transform: translateX(-50%) scale(1.22); } }
@keyframes statusBlink { 50% { opacity: .42; } }

@media (max-width: 1700px) {
  :root { --stage-width: 1600px; }
  .lesson-dock { grid-template-columns: 115px 410px 470px 250px 235px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}