:root{color:#17342a;font-synthesis:none;background:#f3f8f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 0,#e2f7ec 0,#0000 32%),#f3f8f5;min-width:320px;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}.demo-shell{width:min(1240px,100% - 32px);margin:0 auto;padding:40px 0 72px}.hero-panel{color:#fff;background:linear-gradient(135deg,#102b22,#176b4c 70%,#42b883);border-radius:28px;padding:52px;position:relative;overflow:hidden;box-shadow:0 28px 80px #12533d38}.hero-panel:after{content:"";border:60px solid #ffffff14;border-radius:50%;width:280px;height:280px;position:absolute;top:-100px;right:-80px}.eyebrow,.section-index,.case-label{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}.hero-panel h1{max-width:800px;margin:10px 0;font-size:clamp(34px,6vw,68px);line-height:1}.hero-copy{color:#fffc;max-width:760px;font-size:18px;line-height:1.7}.hero-badges,.badge-row,.fragment-row,.button-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.hero-badges span{background:#ffffff1a;border:1px solid #ffffff38;border-radius:999px;padding:8px 12px}.demo-section{padding:54px 0 12px;scroll-margin-top:20px}.section-heading{grid-template-columns:120px 1fr;align-items:start;gap:20px;margin-bottom:22px;display:grid}.section-index{color:#21845f;margin-top:9px}.section-heading h2{margin:0 0 8px;font-size:32px}.section-heading p{color:#5e766d;margin:0}.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px;display:grid}.demo-card{background:#ffffffe6;border:1px solid #dcebe3;border-radius:20px;min-width:0;padding:24px;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 34px #16473614}.demo-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px #1647361f}.demo-card h3{margin:8px 0 10px;font-size:21px}.demo-card p{color:#587067;line-height:1.65}.demo-card.active{outline:2px solid #42b883}.case-label{color:#21845f}.wide-card{grid-column:1/-1}.compact-card{min-height:180px}.hmr-card{border-style:dashed}.spread-card{--spread:true}.button{color:#fff;background:#21845f;border:0;border-radius:11px;padding:10px 15px;box-shadow:0 6px 14px #21845f2e}.button:hover{background:#176b4c}.button.secondary{color:#176b4c;box-shadow:none;background:#e4f5ec}.control{background:#fff;border:1px solid #c8ddd3;border-radius:10px;outline:none;width:100%;min-height:42px;padding:10px 12px}.control:focus{border-color:#42b883;box-shadow:0 0 0 3px #42b88321}.field-row{gap:6px;display:grid}.field-row>span{color:#647a72;font-size:13px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:14px;display:grid}.badge{color:#176b4c;background:#e4f5ec;border-radius:999px;align-items:center;padding:5px 9px;font-size:12px;font-weight:800;display:inline-flex}.badge-global{color:#644b11;background:#fff3ca}.metric{background:#eef8f3;border-radius:12px;justify-content:space-between;align-items:baseline;padding:12px;display:flex}.metric strong{font-size:26px}.slot-host{border:1px dashed #9ecbb7;border-radius:14px;gap:10px;padding:14px;display:grid}.slot-host header,.slot-host footer{color:#21845f}.fragment-row{background:#eef8f3;border-radius:12px;padding:12px}.demo-icon{color:#21845f;width:28px;height:28px}pre{color:#d8ffe9;background:#102b22;border-radius:12px;padding:14px;font-size:12px;overflow:auto}.section-note{text-align:right;color:#5e766d;grid-column:1/-1;margin:0}.demo-footer{text-align:center;color:#5e766d;border-top:1px solid #dcebe3;margin-top:56px;padding:24px}@media (width<=760px){.demo-shell{width:min(100% - 20px,1240px);padding-top:10px}.hero-panel{border-radius:20px;padding:30px 24px}.section-heading{grid-template-columns:1fr;gap:4px}.demo-grid,.form-grid{grid-template-columns:1fr}.wide-card{grid-column:auto}}.inline-options{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.inline-options label{color:#52685f;align-items:center;gap:6px;display:inline-flex}.result-line{color:#315c4a;overflow-wrap:anywhere;background:#f1f8f5;border-radius:10px;padding:10px 12px}
