@font-face{font-family:Fusion Pixel;src:url(/fonts/fusion-pixel-12px-proportional-zh_hans.ttf.woff2) format("woff2");font-weight:400;font-display:swap}:root{font-family:Tahoma,PingFang SC,sans-serif;color:#282a2c;background:#e9e9e7;font-size:12px;font-synthesis:none;letter-spacing:0;--face: #dedfdf;--raised: inset 1px 1px #fff, inset -1px -1px #737373;--pressed: inset 1px 1px #666, inset -1px -1px #fff}*{box-sizing:border-box;letter-spacing:0}body{margin:0}button,a,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:var(--face);border:1px solid #93999d;box-shadow:var(--raised);border-radius:2px}button:hover{filter:brightness(1.04)}button:active{box-shadow:var(--pressed)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #335a8d;outline-offset:3px}svg{width:16px;height:16px;stroke-width:1.7;flex-shrink:0}[hidden]{display:none!important}.app{max-width:1150px;margin:55px auto 30px;background:var(--face);border:1px solid #91979d;box-shadow:inset 1px 1px #fff,inset -1px -1px #7d8387,0 14px 35px #20252b15;padding:5px}.header{height:44px;display:flex;align-items:center;padding:0 10px;gap:12px;background:linear-gradient(#f4f7fa,#b8c4d0 52%,#cdd5db);border:1px solid #99a6b3;border-bottom-color:#798994;box-shadow:inset 0 1px #fff}.brand{display:flex;align-items:center;gap:10px;color:#283d55;text-decoration:none}.brand-mark{font-size:16px;font-weight:600}.brand-en{font-family:Georgia,serif;font-size:14px}.brand>svg{color:#42648d}.header-note{margin-left:auto;font-family:monospace;font-size:9px;color:#5e6c79}.icon-button{width:29px;height:27px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(#f8f9fa,#ccd1d5);flex-shrink:0}.workspace{display:grid;grid-template-columns:235px minmax(0,1fr);gap:13px;padding:16px 11px 13px}.sidebar{display:flex;flex-direction:column;min-width:0}.upload-button{display:flex;align-items:center;gap:9px;width:100%;padding:10px 9px;background:linear-gradient(#f4f4f3,#dedfdf);text-align:left}.upload-icon{display:grid;place-items:center;width:24px;height:27px;color:#4d637b}.upload-button>span:nth-child(2){flex:1;min-width:0}.upload-button strong{font-size:12px;font-weight:400}.upload-button small{display:block;font-family:monospace;font-size:10px;color:#6d7377;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-button>svg{width:13px}.tabs{display:flex;gap:3px;margin:22px 0 20px;border-bottom:1px solid #989d9f;padding-left:3px}.tab{flex:1;padding:10px 4px 9px;border-radius:3px 3px 0 0;border-bottom:0;box-shadow:inset 1px 1px #fff;color:#6d7378;background:#d0d3d5;font-size:11px}.tab span{font-family:monospace;font-size:10px;margin-right:4px}.tab.active{background:var(--face);color:#1f2b38;position:relative}.tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--face)}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.section-label h2{font-size:11px;font-weight:400;margin:0}.section-label>span{font-size:10px;color:#767b80}.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:23px}.shape{height:49px;display:grid;place-items:center;position:relative;background:#e5e6e5}.shape.active{background:#c2cdd9;box-shadow:var(--pressed);border-color:#667d95}.shape canvas{max-width:30px;max-height:30px;pointer-events:none}.shape:hover:after{content:attr(aria-label);position:absolute;bottom:52px;padding:4px 7px;white-space:nowrap;font-size:10px;background:#fffde7;border:1px solid #888;z-index:2}.range-row{display:flex;justify-content:space-between;font-size:11px}.range-row output{font-family:monospace;color:#646c71}input[type=range]{width:100%;height:24px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;margin:7px 0 13px;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:5px;background:#a8adaf;box-shadow:var(--pressed)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:20px;border:1px solid #7e858a;background:linear-gradient(90deg,#fff,#d9dddd);box-shadow:var(--raised);margin-top:-8px;border-radius:1px}input[type=range]::-moz-range-track{height:4px;background:#a8adaf}input[type=range]::-moz-range-thumb{width:12px;height:20px;border-radius:1px;background:#ddd}.setting-row{display:flex;align-items:center;justify-content:space-between;min-height:40px;font-size:11px}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border:1px solid #8b9298;box-shadow:var(--pressed);margin:0;cursor:pointer;border-radius:0;display:grid;place-items:center}.switch:checked:after{content:"";width:8px;height:4px;border-left:2px solid #35567a;border-bottom:2px solid #35567a;transform:rotate(-45deg);margin-top:-2px}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;font-size:11px;min-height:28px}.text-button svg{width:13px;height:13px}.crop-actions{display:flex;justify-content:space-between;gap:7px;margin-top:18px}.export-area{margin-top:auto;padding-top:30px}.export-options{display:flex;gap:5px;margin-bottom:10px}.export-options button{flex:1;padding:8px 2px;font-size:10px;background:#dedfdf}.export-options button.selected{background:#c8d1db;box-shadow:var(--pressed)}.export-options span{font-size:8px;color:#6e7376;margin-left:3px}.primary-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:38px;background:linear-gradient(#f3f5f7,#c2ccd5);font-size:12px;color:#293d54;padding:8px 12px;text-decoration:none;border:1px solid #8997a4;box-shadow:var(--raised);border-radius:2px}.primary-button svg:last-child{margin-left:auto;width:13px}.primary-button svg:first-child{margin-right:auto}.native-share{width:100%;margin-top:8px;background:transparent;box-shadow:none;border-color:transparent;color:#666d73}.studio{display:flex;flex-direction:column;min-width:0;height:620px;background:#b6babd;border:1px solid #999fa3;box-shadow:var(--pressed);padding:4px}.studio-top{display:flex;align-items:center;gap:9px;min-height:36px;padding:2px 8px;background:#e5e7e8;border-bottom:1px solid #90989f;font-size:10px;color:#5c656f}.studio-top .icon-button{margin-left:auto;width:25px;height:23px}.sample-tag{font-size:9px;color:#7b848a;border-left:1px solid #bac0c3;padding-left:8px}.canvas-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:12px;background-color:#f3f3f2;background-image:conic-gradient(#e7e7e5 25%,transparent 0 50%,#e7e7e5 0 75%,transparent 0);background-size:16px 16px;box-shadow:0 0 0 1px #8e9498,inset 0 1px 3px #0002}#canvas{display:block;max-width:100%;touch-action:none;cursor:default}#canvas.share{cursor:default}#loading{position:absolute;font-size:12px;color:#5d6873}.studio-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:37px;padding:4px 8px;background:#dedfe0;border-top:1px solid #f5f5f5;font-size:9px;color:#59656f;font-family:monospace}.view-switch{display:flex;gap:5px}.view-switch button{width:27px;height:25px;display:grid;place-items:center}.view-switch button.active{background:#becbd7;box-shadow:var(--pressed)}.view-switch svg{width:13px;height:13px}.colors{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:16px 0 24px}.color{height:25px;min-width:0;width:100%;border:2px solid #eee;outline:1px solid #a0a3a5;box-shadow:inset 1px 1px #0002;border-radius:0}.color.selected{outline:2px solid #466689;outline-offset:1px}footer{display:flex;justify-content:space-between;align-items:center;padding:6px 9px;height:30px;border:1px solid #a4a9ac;box-shadow:var(--pressed);font-size:10px;color:#6d767d;font-family:monospace}footer>span:first-child{color:#455949}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%);background:#f4f4ef;border:1px solid #7e878e;box-shadow:var(--raised),3px 3px #0002;padding:12px 18px;opacity:0;pointer-events:none;z-index:10;max-width:90vw;font-size:12px}#toast.visible{opacity:1}dialog{width:min(420px,90vw);max-height:90dvh;border:1px solid #899299;background:var(--face);box-shadow:var(--raised);padding:20px}dialog::backdrop{background:#0007}dialog h2{font-size:15px}dialog p{font-size:12px}dialog img{display:block;max-width:100%;max-height:55dvh;object-fit:contain;margin:15px auto}#close-dialog{float:right}@media(max-width:1200px){.app{margin:30px 25px}.workspace{grid-template-columns:220px minmax(0,1fr)}}@media(max-width:700px){body{background:#dedfdf}.app{margin:8px;border:1px solid #969fa7;padding:3px;box-shadow:var(--raised)}.header{height:38px;padding:0 7px}.brand{gap:7px}.brand-mark{font-size:14px}.brand-en{font-size:12px}.header-note{display:none}.header>.icon-button{margin-left:auto;width:25px;height:24px}.workspace{display:flex;flex-direction:column;gap:0;padding:10px 7px}.sidebar{display:contents}.upload-button{order:0;padding:7px 9px}.upload-button small{max-width:210px}.upload-button strong{font-size:11px}.tabs{order:1;margin:14px 0 8px;padding-left:0;gap:4px}.tab{flex:0 1 125px;min-height:35px;padding:8px}.studio{order:2;height:340px;padding:3px}.studio.preview{height:405px}.studio-top{min-height:29px;font-size:9px;padding:2px 5px}.canvas-stage{margin:8px}.studio-bottom{min-height:32px;padding:3px 5px;font-size:8px}#crop-controls,#share-controls{order:3;margin-top:18px}.section-label{margin-bottom:11px}.shapes{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-bottom:18px}.shape{height:43px}.shape canvas{max-width:25px;max-height:27px}.setting-row{min-height:35px}.crop-actions{margin-top:10px}.export-area{order:4;margin-top:15px;padding-top:12px;border-top:1px solid #afb4b7}.export-options button{padding:8px}.primary-button{min-height:40px}.native-share{margin-top:4px}.colors{max-width:290px}footer{font-size:9px;padding:5px 7px}footer>span:last-child{display:none}}html,body,button,input,output,.brand-en,.header-note,.upload-button small,.tab span,.range-row output,.studio-bottom,footer{font-family:Fusion Pixel,monospace}.brand-mark,.brand-en{font-size:24px;font-weight:400}.header{background:navy;border:1px solid #00005d;box-shadow:inset 0 1px #6666b5;height:46px}.brand,.brand>svg,.header-note{color:#fff}.header-note{font-size:12px}.header .icon-button{background:silver;color:#111}button,.primary-button,.tab{border-radius:0}.app{background:#c6c6c6;border-color:#555;box-shadow:inset 1px 1px #fff,inset -1px -1px #666,6px 6px #0002}.upload-button,.primary-button,.icon-button{background:#d4d4d4}.tab.active,.export-options button.selected,.shape.active,.view-switch button.active{background:#dedee9}.shape.active{border-color:navy}.color.selected{outline-color:navy}.upload-button strong,.upload-button small,.tab,.tab span,.section-label h2,.section-label>span,.range-row,.setting-row,.text-button,.export-options button,.export-options span,.studio-top,.sample-tag,.studio-bottom,footer{font-size:12px}.sample-tag{border-left:0;padding-left:0}.studio-top{gap:16px}.shape canvas{image-rendering:pixelated}.upload-button small{line-height:1.5}.sidebar{min-width:0}.workspace{grid-template-columns:250px minmax(0,1fr)}@media(max-width:800px)and (min-width:701px){.app{margin:16px 12px}.workspace{grid-template-columns:225px minmax(0,1fr);gap:10px}}@media(max-width:700px){.app{margin:5px}.header{height:48px}.brand-mark,.brand-en{font-size:24px}.brand{gap:7px}.brand>svg{display:none}.header>.icon-button{width:32px;height:32px}.tab{min-height:42px}.studio{height:clamp(290px,48svh,430px)}.studio.preview{height:clamp(350px,55svh,510px)}.studio-top{min-height:38px}.studio-bottom{min-height:40px}.studio-top .icon-button,.view-switch button{width:32px;height:30px}.setting-row{min-height:44px}.switch{width:23px;height:23px}.text-button{min-height:36px}.color{height:32px}.export-options button,.primary-button{min-height:44px}.upload-button small{max-width:100%}footer{padding-bottom:max(5px,env(safe-area-inset-bottom));height:auto;min-height:30px}}@media(max-width:360px){.brand{gap:6px}.brand-en{font-size:12px}.studio-bottom{gap:4px}.studio-bottom>span:last-child{display:none}}html,body,#canvas,#canvas.share{cursor:url(/icons/arrow.png) 3 2,default}button,a,.switch,input[type=range],input[type=range]::-webkit-slider-thumb{cursor:url(/icons/hand.png) 12 3,pointer}input[type=range]::-moz-range-thumb{cursor:url(/icons/hand.png) 12 3,pointer}.pixel-icon{width:24px;height:24px;image-rendering:pixelated;object-fit:contain;flex-shrink:0}#download>.pixel-icon{width:28px;height:28px;margin-right:auto}#close-window{margin-left:0}#close-window svg{width:22px;height:22px;stroke-width:2}#reopen-window{margin:40px auto;padding:12px 18px;display:flex;align-items:center;gap:12px}#reopen-window img{image-rendering:pixelated}body{background-color:#e9e9eb;background-image:linear-gradient(#fff6 1px,transparent 1px),linear-gradient(90deg,#fff6 1px,transparent 1px);background-size:24px 24px}.app{--face:#d7d6dc}.workspace{padding-top:18px}.upload-button{position:relative}.upload-button:after{content:"";position:absolute;left:7px;right:7px;bottom:4px;height:1px;background:#fff8;pointer-events:none}.window-lights{display:flex;gap:5px;flex-shrink:0}.window-lights b{width:8px;height:8px;background:#cbc5e9;border:1px solid #696875;box-shadow:inset 1px 1px #fff}.window-lights b:nth-child(2){background:#eeb7d7}.window-lights b:nth-child(3){background:#bde6c8}.tab.active{border-top:3px solid #8580ad;padding-top:8px;background:#e8e5f2}.tab:not(.active){background:#ceccd5}.shape.active{outline:1px dotted #6d668b;outline-offset:-5px}.shape:hover{background:#eae8f4}.export-options button.selected{background:#ded9ef}#next{background:#e0ebdf}#native-share{gap:8px;color:#60566b}#native-share .pixel-icon{width:24px;height:25px}.studio-top .sample-tag{background:#f3e6ed;border-color:#c4b6c2}.studio-top{position:relative}.studio-top:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#fff9}.canvas-stage{border:4px solid #eeeef0}.view-switch button.active{background:#d9d4ed}.colors .color{transition:transform .12s}.colors .color:hover{transform:translateY(-2px)}#toast{padding:13px 20px 13px 46px;background:#f3eef5 url(/icons/heart-bubble.png) 12px center / 24px 26px no-repeat;image-rendering:pixelated}@media(prefers-reduced-motion:reduce){.colors .color{transition:none}}.app{padding:6px;box-shadow:inset 1px 1px #fff,inset -1px -1px #555,2px 2px #fff,5px 5px #0002}.header{padding:0 9px}.brand>.pixel-icon{width:26px;height:28px;margin-right:2px}.upload-button{min-height:78px;background:#dededb;gap:13px}.upload-icon{width:48px;height:44px}.upload-icon .pixel-icon{width:46px;height:40px}.upload-button strong{display:block;margin-bottom:7px}.upload-button small{margin-top:0;color:#646467}.tabs{margin-top:20px}.shape{background:#d7d7d4}.shape.active{background:#efefeb;box-shadow:var(--pressed)}.studio{padding:5px;background:#b5b5b3}.studio-top{background:#d8d8d5}.sample-tag{padding:3px 6px;background:#e8e8e2;border:1px solid #b2b2ac;font-size:12px}.canvas-stage{background-size:12px 12px}.studio-bottom{background:#d4d4d1}.crop-actions{align-items:stretch}#next{padding:6px 8px}#next .pixel-icon{height:24px;width:19px;margin-left:3px}#download{min-height:46px;background:#dededb}#download:hover{background:#ededdf}#download>.pixel-icon{width:30px;height:30px}.ready-status{display:flex;align-items:center;gap:7px}.ready-status img{width:16px;height:17px;object-fit:contain;image-rendering:pixelated}#loading{display:flex;align-items:center;gap:14px;padding:18px 22px;border:1px solid #737373;background:#dededb;box-shadow:var(--raised),3px 3px #0002}#loading img{width:28px;height:38px;object-fit:contain;image-rendering:pixelated}@media(max-width:700px){.app{padding:3px}.upload-button{min-height:73px}.upload-icon{width:43px}.upload-icon .pixel-icon{width:42px;height:37px}.brand>.pixel-icon{width:23px;height:25px}.studio{padding:3px}.studio-top{gap:10px}}@media(max-width:700px){.header{gap:6px}.header>#close-window{margin-left:0}}