/* Spark Laser: the homepage "build your own line" (concept D). Generated by design/concepts/export.py, do not edit. */
.dline{--bg:#fff;--fg:#161616;--muted:#595959;--line:#E2E0DE;--card:#fff;--red:#E8242B;--sbg:#FFFFFF;--sline:#E2E0DE;--grid:rgba(0,0,0,.07);--lnf:#1E1E22;--lns:#4A4A52;--flf:#3A3A40;--fls:#6B6B72;--armf:#E6E6E9;--arms:#3A3A40;--jf:#1E1E22;--js:#6B6B72;--cap:#8A8A8A;--tag:#595959;--lbl:#fff;--sub:#595959;--partf:#595959;--parts:#2B2B2F;--belt:#A8A8B0;--enc:#595959;--floor:#8E8E96;--screen:#0F0F10;--ok:#15934A;--man:#161616;--fume:#333;--chip:#595959;display:grid;gap:18px;margin-top:8px}
.dline .pop{filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
/* undo site.css rules that share a class name */
.dline .stage{aspect-ratio:auto}
.dline svg .cap,.dline svg .tag{display:inline;background:none;border:0;padding:0;margin:0;transform:none;letter-spacing:normal;text-transform:none}
.dline .lbl.big{font:700 26px var(--f-display);letter-spacing:-.01em;fill:#161616}
.stage{background:var(--sbg);border:1px solid var(--sline);border-radius:4px;overflow:hidden;position:relative;transition:background .3s}
.stage svg{display:block;width:100%;height:auto}
@media (max-width:700px){.stage>svg{min-width:720px}.stage>svg.wide{min-width:1040px}.stage:has(>svg){overflow-x:auto;-webkit-overflow-scrolling:touch}.swipe{display:block}}
.swipe{display:none;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:-6px 0 0}
/* shared drawing classes (all read the palette above) */
.ln{fill:var(--lnf);stroke:var(--lns);stroke-width:1.5;stroke-linejoin:round}
.fl{fill:var(--flf);stroke:var(--fls);stroke-width:1}
.arm{fill:var(--armf);stroke:var(--arms);stroke-width:1.2}
.joint{fill:var(--jf);stroke:var(--js);stroke-width:1.5}
.man{stroke:var(--man);fill:none;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round}
.cap{fill:var(--cap);font:500 10px var(--f-mono);letter-spacing:.14em}
.tag{fill:var(--tag);font:600 9px var(--f-mono);letter-spacing:.12em}
.lbl{fill:var(--lbl);font:700 13px var(--f-display)}
.sub{fill:var(--sub);font:500 10px var(--f-mono);letter-spacing:.08em}
.part{fill:var(--partf);stroke:var(--parts);stroke-width:1}
.beam{stroke:#FF4A50;stroke-width:1.5}
.glow{stroke:#FF4A50;stroke-width:8;opacity:.25}
.ok{stroke:var(--ok)}
.hot{cursor:pointer}
.hot circle.ring{fill:none;stroke:#E8242B;stroke-width:1.5;opacity:.5;transition:opacity .3s}
.hot circle.dot{fill:#E8242B;transition:r .2s}
.hot text{fill:#fff;font:700 11px var(--f-mono);text-anchor:middle;pointer-events:none}
.hot.on circle.ring{opacity:1;stroke-width:2.5}
.hot.on circle.dot{r:12}
.stn-in{transition:opacity .32s ease,transform .32s ease;transform-box:fill-box;transform-origin:50% 100%}
.stn-in.out{opacity:0;transform:translateY(-26px)}
.stn-in.in{animation:stnin .4s ease}
@keyframes stnin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.dline .actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.dline .actions button{font:600 .82rem var(--f-display);padding:8px 12px;border:1px solid var(--line);background:var(--bg);color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:0}
.dline .actions button[aria-pressed="true"]{border-color:var(--red)}
/* D round 12: opening, grouped flip dials, build-up, life-size panel, expanding chart */
.hero{font:700 54px var(--f-display);letter-spacing:-.02em;fill:#161616;pointer-events:none}
#d-hero{opacity:0;transition:opacity .5s}
#d-hero.shown{opacity:1}
#d-hero tspan{fill-opacity:0;transition:fill-opacity .8s ease}
#d-hero tspan.on{fill-opacity:1}
#d-hero-bar{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .7s ease .2s}
#d-hero.bar #d-hero-bar{stroke-dashoffset:0}
#d-title{opacity:0;transition:opacity .6s}
#d-title.shown{opacity:1}
#d-machine{opacity:0;transition:opacity .45s}
#d-svg.shown #d-machine{opacity:1}
#d-stxt{opacity:1;transition:opacity .2s}
.d-live{opacity:0;transition:opacity .3s}
#d-svg.d-run #d-stxt{opacity:0}
#d-svg.d-run .d-live{opacity:1}
#d-svg.d-run .d-s-g{opacity:1}
#d-svg.d-run .d-s-a{opacity:.2}
#d-svg.d-run .d-start{fill:var(--ok)}
.d-s-a,.d-s-g,.d-start{transition:opacity .3s,fill .3s}
/* the build-up: while the dials settle, every piece waits hidden until its dial stops, then drops in */
#d-svg.d-build .stn-in,#d-svg.d-build .hot,#d-svg.d-build #d-subs>g,#d-svg.d-build #d-people>g,#d-svg.d-build #d-enc,#d-svg.d-build #d-duct,#d-svg.d-build #d-belt,#d-svg.d-build #d-panel,#d-svg.d-build #d-bench{opacity:0}
#d-panel,#d-bench,#d-enc,#d-duct,#d-hots,#d-subs,#d-people{transition:opacity .35s}
#d-svg.d-spin #d-panel,#d-svg.d-spin #d-bench,#d-svg.d-spin #d-enc,#d-svg.d-spin #d-duct,#d-svg.d-spin #d-hots,#d-svg.d-spin #d-subs,#d-svg.d-spin #d-people{opacity:0}
#d-svg.d-build #d-panel.rev,#d-svg.d-build #d-bench.rev{opacity:1;transition:opacity .7s}
.dgroup{transition:opacity .8s ease,transform .8s ease}
.dgroup[data-g="stations"]{transition-delay:.3s}
.desk.spinning .dgroup{opacity:0;transform:translateY(10px);transition:none;pointer-events:none}
.deskhint{flex:1 1 100%;margin:0;text-align:center;font-size:.9rem;color:var(--muted);max-height:48px;opacity:0;overflow:hidden;transition:opacity .8s ease .9s}
.desk.hinted .deskhint{opacity:1}
.deskhint.gone{opacity:0;max-height:0;margin-top:-14px;transition:opacity .7s ease,max-height .5s ease .5s,margin .5s ease .5s}
.deskhint a{color:var(--red);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
#d-svg.d-build .stn-in.rev{opacity:1;animation:stndrop .55s cubic-bezier(.2,.9,.3,1.2)}
#d-svg.d-build .hot.rev,#d-svg.d-build #d-subs>g.rev,#d-svg.d-build #d-people>g.rev,#d-svg.d-build #d-enc.rev,#d-svg.d-build #d-duct.rev,#d-svg.d-build #d-belt.rev{opacity:1;transition:opacity .35s}
@keyframes stndrop{from{opacity:0;transform:translateY(-70px)}60%{opacity:1;transform:translateY(6px)}to{opacity:1;transform:none}}
.hot circle.ring{transform-box:fill-box;transform-origin:center}
.hot.ping circle.ring{animation:dping .7s ease-out}
@keyframes dping{0%{transform:scale(1);opacity:1}100%{transform:scale(2.6);opacity:0}}
.land{fill:none;stroke:#E8242B;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:dland .6s ease-out forwards}
@keyframes dland{from{transform:scale(.2);opacity:.9}to{transform:scale(1);opacity:0}}
.d-pulse{fill:none;stroke:var(--ok);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:dpulse 1.1s ease-out forwards}
@keyframes dpulse{from{transform:scale(.3);opacity:1}to{transform:scale(1);opacity:0}}
#d .after{min-width:0}
#d:not(.live) .after{display:none}
#d.live .after{animation:afterin .7s ease both}
@keyframes afterin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the dial desk: two groups, centred. Machine (size, stations) then the stations in order */
.desk{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px;transition:height .7s cubic-bezier(.3,.8,.3,1),margin .7s cubic-bezier(.3,.8,.3,1)}
/* while the line spins and builds, the dial desk takes no room at all; it opens up once the line stands */
.desk.spinning{height:0;overflow:hidden;margin-bottom:-18px}
.dgroup{position:relative;display:grid;gap:10px;align-content:start;padding:14px 16px 12px;background:#FBFAF8;border:2px solid #161616;border-radius:20px;min-width:0;max-width:100%}
.dgroup::before,.dgroup::after{content:"";position:absolute;top:9px;width:6px;height:6px;border-radius:50%;background:#161616}
.dgroup::before{left:9px}.dgroup::after{right:9px}
.dgroup>small{font:600 .62rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding:0 12px}
.dgroup[data-g="stations"]{flex:0 1 auto}
.dials{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(96px,124px);justify-content:center;gap:10px}
.dgroup[data-g="machine"] .dials{grid-auto-columns:112px}
.dial{display:grid;grid-template-rows:auto auto auto auto;justify-items:stretch;gap:5px;min-width:0}
.dial .up,.dial .dn{font:700 .6rem var(--f-display);line-height:1;padding:5px 0;border:2px solid #161616;border-radius:999px;background:#fff;color:#161616;cursor:pointer;transition:background .15s,color .15s}
.dial .up:hover,.dial .dn:hover{background:#161616;color:#fff}
.dial .win{position:relative;height:64px;background:#fff;border:2px solid #161616;border-radius:9px;cursor:pointer;perspective:420px;box-shadow:0 3px 0 #161616;transition:box-shadow .2s;color:#161616}
.dial .win:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.dial .win::before,.dial .win::after{content:"";position:absolute;top:50%;width:22px;height:12px;margin-top:-6px;background:linear-gradient(#161616,#161616) 0 0/7px 100% no-repeat,linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)) 7px 50%/15px 1px no-repeat;border-radius:2px 0 0 2px;z-index:3}
.dial .win::before{left:-4px}.dial .win::after{right:-4px;transform:scaleX(-1)}
.dial .half,.dial .leaf{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#fff}
.dial .half.top,.dial .leaf.top{top:0;border-radius:7px 7px 0 0}
.dial .leaf.top{border-bottom:1px solid rgba(0,0,0,.25)}
.dial .half.bot,.dial .leaf.bot{bottom:0;border-radius:0 0 7px 7px}
.dial .half span,.dial .leaf span{position:absolute;left:0;right:0;height:60px;line-height:60px;text-align:center;padding:0 16px;font:700 .78rem/60px var(--f-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.dial .win.long span{font-size:.68rem;letter-spacing:-.02em}
.dial .win.xlong span{font-size:.6rem;letter-spacing:-.03em;padding:0 13px}
.dial .half.bot span,.dial .leaf.bot span{top:-30px}
.dial .leaf{z-index:2;backface-visibility:hidden;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.dial .leaf.top{transform-origin:50% 100%}
.dial .leaf.bot{transform-origin:50% 0}
.dial .leaf.spin{display:none;background:#f3f3f3}
.dial.spinning .leaf.spin{display:block;animation:dflap .14s linear infinite}
@keyframes dflap{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
.dial small{font:500 .62rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dial.on .win{box-shadow:0 3px 0 #161616,0 0 0 3px rgba(232,36,43,.3)}
.dial.on small{color:var(--red)}
.dial[data-key="size"] .win,.dial[data-key="count"] .win{color:var(--red)}
.dial[data-key="size"] small,.dial[data-key="count"] small{color:var(--red)}
.desk.nudge .dial .win{animation:dnudge 1.3s ease-in-out 3}
@keyframes dnudge{0%,100%{box-shadow:0 3px 0 #161616}50%{box-shadow:0 3px 0 #161616,0 0 0 4px rgba(232,36,43,.35),0 0 22px rgba(232,36,43,.45)}}
@media (max-width:1100px){.dgroup[data-g="stations"] .dials{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(96px,124px))}}
@media (max-width:560px){.dgroup{padding:12px 10px 10px}.dgroup[data-g="machine"]{flex:1 1 100%}.dgroup[data-g="machine"] .dials{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}.dgroup[data-g="stations"]{flex:1 1 100%}.dgroup[data-g="stations"] .dials{grid-template-columns:repeat(2,1fr)}.dial .half span,.dial .leaf span{font-size:.72rem;padding:0 14px}.dial .win.long span{font-size:.64rem}.dial .win.xlong span{font-size:.56rem;padding:0 12px}.dgroup[data-g="machine"] .dial .half span,.dgroup[data-g="machine"] .dial .leaf span{font-size:.62rem;padding:0 11px}.dgroup[data-g="machine"] .dial .win.long span{font-size:.56rem;padding:0 9px}.dgroup[data-g="machine"] .dial .win.xlong span{font-size:.5rem;padding:0 8px}}
.actions{justify-content:center}
.hint{font-size:.85rem;color:var(--muted);align-self:center}
.flowhead{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.flowhead small{font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.flowhead span{font-size:.9rem;color:var(--muted)}
.flowmap{overflow-x:auto;padding:12px 4px 6px;-webkit-overflow-scrolling:touch}
.fwrap{display:inline-grid;min-width:100%;gap:0}
.frow{display:flex;gap:0;align-items:stretch}
.fnode{position:relative;flex:0 0 186px;display:grid;gap:4px;align-content:start;padding:16px 14px 14px;background:#fff;border:2px solid #161616;border-radius:18px;color:#161616;text-align:left;font:inherit;cursor:pointer;transition:flex-basis .35s ease,transform .2s,border-color .2s,box-shadow .2s}
.fnode::after{content:"";position:absolute;left:50%;bottom:-28px;width:2px;height:28px;background:#161616}
.fnode::before{content:"";position:absolute;left:50%;bottom:-32px;width:8px;height:8px;margin-left:-3px;border-radius:50%;background:#161616}
.fnode:hover{transform:translateY(-2px)}
.fnode.on{flex-basis:320px;border-color:var(--red);box-shadow:0 0 0 3px rgba(232,36,43,.2)}
.fnode.on::after,.fnode.on::before{background:var(--red)}
.fnode .fn{position:absolute;top:-12px;left:12px;width:24px;height:24px;border-radius:50%;background:#161616;color:#fff;font:700 11px var(--f-mono);display:grid;place-items:center;border:2px solid #fff}
.fnode.on .fn{background:var(--red)}
.fnode small{font:500 .62rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.fnode b{font-size:.9rem;line-height:1.2}
.fnode ul{margin:4px 0 0;padding-left:14px;display:grid;gap:2px}
.fnode li{font-size:.74rem;line-height:1.3;color:#595959}
.fnode .fx{display:none;gap:6px;margin-top:8px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.25)}
.fnode.on .fx{display:grid;animation:fxin .35s ease}
@keyframes fxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fnode .fx em{font:500 .6rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-style:normal}
.fnode .fx img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid #161616;background:#fff;display:block}
.fnode .fx img.prod{object-fit:contain;padding:8px}
.fnode .fx p{font-size:.76rem;line-height:1.35;color:#161616}
.fnode .fx i{font-size:.62rem;color:var(--muted);font-style:normal}
.farrow{flex:0 0 28px;align-self:center;position:relative;height:2px;background:repeating-linear-gradient(90deg,#161616 0 5px,transparent 5px 9px)}
#d.live .farrow{animation:fflow .6s linear infinite}
@keyframes fflow{to{background-position:18px 0}}
.farrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid #161616;border-right:0}
.fbus{padding-top:30px}
.fbus-bar{display:grid;gap:2px;padding:12px 18px;background:#161616;color:#fff;border-radius:999px;border:2px solid #161616}
.fbus-bar b{font-size:.84rem}
.fbus-bar span{font-size:.74rem;opacity:.8;line-height:1.35}
.stagecap{display:none;font:500 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:-8px 0 0;line-height:1.5}
/* phones: "What goes into this line" becomes a vertical list, no sideways scrolling; tap a card to open its hardware example */
@media (max-width:700px){
.flowmap{overflow:visible;padding:14px 0 0}
.fwrap{display:grid}
.frow{flex-direction:column;align-items:stretch}
.fnode{flex:none;padding:16px 44px 14px 16px;gap:3px}
.fnode.on{flex-basis:auto}
.fnode::before{display:none}
.fnode::after{content:"+";left:auto;right:14px;top:12px;bottom:auto;width:auto;height:auto;background:none;font:400 1.3rem/1 var(--f-display);color:#161616}
.fnode.on::after{content:"\2013";background:none;color:var(--red)}
.fnode ul{padding-left:16px;gap:1px}
.fnode li{font-size:.78rem}
.fnode .fx img{aspect-ratio:16/9}
.farrow{flex:0 0 22px;width:2px;height:22px;align-self:center;background:repeating-linear-gradient(180deg,#161616 0 5px,transparent 5px 9px)}
#d.live .farrow{animation:fflowv .6s linear infinite}
.farrow::after{right:auto;top:auto;left:-4px;bottom:-2px;border:5px solid transparent;border-top:7px solid #161616;border-bottom:0}
.fbus{padding-top:16px}
.fbus-bar{border-radius:18px;padding:12px 16px}
}
@keyframes fflowv{to{background-position:0 18px}}
@media (max-width:700px){#d .swipe{display:none}#d-svg{min-width:0!important}#d-title,#d-combos,#d-subs{display:none}.stagecap{display:block}}