.pixel-hero{padding:46px 0 76px}.intro{max-width:870px;margin:0 auto 35px;text-align:center}.crumbs{margin-bottom:20px;color:var(--muted);font-size:.78rem}.crumbs a{color:var(--primary);font-weight:800}.crumbs span{margin-left:6px}.intro h1{margin-top:18px}.trust-row{display:flex;justify-content:center;gap:20px;margin-top:22px;color:#555970;font-size:.77rem;font-weight:800}.trust-row span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #00c2a814}
.pixel-studio{border:1px solid var(--border);border-radius:29px;background:#fff;box-shadow:0 28px 80px #372f7e1b;overflow:hidden}.idea-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(100deg,#f8f6ff,#fff 58%,#edfcf9)}.idea-title{display:grid;gap:2px}.idea-title span{color:var(--primary);font-size:.6rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.idea-title strong{font-size:.84rem}.idea-list{display:flex;justify-content:center;gap:7px;min-width:0}.idea,.surprise-button{min-height:40px;border-radius:11px;font-size:.69rem;font-weight:850}.idea{display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--border);color:#55586f;background:#fff;transition:.2s}.idea:hover,.idea.active{color:var(--primary-dark);border-color:#6c5ce754;background:#f2efff;transform:translateY(-1px)}.mini-pixels{width:19px;height:19px;border-radius:5px;background-color:#f2efff;image-rendering:pixelated}.heart-pixels{background:linear-gradient(135deg,#ff7da2,#ff3f75)}.invader-pixels{background:linear-gradient(135deg,#4f45b7,#8174ef);clip-path:polygon(20% 0,40% 0,40% 20%,60% 20%,60% 0,80% 0,80% 20%,100% 20%,100% 80%,80% 80%,80% 100%,60% 100%,60% 80%,40% 80%,40% 100%,20% 100%,20% 80%,0 80%,0 20%,20% 20%)}.flower-pixels{background:radial-gradient(circle,#ffbc42 0 24%,#ff6f91 25% 55%,#7adfbd 56%)}.smile-pixels{background:radial-gradient(circle,#ffcb45 0 60%,#f3a900 62%)}.surprise-button{padding:0 15px;border:0;color:#fff;background:linear-gradient(135deg,var(--primary),#8a79f1);box-shadow:0 9px 20px #6c5ce729}.surprise-button span{display:inline-block;margin-right:6px;transition:.25s}.surprise-button:hover span{transform:rotate(30deg) scale(1.25)}
.studio-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}.canvas-panel,.control-panel{padding:22px}.canvas-panel{border-right:1px solid var(--border);background:linear-gradient(145deg,#faf9ff,#f4f2fd)}.panel-head,.panel-head>div:first-child{display:flex;align-items:center}.panel-head{justify-content:space-between;gap:15px;margin-bottom:17px}.panel-head>div:first-child{gap:11px}.panel-head h2,.export-heading h2{margin:0 0 3px;font-size:1rem}.panel-head p,.export-heading p{margin:0;color:var(--muted);font-size:.7rem}.step-badge{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:10px;color:var(--primary);background:#efecff;font-size:.66rem;font-weight:950}.history-actions{display:flex;gap:6px}.history-actions button{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--border);border-radius:9px;color:#55586f;background:#fff;font-size:.7rem;font-weight:800}.history-actions button:first-child,.history-actions button:nth-child(2){padding:0;font-size:1rem}.history-actions button:disabled{opacity:.4;cursor:not-allowed}.history-actions button:not(:disabled):hover{color:var(--primary);border-color:#6c5ce75c}
.tool-row{display:flex;gap:7px;margin-bottom:13px}.draw-tool{display:flex;align-items:center;gap:6px;min-height:39px;padding:0 10px;border:1px solid var(--border);border-radius:10px;color:#5e6178;background:#fff;font-size:.68rem;font-weight:850}.draw-tool:hover,.draw-tool.active{color:#fff;border-color:var(--primary);background:var(--primary);box-shadow:0 8px 18px #6c5ce725}.tool-glyph{font-size:.92rem}.draw-tool kbd{padding:2px 4px;border-radius:4px;color:inherit;background:#ffffff1f;font:600 .55rem ui-monospace,monospace}.draw-tool:not(.active) kbd{background:#f1eff8}.canvas-wrap{position:relative;display:grid;place-items:center;min-height:500px;padding:22px;border:1px solid #ffffff60;border-radius:20px;background:radial-gradient(circle at 50% 35%,#3d3971,#252440 70%);box-shadow:inset 0 0 60px #17162f77;overflow:hidden}.canvas-glow{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:#8a7bff2e;filter:blur(35px)}#pixelCanvas{position:relative;z-index:1;display:block;width:min(100%,460px);height:auto;aspect-ratio:1;border-radius:7px;box-shadow:0 24px 50px #15142f70;image-rendering:pixelated;touch-action:none;cursor:crosshair;outline:none}#pixelCanvas:focus-visible{box-shadow:0 0 0 4px #00c2a8,0 24px 50px #15142f70}.mirror-line{position:absolute;z-index:2;top:22px;bottom:22px;left:50%;display:none;width:2px;background:repeating-linear-gradient(to bottom,#fff 0 6px,transparent 6px 11px);opacity:.65;pointer-events:none}.mirror-line.show{display:block}.canvas-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:.66rem}.canvas-meta strong{color:#43465e}.live-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #00c2a815}
.control-panel{background:#fff}.grid-size,.color-section,.background-section{padding:0 0 20px;margin:0 0 20px;border:0;border-bottom:1px solid var(--border)}.grid-size legend,.control-label{width:100%;margin-bottom:9px;font-size:.72rem;font-weight:850}.size-options{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.size-options button{height:38px;padding:0;border:1px solid var(--border);border-radius:9px;color:#5c5f77;background:#fff;font-size:.67rem;font-weight:900}.size-options button:after{content:"×";margin-left:1px;color:#a0a2b1}.size-options button:hover,.size-options button.active{color:#fff;border-color:var(--primary);background:var(--primary)}.grid-size p{margin:8px 0 0;color:var(--muted);font-size:.6rem}.control-label{display:flex;align-items:center;justify-content:space-between}.control-label span{padding:4px 7px;border-radius:7px;color:var(--primary-dark);background:#f0edff;font:800 .62rem ui-monospace,monospace}.color-picker-row{display:grid;grid-template-columns:1fr 36px;gap:7px}.main-color,.background-color{display:flex;align-items:center;height:43px;padding:4px;border:1px solid var(--border);border-radius:11px;background:#fff}.main-color input,.background-color input{position:absolute;width:1px;height:1px;opacity:0}.main-color>span,.background-color:before{content:"";display:block;flex:0 0 32px;width:32px;height:32px;border-radius:8px;background:var(--chosen-color,#ff4f81);box-shadow:inset 0 0 0 1px #00000012}.main-color b{margin-left:9px;font-size:.7rem}.swap-colors{width:36px;border:1px solid var(--border);border-radius:10px;color:var(--primary);background:#f7f5ff;font-size:1rem}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:10px}.palette button{position:relative;aspect-ratio:1;padding:0;border:2px solid #fff;border-radius:8px;background:var(--swatch);box-shadow:0 0 0 1px var(--border);transition:.15s}.palette button:hover,.palette button.active{transform:scale(1.08);box-shadow:0 0 0 2px var(--primary)}.palette button.active:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border:2px solid #fff;border-radius:50%;background:var(--primary)}.background-row{display:flex;align-items:center;gap:9px}.background-color{flex:1;gap:9px;color:#55586f;font:800 .67rem ui-monospace,monospace}.background-color:before{background:var(--background-color,#fff)}.check-control{display:flex;align-items:center;gap:6px;color:#55586f;font-size:.64rem;font-weight:800;cursor:pointer}.check-control input{position:absolute;opacity:0}.check-control span{display:grid;place-items:center;width:17px;height:17px;border:1px solid #c8cad8;border-radius:5px;background:#fff}.check-control input:checked+span{border-color:var(--primary);background:var(--primary)}.check-control input:checked+span:after{content:"✓";color:#fff;font-size:.65rem}.toggle-list{display:grid;gap:8px}.toggle-control{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fbfbfe;cursor:pointer}.toggle-control span{display:grid;gap:2px}.toggle-control strong{font-size:.69rem}.toggle-control small{color:var(--muted);font-size:.59rem}.toggle-control input{position:absolute;opacity:0}.toggle-control i{position:relative;flex:0 0 38px;width:38px;height:22px;border-radius:99px;background:#dfe0e9;transition:.2s}.toggle-control i:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #26273b28;transition:.2s}.toggle-control input:checked+i{background:var(--primary)}.toggle-control input:checked+i:after{transform:translateX(16px)}
.export-panel{display:grid;grid-template-columns:minmax(190px,.75fr) auto minmax(210px,1fr) auto;align-items:center;gap:17px;padding:20px 22px;border-top:1px solid var(--border);background:linear-gradient(105deg,#f3f0ff,#fff 55%,#effbf8)}.export-heading{display:flex;align-items:flex-start;gap:11px}.sprite-preview{display:grid;grid-template-columns:66px auto;align-items:center;gap:9px}.sprite-preview canvas{width:66px;height:66px;border:1px solid var(--border);border-radius:10px;background-color:#fff;background-image:linear-gradient(45deg,#ececf2 25%,transparent 25%),linear-gradient(-45deg,#ececf2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ececf2 75%),linear-gradient(-45deg,transparent 75%,#ececf2 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;image-rendering:pixelated}.sprite-preview span{max-width:62px;color:var(--muted);font-size:.59rem;line-height:1.35}.css-snippet{display:grid;min-width:0;gap:5px;padding:10px 12px;border-radius:11px;color:#dddcef;background:#27263f}.css-snippet span{color:#9d9ab9;font-size:.58rem;font-weight:800}.css-snippet code{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.61rem}.export-actions{display:flex;gap:7px}.export-actions button{min-height:41px;padding:0 12px;border-radius:10px;font-size:.66rem;font-weight:850;white-space:nowrap}.secondary-action{border:1px solid var(--border);color:var(--primary-dark);background:#fff}.primary-action{border:0;color:#fff;background:linear-gradient(135deg,var(--primary),#8978f1);box-shadow:0 9px 20px #6c5ce72d}.primary-action span{margin-right:5px}.privacy-note{text-align:center;margin:16px 0 0;color:var(--muted);font-size:.72rem}
.content-section{padding:70px 0}.content-section.alt{border-block:1px solid #1f223e0c;background:#ffffff70}.content{max-width:940px;margin:auto}.content>h2,.prose-content h2{margin:0 0 13px;font-size:clamp(1.8rem,4vw,2.55rem);letter-spacing:-.045em}.content>p,.prose-content>p,.benefit-card p,.info-grid p,.faq p{color:var(--muted);line-height:1.75}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:26px}.benefit-card{position:relative;padding:23px;border:1px solid var(--border);border-radius:19px;background:#fff;overflow:hidden}.benefit-card>span{position:absolute;right:15px;top:9px;color:#6c5ce70d;font-size:3.7rem;font-weight:950}.benefit-card h3{position:relative;margin:0 0 8px}.benefit-card p{position:relative;margin:0;font-size:.86rem}.prose-content>h2:not(:first-child){margin-top:38px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:27px 0}.info-grid article{padding:22px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,#fff,#faf9ff)}.info-grid h3{margin:0 0 8px}.info-grid p{margin:0;font-size:.87rem}.faq{display:grid;gap:10px;margin-top:23px}.faq details{border:1px solid var(--border);border-radius:15px;background:#fff}.faq summary{padding:17px 19px;cursor:pointer;font-weight:800}.faq p{padding:0 19px 17px;margin:0;font-size:.9rem}.try-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.try-heading h2{margin:0 0 5px;font-size:clamp(1.7rem,4vw,2.35rem)}.try-heading p{margin:0;color:var(--muted)}.try-heading>a{color:var(--primary);font-size:.82rem;font-weight:850}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.try-card{display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--border);border-radius:16px;background:#fff;transition:.2s}.try-card:hover{transform:translateY(-3px);border-color:#6c5ce74f;box-shadow:0 14px 30px #35316e12}.try-icon{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border-radius:12px;color:var(--primary);background:#efecff;font-size:.7rem;font-weight:900}.try-card>span:last-child{display:grid;gap:3px}.try-card strong{font-size:.83rem}.try-card small{color:var(--muted);font-size:.69rem}.toast{position:fixed;left:50%;bottom:26px;z-index:100;padding:12px 17px;border-radius:12px;color:#fff;background:#24233b;box-shadow:0 16px 35px #24233b38;font-size:.78rem;font-weight:800;opacity:0;transform:translate(-50%,12px);transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.pixel-confetti{position:fixed;z-index:99;top:-12px;width:9px;height:9px;border-radius:2px;pointer-events:none;animation:pixel-fall 1.25s ease-in forwards}@keyframes pixel-fall{to{transform:translate(var(--drift),105vh) rotate(540deg);opacity:.1}}
@media(max-width:1040px){.studio-layout{grid-template-columns:1fr}.canvas-panel{border-right:0;border-bottom:1px solid var(--border)}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.control-panel>.panel-head,.toggle-list{grid-column:1/-1}.export-panel{grid-template-columns:1fr auto 1fr}.export-actions{grid-column:1/-1;justify-content:flex-end}.canvas-wrap{min-height:480px}}
@media(max-width:760px){.pixel-hero{padding:34px 0 58px}.intro h1{font-size:clamp(2.55rem,14vw,4rem)}.trust-row{flex-wrap:wrap;gap:9px 16px}.idea-bar{grid-template-columns:1fr}.idea-list{justify-content:flex-start;overflow-x:auto;padding-bottom:3px}.surprise-button{justify-self:stretch}.control-panel{grid-template-columns:1fr}.control-panel>.panel-head,.toggle-list{grid-column:auto}.canvas-panel,.control-panel{padding:16px}.tool-row{display:grid;grid-template-columns:1fr 1fr}.draw-tool{justify-content:center}.canvas-wrap{min-height:0;padding:13px}.mirror-line{top:13px;bottom:13px}.canvas-meta{flex-wrap:wrap}.export-panel{grid-template-columns:1fr}.export-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}.primary-action{grid-column:1/-1}.benefit-grid,.info-grid,.try-grid{grid-template-columns:1fr}.content-section{padding:54px 0}.try-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:430px){.panel-head{align-items:flex-start}.history-actions button{min-width:31px}.size-options{gap:3px}.size-options button{height:35px}.palette{grid-template-columns:repeat(8,1fr);gap:4px}.export-actions{grid-template-columns:1fr}.primary-action{grid-column:auto}.sprite-preview{grid-template-columns:60px auto}.sprite-preview canvas{width:60px;height:60px}}@media(prefers-reduced-motion:reduce){.idea,.surprise-button span,.try-card,.toast{transition:none}.pixel-confetti{display:none}}