.pg-app[data-ui=original]{--bg-top:#fef3e2;--bg-bottom:#dbeafe;--panel:#ffffff;--panel-border:#cbd5e1;--ink:#111827;--muted:#475569;--accent:#748DF4;--accent-soft:#e8ecfe;--accent-strong:#0f172a;--code-sel:#be185d;--code-prop:#1d4ed8;--code-val:#16a34a;--code-punc:#475569;--shadow:0 12px 30px rgba(15,23,42,0.12);--r-sm:8px;--r-md:12px;--r-lg:14px;--r-pill:999px;--fast:120ms;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;grid-gap:14px;gap:14px;padding:clamp(14px,1.6vw,22px);font-family:var(--font-montserrat),"Montserrat",sans-serif;color:var(--ink);font-size:16px;line-height:1.5;position:relative;&:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(15,23,42,.08) 1.2px,transparent 0);background-size:28px 28px;opacity:.45;z-index:0}>*{position:relative;z-index:1}h1,h2,h3{margin:0;font-weight:900}.panel{background:var(--panel);border:2px solid var(--panel-border);border-radius:18px;box-shadow:var(--shadow);padding:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:11px;padding:10px 18px;font-size:.92rem;font-weight:800;font-family:inherit;cursor:pointer;transition:transform var(--fast) ease,filter var(--fast) ease;white-space:nowrap;&:active:not(:disabled){transform:scale(.97)}&:disabled{opacity:.45;cursor:not-allowed}&:focus-visible{outline:3px solid rgba(116,141,244,.35);outline-offset:2px}&.primary{background:var(--accent);color:#ffffff}&.primary:hover:not(:disabled){filter:brightness(.95)}&.ghost{background:#ffffff;color:var(--accent-strong);border:2px solid #94a3b8}&.ghost:hover:not(:disabled){background:#f1f5f9}}.pg-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 22px}.pg-header-left{display:flex;flex-direction:column;gap:4px}.pg-header-title{font-size:1.35rem;font-weight:900;color:var(--accent-strong);letter-spacing:-.01em}.pg-header-sub{font-size:.88rem;color:var(--muted);font-weight:500}.pg-header-actions{display:flex;gap:10px}.pg-main{display:grid;grid-template-columns:45fr 55fr;grid-gap:14px;gap:14px;min-height:0}.pg-canvas{display:flex;flex-direction:column;gap:14px;overflow-y:auto}.pg-canvas-label{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.pg-canvas-stage{flex:1 1;display:flex;flex-direction:column;padding:16px;border-radius:var(--r-lg);background:#f8fafc;border:1px dashed #cbd5e1}.pg-stage-inner{display:flex;flex-direction:column;gap:20px;padding:24px 20px;border-radius:var(--r-md);background:#ffffff;box-shadow:0 2px 16px rgba(15,23,42,.08);h1,h2,p{font-family:Georgia,serif}}.pg-el-wrap{display:flex;flex-direction:column;gap:6px;cursor:pointer}.pg-el-label{display:inline-block;align-self:flex-start;font-size:.74rem;font-weight:800;font-family:var(--font-mono,monospace);padding:3px 10px;border-radius:var(--r-pill);background:#f1f5f9;color:var(--muted);border:1.5px solid #cbd5e1;transition:background var(--fast),color var(--fast),border-color var(--fast);-webkit-user-select:none;-moz-user-select:none;user-select:none}.pg-el-wrap.is-selected .pg-el-label{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.pg-el-inner{border-radius:8px;outline:2.5px solid transparent;outline-offset:4px;transition:outline-color var(--fast),box-shadow var(--fast)}.pg-el-wrap.is-selected .pg-el-inner{outline-color:var(--accent);box-shadow:0 0 0 6px rgba(116,141,244,.18)}.pg-el-wrap:not(.is-selected):hover .pg-el-inner{outline-color:rgba(116,141,244,.45)}.pg-controls{display:flex;flex-direction:column;overflow-y:auto}.pg-editing-hd{display:flex;align-items:center;gap:10px;padding:10px 0 14px;border-bottom:1.5px solid #e2e8f0;margin-bottom:4px}.pg-editing-label{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.pg-editing-id{font-family:var(--font-mono,monospace);font-size:.95rem;font-weight:800;color:var(--accent);background:var(--accent-soft);border:1.5px solid var(--accent);padding:3px 12px;border-radius:var(--r-pill)}.pg-control-section{padding:14px 0;display:grid;grid-gap:12px;gap:12px}.pg-control-section+.pg-control-section{border-top:1.5px solid #e2e8f0}.pg-section-label{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0}.pg-control-row{display:grid;grid-template-columns:152px 1fr auto;align-items:center;grid-gap:12px;gap:12px;min-height:44px}.pg-control-label{font-size:.95rem;color:var(--accent-strong);white-space:nowrap}.pg-control-label,.pg-control-value{font-weight:700;font-family:var(--font-mono,monospace)}.pg-control-value{font-size:.88rem;color:var(--muted);min-width:58px;text-align:right}.pg-color-wrap{display:flex;align-items:center;gap:10px;grid-column:2/4}.pg-color-input{width:52px;height:40px;padding:3px;border:1.5px solid #cbd5e1;border-radius:var(--r-sm);cursor:pointer;background:#ffffff;flex-shrink:0;transition:border-color var(--fast)}.pg-color-input:hover{border-color:var(--accent)}.pg-color-input::-webkit-color-swatch-wrapper{padding:0}.pg-color-input::-webkit-color-swatch{border:1.5px solid rgba(15,23,42,.15);border-radius:4px}.pg-color-hex{font-size:.85rem;font-weight:600;font-family:var(--font-mono,monospace);color:var(--muted)}.pg-color-input-sm{width:40px;height:36px}.pg-clear-btn{background:transparent;border:1.5px solid #cbd5e1;border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);display:grid;place-items:center;padding:0;flex-shrink:0;transition:background var(--fast),border-color var(--fast),color var(--fast)}.pg-clear-btn:hover{background:#fee2e2;border-color:#ef4444;color:#991b1b}.pg-slider{width:100%;height:6px;accent-color:var(--accent);cursor:pointer}.pg-toggle-group{display:flex;gap:5px;grid-column:2/4}.pg-toggle-btn{flex:1 1;padding:9px 12px;border:1.5px solid #cbd5e1;border-radius:var(--r-sm);background:#ffffff;color:var(--muted);font-size:.82rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast);white-space:nowrap}.pg-toggle-btn:hover:not(.is-active){background:#f1f5f9;color:var(--accent-strong)}.pg-toggle-btn.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:800}.pg-border-row{display:grid;grid-template-columns:152px 80px auto auto auto;align-items:center;grid-gap:10px;gap:10px;min-height:44px}.pg-select{padding:7px 8px;border:1.5px solid #cbd5e1;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:var(--accent-strong);background:#ffffff;cursor:pointer;font-family:inherit}.pg-output{display:grid;grid-gap:14px;gap:14px;background:#f8fafc;border:2px solid var(--panel-border);border-top:3px solid var(--accent);border-radius:18px;box-shadow:var(--shadow);padding:16px 22px}.pg-output-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pg-output-label{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.pg-output-actions{display:flex;gap:8px;flex-wrap:wrap}.pg-output-actions .btn.ghost{padding:6px 12px;font-size:.82rem}.pg-output-actions .btn.ghost.is-copied{border-color:#16a34a;color:#15803d;background:#dcfce7}.pg-output-code{margin:0;font-family:var(--font-mono,monospace);font-size:.88rem;line-height:1.85;color:var(--accent-strong);white-space:pre;overflow-x:auto;min-height:56px}.pg-output-empty{color:var(--muted);font-style:italic}.pg-token-sel{color:var(--code-sel);font-weight:700}.pg-token-prop{color:var(--code-prop)}.pg-token-val{color:var(--code-val);font-weight:600}.pg-token-punc{color:var(--code-punc)}}@media (max-width:900px){.pg-app[data-ui=original] .pg-main{grid-template-columns:1fr}}