:root{--planH: 320px;--previewH: 720px;--previewAllowOverflow: 1;--planMinH: 240px;--previewMinH: 320px;--bg: #f7f3ec;--bg-deep: #ece4d8;--ink: #161411;--muted: #4d473f;--accent: #a35a2e;--accent-2: #0f6c62;--card: #fffdf7;--line: rgba(43, 38, 32, .25);--radius: 14px;--shadow: 0 18px 30px rgba(22, 20, 17, .08);font-family:Sora,Segoe UI,sans-serif;line-height:1.35;font-weight:400;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{overflow-y:auto;-webkit-overflow-scrolling:touch;color:var(--ink);background:radial-gradient(1200px 600px at 10% -10%,rgba(15,108,98,.12),transparent 60%),radial-gradient(900px 500px at 90% 0%,rgba(163,90,46,.12),transparent 55%),linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%)}button,input,select,textarea{font:inherit}.app{min-height:100%;display:flex;flex-direction:column;gap:12px;padding:14px}.appCol{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:10px;align-items:center}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.panelHeader{padding:8px 12px;border-bottom:1px solid var(--line);background:#fffdf7d9;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.panelTitle{font-family:Fraunces,Times New Roman,serif;font-weight:600;font-size:15px;letter-spacing:.01em}.panelHeaderHint{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panelHeaderCenter{display:flex;align-items:center;justify-content:center;gap:8px}.panelBody{position:relative;min-height:0}.smallLabel{font-size:11px;color:var(--muted)}.field{display:flex;align-items:center;gap:6px;white-space:nowrap}.field input,.field select{height:26px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff}.btn{height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:11px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.btn:active{transform:translateY(1px)}.btnPrimary{background:var(--ink);color:#fff}.btnGroup{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.btnGroup button{border:0;border-right:1px solid var(--line);background:transparent;height:26px;padding:0 10px;cursor:pointer}.btnGroup button:last-child{border-right:0}.btnGroup .active{background:var(--ink);color:#fff}.menuBar{padding:10px}.specsBar,.toolsBar{padding:10px;flex-wrap:wrap}.pvTools{display:flex;flex-direction:column;gap:6px}.pvToolsRow{display:flex;align-items:center;gap:10px;padding:4px 6px;flex-wrap:wrap}.pvToolsRow--modes{flex-wrap:nowrap;align-items:center}.pvToolsRow--builders{border-top:1px solid var(--line);padding-top:6px}.pvToolsRow--strand{flex-wrap:wrap;align-items:center}.pvToolsRow--swoop,.pvToolsRow--custom{color:var(--muted);font-size:13px}body.viewer-mode{font-family:Sora,Segoe UI,sans-serif;color:#161411;background:radial-gradient(1200px 600px at 10% -10%,rgba(15,108,98,.12),transparent 60%),radial-gradient(900px 500px at 90% 0%,rgba(163,90,46,.12),transparent 55%),linear-gradient(180deg,#f7f3ec,#ece4d8);--viewerCanvasBg: #f5efe3}body.viewer-mode .app{padding:0;gap:16px;min-height:0}body.viewer-mode .card{border-radius:18px;border-color:#2b262033;background:#fffdf7eb;box-shadow:0 20px 40px #1614111f}body.viewer-mode .panelTitle{font-family:Fraunces,Times New Roman,serif;letter-spacing:.02em}body.viewer-mode .panelHeader{border-bottom-color:#2b262026}body.viewer-mode .btn{border-color:#2b262080;background:transparent}body.viewer-mode .btnPrimary{background:#161411;color:#fff}body.viewer-mode .viewerLayout{display:flex;flex-direction:column;gap:18px}body.viewer-mode .viewerCanvas{height:min(70vh,720px)}body.viewer-mode .canvasStack{grid-template-rows:minmax(0,1fr)}body.viewer-mode .canvasStack .panelGridItem{resize:none}body.viewer-mode .viewerNotes{border-radius:18px;border:1px solid rgba(43,38,32,.2);background:#fffdf7eb;box-shadow:0 16px 30px #16141114;padding:18px 20px}body.viewer-mode .viewerNotesTitle{font-family:Fraunces,Times New Roman,serif;font-size:18px;margin-bottom:6px}body.viewer-mode .viewerNotesBody{color:var(--ink, #161411);line-height:1.7;font-size:14px;white-space:pre-wrap}body.viewer-mode .viewerStatus{border-radius:999px;border:1px solid rgba(43,38,32,.2);background:#fffdf7eb;box-shadow:0 10px 20px #16141114;padding:8px 14px;font-size:12px;color:#4d473f;align-self:flex-start}body.viewer-mode.embedded .viewerEmbedControls{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;margin:8px auto 0;border-radius:999px;border:1px solid rgba(43,38,32,.2);background:#fffdf7eb;box-shadow:0 10px 20px #16141114}body.viewer-mode.embedded .viewerLayout{height:100%;gap:0;position:relative}body.viewer-mode.embedded .viewerCanvas{flex:1 1 auto;min-height:0;overflow:hidden;height:100%}body.viewer-mode.embedded .card{background:transparent;border:0;box-shadow:none}body.viewer-mode.embedded .panelBody{height:100%}body.viewer-mode.embedded .frontPreviewHandle{display:none}body.viewer-mode.embedded .canvasStack svg.frontPreviewSvg{height:100%}body.viewer-mode.embedded .viewerEmbedControls{position:absolute;left:50%;bottom:12px;transform:translate(-50%);margin:0;z-index:2}body.viewer-mode.embedded .viewerEmbedLabel{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}body.viewer-mode.embedded .viewerEmbedControls input[type=range]{width:180px;accent-color:var(--accent)}.pvToolsRow .spacer{flex:1}.isDisabledRow{opacity:.5;pointer-events:none}.planToolsInstructions{height:32px;display:flex;align-items:center;padding:0 8px;border-top:1px solid var(--line);font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.planToolsHint{font-size:11px;opacity:.75;padding:0 8px 2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.planToolsHint .hintSpacer{opacity:.5;margin:0 4px}.kbd{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 4px;border:1px solid var(--line);border-radius:4px;font-size:10px;line-height:1;background:var(--bg);font-weight:600}.canvasStack{display:grid;grid-template-rows:minmax(var(--planMinH),var(--planH)) minmax(var(--previewMinH),var(--previewH));gap:12px;min-height:0;position:relative;z-index:10;overflow:hidden}.canvasStack>*{min-height:0;overflow:hidden}.canvasStack .panelGridItem{min-height:0;resize:vertical;overflow:auto}.canvasStack .panelBody{height:100%;overflow:hidden}.belowStack{position:static;display:flex;flex-direction:column;gap:12px;margin-top:12px}.belowStack{z-index:0}.belowStack>.card{width:100%;box-sizing:border-box;min-height:0}.canvasStack>.panelGridItem{height:100%;overflow:hidden}.canvasStack svg{display:block;width:100%;height:100%}.leftToolbar{width:64px;min-width:64px;max-width:64px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 4px;border-right:1px solid var(--line);background:var(--card)}.labelsToggle{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;line-height:1.1;color:var(--muted);-webkit-user-select:none;user-select:none}.panelContentRow{display:grid;grid-template-columns:64px 1fr;height:100%}.svgWrap{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}.frontPreviewWrap{height:100%;display:flex;flex-direction:column;position:relative}.frontPreviewSvg{flex:1 1 auto;width:100%}.canvasStack svg.frontPreviewSvg{height:calc(100% - 12px)}.frontPreviewHandle{position:absolute;left:0;right:0;bottom:0}.resizeHandle{height:12px;background:linear-gradient(to bottom,#00000005,#0000000a);border-top:1px solid rgba(0,0,0,.06);box-shadow:inset 0 -1px #ffffff59;z-index:5;cursor:row-resize;display:block;touch-action:none;-webkit-user-select:none;user-select:none}.resizeHandle:hover{background:linear-gradient(to bottom,#00000014,#0000002e)}.statusGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.bottomBand{padding:10px}.notesGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.notesGrid textarea{width:100%;height:90px;border:1px solid var(--line);padding:8px;resize:vertical;background:var(--card);color:var(--ink)}.muted{color:var(--muted)}
