:root{--bg:#071014;--panel:#0b171c;--panel2:#0e1d23;--line:#1e353d;--muted:#78909a;--text:#dce8eb;--cyan:#20d5e8;--green:#55e6a5;--amber:#ffb84d;--red:#ff4d5e;--blue:#5497ff;--mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;--sans:Inter,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(circle at 80% 5%,#0c2730 0,transparent 30%),linear-gradient(180deg,#081216,#050b0e);font-family:var(--sans);min-height:100vh}.ambient-grid{position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(#1b3a42 1px,transparent 1px),linear-gradient(90deg,#1b3a42 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 70%)}.site-header,main,footer{position:relative;z-index:1;max-width:1500px;margin:auto}.site-header{padding:32px 34px 25px;display:flex;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.eyebrow,.index,.live-tag,.source-badge,.clock,.access,.shift,.hardware-ready{font:600 10px/1.2 var(--mono);letter-spacing:.16em;color:var(--cyan)}h1{font:600 clamp(25px,3vw,43px)/1 var(--sans);letter-spacing:.025em;margin:10px 0 9px}h1 span{color:var(--cyan)}.site-header p{margin:0;color:#a9bdc4;font-size:14px}.site-header .byline{font-size:11px;color:#647d86;margin-top:7px;letter-spacing:.08em}.system-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:9px}.online{font:700 12px var(--mono);color:var(--green);border:1px solid #265e4b;background:#0b211b;padding:10px 13px}.online i,.hardware-ready i,.signal-dot,.interlock i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;margin-right:7px;animation:pulse 2s infinite}.source-badge{color:#9aadb4;border:1px solid var(--line);padding:7px 10px}.clock{color:#5f7981;letter-spacing:.08em}main{padding:24px 34px 50px}.panel{background:linear-gradient(145deg,rgba(14,30,36,.97),rgba(8,19,24,.97));border:1px solid var(--line);box-shadow:0 12px 35px #0004;min-width:0}.panel-heading{height:54px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.panel-heading>div{display:flex;align-items:center;gap:10px}.panel-heading h2{font:600 12px var(--mono);letter-spacing:.11em;margin:0}.index{color:#46616a}.overview-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}.state-pill{padding:7px 12px;border:1px solid;font:700 11px var(--mono);letter-spacing:.12em}.state-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px}.state-pill.idle{color:var(--amber);background:#2a2112}.state-pill.running{color:var(--green);background:#0d281e}.state-pill.stopped{color:#9caeb4;background:#172126}.state-pill.fault{color:var(--red);background:#321218;animation:alarmPulse 1s infinite}.machine-stage{height:320px;padding:25px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#12313a 0,transparent 55%)}.machine-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#23414b44 1px,transparent 1px),linear-gradient(90deg,#23414b44 1px,transparent 1px);background-size:24px 24px}.machine-track{height:220px;position:relative;display:flex;align-items:center;justify-content:space-around;z-index:1}.conveyor{position:absolute;left:6%;right:6%;top:144px;height:33px;border:2px solid #30505a;background:repeating-linear-gradient(90deg,#152b31 0,#152b31 18px,#213b43 19px,#213b43 21px);box-shadow:0 8px 0 #0a1215}.station{position:relative;z-index:2;width:120px;text-align:center;transition:.35s;align-self:flex-start}.station b{display:block;font:700 11px var(--mono);letter-spacing:.1em;margin-top:10px}.station small{font:9px var(--mono);color:var(--muted)}.station-icon{height:90px;border:1px solid #36525b;background:linear-gradient(145deg,#162b31,#0a1519);position:relative;box-shadow:inset 0 0 20px #071013}.station.active{color:var(--cyan);filter:drop-shadow(0 0 8px #20d5e855)}.station.active .station-icon{border-color:var(--cyan)}.station-icon:before,.station-icon:after{content:"";position:absolute}.input-icon:before{width:48px;height:35px;border:2px solid #63808a;left:34px;top:30px;transform:skew(-10deg)}.camera-icon:before{width:38px;height:26px;border:2px solid #63808a;left:39px;top:25px}.camera-icon:after{width:14px;height:14px;border:2px solid var(--cyan);border-radius:50%;left:51px;top:31px}.laser-icon:before{left:55px;top:16px;width:7px;height:42px;background:#55737c;box-shadow:0 0 0 5px #192c32}.laser-icon:after{left:58px;top:57px;width:2px;height:35px;background:var(--red);box-shadow:0 0 10px 2px var(--red);opacity:0}.running .laser-station.active .laser-icon:after,.faulting .laser-icon:after{opacity:1;animation:laserFlicker .18s infinite}.output-icon:before{width:55px;height:42px;border:2px solid #63808a;border-top:0;left:31px;top:32px}.output-icon:after{width:38px;height:2px;background:#63808a;transform:rotate(25deg);left:40px;top:40px}.part{position:absolute;top:137px;left:8%;width:40px;height:25px;background:linear-gradient(135deg,#d4e2e6,#6d858d);border:2px solid #e8f6f8;box-shadow:0 0 12px #ccefff66;z-index:5;transition:left .75s cubic-bezier(.4,0,.2,1),filter .3s}.part span{font:8px var(--mono);color:#102027}.cell-footer{position:absolute;bottom:13px;left:24px;right:24px;display:flex;justify-content:space-between;color:#58727a;font:9px var(--mono);letter-spacing:.1em;z-index:2}.cell-footer .signal-dot{color:var(--green)}.beam{position:absolute;left:64%;top:0;width:1px;height:220px;background:linear-gradient(transparent,var(--red),transparent);opacity:0}.faulting .beam{opacity:.45;animation:beamSweep 1.4s infinite}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}.metric{background:var(--panel);padding:18px 20px;min-height:87px}.metric.wide{grid-column:1/-1}.metric>span,.counter-grid span{font:9px var(--mono);color:#738b93;letter-spacing:.12em}.metric strong{display:block;font:500 25px var(--mono);margin:8px 0 6px}.metric strong em,.counter-grid em{font:normal 11px var(--mono);color:#6e858d;margin-left:3px}.metric-note{font:8px var(--mono);color:#476069}.mini-bar{height:2px;background:#1d3137}.mini-bar i{display:block;height:100%;width:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);transition:width .6s,background .3s}.alarm-banner{display:none;margin:16px 0 0;border:1px solid var(--red);background:linear-gradient(90deg,#3a1017,#1b1014);padding:14px 18px;align-items:center;gap:15px;box-shadow:0 0 25px #ff4d5e22}.alarm-banner.visible{display:flex;animation:slideIn .35s}.alarm-symbol{border:2px solid var(--red);color:var(--red);font:bold 20px var(--mono);width:35px;height:35px;display:grid;place-items:center}.alarm-banner strong{font:700 13px var(--mono);color:#ff7683;letter-spacing:.1em}.alarm-banner p{font:11px var(--mono);margin:4px 0;color:#d2a3a8}.recommendation{margin-left:auto;max-width:430px;font-size:12px;color:#d7b7ba}.recommendation span{display:block;font:8px var(--mono);letter-spacing:.12em;color:var(--red);margin-bottom:4px}.dashboard-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:16px;margin-top:16px}.trend-panel{min-height:315px}.chart-wrap{height:222px;padding:16px 15px 0}.chart-wrap canvas{width:100%;height:100%;display:block}.chart-axis{display:flex;justify-content:space-between;padding:7px 18px;font:8px var(--mono);color:#4e6870}.legend{font:9px var(--mono);color:#8da2a9;gap:18px!important}.legend span:before{content:"";display:inline-block;width:14px;height:2px;margin:0 6px 3px 0}.temp-key:before{background:var(--amber)}.power-key:before{background:var(--cyan)}.controls{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.control{height:68px;text-align:left;padding:0 14px;color:var(--text);background:#112229;border:1px solid #31505a;font:700 12px var(--mono);letter-spacing:.07em;cursor:pointer;transition:.18s}.control span{margin-right:7px}.control small{display:block;margin:5px 0 0 24px;color:#5f7780;font:8px var(--mono);letter-spacing:.1em}.control:hover:not(:disabled){transform:translateY(-2px);border-color:var(--cyan);background:#163039}.control:active:not(:disabled){transform:translateY(0)}.control:disabled{opacity:.38;cursor:not-allowed}.control.start{border-color:#267859;color:var(--green)}.control.stop{color:#a7b8bd}.control.reset{color:var(--cyan)}.control.fault{border-color:#7e3039;color:#ff6574}.interlock{margin:0 18px 18px;border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;font:8px var(--mono);color:#5c747c}.interlock strong{color:var(--green);font-weight:500}.recipe-panel{grid-column:1/-1}.recipe{padding:24px 30px;display:flex;align-items:center;justify-content:space-between}.recipe>span{color:#405a62}.recipe-step{flex:1;max-width:180px;border:1px solid #29434b;padding:14px;transition:.3s;position:relative;background:#0b171c}.recipe-step i{font:normal 9px var(--mono);color:#4a6870}.recipe-step b{display:block;font:600 11px var(--mono);margin:8px 0 3px}.recipe-step small{font:9px var(--mono);color:#657d85}.recipe-step.active{border-color:var(--cyan);background:#0d2930;box-shadow:inset 0 0 18px #20d5e811,0 0 14px #20d5e822}.recipe-step.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.recipe-step.complete{border-color:#276149}.recipe-step.complete i,.recipe-step.complete b{color:var(--green)}.oee-content{display:flex;align-items:center;gap:30px;padding:21px}.oee-ring{--value:0deg;width:135px;height:135px;flex:0 0 auto;border-radius:50%;background:conic-gradient(var(--green) var(--value),#1b3036 0);display:grid;place-items:center;position:relative;transition:.7s}.oee-ring:before{content:"";position:absolute;inset:10px;background:#0b181d;border-radius:50%;box-shadow:inset 0 0 18px #000}.oee-ring div{z-index:1;text-align:center}.oee-ring strong{display:block;font:500 22px var(--mono)}.oee-ring span{font:9px var(--mono);color:#6e878f}.oee-bars{flex:1}.oee-bars>div{margin-bottom:13px}.oee-bars label{display:flex;justify-content:space-between;font:9px var(--mono);color:#81969d}.oee-bars label b{color:#c6d7db}.oee-bars>div>span{display:block;background:#182b31;height:4px;margin-top:6px}.oee-bars i{display:block;width:0;height:100%;background:var(--green);transition:.6s}.oee-bars small{font:8px var(--mono);color:#526970}.counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.counter-grid>div{background:var(--panel);padding:16px 18px}.counter-grid strong{display:block;margin-top:8px;font:500 22px var(--mono)}.counter-grid strong.good{color:var(--green)}.counter-grid strong.bad{color:#ff7a86}.counter-grid .throughput{grid-column:1/-1}.throughput strong{font-size:25px}.pulse-line{height:18px;margin-top:-20px;margin-left:130px;background:linear-gradient(90deg,transparent 0,transparent 20%,var(--cyan) 20.5%,transparent 21%,transparent 35%,var(--cyan) 35.5%,var(--cyan) 37%,transparent 37.5%,transparent);opacity:.25}.event-log{height:238px;overflow-y:auto;padding:10px 0;font:9px/1.45 var(--mono);scrollbar-color:#2d4b54 transparent}.event{display:grid;grid-template-columns:62px 58px 1fr;gap:9px;padding:6px 14px;border-left:2px solid transparent;color:#849aa1}.event:hover{background:#12242a}.event time{color:#506970}.event .type{font-weight:700}.event.info .type{color:var(--blue)}.event.sensor .type{color:var(--cyan)}.event.process .type{color:#b897ff}.event.quality .type{color:var(--green)}.event.warning{border-color:var(--amber);background:#2a201026}.event.warning .type{color:var(--amber)}.event.alarm{border-color:var(--red);background:#35101955;color:#dab7ba}.event.alarm .type{color:var(--red)}.text-button{background:none;border:0;color:#627b83;font:9px var(--mono);cursor:pointer}.text-button:hover{color:var(--cyan)}.architecture{margin-top:16px}.architecture-flow{display:flex;align-items:center;justify-content:center;padding:27px;gap:18px}.architecture-flow div{width:190px;border:1px solid #29464e;background:#0b191e;padding:16px}.architecture-flow div>span{font:8px var(--mono);color:var(--cyan)}.architecture-flow b{display:block;font:600 10px var(--mono);margin:8px 0}.architecture-flow small{font:9px var(--mono);color:#668088}.architecture-flow>i{font-style:normal;color:var(--cyan)}.hardware-ready{color:var(--green)}.provider-mode{text-align:center;margin:0 0 22px;color:#6c858d;font:10px var(--mono)}.provider-mode strong{color:var(--cyan)}.about{display:grid;grid-template-columns:1fr 2fr;gap:60px;padding:55px 20px 30px}.about h2{font-size:23px;margin:8px 0}.about p{font-size:13px;line-height:1.75;color:#82979e;margin:0 0 12px}footer{border-top:1px solid var(--line);padding:22px 34px 35px;display:flex;justify-content:space-between;font:8px var(--mono);color:#496168;letter-spacing:.1em}
@keyframes pulse{50%{opacity:.35}}@keyframes laserFlicker{50%{opacity:.5;transform:translateX(1px)}}@keyframes beamSweep{50%{transform:translateX(30px)}}@keyframes alarmPulse{50%{box-shadow:0 0 13px #ff4d5e66}}@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}}
@media(max-width:900px){.overview-grid,.dashboard-grid{grid-template-columns:1fr}.recipe-panel{grid-column:auto}.site-header{padding:24px 18px}main{padding:17px 18px 40px}.architecture-flow{gap:8px}.architecture-flow div{padding:12px}.machine-stage{height:300px;padding:15px}.station{width:95px}.camera-icon:before{left:27px}.camera-icon:after{left:39px}.laser-icon:before{left:43px}.laser-icon:after{left:46px}.input-icon:before{left:23px}.output-icon:before{left:20px}}
@media(max-width:620px){.site-header{display:block}.system-meta{align-items:flex-start;text-align:left;margin-top:20px}.overview-grid{gap:12px}.machine-stage{height:270px;padding:8px}.machine-track{height:195px}.station{width:70px}.station-icon{height:72px}.station small{display:none}.input-icon:before{width:32px;left:18px;top:24px}.camera-icon:before{width:30px;left:18px}.camera-icon:after{left:27px}.laser-icon:before{left:31px}.laser-icon:after{left:34px}.output-icon:before{width:38px;left:14px}.output-icon:after{left:20px;width:28px}.conveyor{top:124px}.part{top:118px;width:30px}.cell-footer{left:10px;right:10px}.cell-footer span:last-child{display:none}.metric{padding:14px}.metric strong{font-size:21px}.panel-heading{padding:0 12px}.legend{gap:7px!important}.legend span{font-size:0}.legend span:before{width:18px}.recipe{padding:18px 12px;gap:4px}.recipe>span{font-size:10px}.recipe-step{padding:10px 5px;text-align:center}.recipe-step small{display:none}.recipe-step b{font-size:8px}.recipe-step i{font-size:7px}.oee-content{gap:18px;padding:16px}.oee-ring{width:105px;height:105px}.architecture-flow{display:grid;grid-template-columns:1fr 20px 1fr;padding:18px}.architecture-flow div{width:auto}.architecture-flow>i:nth-of-type(2){display:none}.about{grid-template-columns:1fr;gap:15px;padding:42px 4px 20px}.alarm-banner{align-items:flex-start;flex-wrap:wrap}.recommendation{margin-left:50px}.event{grid-template-columns:55px 52px 1fr;gap:5px;padding:6px 8px}footer{padding:20px 18px}.controls{padding:12px}.control{padding:0 9px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}