@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
:root{--bg:#050a08;--board:#0c281f;--board2:#071c16;--copper:#b68436;--gold:#ffc75b;--lime:#adff68;--cyan:#4be4dc;--ink:#ecfff9;--muted:#6b9083;--line:rgba(102,172,144,.17);--step-time:5.4s;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Vazirmatn,Tahoma,sans-serif}button,a{font:inherit;color:inherit}button{cursor:pointer}.circuit-story{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,#11382a 0,transparent 42%),#050a08}.circuit-story:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#d7fff903 5px);z-index:20;pointer-events:none}.noise{position:absolute;inset:0;opacity:.16;background-image:radial-gradient(#9ae2c6 0.6px,transparent .7px);background-size:7px 7px;mask-image:linear-gradient(to bottom,black,transparent 75%);pointer-events:none}#circuitCanvas{position:absolute;inset:0;z-index:4;pointer-events:none}
.topbar{height:74px;padding:0 4vw;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:30;background:#050a08b8;backdrop-filter:blur(15px)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand>i{width:34px;height:34px;border:1px solid #406c58;border-radius:6px;display:flex;align-items:end;justify-content:center;gap:3px;padding:8px;transform:rotate(45deg)}.brand>i b{display:block;width:3px;background:var(--lime);box-shadow:0 0 8px var(--lime);animation:eq .7s infinite alternate;transform:rotate(-45deg)}.brand>i b:first-child{height:7px}.brand>i b:nth-child(2){height:15px;animation-delay:-.3s}.brand>i b:last-child{height:10px;animation-delay:-.5s}.brand>span{display:grid;font-weight:800;font-size:15px;line-height:1.15}.brand strong{color:var(--lime)}.brand small{font-size:7px;color:var(--muted);font-weight:500}.system-state{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.5px;color:#78998d}.system-state i{width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 12px var(--lime);animation:pulse 1.3s infinite}.system-state b{color:var(--lime);border:1px solid #adff6830;background:#adff680c;padding:4px 8px;border-radius:20px}.back{display:flex;align-items:center;gap:9px;text-decoration:none;color:#79988d;font-size:9px}.back b{font-size:14px;width:29px;height:29px;border:1px solid var(--line);display:grid;place-items:center;border-radius:50%}
.intro{position:absolute;right:4.5vw;top:105px;z-index:9;max-width:340px}.intro>span{font-size:8px;color:var(--lime);letter-spacing:1px}.intro h1{font-size:clamp(34px,4vw,62px);font-weight:300;margin:4px 0;letter-spacing:-3px}.intro h1 em{font-style:normal;font-weight:900}.intro p{font-size:10px;color:#769689;line-height:2;max-width:320px;margin:0;transition:.35s}
.board{position:absolute;left:50%;top:52%;width:min(980px,80vw);height:min(610px,68vh);transform:translate(-50%,-50%);border:2px solid #35664f;border-radius:32px;background:radial-gradient(circle at 44% 50%,rgba(42,112,78,.18),transparent 24%),linear-gradient(135deg,rgba(12,51,38,.98),rgba(4,25,18,.99)),repeating-linear-gradient(45deg,transparent 0 20px,#73c39f08 21px 22px);box-shadow:0 50px 100px #000b,inset 0 0 70px #0008,inset 0 0 0 1px #6bc09518,0 0 0 8px #06110e;z-index:3;overflow:hidden}.board:before,.board:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#030806;border:3px solid #477a63;box-shadow:inset 2px 2px #000,0 0 0 2px #0a1b14}.board:before{left:15px;top:15px}.board:after{right:15px;bottom:15px}.board-marks{position:absolute;left:35px;top:23px;display:grid;color:#5b9076;font:600 6px/1.8 monospace;letter-spacing:1.5px;direction:ltr}.anchor{z-index:6}
.power-input{position:absolute;left:38px;top:50%;transform:translateY(-50%);display:grid;justify-items:center;gap:5px}.socket{width:74px;height:58px;border:2px solid #65786e;background:#0a110e;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:13px;box-shadow:0 0 0 4px #020504}.socket i{font-style:normal;width:20px;height:20px;border:2px solid #64766e;border-radius:50%;display:grid;place-items:center;font:bold 10px monospace}.socket i:first-child{color:var(--gold);border-color:#a77e3c}.power-input>span{font-size:7px;color:#6f9184}.power-input>b{font:700 11px monospace;color:var(--gold);text-shadow:0 0 8px var(--gold)}
.core{position:absolute;left:43%;top:50%;transform:translate(-50%,-50%);width:220px;height:220px;display:grid;place-items:center}.core-ring{position:absolute;border-radius:50%;border:1px solid #6ab38e37;inset:0}.ring-a{border-style:dashed;animation:spin 12s linear infinite}.ring-b{inset:22px;border-color:#adff6833;animation:spin 8s linear infinite reverse}.processor{width:126px;height:126px;background:linear-gradient(145deg,#17201c,#050806);border:2px solid #47564f;box-shadow:0 0 0 7px #0b1813,0 0 45px #adff6811;display:grid;place-content:center;text-align:center;position:relative;transform:rotate(45deg)}.processor:before,.processor:after{content:"";position:absolute;left:-12px;right:-12px;top:12px;height:4px;border-left:11px dotted #b99f64;border-right:11px dotted #b99f64}.processor:after{top:auto;bottom:12px}.processor>*{transform:rotate(-45deg)}.processor small{font:5px monospace;color:#75887f}.processor b{font:700 11px monospace;color:#9cb6aa}.processor span{font:6px monospace;color:#53665d}.processor i{position:absolute;width:7px;height:7px;border-radius:50%;background:#26332c;right:18px;bottom:18px}.core-status{position:absolute;bottom:-8px;background:#07100d;border:1px solid #315141;padding:5px 10px;border-radius:20px;display:flex;align-items:center;gap:6px;font-size:7px;color:#719285}.core-status i{width:5px;height:5px;border-radius:50%;background:#35483f}.story[data-step]:not([data-step="0"]) .processor i,.story[data-step]:not([data-step="0"]) .core-status i{background:var(--lime);box-shadow:0 0 12px var(--lime)}.story[data-step]:not([data-step="0"]) .processor{box-shadow:0 0 0 7px #0b1813,0 0 55px #adff6830}
.service{position:absolute;width:260px;height:106px;background:linear-gradient(115deg,#0c211a,#071510);border:1px solid #315342;border-radius:12px;color:var(--ink);text-align:right;padding:12px 15px;display:flex;align-items:center;gap:13px;overflow:hidden;opacity:.45;filter:saturate(.3);transition:.6s var(--ease);box-shadow:0 14px 28px #0005}.service:hover{opacity:.78;transform:translateY(-3px)}.service.active{opacity:1;filter:none;border-color:#79c49c;box-shadow:0 0 0 1px #adff6825,0 18px 40px #0009,0 0 35px #adff6812}.service.done{opacity:.72;filter:none}.service .port{position:absolute;left:5px;top:5px;font:5px monospace;color:#547363}.service .copy{display:grid;z-index:3}.service .copy small{font:6px monospace;color:#5e8875;direction:ltr;text-align:right}.service .copy b{font-size:11px;margin:2px 0}.service .copy span{font-size:7px;color:#658577}.visual{width:66px;height:66px;flex:0 0 66px;position:relative}.service-speaker{right:30px;top:38px}.service-monitor{right:30px;top:50%;transform:translateY(-50%)}.service-monitor:hover{transform:translateY(calc(-50% - 3px))}.service-monitor.active{transform:translateY(-50%)}.service-audio{right:30px;bottom:38px}.service-radio{left:33px;top:35px}.service-tint{left:33px;bottom:35px}
.speaker-visual{border-radius:50%;background:#050807;border:5px solid #26362f;box-shadow:inset 0 0 0 4px #0e1713}.speaker-visual:before{content:"";position:absolute;inset:10px;border:6px solid #344c40;border-radius:50%;background:#080c0a}.speaker-visual i{position:absolute;inset:24px;border-radius:50%;background:#52685d;z-index:2}.speaker-visual b,.speaker-visual em{position:absolute;inset:6px;border:1px solid #adff6844;border-radius:50%;opacity:0}.active .speaker-visual b{animation:soundRing 1.2s infinite}.active .speaker-visual em{animation:soundRing 1.2s .4s infinite}.signal-bars{position:absolute;left:10px;bottom:8px;display:flex;align-items:end;gap:2px}.signal-bars i{width:2px;height:3px;background:var(--lime)}.active .signal-bars i{animation:eq .5s infinite alternate}.active .signal-bars i:nth-child(2){animation-delay:-.2s}.active .signal-bars i:nth-child(3){animation-delay:-.4s}.active .signal-bars i:nth-child(4){animation-delay:-.1s}
.monitor-visual{border:4px solid #3a4a43;border-radius:7px;padding:4px;background:#050807}.monitor-visual>div{height:43px;background:linear-gradient(135deg,#103e46,#09241f);position:relative;overflow:hidden}.monitor-visual>div:before{content:"";position:absolute;inset:7px;background:linear-gradient(140deg,#3bcfc4,#224b57);clip-path:polygon(0 70%,32% 42%,52% 59%,77% 22%,100% 50%,100% 100%,0 100%)}.monitor-visual em{position:absolute;width:19px;height:3px;background:#424f49;bottom:3px;left:20px}.scan-beam{position:absolute;left:11px;right:11px;top:0;height:2px;background:var(--cyan);box-shadow:0 0 9px var(--cyan);opacity:0}.active .scan-beam{opacity:1;animation:scanCard 1.6s linear infinite}
.audio-visual{background:#0b100e;border:3px solid #34473e;border-radius:15px}.audio-visual i{position:absolute;width:33px;height:33px;border:4px solid #35483f;border-radius:50%;left:14px;bottom:6px}.audio-visual i:nth-child(2){width:16px;height:16px;left:23px;top:5px;border-width:3px}.audio-visual b{position:absolute;width:5px;height:5px;background:var(--lime);right:7px;top:7px;border-radius:50%}.bt-wave i{position:absolute;border:1px solid var(--cyan);border-radius:50%;width:30px;height:30px;left:18px;top:38px;opacity:0}.active .bt-wave i{animation:soundRing 1.4s infinite}.active .bt-wave i:nth-child(2){animation-delay:.35s}.active .bt-wave i:nth-child(3){animation-delay:.7s}
.radio-visual{background:linear-gradient(#6d5841,#352a20);border:4px solid #241b14;border-radius:5px}.radio-visual:before{content:"";position:absolute;left:7px;right:7px;top:7px;height:10px;border:1px solid #b5955b;background:#211d18}.radio-visual:after{content:"";position:absolute;left:13px;right:13px;bottom:11px;height:26px;background:repeating-linear-gradient(0deg,#1c1713 0 2px,#796347 3px 4px)}.radio-visual i,.radio-visual em{position:absolute;bottom:5px;width:8px;height:8px;border-radius:50%;background:#17120e;z-index:3}.radio-visual i{left:5px}.radio-visual em{right:5px}.radio-visual b{position:absolute;left:12px;top:10px;width:3px;height:7px;background:var(--gold);z-index:2}.active .radio-visual b{animation:tuner 2s ease-in-out infinite alternate}.tape-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:#3a2f21}.tape-line i{display:block;width:0;height:100%;background:var(--gold)}.active .tape-line i{animation:fill var(--step-time) linear forwards}
.tint-visual{overflow:hidden}.tint-visual:before{content:"";position:absolute;inset:15px 3px 4px;border:4px solid #46564e;border-radius:28px 28px 8px 8px;background:#9cc3c0;clip-path:polygon(23% 0,75% 0,100% 49%,100% 100%,0 100%,0 49%)}.tint-visual i,.tint-visual b{position:absolute;top:20px;width:25px;height:25px;background:#0c2727aa;z-index:2}.tint-visual i{left:8px;transform:skew(-18deg)}.tint-visual b{right:8px;transform:skew(18deg)}.tint-sheet{position:absolute;inset:0;background:linear-gradient(115deg,transparent 45%,rgba(4,15,16,.8) 50%,rgba(4,15,16,.95));transform:translateX(100%);opacity:0}.active .tint-sheet{opacity:1;animation:tint 2.4s var(--ease) forwards}
.components .cap{position:absolute;width:10px;height:25px;border-radius:3px;background:linear-gradient(90deg,#0a0d0b,#647369,#0a0d0b);border-top:2px solid #9ea99f;box-shadow:2px 3px 5px #0008}.c1{left:25%;bottom:50px}.c2{left:29%;bottom:53px}.c3{left:53%;top:35px}.c4{right:30%;bottom:38px}.res{position:absolute;width:31px;height:8px;background:repeating-linear-gradient(90deg,#927d59 0 6px,#3f2b1e 7px 9px,#c9ad70 10px 13px);border-radius:3px;border-left:7px solid #252e29;border-right:7px solid #252e29;box-shadow:1px 2px 4px #0008}.r1{left:18%;top:25%}.r2{left:34%;top:20%}.r3{left:58%;bottom:28%}.r4{right:28%;top:25%}.r5{left:48%;bottom:8%}.components .coil{position:absolute;width:42px;height:42px;left:27%;top:44%;border:7px solid #6f5830;border-radius:7px;background:repeating-linear-gradient(45deg,#17150f,#b78637 2px,#17150f 4px);box-shadow:inset 0 0 7px #000,2px 4px 7px #0009}.mini-ic{position:absolute;width:54px;height:39px;background:#080d0a;border:2px solid #283c32;box-shadow:0 0 0 3px #0b1d15,2px 4px 8px #0009;display:grid;place-items:center;font:5px monospace;color:#71877b}.mini-ic:before,.mini-ic:after{content:"";position:absolute;left:-7px;right:-7px;height:4px;border-left:6px dotted #b9a66c;border-right:6px dotted #b9a66c;top:6px}.mini-ic:after{top:auto;bottom:6px}.mini-ic i{position:absolute;width:4px;height:4px;border-radius:50%;background:#4b5e54;left:5px;top:5px}.ic-a{left:17%;bottom:16%}.ic-b{left:55%;top:17%}.ic-c{right:30%;bottom:17%}.crystal{position:absolute;left:35%;top:13%;width:45px;height:18px;border-radius:4px;background:linear-gradient(#9ca8a2,#46514b);border:1px solid #bac4bf;display:grid;place-items:center;box-shadow:2px 3px 5px #0008}.crystal b{font:5px monospace;color:#18231e}.diode{position:absolute;width:24px;height:7px;background:linear-gradient(90deg,#161c18 0 50%,#b8c1bc 51% 57%,#111713 58%);border-left:5px solid #2a372f;border-right:5px solid #2a372f}.d1{left:23%;top:35%}.d2{left:51%;bottom:17%}.d3{right:25%;top:19%}.via{position:absolute;width:8px;height:8px;border-radius:50%;background:#07130e;border:2px solid #bf8e3c;box-shadow:inset 0 0 2px #000,0 0 0 1px #6c5124}.v1{left:14%;top:17%}.v2{left:21%;bottom:32%}.v3{left:32%;top:28%}.v4{left:51%;top:11%}.v5{right:35%;top:29%}.v6{right:18%;bottom:22%}.v7{left:61%;bottom:10%}.v8{right:42%;bottom:34%}.pcb-label{position:absolute;font:5px monospace;color:#70a58a;letter-spacing:1px}.label-a{left:20%;top:10%;transform:rotate(-90deg)}.label-b{left:50%;bottom:4%}.label-c{right:16%;top:9%}.board-code{position:absolute;bottom:12px;left:42%;font:5px monospace;color:#568369;letter-spacing:1.4px}
.detail{position:absolute;left:4vw;bottom:112px;width:330px;min-height:105px;border-top:1px solid #47715e;display:grid;grid-template-columns:44px 1fr;gap:11px;padding-top:13px;z-index:9}.detail>div:first-child{display:flex;align-items:start;gap:7px;font:700 11px monospace;color:var(--lime)}.detail>div:first-child i{width:20px;height:1px;background:var(--lime);margin-top:7px}.detail section small{font:6px monospace;color:#5a8170;letter-spacing:1px}.detail h2{font-size:15px;margin:2px 0 4px}.detail p{font-size:8px;line-height:1.9;color:#718f82;margin:0}.meter{grid-column:1/3;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px}.meter>span{height:2px;background:#18372a}.meter>span i{display:block;width:8%;height:100%;background:var(--lime);box-shadow:0 0 8px var(--lime);transition:.7s}.meter small{font-size:6px;color:#557564}.meter b{font:8px monospace;color:var(--lime)}
.controls{height:78px;position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);background:#050a08df;backdrop-filter:blur(15px);z-index:30;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 4vw;gap:25px}.steps{display:grid;grid-template-columns:repeat(7,1fr);height:100%}.steps button{border:0;background:transparent;color:#496759;font-size:7px;position:relative}.steps button:before{content:"";position:absolute;right:0;left:0;top:-1px;height:1px;background:#263e34}.steps button:after{content:"";position:absolute;right:0;top:-2px;width:0;height:3px;background:var(--lime);box-shadow:0 0 8px var(--lime)}.steps button b{display:block;font:7px monospace;margin-bottom:3px}.steps button.active{color:#d3eade}.steps button.active b{color:var(--lime)}.steps button.active:after{animation:fill var(--step-time) linear forwards}.steps button.done:after{width:100%;background:#4a7b63;box-shadow:none}.paused .steps button.active:after{animation-play-state:paused}.playback{display:flex;gap:7px;align-items:center}.playback button{height:33px;border:1px solid var(--line);background:#0b1812;color:#769889;border-radius:18px;min-width:33px}.playback .play{padding:0 14px;display:flex;align-items:center;gap:8px}.playback .play i{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:6px solid var(--lime)}.playing .playback .play i{width:6px;height:8px;border:0;border-left:2px solid var(--lime);border-right:2px solid var(--lime)}.playback .play span{font-size:7px}
.paused *{animation-play-state:paused!important}
@keyframes eq{to{height:17px}}@keyframes pulse{50%{opacity:.25}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes soundRing{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.7);opacity:0}}@keyframes scanCard{from{top:0}to{top:100%}}@keyframes tuner{to{left:48px}}@keyframes fill{to{width:100%}}@keyframes tint{to{transform:translateX(-4%)}}@keyframes serviceIn{0%{box-shadow:0 0 0 var(--lime)}50%{box-shadow:0 0 50px #adff6855}100%{box-shadow:0 18px 40px #0009}}
.service.active{animation:serviceIn .8s var(--ease)}
@media(max-width:1100px){.board{width:920px;transform:translate(-50%,-50%) scale(.82)}.intro{top:88px}.detail{bottom:95px}.controls{height:68px}}
@media(max-width:760px){.topbar{height:62px;padding:0 15px}.system-state{display:none}.back span{display:none}.intro{position:relative;top:auto;right:auto;text-align:center;padding:22px 15px 0}.intro h1{font-size:35px;margin:0}.intro p{margin:auto;min-height:42px}.board{position:relative;left:50%;top:auto;width:920px;height:610px;transform:translateX(-50%) scale(.55);transform-origin:center top;margin-top:10px;margin-bottom:-263px}.detail{position:relative;left:auto;bottom:auto;width:auto;margin:0 18px 92px}.controls{height:82px;position:fixed;padding:0 12px;grid-template-columns:1fr auto}.steps button span{display:none}.playback .play span{display:none}.playback .play{padding:0;min-width:33px}.brand>span{font-size:12px}.brand>i{width:30px;height:30px}.board-code{display:none}}
@media(max-width:420px){.board{transform:translateX(-50%) scale(.45);margin-bottom:-330px}.intro p{font-size:9px}.detail{margin-bottom:88px}.steps{gap:1px}.steps button b{font-size:6px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
html.embedded,html.embedded body{height:100%;overflow:hidden}html.embedded .topbar{display:none}html.embedded .circuit-story{height:760px;min-height:760px}html.embedded .intro{top:30px}html.embedded .board{top:48%}html.embedded .detail{bottom:96px}html.embedded .controls{height:68px}
@media(max-width:760px){html.embedded,html.embedded body{height:auto;overflow:hidden}html.embedded .circuit-story{height:680px;min-height:680px}html.embedded .intro{padding-top:18px}html.embedded .controls{position:absolute;height:72px}html.embedded .detail{margin-bottom:76px}}
@media(max-width:760px){
  .circuit-story{min-height:800px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#174a35 0,transparent 45%),#050a08}
  .intro,html.embedded .intro{top:0;padding:14px 14px 0}
  .intro>span{font-size:7px}.intro h1{font-size:30px;letter-spacing:-2px}.intro p{min-height:34px;max-width:330px;font-size:8px;line-height:1.8}
  .board,html.embedded .board{position:relative;left:50%;top:auto;width:calc(100% - 24px);height:430px;margin:7px 0 0;transform:translateX(-50%);transform-origin:center top;border-radius:20px;background:radial-gradient(circle at 50% 38%,rgba(76,185,127,.23),transparent 32%),linear-gradient(145deg,#0d3325,#061b14);box-shadow:0 20px 50px #000b,inset 0 0 48px #0005,0 0 0 5px #06110e}
  .board-marks{left:21px;top:16px}.components{display:none}.board-code{display:block;left:50%;bottom:7px;transform:translateX(-50%)}
  .power-input{left:16px;top:43px;transform:scale(.72);transform-origin:left top}.socket{background:#0d1712}
  .core{left:50%;top:39%;width:154px;height:154px}.ring-b{inset:16px}.processor{width:88px;height:88px}.processor small{font-size:4px}.processor b{font-size:8px}.processor span{font-size:5px}.core-status{bottom:-2px}
  .service{display:none;width:min(260px,calc(100% - 38px));height:92px;padding:10px 13px;opacity:1;filter:none}
  .service.active{display:flex;left:50%;right:auto;top:auto;bottom:22px;transform:translateX(-50%)}
  .service.active:hover,.service-monitor.active,.service-monitor.active:hover{transform:translateX(-50%)}
  .service .copy b{font-size:12px}.service .copy span{font-size:8px}.visual{width:60px;height:60px;flex-basis:60px}
  .detail,html.embedded .detail{position:relative;left:auto;bottom:auto;width:auto;min-height:112px;margin:12px 16px 82px;padding-top:11px;border-top-color:#6a9d86;grid-template-columns:38px 1fr}
  .detail h2{font-size:14px}.detail p{font-size:8px}.meter{margin-top:4px}
  .controls,html.embedded .controls{height:70px;position:absolute;padding:0 10px;grid-template-columns:1fr auto;gap:8px}.playback{gap:4px}.playback button{min-width:31px;height:31px}
  html.embedded,html.embedded body{height:800px;overflow:hidden}html.embedded .circuit-story{height:800px;min-height:800px}
}
@media(max-width:420px){
  .board,html.embedded .board{width:calc(100% - 18px);height:430px;margin-bottom:0;transform:translateX(-50%)}
  .power-input{left:12px}.core{width:146px;height:146px}.detail,html.embedded .detail{margin-inline:13px}
}