.px-page{padding:40px 0 64px}.px-head h1{letter-spacing:-.02em;margin:0 0 6px;font-size:30px}.px-head .lede{margin-top:8px}.px-app{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:20px;margin-top:28px;display:grid}.px-drop{border:1.5px dashed var(--line-3);background:var(--bg-1);text-align:center;cursor:pointer;transition:border-color .15s var(--ease), background .15s var(--ease);border-radius:10px;place-items:center;gap:4px;padding:28px 16px;display:grid;position:relative}.px-drop:hover,.px-drop[data-over],.px-drop:focus-within{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 7%, var(--bg-1))}.px-drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}.px-drop input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.px-drop-title{color:var(--accent-hi);font-size:16px;font-weight:600}.px-drop-sub{font-size:13.5px}.px-sample{margin:10px 0 0;font-size:13.5px}.px-link{color:var(--accent-hi);font:inherit;text-underline-offset:2px;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.px-link:hover{color:var(--text-0)}.px-preview{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px;display:grid}.px-canvas-wrap{border:1px solid var(--line);background:var(--bg-1);border-radius:10px;place-items:center;padding:16px;display:grid}.px-canvas-wrap canvas{width:100%;max-width:512px;height:auto;image-rendering:pixelated;box-shadow:0 0 0 1px var(--canvas-edge);border-radius:2px}.px-swatches{grid-template-columns:repeat(var(--cols,1), 20px);gap:4px;min-width:0;display:grid}.px-swatch{border:1px solid var(--line-2);border-radius:4px;width:20px;height:20px}.px-ingame{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.px-ingame figure{border:1px solid var(--line);background:var(--bg-1);border-radius:10px;align-content:end;justify-items:center;gap:10px;min-width:0;margin:0;padding:16px 8px 12px;display:grid}.px-ingame figcaption{color:var(--text-2);text-align:center;font-size:12.5px}.px-wall{aspect-ratio:1;width:100%;max-width:144px;image-rendering:pixelated;background-repeat:repeat;background-size:33.3334% 33.3334%}.px-cube{aspect-ratio:1.732/2;width:125px;max-width:100%}.px-slot{background:#8b8b8b;place-items:center;width:72px;height:72px;display:grid;box-shadow:inset 4px 4px #373737,inset -4px -4px #fff}.px-slot canvas{object-fit:contain;width:64px;height:64px;image-rendering:pixelated}.px-source{align-items:center;gap:12px;display:flex}.px-source img{object-fit:contain;background:var(--bg-2);border-radius:6px;width:56px;height:56px}.px-source p{overflow-wrap:anywhere;margin:0;font-size:13px}.px-controls{border:1px solid var(--line);background:var(--bg-1);border-radius:10px;gap:16px;padding:18px;display:grid}.px-field{border:0;gap:6px;min-width:0;margin:0;padding:0;display:grid}.px-field legend,.px-label{color:var(--text-1);justify-content:space-between;padding:0;font-size:13.5px;font-weight:500;display:flex}.px-field legend{margin-bottom:6px}.px-label output{font-variant-numeric:tabular-nums;color:var(--text-2)}.px-field select{border:1px solid var(--line-2);background:var(--bg-2);width:100%;height:36px;color:var(--text-0);font:500 14px var(--font-ui);border-radius:6px;padding:0 10px}.px-field input[type=range]{width:100%;accent-color:var(--accent)}.px-adjust{gap:10px}.px-adjust>label{gap:4px;display:grid}.px-adjust .px-link{justify-self:start;font-size:13px}.px-seg{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.px-seg label{position:relative}.px-seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.px-seg span{border:1px solid var(--line-2);background:var(--bg-2);height:36px;color:var(--text-1);font:500 13.5px var(--font-ui);font-variant-numeric:tabular-nums;border-radius:6px;place-items:center;display:grid}.px-seg input:checked+span{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-hi)}.px-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.px-check{color:var(--text-1);cursor:pointer;font-size:13.5px;display:block}.px-check input{vertical-align:-2px;accent-color:var(--accent);margin:0 6px 0 0}.px-check .faint{font-size:12.5px}.px-actions{flex-wrap:wrap;gap:8px;display:flex}.px-actions .button[disabled]{opacity:.5;cursor:not-allowed}.px-status{min-height:1.4em;margin:0;font-size:13px}.px-how{max-width:720px;margin-top:40px}.px-how h2{margin:0 0 8px;font-size:18px}.px-how li,.px-how p{color:var(--text-1)}.px-how li+li{margin-top:6px}.px-how kbd{border:1px solid var(--line-2);background:var(--bg-2);font:500 12px var(--font-mono);border-bottom-width:2px;border-radius:4px;padding:1px 5px}@media (width<=860px){.px-app{grid-template-columns:1fr}}@media (width<=480px){.px-ingame{gap:8px}.px-ingame figure{padding:12px 4px 10px}.px-cube{width:84px}.px-slot{width:56px;height:56px}.px-slot canvas{width:48px;height:48px}}