:root{--dev-bg:#f5f8f7;--dev-card:#fff;--dev-ink:#10231f;--dev-muted:#61736e;--dev-line:#dbe7e3;--dev-brand:#0f9f84;--dev-brand-dark:#08745f;--dev-gold:#e8bb73;--dev-code:#071714;--dev-code-2:#0d211d;--dev-code-text:#d9f6ee;--dev-danger:#b42318;--dev-warn:#b54708;--dev-ok:#067647;--dev-shadow:0 18px 45px rgba(12,55,45,.09)}
*{box-sizing:border-box}.dev-page,.dev-directory{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--dev-ink);background:var(--dev-bg);padding:22px min(4vw,50px) 60px}.dev-page{max-width:1500px;margin:0 auto}.dev-directory{max-width:1500px;margin:0 auto}.dev-breadcrumb{max-width:1380px;margin:0 auto 14px;display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--dev-muted);overflow:hidden;white-space:nowrap}.dev-breadcrumb a{color:var(--dev-brand-dark);text-decoration:none;font-weight:800}.dev-kicker{text-transform:uppercase;letter-spacing:.12em;color:var(--dev-brand-dark);font-size:.72rem;font-weight:900}.dev-hero,.dev-directory-hero{max-width:1380px;margin:0 auto 18px;border:1px solid var(--dev-line);background:linear-gradient(135deg,#fff 0%,#effbf7 100%);border-radius:18px;padding:22px 24px;display:flex;gap:16px;align-items:center;box-shadow:0 7px 25px rgba(12,55,45,.05)}.dev-directory-hero{display:block;text-align:center;padding:34px min(6vw,72px)}.dev-hero-icon{width:52px;height:52px;flex:0 0 auto;border-radius:14px;background:linear-gradient(135deg,var(--dev-brand),#14b89a);display:grid;place-items:center;color:#fff;font-size:1.3rem;box-shadow:0 10px 22px rgba(15,159,132,.2)}.dev-hero h1,.dev-directory-hero h1{margin:4px 0 6px;font-size:clamp(1.55rem,3vw,2.45rem);line-height:1.1}.dev-hero p,.dev-directory-hero p{margin:0;max-width:900px;color:var(--dev-muted);line-height:1.6}.dev-directory-hero p{margin:8px auto 0}.dev-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.dev-directory-hero .dev-trust{justify-content:center}.dev-trust span{display:inline-flex;gap:6px;align-items:center;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid var(--dev-line);font-size:.75rem;font-weight:800;color:#36534b}.dev-trust i{color:var(--dev-brand)}
.dev-workspace-shell{max-width:1380px;margin:0 auto 16px}.dev-app{border:1px solid #173b32;border-radius:18px;overflow:hidden;background:var(--dev-code);box-shadow:0 24px 60px rgba(4,25,20,.18)}.dev-loading{min-height:360px;display:grid;place-items:center;align-content:center;gap:10px;color:#b7d6ce}.dev-loading i{font-size:2rem;color:#66dfc4}.dev-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#0a1d18;border-bottom:1px solid #1b4037}.dev-brandmark{display:flex;align-items:center;gap:7px;color:#e8fff8;font-weight:900;margin-right:auto;font-size:.88rem}.dev-brandmark i{color:#73e2c9}.dev-btn,.dev-select,.dev-input-small{border:1px solid #2c5047;background:#102b24;color:#dffaf2;border-radius:9px;min-height:38px;padding:8px 11px;font:800 .78rem/1 Inter,system-ui,sans-serif}.dev-btn{cursor:pointer;display:inline-flex;align-items:center;gap:7px}.dev-btn:hover{background:#16372f}.dev-btn-primary{background:var(--dev-brand);border-color:var(--dev-brand);color:#fff}.dev-btn-primary:hover{background:#0d8a73}.dev-btn-light{background:#f7fffc;color:#153f35;border-color:#c7e5dc}.dev-btn-light:hover{background:#eafaf5}.dev-btn-danger{color:#ffcbc6}.dev-auto{display:inline-flex;gap:7px;align-items:center;color:#b9d3cc;font-size:.76rem;font-weight:700;padding:0 4px}.dev-auto input{accent-color:var(--dev-brand)}
.dev-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:610px}.dev-code-side{min-width:0;background:#071714;border-right:1px solid #1c4037;display:flex;flex-direction:column}.dev-preview-side{min-width:0;background:#e7efec;display:flex;flex-direction:column}.dev-tabs{display:flex;overflow:auto;background:#0c231d;border-bottom:1px solid #21463d;scrollbar-width:thin}.dev-tab{border:0;background:transparent;color:#92b9af;padding:11px 14px;font-size:.78rem;font-weight:900;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}.dev-tab.is-active{color:#fff;border-color:#5ee0c2;background:#102b24}.dev-editor-panel{display:none;flex:1;min-height:0}.dev-editor-panel.is-active{display:flex}.dev-codearea{width:100%;min-height:520px;resize:none;border:0;outline:0;background:#071714;color:#d9f6ee;padding:16px 18px;font:13.5px/1.62 "SFMono-Regular",Consolas,"Liberation Mono",monospace;tab-size:2;caret-color:#7cebd2}.dev-codearea::selection{background:#195e4f}.dev-preview-toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:9px;background:#f7fbf9;border-bottom:1px solid #ccdcd7}.dev-preview-toolbar strong{font-size:.75rem;margin-right:auto;color:#34534b}.dev-viewport-btn{border:1px solid #c5d8d2;background:#fff;border-radius:8px;padding:7px 9px;color:#48655d;font-weight:800;font-size:.72rem;cursor:pointer}.dev-viewport-btn.is-active{background:#e4f8f2;color:#08745f;border-color:#8bd8c6}.dev-preview-stage{flex:1;min-height:0;padding:14px;overflow:auto;display:flex;justify-content:center;align-items:flex-start}.dev-preview-frame{width:100%;height:100%;min-height:515px;background:#fff;border:0;border-radius:8px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:width .25s ease}.dev-console{border-top:1px solid #21463d;background:#06120f;max-height:180px;overflow:auto}.dev-console-head{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;color:#a9c7bf;border-bottom:1px solid #17352e;font-size:.72rem;font-weight:900}.dev-console-list{padding:8px 12px;display:grid;gap:5px;font:12px/1.45 Consolas,monospace}.dev-console-line{color:#d4e9e3;word-break:break-word}.dev-console-line.warn{color:#ffd18a}.dev-console-line.error{color:#ff9a91}.dev-console-empty{color:#76968e;font-style:italic}.dev-tool-note{padding:8px 12px;background:#0d251f;color:#90b8ad;font-size:.7rem;border-top:1px solid #1b4037}
.dev-simple{padding:14px;background:#eef5f2}.dev-simple-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.dev-panel{background:#fff;border:1px solid #d3e1dd;border-radius:14px;overflow:hidden;box-shadow:0 7px 20px rgba(11,55,45,.05)}.dev-panel-head{padding:12px 14px;border-bottom:1px solid #e1ebe8;display:flex;align-items:center;justify-content:space-between;gap:10px}.dev-panel-head h2,.dev-panel-head h3{font-size:.88rem;margin:0}.dev-panel-body{padding:14px}.dev-textarea,.dev-field input,.dev-field textarea,.dev-field select{width:100%;border:1px solid #cbdcd7;background:#fff;border-radius:10px;padding:11px;color:#163a31;font:13px/1.55 "SFMono-Regular",Consolas,monospace;outline:0}.dev-textarea{min-height:430px;resize:vertical}.dev-textarea:focus,.dev-field input:focus,.dev-field textarea:focus,.dev-field select:focus{border-color:#52bfa8;box-shadow:0 0 0 3px rgba(20,184,154,.12)}.dev-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.dev-output{min-height:430px;background:#071714;color:#d9f6ee;border-radius:10px;padding:13px;white-space:pre-wrap;overflow:auto;font:13px/1.55 Consolas,monospace}.dev-statline{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.dev-stat{font-size:.72rem;font-weight:800;border:1px solid #d0e1db;background:#f6fbf9;border-radius:999px;padding:6px 9px;color:#42645b}
.dev-report{display:grid;gap:14px}.dev-score-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.dev-score-card{border:1px solid #d7e5e1;border-radius:13px;padding:14px;background:#fff}.dev-score-card strong{display:block;font-size:1.55rem}.dev-score-card span{font-size:.73rem;color:#60746e;font-weight:800}.dev-score-card.overall{background:#0b2a22;color:#fff;border-color:#0b2a22}.dev-score-card.overall span{color:#acd3c8}.dev-issues{display:grid;gap:8px}.dev-issue{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 12px;border:1px solid #dce8e4;border-radius:11px;background:#fff}.dev-issue i{margin-top:2px}.dev-issue.error i{color:var(--dev-danger)}.dev-issue.warn i{color:var(--dev-warn)}.dev-issue.pass i{color:var(--dev-ok)}.dev-issue strong{display:block;font-size:.82rem}.dev-issue small{display:block;color:#667b74;line-height:1.45;margin-top:2px}.dev-report-summary{padding:11px 13px;border-radius:11px;background:#edf8f4;border:1px solid #c9e9df;color:#28584b;font-size:.82rem;line-height:1.5}
.dev-responsive-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.dev-responsive-controls label{font-size:.76rem;font-weight:900;color:#3d5c54}.dev-responsive-board{display:flex;gap:14px;overflow:auto;align-items:flex-start;padding-bottom:6px}.dev-device{flex:0 0 auto;background:#17231f;border-radius:16px;padding:8px;box-shadow:0 9px 25px rgba(0,0,0,.13)}.dev-device-label{color:#d8ebe5;padding:3px 3px 8px;font-size:.69rem;font-weight:800;text-align:center}.dev-device iframe{display:block;background:#fff;border:0;border-radius:9px;height:560px}.dev-device.desktop iframe{width:1024px}.dev-device.tablet iframe{width:768px}.dev-device.mobile iframe{width:390px}.dev-device.custom iframe{width:var(--custom-width,480px)}
.dev-source-switch{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.dev-source-switch .is-active{background:#dff5ee;border-color:#87cdbb;color:#086b58}.dev-inline-help{font-size:.72rem!important;line-height:1.45!important;color:#667a74!important;margin:7px 0 11px!important}
.dev-fields{display:grid;gap:11px}.dev-field{display:grid;gap:5px}.dev-field label,.dev-field>span{font-size:.75rem;font-weight:900;color:#36564d}.dev-meta-results{display:grid;gap:9px}.dev-meta-item{padding:11px;border:1px solid #d8e5e1;border-radius:10px;background:#fff}.dev-meta-item b{display:flex;justify-content:space-between;gap:10px;font-size:.78rem}.dev-meta-item p{margin:5px 0 0;color:#5f746d;font-size:.78rem;word-break:break-word}.dev-badge{font-size:.65rem;border-radius:999px;padding:3px 7px;background:#edf4f2;color:#49665e}.dev-badge.good{background:#e6f6ef;color:#087443}.dev-badge.warn{background:#fff3df;color:#9a5b00}.dev-badge.bad{background:#ffebe9;color:#a72b21}
.dev-og-card{max-width:560px;border:1px solid #d5dfdc;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(10,40,33,.08)}.dev-og-image{aspect-ratio:1.91/1;background:#eef3f1 center/cover no-repeat;display:grid;place-items:center;color:#83958f;font-weight:800}.dev-og-copy{padding:12px}.dev-og-domain{font-size:.68rem;text-transform:uppercase;color:#6f817c}.dev-og-title{font-size:1rem;font-weight:900;margin:4px 0}.dev-og-desc{font-size:.78rem;color:#5c706a;line-height:1.45}.dev-generated-code{margin-top:12px;background:#071714;color:#d9f6ee;border-radius:10px;padding:12px;white-space:pre-wrap;word-break:break-word;font:12px/1.5 Consolas,monospace}
.dev-playground{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px}.dev-control-card,.dev-demo-card{background:#fff;border:1px solid #d5e3df;border-radius:14px;padding:14px}.dev-controls{display:grid;gap:12px}.dev-control{display:grid;gap:5px}.dev-control label{font-size:.73rem;font-weight:900;color:#38584f}.dev-control input[type=range]{width:100%;accent-color:var(--dev-brand)}.dev-control select,.dev-control input[type=color],.dev-control input[type=number],.dev-control input[type=text]{width:100%;min-height:38px;border:1px solid #c9dad5;border-radius:9px;background:#fff;padding:7px}.dev-flex-demo,.dev-grid-demo{min-height:360px;border:1px dashed #99bcb2;border-radius:12px;padding:14px;background:linear-gradient(45deg,#f7fbfa 25%,#eef5f2 25%,#eef5f2 50%,#f7fbfa 50%,#f7fbfa 75%,#eef5f2 75%);background-size:24px 24px}.dev-demo-item{display:grid;place-items:center;min-width:70px;min-height:70px;padding:12px;border-radius:9px;background:#0f9f84;color:#fff;font-weight:900;box-shadow:0 4px 10px rgba(15,159,132,.18)}.dev-gradient-preview{min-height:370px;border-radius:14px;border:1px solid #d2dfdb;display:grid;place-items:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35);font-size:1.15rem;font-weight:900}.dev-css-output{margin-top:12px;display:flex;gap:8px}.dev-css-output code{flex:1;background:#071714;color:#d9f6ee;padding:11px;border-radius:9px;word-break:break-all;font-size:.76rem}
.dev-content-section,.dev-related{max-width:1180px;margin:16px auto 0;background:#fff;border:1px solid var(--dev-line);border-radius:16px;padding:24px;box-shadow:0 7px 25px rgba(12,55,45,.04)}.dev-content-section h2,.dev-related h2{margin:5px 0 12px;font-size:clamp(1.2rem,2vw,1.65rem)}.dev-content-section p{color:#536b64;line-height:1.75}.dev-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dev-check-grid>div{display:flex;gap:9px;align-items:flex-start;padding:11px;border-radius:10px;background:#f5faf8;border:1px solid #e1ebe8;font-size:.82rem;font-weight:700}.dev-check-grid i{color:var(--dev-brand);margin-top:2px}.dev-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.dev-steps li{border:1px solid #dce8e4;border-radius:12px;padding:13px;display:flex;gap:10px}.dev-steps>li>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#0f9f84;color:#fff;font-size:.72rem;font-weight:900;flex:0 0 auto}.dev-steps strong{font-size:.82rem}.dev-steps p{font-size:.77rem;margin:4px 0 0;line-height:1.5}.dev-two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px}.dev-two-col ul{padding-left:18px;color:#536b64;line-height:1.7}.dev-faq{display:grid;gap:8px}.dev-faq details{border:1px solid #dce8e4;border-radius:10px;padding:11px 13px}.dev-faq summary{cursor:pointer;font-weight:850;font-size:.85rem}.dev-faq p{margin:8px 0 0;font-size:.8rem}.dev-related{display:flex;justify-content:space-between;gap:20px;align-items:center}.dev-related-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.dev-related-links a{padding:8px 10px;border-radius:9px;background:#edf8f4;color:#08745f;text-decoration:none;font-weight:850;font-size:.76rem}
.dev-directory-feature,.dev-directory-section,.dev-directory-copy{max-width:1380px;margin:18px auto 0}.dev-directory-feature{border-radius:18px;padding:26px;background:linear-gradient(135deg,#071714,#0d3027);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}.dev-directory-feature h2{font-size:clamp(1.5rem,3vw,2.4rem);margin:5px 0 8px}.dev-directory-feature p{color:#b8d3cc;line-height:1.6}.dev-directory-feature a{display:inline-flex;gap:8px;align-items:center;color:#071714;background:#65e3c7;border-radius:10px;padding:11px 14px;text-decoration:none;font-weight:900;margin-top:6px}.dev-mini-browser{background:#eff7f4;border-radius:14px;overflow:hidden;box-shadow:0 15px 35px rgba(0,0,0,.2)}.dev-mini-top{height:34px;background:#dbe9e4;display:flex;gap:5px;align-items:center;padding:0 10px}.dev-mini-top i{width:8px;height:8px;border-radius:50%;background:#8aa49c}.dev-mini-code{padding:20px;display:grid;gap:12px;color:#17483c;font:13px/1.4 Consolas,monospace}.dev-directory-section{background:#fff;border:1px solid var(--dev-line);border-radius:18px;padding:24px}.dev-section-heading{text-align:center;max-width:780px;margin:0 auto 20px}.dev-section-heading h2{margin:5px 0}.dev-section-heading p{color:var(--dev-muted)}.dev-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.dev-directory-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid #dce8e4;border-radius:13px;padding:14px;text-decoration:none;color:var(--dev-ink);transition:.2s}.dev-directory-card:hover{transform:translateY(-2px);border-color:#79cdb9;box-shadow:0 10px 24px rgba(12,55,45,.08)}.dev-directory-icon{width:40px;height:40px;border-radius:10px;background:#eaf8f4;color:#0d8a73;display:grid;place-items:center}.dev-directory-card strong{display:block;font-size:.86rem}.dev-directory-card small{display:block;color:#687c76;font-size:.72rem;line-height:1.4;margin-top:3px}.dev-card-arrow{color:#89a49c}.dev-directory-copy{background:#fff;border:1px solid var(--dev-line);border-radius:18px;padding:24px}.dev-directory-copy p{color:#536b64;line-height:1.75}
@media(max-width:980px){.dev-editor-layout{grid-template-columns:1fr;min-height:auto}.dev-code-side{border-right:0;border-bottom:1px solid #1c4037}.dev-codearea{min-height:360px}.dev-preview-frame{min-height:430px}.dev-simple-grid{grid-template-columns:1fr}.dev-playground{grid-template-columns:1fr}.dev-score-row{grid-template-columns:repeat(3,1fr)}.dev-steps{grid-template-columns:repeat(2,1fr)}.dev-directory-grid{grid-template-columns:repeat(2,1fr)}.dev-directory-feature{grid-template-columns:1fr}.dev-related{align-items:flex-start;flex-direction:column}.dev-related-links{justify-content:flex-start}}
@media(max-width:680px){.dev-page,.dev-directory{padding:10px 7px 34px}.dev-breadcrumb{padding:0 5px}.dev-hero{padding:14px 13px;align-items:flex-start;border-radius:14px}.dev-hero-icon{width:42px;height:42px;border-radius:11px}.dev-hero h1{font-size:1.35rem}.dev-hero p{font-size:.82rem}.dev-trust span{font-size:.67rem;padding:6px 8px}.dev-app{border-radius:13px}.dev-toolbar{padding:8px;gap:6px}.dev-brandmark{width:100%;margin-bottom:2px}.dev-btn,.dev-select,.dev-input-small{min-height:40px}.dev-codearea{min-height:330px;font-size:12.5px;padding:13px}.dev-preview-stage{padding:8px}.dev-preview-frame{min-height:390px}.dev-preview-toolbar strong{width:100%}.dev-simple{padding:8px}.dev-panel-body{padding:9px}.dev-textarea,.dev-output{min-height:330px}.dev-score-row{grid-template-columns:repeat(2,1fr)}.dev-score-card.overall{grid-column:span 2}.dev-responsive-board{padding-bottom:12px}.dev-device.desktop iframe{width:920px}.dev-device.tablet iframe{width:700px}.dev-device.mobile iframe{width:360px}.dev-content-section,.dev-related{padding:17px 14px;border-radius:13px;margin-top:10px}.dev-check-grid,.dev-steps,.dev-two-col{grid-template-columns:1fr}.dev-directory-hero{padding:26px 16px;border-radius:14px}.dev-directory-grid{grid-template-columns:1fr}.dev-directory-section,.dev-directory-copy{padding:16px 12px}.dev-directory-feature{padding:20px 15px}.dev-og-card{max-width:100%}.dev-css-output{flex-direction:column}.dev-gradient-preview{min-height:280px}}

@media(min-width:761px){.dev-page,.dev-directory{width:90%;max-width:1500px;margin-left:auto;margin-right:auto}}