:root{color-scheme:light;--ink:#172033;--muted:#647189;--line:#d7dfe9;--bg:#f4f7fa;--paper:#fff;--blue:#246fd6;--blue-soft:#edf4ff;--green:#14785a;--red:#d84b55;--code:#101928;--code2:#172338;--code-line:#2d405d;--code-text:#dce8f8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button,input,textarea{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #87b7f3;outline-offset:2px}.px-app{width:min(1400px,calc(100% - 30px));margin:auto;padding:22px 0 50px}.px-top{display:flex;justify-content:space-between;font-size:.76rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.px-top a{color:var(--ink);text-decoration:none}.px-top span{color:var(--muted)}.px-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:35px;padding:40px 0 26px}.px-kicker{margin:0;color:var(--blue);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.px-hero h1{margin:4px 0 8px;font-size:clamp(2.6rem,6vw,5rem);line-height:.98;letter-spacing:-.055em}.px-hero p:last-child{max-width:760px;margin:0;color:var(--muted);font-size:1.05rem}.px-file-map{display:flex;align-items:stretch;gap:5px;padding:8px;border:1px solid var(--line);border-radius:13px;background:#fff}.px-file-map div{min-width:77px;padding:9px;border-radius:8px;background:#eef2f7;text-align:center}.px-file-map div:last-child{min-width:115px;background:var(--blue-soft)}.px-file-map strong,.px-file-map small{display:block}.px-file-map strong{font:900 .75rem ui-monospace,monospace}.px-file-map small{color:var(--muted);font-size:.6rem}.px-rgb-help{display:grid;grid-template-columns:230px 1fr auto;align-items:center;gap:16px;margin-bottom:14px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff}.px-rgb-help h2{margin:0;font-size:.92rem}.px-rgb-help p{margin:2px 0 0;color:var(--muted);font-size:.72rem}.px-rgb-bar{height:45px;display:flex;overflow:hidden;border-radius:9px;background:#e8edf3}.px-rgb-bar span{min-width:70px;display:grid;place-items:center;color:#fff;font-size:.73rem;font-weight:900;text-shadow:0 1px 2px #0006}.px-rgb-r{background:#dc4b56}.px-rgb-g{background:#199b67}.px-rgb-b{background:#3978db}.px-rgb-sample{font:800 .75rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right}.px-rgb-sample span{padding:3px 5px;border-radius:4px;color:#fff}.px-rgb-sample .r{background:#dc4b56}.px-rgb-sample .g{background:#199b67}.px-rgb-sample .b{background:#3978db}.px-settings{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) auto;align-items:end;gap:9px;margin-bottom:14px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff}.px-setting label{display:block;margin-bottom:4px;color:#43536b;font-size:.7rem;font-weight:850}.px-setting-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px}.px-setting input{width:100%;height:40px;padding:7px 9px;border:1px solid #b8c5d5;border-radius:8px;background:#fff;color:var(--ink);font-weight:850}.px-setting code{min-width:82px;padding:7px;border-radius:7px;background:#edf1f6;color:#31445f;font:750 .7rem ui-monospace,monospace;text-align:center}.px-setting small{display:block;margin-top:3px;color:var(--muted);font-size:.61rem}.px-tabs{display:flex;padding:3px;border-radius:9px;background:#e6ebf2}.px-tabs button{height:34px;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:#536177;font-size:.72rem;font-weight:850;cursor:pointer}.px-tabs button.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px #1d2a3b18}.px-workspace{display:grid;grid-template-columns:minmax(470px,.95fr) minmax(500px,1.05fr);gap:14px}.px-panel{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:#fff}.px-panel-head{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:#f8fafc}.px-panel-head h2{margin:0;font-size:1rem}.px-panel-head p{margin:1px 0 0;color:var(--muted);font-size:.7rem}.px-button{min-height:37px;padding:7px 12px;border:1px solid var(--blue);border-radius:8px;background:var(--blue);color:#fff;font-size:.76rem;font-weight:850;cursor:pointer}.px-button.secondary{border-color:#b9c7d8;background:#fff;color:#344a67}.px-button.danger{border-color:#dfc1c5;color:#9b3948}.px-code-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:9px 12px;background:var(--code2);color:#9fb1c8;font-size:.64rem}.px-code-legend span{padding:6px 8px;border-left:2px solid #60748e}.px-code-legend span:nth-child(1){border-color:#7db7ff}.px-code-legend span:nth-child(2){border-color:#62d2aa}.px-code-legend span:nth-child(3){border-color:#ffc36d}.px-code-legend span:nth-child(4){border-color:#bd8eff}.px-editor{height:650px;display:grid;grid-template-columns:108px minmax(0,1fr);overflow:hidden;background:var(--code)}.px-gutter{height:100%;margin:0;overflow:hidden;padding:12px 8px;border-right:1px solid var(--code-line);background:#152033;color:#7890ad;font:600 .7rem/1.72 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right;white-space:pre}.px-data{width:100%;height:100%;resize:none;overflow:auto;padding:12px;border:0;background:var(--code);color:var(--code-text);caret-color:#fff;font:500 .78rem/1.54 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.035em;white-space:pre;tab-size:2}.px-data::selection{background:#2e66a9}.px-code-status{min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--code-line);background:#151f2f;color:#9aacbf;font-size:.7rem}.px-code-status strong{color:#e7f0fb}.px-code-status .ok{color:#6cd5ab}.px-code-status .warn{color:#ffbf69}.px-code-actions{display:flex;flex-wrap:wrap;gap:7px;padding:11px 14px}.px-canvas-wrap{height:650px;display:grid;place-items:center;overflow:hidden;padding:20px;background-color:#f8fafc;background-image:linear-gradient(45deg,#edf1f5 25%,transparent 25%),linear-gradient(-45deg,#edf1f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf1f5 75%),linear-gradient(-45deg,transparent 75%,#edf1f5 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}#pixelCanvas{display:block;max-width:100%;max-height:100%;border:1px solid #8391a4;background:#fff;box-shadow:0 12px 35px #20314822;image-rendering:pixelated}.px-preview-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-top:1px solid var(--line);background:var(--line)}.px-preview-meta div{padding:10px;background:#fff;text-align:center}.px-preview-meta strong,.px-preview-meta span{display:block}.px-preview-meta strong{font-size:.8rem}.px-preview-meta span{color:var(--muted);font-size:.62rem}.px-explain{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.px-explain article{padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff}.px-explain span{width:29px;height:29px;display:grid;place-items:center;border-radius:7px;background:var(--blue-soft);color:var(--blue);font-weight:900}.px-explain h3{margin:8px 0 3px;font-size:.9rem}.px-explain p{margin:0;color:var(--muted);font-size:.74rem}.px-toast{position:fixed;left:50%;bottom:22px;z-index:10;transform:translate(-50%,20px);padding:9px 14px;border-radius:8px;background:#172033;color:#fff;font-size:.78rem;font-weight:800;opacity:0;pointer-events:none;transition:.2s}.px-toast.show{transform:translate(-50%,0);opacity:1}.px-footer{padding:24px;text-align:center;color:var(--muted);font-size:.73rem}@media(max-width:1020px){.px-hero{grid-template-columns:1fr}.px-file-map{display:none}.px-rgb-help{grid-template-columns:190px 1fr}.px-rgb-sample{grid-column:1/-1;text-align:center}.px-settings{grid-template-columns:repeat(3,1fr)}.px-settings .px-tabs{grid-column:1/-1;width:max-content}.px-workspace{grid-template-columns:1fr}.px-editor,.px-canvas-wrap{height:540px}}@media(max-width:600px){.px-app{width:calc(100% - 18px);padding-top:12px}.px-top span{display:none}.px-hero{padding:28px 0 20px}.px-rgb-help{grid-template-columns:1fr}.px-rgb-help>div:first-child{text-align:center}.px-rgb-bar{height:42px}.px-rgb-sample{grid-column:auto}.px-settings{grid-template-columns:1fr}.px-settings .px-tabs{grid-column:auto;width:100%}.px-tabs button{flex:1}.px-workspace{gap:10px}.px-panel-head{align-items:flex-start;flex-direction:column}.px-panel-head .px-button{width:100%}.px-code-legend{grid-template-columns:1fr 1fr}.px-editor{height:500px;grid-template-columns:82px 1fr}.px-gutter{padding-left:3px;padding-right:5px;font-size:.61rem}.px-data{font-size:.7rem;padding-left:8px}.px-code-status{align-items:flex-start;flex-direction:column}.px-code-actions .px-button{flex:1}.px-canvas-wrap{height:400px;padding:12px}.px-preview-meta{grid-template-columns:1fr}.px-explain{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}