.horizontal-article{--hs-bg:#07111d;--hs-panel:#0d1b2a;--hs-line:#284158;--hs-text:#dce9f5;--hs-muted:#94a9bd;--hs-green:#c8ff3d;--hs-cyan:#42e8e0;--hs-purple:#a876ff;color:var(--hs-text);overflow-x:clip}
.horizontal-article .article-featured,.horizontal-poster img{display:block;width:100%;height:auto}.horizontal-article .article-featured{max-width:1200px;margin:clamp(1.5rem,4vw,3rem) auto;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.horizontal-article .article-content h2,.horizontal-article .article-content h3{scroll-margin-top:110px}.horizontal-article .article-content h2{margin-top:3.15rem}.horizontal-article .article-content h3{margin-top:2rem}.horizontal-article code{color:#d8ff78}
.horizontal-toc{margin:2rem 0;padding:1.4rem;border:1px solid var(--hs-line);border-radius:20px;background:rgba(13,27,42,.72)}.horizontal-toc strong{display:block;margin-bottom:.75rem}.horizontal-toc ol{columns:2;gap:2rem;margin:0;padding-left:1.25rem}.horizontal-toc li{break-inside:avoid;margin:.35rem 0}.horizontal-toc a{color:var(--hs-text)}
.horizontal-poster{margin:2rem 0;padding:10px;background:linear-gradient(135deg,rgba(200,255,61,.3),rgba(66,232,224,.08),rgba(168,118,255,.25));border-radius:24px}.horizontal-poster img{border-radius:17px}.horizontal-poster figcaption{padding:.85rem .8rem .35rem;color:var(--hs-muted);font-size:.92rem}
.horizontal-article .code-block{position:relative;margin:1.4rem 0;border:1px solid var(--hs-line);border-radius:18px;background:#050b12;overflow:auto}.horizontal-article pre{margin:0;padding:1.2rem;color:#e4f1fb;font-size:.9rem;line-height:1.7}
.hs-flow{display:flex;align-items:stretch;gap:.55rem;margin:1.5rem 0;overflow:auto}.hs-flow span{min-width:118px;padding:1rem .75rem;text-align:center;border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel);font-weight:800}.hs-flow span b{display:block;color:var(--hs-green)}.hs-flow span small{color:var(--hs-muted)}.hs-flow i{align-self:center;color:var(--hs-green);font-style:normal}
.hs-measure{position:relative;margin:1.5rem 0;padding:2.8rem 1rem 3.5rem;border:1px solid var(--hs-line);border-radius:18px;background:#081522;overflow:hidden}.hs-measure__track{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:.65rem;width:135%;}.hs-measure__track span{display:grid;place-items:center;min-height:110px;border:1px solid var(--hs-cyan);border-radius:14px;background:linear-gradient(145deg,rgba(66,232,224,.15),rgba(168,118,255,.08));font-size:2rem;font-weight:900}.hs-measure b,.hs-measure i{position:absolute;left:1rem;font-style:normal;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.hs-measure b{top:.8rem;color:var(--hs-green)}.hs-measure i{bottom:.9rem;width:72%;padding-top:.4rem;border-top:2px solid var(--hs-cyan);color:var(--hs-cyan);text-align:center}
.hs-formula{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:1.4rem 0;padding:1.3rem;border:1px solid var(--hs-line);border-radius:18px;background:#0a1826;flex-wrap:wrap}.hs-formula span,.hs-formula strong{padding:.75rem 1rem;border-radius:10px;background:#12283b}.hs-formula b{color:var(--hs-cyan)}.hs-formula strong{color:#07111d;background:var(--hs-green)}
.hs-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}.hs-compare article{padding:1.2rem;border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-panel)}.hs-compare strong{color:var(--hs-green)}.hs-compare p{margin:.45rem 0 0;color:var(--hs-muted)}
.hs-progress-demo{position:relative;display:flex;justify-content:space-between;align-items:center;margin:1.5rem 0;padding-top:1.7rem;color:var(--hs-muted)}.hs-progress-demo:before,.hs-progress-demo span{content:"";position:absolute;top:.7rem;left:0;height:5px;border-radius:8px}.hs-progress-demo:before{right:0;background:#1a3044}.hs-progress-demo span{width:var(--p);background:linear-gradient(90deg,var(--hs-green),var(--hs-cyan))}.hs-progress-demo strong{color:var(--hs-text)}
.hs-snap-line{display:flex;justify-content:space-between;margin:1.5rem 0;padding:.6rem 0;border-top:3px solid var(--hs-purple)}.hs-snap-line span{width:40px;height:40px;margin-top:-27px;display:grid;place-items:center;border-radius:50%;background:var(--hs-purple);color:#07111d;font-weight:900}
.hs-panel-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1.5rem 0}.hs-panel-strip article{min-height:170px;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--hs-line);border-radius:16px;background:linear-gradient(145deg,#14283a,#09131e)}.hs-panel-strip article:nth-child(2){border-color:var(--hs-cyan)}.hs-panel-strip article:nth-child(3){border-color:var(--hs-purple)}.hs-panel-strip article:nth-child(4){border-color:var(--hs-green)}.hs-panel-strip span{font-size:2rem;color:var(--hs-green);font-weight:900}
.hs-architecture{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin:1.5rem 0}.hs-architecture span{padding:1.2rem;text-align:center;border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel);font-weight:900}.hs-architecture span+span:before{content:"→";float:left;margin-left:-1.75rem;color:var(--hs-green)}.hs-architecture small{color:var(--hs-muted);font-weight:500}
.horizontal-lab{margin:2rem calc(50% - 50vw);border-block:1px solid var(--hs-line);background:radial-gradient(circle at 80% 10%,rgba(168,118,255,.18),transparent 35%),#07111d;overflow:hidden}.horizontal-lab__top,.horizontal-lab__controls,.horizontal-lab__status{width:min(1200px,calc(100% - 2rem));margin-inline:auto}.horizontal-lab__top{display:flex;justify-content:space-between;gap:1rem;padding:2rem 0 1rem}.horizontal-lab__top h3{margin:.4rem 0}.horizontal-lab__readout{display:grid;place-content:center;text-align:right}.horizontal-lab__readout strong{font-size:1.5rem;color:var(--hs-green)}.horizontal-lab__readout span{color:var(--hs-cyan)}
.horizontal-lab__controls{display:flex;flex-wrap:wrap;align-items:end;gap:.8rem;padding:1rem;border:1px solid var(--hs-line);border-radius:16px;background:rgba(13,27,42,.86)}.horizontal-lab__controls label{display:grid;gap:.3rem;color:var(--hs-muted);font-size:.85rem}.horizontal-lab__controls select,.horizontal-lab__controls button{min-height:42px;padding:.55rem .8rem;border:1px solid #36546e;border-radius:10px;background:#07111d;color:var(--hs-text)}.horizontal-lab__controls button{border-color:var(--hs-green);background:var(--hs-green);color:#07111d;font-weight:900;cursor:pointer}.horizontal-lab__controls .hs-check{display:flex;align-items:center;min-height:42px;gap:.5rem}.hs-check input{accent-color:var(--hs-green)}
.horizontal-lab__rail{height:5px;background:#152b3e}.horizontal-lab__rail span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--hs-green),var(--hs-cyan),var(--hs-purple));transform:scaleX(0);transform-origin:left}
.horizontal-lab__stage{width:100%;overflow:hidden}.horizontal-lab__track{display:flex;width:max-content;padding:clamp(1rem,4vw,3rem) max(1rem,calc((100vw - 1200px)/2));gap:clamp(1rem,3vw,2rem);will-change:transform}.horizontal-lab__track article{width:min(72vw,720px);min-height:min(64vh,560px);flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,4vw,3rem);border:1px solid #37526b;border-radius:28px;background:radial-gradient(circle at 70% 20%,rgba(66,232,224,.18),transparent 28%),linear-gradient(145deg,#11283b,#07111d);box-shadow:0 25px 65px rgba(0,0,0,.32)}.horizontal-lab__track article:nth-child(2){background:radial-gradient(circle at 70% 20%,rgba(168,118,255,.2),transparent 28%),linear-gradient(145deg,#18223b,#07111d)}.horizontal-lab__track article:nth-child(3){background:radial-gradient(circle at 70% 20%,rgba(200,255,61,.16),transparent 28%),linear-gradient(145deg,#152c2b,#07111d)}.horizontal-lab__track article:nth-child(4){background:radial-gradient(circle at 70% 20%,rgba(66,232,224,.2),transparent 28%),linear-gradient(145deg,#102a36,#07111d)}.horizontal-lab__track article>span{font-size:clamp(4rem,9vw,8rem);font-weight:900;line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(200,255,61,.7)}.horizontal-lab__track small{margin-top:1.5rem;color:var(--hs-green);font-weight:900;letter-spacing:.13em}.horizontal-lab__track h3{font-size:clamp(2rem,5vw,4rem);margin:.5rem 0}.horizontal-lab__track p{max-width:34rem;color:var(--hs-muted)}.horizontal-lab__status{padding:1rem 0 2rem;color:var(--hs-muted)}
.hs-mistakes{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:1.5rem 0}.hs-mistakes span{padding:.8rem;border:1px solid rgba(255,150,120,.22);border-radius:12px;background:rgba(255,120,90,.055)}.hs-debug{columns:2;gap:2rem}.hs-debug li{break-inside:avoid;margin:.5rem 0}.hs-table{width:100%;border-collapse:collapse}.hs-table th,.hs-table td{padding:.8rem;border:1px solid var(--hs-line);text-align:left}.hs-table th{color:var(--hs-green);background:#0b1a28}
.hs-next{margin:1.5rem 0;padding:1.5rem;border:1px solid rgba(168,118,255,.35);border-radius:20px;background:linear-gradient(135deg,rgba(168,118,255,.12),rgba(66,232,224,.05))}.hs-next span,.hs-series-nav small{color:var(--hs-green);font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.hs-next h3{margin:.45rem 0}
.hs-faq details{margin:.8rem 0;border:1px solid var(--hs-line);border-radius:14px;background:var(--hs-panel)}.hs-faq summary{padding:1rem 1.15rem;cursor:pointer;font-weight:800}.hs-faq details p{padding:0 1.15rem 1rem;color:var(--hs-muted)}
.hs-series-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0}.hs-series-nav a,.hs-series-nav span{padding:1.2rem;border:1px solid var(--hs-line);border-radius:16px;color:var(--hs-text)}
@media (max-width:899px){.horizontal-toc ol{columns:1}.hs-compare{grid-template-columns:1fr}.hs-panel-strip,.hs-architecture{grid-template-columns:1fr 1fr}.hs-architecture span+span:before{display:none}.horizontal-lab{margin-inline:0;border:1px solid var(--hs-line);border-radius:22px}.horizontal-lab__top{padding-inline:1rem}.horizontal-lab__controls{display:none}.horizontal-lab__track{width:auto;display:grid;padding:1rem;will-change:auto}.horizontal-lab__track article{width:100%;min-height:330px}.horizontal-lab__rail{display:none}.horizontal-lab__status{padding-inline:1rem}.hs-mistakes{grid-template-columns:1fr 1fr}}
@media (max-width:575px){.hs-flow{display:grid}.hs-flow i{transform:rotate(90deg);justify-self:center}.hs-measure__track{grid-template-columns:repeat(4,130px)}.hs-formula{display:grid;text-align:center}.hs-panel-strip,.hs-architecture,.hs-mistakes,.hs-series-nav{grid-template-columns:1fr}.hs-debug{columns:1}.horizontal-lab__top{display:grid}.horizontal-lab__readout{text-align:left}}
@media (prefers-reduced-motion:reduce){.horizontal-article *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.horizontal-lab__track{transform:none!important}.horizontal-lab__controls,.horizontal-lab__rail{display:none}}