*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{color:#111827;background:#f3f4f6;flex-direction:column;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}a{color:inherit;text-decoration:none}code,pre{font-family:JetBrains Mono,Fira Code,ui-monospace,monospace}.site-header{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1c1917;border-bottom:1px solid #ffffff12;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:12px;max-width:1400px;height:52px;margin:0 auto;padding:0 20px;display:flex}.brand{color:#fff;align-items:center;gap:8px;display:flex}.brand img{border-radius:6px;width:26px;height:26px}.brand-name{font-size:16px;font-weight:700}.brand-version{color:#fb923c;background:#e8751a33;border:1px solid #e8751a59;border-radius:999px;padding:2px 7px;font-size:11px;font-weight:600}.header-nav{align-items:center;gap:2px;display:flex}.nav-link{color:#a8a29e;border-radius:6px;padding:5px 11px;font-size:13px;font-weight:500;transition:background .15s,color .15s}.nav-link:hover{color:#fff;background:#ffffff14}.nav-link.active{color:#fb923c;background:#e8751a26}.lang-switch{border-left:1px solid #ffffff26;align-items:center;gap:2px;margin-left:6px;padding-left:10px;display:flex}.lang-switch a{color:#a8a29e;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600;transition:background .15s,color .15s}.lang-switch a:hover{color:#fff;background:#ffffff14}.lang-switch a.active{color:#fb923c;background:#e8751a26}.pg-layout{flex-direction:column;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:16px 16px 0;display:flex}.pg-toolbar-bar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.pg-toolbar-bar h1{color:#111827;margin-right:auto;font-size:15px;font-weight:700}.pg-toolbar-bar h1 span{color:#e8751a}.pg-panels{flex:1;gap:12px;min-height:0;padding-bottom:16px;display:flex}.panel-editor{background:#fff;border:1px solid #e5e7eb;border-radius:10px;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.panel-editor .an-container{flex:1;box-shadow:none!important;border-color:#0000!important;border-radius:0!important}.panel-editor.is-focused{border-color:var(--pg-focus-color,#e8751a);box-shadow:0 0 0 3px var(--pg-focus-shadow,#e8751a33);transition:border-color .15s,box-shadow .15s}#editor-el{height:100%}.panel-right{flex-direction:column;flex-shrink:0;gap:10px;width:300px;display:flex}.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}.card-header{cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.card-header:hover{background:#fafafa}.card-title{letter-spacing:.05em;text-transform:uppercase;color:#6b7280;font-size:12px;font-weight:700}.card-toggle{color:#9ca3af;font-size:14px;transition:transform .2s}.card-toggle.open{transform:rotate(90deg)}.card-body{flex-direction:column;gap:10px;padding:12px 14px;display:flex}.card-body.hidden{display:none}.cfg-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.cfg-label{color:#374151;flex:1;font-size:12px;font-weight:500}.cfg-select,.cfg-input{color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:6px;outline:none;padding:4px 8px;font-size:12px;transition:border-color .15s}.cfg-select:focus,.cfg-input:focus{border-color:#e8751a}.cfg-input[type=number]{width:70px}.cfg-input[type=color]{cursor:pointer;width:40px;height:26px;padding:2px}.cfg-toggle{flex-shrink:0;width:34px;height:18px;position:relative}.cfg-toggle input{opacity:0;width:0;height:0}.cfg-track{cursor:pointer;background:#d1d5db;border-radius:999px;transition:background .2s;position:absolute;inset:0}.cfg-track:after{content:"";background:#fff;border-radius:50%;width:13px;height:13px;transition:transform .2s;position:absolute;top:2.5px;left:2.5px;box-shadow:0 1px 3px #0003}.cfg-toggle input:checked+.cfg-track{background:#e8751a}.cfg-toggle input:checked+.cfg-track:after{transform:translate(16px)}.snippet-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.snippet-btn{color:#374151;cursor:pointer;text-align:left;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:6px 8px;font-size:11px;font-weight:500;line-height:1.3;transition:background .15s,border-color .15s}.snippet-btn:hover{color:#e8751a;background:#fff3e8;border-color:#e8751a}.snippet-icon{margin-bottom:2px;font-size:14px;display:block}.output-card{flex-direction:column;flex:1;min-height:0;display:flex}.output-tabs{border-bottom:1px solid #f3f4f6;gap:2px;padding:8px 8px 0;display:flex}.output-tab{cursor:pointer;color:#6b7280;background:0 0;border:1px solid #0000;border-bottom:none;border-radius:5px 5px 0 0;padding:4px 10px;font-size:11px;font-weight:600;transition:color .15s,background .15s}.output-tab.active{color:#e8751a;background:#fff;border-color:#e5e7eb #e5e7eb #fff;margin-bottom:-1px}.output-body{color:#374151;flex:1;padding:10px 12px;font-size:11.5px;line-height:1.6;overflow-y:auto}.output-pane{display:none}.output-pane.active{display:block}.output-html{white-space:pre-wrap;word-break:break-all}.stats-row{border-bottom:1px solid #f3f4f6;justify-content:space-between;padding:4px 0;display:flex}.stats-row:last-child{border-bottom:none}.stats-key{color:#6b7280;font-weight:600}.stats-val{color:#e8751a;font-weight:700}.action-row{border-top:1px solid #f3f4f6;flex-wrap:wrap;gap:6px;padding:8px 10px;display:flex}.act-btn{cursor:pointer;color:#374151;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:4px;padding:5px 8px;font-size:11px;font-weight:600;transition:background .15s,border-color .15s,color .15s;display:flex}.act-btn:hover{color:#e8751a;background:#fff3e8;border-color:#e8751a}.act-btn.primary{color:#fff;background:#e8751a;border-color:#e8751a}.act-btn.primary:hover{background:#d4611a}.apply-btn{cursor:pointer;color:#fff;background:#e8751a;border:none;border-radius:7px;width:100%;padding:8px;font-size:12px;font-weight:700;transition:background .15s,transform .1s}.apply-btn:hover{background:#d4611a;transform:translateY(-1px)}.site-footer{color:#78716c;background:#1c1917;padding:14px 20px;font-size:12px}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;max-width:1400px;margin:0 auto;display:flex}.footer-links{gap:16px;display:flex}.footer-links a{color:#78716c;transition:color .15s}.footer-links a:hover{color:#d6d3d1}@media (width<=768px){.pg-panels{flex-direction:column}.panel-right{width:100%}.panel-editor{min-height:400px}}@media (width<=480px){.pg-layout{padding:10px 10px 0}.pg-toolbar-bar{gap:4px;margin-bottom:8px}.pg-toolbar-bar h1{font-size:13px}.header-inner{gap:6px;padding:0 12px}.brand-name{font-size:14px}.nav-link{padding:4px 7px;font-size:12px}.card{border-radius:8px}.action-row{gap:4px;padding:6px 8px}.act-btn{padding:4px 6px;font-size:10px}}body.dark{color:#cdd6f4;background:#1e1e2e}body.dark .pg-toolbar-bar h1{color:#cdd6f4}body.dark .pg-toolbar-bar h1 span{color:#e8751a}body.dark .card,body.dark .card-header{background:#181825;border-color:#45475a}body.dark .card-header:hover{background:#1e1e2e}body.dark .card-title,body.dark .cfg-label{color:#a6adc8}body.dark .cfg-select,body.dark .cfg-input{color:#cdd6f4;background:#313244;border-color:#45475a}body.dark .cfg-track{background:#45475a}body.dark .cfg-toggle input:checked+.cfg-track{background:#e8751a}body.dark .snippet-btn{color:#cdd6f4;background:#313244;border-color:#45475a}body.dark .snippet-btn:hover{color:#c6d8f8;background:#45475a;border-color:#c6d8f8}body.dark .output-tabs{border-color:#45475a}body.dark .output-tab{color:#6c7086}body.dark .output-tab.active{color:#89b4fa;background:#181825;border-color:#45475a #45475a #181825}body.dark .output-body{color:#cdd6f4;background:#181825}body.dark .stats-row{border-color:#45475a}body.dark .stats-key{color:#6c7086}body.dark .action-row{border-color:#45475a}body.dark .act-btn{color:#cdd6f4;background:#313244;border-color:#45475a}body.dark .act-btn:hover{color:#c6d8f8;background:#45475a;border-color:#c6d8f8}body.dark .act-btn.primary{color:#fff;background:#b05010;border-color:#b05010}body.dark .act-btn.primary:hover{background:#d4611a}body.dark .panel-editor{background:#181825;border-color:#45475a}body.dark .apply-btn{background:#e8751a}body.dark .apply-btn:hover{background:#d4611a}body.dark .site-footer{background:#11111b}.pg-about{color:#64748b;max-width:860px;margin:0 auto;padding:24px 20px 32px;font-size:.82rem;line-height:1.6}.pg-about h2{color:#94a3b8;margin-bottom:10px;font-size:.9rem;font-weight:600}.pg-about ul{margin-bottom:10px;padding-left:18px}.pg-about li{margin-bottom:4px}.pg-about code{background:#f1f5f9;border-radius:3px;padding:1px 4px;font-size:.8rem}.pg-about a{color:#94a3b8;text-decoration:underline}body.dark .pg-about{color:#475569}body.dark .pg-about h2{color:#334155}body.dark .pg-about code{background:#1e293b}body.dark .pg-about a{color:#334155}