*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;overscroll-behavior:none}body{font-family:-apple-system,SF Pro Rounded,Segoe UI,system-ui,sans-serif;background:#f1f5f9;color:#1e293b;user-select:none;-webkit-user-select:none;touch-action:manipulation}.app{display:flex;flex-direction:column;height:100%}.top-bar{display:flex;align-items:center;gap:12px;padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top));background:#fff;border-bottom:1px solid #e2e8f0}.brand-name{font-weight:800;font-size:20px;color:#7c3aed}.brand-by{font-size:11px;color:#94a3b8;margin-left:6px}.project-name{flex:1;text-align:center;font-weight:600;color:#475569;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.save-status{margin-left:10px;font-size:11px;font-weight:600;color:#16a34a}.save-status.busy{color:#94a3b8}.history-buttons{display:flex;gap:6px}.history-buttons button{font-size:20px;width:44px;height:44px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc}.history-buttons button:disabled{opacity:.3}.tab-content{flex:1;min-height:0;display:flex}.tab-bar{display:flex;background:#fff;border-top:1px solid #e2e8f0;padding-bottom:env(safe-area-inset-bottom)}.tab-bar button{flex:1;padding:12px 4px;font-size:15px;font-weight:700;border:none;background:none;color:#64748b;border-top:3px solid transparent}.tab-bar button.active{color:#7c3aed;border-top-color:#7c3aed;background:#f5f3ff}.tab-layout{display:flex;flex:1;min-height:0;width:100%}.viewport-area{flex:1;position:relative;min-width:0}.viewport{position:absolute;top:0;right:0;bottom:0;left:0}.viewport canvas{display:block}.side-panel{width:300px;overflow-y:auto;background:#fff;border-left:1px solid #e2e8f0;padding:12px;display:flex;flex-direction:column;gap:12px}@media (max-width: 700px){.tab-layout{flex-direction:column}.side-panel{width:100%;max-height:45%;border-left:none;border-top:1px solid #e2e8f0}}.panel-section{background:#f8fafc;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}.panel-section h3{font-size:14px;color:#475569}.panel-hint{font-size:13px;color:#64748b}.big-button{min-height:46px;padding:8px 14px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;font-size:15px;font-weight:600;color:#334155}.big-button:active{transform:scale(.97)}.big-button.tone-primary{background:#7c3aed;border-color:#7c3aed;color:#fff;font-size:17px}.big-button.tone-danger{color:#dc2626}.big-button.tone-ghost{border-color:transparent;background:transparent}.big-button:disabled{opacity:.4}.button-row{display:flex;gap:8px}.button-row.wrap{flex-wrap:wrap}.button-row .big-button{flex:1}.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px}.stepper-label{font-size:14px;color:#475569;min-width:44px}.stepper-controls{display:inline-flex;align-items:center;gap:4px}.stepper-controls button{width:44px;height:40px;font-size:20px;border-radius:10px;border:1px solid #e2e8f0;background:#fff}.stepper-value{min-width:44px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}.segmented{display:inline-flex;background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.segmented button{padding:10px 14px;min-height:44px;border:none;background:none;font-size:14px;font-weight:600;color:#64748b}.segmented button.active{background:#7c3aed;color:#fff}.swatches{display:flex;flex-wrap:wrap;gap:6px}.swatch{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #cbd5e1}.swatch.active{box-shadow:0 0 0 3px #7c3aed}.swatch-custom{position:relative;display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);overflow:hidden;cursor:pointer}.swatch-custom-plus{font-size:20px;font-weight:800;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.6);pointer-events:none}.swatch-custom input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;width:100%;height:100%;border:none;padding:0}.name-input{font-size:15px;font-weight:700;border:none;background:transparent;border-bottom:2px dashed #cbd5e1;padding:4px 2px;width:100%;color:inherit}.creature-name{font-size:22px}.attach-select,select{min-height:40px;border-radius:10px;border:1px solid #e2e8f0;font-size:14px;background:#fff;padding:0 8px}.floating-toolbar{position:absolute;top:10px;left:10px;display:flex;gap:8px;flex-wrap:wrap}.multi-bar{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:#fffffff2;border-radius:14px;padding:8px 12px;box-shadow:0 2px 12px #0f172a2e;flex-wrap:wrap;max-width:calc(100% - 20px);z-index:15}.palette-extra.wide{width:auto;padding:0 14px;font-size:14px;font-weight:700}.palette-extra.danger{color:#dc2626}.palette-extra:disabled{opacity:.4}.paint-bar{position:absolute;bottom:10px;left:10px;right:10px;display:flex;align-items:center;gap:10px;background:#ffffffeb;border-radius:14px;padding:8px 10px}.part-list{display:flex;flex-direction:column;gap:4px}.part-row{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px;border-radius:10px;border:1px solid transparent;background:#fff;font-size:14px;text-align:left}.part-row.active{border-color:#7c3aed;background:#f5f3ff}.part-row.hidden-part{opacity:.45}.part-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0}.part-branch{color:#94a3b8;font-size:12px}.part-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.part-handle{touch-action:none;cursor:grab;color:#94a3b8;font-size:18px;padding:6px 8px;margin:-6px -4px -6px 0;border-radius:8px}.part-row.dragging{opacity:.5}.part-row.picked{border-color:#dc2626;background:#fef2f2}.part-row.drop-into{outline:2px solid #7c3aed;outline-offset:-2px;background:#f5f3ff}.part-row.drop-before{box-shadow:0 -3px #7c3aed}.part-row.drop-after{box-shadow:0 3px #7c3aed}.together-hint{background:#fefce8;border:1px solid #fde68a;border-radius:10px;padding:8px 10px;font-size:13px;color:#854d0e;display:flex;flex-direction:column;gap:4px}.attach-row{display:flex;gap:8px;align-items:stretch}.attach-row .attach-select{flex:1;min-width:0}.motion-card{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:10px;display:flex;flex-direction:column;gap:6px}.motion-card.active{border-color:#7c3aed}.motion-head{display:flex;align-items:center;gap:4px}.code-tab{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}.rules{display:flex;flex-direction:column;gap:12px;max-width:720px;width:100%;margin:0 auto}.rule-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px #0f172a14}.rule-when{display:flex;align-items:center;gap:10px;background:#fbbf24;padding:10px 14px;font-weight:700;flex-wrap:wrap}.rule-kicker{font-size:12px;letter-spacing:1px;background:#00000026;border-radius:6px;padding:2px 8px}.event-editor{flex:1;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.rule-actions{padding:12px 14px;display:flex;flex-direction:column;gap:8px}.action-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#dbeafe;border-radius:12px;padding:8px 12px;font-weight:600;flex-wrap:wrap}.action-chip>span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.chip-remove{width:36px;height:36px;border-radius:50%;border:none;background:#00000014}.add-rule{background:#fff;border:2px dashed #cbd5e1;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}.problems{display:flex;flex-direction:column;gap:6px;max-width:720px;width:100%;margin:0 auto}.problem{background:#fef3c7;border-radius:10px;padding:10px 12px;font-size:14px}.paper-column{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}.tool-palette{position:relative;padding:8px 12px 0}.tool-bar{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.labeled-control{display:flex;flex-direction:column;align-items:center;gap:2px}.control-label{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#94a3b8;white-space:nowrap}.tool-current{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:4px 14px;border-radius:12px;border:2px solid #7c3aed;background:#fff;font-weight:700;font-size:15px;color:#334155}.tool-current-icon{font-size:20px}.color-chip{width:46px;height:46px;border-radius:12px;border:3px solid #fff;box-shadow:0 0 0 1.5px #94a3b8}.segmented.small button{min-height:40px;padding:6px 10px}.palette-extra{width:44px;height:44px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;font-size:18px}.selection-actions,.import-bar{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:6px;padding:6px 10px;flex-wrap:wrap;background:#fffffff2;border-radius:14px;box-shadow:0 2px 12px #0f172a2e;max-width:calc(100% - 24px)}.selection-hint{font-size:13px;font-weight:600;color:#7c3aed}.tool-popover{position:absolute;z-index:20;top:calc(100% + 6px);left:12px;background:#fff;border-radius:16px;box-shadow:0 8px 30px #0f172a40;padding:12px;max-width:420px;display:flex;flex-direction:column;gap:8px}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.tool-cell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px;min-height:60px;padding:8px 4px;border-radius:12px;border:2px solid transparent;background:#f8fafc}.tool-cell.active{border-color:#7c3aed;background:#f5f3ff}.tool-cell-icon{font-size:22px}.tool-cell-label{font-size:12px;font-weight:600;color:#475569}.popover-caption{font-size:12px;font-weight:700;color:#94a3b8}.draw-tab{flex:1;display:flex;flex-direction:column;min-height:0}.draw-toolbar{padding:10px 12px 0}.draw-layout{display:flex;flex:1;min-height:0}@media (max-width: 700px){.draw-layout{flex-direction:column}}.paper-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:12px;min-width:0;min-height:0}.paper{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0f172a1f;max-width:100%;max-height:100%;touch-action:none}.paper-stack{position:relative;max-width:100%;max-height:100%}.paper-stack .paper{display:block;width:100%;height:auto}.paper-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.decorate-paper{image-rendering:pixelated}.mini-viewport{position:relative;height:200px;border-radius:12px;overflow:hidden;border:1px solid #e2e8f0}.repeat-box{background:#f5f3ff;border:1px solid #ddd6fe;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}.temperament-banner{max-width:720px;margin:0 auto;width:100%;border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600}.temperament-banner.peaceful{background:#dcfce7;color:#166534}.temperament-banner.fierce{background:#fee2e2;color:#991b1b}.personalities{max-width:720px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:8px}.personalities-title{font-size:14px;font-weight:600;color:#475569}.personality-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.personality-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border-radius:16px;border:2px solid #e2e8f0;background:#fff;text-align:center}.personality-card:active{transform:scale(.97);border-color:#7c3aed}.personality-icon{font-size:30px}.personality-name{font-size:16px;font-weight:800;color:#334155}.personality-desc{font-size:12.5px;color:#64748b}.mood-line{font-size:14px;font-weight:700;color:#166534}.mood-line.angry{color:#b45309}.behavior-story{padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px}.minecraft-tab{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;width:100%}.egg-colors-row{display:flex;gap:16px;align-items:center}.egg-preview{background:#f1f5f9;border-radius:12px}.egg-color-controls{display:flex;flex-direction:column;gap:10px}.egg-color-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#475569}.egg-color-label input[type=color]{width:52px;height:44px;border:1px solid #e2e8f0;border-radius:10px;padding:2px;background:#fff}.egg-editor-wrap{display:flex;justify-content:center}.egg-canvas{width:288px;height:288px;background:repeating-conic-gradient(#f1f5f9,#f1f5f9 25%,#fff 0%,#fff 50%) 0 0 / 24px 24px;border-radius:12px;touch-action:none}.glow-toggle{min-height:44px;padding:8px 14px;border-radius:12px;border:2px solid #e2e8f0;background:#fff;font-size:14px;font-weight:700;color:#64748b}.glow-toggle.on{border-color:#f59e0b;background:#fef3c7;color:#92400e;box-shadow:0 0 10px #f59e0b73}.ready-note{font-size:16px;font-weight:700;color:#15803d}.next-steps{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}.grab-handle{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #7c3aed;background:#fffffff2;color:#7c3aed;font-size:24px;line-height:1;display:grid;place-items:center;padding:0;touch-action:none;z-index:6;box-shadow:0 2px 8px #0000002e}.grab-handle:active{background:#7c3aed;color:#fff}.side-panel.code-panel{width:420px}@media (max-width: 700px){.side-panel.code-panel{width:100%;max-height:55%}}.traits .trait-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}.trait-label{font-size:13px;font-weight:600;color:#475569}.trait-check{display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 2px}.trait-check input{width:20px;height:20px}.trait-card{border:1.5px solid #e2e8f0;border-radius:12px;margin:8px 0;background:#fff;overflow:hidden}.trait-card.on{border-color:#7c3aed}.trait-head{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 12px;background:none;border:none;font-size:15px;font-weight:700}.trait-card.on .trait-head{background:#f5f3ff}.trait-state{font-size:12px;font-weight:700;color:#94a3b8}.trait-card.on .trait-state{color:#7c3aed}.trait-body{padding:8px 12px 12px;border-top:1px solid #ede9fe}.item-picker{position:relative;display:inline-block}.item-chip{border:1.5px solid #cbd5e1;border-radius:999px;background:#fff;padding:5px 12px;font-size:14px}.item-chip.picked{border-color:#7c3aed;background:#f5f3ff}.item-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:260px;max-height:300px;overflow-y:auto;background:#fff;border:1.5px solid #cbd5e1;border-radius:12px;box-shadow:0 8px 24px #0000002e;padding:8px}.item-search{width:100%;box-sizing:border-box;padding:8px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;margin-bottom:8px}.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.item-cell{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid transparent;border-radius:8px;background:none;padding:6px 2px;font-size:11px}.item-cell:active,.item-cell.active{border-color:#7c3aed;background:#f5f3ff}.item-emoji{font-size:20px}.item-name{color:#475569;text-align:center}.item-multi{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}