.pixels-game,.designer-game{--px-purple:#7651dc;--px-ink:#29223e;--px-mint:#b5efd8;--px-line:#e8e1f4;--px-paper:#fffdf8;color:var(--px-ink);font-family:inherit;animation:px-arrive .48s ease both}
.pixels-game *,.designer-game *{box-sizing:border-box}
.pixels-game .px-header,.designer-game .px-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.pixels-game .px-eyebrow,.designer-game .px-eyebrow{font-size:.69rem;font-weight:850;letter-spacing:.14em;color:var(--px-purple)}
.pixels-game h2,.designer-game h2{margin:10px 0 10px;font-size:clamp(1.65rem,3vw,2.65rem);letter-spacing:-.055em;line-height:1.13;font-weight:850}
.pixels-game .px-header p,.designer-game .px-header p{max-width:680px;font-size:.94rem;line-height:1.65;color:#706780;margin:0}
.pixels-game .px-orbit,.designer-game .px-orbit{display:grid;place-items:center;flex-shrink:0;width:76px;height:76px;border:1px solid #ddd0fb;border-radius:26px;background:#f0e8ff;color:var(--px-purple);font-size:2.9rem;box-shadow:7px 7px 0 #e8dbff;animation:px-float 4s ease-in-out infinite}
.pixels-game .px-layout,.designer-game .px-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);gap:22px;align-items:start}
.pixels-game .px-panel,.designer-game .px-panel{background:#fff;border:1px solid var(--px-line);border-radius:26px;padding:25px;min-width:0}
.pixels-game .px-work,.designer-game .px-work{background:linear-gradient(155deg,#f9f5ff,#f7fcf8);position:relative;overflow:hidden}
.pixels-game .px-board-caption,.designer-game .px-board-caption{text-align:center;color:#8c819d;font-size:.62rem;font-weight:850;letter-spacing:.12em;margin:0 0 21px}
.pixels-game .px-grid,.designer-game .px-grid{--px-cols:6;display:grid;grid-template-columns:repeat(var(--px-cols),minmax(0,1fr));gap:5px;width:100%;max-width:390px;margin:0 auto;position:relative;padding:11px;background:#e9e1f1;border:1px solid #ddd0ef;border-radius:17px;box-shadow:0 10px 30px #593b8b0c;isolation:isolate}
.pixels-game .px-grid.has-mirror::after,.designer-game .px-grid.has-mirror::after{content:"";position:absolute;top:7px;bottom:7px;left:50%;width:0;border-left:2px dashed #8b6bd5;pointer-events:none;z-index:2;opacity:.7}
.pixels-game .px-cell,.designer-game .px-cell{display:block;aspect-ratio:1;background:#fffdfd;border:1px solid #d9cfe7;border-radius:5px;padding:0;min-width:0;min-height:0;transition:background .16s,transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s;box-shadow:0 2px 0 #d5c9e0;cursor:pointer;touch-action:manipulation}
.pixels-game .px-cell.is-on,.designer-game .px-cell.is-on{background:var(--px-purple);border-color:#6341c0;box-shadow:0 2px 0 #5435a9,inset 0 2px 0 #ffffff30}
.pixels-game .px-cell.is-locked.is-on,.designer-game .px-cell.is-locked.is-on{background:#a68bdf;border-color:#9275ca;box-shadow:0 2px 0 #8668ba,inset 0 2px 0 #ffffff20}
.pixels-game .px-cell.is-locked,.designer-game .px-cell.is-locked{cursor:default;background:#f5effc}
.pixels-game .px-cell:not(:disabled):hover,.designer-game .px-cell:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 4px 0 #ac92d7}
.pixels-game .px-cell:not(:disabled):active,.designer-game .px-cell:not(:disabled):active{transform:scale(.86)}
.pixels-game .is-readonly .px-cell,.designer-game .is-readonly .px-cell{cursor:default;pointer-events:none}
.pixels-game button:focus-visible,.designer-game button:focus-visible,.pixels-game textarea:focus-visible,.designer-game textarea:focus-visible,.designer-game input:focus-visible,.designer-game summary:focus-visible{outline:3px solid #3a9878;outline-offset:4px}
.pixels-game .px-stats,.designer-game .px-stats{display:flex;gap:9px;margin-top:22px;justify-content:center}
.pixels-game .px-stat,.designer-game .px-stat{flex:1;text-align:center;padding:13px 6px;background:#ffffffb8;border:1px solid #e8dff1;border-radius:15px;min-width:0}
.pixels-game .px-stat strong,.designer-game .px-stat strong{display:block;font-size:1.4rem;font-weight:850;letter-spacing:-.04em;color:#6041a9;font-variant-numeric:tabular-nums}
.pixels-game .px-stat span,.designer-game .px-stat span{display:block;font-size:.6rem;color:#8e819d;line-height:1.4;margin-top:5px}
.pixels-game .px-pill,.designer-game .px-pill{display:inline-block;background:#e7f8ef;color:#357b61;border-radius:7px;padding:6px 8px;font-size:.61rem;font-weight:850;letter-spacing:.08em}
.pixels-game h3,.designer-game h3{font-size:1.14rem;line-height:1.35;letter-spacing:-.025em;margin:15px 0 10px}
.pixels-game .px-instructions p,.designer-game .px-instructions p{font-size:.85rem;line-height:1.7;color:#746a82;margin:10px 0 15px}
.pixels-game .px-note,.designer-game .px-note{font-size:.78rem;color:#625477;background:#f1ebfb;border-left:3px solid #b79ae9;border-radius:0 12px 12px 0;padding:12px 14px;line-height:1.6;margin:17px 0}
.pixels-game .px-checklist,.designer-game .px-checklist{list-style:none;padding:0;margin:15px 0 20px}
.pixels-game .px-checklist li,.designer-game .px-checklist li{position:relative;padding:8px 0 8px 24px;font-size:.8rem;line-height:1.55;color:#6f647d;border-bottom:1px solid #f1edf7}
.pixels-game .px-checklist li::before,.designer-game .px-checklist li::before{content:"✧";position:absolute;left:0;top:7px;color:#9774d6;font-weight:800;font-size:1rem}
.pixels-game .px-actions,.designer-game .px-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px}
.pixels-game .px-button,.designer-game .px-button{appearance:none;min-height:43px;border:1px solid transparent;border-radius:12px;padding:12px 17px;background:var(--px-purple);color:white;font:inherit;font-size:.77rem;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #5635ac;transition:transform .15s,box-shadow .15s,background .15s;line-height:1.35;text-align:center}
.pixels-game .px-button:hover,.designer-game .px-button:hover{background:#6844cc;transform:translateY(-2px);box-shadow:0 6px 0 #5635ac}
.pixels-game .px-button:active,.designer-game .px-button:active{transform:translateY(3px);box-shadow:0 1px 0 #5635ac}
.pixels-game .px-secondary,.designer-game .px-secondary{background:#fff;color:#6d5c85;border:1px solid #e2d8ed;box-shadow:0 3px 0 #e7deef}
.pixels-game .px-secondary:hover,.designer-game .px-secondary:hover{background:#f7f2fe;box-shadow:0 5px 0 #e0d4ed}
.pixels-game .px-feedback,.designer-game .px-feedback{border:1px solid #efdebb;background:#fffbef;color:#8c7343!important;font-size:.77rem!important;line-height:1.65!important;border-radius:12px;padding:12px 13px;margin:20px 0 10px!important}
.pixels-game .px-feedback.is-success,.designer-game .px-feedback.is-success{background:#eafaef;border-color:#b8e0c7;color:#34714f!important;animation:px-arrive .35s ease both}
.pixels-game .px-small,.designer-game .px-small{font-size:.69rem!important;line-height:1.65!important;color:#95899f!important}
.pixels-game .px-tabs{display:flex;gap:8px;margin:-4px 0 21px;flex-wrap:wrap}
.pixels-game .px-tabs:empty{display:none}
.pixels-game .px-tab{font:inherit;font-size:.76rem;font-weight:750;border:1px solid #e2d7f1;background:#fff;border-radius:20px;padding:9px 15px;color:#8b7a9e;cursor:pointer;transition:all .2s}
.pixels-game .px-tab.is-active{background:#ede4ff;border-color:#c7b3ed;color:#7049ba;box-shadow:0 2px 0 #dacaf3}
.pixels-game .px-legend{display:flex;justify-content:center;gap:18px;font-size:.7rem;color:#8a7d9d;margin-top:20px}
.pixels-game .px-field,.designer-game .px-field{display:flex;flex-direction:column;gap:7px;margin-top:15px;font-size:.75rem;font-weight:750;color:#70627d}
.pixels-game .px-code-input,.designer-game .px-code-input{width:100%;resize:vertical;min-height:80px;background:#fbf8ff;color:#6d4da8;border:1px solid #dbceee;border-radius:12px;font:600 .83rem/1.75 ui-monospace,Consolas,monospace;padding:12px 14px;letter-spacing:.04em;tab-size:2;word-break:break-all;box-shadow:inset 0 2px 0 #80609805}
.pixels-game .px-code-input::placeholder,.designer-game .px-code-input::placeholder{color:#b4a7c6;font-size:.71rem;letter-spacing:0;font-weight:400}
.pixels-game .px-binary-code{font:750 clamp(.9rem,2vw,1.13rem)/1.65 ui-monospace,Consolas,monospace;letter-spacing:.4em;text-align:center;padding:19px 14px;margin:15px 0;background:#f5efff;border:1px solid #e6d8f6;border-radius:14px;color:#8460c1;overflow:auto}
.pixels-game .px-preview{margin-top:15px}
.pixels-game .px-preview:empty{display:none}
.pixels-game .px-preview .px-grid{max-width:180px;margin:8px 0;padding:6px;gap:3px;border-radius:9px}
.pixels-game .px-preview .px-cell{border-radius:2px}
.pixels-game .px-question{display:block;font-size:.76rem;margin:18px 0 9px;color:#746382}
.pixels-game .px-choice{display:flex;gap:6px;flex-wrap:wrap}
.pixels-game .px-choice-button{font:inherit;font-size:.7rem;font-weight:700;line-height:1.35;padding:8px 10px;background:white;border:1px solid #e3daee;border-radius:9px;cursor:pointer;color:#8b7b9a;transition:background .2s,transform .2s}
.pixels-game .px-choice-button.is-selected{background:#e4f7ec;border-color:#8fd1af;color:#3c805a;transform:translateY(-1px);box-shadow:0 2px 0 #c0dfcc}
.designer-game .px-text-input{width:100%;padding:11px 12px;font:inherit;font-weight:450;font-size:.82rem;line-height:1.6;color:#5c4c70;background:#fdfbff;border:1px solid #e0d5ee;border-radius:10px;resize:vertical}
.designer-game .px-text-input::placeholder{color:#b3a5c1}
.designer-game .px-sharing{margin-top:19px;border-top:1px dashed #ddccec;padding-top:9px}
.designer-game .px-sharing:empty{display:none}
.designer-game .px-peer{border:1px solid #e5dced;border-radius:13px;padding:14px;background:#ffffffb0;margin-top:19px}
.designer-game .px-peer summary{font-size:.76rem;font-weight:750;color:#8d73ae;cursor:pointer;line-height:1.5}
.designer-game .px-peer .px-code-input{min-height:64px;font-size:.66rem}
.pixels-game.px-celebrate .px-grid,.designer-game.px-celebrate .px-grid{animation:px-glow 1s ease 2}
@keyframes px-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes px-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(7deg)}}
@keyframes px-glow{0%,100%{box-shadow:0 0 0 0 #aa86ed00}50%{box-shadow:0 0 0 9px #b591f333,0 12px 25px #7651dc18}}
@media(max-width:1000px){.pixels-game .px-layout,.designer-game .px-layout{grid-template-columns:minmax(0,1fr) minmax(260px,.95fr);gap:15px}.pixels-game .px-panel,.designer-game .px-panel{padding:19px}.pixels-game .px-grid,.designer-game .px-grid{gap:4px;padding:8px}}
@media(max-width:720px){.pixels-game .px-layout,.designer-game .px-layout{grid-template-columns:1fr}.pixels-game .px-header,.designer-game .px-header{gap:12px}.pixels-game .px-orbit,.designer-game .px-orbit{width:53px;height:53px;border-radius:18px;font-size:2rem;box-shadow:4px 4px 0 #e8dbff}.pixels-game .px-panel,.designer-game .px-panel{padding:20px}.pixels-game .px-header p,.designer-game .px-header p{font-size:.84rem}.pixels-game h2,.designer-game h2{font-size:1.7rem}.pixels-game .px-grid,.designer-game .px-grid{max-width:365px}.pixels-game .px-actions .px-button,.designer-game .px-actions .px-button{flex:1}.pixels-game .px-stats,.designer-game .px-stats{margin-top:17px}.pixels-game .px-binary-code{letter-spacing:.45em}}
@media(prefers-reduced-motion:reduce){.pixels-game,.designer-game,.pixels-game *,.designer-game *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-motion="reduced"] .pixels-game,html[data-motion="reduced"] .designer-game,html[data-motion="reduced"] .pixels-game *,html[data-motion="reduced"] .designer-game *{animation:none!important;transition:none!important;scroll-behavior:auto!important}