:root{--bg:#f3ece6;--card:#fffdfa;--ink:#271d18;--muted:#76675e;--line:#dfd3ca;--accent:#b77967}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);background:#f3ece6ee;position:sticky;top:0;z-index:5}.logo{font:700 28px Georgia,serif}.logo span{color:var(--accent)}.tag{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:#fff8;color:var(--muted)}main{display:grid;grid-template-columns:390px 1fr;gap:16px;max-width:1580px;margin:auto;padding:16px}.sidebar{display:flex;flex-direction:column;gap:14px}.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 50px #5b413412}.importer,.editor{padding:20px}.kicker{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:800}h1{font:700 40px/1 Georgia,serif;letter-spacing:-.035em;margin:9px 0 12px}h2{font:700 25px/1.05 Georgia,serif;margin:8px 0 8px}p{color:var(--muted);line-height:1.5;font-size:12px}.hint{margin-top:0}label{display:block;font-size:11px;font-weight:800;margin:12px 0 5px}.urlrow{display:flex;gap:7px}.urlrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:12px;background:#fff}.urlrow button,.primary,.secondary{border:0;border-radius:11px;padding:12px 14px;background:#2c211c;color:#fff;font-weight:800}.secondary{width:100%;margin-top:9px;background:#eee3dc;color:#3b2d25;border:1px solid var(--line)}.status{font-size:11px;color:var(--muted);margin-top:15px;padding:10px;background:#f8f2ed;border-radius:10px;word-break:break-word}.editor.disabled{opacity:.6;pointer-events:none}.editorGroup{border-top:1px solid var(--line);padding-top:13px;margin-top:14px}.groupTitle{font-size:12px;font-weight:900;margin-bottom:7px}.emptySelection,.smallMuted{font-size:10px;color:var(--muted);padding:9px;background:#f8f2ed;border-radius:9px}.hidden{display:none!important}.selectionMeta{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:7px}.selectionMeta strong{font-size:11px}.selectionMeta span{font-size:9px;color:var(--muted)}textarea,select,input[type=file]{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px;background:#fff;color:var(--ink)}textarea{min-height:68px;resize:vertical}.twoCols{display:grid;grid-template-columns:1fr 1fr;gap:8px}.twoCols input[type=color]{width:100%;height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:4px}.rangeRow{display:flex;gap:8px;align-items:center}.rangeRow input{flex:1}.rangeRow span{font-size:10px;color:var(--muted);width:38px;text-align:right}.buttonGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.miniButton{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px;font-size:10px;font-weight:800}.sectionsList{display:grid;gap:6px}.sectionRow{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px;align-items:center;border:1px solid var(--line);padding:7px;border-radius:9px;background:#fff}.sectionRow input{accent-color:#2c211c}.sectionRow .sectionName{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sectionRow button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 6px;font-size:9px}.paletteList{display:grid;gap:6px}.paletteRow{display:grid;grid-template-columns:24px 1fr 42px auto;gap:7px;align-items:center;border:1px solid var(--line);padding:6px;border-radius:9px;background:#fff}.oldSwatch{width:24px;height:24px;border-radius:7px;border:1px solid #0002}.paletteLabel{font:9px ui-monospace,monospace;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.paletteRow input[type=color]{width:42px;height:29px;border:0;padding:0;background:none}.paletteRow button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 7px;font-size:9px;font-weight:800}.actionStack{margin-top:14px}.actionStack .primary{width:100%;margin-top:8px}.actionStack button:disabled{opacity:.45}.publishResult{margin-top:10px;padding:10px;border:1px solid #c9dfce;background:#f3faf4;color:#416048;border-radius:10px;font-size:10px;line-height:1.4}.publishResult a{color:inherit;font-weight:900}.results{overflow:hidden;min-height:880px}.tabs{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line);background:#fffaf6;align-items:center}.tabs>button{border:1px solid var(--line);border-radius:9px;padding:7px 10px;background:#fff;font-size:11px}.tabs>button.active{background:#2c211c;color:#fff}.deviceSwitch{margin-left:auto;display:flex;gap:4px}.deviceSwitch button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px;font-size:10px}.deviceSwitch .activeDevice{background:#2c211c;color:#fff}.pane{display:none;height:830px;overflow:auto;background:#e8dfd8}.pane.active{display:block}.frameShell{height:100%;margin:auto;background:#fff;transition:max-width .2s;width:100%;max-width:100%}.frameShell.mobile{max-width:390px;box-shadow:0 10px 40px #0003}iframe{width:100%;height:100%;border:0;background:white}.captureWrap{padding:14px}.captureWrap img{display:block;width:100%;height:auto;background:white;box-shadow:0 8px 30px #0002}pre{margin:0;padding:20px;white-space:pre-wrap;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#171412;color:#f5eee8;min-height:100%}
@media(max-width:980px){main{grid-template-columns:1fr;padding:9px}.importer,.editor{position:relative;top:auto}h1{font-size:34px}.results{min-height:700px}.pane{height:680px}}