.pixelate-intro{padding-top:28px}.pixelate-intro-heading{justify-content:space-between;align-items:center;gap:40px;margin-bottom:34px;display:flex}.pixelate-intro-heading h1{margin:0;font-size:clamp(32px,4.4vw,57px);line-height:1.15}.pixelate-intro-heading h1>span{color:#ba523a}.pixelate-intro-heading>p{max-width:340px;font:24px/1.3 Fraunces,Georgia,serif}.pixelate-intro-heading>p>span{color:var(--muted);margin-top:12px;font:14px/1.7 DM Sans,Arial,sans-serif;display:block}.pixelate-stage{background-color:#e5e8dc;background-image:linear-gradient(#83957d13 1px,#0000 1px),linear-gradient(90deg,#83957d13 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:16px 16px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;flex-direction:column;justify-content:center;min-width:0;min-height:620px;padding:25px;display:flex;position:relative}.pixelate-stage.dragging{outline:4px solid var(--orange);outline-offset:-4px}.pixelate-stage:focus-within{box-shadow:inset 0 0 0 2px #657c57}.pixelate-empty{text-align:center;padding:30px 0}.pixelate-mark{grid-template-columns:repeat(4,22px);gap:4px;width:max-content;margin:0 auto 35px;display:grid;transform:rotate(-7deg)}.pixelate-mark i{background:#83b7be;width:22px;height:22px}.pixelate-mark i:nth-child(4n+1){background:#7b9381}.pixelate-mark i:nth-child(4n+3){background:#f0cd80}.pixelate-mark i:nth-child(n+9){background:#335f55}.pixelate-mark i:nth-child(11),.pixelate-mark i:nth-child(15){background:#ca7958}.pixelate-kicker{color:#657660;letter-spacing:1px;margin:0 0 18px;font:9px/1.5 DM Mono,monospace}.pixelate-upload{color:#f1f6df;background:#173a30;border:1px solid #213c32;justify-content:space-between;align-items:center;gap:26px;min-width:240px;padding:16px 20px;font-size:15px;font-weight:600;display:inline-flex;box-shadow:4px 4px #b2c5a6}.pixelate-upload>span{color:var(--lime);font-size:22px}.pixelate-upload:hover{background:#29513e}.pixelate-empty>p:not(.pixelate-kicker){color:#64725e;margin:16px 0;font-size:11px}.pixelate-text-button{color:#526747;background:0 0;border:0;border-bottom:1px solid #8c9c7c;padding:3px 0;font-size:12px}.pixelate-file{opacity:0;width:1px;height:1px;position:absolute}.pixelate-settings-title{align-items:center;gap:12px;display:flex}.pixelate-settings-title>span{color:#b8d1b6;font-size:35px;line-height:1}.pixelate-settings-title strong{font-size:14px;display:block}.pixelate-settings-title small{color:#a8bfb2;margin-top:6px;font-size:10px;display:block}.pixelate-modes{gap:6px;margin:13px 0 11px;display:flex}.pixelate-modes button,.pixelate-presets button{color:#e1eddb;background:#213c32;border:1px solid #486055;flex:1;padding:10px 5px;font:11px DM Mono,monospace}.pixelate-modes button[aria-pressed=true],.pixelate-presets button[aria-pressed=true]{color:#243a2c;background:var(--lime);border-color:var(--lime)}.pixelate-presets{gap:6px;margin:10px 0;display:flex}.pixelate-presets button{padding:8px 3px}.pixelate-view{justify-content:center;gap:2px;margin-bottom:20px;display:flex}.pixelate-view button{color:#5d7053;background:#e8eadd;border:1px solid #bbc6af;padding:9px 18px;font-size:11px}.pixelate-view button[aria-pressed=true]{color:#f0f5e6;background:#193e31;border-color:#193e31}.pixelate-preview-space{justify-content:center;align-items:center;min-height:370px;display:flex}.pixelate-image{background:repeating-conic-gradient(#f6f5ec 0 25%,#e0e2d7 0 50%) 0/20px 20px;-webkit-user-select:none;user-select:none;line-height:0;position:relative;box-shadow:6px 6px #bac8b1}.pixelate-image canvas{width:100%;height:auto;display:block}.pixelate-image.selecting{cursor:crosshair;touch-action:none}.pixelate-area{pointer-events:none;border:2px solid #eb6848;position:absolute;box-shadow:0 0 0 1px #fff9}.pixelate-area b{color:#fff;background:#ba523a;padding:3px 4px;font:10px Arial;position:absolute;top:0;left:0}.pixelate-area.draft{background:#eb684825;border-style:dashed}.pixelate-caption{color:#607253;justify-content:space-between;gap:12px;margin-top:23px;font:10px DM Mono,monospace;display:flex}.pixelate-caption>span:first-child{text-overflow:ellipsis;white-space:nowrap;max-width:58%;overflow:hidden}.pixelate-hint{text-align:center;color:#607253;min-height:28px;margin:14px 0 0;font-size:11px;line-height:1.6}.pixelate-download>p.pixelate-export-note{min-height:0;margin:12px 0 0;font-size:9px;line-height:1.5}.pixelate-area-controls{margin-top:15px}.pixelate-undo{gap:8px;display:flex}.pixelate-undo button,.pixelate-add-area{color:#e1eddb;background:#24413c;border:1px solid #587168;flex:1;padding:8px 5px;font-size:10px}.pixelate-undo button:disabled,.pixelate-add-area:disabled{opacity:.45;cursor:not-allowed}.pixelate-area-controls details{color:#bad0c3;margin-top:15px;font-size:11px}.pixelate-area-controls summary{cursor:pointer;padding:5px 0}.pixelate-area-controls details p{font-size:10px;line-height:1.5}.pixelate-coordinates{grid-template-columns:1fr 1fr;gap:10px;display:grid}.pixelate-coordinates label{flex-direction:column;gap:5px;font-size:10px;display:flex}.pixelate-coordinates input{color:#fff;background:#213c38;border:1px solid #587168;width:100%;min-width:0;padding:8px;font-size:12px}.pixelate-add-area{width:100%;margin-top:10px}.pixelate-area-list{background:#e9eedf;border:1px solid #cad2bf;margin-top:35px;padding:22px}.pixelate-area-list h2{font-size:25px}.pixelate-area-list>p{color:var(--muted);font-size:13px;line-height:1.6}.pixelate-area-list ul{grid-template-columns:1fr 1fr;gap:8px;margin:15px 0 0;padding:0;list-style:none;display:grid}.pixelate-area-list li{background:#faf9f2;justify-content:space-between;align-items:center;gap:12px;padding:10px;font:10px/1.6 DM Mono,monospace;display:flex}.pixelate-area-list li button{color:#31533f;background:#e9eedf;border:1px solid #c8ccba;padding:6px;font-size:10px}.pixelate-guide p{color:var(--muted);font-size:16px;line-height:1.7}.pixelate-guide a{color:#3c6b4f;text-underline-offset:3px}@media (max-width:1000px){.pixelate-intro-heading>p{font-size:21px}}@media (max-width:800px){.pixelate-intro-heading{margin-bottom:26px;display:block}.pixelate-intro-heading>p{max-width:470px;margin:20px 0 0;font-size:20px}.pixelate-intro-heading>p>span{margin-top:6px}.pixelate-stage{min-height:430px;padding:20px}.pixelate-preview-space{min-height:270px}.pixelate-area-list ul{grid-template-columns:1fr}}@media (max-width:480px){.pixelate-intro-heading h1{font-size:30px}.pixelate-kicker{font-size:8px}.pixelate-upload{min-width:220px}.pixelate-caption{font-size:8px}.pixelate-hint{font-size:10px}.pixelate-area-list{padding:15px}.pixelate-area-list li{gap:6px;font-size:9px}}