*{box-sizing:border-box;margin:0}body{color:#1c1917;background:#1c1917;height:100vh;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;overflow:hidden}.page{grid-template-columns:1fr 1fr;height:100vh;display:grid;overflow:hidden}@media (width<=900px){body{height:auto;overflow:auto}.page{grid-template-columns:1fr;height:auto;overflow:visible}.code-panel{height:auto;padding-bottom:24px;position:relative;overflow:visible}.code-section{flex:none;overflow:visible!important}.code{overflow:visible!important}.divider,.output-section{display:none}.form-panel{justify-content:flex-start;padding:36px 16px 24px;height:auto!important;overflow:visible!important}.form-card,.note{max-width:100%}.mobile-divider{display:flex}.mobile-output{display:block!important}}.mobile-divider{z-index:2;align-items:center;width:100%;padding:0 24px;display:none;position:absolute;bottom:0;left:0;right:0;transform:translateY(50%)}.mobile-divider .next-btn{margin:0 16px}.mobile-divider-line{background:#a8a29e;flex:1;height:1px}.mobile-output{background:#1c1917;border-radius:8px;width:100%;max-width:540px;padding:16px;display:none}.mobile-output .code-label{padding-bottom:8px}.code-panel{background:#1c1917;flex-direction:column;height:100vh;display:flex;overflow:hidden}.tabs{border-bottom:1px solid #292524;flex-shrink:0;align-items:center;gap:0;padding:0 24px;display:flex}.tab{color:#57534e;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 16px;font-family:ui-monospace,SF Mono,Fira Code,monospace;font-size:13px;font-weight:500}.tab:hover{color:#a8a29e}.tab-active{color:#e7e5e4;border-bottom-color:#e7e5e4}.tab-dim{color:#57534e;margin-left:auto;font-family:ui-monospace,SF Mono,Fira Code,monospace;font-size:12px}.setup-section{flex:1 1 0;min-height:0;padding:20px 24px;overflow-y:auto}.code-section{flex:1 1 0;min-height:0;padding:16px 24px 12px;overflow-y:auto}.code-top{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.code-label{color:#78716c;padding-bottom:6px;font-family:ui-monospace,SF Mono,Fira Code,monospace;font-size:12px;font-weight:500}.code-label.dim{color:#57534e}.code{color:#d6d3d1;white-space:pre-wrap;overflow-wrap:break-word;tab-size:2;font-family:ui-monospace,SF Mono,Fira Code,monospace;font-size:12.5px;line-height:1.6;background:0 0!important;padding:0!important}.divider{flex-shrink:0;align-items:center;padding:0 24px;display:flex;position:relative}.divider-line{background:#44403c;flex:1;height:2px}.next-btn{color:#1c1917;cursor:pointer;white-space:nowrap;background:#fafaf9;border:2px solid #fafaf9;border-radius:6px;flex-shrink:0;margin:0 16px;padding:10px 32px;font-family:inherit;font-size:13px;font-weight:600}.next-btn:hover{background:#fff;border-color:#fff;box-shadow:0 0 24px #ffffff1f,0 0 8px #ffffff0f}.output-section{flex:0 0 30vh;height:30vh;padding:12px 24px 16px;overflow-y:auto}.output-section .code-label{padding-bottom:8px}.preview{color:#a8a29e;white-space:pre;font-family:ui-monospace,SF Mono,Fira Code,monospace;font-size:12px;line-height:1.5;overflow:auto}.form-panel{background:#f5f5f4;flex-direction:column;justify-content:flex-start;align-items:center;gap:16px;height:100vh;padding:32px 28px;display:flex;overflow-y:auto}.form-card{background:#fff;border:1px solid #e7e5e4;border-radius:8px;width:100%;max-width:540px;padding:36px 32px}.form-card h1{margin-bottom:20px;font-size:16px;font-weight:600}.note{color:#78716c;max-width:540px;font-size:12px;line-height:1.5}.note code{background:#e7e5e4;border-radius:3px;padding:1px 4px;font-family:ui-monospace,SF Mono,monospace;font-size:11px}form{flex-direction:column;gap:14px;display:flex}label{color:#44403c;flex-direction:column;gap:4px;font-size:13px;font-weight:500;display:flex}label.check{cursor:pointer;flex-direction:row;align-items:center;gap:8px;font-weight:400}label.check input[type=checkbox]{cursor:pointer;width:15px;height:15px}label.radio{cursor:pointer;flex-direction:row;align-items:center;gap:6px;font-weight:400}input:not([type=checkbox]):not([type=radio]),textarea,select{color:#1c1917;background:#fff;border:1px solid #d6d3d1;border-radius:6px;padding:7px 10px;font-family:inherit;font-size:14px}input:not([type=checkbox]):not([type=radio])::placeholder,textarea::placeholder{color:#a8a29e}input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{border-color:#78716c;outline:none}select{cursor:pointer}textarea{resize:vertical;line-height:1.5}fieldset{border:none;flex-direction:column;gap:6px;padding:0;display:flex}fieldset legend{color:#44403c;margin-bottom:2px;font-size:13px;font-weight:500}.radio-group{gap:16px;display:flex}.error{color:#b91c1c;font-size:12px;font-weight:400}.submit-row{align-items:center;gap:12px;margin-top:4px;display:flex}button[type=submit]{color:#fafaf9;cursor:pointer;background:#1c1917;border:none;border-radius:6px;padding:8px 20px;font-family:inherit;font-size:13px;font-weight:500}button[type=submit]:hover{background:#292524}button[type=submit]:disabled{opacity:.5;cursor:default}