*{box-sizing:border-box}body{margin:0;background:#e8e9e4;color:#333;font:11px -apple-system,BlinkMacSystemFont,sans-serif}#workspace,#scene{width:100%;height:100dvh}canvas{display:block}button,select{font:inherit;color:inherit;border:1px solid #bac0b6;border-radius:3px;background:#f2f3ee;padding:6px 10px;cursor:pointer}button:hover{background:#e1e5dc}button.active{background:#375d47;color:#fff}button:disabled{opacity:.4;cursor:default}#toolbar{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:5px}#timeline{width:150px;accent-color:#375d47}#preview-wrap{position:absolute;left:12px;bottom:12px;width:30%;min-width:220px;border:1px solid #b7beb0;border-radius:3px;overflow:hidden}#preview{position:relative;width:100%;aspect-ratio:16/9}#preview canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#fullscreen{position:absolute;right:5px;top:5px;padding:2px 6px;z-index:1}#preview-wrap.expanded{width:calc(100% - 284px);max-width:none}#panel{position:absolute;right:12px;top:12px;max-height:calc(100dvh - 24px);overflow:auto}#message{position:absolute;left:12px;top:49px;padding:5px 8px;background:#f2f3eedd;border-radius:3px;color:#52614f;pointer-events:none}#message:empty{display:none}.lil-gui{--background-color:#f1f2ed;--text-color:#364035;--title-background-color:#e2e5dc;--widget-color:#dce1d5;--hover-color:#d1d8ca;--focus-color:#c9d4c1;--number-color:#365e48;--string-color:#365e48;--font-size:11px;--input-font-size:11px;--padding:5px;--spacing:5px;--slider-knob-width:2px;--widget-height:20px;--name-width:40%;box-shadow:0 2px 12px #273b2410}#panel>.lil-gui>.title{display:none}@media(max-width:650px){#panel{right:7px;top:50px}.lil-gui{--width:200px!important}#timeline{width:80px}#preview-wrap{min-width:170px;width:40%}#preview-wrap.expanded{width:calc(100% - 24px);z-index:4}#toolbar{top:9px;left:9px}}#timing-bar{position:absolute;bottom:12px;left:12px;right:272px;background:#f1f2edeb;border:1px solid #bec5b6;border-radius:3px;padding:8px 16px;height:87px}.timing-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#56634f}.timing-row button{padding:2px 7px}#key-rail{height:18px;position:relative;margin:4px 3px 0}.time-key{position:absolute;transform:translate(-50%);border:0;background:transparent;padding:0 3px;color:#82927a;font-size:12px;line-height:18px}.time-key.selected{color:#b26c3e}#timeline{width:100%;display:block;margin:0;height:12px}#preview-wrap{bottom:110px}#scene>canvas:focus{outline:none}@media(max-width:650px){#timing-bar{right:12px}#preview-wrap{bottom:110px}#panel{max-height:calc(100dvh - 160px)}}.ease-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:5px}.ease-option{padding:3px 2px 4px;min-width:0;background:#e5e9df;border:1px solid transparent;border-radius:3px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:14px;font-size:10px;color:#64735b}.ease-option svg{width:100%;height:39px;display:block;overflow:visible}.ease-option .ease-axis{stroke:#b7c1ae;stroke-width:1;fill:none}.ease-reference{stroke:#c5cdbd;stroke-width:1;stroke-dasharray:2 3;fill:none}.ease-curve{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}.ease-option.selected{border-color:#55764b;color:#34592e;background:#d9e3d1}.ease-option:hover{background:#dce4d4}.ease-option:focus-visible{outline:2px solid #55764b;outline-offset:1px}.ease-option:disabled{opacity:.35;cursor:default}.ease-picker{max-height:315px;overflow-y:auto;scrollbar-width:thin}.ease-option{font-size:9px}.ease-option svg{height:40px}.ease-option:first-child{grid-column:1/-1;flex-direction:row;justify-content:center}.ease-option:first-child svg{width:55px;height:27px}#timing-bar{height:230px;right:12px;padding:9px 12px;display:flex;flex-direction:column}#segment-rows{overflow:auto;flex:1;margin:7px 0}.segment-row{display:grid;grid-template-columns:90px 112px 130px minmax(160px,1fr);gap:8px;align-items:center;min-height:34px;border-top:1px solid #d5dccf;padding:3px 0}.segment-row.selected{background:#dde6d5}.segment-name,.segment-ease{padding:4px 7px;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segment-track{height:24px;position:relative;background:repeating-linear-gradient(90deg,#d5ddcf 0,#d5ddcf 1px,transparent 1px,transparent 10%)}.segment-block{position:absolute;top:2px;height:20px;padding:0 4px;min-width:4px;background:#a6b99b;border-color:#829a75;font-size:9px;overflow:hidden;white-space:nowrap}.duration-slot .lil-gui{--width:112px;box-shadow:none}.duration-slot .title{display:none}.duration-slot .controller{margin:0}.duration-slot .lil-gui{--name-width:22%}.duration-slot .slider{display:none}.duration-slot .widget{width:100%}#scrub-track{margin-left:356px;position:relative}#playhead-line{position:absolute;bottom:14px;height:175px;width:1px;background:#a76b3d;pointer-events:none}#preview-wrap{bottom:254px}#ease-popover{position:absolute;bottom:254px;left:245px;width:310px;background:#f1f2ed;border:1px solid #b3bfaa;z-index:10;padding:6px;box-shadow:0 4px 20px #23332520}#ease-popover[hidden]{display:none}#ease-close{float:right;padding:2px 6px;margin:0 4px 4px}#ease-picker{clear:both;max-height:350px}.segment-ease{background:#e4eadd}@media(max-width:650px){.segment-row{grid-template-columns:68px 90px 90px minmax(100px,1fr);gap:4px}#segment-rows{overflow:auto}#scrub-track{margin-left:260px}#ease-popover{left:12px}#panel{max-height:calc(100dvh - 310px)}#preview-wrap{bottom:254px}}#point-labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}#point-labels span{position:absolute;font-size:10px;line-height:14px;color:#395d43;background:#f1f3e8cc;border-radius:2px;padding:0 3px}#toolbar,#preview-wrap,#timing-bar,#panel{z-index:2}#preview-wrap{top:12px;bottom:auto;left:12px;width:28%;min-width:200px}#preview-wrap.expanded{width:min(calc(100% - 284px),calc((100dvh - 180px)*16/9))}#toolbar{left:auto;right:12px;top:12px;width:244px;display:flex;flex-wrap:wrap;gap:5px}#toolbar button,#toolbar select{flex:1;white-space:nowrap;padding:5px 7px}#panel{top:84px;max-height:calc(100dvh - 245px)}#timing-bar{height:145px;padding:6px 10px;bottom:10px;left:12px;right:12px}#segment-rows{margin:4px 0}.segment-row{min-height:29px;padding:1px 0;gap:6px}#timing-bar .timing-row{height:15px;min-height:15px}#playhead-line{height:100px}#ease-popover{bottom:165px}@media(max-width:650px){#preview-wrap{top:9px;left:9px;width:36%;min-width:145px}#toolbar{width:200px;right:7px;top:9px}#panel{top:80px;right:7px;max-height:calc(100dvh - 240px)}#timing-bar{height:145px}#preview-wrap.expanded{width:calc(100% - 24px)}#ease-popover{bottom:165px}}#panel{top:12px;max-height:calc(100dvh - 180px)}#toolbar{position:static;width:244px;margin-bottom:6px}@media(max-width:650px){#panel{top:9px}#toolbar{width:200px}}#timing-bar #toolbar{width:auto;margin:0;display:flex;flex-wrap:nowrap;gap:5px}#timing-bar #toolbar button,#timing-bar #toolbar select{flex:initial;padding:3px 9px}#timing-bar .timing-row{height:27px;min-height:27px}#panel{top:12px}@media(max-width:650px){#panel{top:9px}}#scrub-track{margin-top:5px;margin-bottom:3px}#playhead-line{bottom:auto;top:10px;height:91px}.segment-row{grid-template-columns:90px 112px 130px 50px minmax(160px,1fr)}.segment-pass{padding:3px;font-size:10px;background:#e4eadd}.segment-pass[aria-pressed=true]{background:#ddc8b8}#scrub-track{margin-left:410px}@media(max-width:650px){.segment-row{grid-template-columns:68px 90px 90px 42px minmax(100px,1fr)}#scrub-track{margin-left:310px}}
