:root{color:#202824;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--accent:#254f40;--muted:#737b75;--border:#e5e9e4;background:#f7f8f6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button,input{transition:background-color .15s,border-color .15s,box-shadow .15s}:focus-visible{outline-offset:4px;outline:3px solid #8db9a5}.app-shell{width:min(960px,100% - 80px);margin:0 auto}.site-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:100px;display:flex}.brand{color:inherit;letter-spacing:-.5px;align-items:center;gap:10px;font-size:19px;font-weight:650;text-decoration:none;display:inline-flex}.header-note{color:var(--muted);font-size:13px}main{padding:60px 0 0}.page-heading{margin-bottom:36px}h1{letter-spacing:-1.1px;margin:0 0 14px;font-size:clamp(28px,4vw,38px);font-weight:650;line-height:1.35}.page-heading p{color:var(--muted);margin:0;font-size:14px;line-height:1.8}.demo-list{border:1px solid var(--border);background:#fff;border-radius:18px;padding:0 36px}.demo-section{grid-template-columns:1fr 1.35fr;align-items:start;gap:36px;padding:32px 0;display:grid}.demo-section+.demo-section{border-top:1px solid var(--border)}.section-heading{gap:16px;padding-top:3px;display:flex}.section-number{color:#959d96;font-variant-numeric:tabular-nums;padding-top:3px;font-size:12px}h2{margin:0 0 9px;font-size:17px;font-weight:600}.section-heading p{color:var(--muted);margin:0;font-size:12px;line-height:1.8}.section-content{min-width:0}.button{border:1px solid #0000;border-radius:8px;min-height:44px;padding:0 20px;font-size:13px;font-weight:550}.button-primary{background:var(--accent);color:#fff;align-items:center;gap:24px;display:inline-flex}.button-primary:hover{background:#183e30}.button-primary svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.button-primary:active,.counter-button:active{transform:translateY(1px)}.button-secondary{border-color:var(--border);color:#46524a;white-space:nowrap;background:#fff}.button-secondary:hover:not(:disabled){background:#f3f6f2}.feedback{min-height:20px;color:var(--muted);margin:14px 0 0;font-size:12px;line-height:1.7}.feedback-success{color:var(--accent)}.input-label-row{justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;display:flex}.input-label-row span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.input-row{gap:10px;display:flex}input{color:#202824;background:#fff;border:1px solid #dce2dc;border-radius:8px;width:100%;min-width:0;height:44px;padding:0 14px;font-size:13px}input::placeholder{color:#939b95}input:focus{border-color:#638e79;outline:none;box-shadow:0 0 0 3px #eef4ef}.text-preview{background:#f7f8f6;border-radius:8px;margin-top:14px;padding:14px 16px}.preview-label{color:var(--muted);font-size:10px}.text-preview p{overflow-wrap:anywhere;white-space:pre-wrap;min-height:22px;margin:7px 0 0;font-size:13px;line-height:1.75}.placeholder-text{color:#8a928c}.counter-panel{text-align:center;background:#f0f5f0;border-radius:12px;padding:23px 20px 16px}.counter-controls{justify-content:center;align-items:center;gap:24px;display:flex}.counter-button{width:42px;height:42px;color:var(--accent);background:#fff;border:1px solid #d9e3d9;border-radius:50%;flex-shrink:0;place-items:center;display:grid}.counter-button:hover{background:#e4eee4;border-color:#b5cbb8}.counter-button svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;width:18px;height:18px}.count{color:var(--accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:80px;font-size:42px;font-weight:500;line-height:1.2}.reset-button{min-height:36px;color:var(--accent);background:0 0;border:0;border-radius:5px;margin-top:10px;padding:4px 12px;font-size:11px}.reset-button:hover:not(:disabled){background:#e4eee4}footer{color:#858d86;justify-content:space-between;padding:25px 0 36px;font-size:11px;display:flex}@media (width<=680px){.app-shell{width:calc(100% - 40px)}.site-header{height:78px}.header-note{font-size:11px}main{padding-top:38px}.page-heading{margin-bottom:28px}.page-heading p{max-width:290px;font-size:13px}.demo-list{border-radius:14px;padding:0 22px}.demo-section{grid-template-columns:1fr;gap:22px;padding:26px 0}.section-heading{gap:12px}.section-heading p{font-size:12px}.counter-controls{gap:18px}footer{font-size:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important}}