.hyperframes-editor{width:100%;min-width:0;border:1px solid #ffffff20;border-radius:16px;overflow:hidden;background:#0c1018;color:#e9edf4}.hf-preview{position:relative;height:460px;max-height:65vh;background:#050608}.hf-label{position:absolute;top:10px;left:10px;border-radius:8px;padding:6px 10px;background:#111827cc;color:#d5f8ff;font:600 12px system-ui;pointer-events:none}.hf-controls{border-top:1px solid #ffffff16;padding:5px}.hf-timeline{height:220px;min-width:0;overflow:hidden}.hf-hint{margin:0;padding:10px 14px;color:#99a7bb;font:13px/1.5 system-ui}.hf-history{display:flex;gap:8px;padding:8px 12px}.hf-history button{border:1px solid #ffffff25;border-radius:8px;padding:8px 12px;background:#182030;color:#e9edf4}.hf-history button:disabled{opacity:.4}#timeline{display:none}.preview-shell:has(#renderCanvas:not(.hidden)){display:block}.hyperframes-workspace hyperframes-player{display:block}.editor-grid>div{min-width:0}@media(max-width:640px){.hf-preview{height:360px}.hf-timeline{height:190px}.hf-controls{overflow-x:auto}.hf-hint{font-size:12px}}
.cutline-editor{display:grid;grid-template-columns:240px minmax(0,1fr) 290px;grid-template-areas:'head head head' 'library monitor properties' 'timeline timeline timeline';background:#090f1b;color:#e2eaf8;outline:none}.ce-head{grid-area:head;display:flex;align-items:center;gap:18px;padding:14px 18px;border-bottom:1px solid #ffffff18}.ce-head span{color:#8c9cb8;font-size:14px}.ce-head button{margin-left:auto;background:#76e3c8!important;color:#072b26!important}.cutline-editor button{border:1px solid #ffffff20;border-radius:8px;padding:8px 12px;background:#18243a;color:#e2eaf8;font:inherit;min-height:44px}.cutline-editor button:disabled{opacity:.4}.cutline-editor button:focus-visible{outline:2px solid #76e3c8}.ce-library{grid-area:library;padding:14px;border-right:1px solid #ffffff18;max-height:590px;overflow:auto}.ce-library nav{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ce-library nav button[aria-pressed=true]{background:#6243b644;color:#e0cfff;border-color:#b59eff60}.ce-library h3,.ce-properties h3{font-size:16px;margin:20px 0 12px}.ce-library p,.ce-timeline p{font-size:14px;line-height:1.6;color:#9babca}.ce-assets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.ce-assets button{padding:5px}.ce-assets video{width:100%;height:96px;object-fit:cover;border-radius:5px}.ce-assets span{display:block;font-size:13px;margin:6px 0}.ce-monitor{grid-area:monitor;min-width:0;align-self:start}.ce-monitor .hf-preview{height:450px;max-height:55vh}.ce-play{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border-top:1px solid #ffffff18}.ce-play output{font:14px monospace}.ce-play input{flex:1;min-width:80px}.ce-properties{grid-area:properties;max-height:590px;overflow:auto;padding:14px;border-left:1px solid #ffffff18}.ce-properties .hf-inspector,.ce-library .hf-inspector{margin:12px 0!important;padding:12px!important;background:#101a2a!important}.ce-properties .grade-controls,.ce-library .grade-controls{grid-template-columns:1fr}.ce-properties .color-lab-head{display:block}.ce-timeline{grid-area:timeline;border-top:1px solid #ffffff20;padding:12px;min-width:0}.ce-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.ce-tools label{margin-left:auto;font-size:14px;display:flex;align-items:center;gap:12px}.ce-track-scroll{overflow:auto;border:1px solid #ffffff15;border-radius:8px;background:#0b1321}.ce-track-canvas{position:relative}.ce-ruler{height:35px;position:relative;cursor:pointer;border-bottom:1px solid #ffffff20}.ce-ruler span{position:absolute;font:12px monospace;color:#95a4bd;padding-top:10px}.ce-track{position:relative;height:70px;border-bottom:1px solid #ffffff12}.ce-track>b{position:sticky;left:0;display:block;width:100px;height:100%;background:#111b2d;z-index:3;padding:20px 8px;font-size:13px;color:#99abc8}.ce-track>button,.ce-track>div{position:absolute;top:6px;height:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #67c5ff50;border-radius:5px;background:#23465d;touch-action:none}.ce-clip{display:flex;padding:0!important;align-items:center;cursor:grab}.ce-clip.selected{outline:2px solid #82eacb;outline-offset:-2px}.ce-clip video{width:45px;height:100%;object-fit:cover;pointer-events:none}.ce-clip span{display:block;font-size:13px;padding:6px;pointer-events:none}.ce-clip small{display:block}.ce-audio>div{background:#285957;border-color:#65e2d160;padding:20px;font-size:14px}.ce-sfx>button{background:#4d3e76;border-color:#bda5ff60;font-size:13px}.ce-text>button{background:#705235;border-color:#ffc98660;font-size:13px}.ce-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:4;pointer-events:none}.ce-library textarea{width:100%;min-height:160px;background:#111d31;color:#fff;border:1px solid #ffffff25;border-radius:8px;padding:12px;font:16px/1.5 inherit}.workspace:has(.cutline-editor){max-width:1800px}.editor-grid:has(.cutline-editor){display:block}.timeline-head:has(+ #timeline){display:none}@media(max-width:1100px){.cutline-editor{grid-template-columns:210px minmax(0,1fr);grid-template-areas:'head head' 'library monitor' 'properties properties' 'timeline timeline'}.ce-properties{max-height:340px;border-top:1px solid #ffffff18}.ce-properties>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}}@media(max-width:700px){.cutline-editor{grid-template-columns:1fr;grid-template-areas:'head' 'monitor' 'library' 'properties' 'timeline'}.ce-head{flex-wrap:wrap}.ce-head span{display:none}.ce-library{max-height:360px;border-top:1px solid #ffffff18}.ce-library nav{grid-template-columns:repeat(2,1fr)}.ce-properties>div{display:block}.ce-monitor .hf-preview{height:340px}.ce-tools label{margin-left:0}.ce-play{gap:8px}.ce-track-scroll{max-width:100%}}
/* Accessible source controls and real clip trim handles. */
.ce-import{display:block;padding:10px;border:1px solid #7b63ff;border-radius:10px;color:#ddd0ff;cursor:pointer}.ce-import input{max-width:100%;margin-top:8px}.ce-source-preview{width:100%;max-height:180px;border-radius:10px;background:#000}.ce-source-fields{display:grid;gap:10px;padding:12px 0}.ce-source-fields label{display:grid;gap:5px}.ce-source-fields input,.ce-source-fields select{width:100%;box-sizing:border-box}.ce-assets button[aria-pressed=true]{outline:2px solid #a38aff}.ce-approved{display:grid;gap:6px}.ce-clip .ce-edge{position:absolute;top:0;bottom:0;width:9px;padding:0;z-index:4;background:#c4b5fd80;pointer-events:auto;cursor:ew-resize;touch-action:pan-y}.ce-edge-left{left:0}.ce-edge-right{right:0}