.calc-page{--calc-accent:var(--brand-accent);--calc-line:#dce3df;--ink-faint:#7d8b8e;--line:#dce3df;--surface-2:#f3f5f3;--radius-sm:18px;--calc-muted:#69767a;--calc-red:linear-gradient(135deg,#ff5858,#f00000);--calc-green:linear-gradient(135deg,var(--lime),var(--green));font-family:Anuphan,Outfit,sans-serif}
.calc-page main{overflow:clip}.calc-intro,.calc-workspace{width:88%;max-width:1460px;margin:auto}.calc-intro{padding:135px 0 44px}.calc-breadcrumb{display:flex;gap:12px;color:var(--calc-muted);font-size:12px;margin-bottom:34px}.calc-breadcrumb a:hover{color:var(--ink)}.calc-kicker{display:block;font:400 11px/1.6 Outfit,Anuphan,sans-serif;letter-spacing:.13em;color:var(--calc-muted);margin-bottom:12px}.calc-intro h1{font-size:clamp(34px,3.8vw,58px);font-weight:400;line-height:1.3;letter-spacing:-.03em;margin-bottom:24px}.calc-intro>p{font-size:17px;line-height:1.7;max-width:780px;color:#526168}
.calc-workspace{padding-bottom:90px}.calc-tabs{display:flex;gap:8px;padding:5px;border:1px solid var(--calc-line);border-radius:40px;width:max-content;max-width:100%;margin-bottom:30px}.calc-tabs button{padding:13px 26px;border-radius:30px;font-size:15px;color:var(--calc-muted);transition:background .3s,color .3s}.calc-tabs button[aria-selected=true]{background:var(--calc-green);color:var(--ink)}.calc-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start}.calc-card{border:1px solid var(--calc-line);border-radius:24px;background:#fff;min-width:0}.calc-inputs{padding:26px;background:#f5f7f5;position:sticky;top:100px;max-height:calc(100dvh - 120px);overflow-y:auto;scrollbar-width:thin}.calc-card-heading{margin-bottom:24px}.calc-card-heading h2,.calc-plan-head h2{font-size:23px;line-height:1.4;font-weight:400;letter-spacing:-.015em}.calc-card-heading p{font-size:13px;color:var(--calc-muted);line-height:1.7;margin-top:9px}.calc-field{display:block;margin-bottom:18px;min-width:0}.calc-field>span{display:block;font-size:13px;margin-bottom:8px;color:#4f6066}.calc-input-wrap{position:relative}.calc-input-wrap input,.calc-field select{width:100%;min-height:46px;border:1px solid #d8dfda;border-radius:12px;background:#fff;padding:10px 13px;color:var(--ink);font:400 15px/1.5 Anuphan,Outfit,sans-serif}.calc-input-wrap input{padding-right:45px}.calc-input-wrap>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--calc-muted);pointer-events:none}.calc-field select{font-size:13px;padding-right:5px;cursor:pointer}.calc-field input:focus-visible,.calc-field select:focus-visible{outline:2px solid var(--calc-accent);outline-offset:2px}.calc-input-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.calc-advanced{border-top:1px solid var(--calc-line);margin:8px 0 22px;padding-top:15px}.calc-advanced summary{display:flex;justify-content:space-between;align-items:center;font-size:13px;list-style:none;cursor:pointer}.calc-advanced summary::-webkit-details-marker{display:none}.calc-advanced[open] summary>span{transform:rotate(45deg)}.calc-advanced-body{padding-top:18px}.calc-advanced-body p,.calc-small{font-size:11px;line-height:1.8;color:var(--calc-muted)}.calc-small{margin-top:14px}.calc-run{width:100%;font-size:14px;min-height:48px;margin-top:8px}.calc-error{font-size:13px;line-height:1.6;color:#ad2727;background:#fff1ef;padding:12px;border-radius:12px;margin-bottom:12px}.calc-results{display:flex;flex-direction:column;gap:24px;min-width:0}.calc-model{display:grid;grid-template-columns:30% 1fr;overflow:hidden}.calc-model-art{display:grid;place-items:center;background:#f2f4f2;min-height:220px;padding:25px}.calc-model-art img{width:100%;max-height:190px;object-fit:contain;filter:drop-shadow(0 10px 8px #0000000a);transition:transform .5s var(--ease)}.calc-model:hover .calc-model-frame{transform:scale(1.05)}.calc-model-copy{padding:25px 28px}.calc-model-copy h2{font:400 clamp(24px,2.3vw,34px)/1.3 Outfit,Anuphan,sans-serif;letter-spacing:-.025em}.calc-model-copy>p{font:400 12px/1.6 Outfit,sans-serif;letter-spacing:.04em;color:var(--calc-muted);margin-top:5px}.calc-model-specs{display:flex;flex-wrap:wrap;gap:15px 25px;margin:20px 0}.calc-model-specs span{display:block;color:var(--calc-muted);font-size:11px;margin-bottom:5px}.calc-model-specs strong{font:400 17px/1.4 Outfit,Anuphan,sans-serif}.calc-model-copy>a{font-size:12px;display:inline-flex;align-items:center;gap:12px}.calc-model-copy>a>span{width:16px;height:16px}
.calc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.calc-stat{padding:23px 20px;border-radius:20px;background:#f4f6f4;min-width:0}.calc-stat-highlight{background:var(--calc-green)}.calc-stat>span{display:block;font-size:12px;margin-bottom:13px}.calc-stat strong{display:block;font:400 clamp(24px,2.7vw,40px)/1.2 Outfit,Anuphan,sans-serif;letter-spacing:-.025em;overflow-wrap:anywhere}.calc-stat small{display:block;font-size:11px;margin-top:10px;color:#56666a}.calc-plan{padding:28px}.calc-plan-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.calc-view-tabs{display:flex;gap:4px;padding:4px;background:#f0f3f0;border-radius:30px;flex-shrink:0}.calc-view-tabs button{padding:9px 15px;border-radius:25px;font:400 13px/1.3 Outfit,sans-serif;transition:background .2s}.calc-view-tabs button[aria-selected=true]{background:var(--ink);color:#fff}.calc-layout-meta{display:flex;gap:12px 24px;flex-wrap:wrap;padding:18px 0 20px;color:var(--calc-muted);font-size:12px}.calc-plan-stage{min-height:330px;background:linear-gradient(160deg,#fff,#f6f9f7);border:1px solid #e8ede8;border-radius:18px;overflow:hidden}.calc-plan-stage svg{display:block;width:100%}/* Original V2 plan stage and Three.js host sizing. */
.plan-3d{position:relative;background:var(--surface-2)}
#plan3d{width:100%;height:440px}
#plan3d canvas{display:block;border-radius:var(--radius-sm)}
.plan3d-hint{position:absolute;top:14px;left:14px;z-index:5;display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.06em;color:#fff;background:rgba(10,14,16,.6);backdrop-filter:blur(6px);padding:7px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.12);pointer-events:none}
#plan3dError{position:absolute;inset:70px 20px auto;max-width:450px}
.calc-spacing-note{margin-top:18px;font-size:13px;line-height:1.7;color:#4b6068}.calc-spacing-note.is-warning{color:#916422}.calc-method{border-top:1px solid var(--calc-line);padding-top:14px}.calc-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 24px}.calc-actions .button{font-size:14px}.calc-secondary{font-size:13px;border-bottom:1px solid #d3dcd6;padding:8px 0;white-space:nowrap}.calc-secondary:hover{border-color:var(--ink)}.calc-annual,.calc-cost-chart{padding:28px}.calc-cost-row{margin:25px 0}.calc-cost-row>div:first-child{display:flex;justify-content:space-between;gap:15px;align-items:baseline;margin-bottom:12px;font-size:14px}.calc-cost-row strong{font:400 22px/1.3 Outfit,Anuphan,sans-serif}.calc-bar-track{height:26px;background:#f0f3ef;border-radius:6px;overflow:hidden}.calc-bar-track>span{display:block;height:100%;border-radius:6px;transform-origin:left;transition:width .8s var(--ease)}.calc-bar-red{background:var(--calc-red)}.calc-bar-green{background:var(--calc-green)}.calc-kwh{display:flex;justify-content:space-between;gap:15px;font-size:13px;color:var(--calc-muted);border-top:1px solid var(--calc-line);padding-top:22px}.calc-kwh strong{font-weight:400;color:var(--ink)}.calc-legend{display:flex;gap:24px;font-size:12px;margin-bottom:22px}.calc-legend span{display:inline-flex;align-items:center;gap:8px}.calc-legend i{width:10px;height:10px;border-radius:50%}.calc-chart-scroll{overflow-x:auto;padding-bottom:6px}.calc-chart-scroll svg{display:block;width:100%;min-width:660px}.calc-growth{transform-box:fill-box;transform-origin:bottom;animation:calc-grow .8s var(--ease) both;animation-delay:var(--delay)}@keyframes calc-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(min-width:1550px){.calc-layout{grid-template-columns:350px minmax(0,1fr)}}
@media(max-width:1050px){.calc-intro,.calc-workspace{width:90%}.calc-layout{grid-template-columns:280px minmax(0,1fr);gap:20px}.calc-inputs{padding:22px}.calc-model{grid-template-columns:1fr}.calc-model-art{min-height:160px}.calc-model-art img{max-height:130px;max-width:200px}.calc-stat{padding:20px 15px}.calc-plan,.calc-annual,.calc-cost-chart{padding:22px}.calc-plan-head{align-items:start;flex-direction:column;gap:15px}.calc-model-specs{gap:15px 20px}.calc-stats{gap:10px}}
@media(max-width:800px){.calc-layout{grid-template-columns:1fr;gap:24px}.calc-inputs{position:static;max-height:none;overflow:visible}.calc-inputs .calc-input-pair{gap:18px}.calc-model{grid-template-columns:30% 1fr}.calc-model-art{min-height:190px}.calc-model-art img{max-height:170px}.calc-plan-head{flex-direction:row;align-items:center}.calc-intro{padding-top:125px}.calc-intro h1{font-size:38px}.calc-intro>p{font-size:15px}.calc-stat strong{font-size:32px}.calc-inputs .calc-run{max-width:360px}.calc-inputs .calc-field select{font-size:15px}}
@media(max-width:520px){.calc-intro h1{font-size:31px}.calc-intro{padding-top:110px;padding-bottom:30px}.calc-breadcrumb{margin-bottom:25px}.calc-tabs{width:100%;gap:3px;margin-bottom:22px}.calc-tabs button{padding:12px 9px;font-size:12px;flex:1}.calc-card{border-radius:20px}.calc-model{grid-template-columns:1fr}.calc-model-art{min-height:170px}.calc-model-copy{padding:22px}.calc-model-copy h2{font-size:28px}.calc-stats{gap:8px}.calc-stat{padding:18px 12px;border-radius:16px}.calc-stat>span{font-size:10px;margin-bottom:12px}.calc-stat strong{font-size:25px}.calc-stat small{font-size:10px}.calc-plan-head{flex-direction:column;align-items:start}.calc-card-heading h2,.calc-plan-head h2{font-size:21px}.calc-plan,.calc-annual,.calc-cost-chart{padding:20px 16px}.calc-plan-stage{min-height:250px}.calc-cost-row strong{font-size:20px}.calc-actions{gap:12px 18px}.calc-actions .button{width:100%}.calc-workspace{padding-bottom:55px}.calc-inputs .calc-run{max-width:none}.calc-layout-meta{gap:8px 15px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.calc-growth{animation:none}.calc-bar-track>span{transition:none}.calc-page{scroll-behavior:auto}}
/* V2 installation viewport: retain its dimensions and 2D padding. */
.calc-plan-stage{border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);border:1px solid var(--line);min-height:360px;position:relative}
#plan2d{display:flex;align-items:center;justify-content:center;padding:10px}
.plan-3d{height:440px}

/* Sliding selections for calculator modes and installation views. */
.calc-tabs,.calc-view-tabs{position:relative;isolation:isolate}
.calc-tabs button,.calc-view-tabs button{position:relative;z-index:1;transition:color .3s var(--ease)}
.calc-tabs button[aria-selected=true],.calc-view-tabs button[aria-selected=true]{background:transparent}
.calc-tab-indicator{position:absolute;left:0;top:0;z-index:0;border-radius:30px;pointer-events:none;background:var(--calc-green)}
.calc-view-tabs .calc-tab-indicator{background:var(--ink)}
.calc-tabs-ready .calc-tab-indicator{transition:transform .42s var(--ease),width .42s var(--ease),height .42s var(--ease)}
@media(prefers-reduced-motion:reduce){.calc-tabs-ready .calc-tab-indicator,.calc-tabs button,.calc-view-tabs button{transition:none}}

/* Paired yearly prices and larger five-year chart labels. */
.calc-cost-chart .calc-card-heading h2{font-size:26px}
.calc-cost-chart .calc-legend{font-size:16px;gap:28px}
.calc-chart-scroll svg{min-width:0}
.calc-year-group{cursor:pointer;outline:none}
.calc-year-values{opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}
.calc-year-group.is-active .calc-year-values{opacity:1}
.calc-year-group:focus-visible .calc-year-hit{stroke:var(--calc-accent);stroke-width:2}
.calc-price-old,.calc-price-new{paint-order:stroke;stroke:#fff;stroke-width:4;stroke-linejoin:round}
.calc-input-wrap input[type="number"]{-moz-appearance:textfield}
.calc-input-wrap input::-webkit-inner-spin-button,.calc-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:600px){.calc-chart-scroll svg{min-width:600px}.calc-cost-chart .calc-card-heading h2{font-size:23px}.calc-cost-chart .calc-legend{font-size:14px;gap:22px}}
@media(prefers-reduced-motion:reduce){.calc-year-values{transition:none}}

/* A subtle pointer marks the first year with a positive return. */
.calc-payback-arrow{animation:calc-payback-nudge 1.8s ease-in-out infinite}
@keyframes calc-payback-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.calc-payback-arrow{animation:none}}

/* Match the visible lamp diameter, accounting for transparent Sparks margins. */
.calc-model-art{overflow:hidden}
.calc-model-frame{position:relative;display:block;width:100%;max-width:260px;aspect-ratio:1.75;transition:transform .5s var(--ease)}
.calc-model-art .calc-model-frame img{position:absolute;left:50%;top:50%;width:100%;height:auto;max-width:none;max-height:none;transform:translate(-50%,-50%);transition:none}
.calc-model-art .calc-model-frame[data-series="sparks"] img{width:118.3432%;transform:translate(-50%,-43.375%)}
@media(max-width:1050px){.calc-model-frame{max-width:200px}}