body{color:#14202b;background:linear-gradient(#9bd7f5 0%,#e8f6ff 40%,#fff 70%);flex-direction:column;align-items:center;min-height:100vh;margin:0;font-family:Fredoka,Trebuchet MS,system-ui,sans-serif;display:flex}.pixel-head{align-items:center;gap:14px;width:min(1080px,94vw);padding:14px 0 6px;display:flex}.pixel-head h1{margin:0;font-size:clamp(22px,3.6vw,30px)}.pixel-head p{color:#4a5b6b;margin:2px 0 0;font-size:13px}.pixel-head nav{gap:6px;margin-left:auto;display:flex}.pixel-head nav a{background:#fff;border:2px solid #e6ecf2;border-radius:12px;place-items:center;width:38px;height:38px;font-size:18px;text-decoration:none;transition:all .13s;display:grid}.pixel-head nav a:hover{border-color:#22a7f0;transform:translateY(-2px)}.controls{background:#fff;border:3px solid #e6ecf2;border-radius:22px;flex-direction:column;align-items:center;gap:12px;width:min(1080px,94vw);margin:6px 0 18px;padding:16px;display:flex;box-shadow:0 10px 30px #143c5a1f}.controls__row{color:#4a5b6b;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;font-size:14px;font-weight:600;display:flex}.controls__row label{align-items:center;gap:8px;display:flex}.controls__row select{font:inherit;color:#14202b;cursor:pointer;background:#fff6ec;border:2px solid #e6ecf2;border-radius:12px;padding:8px 12px}.controls__row input[type=color]{cursor:pointer;background:0 0;border:2px solid #e6ecf2;border-radius:10px;width:42px;height:32px;padding:0}.controls__row button{font:inherit;color:#fff;cursor:pointer;background:#e3000b;border:3px solid #0000;border-radius:14px;align-items:center;gap:7px;padding:9px 18px;font-weight:700;transition:all .13s;display:inline-flex;box-shadow:0 4px #a80009}.controls__row button.ghost{color:#14202b;background:#fff6ec;border-color:#e6ecf2;box-shadow:0 4px #e6ecf2}.controls__row button:hover{transform:translateY(-2px)}.controls__row button:active{box-shadow:none;transform:translateY(2px)}.palette{flex-wrap:wrap;justify-content:center;max-width:520px;display:flex}.color{cursor:pointer;border:3px solid #fff;border-radius:9px;width:30px;height:30px;margin:4px;transition:all .12s;box-shadow:0 2px #143c5a2e}.color:hover{transform:translateY(-2px)}.color.is-active{border-color:#14202b;box-shadow:0 0 0 3px #22a7f0}.board{aspect-ratio:1;touch-action:none;cursor:crosshair;background-color:#cfd8e0;border:3px solid #14202b;border-radius:14px;width:min(760px,94vw,78vh);position:relative;overflow:hidden}.board.hand{cursor:grab}.board.hand:active{cursor:grabbing}.grid{transform-origin:0 0;will-change:transform;background-color:#cfd8e0;gap:1px;display:grid;position:absolute;inset:0}.cell{background-color:#fff;position:relative}.cell span{font-size:calc(var(--cell,12px) * .78);color:#7d8b98;pointer-events:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-weight:700;line-height:1;display:none;position:absolute;inset:0}.grid.with-numbers .cell span{display:flex}.grid.with-numbers .cell.ok span,.grid.with-numbers .cell.filled span{display:none}.view{gap:6px}.view button{justify-content:center;min-width:42px;padding:8px 12px}.view button.on{color:#fff;background:#22a7f0;border-color:#22a7f0;box-shadow:0 4px #1685c0}.view-hint{color:#90a1b0;margin-left:4px;font-size:11px;font-weight:600}.model-palette{border-bottom:2px dashed #e6ecf2;align-items:center;gap:6px;max-width:620px;margin-bottom:6px;padding-bottom:8px}.code-title{text-align:center;letter-spacing:.05em;text-transform:uppercase;color:#90a1b0;width:100%;font-size:10px;font-weight:700}.color.code{font:inherit;cursor:pointer;border:3px solid #0000;place-items:center;padding:0;font-size:13px;font-weight:700;display:grid}.progress{color:#22a7f0;font-variant-numeric:tabular-nums;font-weight:700}.preview{cursor:pointer;z-index:30;background:#fff;border:3px solid #22a7f0;border-radius:18px;padding:12px;position:fixed;top:50%;right:16px;transform:translateY(-50%);box-shadow:0 12px 30px #14202b33}.preview canvas{width:200px;height:200px;image-rendering:pixelated;border:2px solid #e6ecf2;border-radius:10px;display:block}.preview p{text-align:center;color:#4a5b6b;margin:8px 0 0;font-size:12px;font-weight:700}@media (width<=900px){.preview{padding:8px;top:auto;bottom:74px;transform:none}.preview canvas{width:108px;height:108px}.preview p{font-size:10px}}.pixel-toast{color:#fff;opacity:0;pointer-events:none;z-index:40;background:#14202b;border-radius:14px;padding:11px 20px;font-size:14px;font-weight:700;transition:all .18s;position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px)}.pixel-toast.on{opacity:1;transform:translate(-50%)}.pixel-foot{color:#7d8b98;text-align:center;width:min(1080px,94vw);margin:22px 0 30px;font-size:13px}.pixel-foot a{color:#4a5b6b}.pixel-head .settings{align-items:center;gap:8px;display:flex}.pixel-head .lang{position:relative}.pixel-head .lang-btn,.pixel-head .theme-btn{font:inherit;color:var(--ink-soft,#4a5b6b);background:var(--card,#fff);border:2px solid var(--line,#e6ecf2);cursor:pointer;border-radius:12px;align-items:center;gap:6px;padding:8px 12px;font-size:14px;font-weight:600;display:flex}.pixel-head .lang-btn:hover,.pixel-head .theme-btn:hover{border-color:#22a7f0}.pixel-head .lang-menu{top:calc(100% + 6px);z-index:20;background:var(--card,#fff);border:2px solid var(--line,#e6ecf2);border-radius:14px;min-width:168px;padding:6px;display:none;position:absolute;inset-inline-end:0;box-shadow:0 10px 30px #143c5a2e}.pixel-head .lang.open .lang-menu{display:block}.pixel-head .lang-menu button{width:100%;font:inherit;color:var(--ink-soft,#4a5b6b);cursor:pointer;text-align:start;background:0 0;border:0;border-radius:10px;align-items:center;gap:8px;padding:7px 10px;font-size:14px;display:flex}.pixel-head .lang-menu button:hover{background:var(--cream,#fff6ec)}.pixel-head .lang-menu button.on{color:#fff;background:#22a7f0}:root[data-theme=dark] body{color:#eef4f8;background:linear-gradient(#0b1620 0%,#101d28 40%,#16212c 70%)}:root[data-theme=dark] .pixel-head p{color:#b6c5d1}:root[data-theme=dark] .pixel-head nav a,:root[data-theme=dark] .controls,:root[data-theme=dark] .pixel-head .lang-btn,:root[data-theme=dark] .pixel-head .theme-btn,:root[data-theme=dark] .pixel-head .lang-menu{color:#eef4f8;background:#16212c;border-color:#2b3b4a}:root[data-theme=dark] .controls__row{color:#b6c5d1}:root[data-theme=dark] .controls__row select{color:#eef4f8;background:#1d2936;border-color:#2b3b4a}:root[data-theme=dark] .controls__row button.ghost{color:#eef4f8;background:#1d2936;border-color:#2b3b4a;box-shadow:0 4px #2b3b4a}:root[data-theme=dark] .grid{background-color:#33414e;border-color:#eef4f8}:root[data-theme=dark] .pixel-foot{color:#7f909e}:root[data-theme=dark] .pixel-foot a{color:#b6c5d1}.pixel-head .flag{border-radius:3px;flex:none;width:22px;height:15px;display:block;box-shadow:0 0 0 1px #143c5a2e}:root[data-theme=dark] .pixel-toast{background:#1d2936}:root[data-theme=dark] .cell span{color:#6c7d8c}:root[data-theme=dark] .preview{background:#16212c;border-color:#22a7f0}:root[data-theme=dark] .preview p{color:#b6c5d1}:root[data-theme=dark] .preview canvas{border-color:#2b3b4a}:root[data-theme=dark] .model-palette{border-bottom-color:#2b3b4a}:root[data-theme=dark] .board{background-color:#22323f;border-color:#2b3b4a}:root[data-theme=dark] .grid{background-color:#22323f}.social{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.social-title{color:var(--ink-faint,#8fa0b0);margin-right:2px;font-size:12px;font-weight:600}.social-btn{width:32px;height:32px;color:var(--ink-soft,#5a6b7c);background:var(--cream,#fff6ec);border:2px solid var(--line,#e6ecf2);border-radius:50%;place-items:center;transition:all .14s;display:grid}a.social-btn:hover{color:#fff;background:var(--blue,#22a7f0);border-color:var(--blue,#22a7f0);transform:translateY(-2px)}.social-btn.is-off{opacity:.45;cursor:default}.pixel-foot .social{justify-content:center;margin-top:10px}.pixel-foot .social-btn{color:#4a5b6b;background:#fff;border-color:#e6ecf2}:root[data-theme=dark] .pixel-foot .social-btn{color:#b6c5d1;background:#16212c;border-color:#2b3b4a}