:root{--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--font-small:.75rem;--font-body:.875rem;--border-color:#bdc8bf;--surface:#fff;--surface-muted:#edf1ed;--accent:#245b3d;--focus-ring:3px solid #202924;--control-size:32px;--icon-size:20px;color:#202924;background:#fafbf9;font-family:system-ui,sans-serif;line-height:1.5}html{scrollbar-gutter:stable}html:has(dialog:modal){overflow:hidden}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{align-content:start;gap:var(--space-3);max-width:88rem;min-height:100dvh;padding:var(--space-4);margin:0 auto;display:grid}h1{margin:0;font-size:1.5rem;line-height:1.2}.app-header{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.top-navigation{gap:var(--space-2);border-bottom:1px solid var(--border-color);flex-wrap:wrap;display:flex}.top-navigation a{padding:var(--space-1) var(--space-2);min-height:var(--control-size);color:var(--accent);text-underline-offset:.2em;align-items:center;display:inline-flex}.top-navigation a[aria-current=page]{background:var(--surface-muted);font-weight:600}.top-navigation a:focus-visible{outline:var(--focus-ring);outline-offset:2px}.assets-page>#asset-catalog{min-width:0}.auth-controls{justify-content:flex-end;align-items:center;min-width:0;display:flex}#auth-button{min-height:28px;font-size:var(--font-small);flex-shrink:0;place-items:center;padding:3px 10px;line-height:1.5;display:inline-grid}#auth-button>span{grid-area:1/1}.auth-logout-label{visibility:hidden}#auth-button:not(:disabled):is(:hover,:focus-visible):has(.auth-logout-label:not([hidden])) .auth-label{visibility:hidden}#auth-button:not(:disabled):is(:hover,:focus-visible) .auth-logout-label{visibility:visible}#auth-status{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}h2{margin:0 0 var(--space-2);font-size:1rem}h3{margin:0 0 var(--space-2);font-size:var(--font-body)}.workspace{gap:var(--space-3);grid-template-columns:minmax(0,1fr) 17rem;grid-template-areas:"canvas layers""assets layers""projects.";min-width:0;min-height:0;display:grid}.canvas-workspace{align-content:start;gap:var(--space-2);grid-area:canvas;min-width:0;min-height:0;display:grid}.canvas-export-toolbar{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}#canvas-export-status{font-size:var(--font-body);margin:0}#background-status,#placement-status{margin:0}#placement-status{font-size:var(--font-body)}.canvas-host{aspect-ratio:16/9;border:1px solid var(--border-color);background:var(--surface-muted);place-items:center;min-width:0;min-height:10rem;max-height:calc(100dvh - 20rem);display:grid;position:relative;container-type:size}#advent-canvas{width:min(100cqw,177.778cqh);height:auto;display:block}#placement-canvas{pointer-events:none;position:absolute}#placement-canvas.placement-interactive{pointer-events:auto;touch-action:none}.upload-zone{gap:var(--space-2);min-width:0;padding:var(--space-3);border:1px dashed var(--border-color);grid-template-columns:minmax(0,1fr);display:grid}.upload-zone label{font-weight:600}.upload-zone p{margin:0}#asset-drop-zone{grid-template-columns:auto minmax(0,1fr);align-items:center}#asset-drop-zone[aria-disabled=true]{background:var(--surface-muted);cursor:not-allowed}.upload-zone p{grid-column:1/-1;font-size:.875rem}input{min-width:0;max-width:100%;font:inherit}.layers-panel{gap:var(--space-2);contain:size;min-width:0;min-height:0;padding:var(--space-2);border:1px solid var(--border-color);background:var(--surface);grid-area:layers;grid-template-rows:auto minmax(0,1fr) auto;display:grid}.layers-panel h2,.background-layer h3{margin:0}.background-layer{border-top:1px solid var(--border-color);min-width:0;padding-top:var(--space-2)}.background-layer-heading{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}#background-drop-zone{padding:var(--space-2);overflow-wrap:anywhere}#background-drop-zone p{font-size:var(--font-small)}.layer-list{gap:var(--space-1);min-width:0;min-height:0;padding:var(--space-1);overscroll-behavior:contain;scrollbar-gutter:stable;flex-direction:column;margin:0;list-style:none;display:flex;overflow-y:auto}.layer-list button:focus-visible{outline-offset:-3px}.layer-actions{gap:var(--space-1);flex-shrink:0;display:flex}.placement-toolbar{z-index:1;border:1px solid var(--border-color);background:var(--surface);border-radius:.25rem;gap:2px;padding:2px;display:flex;position:absolute;box-shadow:0 2px 8px #20292426}.icon-button,.icon-button.secondary-button{width:var(--control-size);height:var(--control-size);min-width:var(--control-size);min-height:var(--control-size);border-color:var(--border-color);color:var(--accent);background:var(--surface);touch-action:manipulation;flex:none;place-items:center;padding:0;display:inline-grid}.icon-button:hover:not(:disabled),.icon-button.secondary-button:hover:not(:disabled),.icon-button[aria-pressed=true]{color:#19432c;background:#e1eee4}.placement-toolbar button:focus-visible{outline-offset:-3px}.icon-button svg{width:var(--icon-size);height:var(--icon-size);fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.placement-layer{align-items:center;gap:var(--space-1);flex:none;grid-template-columns:auto minmax(0,1fr) auto;min-width:0;display:grid;position:relative}.placement-layer-move.icon-button{cursor:grab;touch-action:none}.layer-list.is-reordering,.layer-list.is-reordering button{cursor:grabbing;-webkit-user-select:none;user-select:none}.placement-layer.is-dragging{opacity:.55}.placement-layer-drop-above:before,.placement-layer-drop-below:after{z-index:1;background:var(--accent);content:"";pointer-events:none;border-radius:2px;height:3px;position:absolute;left:0;right:0}.placement-layer-drop-above:before{top:-3px}.placement-layer-drop-below:after{bottom:-3px}.placement-layer-select{-webkit-user-select:none;user-select:none;min-width:0;padding:var(--space-1) var(--space-2);font-size:var(--font-small);text-align:left}.placement-layer-select[aria-pressed=true]{background:#e1eee4;border-color:#245b3d;box-shadow:inset 0 0 0 1px #245b3d}.placement-layer-label,.placement-layer-locked{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.placement-layer-locked{font-size:.6875rem;font-weight:600}button{min-height:var(--control-size);padding:var(--space-1) var(--space-2);border:1px solid var(--accent);color:#fff;font:inherit;cursor:pointer;background:#245b3d;border-radius:.25rem}button:hover:not(:disabled){background:#19432c}button:focus-visible,input:focus-visible{outline:var(--focus-ring);outline-offset:2px}.icon-button:disabled,.icon-button.secondary-button:disabled,button:disabled,input:disabled{color:#59645c;cursor:not-allowed;background:#e5eae5;border-color:#bdc8bf}.asset-panel{min-width:0;padding:var(--space-2);border:1px solid var(--border-color);background:var(--surface);overflow-wrap:anywhere;grid-area:assets}.asset-panel h2,.project-panel h2,.asset-dialog-heading h2{margin:0}.asset-panel-heading,.asset-dialog-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.asset-upload-controls{justify-content:flex-end;align-items:center;gap:var(--space-2);min-width:0;margin-left:auto;display:flex}#asset-login-warning{font-size:var(--font-small);text-align:right;margin:0}#asset-new{flex-shrink:0}#asset-sign-in{margin-bottom:var(--space-3)}#asset-auth-status{margin:0 0 var(--space-3);font-size:var(--font-body)}#asset-dialog,#project-name-dialog,#project-guard-dialog,#project-delete-dialog{width:min(44rem,100% - 2rem);max-height:calc(100dvh - 2rem);color:inherit;overflow-wrap:anywhere;background:#fff;border:1px solid #bdc8bf;border-radius:.5rem;padding:1.25rem}#asset-dialog::backdrop,#project-name-dialog::backdrop,#project-guard-dialog::backdrop,#project-delete-dialog::backdrop{background:#14231a73}#asset-dialog-help{margin:.5rem 0 1rem}#asset-drop-zone{grid-template-columns:minmax(0,1fr)}#asset-dismiss-help,#asset-notice{font-size:.875rem}#asset-status{margin:.75rem 0}.asset-editor{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:1rem;display:grid}.asset-preview{height:10rem}.asset-preview-section,#asset-form,.asset-field{min-width:0}.asset-preview,.asset-thumbnail{background-color:#fff;background-image:linear-gradient(45deg,#dce3dd 25%,#0000 25%),linear-gradient(-45deg,#dce3dd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#dce3dd 75%),linear-gradient(-45deg,#0000 75%,#dce3dd 75%);background-position:0 0,0 .75rem,.75rem -.75rem,-.75rem 0;background-size:1.5rem 1.5rem;border:1px solid #bdc8bf;place-items:center;min-width:0;display:grid;overflow:hidden}.asset-preview p,.asset-thumbnail-message{background:#fff;margin:0;padding:.25rem .5rem}#asset-preview-image,.asset-thumbnail img{object-fit:contain;width:100%;min-width:0;height:100%;min-height:0;display:block}#asset-form,#project-name-form{gap:.75rem;display:grid}.asset-type-field{gap:var(--space-3);min-width:0;padding:var(--space-2);border:1px solid var(--border-color);flex-wrap:wrap;margin:0;display:flex}.asset-type-field legend{font-weight:600}.asset-type-field label{align-items:center;gap:var(--space-1);min-height:2.75rem;display:inline-flex}.asset-type-field input{accent-color:var(--accent)}.asset-field{gap:.25rem;display:grid}.asset-field label{font-weight:600}.asset-field input{width:100%;min-height:2.75rem;color:inherit;background:#fff;border:1px solid #829488;border-radius:.25rem;padding:.5rem}.asset-field input:disabled{color:#59645c;background:#e5eae5;border-color:#bdc8bf}.asset-field p,#asset-catalog p{margin:0;font-size:.875rem}.asset-actions{flex-wrap:wrap;gap:.5rem;display:flex}.secondary-button{color:#245b3d;background:#fff}.secondary-button:hover:not(:disabled){background:#edf1ed}.secondary-button:disabled{color:#59645c;background:#e5eae5}.asset-catalog-filters{gap:var(--space-2);margin-top:var(--space-2);display:grid}.asset-tag-filters{align-items:center;gap:var(--space-1);flex-wrap:wrap;display:flex}.asset-tag-filters button{min-height:var(--control-size);overflow-wrap:anywhere;max-width:100%;font-size:var(--font-small);border-radius:1rem;padding:.25rem .625rem}.asset-tag-filters button[aria-pressed=true]{color:var(--surface);background:var(--accent)}.asset-catalog-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}#asset-catalog-status,#asset-catalog-empty{padding-block:.5rem}.asset-card-list{gap:var(--space-2);min-width:0;margin:var(--space-2) 0;padding:var(--space-1);overscroll-behavior-x:contain;flex-wrap:nowrap;list-style:none;display:flex;overflow-x:auto}.asset-card{align-content:start;gap:var(--space-1);min-width:0;padding:var(--space-1);border:1px solid var(--border-color);flex:0 0 6rem;display:grid}.asset-card-preview,.asset-place-button{gap:var(--space-1);color:#202924;text-align:left;background:0 0;border-color:#0000;width:100%;min-width:0;padding:.25rem;display:grid}.asset-place-button:hover:not(:disabled){background:#edf1ed;border-color:#245b3d}.asset-place-button:focus-visible{outline:var(--focus-ring);outline-offset:2px}.asset-card-actions{gap:var(--space-1);flex-wrap:wrap;min-width:0;display:flex}.asset-card-actions>*{overflow-wrap:anywhere;max-width:100%}.asset-card-actions .icon-button{color:#404040;background:#fafafa;border-color:#d4d4d4;padding:0}.asset-card-actions .icon-button:hover:not(:disabled){color:#171717;background:#ededed}.asset-card-actions .icon-button:active:not(:disabled){background:#e5e5e5}.asset-card-actions .icon-button:focus-visible{outline-color:#404040}.asset-card-actions .icon-button:disabled{color:#a3a3a3;background:#f5f5f5;border-color:#e5e5e5}.asset-action-status{flex-basis:100%}.asset-thumbnail{justify-self:center;width:64px;height:64px}.asset-thumbnail-message{overflow-wrap:anywhere;max-width:100%;padding:2px;font-size:.625rem;line-height:1.2}.asset-card-name{font-size:var(--font-small);text-overflow:ellipsis;white-space:nowrap;margin:0;font-weight:600;overflow:hidden}.asset-card-tags{gap:var(--space-1);color:#44564a;flex-wrap:nowrap;margin:0;padding:0;font-size:.6875rem;list-style:none;display:flex;overflow:hidden}.asset-card-tags li{text-overflow:ellipsis;white-space:nowrap;background:#edf1ed;max-width:100%;padding:.125rem .375rem;overflow:hidden}.assets-page .asset-card-list{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));display:grid;overflow:visible}.assets-page .asset-card{gap:var(--space-2);padding:var(--space-3);background:var(--surface)}.assets-page .asset-card-preview{gap:var(--space-2);padding:0}.assets-page .asset-thumbnail{width:100%;height:9rem}.assets-page .asset-thumbnail-message{padding:var(--space-2);font-size:var(--font-body)}.assets-page .asset-card-name,.assets-page .asset-card-tags li{overflow-wrap:anywhere;text-overflow:clip;white-space:normal;overflow:visible}.assets-page .asset-card-name{font-size:var(--font-body)}.assets-page .asset-card-tags{font-size:var(--font-small);flex-wrap:wrap;overflow:visible}.assets-page button,.assets-page .top-navigation a{min-height:44px}.assets-page .asset-card-actions .icon-button{width:44px;min-width:44px;height:44px}.asset-action-status,#asset-catalog-status,#asset-catalog-empty,#asset-catalog-tags-status{overflow-wrap:anywhere;min-width:0}.project-panel{gap:var(--space-2);min-width:0;padding:var(--space-2);border:1px solid var(--border-color);background:var(--surface);font-size:var(--font-body);overflow-wrap:anywhere;grid-area:projects;display:grid}.project-panel p,#project-name-status{margin:0}.project-panel button{white-space:normal;overflow-wrap:anywhere;max-width:100%}#project-current{font-weight:600}#project-current:focus-visible{outline:var(--focus-ring);outline-offset:2px}#project-sign-in{justify-self:start}.project-list{gap:var(--space-1);min-width:0;margin:0;padding:0;list-style:none;display:grid}.project-row{align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-2);border:1px solid var(--border-color);flex-wrap:wrap;display:flex}.project-row[aria-current=true]{border-color:var(--accent);background:var(--surface-muted)}.project-row-name{flex:12rem;min-width:0}.project-row-active{font-size:var(--font-small);font-weight:600}#project-name-dialog,#project-guard-dialog,#project-delete-dialog{width:min(28rem,100% - 2rem)}#project-name-error:not(:empty){color:#9b2020}#project-name[readonly]{background:var(--surface-muted)}@media (pointer:coarse){:root{--control-size:44px}}@media (width<=60rem){.workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"canvas""assets""projects""layers"}.layers-panel{contain:none;height:26rem}}@media (width<=40rem){main{padding:var(--space-2)}.asset-editor{grid-template-columns:minmax(0,1fr);gap:.75rem}.asset-preview{height:6rem}#asset-dialog,#project-name-dialog,#project-guard-dialog,#project-delete-dialog{padding:1rem}}