@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");:root{--bg:#111315;--panel:#191c1e;--panel-2:#202426;--line:#303638;--muted:#899397;--text:#f2f4f2;--yellow:#f9c308;--green:#55d69a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Space Grotesk,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.shell{max-width:1440px;margin:auto;padding:0 48px 30px}.topbar{height:90px;border-bottom:1px solid var(--line);gap:30px}.brand,.topbar{display:flex;align-items:center}.brand{color:var(--text);text-decoration:none;font-size:19px;font-weight:700;letter-spacing:-1px;gap:9px;white-space:nowrap}.brand-mark{font-size:29px;line-height:0}.accent,.brand-mark{color:var(--yellow)}.code-label,.eyebrow,.preview-status,.section-number,.status-dot,.url-row,.version,footer{font:500 10px DM Mono,monospace;letter-spacing:1.5px}.version{color:var(--muted)}.version i{color:var(--yellow);font-style:normal;padding:0 5px}.header-links{display:flex;gap:20px;margin-left:auto}.docs-link{color:var(--muted);text-decoration:none;font-size:12px}.docs-link:hover,footer a:hover{color:var(--yellow)}.hero{padding:74px 4px 68px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{color:var(--yellow);margin:0 0 20px}h1{font-size:clamp(54px,7vw,94px);line-height:.9;letter-spacing:-6px;margin:0}h1 span{color:var(--green)}.intro{color:var(--muted);max-width:390px;font-size:15px;line-height:1.55;margin:25px 0 0}.hero-badge{width:116px;height:116px;border:1px solid var(--line);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(12deg);color:var(--yellow)}.hero-badge span{font-size:27px}.hero-badge small{font:10px DM Mono,monospace;letter-spacing:1px;color:var(--muted);margin-top:4px}.workspace{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);grid-gap:20px;gap:20px;align-items:flex-start}.card{background:var(--panel);border:1px solid var(--line);border-radius:5px}.builder-card{padding:31px 34px 25px}.preview-card{padding:31px 25px 25px;position:-webkit-sticky;position:sticky;top:20px}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:29px}.card-heading>div{display:flex;align-items:baseline;gap:14px}.card-heading h2{margin:0;font-size:20px;letter-spacing:-.7px}.section-number{color:var(--yellow)}.status-dot{color:var(--green);font-size:9px}.status-dot:before{content:"●";margin-right:7px;font-size:8px}.preview-status{color:var(--muted);font-size:9px}.preview-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#667074;margin-right:7px}.preview-status.live{color:var(--green)}.preview-status.live i{background:var(--green);box-shadow:0 0 10px var(--green)}.field-group{margin-bottom:21px}label{color:#e6e9e7;display:block;font-size:12px;font-weight:600;margin-bottom:9px}.required{color:var(--yellow)}input,select{width:100%;color:var(--text);background:#101213;border:1px solid #3a4143;border-radius:3px;padding:11px 12px;font-size:13px;outline:none;transition:.2s}input:focus,select:focus{border-color:var(--yellow);box-shadow:0 0 0 2px #f9c3081c}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8f9a9a 0),linear-gradient(135deg,#8f9a9a 50%,transparent 0);background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px;background-repeat:no-repeat}.hint{color:var(--muted);font-size:10px;margin:8px 0 0;line-height:1.45}.segmented{display:flex;background:#101213;border:1px solid #3a4143;padding:3px;border-radius:4px}.segmented button{flex:1 1;color:var(--muted);background:transparent;border:0;padding:9px;font-size:12px;border-radius:2px}.segmented button.selected{color:#141515;background:var(--yellow);font-weight:700}.page-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px}.page-option{display:flex;align-items:center;gap:8px;color:var(--muted);background:#101213;border:1px solid #303739;border-radius:3px;padding:11px 10px;font-size:11px;text-align:left}.page-option span{color:#7f8b8b;font-size:16px}.page-option.selected{border-color:var(--yellow);color:var(--text);background:#242319}.page-option.selected span{color:var(--yellow)}.divider{height:1px;background:var(--line);margin:30px 0 25px}.compact-heading{margin-bottom:22px}.color-row,.size-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.color-input{display:flex;gap:7px}.color-input input[type=color]{padding:2px;width:41px;height:39px;flex:none}.color-input input[type=text]{min-width:0}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:13px 18px;gap:13px 18px;margin:2px 0 22px}.toggle{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;font-weight:400;margin:0;cursor:pointer}.toggle input{display:none}.switch{width:27px;height:15px;background:#303638;border-radius:10px;position:relative;transition:.2s;flex:none}.switch:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:#7e8889;top:2px;left:2px;transition:.2s}.toggle input:checked+.switch{background:var(--green)}.toggle input:checked+.switch:after{background:#11201a;left:14px}.advanced-button{width:100%;text-align:left;color:var(--muted);background:transparent;border:0;border-top:1px solid var(--line);padding:18px 0 3px;font-size:11px}.advanced-button span{color:var(--yellow);font-size:16px;vertical-align:-1px}.advanced-button b{float:right;font-size:16px;font-weight:400}.advanced-panel{border-top:1px solid #303638;margin-top:13px;padding-top:19px}.inline-inputs{display:grid;grid-template-columns:1fr 70px;grid-gap:7px;gap:7px}.builder-actions{display:flex;align-items:center;justify-content:flex-end;gap:20px;border-top:1px solid var(--line);margin-top:25px;padding-top:21px}.reset-button{color:var(--muted);background:transparent;border:0;font-size:12px}.primary-button,.small-toggle{color:#131515;background:var(--yellow);border:0;border-radius:3px;padding:12px 17px;font-weight:700;font-size:12px}.primary-button span{font-size:18px;margin-left:12px;vertical-align:-1px}.preview-frame{min-height:320px;border:1px solid #30383a;background:radial-gradient(circle at 50% 40%,#1e2728 0,#131718 55%,#101213 100%);border-radius:3px;display:grid;place-items:center;overflow:hidden;position:relative}.preview-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff03 1px,transparent 0),linear-gradient(90deg,#ffffff03 1px,transparent 0);background-size:24px 24px}.preview-frame iframe{min-width:100%;min-height:320px;border:0;position:relative;z-index:1;background:#fff}.empty-preview{text-align:center;color:var(--muted);z-index:1}.empty-icon{display:grid;place-items:center;width:54px;height:54px;border:1px solid #3a4546;border-radius:50%;color:var(--yellow);font-size:30px;margin:0 auto 15px}.empty-preview p{color:#dbe0dd;margin:0 0 6px;font-size:13px}.empty-preview small{font:10px DM Mono,monospace}.code-label{display:flex;justify-content:space-between;color:var(--muted);margin:26px 0 9px;font-size:9px}.code-label span:last-child{color:#5f6a6b}.code-box{display:flex;gap:8px;align-items:center;background:#101213;border:1px solid #343b3d;border-radius:3px;padding:14px;min-height:68px}.code-box code{color:#c7d2cc;font:10px/1.5 DM Mono,monospace;overflow-wrap:anywhere;flex:1 1}.code-box button{color:var(--yellow);border:0;background:transparent;display:flex;gap:6px;align-items:center;font-size:11px;white-space:nowrap}.code-box button span,.url-row{color:var(--muted)}.url-row{display:flex;justify-content:space-between;margin:18px 0 8px}.url-row button{color:var(--green);border:0;background:transparent;font:inherit;letter-spacing:0;text-transform:none}.url-row button:disabled{color:#586163}.url-text{color:#83908f;background:#101213;border-radius:3px;padding:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:10px DM Mono,monospace}.tournament-callout{display:flex;justify-content:space-between;gap:15px;align-items:center;border:1px solid #3b3830;background:#24221a;padding:16px;margin-top:26px;border-radius:3px}.tournament-callout strong{font-size:12px}.tournament-callout p{color:var(--muted);margin:5px 0 0;font-size:10px}.small-toggle{padding:9px 11px;white-space:nowrap}.small-toggle.on{background:var(--green)}.small-toggle span{font-size:16px;margin-left:6px}.tournament-results{border:1px solid var(--line);border-top:0;padding:14px;display:grid;grid-gap:14px;gap:14px}.tournament-block label{color:var(--yellow);font:10px DM Mono,monospace}.tournament-block code{display:block;color:#a8b5ae;font:9px/1.5 DM Mono,monospace;background:#101213;padding:8px;margin-top:5px;overflow-wrap:anywhere}footer{color:#586163;display:flex;justify-content:space-between;padding:28px 4px 0;font-size:9px}footer b{color:var(--yellow);padding:0 5px}.seo-content{margin:20px 0 0;padding:70px 48px 20px;border:1px solid var(--line);border-radius:5px;background:linear-gradient(145deg,#191c1e,#151819)}.seo-intro{max-width:650px}.seo-content h2{margin:0;font-size:clamp(30px,4vw,52px);letter-spacing:-2px;line-height:1}.seo-content h2 span{color:var(--green)}.seo-intro>p:last-child{color:var(--muted);max-width:620px;font-size:15px;line-height:1.65;margin-top:22px}.seo-features{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:30px;gap:30px;border-top:1px solid var(--line);margin-top:60px;padding-top:26px}.seo-features span{color:var(--yellow);font:10px DM Mono,monospace}.seo-features h3{margin:18px 0 8px;font-size:16px}.faq-grid p,.seo-features p{color:var(--muted);font-size:12px;line-height:1.6;margin:0}.faq-section{border-top:1px solid var(--line);margin-top:64px;padding-top:28px}.faq-section h2{font-size:30px;margin-top:0}.faq-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.faq-grid details{background:#101213;border:1px solid #30383a;border-radius:3px;padding:17px 18px}.faq-grid summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;display:flex;justify-content:space-between;gap:15px}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid summary span{color:var(--yellow);font-size:17px;font-weight:400}.faq-grid details[open] summary span{transform:rotate(45deg)}.faq-grid p{margin-top:14px}.related-links{border-top:1px solid var(--line);margin-top:60px;padding-top:28px}.related-links>div{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px}.related-links a{color:var(--text);border:1px solid #3b4445;padding:16px;text-decoration:none;border-radius:3px;font-size:12px}.related-links a:hover{border-color:var(--yellow)}.related-links a span{color:var(--yellow);float:right;font-size:17px}footer a{color:inherit;text-decoration:none}@media (max-width:900px){.shell{padding:0 20px 25px}.topbar{height:72px}.version{display:none}.hero{padding:55px 0 45px}.hero-badge{width:85px;height:85px}.workspace{grid-template-columns:1fr}.preview-card{position:static}.preview-frame iframe{width:100%!important}.seo-content{padding:45px 25px 15px}.seo-features{gap:24px}.related-links>div,.seo-features{grid-template-columns:1fr}}@media (max-width:520px){.hero{align-items:flex-start}.hero-badge{display:none}h1{letter-spacing:-4px;font-size:58px}.builder-card,.preview-card{padding:23px 17px}.page-grid{grid-template-columns:1fr 1fr}.color-row,.size-row{gap:0}.color-row,.size-row,.toggle-grid{grid-template-columns:1fr}.builder-actions{justify-content:space-between}.header-links{gap:10px}.docs-link{font-size:10px}.seo-content{padding:35px 17px 10px}.seo-content h2{letter-spacing:-1px}.faq-grid{grid-template-columns:1fr}footer{display:block;line-height:2}}@media (min-width:901px){.landing-shell{max-width:1200px}}.landing-shell{max-width:1200px;margin:auto;padding:0 48px 30px}.landing-topbar{margin-bottom:0}.landing-hero{padding:105px 4px 90px;max-width:800px}.landing-hero h1{font-size:clamp(48px,7vw,82px);letter-spacing:-5px;line-height:.95;margin:0}.landing-bottom h2 span,.landing-hero h1 span,.landing-how h2 span{color:var(--green)}.landing-hero>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.6;max-width:670px;margin:25px 0 30px}.landing-cta{display:inline-block;text-decoration:none}.landing-panel{border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:35px 38px 48px}.landing-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:28px;gap:28px;border-bottom:1px solid var(--line);padding-bottom:36px}.landing-feature-grid span{color:var(--yellow);font:10px DM Mono,monospace}.landing-feature-grid p{color:#d9dfdc;font-size:14px;line-height:1.5;margin:16px 0 0}.landing-how{padding-top:55px}.landing-bottom h2,.landing-how h2{font-size:clamp(29px,4vw,49px);letter-spacing:-2px;line-height:1;margin:0}.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:28px;gap:28px;margin-top:48px}.landing-steps b{width:30px;height:30px;display:grid;place-items:center;color:#131515;background:var(--yellow);border-radius:50%;font-size:12px}.landing-steps p{color:var(--muted);font-size:13px;line-height:1.5;max-width:230px}.landing-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:75px 4px 35px}.landing-bottom a{text-decoration:none;white-space:nowrap}@media (max-width:900px){.landing-shell{padding:0 20px 25px}.landing-hero{padding:70px 0 55px}.landing-panel{padding:28px 22px 35px}.landing-feature-grid,.landing-steps{grid-template-columns:1fr;gap:20px}.landing-steps{margin-top:30px}.landing-bottom{display:block;padding-top:55px}.landing-bottom a{display:inline-block;margin-top:28px}}