.perler-root{--perler-blue-950:#06255f;--perler-blue-800:#073b9c;--perler-blue-650:#0057d9;--perler-blue-500:#087dff;--perler-blue-200:#b9d7ff;--perler-blue-100:#dfedff;--perler-blue-50:#f1f7ff;--perler-white:#fff;--perler-danger:#b42318;--color-bg:#f1f7ff;--color-fg:#06255f;--color-surface:#fff;--color-surface-raised:#fff;--color-muted:#49648f;--color-border:#b9d7ff;--color-accent:#0057d9;--color-accent-hover:#073b9c;--color-danger:#b42318;--color-warning:#8a5200;--color-success:#126b3a;--perler-shadow-sm:8px 8px 0 rgba(6,37,95,.12);--perler-shadow-lg:12px 12px 0 rgba(0,87,217,.18);min-height:100svh;overflow-x:clip;color-scheme:light;color:var(--perler-blue-950);background-color:var(--perler-blue-50);background-image:radial-gradient(circle at 1px 1px,rgba(0,87,217,.18) 1px,transparent 0),linear-gradient(135deg,hsla(0,0%,100%,.86),rgba(223,237,255,.86));background-size:16px 16px,100% 100%;font-family:Inter,PingFang SC,Microsoft YaHei,sans-serif}.perler-root *,.perler-root :after,.perler-root :before{box-sizing:border-box}.perler-root button,.perler-root input,.perler-root select{font:inherit;color:inherit}.perler-root a,.perler-root button,.perler-root input,.perler-root select{min-height:44px}.perler-root button{border:2px solid var(--perler-blue-800);border-radius:6px;padding:.55rem .75rem;background:var(--perler-white);box-shadow:3px 3px 0 var(--perler-blue-200);cursor:pointer}.perler-root button:hover{background:var(--perler-blue-100)}.perler-root button:disabled{cursor:not-allowed;opacity:.5}.perler-root button[aria-pressed=true]{color:var(--perler-white);background:var(--perler-blue-650);box-shadow:3px 3px 0 var(--perler-blue-950)}.perler-root :focus-visible{outline:3px solid #ffbf00;outline-offset:3px}.perler-root input,.perler-root select{max-width:100%;border:2px solid var(--perler-blue-800);border-radius:4px;background:var(--perler-white);padding:.5rem}.perler-skip-link{position:fixed;z-index:100;top:.5rem;left:.5rem;padding:.7rem 1rem;color:var(--perler-white);background:var(--perler-blue-950);transform:translateY(-140%)}.perler-skip-link:focus{transform:translateY(0)}.perler-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;width:min(100% - 2rem,1440px);margin-inline:auto;padding-block:max(1rem,env(safe-area-inset-top)) 1rem;text-align:center}.perler-header h1{margin:0;color:var(--perler-blue-650);font-family:Press Start\ 2P,ui-monospace,monospace;font-size:clamp(1.35rem,4vw,2.35rem);letter-spacing:.04em}.perler-back-link,.perler-kicker,.perler-status-chip{font-family:Press Start\ 2P,ui-monospace,monospace;font-size:.68rem;letter-spacing:.06em}.perler-kicker{margin:0 0 .45rem}.perler-back-link{justify-self:start;display:inline-flex;align-items:center;color:var(--perler-blue-950)}.perler-status-chip{justify-self:end;min-height:32px;padding:.55rem .65rem;color:var(--perler-white);background:var(--perler-blue-650);border:2px solid var(--perler-blue-950)}.perler-main{width:min(100% - 2rem,1440px);margin-inline:auto;padding-bottom:max(2rem,env(safe-area-inset-bottom))}.perler-color-list,.perler-panel,.perler-recent-works,.perler-reference-grid{border:3px solid var(--perler-blue-800);border-radius:8px;background:var(--perler-white);box-shadow:var(--perler-shadow-sm);padding:1rem}.perler-stage-source{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(16rem,.7fr);gap:1.25rem}.perler-source-primary{min-height:58vh}.perler-source-sidebar{display:grid;align-content:start;gap:1rem}.perler-stage-placeholder{display:grid;min-height:58vh;place-items:center;border:3px dashed var(--perler-blue-500);background:hsla(0,0%,100%,.88)}.perler-error-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;border:3px solid var(--perler-danger);background:#fff2f0;padding:.75rem}.perler-workbench{display:grid;grid-template-columns:minmax(14rem,.8fr) minmax(0,3fr) minmax(16rem,1fr);gap:1rem;min-height:calc(100svh - 8rem)}.perler-workbench-center{min-width:0}.perler-canvas-shell{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:.75rem;border:3px solid var(--perler-blue-800);background:var(--perler-white);box-shadow:var(--perler-shadow-lg);padding:.75rem}.perler-canvas-controls{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem}.perler-canvas-stack{position:relative;max-height:70svh;overflow:hidden;border:2px solid var(--perler-blue-950);background:linear-gradient(45deg,#e7f1ff 25%,transparent 0),linear-gradient(-45deg,#e7f1ff 25%,transparent 0),linear-gradient(45deg,transparent 75%,#e7f1ff 0),linear-gradient(-45deg,transparent 75%,#e7f1ff 0);background-size:20px 20px;touch-action:none}.perler-canvas-stack canvas{position:absolute;inset:0}.perler-minimap{align-self:end;width:160px;max-width:28vw;border:2px solid var(--perler-blue-800);background:var(--perler-white);touch-action:none}.perler-block-nav{grid-column:1/-1;display:flex;justify-content:center;gap:.5rem}.perler-block-nav input{width:5rem;text-align:center}.perler-correction-toolbar,.perler-workbench-toolbar{display:flex;flex-wrap:wrap;gap:.5rem}.perler-color-chip{display:inline-block;width:1.25rem;height:1.25rem;margin-right:.5rem;border:1px solid var(--perler-blue-950);vertical-align:middle}.perler-color-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:.5rem}.perler-color-row>button:first-child{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.perler-color-row[data-completed=true]{filter:grayscale(1);opacity:.62}.perler-reference-grid fieldset{display:grid;gap:.5rem;margin-top:.75rem;border:2px solid var(--perler-blue-200)}.perler-color-list label,.perler-reference-grid label{display:grid;gap:.3rem}.perler-palette-picker [role=listbox]{display:grid;max-height:42vh;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;overflow-y:auto;margin-top:.5rem}.perler-panel-close,.perler-panel-toggle{display:none}.perler-recent-list{display:grid;gap:.75rem}.perler-recent-card{border:2px solid var(--perler-blue-200);padding:.75rem}.perler-modal-backdrop{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(6,37,95,.5)}.perler-modal-card{width:min(100%,30rem);max-height:min(80svh,42rem);overflow-y:auto;border:3px solid var(--perler-blue-950);border-radius:8px;background:var(--perler-white);box-shadow:var(--perler-shadow-lg);padding:1.25rem}.perler-modal-card fieldset{display:grid;gap:.5rem;margin-block:1rem}@media (max-width:960px){.perler-stage-source{grid-template-columns:1fr}.perler-workbench{grid-template-columns:minmax(12rem,.7fr) minmax(0,2fr)}.perler-panel-close,.perler-panel-toggle{display:inline-flex;align-items:center}.perler-workbench-right{display:none;position:fixed;z-index:20;inset-block:5rem 1rem;right:1rem;width:min(22rem,calc(100vw - 2rem));overflow-y:auto;padding:.75rem;background:var(--perler-blue-50);border:3px solid var(--perler-blue-800);box-shadow:var(--perler-shadow-lg)}.perler-workbench-right[data-open=true]{display:block}}@media (max-width:640px){.perler-header{grid-template-columns:auto 1fr;width:min(100% - 1rem,1440px);text-align:left}.perler-kicker,.perler-status-chip{display:none}.perler-main{width:min(100% - 1rem,1440px)}.perler-stage-source{display:block}.perler-source-sidebar{margin-top:1rem}.perler-workbench{display:flex;flex-direction:column;min-height:auto}.perler-workbench-center{order:-1}.perler-canvas-shell{grid-template-columns:1fr}.perler-minimap{width:128px;max-width:40vw}.perler-correction-toolbar{position:sticky;z-index:10;bottom:env(safe-area-inset-bottom);padding:.5rem;background:var(--perler-white);border-top:3px solid var(--perler-blue-800)}}@media (prefers-reduced-motion:reduce){.perler-root *,.perler-root :after,.perler-root :before{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}