:root{
  --bg:#060b16;
  --panel:rgba(16,28,47,.72);
  --panel2:rgba(20,36,60,.88);
  --line:rgba(130,175,225,.16);
  --acc:#4fe3ff;
  --acc-rgb:79,227,255;
  --text:#e9f1fb;
  --muted:#8fa4bf;
  --amber:#f6c35a;
  --green:#62f0a4;
  --red:#ff6b7f;
  --ease:cubic-bezier(.2,.8,.2,1);
}
body[data-topic="starter"]{--acc:#ff8a3d;--acc-rgb:255,138,61}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
@supports (height:100dvh){html,body{height:100dvh}}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI",Inter,system-ui,-apple-system,Roboto,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
a{color:var(--acc)}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background .8s;
  background:radial-gradient(620px circle at var(--mx,70%) var(--my,20%),rgba(var(--acc-rgb),.11),transparent 60%),
             radial-gradient(900px circle at 10% 110%,rgba(246,195,90,.05),transparent 60%)}
.progress-top{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress-top i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),#fff);box-shadow:0 0 12px var(--acc);transition:width .6s var(--ease)}
.app{position:relative;z-index:1;height:100%;height:100dvh;display:flex;flex-direction:column;max-width:1640px;margin:0 auto;
  background:linear-gradient(180deg,rgba(8,16,30,.55),rgba(6,11,22,.35))}
button:focus-visible,a:focus-visible,input:focus-visible,.part:focus-visible{outline:3px solid var(--acc);outline-offset:4px}

.topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 80px;height:76px;border-bottom:1px solid var(--line);animation:dropIn .8s var(--ease) both;flex:0 0 auto}
.logo{font-weight:800;letter-spacing:.16em;font-size:13px;position:relative;width:max-content;transition:opacity .3s}
.logo span{color:var(--acc)}
.logo:hover{opacity:.75}
.logo::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:linear-gradient(90deg,var(--acc),transparent);transform-origin:left;animation:grow 1.2s .5s var(--ease) both}
.topbar .btn{justify-self:end}

.switch{position:relative;display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:14px;background:rgba(10,18,32,.75);backdrop-filter:blur(8px)}
.switch .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:0;border-radius:10px;background:rgba(var(--acc-rgb),.16);border:1px solid rgba(var(--acc-rgb),.6);
  box-shadow:0 0 22px rgba(var(--acc-rgb),.3);transition:left .5s var(--ease),width .5s var(--ease),opacity .3s,background .5s;opacity:0}
.sw{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:9px 18px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--muted);transition:color .3s}
.sw svg{width:20px;height:20px}
.sw:hover{color:var(--text)}
.sw.active{color:var(--acc)}
.sw-spin{transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
.sw:hover .sw-spin{animation-duration:1s}

.tabs{display:flex;gap:8px;padding:16px 80px 10px;flex-wrap:wrap;align-items:center;transition:opacity .4s,max-height .5s var(--ease),padding .5s;max-height:90px;overflow:hidden}
.tabs.hidden{max-height:0;opacity:0;padding-top:0;padding-bottom:0;pointer-events:none}
.tab{padding:9px 14px;border:1px solid var(--line);border-radius:9px;font-size:12px;background:rgba(14,26,44,.7);transition:all .3s var(--ease);position:relative;animation:rise .6s var(--ease) both}
.tab:hover{border-color:rgba(var(--acc-rgb),.55);transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--acc-rgb),.14)}
.tab.active{background:var(--acc);color:#05131c;font-weight:700;border-color:var(--acc);box-shadow:0 0 22px rgba(var(--acc-rgb),.45);transform:none}
.tab.done:not(.active)::after{content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pop .5s var(--ease)}
.tabs .subtitle{margin-left:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.stage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}
.slide{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;visibility:hidden;opacity:0;pointer-events:none;padding:24px 80px 34px}
.slide.active{visibility:visible;opacity:1;pointer-events:auto;z-index:2;animation:slideInR .6s var(--ease) both}
.slide.active.back{animation:slideInL .6s var(--ease) both}
.slide.leaving{visibility:visible;z-index:1;animation:slideOutL .45s var(--ease) both}
.slide.leaving.back{animation:slideOutR .45s var(--ease) both}
.wrap{max-width:1080px;margin:0 auto}
.slide::-webkit-scrollbar{width:8px}
.slide::-webkit-scrollbar-thumb{background:rgba(130,175,225,.2);border-radius:8px}
.slide [data-anim]{opacity:0}
.slide.active [data-anim]{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + 120ms)}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
h1{font-size:clamp(46px,7vw,86px);line-height:.98;font-weight:800;letter-spacing:-.045em;margin-bottom:24px}
h2{font-size:clamp(32px,4vw,44px);line-height:1.05;font-weight:800;letter-spacing:-.04em;margin-bottom:14px}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.grad{background:linear-gradient(100deg,var(--acc),#fff 45%,var(--acc) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;display:inline-block}
.lead{color:#b9c8dc;font-size:15.5px;line-height:1.65;max-width:540px;margin-bottom:26px}
.lead.sm{font-size:13.5px;margin-bottom:22px;color:var(--muted)}
.kicker{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.caption,.viz-cap{font-size:11.5px;color:var(--muted)}

.btn{padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:rgba(22,38,62,.8);transition:all .3s var(--ease);position:relative;overflow:hidden}
.btn:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(var(--acc-rgb),.55);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.35;cursor:default}
.btn.primary{background:var(--acc);color:#05131c;border-color:var(--acc);font-weight:700;animation:pulseBtn 2.6s infinite}
.btn.primary:hover:not(:disabled){box-shadow:0 10px 28px rgba(var(--acc-rgb),.45)}
.btn.ghost{font-size:12.5px;padding:9px 14px}
.btn.sq{width:38px;height:34px;padding:0;display:grid;place-items:center;font-size:14px}
.btns{display:flex;gap:10px;flex-wrap:wrap}

.hub-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:6px 0 28px}
.hubcard{--c:79,227,255;text-align:left;position:relative;display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:24px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(circle at 50% 0%,rgba(var(--c),.12),rgba(10,18,32,.85) 65%);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
.hubcard.starter{--c:255,138,61}
.hubcard::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.09) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
.hubcard:hover{transform:translateY(-8px);border-color:rgba(var(--c),.65);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 44px rgba(var(--c),.16)}
.hubcard:hover::before{transform:translateX(120%)}
.hubcard .kicker{color:rgb(var(--c))}
.hubcard h3{font-size:30px;letter-spacing:-.03em}
.hubcard p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.hubcard .vis{height:180px;display:grid;place-items:center}
.hubcard .vis svg{height:100%;width:auto;max-width:100%;overflow:visible;filter:drop-shadow(0 0 22px rgba(var(--c),.22))}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:10.5px;padding:4px 9px;border-radius:99px;border:1px solid rgba(var(--c),.35);color:rgb(var(--c));background:rgba(var(--c),.07)}
.cta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-weight:700;font-size:14px;color:rgb(var(--c))}
.cta .arrow{display:inline-block;transition:transform .4s var(--ease)}
.hubcard:hover .cta .arrow{transform:translateX(8px)}
.meter{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;width:110px}
.meter i{display:block;height:100%;width:0;background:rgb(var(--c));transition:width 1s var(--ease)}
.cycle-box{border:1px solid var(--line);border-radius:18px;padding:18px 22px;background:var(--panel)}
.cycle{display:flex;align-items:center;margin-top:14px}
.node{flex:none;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(10,20,36,.8);font-size:12px;font-weight:600;transition:all .3s}
.node.gen{border-color:rgba(79,227,255,.5);color:#4fe3ff}
.node.starter{border-color:rgba(255,138,61,.5);color:#ff8a3d}
.node:hover{transform:translateY(-3px)}
.cycle .ln{flex:1;min-width:24px;height:2px;background:repeating-linear-gradient(90deg,rgba(130,175,225,.65) 0 6px,transparent 6px 12px);background-size:12px 2px;animation:lineMove 1s linear infinite}
.cycle .ln.back{animation-direction:reverse}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;margin:10px 0 26px}
.hero-card{position:relative;border:1px solid var(--line);border-radius:22px;padding:18px 20px;
  background:radial-gradient(circle at 50% 45%,rgba(30,70,110,.35),rgba(10,18,32,.85) 70%);box-shadow:0 30px 60px rgba(0,0,0,.4),inset 0 0 40px rgba(var(--acc-rgb),.05);overflow:hidden}
body[data-topic="starter"] .hero-card{background:radial-gradient(circle at 50% 45%,rgba(110,60,30,.3),rgba(10,18,32,.85) 70%)}
.hero-card::before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(var(--acc-rgb),.75) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinAng 6s linear infinite;pointer-events:none}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7cf5b5;display:flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 1.6s infinite}
.tiltbox{transition:transform .25s ease-out;will-change:transform}
.gen-svg{display:block;width:min(100%,340px);margin:6px auto 0;overflow:visible;filter:drop-shadow(0 0 28px rgba(var(--acc-rgb),.2))}
.gen-svg.wide{width:100%;max-width:440px}
.seg{fill:#f2a23a;animation:segPulse 2.4s infinite ease-in-out}
.spin,.spin-m{transform-box:fill-box;transform-origin:center}
.spin{animation:spin 4s linear infinite}
.spin-fast{transform-box:fill-box;transform-origin:center;animation:spin 1.1s linear infinite}
.spin-r{transform-box:fill-box;transform-origin:center;animation:spinR 9s linear infinite}
.ring-slow{transform-box:fill-box;transform-origin:center;animation:spinR 30s linear infinite}
.plunger{animation:plunger 2.4s infinite ease-in-out}
.bolt{animation:blink 1.2s infinite}
.hero-labels{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.hero-labels .c{color:var(--acc)}
.hero-card .caption{margin-top:12px;font-size:10.5px}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel);backdrop-filter:blur(6px);transition:all .4s var(--ease)}
.card h3{font-size:17px;margin:12px 0 8px}
.card p:not(.kicker){font-size:12.5px;line-height:1.55;color:var(--muted)}
.card.hov:hover{transform:translateY(-6px);border-color:rgba(var(--acc-rgb),.55);background:var(--panel2);box-shadow:0 18px 40px rgba(0,0,0,.4),0 0 24px rgba(var(--acc-rgb),.12)}
.panel{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--panel);backdrop-filter:blur(6px);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:start}

.diagram svg{width:100%;height:auto;display:block}
.diagram text{fill:#dbe7f5;font-size:12.5px}
.diagram .small{font-size:10.5px}
.diagram .big{font-size:14px}
.t-cyan{fill:#6fe8ff!important}.t-amber{fill:#f6c35a!important}.t-green{fill:#62f0a4!important}.t-or{fill:#ff9d5c!important}
.part{cursor:pointer;transition:opacity .4s,filter .4s;opacity:.72;outline:none}
.part:hover,.part:focus-visible{opacity:1;filter:url(#dglow)}
.part.sel{opacity:1;filter:url(#dglow)}
.part.sel .main{stroke-width:3.6}
.bars rect{animation:barPulse 1.8s infinite ease-in-out;transform-box:fill-box;transform-origin:center}
.bars rect:nth-child(2){animation-delay:.15s}.bars rect:nth-child(3){animation-delay:.3s}.bars rect:nth-child(4){animation-delay:.45s}.bars rect:nth-child(5){animation-delay:.6s}
.pulley-in{transform-box:fill-box;transform-origin:center;animation:pulley 1.6s infinite ease-in-out}
.flow{stroke-dasharray:6 6;animation:dashMove 1s linear infinite}
.dash{animation:dashMove 1.2s linear infinite}
.diagram .caption{margin-top:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:8px 13px;border:1px solid var(--line);border-radius:9px;font-size:12px;background:rgba(14,26,44,.7);transition:all .3s var(--ease)}
.chip:hover{transform:translateY(-2px);border-color:rgba(var(--acc-rgb),.55)}
.chip.active{border-color:var(--acc);color:var(--acc);background:rgba(var(--acc-rgb),.1);box-shadow:0 0 16px rgba(var(--acc-rgb),.25)}
.info{padding:22px}
.info h3{font-size:20px;margin:14px 0 10px}
.info p:last-child{font-size:13.5px;line-height:1.6;color:#aabbd1}
.info.swap>*{animation:swap .5s var(--ease) both}
.info.swap>*:nth-child(2){animation-delay:.05s}.info.swap>*:nth-child(3){animation-delay:.1s}
.note{border-left:3px solid var(--amber);background:rgba(246,195,90,.07);color:#f7cf78;font-size:12.5px;padding:14px 16px;margin-top:14px;line-height:1.55;border-radius:0 8px 8px 0}
.note.small{font-size:11.5px;margin-top:18px}
.note.swap{animation:swap .5s .15s var(--ease) both}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.step{text-align:left;border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);display:flex;flex-direction:column;gap:8px;transition:all .35s var(--ease);position:relative;overflow:hidden}
.step strong{font-size:17px;letter-spacing:-.01em}
.step span:last-child{font-size:12px;color:var(--muted);line-height:1.5}
.step:hover{transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.55)}
.step.active{background:rgba(var(--acc-rgb),.12);border-color:var(--acc);box-shadow:0 0 26px rgba(var(--acc-rgb),.18)}
.step::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--acc)}
.step.active.auto::after{animation:fillbar 7s linear forwards}
.viz{padding:18px 20px}
.canvas-wrap{margin:12px 0;border-radius:10px;background:#070e1a;border:1px solid rgba(130,175,225,.1);height:170px;overflow:hidden}
.canvas-wrap canvas{width:100%;height:100%;display:block}
.viz-cap{font-size:13px;color:#b0c0d5}
.viz.swap .canvas-wrap{animation:swapZoom .5s var(--ease) both}

.sim-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mini-fan{width:36px;height:36px;overflow:visible}
.rpm{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
.rpm b{color:var(--text)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;outline:none;margin:6px 0 18px;background:linear-gradient(90deg,var(--acc) var(--p,44%),rgba(255,255,255,.14) var(--p,44%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.2),0 0 16px rgba(var(--acc-rgb),.7);transition:transform .2s;cursor:grab}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--acc);box-shadow:0 0 14px rgba(var(--acc-rgb),.7)}
.loads{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.load{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(8,16,30,.6);cursor:pointer;font-size:13px;transition:all .3s var(--ease)}
.load:hover{border-color:rgba(var(--acc-rgb),.5);transform:translateX(4px)}
.load input{display:none}
.load .box{width:16px;height:16px;border-radius:3px;background:#fff;display:grid;place-items:center;flex:none;transition:all .25s}
.load .box::after{content:"";width:8px;height:4px;border-left:2px solid #05131c;border-bottom:2px solid #05131c;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .25s var(--ease)}
.load input:checked + .box{background:var(--acc);box-shadow:0 0 12px rgba(var(--acc-rgb),.6)}
.load input:checked + .box::after{transform:rotate(-45deg) scale(1)}
.load:has(input:checked){border-color:rgba(var(--acc-rgb),.55);background:rgba(var(--acc-rgb),.07)}
.load:has(input:focus-visible){outline:3px solid var(--acc);outline-offset:3px}
.load em{font-style:normal;font-size:11px;color:var(--muted)}
.sim-btns{display:flex;gap:10px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.stat{background:rgba(5,10,20,.7);border-radius:10px;padding:14px;border:1px solid rgba(130,175,225,.08)}
.stat b{display:block;font-size:24px;letter-spacing:-.02em;color:var(--acc);font-variant-numeric:tabular-nums}
.stat span{font-size:10.5px;color:var(--muted)}
.state{font-size:18px;margin-bottom:8px;transition:color .4s}
.state.ok{color:var(--green)}.state.warn{color:var(--amber)}.state.bad{color:var(--red)}
.state-text{font-size:13px;line-height:1.6;color:#aabbd1;margin-bottom:14px;min-height:62px}
.bar{height:9px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:8px;position:relative}
.bar i{display:block;height:100%;width:0;border-radius:9px;background:var(--green);color:var(--green);transition:width .6s var(--ease),background .4s;box-shadow:0 0 14px currentColor;position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:sweep 2.2s infinite}
.bar i.warn{background:var(--amber);color:var(--amber)}.bar i.bad{background:var(--red);color:var(--red)}
.bar .mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.55)}
.start-result{font-size:13px;min-height:22px;margin-top:14px;color:var(--muted)}
.start-result.go{color:var(--green)}.start-result.no{color:var(--red)}
.cranking .mini-fan{animation:shakeS .12s linear infinite}

.check .panel h3{margin-bottom:16px}
.plist{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.plist li{display:flex;gap:14px}
.num{flex:none;width:28px;height:28px;border-radius:7px;background:rgba(var(--acc-rgb),.14);color:var(--acc);display:grid;place-items:center;font-weight:700;font-size:13px;border:1px solid rgba(var(--acc-rgb),.3);transition:all .3s}
.plist li:hover .num{background:var(--acc);color:#05131c;transform:scale(1.12) rotate(-6deg)}
.plist strong{font-size:14px}
.plist p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px}
.signs h4{font-size:17px;margin:16px 0 6px}
.signs .kicker+h4{margin-top:12px}
.links{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.7}
.links a:hover{color:#fff}

.quiz{max-width:720px;min-height:380px}
.qprog{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:22px}
.qprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--green));transition:width .6s var(--ease)}
.qq{font-size:20px;font-weight:700;margin:12px 0 18px;letter-spacing:-.01em}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{text-align:left;padding:15px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(10,20,36,.7);font-size:13.5px;transition:all .3s var(--ease);opacity:0;animation:rise .6s var(--ease) both}
.opt:nth-child(1){animation-delay:.05s}.opt:nth-child(2){animation-delay:.12s}.opt:nth-child(3){animation-delay:.19s}
.opt:hover:not(:disabled){border-color:var(--acc);transform:translateX(6px);background:rgba(var(--acc-rgb),.07)}
.opt.right{border-color:var(--green);background:rgba(98,240,164,.12);animation:pop .5s var(--ease) both;opacity:1}
.opt.wrong{border-color:var(--red);background:rgba(255,107,127,.1);animation:shake .45s both;opacity:1}
.opt:disabled{cursor:default}
.fb{margin-top:16px;font-size:13px;line-height:1.55;padding:12px 14px;border-radius:8px;animation:rise .5s var(--ease) both}
.fb.ok{background:rgba(98,240,164,.1);color:#8ff5bf;border-left:3px solid var(--green)}
.fb.no{background:rgba(255,107,127,.1);color:#ff9dab;border-left:3px solid var(--red)}
.qnext{margin-top:16px}
.result{text-align:center;padding:10px 0;animation:rise .7s var(--ease) both}
.ring{width:150px;height:150px;margin:8px auto 18px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .bgc{stroke:rgba(255,255,255,.1)}
.ring .fgc{stroke:var(--acc);stroke-dasharray:377;stroke-dashoffset:377;transition:stroke-dashoffset 1.4s .2s var(--ease);filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.6))}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;letter-spacing:-.03em}
.result h3{font-size:22px;margin-bottom:6px}
.result p{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.result .btns{justify-content:center}

.bottombar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 80px;min-height:64px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);animation:dropIn .8s .2s var(--ease) both;flex:0 0 auto}
.bb-left{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;min-width:0}
.legal-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.arrows{justify-self:end;display:flex;gap:8px;align-items:center}
.admin-link{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 6px;transition:color .3s}
.admin-link:hover{color:var(--acc)}
.toast{position:fixed;top:14px;left:50%;transform:translate(-50%,-80px);background:rgba(10,18,32,.95);border:1px solid var(--line);padding:10px 22px;border-radius:12px;font-size:12px;z-index:70;transition:transform .5s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{transform:translate(-50%,0)}

@keyframes dropIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.98);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes slideInR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes slideInL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes slideOutL{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-70px)}}
@keyframes slideOutR{from{opacity:1;transform:none}to{opacity:0;transform:translateX(70px)}}
@keyframes shine{to{background-position:-250% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes spinAng{to{--ang:360deg}}
@keyframes blink{50%{opacity:.35}}
@keyframes segPulse{0%,100%{opacity:.45;filter:brightness(.8)}50%{opacity:1;filter:brightness(1.35)}}
@keyframes pulseBtn{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.45)}60%{box-shadow:0 0 0 12px rgba(var(--acc-rgb),0)}}
@keyframes barPulse{0%,100%{transform:scaleY(.85);opacity:.7}50%{transform:scaleY(1);opacity:1}}
@keyframes pulley{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}
@keyframes dashMove{to{stroke-dashoffset:-24}}
@keyframes lineMove{to{background-position:12px 0}}
@keyframes plunger{0%,30%{transform:translateX(0)}45%,80%{transform:translateX(-14px)}100%{transform:translateX(0)}}
@keyframes swap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes swapZoom{from{opacity:.3;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes fillbar{to{width:100%}}
@keyframes sweep{to{transform:translateX(100%)}}
@keyframes pop{0%{transform:scale(.97)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes shakeS{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}

@media (max-width:980px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;padding:0 18px}
  .switch{justify-self:center}
  .sw{padding:8px 12px}
  .tabs,.bottombar{padding-left:18px;padding-right:18px}
  .slide{padding:20px 18px 30px}
  .hero,.two,.hub-cards{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .tabs .subtitle,.hint{display:none}
  .bottombar{grid-template-columns:1fr auto}
  .cycle{flex-wrap:wrap;gap:6px}
}
@media (max-width:620px){
  .sw span{display:none}
  .steps{grid-template-columns:1fr}
  .stats{gap:6px}.stat{padding:10px}.stat b{font-size:18px}
  .logo{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  body{overflow:visible;background:#fff;color:#000}
  .app{display:block;height:auto}
  .topbar,.tabs,.bottombar,#bg,.bg-glow{display:none}
  .slide{position:static;visibility:visible;opacity:1;break-after:page;overflow:visible}
  .slide [data-anim]{opacity:1}
  p,.caption{color:#333!important}
}

.hubcard{cursor:pointer;outline:none}
.hubcard:focus-visible{outline:3px solid rgb(var(--c));outline-offset:4px}
.hubcard .prog{display:flex;align-items:center;gap:8px}
.hubcard .prog small{font-size:10.5px;color:var(--muted)}
.mini-fan{color:var(--acc)}
.fan-b{transform-box:fill-box;transform-origin:center}
.hubsvg{display:block}
.hubcard .vis .tiltbox{height:100%;display:grid;place-items:center}

body[data-topic="battery"]{--acc:#5eea9b;--acc-rgb:94,234,155}
body[data-topic="motor"]{--acc:#b48cff;--acc-rgb:180,140,255}
body[data-topic="battery"] .hero-card{background:radial-gradient(circle at 50% 45%,rgba(30,110,70,.3),rgba(10,18,32,.85) 70%)}
body[data-topic="motor"] .hero-card{background:radial-gradient(circle at 50% 45%,rgba(90,60,150,.32),rgba(10,18,32,.85) 70%)}
.hubcard.battery{--c:94,234,155}
.hubcard.motor{--c:180,140,255}
.node.battery{border-color:rgba(94,234,155,.5);color:#5eea9b}
.node.motor{border-color:rgba(180,140,255,.5);color:#b48cff}
.node[data-open]{cursor:pointer}
.node[data-open]:hover{background:rgba(255,255,255,.06)}
.t-red{fill:#ff9aa8!important}
.t-vio{fill:#c6a8ff!important}
.bub{transform-box:fill-box;animation:bubble 3s infinite linear;opacity:0}
.wave{animation:waveMove 2.2s linear infinite}
.sw-bolt{animation:blink 1.4s infinite}
.sw-piston{animation:pist 1s infinite ease-in-out}
.hub-cards{grid-template-columns:repeat(4,1fr);gap:16px}
.hubcard{padding:18px;border-radius:20px}
.hubcard h3{font-size:24px}
.hubcard p{font-size:12.5px}
.hubcard .vis{height:150px}
.hubcard .tags span{font-size:10px;padding:3px 8px}
.slide:has(.hub-cards) .wrap{max-width:1240px}
@keyframes bubble{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-105px);opacity:0}}
@keyframes waveMove{to{transform:translateX(-40px)}}
@keyframes pist{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@media (max-width:1250px){.hub-cards{grid-template-columns:1fr 1fr}.hubcard .vis{height:170px}}
@media (max-width:1180px){.sw span{display:none}.sw{padding:9px 14px}}
@media (max-width:760px){.hub-cards{grid-template-columns:1fr}}

.gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#0e1c30,#060b16 70%);transition:opacity .5s,visibility .5s}
.gate.gone{opacity:0;visibility:hidden}
.gate-box{width:min(92vw,380px);text-align:center;padding:34px 30px;border:1px solid var(--line);border-radius:20px;background:rgba(16,28,47,.8);backdrop-filter:blur(10px);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gate-logo{font-weight:800;letter-spacing:.16em;font-size:15px;margin-bottom:6px}
.gate-logo span{color:var(--acc)}
.gate-sub{font-size:12px;color:var(--muted);margin-bottom:22px}
.gate input{width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--line);background:rgba(8,16,30,.8);color:var(--text);font-size:16px;text-align:center;letter-spacing:.2em;outline:none;transition:border-color .3s}
.gate input:focus{border-color:var(--acc)}
.gate button{width:100%;margin-top:12px;padding:13px;border-radius:10px;background:var(--acc);color:#05131c;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:transform .2s,box-shadow .3s}
.gate button:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--acc-rgb),.4)}
.gate-msg{min-height:20px;margin-top:14px;font-size:12.5px;color:var(--red)}
.gate.shake{animation:shake .45s}

body[data-topic="brake"]{--acc:#ff5c7a;--acc-rgb:255,92,122}
body[data-topic="turbo"]{--acc:#ffb020;--acc-rgb:255,176,32}
body[data-topic="kompressor"]{--acc:#ffd23f;--acc-rgb:255,210,63}
body[data-topic="kuehler"]{--acc:#4da3ff;--acc-rgb:77,163,255}
body[data-topic="drossel"]{--acc:#2dd4bf;--acc-rgb:45,212,191}
body[data-topic="klima"]{--acc:#7dd3fc;--acc-rgb:125,211,252}
body[data-topic="hdp"]{--acc:#f472b6;--acc-rgb:244,114,182}
body[data-topic="agr"]{--acc:#a3e635;--acc-rgb:163,230,53}
.hubcard.brake{--c:255,92,122}
.hubcard.turbo{--c:255,176,32}
.hubcard.kompressor{--c:255,210,63}
.hubcard.kuehler{--c:77,163,255}
.hubcard.drossel{--c:45,212,191}
.hubcard.klima{--c:125,211,252}
.hubcard.hdp{--c:244,114,182}
.hubcard.agr{--c:163,230,53}
.node.brake{border-color:rgba(255,92,122,.5);color:#ff5c7a}
.node.turbo{border-color:rgba(255,176,32,.5);color:#ffb020}
.node.kompressor{border-color:rgba(255,210,63,.5);color:#ffd23f}
.node.kuehler{border-color:rgba(77,163,255,.5);color:#4da3ff}
.node.drossel{border-color:rgba(45,212,191,.5);color:#2dd4bf}
.node.klima{border-color:rgba(125,211,252,.5);color:#7dd3fc}
.node.hdp{border-color:rgba(244,114,182,.5);color:#f472b6}
.node.agr{border-color:rgba(163,230,53,.5);color:#a3e635}
.switch{justify-self:center;overflow-x:auto;max-width:100%;scrollbar-width:auto;scrollbar-color:rgba(130,175,225,.55) rgba(10,18,32,.4);cursor:grab}
.switch:active{cursor:grabbing}
.switch::-webkit-scrollbar{height:10px}
.switch::-webkit-scrollbar-track{background:rgba(10,18,32,.4);border-radius:6px}
.switch::-webkit-scrollbar-thumb{background:rgba(130,175,225,.55);border-radius:6px}
.switch::-webkit-scrollbar-thumb:hover{background:rgba(130,175,225,.75)}
.sw{flex:none}
.sw.active{color:var(--acc);background:rgba(var(--acc-rgb),.14);border-radius:10px}
.switch .thumb{display:none}
.hub-cards{grid-template-columns:repeat(4,1fr);gap:14px}
.hubcard{padding:16px;border-radius:18px}
.hubcard h3{font-size:21px}
.hubcard p{font-size:12px}
.hubcard .vis{height:130px}
.hubcard .tags span{font-size:9.5px;padding:3px 7px}
.slide:has(.hub-cards) .wrap{max-width:1400px}
@media (max-width:1250px){.hub-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.hub-cards{grid-template-columns:1fr 1fr}.hubcard .vis{height:150px}}
@media (max-width:560px){.hub-cards{grid-template-columns:1fr}}

.cookie{position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);animation:fadeIn .3s ease}
.cookie[hidden]{display:none}
.cookie-box{width:min(92vw,440px);padding:26px;border:1px solid var(--line);border-radius:18px;background:rgba(16,28,47,.96);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cookie-title{font-size:16px;font-weight:700;margin-bottom:10px}
.cookie-text{font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:18px}
.cookie-text + .cookie-text{margin-top:-10px}
.cookie-legal{font-size:12px;line-height:1.5;margin:-6px 0 18px;color:var(--muted)}
.cookie-legal a{color:var(--muted);border-bottom:1px solid transparent;text-decoration:none}
.cookie-legal a:hover{color:var(--acc);border-bottom-color:rgba(var(--acc-rgb),.3)}
.cookie-opt{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--text);margin-bottom:18px;cursor:pointer}
.cookie-opt input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--acc);cursor:pointer}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.sw-rev{animation-direction:reverse}
.sw-push{animation:pushX 1.5s infinite ease-in-out}
@keyframes pushX{0%,100%{transform:translateX(3px)}50%{transform:translateX(-4px)}}
.sim-art{margin:-4px 0 18px;border-radius:12px;background:radial-gradient(circle at 50% 45%,rgba(var(--acc-rgb),.07),rgba(7,14,26,.9) 72%);border:1px solid rgba(130,175,225,.1);padding:6px 4px}
.sim-art svg{display:block;width:100%;height:auto;max-height:250px;margin:0 auto}
.diagram svg text{font-family:"Segoe UI",sans-serif}
@media (max-width:620px){
  h1{font-size:clamp(34px,9.6vw,46px);overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
  h1 .grad{max-width:100%;overflow-wrap:anywhere;hyphens:auto}
  h2{overflow-wrap:anywhere;hyphens:auto}
  .lead,.hero-text{overflow-wrap:break-word}
}
.hubcard .vis{height:160px}
@media (max-width:620px){
  .panel.diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram svg{min-width:560px}
}
body[data-topic="hall"]{--acc:#5eead4;--acc-rgb:94,234,212}
body[data-topic="ind"]{--acc:#fb923c;--acc-rgb:251,146,60}
.hubcard.hall{--c:94,234,212}
.hubcard.ind{--c:251,146,60}
.top-actions{display:flex;gap:8px;justify-self:end;align-items:center;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.suggest{position:fixed;inset:0;z-index:950;display:grid;place-items:center;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);animation:fadeIn .25s ease;padding:16px;overflow-y:auto}
.suggest[hidden]{display:none}
.suggest-box{width:min(94vw,520px);max-height:94vh;overflow-y:auto;padding:26px;border:1px solid var(--line);border-radius:18px;background:rgba(16,28,47,.97);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sug-l{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);margin:12px 0 6px}
.sug-f{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(8,16,30,.85);color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .25s}
.sug-f:focus{border-color:var(--acc)}
select.sug-f{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
select.sug-f option{background:#101c2f;color:var(--text)}
textarea.sug-f{resize:vertical;min-height:110px;line-height:1.5}
.sug-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sug-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sug-count{font-size:11px;color:var(--muted);text-align:right;margin-top:6px}
.sug-status{min-height:20px;font-size:13px;margin:8px 0 14px;color:var(--muted)}
.sug-status.go{color:var(--green)}.sug-status.no{color:var(--red)}
@media (max-width:620px){.sug-row{grid-template-columns:1fr}.top-actions .btn{padding:8px 10px}}
@media (max-width:620px){
  .topbar{grid-template-columns:auto minmax(0,1fr);height:auto;padding:10px 18px;row-gap:8px}
  .top-actions{grid-column:2;grid-row:1}
  .switch{grid-column:1/-1;grid-row:2;justify-self:stretch}
}
#sugBtn{border:1.5px solid var(--acc);color:var(--acc);background:rgba(var(--acc-rgb),.1);box-shadow:0 0 14px rgba(var(--acc-rgb),.28);font-weight:700}
#sugBtn:hover:not(:disabled){background:rgba(var(--acc-rgb),.2);border-color:var(--acc);box-shadow:0 0 22px rgba(var(--acc-rgb),.45)}

/* ===== Zusammenspiel / Wirkungsdiagramm ===== */
.cycle-box{padding:18px 22px 22px}
.web{margin-top:10px}
.web-scroll{overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,rgba(30,70,110,.25),rgba(7,14,26,.7) 75%)}
.web-svg{display:block;width:100%;min-width:760px;height:auto;max-height:calc(100vh - 300px);min-height:430px;user-select:none}
.wedge{--c:#8fa4bf;pointer-events:none}
.wedge .wline{fill:none;stroke:var(--c);stroke-width:1.6;stroke-opacity:.38;stroke-dasharray:5 6;animation:webFlow 1.1s linear infinite;transition:stroke-opacity .3s,stroke-width .3s}
.wedge .wtip{fill:var(--c);fill-opacity:.55;transition:fill-opacity .3s}
.wedge .wlab{opacity:0;transition:opacity .3s}
.wedge .wlab rect{fill:#0a1626;stroke:var(--c);stroke-opacity:.7}
.wedge .wlab text{fill:var(--c);font-size:11px;font-weight:700}
.web.has-sel .wedge .wline{stroke-opacity:.07}
.web.has-sel .wedge .wtip{fill-opacity:.07}
.web.has-sel .wedge.on .wline{stroke-opacity:1;stroke-width:2.6}
.web.has-sel .wedge.on .wtip{fill-opacity:1}
.web.has-sel .wedge.on .wlab{opacity:1}
.web:not(.has-sel) .wedge .wline{stroke-opacity:.3}
.wnode{--c:#4fe3ff;cursor:pointer;outline:none;transition:opacity .3s}
.wnode rect{fill:rgba(10,20,36,.92);stroke:var(--c);stroke-opacity:.55;stroke-width:1.4;transition:all .3s}
.wnode .wn{fill:var(--c);font-size:14px;font-weight:700}
.wnode.big .wn{font-size:18px}
.wnode .wr{fill:var(--muted);font-size:10.5px}
.wnode:hover rect,.wnode:focus-visible rect{stroke-opacity:1;fill:rgba(24,42,68,.95);filter:drop-shadow(0 0 8px var(--c))}
.wnode.sel rect{stroke-opacity:1;stroke-width:2.6;fill:rgba(24,42,68,.98);filter:drop-shadow(0 0 12px var(--c))}
.web.has-sel .wnode:not(.sel):not(.rel){opacity:.28}
.web-panel{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(10,20,36,.6);min-height:64px}
.web-hint{font-size:13.5px;line-height:1.65;color:var(--muted)}
.web-hint b{color:var(--text)}
.web-head{--c:#4fe3ff;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.web-head>div{flex:1}
.web-head h3{font-size:22px;letter-spacing:-.02em;color:var(--c)}
.web-head p{font-size:12.5px;color:var(--muted)}
.web-dot{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c)}
.web-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.web-cols h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.web-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.web-list li{--c:#4fe3ff;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;padding:9px 12px;border-radius:10px;border:1px solid var(--line);border-left:3px solid var(--c);background:rgba(255,255,255,.02)}
.web-list li.none{display:block;border-left-color:var(--line);color:var(--muted);font-size:12.5px}
.wl-n{font-weight:700;font-size:13px;color:var(--c)}
.wl-k{font-size:11px;color:var(--muted);justify-self:end;text-transform:uppercase;letter-spacing:.08em}
.wl-t{grid-column:1/-1;font-size:12.5px;line-height:1.55;color:var(--text);opacity:.85}
@keyframes webFlow{to{stroke-dashoffset:-11}}
@media (max-width:760px){.web-cols{grid-template-columns:1fr}.web-head{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.wedge .wline{animation:none}}

/* ===== Variowandler & Getriebe ===== */
body[data-topic="wandler"]{--acc:#fb7185;--acc-rgb:251,113,133}
body[data-topic="getriebe"]{--acc:#e2c08d;--acc-rgb:226,192,141}
.hubcard.wandler{--c:251,113,133}
.hubcard.getriebe{--c:226,192,141}
.node.wandler{border-color:rgba(251,113,133,.5);color:#fb7185}
.node.getriebe{border-color:rgba(226,192,141,.5);color:#e2c08d}

/* ===== Bremse & Fahrwerk ===== */
body[data-topic="bremse"]{--acc:#ef4444;--acc-rgb:239,68,68}
body[data-topic="fahrwerk"]{--acc:#818cf8;--acc-rgb:129,140,248}
.hubcard.bremse{--c:239,68,68}
.hubcard.fahrwerk{--c:129,140,248}
.node.bremse{border-color:rgba(239,68,68,.5);color:#ef4444}
.node.fahrwerk{border-color:rgba(129,140,248,.5);color:#818cf8}

/* ===== Werkzeuge: Hub-Filter, Gesamt-Quiz, Glossar, Fehlersuche ===== */
.hubcard[hidden]{display:none}
.hub-filter{margin:0 0 18px}
.tools-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 22px}
.toolcard{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:all .35s var(--ease)}
.toolcard b{font-size:15px;color:var(--acc)}
.toolcard span{font-size:12.5px;color:var(--muted);line-height:1.5}
.toolcard:hover{transform:translateY(-4px);border-color:rgba(var(--acc-rgb),.6);box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 22px rgba(var(--acc-rgb),.14)}
.gl-in{margin:8px 0 0}
.gl-res{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.gl-item{padding:16px 18px}
.gl-item h3{margin:6px 0 6px;font-size:16px}
.gl-item .btn{margin-top:10px}
.fs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.fs-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(10,20,36,.7);transition:all .3s var(--ease)}
.fs-card b{font-size:14.5px}
.fs-card span{font-size:12px;color:var(--muted);line-height:1.5}
.fs-card:hover{transform:translateY(-3px);border-color:rgba(var(--acc-rgb),.6)}
.fs-path{list-style:none;margin:8px 0 4px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.fs-path b{color:var(--acc);margin-left:6px}
.fs-chk{padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.55;color:#c9d6e4}
@media (max-width:900px){.tools-row,.fs-grid{grid-template-columns:1fr}.gl-res{grid-template-columns:1fr}}
body[data-topic="reifen"]{--acc:#a1a1aa;--acc-rgb:161,161,170}
.hubcard.reifen{--c:161,161,170}
.node.reifen{border-color:rgba(161,161,170,.5);color:#a1a1aa}
body[data-topic="kupplung"]{--acc:#e879f9;--acc-rgb:232,121,249}
.hubcard.kupplung{--c:232,121,249}
.node.kupplung{border-color:rgba(232,121,249,.5);color:#e879f9}
body[data-topic="diff"]{--acc:#fcd34d;--acc-rgb:252,211,77}
.hubcard.diff{--c:252,211,77}
.node.diff{border-color:rgba(252,211,77,.5);color:#fcd34d}
body[data-topic="abs"]{--acc:#fdba74;--acc-rgb:253,186,116}
.hubcard.abs{--c:253,186,116}
.node.abs{border-color:rgba(253,186,116,.5);color:#fdba74}
body[data-topic="lenkung"]{--acc:#67e8f9;--acc-rgb:103,232,249}
.hubcard.lenkung{--c:103,232,249}
.node.lenkung{border-color:rgba(103,232,249,.5);color:#67e8f9}
body[data-topic="abgas"]{--acc:#a8a29e;--acc-rgb:168,162,158}
.hubcard.abgas{--c:168,162,158}
.node.abgas{border-color:rgba(168,162,158,.5);color:#a8a29e}
body[data-topic="zuend"]{--acc:#fde047;--acc-rgb:253,224,71}
.hubcard.zuend{--c:253,224,71}
.node.zuend{border-color:rgba(253,224,71,.5);color:#fde047}
body[data-topic="einspritz"]{--acc:#f9a8d4;--acc-rgb:249,168,212}
.hubcard.einspritz{--c:249,168,212}
.node.einspritz{border-color:rgba(249,168,212,.5);color:#f9a8d4}
body[data-topic="kuehlkreis"]{--acc:#5eead4;--acc-rgb:94,234,212}
.hubcard.kuehlkreis{--c:94,234,212}
.node.kuehlkreis{border-color:rgba(94,234,212,.5);color:#5eead4}
body[data-topic="oel"]{--acc:#d6a756;--acc-rgb:214,167,86}
.hubcard.oel{--c:214,167,86}
.node.oel{border-color:rgba(214,167,86,.5);color:#d6a756}
body[data-topic="steuertrieb"]{--acc:#c4b5fd;--acc-rgb:196,181,253}
.hubcard.steuertrieb{--c:196,181,253}
.node.steuertrieb{border-color:rgba(196,181,253,.5);color:#c4b5fd}
body[data-topic="epb"]{--acc:#fca5a5;--acc-rgb:252,165,165}
.hubcard.epb{--c:252,165,165}
.node.epb{border-color:rgba(252,165,165,.5);color:#fca5a5}
body[data-topic="eantrieb"]{--acc:#4ade80;--acc-rgb:74,222,128}
.hubcard.eantrieb{--c:74,222,128}
.node.eantrieb{border-color:rgba(74,222,128,.5);color:#4ade80}

/* ===== Schaltzeichen & Klemmen ===== */
.tools-row{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sz-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.sz-card h3{margin:4px 0 6px;font-size:15px}
.sz-svg{height:76px;display:grid;place-items:center;border-radius:10px;background:rgba(8,16,30,.7);border:1px solid var(--line);color:var(--acc)}
.sz-svg svg{width:130px;height:66px}
.sz-qsvg{display:grid;place-items:center;height:110px;margin:6px 0 10px;border-radius:12px;background:rgba(8,16,30,.7);border:1px solid var(--line);color:var(--acc)}
.sz-qsvg svg{width:200px;height:100px}
.sz-h{margin:18px 0 8px;font-size:14px;letter-spacing:.04em;color:var(--acc)}
.sz-tab{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px}
.sz-tab th,.sz-tab td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.sz-tab thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sz-tab tbody th{width:104px;font-weight:400}
.sz-tab.wide tbody th{width:56px}
.sz-k{display:inline-block;min-width:44px;text-align:center;padding:3px 8px;border-radius:6px;border:1px solid rgba(var(--acc-rgb),.5);color:var(--acc);font-weight:700;background:rgba(var(--acc-rgb),.08)}
.sz-lock{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sz-pins{display:flex;gap:8px;margin:10px 0}
.sz-pin{padding:6px 12px;border-radius:8px;border:1px solid var(--line);color:var(--muted);font-weight:700;opacity:.5}
.sz-pin.on{opacity:1;color:#05131c;background:var(--acc);border-color:var(--acc);box-shadow:0 0 14px rgba(var(--acc-rgb),.5)}
/* 2D-Zündschloss & Keyless Go */
.sz-zs{display:grid;grid-template-columns:minmax(240px,1fr) 1fr;gap:12px;align-items:start}
.sz-dialcard{display:flex;flex-direction:column;gap:12px;align-items:center}
.sz-dial{width:100%;max-width:260px;display:block}
.sz-ring{fill:none;stroke:var(--line);stroke-width:2}
.sz-barrel{fill:rgba(8,16,30,.9);stroke:var(--line);stroke-width:2}
.sz-hub{fill:var(--acc);opacity:.55}
.sz-key{transition:transform .4s cubic-bezier(.34,1.3,.5,1)}
.sz-key rect,.sz-key circle{fill:var(--acc);stroke:none}
.sz-poslbl{fill:var(--muted);font-size:12px;font-weight:700}
.sz-poslbl.on{fill:var(--acc)}
.sz-posbtns,.sz-kgbtns{flex-wrap:wrap;justify-content:center}
.sz-kgsvg{width:100%;max-width:330px;display:block}
.sz-fob rect{fill:rgba(8,16,30,.95);stroke:var(--line);stroke-width:2}
.sz-fob circle,.sz-fob path{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.sz-fob .sz-fobled{fill:var(--acc);stroke:none}
.sz-startring{fill:rgba(8,16,30,.7);stroke:var(--line);stroke-width:2}
.sz-startbtn{fill:rgba(var(--acc-rgb),.08);stroke:var(--line);stroke-width:2;transition:fill .3s,stroke .3s}
.sz-power{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.sz-kgsvg.on .sz-startbtn{fill:var(--acc);stroke:var(--acc)}
.sz-kgsvg.on .sz-power{stroke:#05131c}
.sz-pedal rect{fill:none;stroke:var(--line);stroke-width:3}
.sz-pedal path{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
.sz-pedal.on rect{fill:var(--acc);stroke:var(--acc)}
.sz-pedal.on path{stroke:var(--acc)}
.sz-clbl{fill:var(--muted);font-size:12px;font-weight:600}
.sz-fuses{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.sz-fuse{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:10px;background:rgba(8,16,30,.6)}
.sz-fuse small{color:var(--muted)}
.sz-fchip{display:inline-block;width:34px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.4)}
.sz-fchip.sm{width:22px;height:11px;vertical-align:middle}
.sz-list{padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.55;color:#c9d6e4}
.sz-relsvg{width:100%;max-width:420px;display:block;margin:6px 0 10px}
@media (max-width:900px){.sz-grid{grid-template-columns:1fr 1fr}.sz-lock{grid-template-columns:1fr}.sz-zs{grid-template-columns:1fr}}
@media (max-width:620px){.sz-grid{grid-template-columns:1fr}.sz-tab th,.sz-tab td{padding:6px}}
.sz-body{overflow-x:auto}
.sz-tab td{overflow-wrap:anywhere}

/* ===== Sprachfeld ===== */
.lang-sel{font:inherit;font-size:12.5px;font-weight:600;color:var(--text);padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(22,38,62,.8);cursor:pointer;outline:none;transition:border-color .25s}
.lang-sel:hover,.lang-sel:focus-visible{border-color:rgba(var(--acc-rgb),.7)}
.lang-sel option{background:#0f1c2f;color:#e8f1fb}
@media (max-width:620px){.lang-sel{padding:8px 6px;font-size:12px}}