/* Design layer of the test copy. Each module takes a signal color from the fiber color code: blue, orange, green, violet. */
:root{--sig:oklch(.76 .13 240);--c2:oklch(.82 .13 75);--c3:oklch(.74 .15 22);--vf:oklch(.235 .02 258);--vl:oklch(.37 .025 258);--bulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8Zm40-128a87.55 87.55 0 0 1-33.64 69.21A16.24 16.24 0 0 0 176 186v6a16 16 0 0 1-16 16H96a16 16 0 0 1-16-16v-6a16 16 0 0 0-6.23-12.66A87.59 87.59 0 0 1 40 104.5C39.74 56.83 78.26 17.15 125.88 16A88 88 0 0 1 216 104Z'/%3E%3C/svg%3E")}
[data-page=physical],[data-p=physical]{--sig:oklch(.77 .15 55)}
[data-page=datalink],[data-p=datalink]{--sig:oklch(.8 .15 155)}
[data-page=switching],[data-p=switching]{--sig:oklch(.75 .14 300)}
:root[data-theme=dark][data-page]{--acc:var(--sig);--acc-s:color-mix(in oklab,var(--sig) 18%,var(--bg))}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

/* Drawings */
.sc{display:block;width:100%;height:auto;font-family:var(--mono);direction:ltr}.sc text{direction:ltr;unicode-bidi:plaintext}
.sc .dv{fill:var(--vf);stroke:var(--vl);stroke-width:1.4}.sc .dv.big{stroke:color-mix(in oklab,var(--sig) 55%,var(--vl))}
.sc .dv.k1,.sc .dv.lit{fill:color-mix(in oklab,var(--sig) 30%,var(--vf));stroke:var(--sig)}.sc .dv.k2{fill:color-mix(in oklab,var(--c2) 24%,var(--vf));stroke:var(--c2)}
.sc .dv.vl0{stroke:var(--sig);fill:color-mix(in oklab,var(--sig) 20%,var(--vf))}.sc .dv.vl1{stroke:var(--c2);fill:color-mix(in oklab,var(--c2) 16%,var(--vf))}
.sc .hit{fill:color-mix(in oklab,var(--sig) 34%,transparent);stroke:var(--sig);stroke-width:1.6}
.sc .wire{stroke:var(--vl);stroke-width:2}.sc .wire.blocked{stroke-dasharray:6 7;opacity:.6}
.sc text{fill:var(--ink2)}.sc .sl{font-size:13px}.sc .sl.on{fill:var(--ink)}.sc .sb{font-size:15px;font-weight:500;fill:var(--ink)}.sc .sb.sm{font-size:13px}.sc .sp{font-size:12px;font-weight:500;fill:oklch(.18 .03 258)}.sc .sc2{font-size:12.5px}
.sc .sweep{fill:none;stroke:var(--sig);stroke-width:2}.sc .ring2{fill:none;stroke:var(--c3);stroke-width:2}
.sc .tw{fill:none;stroke-width:5;stroke-linecap:round}.sc .tw.a{stroke:var(--sig)}.sc .tw.b{stroke:var(--vl)}
.sc .sq{fill:none;stroke:var(--c2);stroke-width:2;stroke-dasharray:320;stroke-dashoffset:640}
.sc .clad{fill:var(--vf)}.sc .core{fill:color-mix(in oklab,var(--sig) 14%,var(--vf))}.sc .zig{fill:none;stroke:color-mix(in oklab,var(--sig) 45%,transparent);stroke-width:1.5;stroke-dasharray:4 6}.sc .ph2{fill:var(--sig)}
.sc .wave{fill:none;stroke:var(--sig);stroke-width:2}
.sc .bt{font-size:21px;letter-spacing:.14em;fill:var(--vl)}.sc .bt.on{fill:var(--sig)}
.sc .zone{fill:color-mix(in oklab,var(--sig) 7%,transparent);stroke:var(--vl);stroke-dasharray:5 5}.sc .zone.b{fill:color-mix(in oklab,var(--c2) 7%,transparent)}
.sc .port{fill:oklch(.15 .012 258);stroke:var(--vl)}.sc .port.sfp{stroke:var(--c2)}.sc .port.con{stroke:var(--sig)}.sc .led{fill:var(--sig)}
.sc .fin{fill:var(--sig)}.sc .fout{fill:var(--c2)}.sc .xb{fill:var(--bg,#111);stroke:var(--c3);stroke-width:2}.sc .xl{stroke:var(--c3);stroke-width:2.4;stroke-linecap:round}

/* Lesson shell */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 55% at 85% 0,color-mix(in oklab,var(--sig) 13%,transparent),transparent 70%),radial-gradient(50% 45% at 0 100%,color-mix(in oklab,var(--sig) 7%,transparent),transparent 70%)}
.amb::before{content:"";position:absolute;inset:0;background-image:radial-gradient(oklch(.6 .02 258/.13) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.amb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease-out;-webkit-mask-image:linear-gradient(to right,#000,transparent 72%);mask-image:linear-gradient(to right,#000,transparent 72%)}
.amb.cov img{opacity:.42}
@media(max-width:820px){.amb img{-webkit-mask-image:linear-gradient(to bottom,#000,transparent 62%);mask-image:linear-gradient(to bottom,#000,transparent 62%)}}
.ltop{background:color-mix(in oklab,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-bottom:6px}
.route{grid-column:1/-1;position:relative;display:flex;justify-content:space-between;align-items:center;height:16px;margin-top:4px}
.route u,.route s{position:absolute;inset-inline-start:0;top:7px;height:2px;border-radius:2px}.route u{width:100%;background:var(--line)}
.route s{width:100%;background:var(--sig);box-shadow:0 0 10px var(--sig);transform:scaleX(0);transform-origin:right;transition:transform .5s ease-out}
.route i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);transition:background-color .3s,border-color .3s}
.route i.h-q{border-radius:2px;transform:rotate(45deg)}.route i.h-e{width:10px;height:10px}.route i.on{background:var(--sig);border-color:var(--sig)}.route i.cur{box-shadow:0 0 0 4px color-mix(in oklab,var(--sig) 26%,transparent);animation:ping 2s ease-out infinite}
@keyframes ping{50%{box-shadow:0 0 0 7px color-mix(in oklab,var(--sig) 10%,transparent)}}

/* Reading steps */
.card h3{font-weight:600;line-height:1.45}
.card.duo{width:min(1140px,100%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,68px);align-items:center}
.txt>*:first-child{margin-top:0}.txt>*:last-child{margin-bottom:0}
.vis{margin:0;padding:clamp(8px,1.4vw,18px);border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in oklab,var(--sig) 9%,var(--bg2)),var(--bg2) 62%);box-shadow:0 24px 60px -30px color-mix(in oklab,var(--sig) 45%,transparent)}
@media(max-width:860px){.card.duo{grid-template-columns:1fr;gap:16px}.card.duo .vis{order:-1;padding:6px 8px}.card.duo .sc{max-height:178px}.card.duo.long .vis{display:none}}
.card .tl{display:grid;gap:9px;margin:0}.card .tl li{position:relative;padding:.6em 1em;padding-inline-start:2.2em;margin:0;background:color-mix(in oklab,var(--bg2) 72%,transparent);border:1px solid var(--line);border-radius:13px;line-height:1.85}
.card .tl li::before{inset-inline-start:.95em;top:1.22em;width:.5em;height:.5em;background:var(--sig);box-shadow:0 0 8px var(--sig)}.card .tl b{color:var(--ink);font-weight:500}
.card .terms{gap:9px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:0}.card .terms>div{background:color-mix(in oklab,var(--bg2) 72%,transparent);border:1px solid var(--line);border-radius:13px;padding:.55em .9em;line-height:1.75;font-size:.94em}.card .terms b{color:var(--sig)}
.t-kid .kid,.card .call.kid{position:relative;padding:1.4em 1.5em;padding-inline-start:4.6em;background:linear-gradient(130deg,color-mix(in oklab,var(--sig) 15%,var(--bg2)),var(--bg2) 70%);border:1px solid color-mix(in oklab,var(--sig) 32%,var(--line));border-radius:20px}
.t-kid .kid::before,.card .call.kid::before{content:"";position:absolute;inset-inline-start:1.25em;top:1.5em;width:2.3em;height:2.3em;background:var(--sig);-webkit-mask:var(--bulb) center/contain no-repeat;mask:var(--bulb) center/contain no-repeat}
.t-mem .mem,.card .call.mem{position:relative;background:color-mix(in oklab,var(--sig) 11%,var(--bg2));border:1px solid var(--sig);border-radius:16px;box-shadow:0 0 0 4px color-mix(in oklab,var(--sig) 9%,transparent)}
.t-trap .trap,.t-trap .warnb,.t-flag .flag{position:relative;overflow:hidden;padding-inline-start:2.2em;border-radius:16px}
.t-trap .trap::before,.t-trap .warnb::before,.t-flag .flag::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:12px;background:repeating-linear-gradient(-45deg,var(--stripe,var(--c3)) 0 7px,oklch(.2 .02 258) 7px 14px)}
.t-flag{--stripe:var(--c2)}.t-flag .flag{background:color-mix(in oklab,var(--c2) 11%,var(--bg2))}
.card table,.card .tbl{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:color-mix(in oklab,var(--bg2) 72%,transparent)}.card th{background:color-mix(in oklab,var(--sig) 13%,var(--bg2));color:var(--ink);border-bottom:1px solid var(--line)}.card tr:last-child td{border-bottom:0}
.card .ic,.card .lab{position:relative;border-radius:20px;background:linear-gradient(170deg,color-mix(in oklab,var(--sig) 7%,var(--panel)),var(--panel) 40%);box-shadow:0 24px 60px -36px color-mix(in oklab,var(--sig) 50%,transparent)}
.ph{border-radius:16px;box-shadow:0 18px 50px -28px oklch(0 0 0/.9)}

/* Lesson opening */
.card.t-hero{width:min(1140px,100%)}.t-hero h1{font-size:clamp(2.3rem,6.2vw,4.3rem);font-weight:600;line-height:1.22;max-width:15em;margin-bottom:.35em}.t-hero .lede{max-width:34em;font-weight:300;font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--ink)}
.t-hero .mtag{font:400 .88rem var(--mono);direction:ltr;text-align:end;color:var(--sig)}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1em}.meta span{padding:.1em .9em;border:1px solid var(--line);border-radius:99px;font-size:.88rem;color:var(--ink2);background:color-mix(in oklab,var(--bg) 60%,transparent)}
.outl{list-style:none;margin:1.5em 0 0;padding:0;max-width:30em;font-size:.95rem}.outl li{position:relative;padding:.22em 1.5em;padding-inline-end:0;color:var(--ink2);line-height:1.7}.outl li::before{content:"";position:absolute;inset-inline-start:.28em;top:.82em;width:7px;height:7px;border-radius:50%;background:var(--sig)}.outl li::after{content:"";position:absolute;inset-inline-start:calc(.28em + 3px);top:1.25em;bottom:-.7em;width:1px;background:var(--line)}.outl li:last-child::after{display:none}
@media(max-height:680px),(max-width:600px){.outl{display:none}}

/* Questions */
.card.t-q{width:min(760px,100%)}.tagq{display:inline-block;padding:.05em .9em;border-radius:99px;background:color-mix(in oklab,var(--sig) 15%,transparent);color:var(--sig)}.t-q h2{font-weight:500}
.opt{border-radius:14px;min-height:58px;background:color-mix(in oklab,var(--bg2) 78%,transparent);transition-property:border-color,background-color,transform}.opt:hover:not([disabled]){border-color:var(--sig);transform:translateX(-3px)}.opt:active:not([disabled]){transform:scale(.985)}.opt i{font-weight:500}.opt:hover:not([disabled]) i{background:var(--sig);color:oklch(.18 .03 258)}
.opt.good{animation:okp .5s ease-out}.opt.good i{background:var(--ok);color:oklch(.18 .03 258)}.opt.bad{animation:nop .36s ease-out}.opt.bad i{background:var(--rose);color:oklch(.18 .03 258)}
@keyframes okp{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 50%,transparent)}100%{box-shadow:0 0 0 12px transparent}}@keyframes nop{25%{transform:translateX(5px)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)}}
.fb{animation:rise .32s ease-out;border:1px solid var(--line);border-radius:14px}.fb.good{border-color:color-mix(in oklab,var(--ok) 50%,var(--line))}.fb.bad{border-color:color-mix(in oklab,var(--rose) 50%,var(--line))}@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* Lesson end */
.arrive{position:relative;display:inline-grid;place-items:center;width:150px;height:150px;margin-bottom:6px}.arrive u{position:absolute;inset:40px;border-radius:50%;border:1.5px solid var(--ok);opacity:0;animation:bloom 1.5s ease-out both}.arrive u:nth-child(2){animation-delay:.2s}.arrive u:nth-child(3){animation-delay:.4s}.arrive .ck{margin:0;width:72px;height:72px;box-shadow:0 0 34px color-mix(in oklab,var(--ok) 40%,transparent)}
@keyframes bloom{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.next{border-radius:16px;background:color-mix(in oklab,var(--bg2) 72%,transparent)}.next b{color:var(--sig)}
.pri:hover{background:color-mix(in oklab,var(--acc) 86%,white)}.lfoot .pri{box-shadow:0 8px 26px -10px var(--acc)}

/* Home */
.hero.x{min-height:min(76dvh,640px);align-items:center;isolation:isolate}.hero.x img{opacity:.3;-webkit-mask-image:linear-gradient(to right,#000,transparent 80%);mask-image:linear-gradient(to right,#000,transparent 80%)}.hero.x::after{z-index:0;background:linear-gradient(to top,var(--bg),transparent 34%)}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:0}.hero.x .wrap{position:relative;z-index:1}.hero.x h1{font-size:clamp(2.7rem,8vw,5.6rem);font-weight:600;line-height:1.1;margin-bottom:.22em}.hero.x p{font-weight:300;font-size:clamp(1.05rem,1.8vw,1.35rem);max-width:30em;color:var(--ink)}
.facts{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:1.1em;color:var(--ink2);font-size:.92rem}.facts span{display:inline-flex;align-items:baseline;gap:.4em}.facts b{font:500 1.02rem var(--mono);color:var(--ink);direction:ltr;unicode-bidi:isolate}
.rt{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);gap:4px;padding:18px 16px 14px;margin-top:-6px;background:var(--s1);border:1px solid var(--line);border-radius:22px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}.rt::-webkit-scrollbar{display:none}
.rn{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;scroll-snap-align:center;padding:2px;border-radius:12px}.rn::before{content:"";position:absolute;top:25px;inset-inline-start:50%;width:calc(100% + 4px);height:2px;background:linear-gradient(90deg,var(--vl) 50%,transparent 50%) 0 0/14px 2px;animation:flow 1.1s linear infinite}.rn:last-child::before{display:none}.rn.full::before{background:var(--sig);animation:none}
@keyframes flow{to{background-position:-14px 0}}
.dot{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font:500 .92rem var(--mono);color:var(--ink);background:radial-gradient(closest-side,var(--s1) 80%,transparent 82%),conic-gradient(var(--sig) calc(var(--p)*1%),var(--s2) 0);transition:transform .2s ease-out}.rn:hover .dot{transform:scale(1.1)}.rn small{font-size:.8rem;line-height:1.45;color:var(--ink2)}.rn.cur small{color:var(--ink)}.rn.inf .dot{background:var(--s2);color:var(--ink2)}
.rn.cur .dot{box-shadow:0 0 0 4px color-mix(in oklab,var(--sig) 24%,transparent);animation:ping2 2s ease-out infinite}@keyframes ping2{50%{box-shadow:0 0 0 9px color-mix(in oklab,var(--sig) 8%,transparent)}}
.mc{border:1px solid var(--line);transition:border-color .2s,transform .25s ease-out}.mc:hover{border-color:var(--sig);transform:translateY(-3px)}.mc:hover img{transform:scale(1.05)}.mc .k{color:var(--sig)}.mc .bar i{background:var(--sig)}
.mban .k{color:var(--sig)}.mban h1{font-weight:600}

/* Lessons of one module, drawn as one line */
.page .rows{display:block;position:relative;max-width:860px}.page .rows::before{content:"";position:absolute;inset-block:26px;inset-inline-start:27px;width:2px;background:var(--line)}
.page .rw{position:relative;background:none;padding:.7em .5em}.page .rw:hover{background:var(--s1)}.rw .n{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line);font-size:.8rem;transition:border-color .16s}.rw:hover .n{border-color:var(--sig)}
.rw.ok .n{background:var(--sig);border-color:var(--sig);color:oklch(.18 .03 258)}.rw .st{color:var(--sig)}.rw.nx .n{border-color:var(--sig);color:var(--ink);box-shadow:0 0 0 4px color-mix(in oklab,var(--sig) 20%,transparent)}.rw.nx b{font-weight:500}
.exc,.tl2,.bx{border:1px solid var(--line)}a.exc:hover,.tl2:hover{border-color:var(--acc)}
.opt i{line-height:1}
@media(max-width:600px){.t-kid .kid,.card .call.kid{padding-inline-start:1.3em;padding-top:3.5em}.t-kid .kid::before,.card .call.kid::before{top:1em;inset-inline-start:1.2em;width:2em;height:2em}}
.sc .hopl{stroke:var(--sig);stroke-width:3;stroke-linecap:round}.sc .arrow{stroke:var(--sig);stroke-width:2}.sc .sig{fill:none;stroke:var(--sig);stroke-width:2.5;stroke-linejoin:round}.sc .sig.b{stroke:var(--c2)}.sc .scanl{stroke:var(--ink2);stroke-width:1.5;stroke-dasharray:4 4}
.sc .grid{stroke:var(--vl);stroke-dasharray:3 5}.sc .lead{stroke:var(--ink2);stroke-width:1}.sc .ring3{fill:none;stroke:var(--sig);stroke-width:2}
.sc .cx.jck{fill:var(--vf);stroke:var(--vl)}.sc .cx.shd{fill:color-mix(in oklab,var(--c2) 30%,var(--vf));stroke:var(--c2);stroke-dasharray:3 3}.sc .cx.ins{fill:oklch(.34 .015 258)}.sc .cx.cnd{fill:var(--c2)}.sc .cx.glow{fill:var(--c2);filter:blur(4px)}
.sc .pin{fill:var(--vf);stroke:var(--ink2)}.sc .xw{fill:none;stroke-width:2.5}.sc .xw.tx{stroke:var(--sig)}.sc .xw.rx{stroke:var(--c2)}
.sc .wire.fat{stroke-width:7;stroke-linecap:round}.sc .wire.con{stroke-dasharray:6 5}.sc .bolt{fill:var(--c2)}
.sc .brace{fill:none;stroke:var(--sig);stroke-width:1.6}.sc .brace.b{stroke:var(--c2)}.sc .nb{fill:var(--sig)}.sc .hb{fill:var(--c2)}
.sc .dom{fill:color-mix(in oklab,var(--sig) 8%,transparent);stroke:var(--sig);stroke-dasharray:5 5}.sc .gate{fill:var(--vf);stroke:var(--sig)}
.sc .term{fill:oklch(.14 .01 258);stroke:var(--vl)}.sc .tdot{fill:var(--vl)}.sc .pr{fill:var(--sig)}.sc .cur{fill:var(--ink)}