body{margin:0;padding:0}.presets-content{padding-top:6px}.page-hero{margin-bottom:20px}.preset-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;display:grid}.preset-card{background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;text-align:left;border-radius:14px;padding:18px 18px 16px;transition:all .16s}.preset-card:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}.preset-card-top{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;display:flex}.preset-index{letter-spacing:.18em;color:var(--accent);font-size:12px}.preset-action{color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.preset-card h3{margin-bottom:8px;font-size:18px}.preset-card p{color:var(--text-muted);font-size:14px;line-height:1.72}.guide-content{padding-top:6px}.guide-section{border-top:1px solid var(--border);margin-top:16px;padding:18px 0 0}.guide-section h3{color:var(--text);margin-bottom:12px;font-size:18px}.guide-section ol,.guide-section p{color:var(--text-muted);font-size:15px;line-height:1.86}.guide-section ol{padding-left:22px}.guide-table{border-collapse:collapse;width:100%;font-size:14px}.guide-table td{border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-muted);padding:12px 0}.guide-table tr:last-child td{border-bottom:none}.guide-table td:first-child{white-space:nowrap;width:220px;color:var(--text);padding-right:20px}@media (width<=720px){.guide-table,.guide-table tbody,.guide-table tr,.guide-table td{width:100%;display:block}.guide-table td:first-child{width:100%;padding-bottom:4px;padding-right:0}}:root{--bg:#e3e8e5;--bg-elevated:#f5f7f4;--bg-muted:#d6ddd9;--sidebar-bg:#f5f7f4;--sidebar-text:#1e2724;--card-bg:#f5f7f4;--border:#cedbd3;--border-strong:#b0bdb5;--accent:#6b8b7c;--accent-hover:#425a4e;--accent-soft:#e0ebe4;--text:#1e2724;--text-muted:#5a7a6b;--text-faint:#8a9e92;--danger:#b14f42;--radius-sm:8px;--radius:14px;--radius-lg:18px;--shadow-sm:0 4px 12px #1e27240d;--shadow:0 10px 28px #1e272414;--control-height:40px}html,body,#root{height:100%}body{background:radial-gradient(circle at top left, #6b8b7c0f, transparent 30%), linear-gradient(180deg, #f5f7f4 0%, var(--bg) 100%);color:var(--text);margin:0;font-family:Georgia,Times New Roman,serif;overflow:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");position:fixed;inset:0}button,input,select,textarea{font:inherit}h1{margin:0;font-size:26px;line-height:1.16}h2{margin:0;font-size:20px}h3,p{margin:0}.app-shell{box-sizing:border-box;z-index:1;flex-direction:column;gap:10px;height:100vh;padding:10px 16px 12px;display:flex;position:relative;overflow:hidden}.app-header{border-bottom:1px solid #6b8b7c29;flex:none;justify-content:space-between;align-items:center;gap:16px;padding-bottom:8px;display:flex}.app-header-main{align-items:center;gap:18px;display:flex}.brand-block{color:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:0;display:inline-flex}.brand-mark{object-fit:contain;border-radius:8px;width:32px;height:32px}.brand-copy{text-align:left;flex-direction:column;gap:1px;display:flex}.brand-copy strong{font-size:15px;line-height:1}.brand-copy span{color:var(--text-faint);font-size:11px}.nav-links{flex-wrap:wrap;gap:4px;display:flex}.nav-link{min-height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;padding:0 13px;font-size:13px;transition:all .16s}.nav-link:hover{color:var(--text);background:#f5f7f4cc;border-color:#6b8b7c33}.nav-link.active{color:var(--accent-hover);background:var(--accent-soft);border-color:#6b8b7c59}.engine-status-inline{border:1px solid var(--border);background:var(--bg-elevated);white-space:nowrap;color:var(--text-muted);border-radius:999px;flex-shrink:0;align-items:center;gap:6px;padding:5px 10px;font-size:11px;display:inline-flex}.status-dot{background:#b0bdb5;border-radius:999px;flex-shrink:0;width:7px;height:7px}.status-dot.ready{background:var(--accent)}.status-dot.error{background:var(--danger)}.engine-metrics{color:var(--text-faint);font-size:10px}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-size:10px}.page{flex:1;min-height:0;display:flex;overflow:hidden}.page-content{width:min(960px,100%);margin:0 auto}.page-desc{margin-bottom:16px;font-size:14px;line-height:1.68}.page-hero{border-bottom:1px solid var(--border);margin-bottom:14px;padding-bottom:12px}.sidebar{width:300px;min-height:0;padding-right:12px;overflow-y:auto}.sidebar::-webkit-scrollbar-thumb{background:#6b8b7c38}.sidebar section{border-bottom:1px solid var(--border);margin-bottom:10px;padding-bottom:10px}.sidebar section:last-child{border-bottom:none}.sidebar h3{letter-spacing:.04em;color:var(--text);margin-bottom:8px;font-size:12px}.section-stack{flex-direction:column;gap:10px;display:flex}.sidebar-group{border-bottom:1px solid var(--border);margin-bottom:10px;padding-bottom:10px}.sidebar-group:last-child{border-bottom:none}.sidebar-group-header{cursor:pointer;-webkit-user-select:none;user-select:none;width:100%;color:var(--text);font:inherit;letter-spacing:.04em;background:0 0;border:0;justify-content:space-between;align-items:center;margin-bottom:8px;padding:4px 0;font-size:12px;font-weight:600;display:flex}.sidebar-group-header:hover{color:var(--accent-hover)}.sidebar-group-arrow{color:var(--text-faint);font-size:10px;transition:transform .18s}.sidebar-group-arrow.open{transform:rotate(90deg)}.sidebar-group-body{flex-direction:column;gap:8px;display:flex}.sidebar textarea,.sidebar select,.sidebar input[type=number],.sidebar input[type=file],.sidebar input[type=text],.diy-input-row input[type=text],.diy-input-row input[type=file],.diy-input-row select{box-sizing:border-box;border:1px solid var(--border);background:var(--bg-elevated);border-radius:10px;width:100%;padding:8px 10px}.sidebar textarea{resize:vertical;height:96px}.sidebar textarea:focus,.sidebar select:focus,.sidebar input:focus,.diy-input-row input:focus,.diy-input-row select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #6b8b7c1a}.form-row,.diy-input-row{align-items:center;gap:7px;margin-top:7px;display:flex}.form-row label,.diy-input-row label{min-width:40px}.form-row.compact input[type=number]{width:72px}.form-row input[type=range]{accent-color:var(--accent);flex:1}.form-row .val{text-align:right;min-width:36px;color:var(--text-muted);font-size:12px}.form-row input[type=color],.diy-input-row input[type=color]{border-color:var(--border);width:48px;height:32px;padding:2px}.check-row{align-items:center;gap:8px;display:inline-flex}.sidebar-note,.hint,.diy-hint{color:var(--text-muted);font-size:12px;line-height:1.6}.btn-sm,.diy-sidebar .btn-sm{border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;border-radius:999px;min-height:32px;padding:0 12px;transition:all .16s}.btn-sm:hover,.diy-sidebar .btn-sm:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-hover)}.editor-page,.diy-page{grid-template-columns:300px minmax(0,1fr);align-items:stretch;gap:20px;width:100%;min-height:0;display:grid}.editor-page>.sidebar,.diy-page>.diy-sidebar{min-width:0}.editor-main,.diy-main{flex-direction:column;flex:1;gap:10px;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.editor-toolbar-card,.diy-toolbar-card{border-bottom:1px solid var(--border);background:0 0;flex:none;justify-content:space-between;align-items:center;gap:14px;padding:0 0 8px;display:flex}.editor-toolbar-copy,.diy-toolbar-copy{flex-direction:column;gap:3px;display:flex}.editor-toolbar-copy h2,.diy-toolbar-copy h2{font-size:17px}.editor-toolbar-copy span,.diy-toolbar-copy span{color:var(--text-muted);font-size:12px}.toolbar-group{flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end;align-items:center;gap:6px;display:flex}.export-overlay{z-index:15;position:fixed;inset:0}.export-menu{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:16;flex-direction:column;gap:2px;min-width:160px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0}.export-menu-item{text-align:left;width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 14px;font-size:13px;transition:all .12s;display:block}.export-menu-item:hover{background:var(--accent-soft);color:var(--accent-hover)}.export-menu-item:disabled{opacity:.4;cursor:default}.export-menu-item:disabled:hover{color:var(--text);background:0 0}.export-menu-accent{color:var(--accent);font-weight:600}.btn.active{background:var(--accent-hover);border-color:var(--accent-hover)}.btn{border:1px solid var(--border);background:var(--bg-elevated);min-height:36px;color:var(--text);cursor:pointer;white-space:nowrap;border-radius:999px;padding:0 13px;font-size:13px;transition:all .16s}.btn:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--accent-soft)}.btn:disabled{opacity:.45;cursor:default}.btn:disabled:hover{border-color:var(--border);color:var(--text);background:var(--bg-elevated)}.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}.btn-accent:disabled{background:#9ab5a6;border-color:#9ab5a6}.preview-container,.diy-workspace{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);flex:1;justify-content:center;align-items:center;min-height:0;margin-top:4px;padding:18px;display:flex;overflow:auto}.preview-container canvas,.diy-workspace canvas{background:#fff;border-radius:6px;max-width:100%;max-height:100%;display:block;box-shadow:0 10px 26px #1e27241a}.import-dropzone{border:1px dashed var(--border-strong);text-align:center;cursor:pointer;background:var(--bg-muted);border-radius:12px;flex-direction:column;gap:6px;padding:14px 12px;transition:border-color .2s,background .2s;display:flex}.import-dropzone:hover,.import-dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}.import-dropzone.loading{opacity:.6;cursor:wait}.import-hint{color:var(--text);font-size:13px}.import-formats{color:var(--text-faint);font-size:11px}.import-status{color:var(--accent);font-size:12px}.import-error{color:var(--danger);margin-top:2px;font-size:11px}.modal-backdrop{z-index:20;background:#15211d61;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);width:min(520px,100%);box-shadow:var(--shadow);flex-direction:column;gap:14px;padding:20px;display:flex}.modal-card h3{font-size:18px}.modal-grid{flex-direction:column;gap:12px;display:flex}.modal-grid textarea,.modal-grid select,.modal-grid input[type=text]{box-sizing:border-box;border:1px solid var(--border);background:var(--bg-elevated);border-radius:10px;width:100%;padding:10px 12px}.modal-grid textarea{resize:vertical;min-height:96px}.modal-grid textarea:focus,.modal-grid select:focus,.modal-grid input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #6b8b7c1a}.modal-actions{justify-content:flex-end;gap:8px;display:flex}@media (width<=1200px){.editor-toolbar-card,.diy-toolbar-card{flex-direction:column;align-items:flex-start}.toolbar-group{flex-wrap:wrap;justify-content:flex-start;width:100%}}@media (width<=960px){html,body,#root{height:auto}body{overflow:auto}.app-shell{height:auto;min-height:100vh;padding:12px;overflow:visible}.app-header{flex-direction:column;align-items:flex-start}.app-header-main{flex-direction:column;align-items:flex-start;width:100%}.nav-links{width:100%}.page{flex-direction:column;overflow:visible}.sidebar,.diy-sidebar{flex-basis:auto;width:100%;padding-right:0}.editor-page,.diy-page{gap:14px}.preview-container,.diy-workspace{min-height:60vh}}@media (width<=640px){.app-shell{padding:10px}h1{font-size:22px}.nav-links{width:100%}.nav-link{text-align:center;flex:calc(50% - 4px)}.preview-container,.diy-workspace{padding:12px}}