@font-face{font-family:Manrope;src:url('./assets/manrope-600.ttf')}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;background:#f5f7f6;color:#123c30;font:13px/1.5 Manrope,system-ui,sans-serif}.demo-header{flex:none;min-height:64px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-bottom:1px solid #d7e4dc}.demo-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:16px;white-space:nowrap}.demo-brand>span{font-size:11px;padding:3px 9px;border-radius:8px;background:#e9f2dd;color:#50734a}.demo-header nav{display:flex;gap:18px;align-items:center}.demo-header nav>a{color:#476f59;text-decoration:none}.demo-header button,.demo-header select,dialog button{font:inherit;background:#fff;border:1px solid #cad9cf;border-radius:8px;color:#193f30;padding:8px 12px;cursor:pointer}.demo-header button:hover,dialog button:hover{background:#f0f6ea}.demo-notice{flex:none;margin:0;padding:8px 24px;background:#eaf0e1;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;text-align:center;line-height:1.6;border-bottom:1px solid #d3dfc9}.demo-dot{width:6px;height:6px;flex:none;border-radius:50%;background:#4a8963}#demo-workspace{flex:1;min-height:0}iframe{border:0;width:100%;height:100%;display:block}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}dialog{border:1px solid #ccdacd;border-radius:18px;max-width:420px;width:calc(100% - 32px);padding:26px;color:#183e30}dialog::backdrop{background:#11392d77}dialog h2{font-size:22px}dialog p{line-height:1.7;color:#617262}.reset-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}dialog .primary{background:#093f33;color:#fff}:focus-visible{outline:3px solid #79a766;outline-offset:3px}@media(max-width:620px){.demo-header{padding:10px 12px;min-height:58px;gap:8px}.demo-brand{gap:6px;font-size:13px}.demo-brand img{width:24px}.demo-brand>span{font-size:9px;padding:2px 5px}.demo-header nav{gap:8px}.demo-header nav>a{display:none}.demo-header button,.demo-header select{padding:7px;font-size:10px}.demo-notice{padding:6px 12px;font-size:10px}.demo-dot{display:none}}

@media(max-width:420px){.demo-header{flex-wrap:wrap}.demo-header nav{margin-left:auto}.demo-header nav button{padding:7px 6px}.demo-brand>span{display:none}}

.demo-header button,.demo-header select{min-height:44px}