@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#0c120d;--fg:#f1f8ea;--muted:#9cb496;--edge:#334e36;--lime:#c7ff69;font-family:'DM Sans',sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg)}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:2px}::selection{background:var(--lime);color:#152012}.app{min-height:100vh}.mast{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:0 clamp(15px,3vw,50px);border-bottom:1px solid var(--edge);height:78px;background:#101a12}.mast-brand{display:flex;align-items:center;gap:13px}.brand-symbol{font:700 36px/1 'Space Grotesk';color:var(--lime)}.mast-brand strong{font:800 22px 'Space Grotesk';letter-spacing:-.065em;display:block}.mast-brand strong span{color:var(--lime)}.mast-brand small{display:block;color:#829d80;font:700 9px 'Space Mono';margin-top:2px}.mast-center{font:700 10px 'Space Mono',monospace;letter-spacing:.04em;color:#9cb894}.mast-center i{display:inline-block;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:9px;box-shadow:0 0 12px #c7ff6966}.mast-contact{padding:13px 16px;background:var(--lime);color:#142210;font-size:12px;font-weight:800;white-space:nowrap}.mast-contact span{margin-left:15px;font-size:17px}.headline{display:flex;gap:50px;justify-content:space-between;align-items:end;padding:45px clamp(15px,3vw,50px);border-bottom:1px solid var(--edge)}.eyebrow{font:700 10px 'Space Mono',monospace;letter-spacing:.06em;color:#b9df89}.headline h1{font:800 clamp(40px,5vw,76px)/.96 'Space Grotesk';letter-spacing:-.075em;margin:17px 0 0}.headline h1 em{font-style:normal;color:var(--lime)}.headline>p{font-size:13px;line-height:1.75;color:#afc2a8;max-width:410px;margin:0}
.workbench{display:grid;grid-template-columns:minmax(250px,285px) minmax(440px,1fr) minmax(260px,294px);gap:0;height:min(820px,calc(100vh - 230px));min-height:575px;border-bottom:1px solid var(--edge)}.library,.customize{background:#111b13;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#719158 #182a1c}.library{border-right:1px solid var(--edge)}.customize{border-left:1px solid var(--edge)}.panel-title{padding:22px 20px 14px;border-bottom:1px solid var(--edge)}.panel-title strong{display:flex;gap:10px;align-items:baseline;font:700 24px 'Space Grotesk',sans-serif;letter-spacing:-.045em;margin-top:8px}.panel-title strong>span{font:700 13px 'Space Mono';color:var(--lime)}.search-label{display:flex;gap:7px;align-items:center;padding:9px 11px;border:1px solid #4d674a;background:#19291c;margin:14px 12px}.search-label span{color:var(--lime);font-size:26px}.search-label input{width:100%;background:transparent;border:0;color:#eaffdc;font-size:12px;min-width:0;outline:0!important}.search-label input::placeholder{color:#89a486}.filter-strip{display:flex;gap:5px;overflow-x:auto;padding:0 12px 13px;scrollbar-width:thin}.filter-strip button{flex:none;background:#1c2a20;border:1px solid #39563c;color:#afc9a7;font-size:10px;padding:9px 10px;font-weight:700}.filter-strip button.active{background:var(--lime);color:#102413;border-color:var(--lime)}
.styles-list{padding:0 12px 15px}.style-card{display:flex;text-align:left;align-items:center;gap:10px;background:#1b281d;border:1px solid #334b37;color:#eaf6e4;width:100%;margin-bottom:8px;padding:10px;transition:background .2s,border-color .2s}.style-card.active{border-color:#c7ff69;background:#30442c}.style-card:hover{border-color:#80b45b}.style-card .thumb{flex:0 0 72px;height:63px;position:relative;overflow:hidden;background:var(--sw-bg);color:var(--sw-fg);border:1px solid #ffffff31}.thumb .thumb-decoration{position:absolute;width:63px;height:63px;right:-14px;top:-12px;border-radius:50%;background:var(--sw-accent);opacity:.58}.thumb .thumb-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:8px;z-index:1}.thumb .thumb-text strong{font:900 9px 'Space Grotesk';letter-spacing:-.04em;max-width:85%}.thumb .thumb-text span{height:5px;width:35px;background:var(--sw-accent)}.style-card .style-name{font:700 14px 'Space Grotesk';letter-spacing:-.03em;margin:0}.style-card .style-kind{font:700 9px 'Space Mono',monospace;color:#a5bb9a;margin:7px 0 0}.style-card .style-number{font:700 9px 'Space Mono';color:#b4da80}.style-card .style-premium{font:700 8px 'Space Mono';background:#d1ff89;color:#182313;padding:3px 5px;margin-left:4px}.library-foot{display:flex;justify-content:space-between;gap:5px;padding:15px 18px;border-top:1px solid #354d35;color:#8eaf84;font:700 9px 'Space Mono'}
.preview-area{display:flex;flex-direction:column;min-width:0;background:#1b271b}.preview-head{height:75px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 20px;border-bottom:1px solid var(--edge)}.preview-head strong{font:700 20px 'Space Grotesk';display:block;margin-top:5px}.preview-head small{display:block;color:#98b48e;font:700 9px 'Space Mono'}.screen-switch{display:flex;gap:3px;padding:3px;border:1px solid #486247}.screen-switch button{border:0;background:transparent;padding:7px 10px;color:#a7c29e;font:700 11px 'DM Sans';white-space:nowrap}.screen-switch button.active{background:var(--lime);color:#18300b}.screen-switch button span{font-size:17px;margin-right:4px}.preview-canvas{min-height:0;flex:1;background:radial-gradient(circle at center,#3e5741,#1e2c20);padding:20px;overflow:hidden;display:flex;align-items:stretch;justify-content:center}.browser-frame{display:flex;flex-direction:column;width:100%;max-width:100%;height:100%;background:white;box-shadow:0 20px 60px #0006;transition:width .3s ease}.browser-frame.mobile{width:min(390px,100%)}.browser-frame.tablet{width:min(820px,100%)}.browser-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:37px;padding:0 13px;background:#121a15;color:#b8c8b0;border-bottom:1px solid #324532;font:700 10px 'Space Mono';flex:none}.browser-dots{display:flex;gap:6px}.browser-dots i{height:7px;width:7px;border-radius:50%;background:#d66d6d}.browser-dots i:nth-child(2){background:#d7ac69}.browser-dots i:nth-child(3){background:#a4d267}.live-status{color:#b3ef8d}.browser-frame iframe{width:100%;height:100%;border:0;background:white;flex:1;min-height:0}.preview-loading{position:absolute;background:#16241d;color:#deffbf;inset:57px 25px 55px;display:grid;place-items:center;pointer-events:none;font:700 14px 'Space Mono'}.preview-loading[hidden]{display:none}.preview-canvas{position:relative}.preview-foot{height:52px;flex:none;display:flex;gap:12px;justify-content:space-between;align-items:center;padding:0 17px;font:700 10px 'Space Mono';color:#9bb597;border-top:1px solid var(--edge)}.preview-foot strong{color:#c2f5aa}.preview-foot button{border:0;background:none;color:#dcffb9;font:700 10px 'DM Sans'}
.customize .panel-title strong{font-size:26px}.lime{color:var(--lime)}.customize-intro{font-size:12px;line-height:1.7;color:#b3c9ad;padding:0 20px;margin:17px 0}.field{padding:0 20px;margin:15px 0}.field label,.section-label{font:700 10px 'Space Mono',monospace;color:#bddcac;letter-spacing:.03em;display:block;margin-bottom:7px}.field input,.field textarea{padding:10px 11px;resize:vertical;border:1px solid #4e6f4c;background:#17291c;color:#e7ffe3;width:100%;font-size:12px;line-height:1.5}.field textarea{min-height:72px}.color-settings{padding:15px 20px;border-top:1px solid #3e5b40}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-grid label{display:flex;align-items:center;gap:9px;font:700 11px 'DM Sans';color:#d4eec7}.color-grid input{width:42px;height:38px;border:1px solid #5b8158;padding:2px;background:transparent}.reset{display:block;margin:2px 20px 18px;background:none;border:1px solid #526f52;color:#c2e8b6;padding:11px 13px;font-size:11px;font-weight:700}.client-cta{margin:14px 12px 18px;padding:21px 18px;background:#234328;border:1px solid #779d60}.client-cta h2{font:700 32px/.98 'Space Grotesk';letter-spacing:-.055em;margin:12px 0}.client-cta h2 em{font-style:normal;color:var(--lime)}.client-cta p{font-size:11px;line-height:1.7;color:#bed5b4}.client-cta>a{display:flex;justify-content:space-between;gap:10px;background:var(--lime);color:#162b13;padding:13px;font-size:12px;font-weight:800}.client-cta button{background:transparent;color:#d6fbb7;border:1px solid #739769;width:100%;padding:10px;margin-top:10px;font-size:10px}.client-cta .client-note{font-size:10px;color:#b8d2b3}.footer{display:flex;justify-content:space-between;padding:25px clamp(15px,3vw,50px);gap:25px;color:#91ab8e;font:700 10px 'Space Mono';line-height:1.7}
@media(max-width:1250px){.workbench{grid-template-columns:minmax(210px,240px) minmax(390px,1fr) minmax(240px,260px)}.mast-center{display:none}}
@media(max-width:990px){.workbench{height:auto;min-height:0;grid-template-columns:minmax(220px,.8fr) 2fr}.library{grid-column:1;grid-row:1}.preview-area{grid-column:2;grid-row:1;min-height:590px}.customize{grid-column:1/-1;grid-row:2;overflow:visible;border-left:0;border-top:1px solid var(--edge);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.customize>.panel-title,.customize>.customize-intro{grid-column:1/-1}.customize>.color-settings,.customize>.client-cta{grid-column:1/-1}}
@media(max-width:680px){.mast{height:66px}.mast-brand strong{font-size:18px}.mast-contact{font-size:10px;padding:11px}.mast-contact span{display:none}.headline{display:block;padding:28px 18px}.headline>p{margin-top:15px}.workbench{display:flex;flex-direction:column}.library{max-height:315px;overflow:auto;border-right:0}.styles-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.style-card{margin:0;gap:6px;padding:7px}.style-card .thumb{width:47px;flex-basis:47px}.style-card .style-name{font-size:11px}.style-card .style-kind{font-size:8px}.preview-area{min-height:580px}.preview-head{padding:0 10px}.preview-head strong{font-size:15px}.preview-canvas{padding:12px}.preview-foot{height:auto;min-height:52px;flex-wrap:wrap;padding:10px}.customize{display:block}.footer{flex-wrap:wrap}}