*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#4cc9f0,#56d0f5);font-family:"M PLUS Rounded 1c",sans-serif;color:#1d3557}.app{max-width:1160px;margin:0 auto;padding:16px 16px 40px}.hero{display:flex;align-items:center;gap:16px;margin-bottom:12px}.logo{width:58px;height:58px;border-radius:20px;background:#f7c948;border:4px solid #fff;box-shadow:0 5px #1d355740;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#1d3557;flex-shrink:0}.hero h1{font-family:DotGothic16,"M PLUS Rounded 1c",sans-serif;font-size:clamp(20px,2.4vw,29px);font-weight:800;color:#fff;text-shadow:0 3px 0 rgba(29,53,87,.35);margin:0}.grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}.side{display:flex;flex-direction:column;gap:14px}.side .card{padding:12px 14px}.card{background:#fff;border-radius:28px;border:5px solid #1d3557;box-shadow:0 8px #1d35574d;padding:18px}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.card-head h2{font-family:DotGothic16,"M PLUS Rounded 1c",sans-serif;font-size:20px;font-weight:800;margin:0}.chip{font-size:14px;font-weight:700;color:#5f7ea6;background:#eaf4fd;border-radius:999px;padding:4px 12px}.hint{font-size:14px;font-weight:700;color:#e05a9d}#selector{display:block;width:252px;height:284px;margin:0 auto;touch-action:none;cursor:pointer}.selector-hint{margin:6px 0 0;text-align:center;font-size:12px;font-weight:800;color:#5f7ea6}#editor{display:block;width:100%;max-width:576px;margin:0 auto;aspect-ratio:576 / 480;border-radius:12px;touch-action:none;cursor:crosshair}.editor-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;flex-wrap:wrap}#preview{display:block;width:100%;height:180px;touch-action:none}.actions{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap;justify-content:center}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;font-family:inherit;color:#fff;font-size:18px;font-weight:800;padding:14px 24px;border-radius:20px;cursor:pointer;text-decoration:none;display:inline-block}.btn-save{background:#ff5e78;box-shadow:0 6px #c73650}.btn-save:active{transform:translateY(4px);box-shadow:0 2px #c73650}.btn-video{background:#7048c9;box-shadow:0 6px #4a2c8f}.btn-video:active{transform:translateY(4px);box-shadow:0 2px #4a2c8f}.btn-png,.btn-load{font-size:15px;padding:11px 18px}.btn-png{background:#3b6fd4;box-shadow:0 6px #27509e}.btn-load{background:#6fbf4a;box-shadow:0 6px #4a8a2f}.btn-png:active,.btn-load:active{transform:translateY(4px);box-shadow:0 2px #1d355780}.guide-card{margin-top:20px;font-weight:700;line-height:1.8}.guide-card p{margin:6px 0}.guide-link{color:#3b6fd4;font-weight:800;text-decoration:underline}.palette{display:flex;gap:10px;flex-wrap:wrap}.swatch{width:46px;height:46px;border-radius:16px;border:3px solid rgba(29,53,87,.15);cursor:pointer;padding:0}.swatch.selected{box-shadow:0 0 0 4px #1d3557;border-color:#fff}.tools{display:flex;gap:12px}.btn-tool{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;font-family:inherit;font-size:18px;font-weight:800;padding:12px 20px;border-radius:16px;cursor:pointer}.btn-tool.eraser{border:4px solid #e05a9d;color:#e05a9d;box-shadow:0 4px #e05a9d59}.btn-tool.eraser.active{background:#e05a9d;color:#fff}.btn-tool.undo{border:4px solid #3b6fd4;color:#3b6fd4;box-shadow:0 4px #3b6fd459}.status{margin-top:16px;display:inline-block;background:#fff;border:4px solid #1d3557;border-radius:999px;box-shadow:0 5px #1d35574d;padding:10px 22px;font-size:17px;font-weight:800;color:#1d3557;min-height:1.4em}.status.err{background:#ffe3e8;color:#c73650}.foot{margin-top:22px;font-size:13px;font-weight:700;color:#ffffffeb;text-shadow:0 1px 0 rgba(29,53,87,.25)}.foot a{color:#fff;text-decoration:underline}.foot p{margin:4px 0}@media(max-width:900px){.grid{grid-template-columns:1fr}.side{display:contents}.editor-card{order:1}.mini-preview-card{order:2}.selector-card{order:3}#selector{width:100%;max-width:340px;height:auto;aspect-ratio:63 / 71}}