:root{--cyan:#35c982!important;--vio:#12b981!important} .live-counter-value,.result-value,.slider-value,.stat-number.live-data{ color:#35c982!important;-webkit-text-fill-color:#35c982!important; text-shadow:0 0 34px rgba(53,201,130,.28)!important} .live-counter-banner{ background:linear-gradient(135deg,rgba(53,201,130,.06),rgba(53,201,130,.015))!important; border-color:rgba(53,201,130,.22)!important} .simulator-result{ background:linear-gradient(135deg,rgba(53,201,130,.07),rgba(53,201,130,.02))!important; border-color:rgba(53,201,130,.4)!important} .live-indicator{background:rgba(53,201,130,.12)!important;color:#35c982!important} input[type=range]{accent-color:#35c982;-webkit-appearance:none!important;appearance:none!important;height:20px!important;background:transparent!important;outline:0;cursor:pointer} input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;height:6px!important;border-radius:999px;background:linear-gradient(90deg,#35c982 0,#35c982 var(--pd-fill,20%),rgba(148,163,184,.25) var(--pd-fill,20%),rgba(148,163,184,.25) 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:rgba(148,163,184,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:linear-gradient(90deg,#16a34a,#35c982)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:20px!important;height:20px!important;margin-top:-7px;border-radius:50%;background:#35c982!important;border:2px solid #ecfdf5;box-shadow:0 0 12px rgba(53,201,130,.5),0 2px 6px rgba(0,0,0,.45)!important;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease} input[type=range]::-moz-range-thumb{box-sizing:border-box;width:20px;height:20px;border-radius:50%;background:#35c982!important;border:2px solid #ecfdf5;box-shadow:0 0 12px rgba(53,201,130,.5),0 2px 6px rgba(0,0,0,.45)!important;cursor:pointer} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)} input[type=range]:focus-visible{outline:2px solid rgba(53,201,130,.65);outline-offset:4px;border-radius:999px} .slider-group label{color:#f1f5f9!important} .slider-value{color:#35c982!important;text-shadow:0 0 16px rgba(53,201,130,.3)} .result-label,.result-description{color:#cbd5e1!important}

.hero .btn-group{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center} .hero .btn-group a.btn{border-radius:999px!important;padding:12px 24px!important;min-height:44px; display:inline-flex;align-items:center;gap:8px;font-weight:700!important; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease!important} .hero .btn-group a.btn i{transition:transform .18s ease} .hero .btn-group a.btn-primary{background:linear-gradient(135deg,#35c982,#00c853)!important; border:1px solid #35c982!important;color:#04120a!important; box-shadow:0 6px 20px rgba(53,201,130,.28)!important} .hero .btn-group a.btn-primary:hover{transform:translateY(-2px)!important;box-shadow:0 10px 30px rgba(53,201,130,.45)!important} .hero .btn-group a.btn-secondary{background:transparent!important;border:1px solid rgba(53,201,130,.55)!important;color:#35c982!important} .hero .btn-group a.btn-secondary:hover{transform:translateY(-2px)!important;border-color:#35c982!important;box-shadow:0 8px 24px rgba(53,201,130,.25)!important} .hero .btn-group a.btn:hover i{transform:translateX(3px)} .community-link{border:1px solid rgba(53,201,130,.4)!important;background:rgba(53,201,130,.05)!important; color:#e6eef7!important;border-radius:999px!important;min-height:44px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease!important} .community-link i{color:#35c982!important;transition:transform .18s ease} .community-link:hover{transform:translateY(-2px)!important;border-color:#35c982!important;color:#35c982!important;box-shadow:0 8px 24px rgba(53,201,130,.25)!important} .community-link:hover i{transform:scale(1.12)} .pd-share{gap:1rem!important} .pd-share a{min-height:44px!important;border-radius:999px!important; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease!important} .pd-share a i{transition:transform .18s ease} .pd-share a:hover{transform:translateY(-2px)!important;border-color:#35c982!important;color:#35c982!important; box-shadow:0 8px 20px rgba(53,201,130,.22)!important} .pd-share a:hover i{transform:scale(1.12)} .hero .btn-group a.btn:focus-visible,.community-link:focus-visible,.pd-share a:focus-visible{ outline:2px solid #35c982!important;outline-offset:2px!important}

body,p,h1,h2,h3,h4,h5,h6,span,div,li{font-family:Inter,'Noto Sans Thai',system-ui,sans-serif}

.pd-skip{position:fixed;left:12px;top:-64px;z-index:100000;background:#35c982;color:#04120a;padding:10px 18px;border-radius:8px;font:700 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:top .18s ease}.pd-skip:focus{top:12px;outline:3px solid #fff;outline-offset:2px}

@media (max-width:900px){ html[data-page=impact-metrics] .simulator-grid{ grid-template-columns:minmax(0,1fr)!important;gap:24px!important} html[data-page=impact-metrics] .simulator-controls, html[data-page=impact-metrics] .simulator-result, html[data-page=impact-metrics] .slider-group{ min-width:0!important;max-width:100%!important} html[data-page=impact-metrics] .simulator-result{padding:24px 16px!important} html[data-page=impact-metrics] .result-value{ font-size:clamp(1.5rem,7vw,2.4rem)!important; overflow-wrap:anywhere!important;word-break:break-word!important; line-height:1.15!important;margin:10px 0!important} html[data-page=impact-metrics] .result-label, html[data-page=impact-metrics] .result-description, html[data-page=impact-metrics] .slider-value{overflow-wrap:anywhere!important} html[data-page=impact-metrics] input[type=range]{ width:100%!important;max-width:100%!important;box-sizing:border-box!important} }