.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}}.pg-app[data-ui=exp]{--brand:#BB24ED;--brand-soft:#E9A8FF;--brand-on:#FFFFFF;--spark-volt:#C7F900;--volt-on:#141210;--bg-page:#141210;--bg-panel:#252321;--bg-raised:#302E2B;--bg-sunken:#1A1816;--bg-stage:#FAFAF8;--fg-default:#F5F2EE;--fg-muted:#E8E4DF;--fg-subtle:#6E6B66;--border-default:rgba(245,242,238,.12);--border-strong:rgba(245,242,238,.22);--selected-bg:color-mix(in oklab,var(--brand) 22%,transparent);--hover-bg:rgba(245,242,238,.05);--shadow-panel:0 0 0 1px rgba(245,242,238,.06),0 8px 32px rgba(0,0,0,.45);--success:#C7F900;--danger:#FF7A85;--code-sel:var(--brand-soft);--code-prop:#6FA8FF;--code-val:var(--spark-volt);--code-punc:var(--fg-subtle);--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;--fast:120ms;--norm:180ms;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;grid-gap:14px;gap:14px;padding:14px;background:var(--bg-page);color:var(--fg-default);font-family:var(--font-display,"Bricolage Grotesque"),system-ui,sans-serif;font-size:16px;line-height:1.5;h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em}.panel{background:var(--bg-panel);border:1.5px solid var(--border-default);border-radius:var(--r-xl);box-shadow:var(--shadow-panel);padding:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 20px;border-radius:var(--r-md);border:1.5px solid var(--border-strong);background:var(--bg-raised);color:var(--fg-muted);font-weight:700;font-size:15px;line-height:1;cursor:pointer;white-space:nowrap;transition:background var(--fast),color var(--fast),filter var(--fast),transform var(--fast)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 50%,transparent);outline-offset:2px}.btn.ghost{background:transparent;border-color:var(--border-strong);color:var(--fg-subtle)}.btn.ghost:hover:not(:disabled){background:var(--hover-bg);color:var(--fg-muted)}.btn.volt{background:var(--spark-volt);color:var(--volt-on);border-color:transparent;font-weight:800}.btn.volt:hover:not(:disabled){filter:brightness(.93)}.pg-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px}.pg-header-left{display:flex;flex-direction:column;gap:4px}.pg-header-title{font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--fg-default);line-height:1}.pg-header-sub{font-size:14px;color:var(--fg-subtle);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:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--fg-subtle);font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace}.pg-canvas-stage{flex:1 1;display:flex;flex-direction:column;padding:16px;border-radius:var(--r-lg);background:var(--bg-raised);background-image:linear-gradient(var(--border-default) 1px,transparent 1px),linear-gradient(90deg,var(--border-default) 1px,transparent 1px);background-size:22px 22px}.pg-stage-inner{display:flex;flex-direction:column;gap:20px;padding:24px 20px;border-radius:var(--r-md);background:var(--bg-stage);box-shadow:0 2px 16px rgba(0,0,0,.35);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:12px;font-weight:700;font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace;padding:3px 10px;border-radius:var(--r-pill);background:var(--bg-sunken);color:var(--fg-subtle);border:1.5px solid var(--border-default);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(--selected-bg);color:var(--brand-soft);border-color:var(--brand)}.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(--brand);box-shadow:0 0 0 6px color-mix(in oklab,var(--brand) 15%,transparent)}.pg-el-wrap:not(.is-selected):hover .pg-el-inner{outline-color:color-mix(in oklab,var(--brand) 35%,transparent)}.pg-controls{display:flex;flex-direction:column;overflow-y:auto}.pg-editing-hd{display:flex;align-items:center;gap:10px;padding:14px 0 16px;border-bottom:1.5px solid var(--border-default);margin-bottom:4px}.pg-editing-label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-subtle)}.pg-editing-id,.pg-editing-label{font-weight:700;font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace}.pg-editing-id{font-size:16px;color:var(--brand-soft);background:var(--selected-bg);border:1.5px solid color-mix(in oklab,var(--brand) 40%,transparent);padding:3px 12px;border-radius:var(--r-pill);letter-spacing:-.01em}.pg-control-section{padding:16px 0;display:grid;grid-gap:14px;gap:14px}.pg-control-section+.pg-control-section{border-top:1.5px solid var(--border-default)}.pg-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--fg-subtle);margin:0;font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace}.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{color:var(--brand-soft);white-space:nowrap}.pg-control-label,.pg-control-value{font-size:15px;font-weight:700;font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace}.pg-control-value{color:var(--fg-subtle);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 var(--border-strong);border-radius:var(--r-sm);cursor:pointer;background:var(--bg-raised);flex-shrink:0;transition:border-color var(--fast)}.pg-color-input:hover{border-color:var(--brand)}.pg-color-input::-webkit-color-swatch-wrapper{padding:0}.pg-color-input::-webkit-color-swatch{border:1.5px solid rgba(245,242,238,.18);border-radius:4px}.pg-color-hex{font-size:14px;font-weight:600;font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace;color:var(--fg-subtle)}.pg-color-input-sm{width:40px;height:36px}.pg-clear-btn{background:transparent;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);width:32px;height:32px;cursor:pointer;font-size:16px;line-height:1;color:var(--fg-subtle);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:color-mix(in oklab,var(--danger) 15%,transparent);border-color:var(--danger);color:var(--danger)}.pg-slider{width:100%;height:6px;accent-color:var(--brand-soft);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 var(--border-strong);border-radius:var(--r-sm);background:var(--bg-raised);color:var(--fg-subtle);font-size:13px;font-weight:700;cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast);white-space:nowrap}.pg-toggle-btn:hover:not(.is-active){background:var(--hover-bg);color:var(--fg-muted)}.pg-toggle-btn.is-active{background:var(--selected-bg);border-color:var(--brand);color:var(--brand-soft);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 var(--border-strong);border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--fg-muted);background:var(--bg-raised);cursor:pointer}.pg-output{display:grid;grid-gap:14px;gap:14px;background:var(--bg-sunken);border:1.5px solid var(--border-default);border-top:2px solid var(--brand-soft);border-radius:var(--r-xl);box-shadow:var(--shadow-panel);padding:18px 24px}.pg-output-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pg-output-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--fg-subtle);font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace}.pg-output-actions{display:flex;gap:8px;flex-wrap:wrap}.pg-output-actions .btn.ghost{height:36px;padding:0 14px;font-size:13px;background:var(--bg-raised);border-color:var(--border-strong);color:var(--fg-subtle)}.pg-output-actions .btn.ghost:hover:not(:disabled){background:var(--hover-bg);color:var(--fg-muted)}.pg-output-actions .btn.ghost.is-copied{border-color:var(--success);color:var(--success);background:color-mix(in oklab,var(--success) 12%,transparent)}.pg-output-code{margin:0;font-family:var(--font-mono,"JetBrains Mono"),ui-monospace,monospace;font-size:14px;line-height:1.85;color:var(--fg-muted);white-space:pre;overflow-x:auto;min-height:56px}.pg-output-empty{color:var(--fg-subtle);font-style:italic}.pg-token-sel{color:var(--code-sel)}.pg-token-prop{color:var(--code-prop)}.pg-token-val{color:var(--code-val)}.pg-token-punc{color:var(--code-punc)}}@media (max-width:900px){.pg-app[data-ui=exp] .pg-main{grid-template-columns:1fr}}