/* Porcelain, graphite and champagne metal. Motion remains entirely decorative. */
:root{--ink:#332240;--bg:#f2eff4}aside{background:linear-gradient(145deg,#22142d,#2e1d3c 75%,#281933)}.logo{font-size:26px;letter-spacing:3.5px}.bolt{background:linear-gradient(135deg,#fff0c5 0%,#dfbf86 35%,#efd2a0 57%,#af844d 100%);border:1px solid #f5deb1;box-shadow:inset 0 1px 1px #fff9e5,0 3px 6px #180b2277,0 10px 25px #180b2230;border-radius:11px}.bolt svg{fill:#332340;filter:drop-shadow(0 1px 0 #fff4d480)}nav{gap:6px}nav button{padding:11px 12px;font-size:12px;gap:11px;border:1px solid transparent}nav button.active{background:linear-gradient(120deg,#463b4f88,#3b294a88);border-color:#6b5c7655;box-shadow:inset 2px 0 #dbc18f,0 5px 14px #11081922;color:#edd6ae}.nav-icon{height:30px;width:30px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,#ffffff08,#00000008);border:1px solid #c7bbd112;box-shadow:inset 0 1px 0 #dbcbe80a}.nav-icon svg{width:17px;height:17px;stroke-width:1.4}.active .nav-icon{border-color:#cbb88c44;background:linear-gradient(140deg,#e4c99515,#d6c69802);box-shadow:inset 0 1px 0 #ffe9bd11,0 2px 6px #190c2366}.avatar{border:1px solid #dfd9e3;background:linear-gradient(135deg,#f8f5fa,#e4dfe8);box-shadow:inset 0 1px 0 white,0 2px 4px #33233f06}.avatar svg{width:17px;height:17px;stroke:#73637f;stroke-width:1.3;fill:none}.btn svg{stroke-width:1.4}.mobilebar svg{stroke-width:1.35}.electric-hero{background:linear-gradient(120deg,#22122f,#342043 58%,#2b173a);min-height:312px;border:1px solid #66587155;box-shadow:0 12px 28px #27183312,inset 0 1px 0 #c0b2cb1a;transform:translateZ(0)}.electric-hero:after{background:linear-gradient(110deg,#1a0c2533,transparent 54%),radial-gradient(ellipse at 75% 30%,#9883a822,transparent 60%)}.hero-grid{background-size:27px 27px;opacity:.65}.hero-ambient{position:absolute;width:380px;height:380px;top:-90px;right:30px;background:radial-gradient(circle,#9f8cae55 0,transparent 66%);filter:blur(20px);animation:ambient-travel 15s ease-in-out infinite;pointer-events:none;z-index:0}.hero-sheen{position:absolute;top:-100%;left:-70%;height:300%;width:50%;background:linear-gradient(90deg,transparent,#fff4d407,transparent);transform:rotate(24deg);animation:surface-pass 16s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none;z-index:4;mix-blend-mode:screen}.hero-copy{padding:32px 37px 28px}.hero-eyebrow{letter-spacing:2px;font-size:7px;color:#a89ab3;animation:copy-rise .8s ease both}.hero-copy h1{font-size:42px;line-height:1.12;margin-top:23px;margin-bottom:15px;letter-spacing:-1.8px}.hero-copy h1 .hero-title-first{display:block;color:#f2eef6;animation:copy-rise .9s cubic-bezier(.2,.7,.2,1) .1s both}.hero-copy h1 .hero-title-second{display:block;background:linear-gradient(105deg,#b4925c,#f7e6c4 35%,#dab979 53%,#fff3d3 65%,#cba56b 82%,#b4925c);background-size:240% 100%;color:#e6ca96;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:copy-rise .9s cubic-bezier(.2,.7,.2,1) .25s both,title-metal 12s ease-in-out 1s infinite;text-shadow:0 2px 17px #dbc49809}.hero-copy p{color:#b4a9bd;animation:copy-rise .9s ease .4s both;font-size:11px}.hero-start{color:#e1c69a;animation:copy-rise .9s ease .55s both;font-size:11px;margin-top:20px}.hero-start span{background:#dfc39311;border:1px solid #dfc39333;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:16px}.hero-hardware{width:55%;right:-1%;animation:hardware-reveal 1.3s ease both}.panel-rail{width:71%;left:17%;top:44%;background:linear-gradient(180deg,#291539 0 10%,#bdb4c4 12% 15%,#6e5e7a 19% 75%,#cbbfd4 79% 85%,#3d2450 89%);box-shadow:0 12px 20px #160a1f66,inset 0 1px 1px #cab9d74d;animation:rail-reveal 1s cubic-bezier(.2,.8,.3,1) both}.hero-breakers{left:29%;top:44px;width:225px;filter:drop-shadow(10px 20px 11px #160a2088);animation:panel-breathe 12s ease-in-out 1.8s infinite;will-change:transform}.hero-breakers>svg{width:80px;height:181px;margin-left:-4px;overflow:visible;animation:breaker-seat 1.4s cubic-bezier(.18,.72,.25,1) both;filter:drop-shadow(1px 1px 1px #f8f3d51a)}.hero-breakers>svg:nth-child(1){animation-delay:.15s}.hero-breakers>svg:nth-child(2){animation-delay:.32s;transform:translateY(-4px)}.hero-breakers>svg:nth-child(3){animation-delay:.5s}.hero-breakers:hover>svg:nth-child(2){transform:translateY(-4px)}.hero-socket{width:90px;top:29px;right:7%;filter:drop-shadow(7px 15px 8px #170b2180);animation:socket-seat 1.6s cubic-bezier(.18,.72,.25,1) .35s both,socket-float 12s ease-in-out 2s infinite}.hero-coil{width:111px;left:5%;bottom:12px;filter:drop-shadow(3px 9px 5px #140a1c80);animation:coil-seat 1.6s cubic-bezier(.18,.72,.25,1) .15s both}.hero-wire .wire-shadow{stroke:#11081899;stroke-width:9}.hero-wire .wire-path{stroke:#7c648f;stroke-width:5}.hero-wire .wire-path.second{stroke:#b29664;stroke-width:5}.hero-wire .wire-pulse{stroke:#d5c0e6;stroke-width:2;stroke-dasharray:2 12 24 390;animation:lux-current 6.5s linear 1.2s infinite;filter:drop-shadow(0 0 4px #cab0df)}.hero-wire .wire-pulse.second{stroke:#ffe7b8;animation-delay:-2.4s;stroke-dasharray:2 9 22 360;filter:drop-shadow(0 0 5px #d9bd7f)}.hero-wire .wire-terminal{fill:#e5ce9a;filter:drop-shadow(0 0 3px #e2c68a);animation:terminal-signal 6.5s ease-in-out 1.2s infinite}.hero-spec{font-size:7px;color:#8f7e9c}.spec-left{top:23px;left:17%;letter-spacing:2px}.spec-right{font-size:6px;right:5%;bottom:48px;opacity:.65}.precision-mark{position:absolute;display:flex;align-items:center;gap:7px;color:#bdaec8;font:6px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px;white-space:nowrap;animation:precision-reveal 1.2s ease 1.1s both;pointer-events:none}.precision-mark i{width:4px;height:4px;border:1px solid #d6c79d;border-radius:50%;position:relative}.precision-mark i:after{content:'';position:absolute;inset:-4px;border:1px solid #a89bb255;border-radius:50%;animation:precision-pulse 5s ease-in-out infinite}.precision-mark span{background:#2b183a66;padding:4px 5px;border-radius:3px;border:1px solid #9c8ea720}.mark-cable{left:9%;bottom:3px}.mark-point{right:8%;top:6px}.mark-point i:after{animation-delay:2.4s}.hero-switch{bottom:14px;right:20px;gap:9px;font-size:8px;color:#beafca;letter-spacing:.7px;background:#24133144;border:1px solid #988aa322;border-radius:20px;padding:6px 10px;backdrop-filter:blur(8px)}.switch-track{background:linear-gradient(#7a668a,#50415c);border-color:#9f8baf88;box-shadow:inset 0 1px 3px #190c2466}.switch-track i{background:linear-gradient(#fff6d2,#b99ecf);box-shadow:0 1px 3px #1d102899}.current-led{background:#c4aad8;box-shadow:0 0 8px #c4aad888}.electric-workflow b{background:linear-gradient(135deg,#fffef4,#e7dfed);border-color:#d9d1e0;box-shadow:inset 0 1px 0 #fff,0 2px 3px #34273e04;color:#9989a5}.calctoolbar h2{font-weight:700}.calcrow{grid-template-columns:48px minmax(0,1fr) 116px;padding:17px 0;gap:13px}.work-device{width:47px;height:47px;border-radius:12px;background:linear-gradient(140deg,#faf7fc 0%,#e7e0ec 50%,#d9d1e0 100%);border:1px solid #ddd4e4;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 2px #6e587f17,0 2px 4px #412b5309;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s}.work-device:before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid #ffffffa6;pointer-events:none;z-index:2}.work-device:after{content:'';position:absolute;inset:-60% -140%;background:linear-gradient(100deg,transparent,#fff9,transparent);transform:translateX(-60%) rotate(30deg);transition:transform .7s ease;pointer-events:none;z-index:3}.work-device svg{width:35px;height:36px;filter:drop-shadow(1px 3px 1.3px #2b183a2c);transform:rotate(-5deg);transition:transform .3s}.work-device-breaker svg{height:41px;width:26px;transform:rotate(-7deg)}.work-device-light svg{height:37px;width:35px}.work-device-drill,.work-device-box,.work-device-chase{background:linear-gradient(140deg,#faf5e9,#e9e2d0);border-color:#e1d8c1}.work-device-light{background:linear-gradient(140deg,#fff9e8,#eee5cc);border-color:#e9dfc3}.calcrow:hover .work-device{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 5px 11px #40314c17}.calcrow:hover .work-device svg{transform:rotate(0) translateY(-1px)}.calcrow:hover .work-device:after{transform:translateX(70%) rotate(30deg)}.calcqty{background:linear-gradient(135deg,#f9f5fc,#ece5f2);box-shadow:inset 0 1px 0 #fff;border:1px solid #ddd1e6}.calcqty button{color:#8c779c;transition:background .2s,color .2s}.calcqty button:hover{background:#dbcde6;color:#4b365b}.calcresult{background:linear-gradient(140deg,#faf7fc,#f1ebf5);border-color:#d9cee2;box-shadow:inset 0 1px 0 #fff,0 5px 15px #2e1d3c07}.meter-top{color:#8f7d9d}.meter-screen{border-radius:9px;background:linear-gradient(130deg,#3b2b48,#2c1c39);border:1px solid #221030;box-shadow:inset 0 2px 7px #160a1f88,0 1px 0 #fff,0 0 0 3px #e0d6e8}.meter-screen:after{content:'';position:absolute;top:-50%;left:-40%;width:100%;height:170%;transform:rotate(32deg);background:linear-gradient(90deg,transparent,#e6dbee05,transparent);pointer-events:none}.calcresult .big{color:#d8c1ea;text-shadow:0 0 15px #d2b7e726}.calcresult .btn.primary{background:linear-gradient(115deg,#d3af76,#eed6a3 45%,#dfbe83);border:1px solid #d0b07a;box-shadow:inset 0 1px 0 #fff0c8,0 3px 6px #b18c4922;color:#41344b;font-weight:800}.calcresult .btn.primary:hover{background:linear-gradient(115deg,#e1c28d,#f9e6ba 45%,#e4c58f)}.btn svg{filter:drop-shadow(0 1px 0 #ffffff15)}.mobilebar button.active{color:#8d7544}.mobilebar button.active svg{filter:drop-shadow(0 1px 0 #f7e8c1);stroke-width:1.65}
@keyframes copy-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes title-metal{0%,18%{background-position:100% 0}65%,100%{background-position:-100% 0}}@keyframes rail-reveal{from{opacity:0;transform:translateX(25px) rotate(-9deg)}to{opacity:1;transform:translateX(0) rotate(-9deg)}}@keyframes hardware-reveal{from{opacity:0}to{opacity:1}}@keyframes breaker-seat{0%{opacity:0;transform:translateY(-46px) scale(.97)}55%{opacity:1}82%{transform:translateY(2px) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes panel-breathe{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-5px)}}@keyframes socket-seat{from{opacity:0;transform:translate(20px,-12px) rotate(25deg)}to{opacity:1;transform:translate(0,0) rotate(14deg)}}@keyframes coil-seat{from{opacity:0;transform:translate(-14px,12px) rotate(-35deg)}to{opacity:1;transform:translate(0,0) rotate(-18deg)}}@keyframes lux-current{from{stroke-dashoffset:430}to{stroke-dashoffset:0}}@keyframes ambient-travel{0%,100%{transform:translate(0,0);opacity:.55}50%{transform:translate(-45px,20px);opacity:.9}}@keyframes surface-pass{0%,30%{left:-70%;opacity:0}35%{opacity:1}70%,100%{left:140%;opacity:0}}@keyframes terminal-signal{0%,18%,80%,100%{filter:drop-shadow(0 0 3px #e2c68a)}25%,35%{filter:drop-shadow(0 0 8px #ffe4a9)}}@keyframes precision-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes precision-pulse{0%,100%{transform:scale(.75);opacity:.4}50%{transform:scale(1.3);opacity:.8}}
.power-off .electric-hero *{animation:none!important}.power-off .hero-hardware,.power-off .hero-breakers>svg,.power-off .hero-copy h1 span,.power-off .hero-eyebrow,.power-off .hero-copy p,.power-off .hero-start,.power-off .precision-mark{opacity:1!important}.power-off .hero-breakers{transform:rotate(-9deg)}.power-off .hero-breakers>svg{transform:translateY(0)}.power-off .hero-copy h1 span{transform:none}.power-off .hero-ambient{opacity:.35}.power-off .hero-sheen{display:none}.power-off .wire-pulse{opacity:0}.power-off .hero-copy h1 .hero-title-second{background-position:50% 0}
@media(min-width:1500px){.electric-hero{min-height:340px}.hero-copy{padding:36px 44px}.hero-copy h1{font-size:47px;letter-spacing:-1.9px}.hero-breakers{left:28%;top:45px;width:250px}.hero-breakers>svg{width:89px;height:205px}.hero-socket{width:105px;top:35px}.hero-coil{width:127px;bottom:12px}.precision-mark{font-size:7px}}
@media(max-width:1100px) and (min-width:801px){.electric-hero{min-height:290px}.hero-copy{padding:30px 26px}.hero-copy h1{font-size:34px;letter-spacing:-1.2px}.hero-eyebrow{font-size:6px;letter-spacing:1px}.hero-breakers{left:23%;top:52px;width:175px}.hero-breakers>svg{width:65px;height:155px}.hero-socket{width:65px;right:3%}.hero-coil{width:84px;left:0;bottom:16px}.precision-mark{font-size:5px}.mark-point{right:2%;top:9px}.mark-cable{left:1%;bottom:4px}.calcrow{grid-template-columns:38px minmax(0,1fr) 98px;gap:10px}.work-device{width:38px;height:41px}.work-device svg{width:30px;height:32px}.work-device-breaker svg{width:22px;height:36px}}
@media(max-width:800px){.electric-hero{min-height:250px;border-radius:13px}.hero-copy{padding:25px 19px 24px;width:70%}.hero-eyebrow{font-size:5.5px;letter-spacing:.7px}.hero-copy h1{font-size:26px;letter-spacing:-.8px;line-height:1.15;margin:23px 0 13px;white-space:nowrap}.hero-copy h1 .hero-title-first,.hero-copy h1 .hero-title-second{display:block}.hero-copy p{font-size:9px}.hero-start{margin-top:17px;font-size:9px;gap:15px}.hero-start span{font-size:13px;width:23px;height:23px}.hero-hardware{width:48%;right:-7%;top:15px}.hero-breakers{left:9%;top:56px;width:136px}.hero-breakers>svg{width:49px;height:118px;margin-left:-5px}.hero-socket{width:54px;top:12px;right:17%}.hero-coil{width:66px;left:-4%;bottom:6px}.precision-mark{display:none}.panel-rail{top:48%;width:87%;left:2%}.hero-ambient{width:220px;height:250px;top:-10px;right:-20px;filter:blur(20px)}.hero-switch{bottom:10px;right:10px;font-size:6px;padding:5px 7px;gap:5px}.hero-wire .wire-pulse{stroke-width:1.5}.calcrow{grid-template-columns:43px minmax(0,1fr) 102px;gap:10px;padding:16px 0}.work-device{width:43px;height:44px;border-radius:10px}.work-device svg{width:32px;height:34px}.work-device-breaker svg{width:24px;height:39px}.calcname strong{font-size:11px}.avatar svg{height:15px;width:15px}.meter-screen{border-radius:8px}.calcresult .btn.primary{font-size:12px}.calcrate{grid-column:2/-1}}
@media(max-width:380px){.hero-copy{padding-left:16px}.hero-copy h1{font-size:24px}.hero-eyebrow{font-size:5px}.calcrow{grid-template-columns:35px minmax(0,1fr) 92px;gap:8px}.work-device{width:35px;height:39px;border-radius:9px}.work-device svg{width:28px;height:31px}.work-device-breaker svg{width:20px;height:35px}.calcname strong{font-size:10px}.calcqty button{width:23px}.calcrate{grid-column:2/-1}}
@media(prefers-reduced-motion:reduce){.electric-hero *,.work-device,.work-device svg,.work-device:after{animation:none!important;transition:none!important}.hero-hardware,.hero-breakers>svg,.hero-eyebrow,.hero-copy h1 span,.hero-copy p,.hero-start,.precision-mark{opacity:1!important;transform:none}.hero-breakers{transform:rotate(-9deg)}.hero-copy h1 .hero-title-second{background-position:50% 0}.hero-sheen,.wire-pulse{display:none}.hero-ambient{opacity:.35}}
@media print{.hero-sheen,.hero-ambient,.precision-mark{display:none!important}}
/* Longer assembly sequence; keep the estimate above the work list on phones. */
.hero-breakers>svg{animation-duration:3.8s}.hero-breakers>svg:nth-child(1){animation-delay:.3s}.hero-breakers>svg:nth-child(2){animation-delay:1.4s}.hero-breakers>svg:nth-child(3){animation-delay:2.5s}.hero-breakers{animation-duration:18s;animation-delay:6.4s}.panel-rail{animation-duration:2.5s}.hero-socket{animation:socket-seat 4.5s cubic-bezier(.18,.72,.25,1) 1s both,socket-float 18s ease-in-out 6s infinite}.hero-coil{animation:coil-seat 4s cubic-bezier(.18,.72,.25,1) .6s both}.hero-wire .wire-path{stroke-dasharray:600;animation:cable-draw 5s cubic-bezier(.2,.6,.3,1) 1.6s both}.hero-wire .wire-path.second{animation-delay:2.6s}.hero-wire .wire-pulse{animation-duration:18s;animation-delay:5.5s}.hero-wire .wire-pulse.second{animation-duration:20s;animation-delay:6.5s}.hero-copy h1 .hero-title-second{animation:copy-rise 1.5s cubic-bezier(.2,.7,.2,1) .25s both,title-metal 20s ease-in-out 1.8s infinite}.hero-sheen{animation-duration:26s}.hero-ambient{animation-duration:26s}.precision-mark{animation-duration:2s;animation-delay:4.5s}.precision-mark i:after{animation-duration:8s}
@keyframes cable-draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@media(max-width:800px){.electric-hero{min-height:218px}.hero-copy{padding-top:21px;padding-bottom:20px}.hero-copy h1{margin-top:18px;margin-bottom:11px}.hero-copy p{font-size:9px}.hero-start{margin-top:14px}.hero-hardware{top:5px}.hero-breakers{top:47px}.hero-socket{top:9px}.hero-coil{bottom:3px}.electric-workflow{margin-bottom:19px}.calclayout>.calcresult{order:0;margin:0 0 18px;padding:17px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 13px}.calclayout>.card{order:1}.calcresult .meter-top{grid-column:1/-1;margin-bottom:13px}.calcresult .meter-screen{grid-column:1;grid-row:2/4;padding:13px 11px 10px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.calcresult .big{font-size:27px;margin:13px 0 11px;letter-spacing:-1.3px}.calcresult .meter-caption{font-size:6px;letter-spacing:.8px}.calcresult .meter-bottom{font-size:6px}.calcresult .minirow{grid-column:2;display:flex;align-items:center;margin:0;padding:11px 0;font-size:9px;gap:7px}.calcresult .minirow strong{font-size:10px;white-space:nowrap}.calcresult .btn.primary{grid-column:1/-1;margin-top:17px;padding:12px}.calcresult .btn:not(.primary){grid-column:1/-1;margin-top:8px!important;padding:10px}.calcresult .calcreset{font-size:8px;margin-top:12px;line-height:1.8;align-self:center}.calcresult .callout{display:none}.calcresult .simplenote{grid-column:1/-1;margin-top:12px;font-size:8px}.calcintro{margin-bottom:16px}.calcresult .meter-updated{animation:meter-response .45s ease-out}}
@media(max-width:380px){.calcresult .big{font-size:24px}.calclayout>.calcresult{gap:0 10px;padding:15px}.calcresult .minirow{font-size:8px}.calcresult .minirow strong{font-size:9px}.calcresult .calcreset{font-size:7.5px}}
@media(prefers-reduced-motion:reduce){.hero-wire .wire-path{animation:none!important;stroke-dasharray:none;stroke-dashoffset:0}}
.power-off .hero-wire .wire-path{stroke-dasharray:none;stroke-dashoffset:0}
