*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}#app{width:100%;height:100%;position:relative}#viewport,#ui{position:absolute;inset:0}#viewport{z-index:0}#ui{z-index:2;pointer-events:none}#ui .editor-toolbar,#ui .transform-toolbar,#ui .catalog-panel,#ui .control-panel,#ui .save-dialog{pointer-events:auto}canvas{width:100%;height:100%;display:block}.editor-toolbar{z-index:3;color:#e8ecf5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c0e16d1;border:1px solid #ffffff1f;flex-wrap:wrap;align-items:center;gap:8px;max-width:min(640px,100vw - 32px);padding:10px 12px;font:12px/1.4 IBM Plex Sans,Segoe UI,sans-serif;display:flex;position:absolute;top:16px;left:16px}.editor-toolbar button{color:#e8ecf5;font:inherit;cursor:pointer;background:#ffffff14;border:1px solid #ffffff24;padding:7px 12px}.editor-toolbar button:hover{background:#ffffff24}.editor-toolbar__super{color:#ffd78a;background:#5a3c148c;border-color:#ffc46473;font-weight:600}.editor-toolbar__super:hover{background:#6e4b1cb3}.editor-toolbar__badge{color:#9ddeb0;background:#1e46308c;border:1px solid #6ebe8c66;padding:7px 12px;font-weight:600}.transform-toolbar{z-index:3;color:#e8ecf5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c0e16e0;border:1px solid #ffffff1f;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;font:12px/1.4 IBM Plex Sans,Segoe UI,sans-serif;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.transform-toolbar button{color:#e8ecf5;font:inherit;cursor:pointer;background:#ffffff14;border:1px solid #ffffff24;padding:7px 12px}.transform-toolbar button:hover{background:#ffffff24}.transform-toolbar button.is-active{background:#3c64b466;border-color:#6ea0ff8c}.transform-toolbar__danger{color:#ffb4b4!important;border-color:#dc5a5a73!important}.catalog-panel{z-index:3;color:#e8ecf5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c0e16e6;border:1px solid #ffffff1f;flex-direction:column;gap:10px;width:min(280px,100vw - 32px);padding:12px;font:12px/1.4 IBM Plex Sans,Segoe UI,sans-serif;display:flex;position:absolute;top:64px;bottom:16px;left:16px}.catalog-panel__tabs,.catalog-panel__categories{flex-wrap:wrap;gap:6px;display:flex}.catalog-panel__tabs button,.catalog-panel__categories button,.catalog-panel__list button{color:#e8ecf5;font:inherit;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;padding:6px 10px}.catalog-panel__tabs button.is-active,.catalog-panel__categories button.is-active{color:#ffd78a;background:#5a3c1473;border-color:#ffc46473}.catalog-panel__search{color:#e8ecf5;width:100%;font:inherit;background:#00000047;border:1px solid #ffffff24;padding:8px 10px}.catalog-panel__list{flex-direction:column;flex:1;gap:4px;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.catalog-panel__list button{text-align:left;align-items:center;gap:8px;width:100%;display:flex}.catalog-panel__list button:hover{background:#ffffff1f}.catalog-panel__swatch{border:1px solid #fff3;flex:0 0 14px;width:14px;height:14px}.catalog-panel__empty{color:#8b93a8;padding:8px 4px}.control-panel{z-index:3;color:#e8ecf5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c0e16db;border:1px solid #ffffff1f;width:min(280px,100vw - 32px);padding:14px 16px;font:12px/1.45 IBM Plex Sans,Segoe UI,sans-serif;position:absolute;top:16px;right:16px}.control-panel__head{justify-content:space-between;gap:12px;margin-bottom:10px;display:flex}.control-panel__title{font-size:14px;font-weight:600}.control-panel__sub{color:#8b97b0;margin-top:2px;font-size:11px}.control-panel__close{color:#c5cede;cursor:pointer;background:0 0;border:0;width:28px;height:28px;font-size:20px;line-height:1}.control-panel__row{justify-content:space-between;gap:12px;margin-top:6px;display:flex}.control-panel__row span{color:#8b97b0}.control-panel__row strong{font-variant-numeric:tabular-nums;font-weight:600}.control-panel__error{color:#ff8f8f;margin-top:8px;font-size:12px}.control-panel__actions button{color:#e8ecf5;min-width:64px;font:inherit;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;flex:auto;padding:7px 10px}.control-panel__actions button:disabled{opacity:.35;cursor:default}.control-panel__actions button:not(:disabled):hover{background:#ffffff1f}.save-dialog{z-index:5;place-items:center;display:grid;position:absolute;inset:0}.save-dialog[hidden]{display:none}.save-dialog__backdrop{background:#06080e8c;position:absolute;inset:0}.save-dialog__card{z-index:1;color:#e8ecf5;background:#10121cf5;border:1px solid #ffffff24;width:min(360px,100vw - 32px);padding:18px 18px 16px;font:13px/1.45 IBM Plex Sans,Segoe UI,sans-serif;position:relative}.save-dialog__title{margin-bottom:8px;font-size:16px}.save-dialog__hint{color:#9aa6bd;margin-bottom:14px;font-size:12px}.save-dialog__input{color:#e8ecf5;letter-spacing:.35em;text-align:center;background:#ffffff0a;border:1px solid #ffffff29;width:100%;padding:10px 12px;font:20px/1.2 IBM Plex Mono,ui-monospace,monospace}.save-dialog__error{color:#ff8f8f;margin-top:8px;font-size:12px}.save-dialog__actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.save-dialog__actions button{color:#e8ecf5;font:inherit;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;padding:8px 12px}.save-dialog__primary{background:#4678c859!important}