:root { --color-index: #72b872; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#f5f7f4; font-family:-apple-system,"Segoe UI",sans-serif; }
.demo-head { background:linear-gradient(135deg,#72b872,#4d8f4d); padding:2.5em 1em 1.8em; text-align:center; }
.demo-head h1 { font-size:2em; color:#fff; font-weight:700; letter-spacing:2px; }
.demo-head p { color:rgba(255,255,255,.8); margin:.4em 0 0; font-size:.95em; }
.demo-head .version { font-weight:300; opacity:.8; }
.demo-body { max-width:1100px; margin:0 auto; padding:1.2em; }
.demo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1em; }
.demo-card { background:#fff; border-radius:10px; padding:1.4em 1.2em; box-shadow:0 2px 8px rgba(0,0,0,.06); transition:transform .2s,box-shadow .2s; cursor:pointer; text-decoration:none; display:block; border-left:4px solid #72b872; }
.demo-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.demo-card .icon { font-size:1.6em; color:#72b872; display:block; margin-bottom:.5em; }
.demo-card h3 { margin:0 0 .3em; font-size:1.05em; color:#32302b; font-weight:600; }
.demo-card p { margin:0; font-size:.85em; color:#8e8b80; line-height:1.5; }
.demo-section-title { font-size:1.1em; font-weight:600; color:#32302b; margin:1.6em 0 .8em; padding-left:.6em; border-left:3px solid #72b872; }
.demo-foot { text-align:center; padding:2em 1em; color:#8e8b80; font-size:.85em; }
.demo-foot a { color:#72b872; }

.remote-box { background:#fff; border-radius:10px; padding:1.2em; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:1em; overflow-x:auto; }
.remote-box h4 { font-size:1em; color:#32302b; margin:0 0 .6em; font-weight:600; }
.remote-box code { display:block; background:#f8f9fa; padding:.5em .8em; border-radius:4px; font-size:.85em; color:#504d45; margin:.3em 0; word-break:break-all; border:1px solid #e6e1d8; }
.remote-box .tag { display:inline-block; background:#72b872; color:#fff; font-size:.75em; padding:.15em .5em; border-radius:3px; margin-right:.4em; }

.skill-section { background:#fff; border-radius:10px; padding:1.2em; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:1em; }
.skill-section h4 { font-size:1em; color:#32302b; margin:0 0 .6em; font-weight:600; }
.skill-section h5 { font-size:.93em; color:#504d45; margin:.8em 0 .3em; font-weight:600; }
.skill-section table { width:100%; border-collapse:collapse; font-size:.85em; margin:.4em 0; }
.skill-section table th { text-align:left; padding:.35em .5em; background:#f0faf0; font-weight:600; color:#32302b; border-bottom:1px solid #e6e1d8; }
.skill-section table td { padding:.35em .5em; border-bottom:1px solid #f5f5f5; color:#504d45; }
.skill-section code { background:#f8f9fa; padding:.15em .4em; border-radius:3px; font-size:.9em; color:#504d45; }
.skill-section .demo-footnote { font-size:.85em; color:#8e8b80; margin:.6em 0 0; line-height:1.6; }
.skill-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.6em; margin:.4em 0; }
.skill-grid .skill-item { background:#f8f9fa; border-radius:6px; padding:.5em .7em; font-size:.85em; color:#504d45; border:1px solid #e6e1d8; }
.skill-grid .skill-item .fn { font-weight:600; color:#32302b; }