@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Zen+Maru+Gothic:wght@400;500;700;900&family=Kiwi+Maru:wght@400;500&family=Hachi+Maru+Pop&family=Mochiy+Pop+One&family=Yusei+Magic&family=Yomogi&family=Dela+Gothic+One&family=RocknRoll+One&family=Reggae+One&family=Rampart+One&family=Train+One&family=DotGothic16&family=Noto+Sans+JP:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Noto+Serif+JP:wght@400;600;900&family=Shippori+Mincho:wght@400;600;800&family=Kaisei+Decol:wght@400;500;700&family=Quicksand:wght@600;700&family=Montserrat:wght@600;700&family=Baloo+2:wght@600;700&display=swap");:root{--bg:#eef4fb;--bg-soft:#f7fafd;--panel:rgba(255,255,255,0.82);--line:#dbe6f3;--ink:#33415e;--ink-soft:#7488a8;--accent:#5b9bd9;--accent-deep:#3d7ec4;--accent-soft:#dcebfa;--radius:16px;--shadow:0 8px 28px rgba(96,130,180,0.14)}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:Zen Maru Gothic,M PLUS Rounded\ 1c,Hiragino Sans,sans-serif;color:var(--ink);background:radial-gradient(1200px 600px at 85% -10%,#fdeef6 0,transparent 60%),radial-gradient(1000px 700px at -10% 110%,#e3f4ef 0,transparent 55%),linear-gradient(160deg,#e4effb,#eef4fb 55%,#f2ecf8);min-height:100vh}.app{display:flex;flex-direction:column;height:100vh}.topbar{justify-content:space-between;gap:12px;padding:10px 18px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:5}.brand,.topbar{display:flex;align-items:center}.brand{gap:10px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;color:#fff;font-size:18px;background:linear-gradient(135deg,#6db3ec,#8f7fe8);box-shadow:0 4px 12px rgba(111,143,220,.4)}.brand h1{font-size:17px;font-weight:700;letter-spacing:.04em}.topbar-actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(96,130,180,.18)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,#64aae6,#7c8ce8);border-color:transparent;color:#fff}.btn-ghost{background:rgba(255,255,255,.7)}.btn-small{font-size:12px;padding:6px 12px}.btn-tiny{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;color:var(--ink-soft)}.grow,.layout{flex:1 1}.layout{display:flex;min-height:0}.panel{width:384px;min-width:320px;overflow-y:auto;padding:14px;border-right:1px solid var(--line);background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);scrollbar-width:thin;scrollbar-color:#c6d6ea transparent}.preview{flex:1 1;position:relative;min-width:0}.stage{position:absolute;inset:0;overflow:hidden;transition:background .6s ease}.stage canvas{display:block}.preview-overlay{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}.chip-btn{border:none;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-family:inherit;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;box-shadow:0 3px 12px rgba(70,100,150,.18);transition:transform .12s ease}.chip-btn:hover{transform:translateY(-1px)}.controls{display:flex;flex-direction:column;gap:12px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}.card-head h2{font-size:14px;font-weight:800}.card-head p{font-size:11px;color:var(--ink-soft);margin-top:1px}.step-badge{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#6db3ec,#8f7fe8)}.card-body{gap:12px;padding:6px 14px 14px}.card-body,.field{display:flex;flex-direction:column}.field{gap:6px}.field>span{font-size:12px;font-weight:700;color:var(--ink-soft);display:flex;justify-content:space-between}.field input[type=text],.field select{font-family:inherit;font-size:14px;padding:9px 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);outline:none;transition:border-color .15s ease;width:100%}.field input[type=text]:focus,.field select:focus{border-color:var(--accent)}input[type=color]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:36px;height:36px;border:2px solid #fff;border-radius:12px;padding:0;cursor:pointer;box-shadow:0 2px 8px rgba(96,130,180,.25);background:transparent}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:9px}.row{display:flex;align-items:flex-end}.row.gap{gap:8px;flex-wrap:wrap}.check{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.check.big{font-size:13px}.check input{width:16px;height:16px;accent-color:var(--accent)}.field.slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,#a7cdf2,#c9c3f2);outline:none;cursor:pointer}.field.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 6px rgba(96,130,180,.35)}.field.slider em{font-style:normal;font-weight:700;color:var(--accent-deep)}.seg{display:flex;gap:4px;background:var(--accent-soft);border-radius:12px;padding:3px;width:-moz-fit-content;width:fit-content}.seg.wrap{flex-wrap:wrap;width:100%}.seg button{border:none;background:transparent;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink-soft);padding:6px 12px;border-radius:9px;cursor:pointer;transition:all .12s ease}.seg button.on{background:#fff;color:var(--accent-deep);box-shadow:0 2px 6px rgba(96,130,180,.2)}.palette{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.swatch{position:relative}.swatch-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;background:#fff;font-size:11px;line-height:1;box-shadow:0 1px 5px rgba(70,100,150,.3)}.swatch-add,.swatch-x{color:var(--ink-soft);cursor:pointer}.swatch-add{width:36px;height:36px;border-radius:12px;border:2px dashed #b6cbe5;background:transparent;font-size:16px;transition:all .12s ease}.swatch-add:hover{border-color:var(--accent);color:var(--accent)}.char-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.char-chip{min-width:38px;height:38px;padding:0 6px;border-radius:12px;border:2px solid rgba(255,255,255,.9);color:#fff;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;text-shadow:0 1px 3px rgba(30,50,90,.35);box-shadow:0 2px 8px rgba(96,130,180,.28);transition:transform .12s ease}.char-chip:hover{transform:translateY(-2px) rotate(-3deg)}.char-chip.manual{border-color:#ffd76e;border-style:solid}.motif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));grid-gap:6px;gap:6px}.motif-btn{aspect-ratio:1;display:grid;place-items:center;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;transition:all .12s ease}.motif-btn:hover{transform:translateY(-2px);border-color:#b1cdec}.motif-btn.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 3px 10px rgba(96,130,180,.25)}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px}.theme-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border:none;border-radius:14px;color:#fff;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;text-shadow:0 1px 4px rgba(30,50,90,.45);box-shadow:0 3px 10px rgba(96,130,180,.25);transition:transform .14s ease}.theme-btn span{font-size:18px}.theme-btn:hover{transform:translateY(-2px) scale(1.03)}.stage-row{display:flex;gap:8px}.stage-dot{width:34px;height:34px;border-radius:50%;border:2px solid #fff;cursor:pointer;box-shadow:0 2px 8px rgba(96,130,180,.3);transition:transform .12s ease}.stage-dot:hover{transform:scale(1.1)}.stage-dot.on{outline:3px solid var(--accent);outline-offset:1px}.panel-footer{font-size:11px;color:var(--ink-soft);text-align:center;padding:4px 0 14px}.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:rgba(45,60,95,.92);color:#fff;font-size:13px;font-weight:700;padding:11px 22px;border-radius:999px;box-shadow:0 8px 26px rgba(30,50,90,.35);z-index:50;animation:toast-in .25s ease}@keyframes toast-in{0%{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:900px){.app{height:auto;min-height:100vh}.layout{flex-direction:column}.preview{order:-1;height:46vh;min-height:300px;border-bottom:1px solid var(--line)}.panel{width:100%;min-width:0;border-right:none;overflow:visible}.topbar{flex-direction:column;align-items:stretch}.topbar-actions{justify-content:center}}