@import"https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700&family=Noto+Sans:wght@400;600;700&display=swap";*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Noto Sans,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#0f1013}h1,h2,h3,h4,h5,h6{font-family:Alexandria,Noto Sans,Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:root{--bg-main: #0f1013;--bg-drag-over: #141925;--bg-panel: #171a22;--bg-panel-soft: #1f2431;--surface-1: #11161f;--surface-1b: #10151d;--surface-2: #131821;--surface-3: #131923;--surface-4: #1f2633;--modal-bg: #171d28;--menu-bg: #151b25;--tab-active-bg: #1b202b;--track-label-bg: #1a1f2a;--track-label-odd: #1b2230;--track-label-even: #171e2b;--row-odd: #1a202b;--row-even: #161c26;--input-bg: #0f131b;--button-bg: #2a3448;--button-hover: #34415a;--chip-bg: #232b39;--preview-bg: #2a3242;--dragging-bg: #2b3547;--dragging-bg-alt: #2b3548;--ghost-bg: #1d2431;--frame-current-bg: #223349;--text: #e7ecf5;--text-bright: #f3f7ff;--text-muted: #9ca9be;--text-subtle: #8f9ab0;--text-dim: #6d7688;--text-disabled: #4f5869;--accent: #6fa7ff;--accent-2: #8cb7ff;--keyframe: #9fb9ff;--white: #ffffff;--black: #000000;--white-40: rgba(255, 255, 255, .4);--accent-fill-30: rgba(140, 183, 255, .3);--accent-shadow: rgba(140, 183, 255, .35);--overlay-canvas-outside: rgba(8, 11, 16, .55);--modal-overlay: rgba(10, 12, 17, .75)}.editor{width:100vw;height:100dvh;display:grid;grid-template-columns:260px 1fr;grid-template-rows:1fr 320px;background:var(--bg-main);color:var(--text);overflow:hidden;-webkit-user-select:none;user-select:none}.editor.drag-over{background:var(--bg-drag-over)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.library-panel{grid-column:1;grid-row:1;background:var(--bg-panel);padding:16px 16px 0;overflow:hidden;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);border-bottom:2px solid var(--input-bg)}.workspace{grid-column:2;grid-row:1;display:grid;grid-template-rows:auto 1fr;min-width:0;min-height:0}.canvas-and-inspector{min-height:0;display:grid;grid-template-columns:1fr 280px}.timeline{grid-column:1 / -1;grid-row:2;background:var(--bg-panel);padding:0;overflow:hidden;min-height:0;min-width:0;border-top:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.library-actions{position:relative}.library-menu-popover{z-index:30;min-width:120px}.comp-tabs{display:flex;align-items:stretch;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:15;background:var(--bg-panel);padding:8px 12px 0;margin:0;border-bottom:0;min-width:0;overflow:hidden}.comp-tabs-list{flex:1 1 auto;display:flex;align-items:flex-end;gap:8px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.comp-tabs-list::-webkit-scrollbar{display:none}.comp-tabs-nav{flex:1;min-width:0;max-width:100%;display:flex;align-items:flex-end;gap:8px;overflow:hidden;align-self:flex-end}.comp-tabs-scroll-btn{width:24px;min-width:24px;height:100%;align-self:stretch;padding:0;justify-content:center}.comp-tabs-scroll-btn:disabled{opacity:.4;cursor:default}.timeline-tools{display:flex;align-items:center;gap:10px;align-self:center}.timeline-zoom{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.82rem;white-space:nowrap}.timeline-zoom input{width:140px}.range-input{--thumb-size: 14px;--track-height: 6px;--thumb-radius: calc(var(--thumb-size) / 2);--range-scale: 0;position:relative;width:140px;height:20px;display:grid;align-items:center}.range-input-track,.range-input-fill{position:absolute;left:var(--thumb-radius);right:var(--thumb-radius);top:50%;height:var(--track-height);transform:translateY(-50%);pointer-events:none;border-radius:999px;z-index:1}.range-input-track{background:var(--surface-4)}.range-input-fill{right:var(--thumb-radius);background:#8cb7ff;transform:translateY(-50%) scaleX(var(--range-scale));transform-origin:left center}.range-input input[type=range]{width:100%;height:var(--thumb-size);margin:0;background:transparent;appearance:none;-webkit-appearance:none;position:relative;z-index:2}.range-input input[type=range]::-webkit-slider-runnable-track{height:var(--thumb-size);background:transparent}.range-input input[type=range]::-moz-range-track{height:var(--thumb-size);background:transparent;border:0}.range-input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--thumb-size);height:var(--thumb-size);background:#e7ecf5;border:0;border-radius:50%;margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);cursor:pointer}.range-input input[type=range]::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);background:#e7ecf5;border:0;border-radius:50%;cursor:pointer}.comp-tab{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:var(--bg-panel);opacity:.6;border-radius:8px 8px 0 0;padding:4px 6px 4px 8px;border-bottom:2px solid var(--surface-1b)}.comp-tab.active{background:var(--chip-bg);opacity:1}.comp-tab-main{border:0;background:transparent;color:var(--text-muted);padding:4px 2px;cursor:pointer;white-space:nowrap}.comp-tab.active .comp-tab-main{color:var(--text)}.comp-tab-close{border:0;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;width:14px;height:14px;line-height:14px;padding:0}.comp-tab:hover .comp-tab-close{opacity:1}h2,h3{margin:0;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.asset-list{list-style:none;margin:0 -16px;padding:0;display:block;min-height:0;overflow:auto}.asset-item{display:flex;align-items:center;gap:8px;background:var(--row-odd);padding:7px 8px;font-size:.9rem;cursor:default;-webkit-user-select:none;user-select:none}.asset-item:nth-child(odd){background:var(--row-odd)}.asset-item:nth-child(2n){background:var(--row-even)}.asset-item:hover{background:var(--chip-bg);cursor:pointer}.asset-item.dragging{background:var(--dragging-bg);cursor:grabbing}.folder-item.dragging{cursor:default}.asset-icon{width:12px;color:#8cb7ff;text-align:center;flex:0 0 12px}.main-composition-icon{color:#ff6fb3}.transport{padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:0;background:var(--bg-panel);border-bottom:0}.transport-main{display:flex;align-items:center;gap:10px;min-width:0;padding-right:12px}.transport-side{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;padding-left:12px}.transport-spacer{flex:1 1 auto;min-width:8px}.project-name{display:inline-flex;align-items:center;gap:6px;padding:calc(4px + .25em) calc(8px + .25em);border-radius:8px;background:var(--input-bg);color:var(--text-muted);font-size:.82rem;font-weight:700}.top-menu{position:relative}.app-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:130px;width:max-content;display:grid;gap:0;padding:0;background:var(--button-bg);border:2px solid var(--input-bg);border-radius:8px;overflow:visible}.submenu{position:absolute;right:calc(100% + 8px);top:0;min-width:120px;width:max-content;display:none;gap:0;padding:0;background:var(--button-bg);border:2px solid var(--input-bg);border-radius:8px;overflow:hidden}.menu-parent{position:relative;display:flex;align-items:center;cursor:default}.menu-parent:before{content:"";position:absolute;top:0;bottom:0;right:100%;width:8px}.menu-parent:hover .submenu{display:grid}.menu-item{border:0;background:transparent;color:var(--text-muted);font:inherit;line-height:1.2;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left;padding:6px 8px}.menu-item-label{display:flex;align-items:center;gap:8px}.app-menu .menu-item:hover,.submenu .menu-item:hover{background:var(--button-hover);color:var(--text)}.app-menu .menu-item:disabled,.submenu .menu-item:disabled{color:var(--text-dim);cursor:default}.app-menu .menu-item:disabled:hover,.submenu .menu-item:disabled:hover{background:transparent;color:var(--text-dim)}.fps-control{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-muted)}.fps-control input{width:72px}.fps-chip{min-width:74px;white-space:nowrap}.zoom-controls{display:flex;align-items:center;gap:6px}.zoom-controls select{min-width:110px}.canvas-panel{padding:0;display:grid;place-items:center;min-height:0}.canvas-viewport{position:relative;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}.canvas-shell{position:absolute;overflow:visible}.canvas-shell:before{content:"";position:absolute;inset:0;border:1px solid var(--white);box-shadow:0 0 0 2400px var(--overlay-canvas-outside);pointer-events:none;z-index:6}.canvas-viewport.pannable{cursor:grab}.canvas-viewport.panning{cursor:grabbing}.canvas-grid{background:var(--tab-active-bg);position:relative;overflow:visible;image-rendering:pixelated;z-index:4}.pixel-sprite{position:absolute;top:0;left:0;border:0;outline:0;display:block;cursor:pointer;image-rendering:pixelated;background:transparent;color:var(--text-bright);font-size:.7rem;padding:0}.pixel-sprite.selected{outline:0}.selection-overlay{position:absolute;border:1px solid var(--white);box-shadow:1px 1px 0 var(--black);box-sizing:border-box;pointer-events:none;z-index:20}.motion-path-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:19;overflow:visible}.motion-path-line{fill:none;stroke:var(--white);stroke-width:1;shape-rendering:crispEdges}.motion-path-line.shadow{stroke:var(--black)}.motion-path-handle{fill:transparent;stroke:var(--white);stroke-width:1;pointer-events:all;cursor:move}.motion-path-handle.shadow{stroke:var(--black);pointer-events:none}.motion-path-handle:hover,.motion-path-handle.dragging{fill:var(--white)}.motion-path-point{fill:var(--white);stroke:var(--white);stroke-width:1;shape-rendering:crispEdges}.motion-path-point.shadow{fill:var(--black);stroke:var(--black)}.motion-path-point.shadow.normal,.motion-path-point.normal{fill:transparent}.motion-path-point.keyframed{fill:var(--white)}.motion-path-point.current{stroke:#8cb7ff}.sprite-canvas{display:block;width:auto;height:auto;image-rendering:pixelated}.comp-content{position:relative;overflow:hidden;pointer-events:none;background:transparent}.comp-content-layer{position:absolute;transform-origin:top left}.comp-content-nested{position:absolute;inset:0}.preview-sprite{pointer-events:none;opacity:.65;background:var(--preview-bg)}.sprite-tint{position:absolute;inset:0;opacity:.26}.pixel-sprite span{z-index:1;max-width:82px;text-align:center;word-break:break-word}.anchor-indicator{position:absolute;top:0;left:0;width:13px;height:13px;pointer-events:none;z-index:21;transform-origin:center}.anchor-indicator:before,.anchor-indicator:after{content:"";position:absolute;background:var(--white)}.anchor-indicator:before{left:6px;top:0;width:1px;height:13px}.anchor-indicator:after{left:0;top:6px;width:13px;height:1px}.anchor-indicator{filter:drop-shadow(1px 1px 0 var(--black))}.inspector{background:var(--bg-panel);padding:12px;overflow:auto;border-bottom:2px solid var(--input-bg)}.inspector-title-row{display:flex;align-items:center;gap:6px}.inspector-title-edit-btn{border:0;background:transparent;color:var(--text-muted);padding:0;cursor:pointer;opacity:0;pointer-events:none}.inspector-title-row:hover .inspector-title-edit-btn,.inspector-title-row:focus-within .inspector-title-edit-btn{opacity:1;pointer-events:auto}.inspector-title-input{width:100%;min-width:0}.inspector-subtype-label{margin-top:4px;color:var(--text-muted);font-size:.78rem}.inspector-empty{margin-top:8px;color:var(--text-muted);font-size:.85rem}.inspector-section-title{color:var(--text-muted);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase}.inspector-grid{margin-top:10px;display:grid;grid-template-columns:1fr;gap:10px}.inspector-source-link{margin-top:6px;border:0;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;padding:0;cursor:pointer;width:fit-content}.inspector-source-link span{border-bottom:1px solid transparent}.inspector-source-link:hover span{border-bottom-color:var(--text-muted)}.inspector-inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inspector-asset-replace{width:100%;justify-content:center}.library-preview{background:var(--input-bg);min-height:130px;display:grid;place-items:center;overflow:hidden}.library-preview-image{max-width:100%;max-height:120px;object-fit:contain;image-rendering:pixelated}.library-preview-comp-stage{width:100%;min-height:120px;display:grid;place-items:center}.library-preview-comp-scale{transform-origin:top left}.inspector label{display:grid;gap:6px;font-size:.8rem;color:var(--text-muted);min-width:0}.input-with-keyframe{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;min-width:0}.input-with-keyframe input{width:100%;min-width:0;box-sizing:border-box}.number-input{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px;min-width:0}.number-input input{width:100%;min-width:0;box-sizing:border-box}.number-input-buttons{display:grid;gap:1px}.number-step-btn{border:0;background:transparent;color:var(--text-muted);width:14px;height:12px;padding:0;display:grid;place-items:center;cursor:pointer}.number-step-btn:hover{color:var(--text)}.number-step-btn:disabled{color:var(--text-disabled);cursor:default}.number-input input:disabled{color:var(--text-muted)}.duo-inputs{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0}.inspector-keyframe-btn{width:20px;height:20px;border:0;background:transparent;color:var(--text-dim);display:grid;place-items:center;cursor:pointer;padding:0}.inspector-keyframe-btn .keyframe-icon{width:9px;height:9px;top:0}.inspector-keyframe-btn.keyframed{color:var(--white)}input,select,.layer-select,.frame-cell{border:0;background:var(--input-bg);color:var(--text);border-radius:6px;font:inherit}.small-btn{border:0;background:var(--button-bg);color:var(--text);border-radius:6px;font:inherit}input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text}input,select,.layer-select{padding:6px 8px}.small-btn,.layer-select{cursor:pointer;padding:6px 9px}.small-btn{display:inline-flex;align-items:center;gap:6px}.small-btn:hover,.layer-select:hover,.frame-cell:hover{background:var(--button-hover)}.timeline-ruler,.property-row{display:grid;min-width:0;background-color:var(--input-bg);border-bottom:2px solid var(--surface-1b)}.timeline-ruler{grid-template-columns:170px 1fr;margin:0}.property-row{grid-template-columns:170px 1fr}.track-label{color:var(--text-muted);padding:5px 8px;background:var(--track-label-bg);font-size:.82rem}.track-label.spacer{background:transparent}.track-cells{position:relative;overflow:hidden;min-width:0}.timeline-ruler .track-cells{cursor:ew-resize;-webkit-user-select:none;user-select:none}.track-cells:after{content:"";position:absolute;top:0;bottom:0;left:calc((var(--current-frame, 0) * var(--frame-width, 22px)) - var(--scroll-left, 0px));width:var(--frame-width, 22px);border:1px solid #8cb7ff;box-sizing:border-box;pointer-events:none;z-index:3}.frame-cell{position:relative;z-index:1;height:28px;min-width:0;flex:0 0 auto;border-radius:0;background:var(--surface-4);padding:0;font-size:.68rem;cursor:pointer}.track-strip{display:flex}.timeline-ruler .frame-cell:nth-child(odd){background:var(--row-odd)}.timeline-ruler .frame-cell:nth-child(2n){background:var(--row-even)}.layer-track .property-row:nth-of-type(odd) .track-label{background:var(--track-label-odd)}.layer-track .property-row:nth-of-type(2n) .track-label{background:var(--track-label-even)}.layer-track .property-row:nth-of-type(odd) .frame-cell{background:var(--row-odd)}.layer-track .property-row:nth-of-type(2n) .frame-cell{background:var(--row-even)}.frame-cell.current{background:var(--frame-current-bg)}.frame-cell.keyframed{color:var(--keyframe);cursor:ew-resize}.frame-cell.keyframe-only-frame{background:var(--surface-2)}.timeline-ruler .frame-cell.keyframe-only-frame{color:var(--text-dim)}.keyframe-icon{width:10px;height:10px;display:block;margin:0 auto;background:currentColor;position:relative;top:1px}.frame-cell.keyframe-normal .keyframe-icon,.inspector-keyframe-btn.keyframe-normal .keyframe-icon{border-radius:999px}.frame-cell.keyframe-linear .keyframe-icon,.inspector-keyframe-btn.keyframe-linear .keyframe-icon{transform:rotate(45deg);border-radius:1px}.frame-cell.keyframe-constant .keyframe-icon,.inspector-keyframe-btn.keyframe-constant .keyframe-icon{border-radius:0}.frame-cell.keyframe-easeIn .keyframe-icon,.frame-cell.keyframe-easeOut .keyframe-icon,.frame-cell.keyframe-easeInOut .keyframe-icon,.inspector-keyframe-btn.keyframe-easeIn .keyframe-icon,.inspector-keyframe-btn.keyframe-easeOut .keyframe-icon,.inspector-keyframe-btn.keyframe-easeInOut .keyframe-icon{border-radius:999px}.frame-cell.keyframe-easeIn .keyframe-icon:before,.frame-cell.keyframe-easeInOut .keyframe-icon:before{content:"";position:absolute;top:50%;left:-5px;width:3px;height:3px;border-radius:999px;background:currentColor;transform:translateY(-50%)}.inspector-keyframe-btn.keyframe-easeIn .keyframe-icon:before,.inspector-keyframe-btn.keyframe-easeInOut .keyframe-icon:before{content:"";position:absolute;top:50%;left:-5px;width:3px;height:3px;border-radius:999px;background:currentColor;transform:translateY(-50%)}.frame-cell.keyframe-easeOut .keyframe-icon:after,.frame-cell.keyframe-easeInOut .keyframe-icon:after{content:"";position:absolute;top:50%;right:-5px;width:3px;height:3px;border-radius:999px;background:currentColor;transform:translateY(-50%)}.inspector-keyframe-btn.keyframe-easeOut .keyframe-icon:after,.inspector-keyframe-btn.keyframe-easeInOut .keyframe-icon:after{content:"";position:absolute;top:50%;right:-5px;width:3px;height:3px;border-radius:999px;background:currentColor;transform:translateY(-50%)}.timeline-body{min-height:0;overflow-y:auto;overflow-x:hidden;min-width:0}.timeline-tracks{display:grid;gap:8px;margin-top:8px}.timeline-scrollbar{position:relative;z-index:12;background:var(--input-bg);padding-top:4px;margin-top:8px;margin-left:170px;overflow-x:auto;overflow-y:hidden;height:14px}.layer-track{background:var(--surface-3);border-radius:6px;overflow:hidden}.layer-track.dragging{opacity:.45}.layer-header{display:flex;align-items:center;gap:8px;padding:8px;background:var(--chip-bg);position:relative;cursor:grab}.layer-header.dragging{cursor:grabbing}.layer-visibility-btn{border:0;background:transparent;color:var(--text-muted);width:22px;height:22px;padding:0;display:grid;place-items:center;cursor:pointer;flex:0 0 22px}.layer-visibility-btn:hover{color:var(--text)}.layer-visibility-btn.hidden{color:var(--text-dim)}.layer-asset{padding:6px 8px;border-radius:6px;background:var(--chip-bg);color:var(--text-muted);font-size:.82rem}.layer-select.selected{border-color:var(--accent-2)}.layer-drop-marker{height:0;border-top:3px solid #8cb7ff;box-shadow:0 0 0 1px var(--accent-shadow);margin:3px 0}.layer-drag-ghost{position:fixed;z-index:999;pointer-events:none;background:var(--dragging-bg-alt);color:var(--text-bright);padding:5px 8px;font-size:.8rem;border:2px solid #8cb7ff;opacity:.95}.property-picker{position:absolute;top:calc(100% + 4px);right:8px;min-width:170px;display:grid;gap:6px;padding:8px;background:var(--menu-bg);z-index:20;border-radius:6px}.property-picker button{padding:6px 8px;background:var(--ghost-bg);color:var(--text);border-radius:4px;cursor:pointer;text-align:left}.property-picker span{color:var(--text-muted);font-size:.8rem}.modal-backdrop{position:fixed;inset:0;background:var(--modal-overlay);display:grid;place-items:center;z-index:100}.modal-card{width:min(360px,calc(100vw - 32px));background:var(--modal-bg);border-radius:8px;padding:14px;display:grid;gap:10px}.modal-card label{display:grid;gap:6px;font-size:.84rem;color:var(--text-muted)}.settings-section-title{margin-top:4px}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-row label{min-width:0}.settings-row input{width:100%;box-sizing:border-box}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.about-card{width:min(420px,calc(100vw - 32px));min-height:220px;display:flex;flex-direction:column}.about-hero{display:grid;gap:4px;text-align:left}.about-hero h2{margin:0;color:var(--text);font-size:1.6rem;letter-spacing:.01em;text-transform:none}.about-hero p{margin:0;color:var(--text-muted);font-size:.86rem}.about-credit a{color:var(--accent-2);text-decoration:none}.about-credit a:hover{text-decoration:underline}.about-github-link{margin-top:auto;width:fit-content;justify-content:flex-start}.project-picker{width:min(700px,calc(100vw - 32px));min-height:320px;align-content:start;grid-template-rows:auto minmax(0,1fr)}.project-picker-actions{display:inline-flex;gap:8px}.project-create{display:grid;grid-template-columns:1fr auto;gap:8px}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;max-height:min(60vh,450px);overflow:auto}.project-card{position:relative;background:var(--surface-4);color:var(--text);padding:10px;min-height:150px;display:flex;flex-direction:column;gap:6px;cursor:pointer}.project-thumb{height:100px;background:var(--surface-1);display:grid;place-items:center;overflow:hidden;color:var(--text-muted);font-size:.78rem}.project-thumb img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.project-updated,.empty-projects{color:var(--text-muted);font-size:.78rem}.project-updated{margin-top:auto}.project-delete{position:absolute;top:6px;right:6px;padding:4px 6px}.compose-modal,.crop-modal{width:min(1120px,calc(100vw - 32px));max-height:min(90vh,820px);height:min(90vh,820px);display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px}.compose-preview-pane{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--surface-2)}.compose-preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:2px solid var(--input-bg);color:var(--text-muted);font-size:.8rem}.compose-preview-meta{color:var(--text-subtle)}.compose-preview-viewport{overflow:auto;position:relative;width:100%;height:100%;min-width:0;min-height:0}.crop-preview-viewport{overflow:hidden;position:relative;background:var(--surface-2);width:100%;height:100%;min-width:0;min-height:0}.crop-preview-viewport.pannable{cursor:grab}.crop-preview-viewport.panning{cursor:grabbing}.compose-preview-content{position:relative;transform-origin:top left}.compose-preview-image,.crop-preview-image{position:absolute;left:0;top:0;display:block;image-rendering:pixelated;pointer-events:none}.crop-image-shell{position:absolute}.crop-selection{position:absolute;border:1px solid var(--white);box-shadow:1px 1px 0 var(--black);box-sizing:border-box;cursor:move}.crop-handle{position:absolute;width:10px;height:10px;border:0;padding:0;background:var(--white);box-shadow:1px 1px 0 var(--black)}.crop-handle.n{left:50%;top:0;transform:translate(-50%,-50%);cursor:ns-resize}.crop-handle.s{left:50%;bottom:0;transform:translate(-50%,50%);cursor:ns-resize}.crop-handle.w{left:0;top:50%;transform:translate(-50%,-50%);cursor:ew-resize}.crop-handle.e{right:0;top:50%;transform:translate(50%,-50%);cursor:ew-resize}.crop-handle.nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}.crop-handle.ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}.crop-handle.sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}.crop-handle.se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}.compose-grid-overlay{position:absolute;inset:0;pointer-events:none}.compose-grid-cell{position:absolute;border:1px solid var(--white-40);box-sizing:border-box;display:grid;place-items:center;color:var(--white);font-size:.72rem;text-shadow:1px 1px 0 var(--black)}.compose-grid-cell.selected{background:var(--accent-fill-30);border-color:var(--white)}.compose-sidebar{min-width:0;display:grid;grid-template-rows:auto;align-content:start;gap:10px;overflow:auto}.compose-group{display:grid;gap:6px;color:var(--text-muted);font-size:.82rem}.compose-pair{display:grid;gap:4px;min-width:0}.compose-pair span{font-size:.75rem;color:var(--text-subtle)}.compose-selection-info{color:var(--text-muted);font-size:.8rem}.compose-actions{justify-content:flex-end;flex-wrap:wrap}