:root{--bg:#faf8f5;--panel:#fff;--ink:#2b2825;--muted:#7a746d;--line:#e6e1da;--accent:#6c4cf1;--accent-soft:#efeafe;--danger:#d43d35;--warn:#b26a00;--radius:10px;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}*{box-sizing:border-box}body{background:var(--bg);margin:0}button,input{font:inherit;color:inherit}button{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:8px;min-height:36px;padding:7px 12px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.danger{color:var(--danger)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input:not([type]),input[type=date],input[type=time],input[type=number]{border:1px solid var(--line);background:#fff;border-radius:8px;width:100%;min-height:36px;padding:7px 9px}input[type=range]{width:100%;accent-color:var(--accent)}.loading{height:100vh;color:var(--muted);place-items:center;display:grid}.topbar{border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;padding:10px 16px;display:flex}.topbar h1{white-space:nowrap;margin:0;font-size:17px}.toolbar{flex-wrap:wrap;gap:10px;display:flex}.toolbar .group{flex-wrap:wrap;gap:6px;display:flex}.layout{grid-template-columns:250px minmax(0,1fr) 320px;align-items:start;gap:16px;max-width:1500px;margin:0 auto;padding:16px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.panel-body{flex-direction:column;gap:12px;padding:14px;display:flex}.panel h3{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 0 0;font-size:13px}.muted{color:var(--muted)}.hint{color:var(--muted);margin:0;font-size:12px}.warn{color:var(--warn);font-style:normal}.stage-col{min-width:0;position:relative}.canvas-wrap{border-radius:var(--radius);border:1px solid var(--line);touch-action:none;width:100%;max-width:820px;margin:0 auto;overflow:hidden}.notice{z-index:5;background:var(--ink);color:#fff;text-align:center;border-radius:999px;max-width:90%;padding:8px 14px;font-size:13px;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #0003}.issues{flex-direction:column;gap:6px;max-width:820px;margin:10px auto 0;padding:0;list-style:none;display:flex}.issues.ok{color:#1f8a4c;font-weight:600}.issues button{text-align:left;border-radius:8px;width:100%}.issues .error button{background:#fdf1f0;border-color:#f1c4c1}.issues .warning button{background:#fdf8ec;border-color:#f1dfb8}.field{border:0;flex-direction:column;gap:5px;min-width:0;margin:0;padding:0;display:flex}.field>span,.field>legend{margin-bottom:5px;padding:0;font-size:13px;font-weight:600}.field .hint{align-self:flex-end}.check{align-items:center;gap:8px;display:flex}.row{flex-wrap:wrap;align-items:flex-end;gap:8px;display:flex}.row>button{flex:1}.grow{flex:1;min-width:120px}.num{flex:1;align-items:center;gap:4px;min-width:90px;display:inline-flex}.num span{color:var(--muted)}.segmented{flex-wrap:wrap;gap:4px;display:flex}.segmented button{flex:1;padding:6px 8px;font-size:13px}.segmented button.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}.segmented.small{flex:none}.segmented.small button{min-width:44px}.swatches{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;border:1px solid #0000002e;border-radius:50%;min-height:0;padding:0}.swatch.is-on{outline:3px solid var(--accent);outline-offset:2px}.swatch:disabled{opacity:.2}.add-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.add-tile{flex-direction:column;align-items:center;gap:2px;padding:8px 4px;font-size:12px;display:flex}.add-tile.wide{flex-direction:row;grid-column:span 2;justify-content:center;gap:8px;font-size:14px;font-weight:600}.tile-icon{font-size:20px}.used-colors{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);border-radius:999px;align-items:center;gap:6px;padding:3px 9px 3px 4px;font-size:12px;display:inline-flex}.chip i{border:1px solid #0003;border-radius:50%;width:16px;height:16px}.modal{z-index:20;background:#1412108c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-card{background:var(--panel);border-radius:var(--radius);flex-direction:column;width:min(960px,100%);height:min(720px,100%);display:flex;overflow:hidden}.modal-card header{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:10px 14px;display:flex}.modal-card header .hint{flex:1}.preview-host{flex:1;min-height:0}@media (width<=1100px){.layout{grid-template-columns:230px minmax(0,1fr)}.inspector{grid-column:1/-1}}@media (width<=720px){.layout{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px}.stage-col{order:1}.inspector{order:2}.add{order:3}.add-grid{grid-template-columns:repeat(3,1fr)}.add-tile.wide{grid-column:span 3}.toolbar button{padding:6px 9px;font-size:13px}}