/* XIKO · browser-first editor. Scoped under #xiko-view to avoid Binder/SPHERE bleed. */
#xiko-view{
  --xk-bg:#0c0d0f;--xk-panel:#121316;--xk-panel-2:#181a1f;--xk-well:#090a0c;
  --xk-line:rgba(255,255,255,.09);--xk-line-2:rgba(255,255,255,.15);
  --xk-text:#f5f6f8;--xk-body:#c7cad1;--xk-muted:#858a95;--xk-blue:#21b8f6;
  --xk-blue-2:#087fd0;--xk-danger:#ff6c72;--xk-pps:84px;
  color:var(--xk-text);font-family:Inter,Pretendard,"Noto Sans KR",sans-serif;color-scheme:dark;
}
body.xiko-full #xiko-view{position:fixed;inset:0 0 0 256px;z-index:160;display:grid!important;grid-template-rows:52px minmax(0,1fr) 246px;background:var(--xk-bg);overflow:hidden;animation:none!important;transform:none!important;transition:left .42s cubic-bezier(.16,1,.3,1)}
body.xiko-full .sidebar.icon-mode+.main-content #xiko-view{left:56px}
body.xiko-full .top-header,body.xiko-full .main-content::before{display:none!important}
.nav-xiko-ip{display:block!important;object-fit:contain;background:transparent;border-radius:7px;box-shadow:none}

#xiko-view button,#xiko-view input,#xiko-view textarea{font:inherit}
#xiko-view [hidden]{display:none!important}
#xiko-view .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#xiko-view button{color:inherit}
#xiko-view button:focus-visible,#xiko-view input:focus-visible,#xiko-view textarea:focus-visible{outline:2px solid rgba(33,184,246,.72);outline-offset:2px}
.xk-topbar{display:flex;align-items:center;gap:12px;min-width:0;padding:0 14px;border-bottom:1px solid var(--xk-line);background:#0f1012}
.xk-brand{display:flex;align-items:center;gap:9px;min-width:94px;font-size:14px;letter-spacing:.08em}
.xk-brand-mark{display:block;width:27px;height:27px;object-fit:contain;border-radius:8px;background:transparent;box-shadow:none}
.xk-project-name{min-width:120px;max-width:360px;flex:1}.xk-project-name input{width:100%;height:32px;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:#f4f5f6;font-weight:600}.xk-project-name input:hover{background:rgba(255,255,255,.05)}.xk-project-name input:focus{border-color:var(--xk-line-2);background:#181a1e}
.xk-save-state{display:flex;align-items:center;gap:6px;color:#8f96a2;font-size:11px;white-space:nowrap}.xk-save-state.is-saving{color:#f6c866}.xk-save-state.is-error{color:#ff8c91}.xk-save-state i{font-size:15px}
.xk-top-actions{display:flex;align-items:center;gap:5px;margin-left:auto}.xk-top-actions button,.xk-library-head button,.xk-canvas-bar button,.xk-transport button,.xk-timeline-toolbar button,.xk-export-card header button{display:grid;place-items:center;height:32px;min-width:32px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer}.xk-top-actions button:hover,.xk-library-head button:hover,.xk-canvas-bar button:hover,.xk-transport button:hover,.xk-timeline-toolbar button:hover{background:rgba(255,255,255,.07)}
.xk-top-actions .xk-export{display:flex;padding:0 14px;gap:7px;border-color:#00cae0;background:#00cae0;font-weight:700;box-shadow:none}
.xk-top-actions button:disabled{opacity:.28;cursor:default}

.xk-editor-grid{display:grid;grid-template-columns:62px minmax(230px,292px) minmax(400px,1fr) 260px;min-height:0;border-bottom:1px solid var(--xk-line)}
.xk-editor-grid.library-collapsed{grid-template-columns:62px minmax(400px,1fr) 260px}
.xk-toolrail{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:8px 5px;background:#0d0e10;border-right:1px solid var(--xk-line);overflow-y:auto}
.xk-toolrail button{display:flex;min-height:50px;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;border-radius:8px;background:transparent;color:#858b96;font-size:10px;cursor:pointer}.xk-toolrail button i{font-size:20px}.xk-toolrail button:hover{color:#dce0e6;background:rgba(255,255,255,.05)}.xk-toolrail button.is-active{color:#79d9ff;background:rgba(20,174,239,.12)}
.xk-library{display:flex;min-width:0;flex-direction:column;background:#111215;border-right:1px solid var(--xk-line);overflow:hidden}.xk-library.is-collapsed{display:none}
.xk-library-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 14px 12px;border-bottom:1px solid var(--xk-line)}.xk-library-head span,.xk-inspector header span,.xk-export-card header span{display:block;color:#6e7683;font-size:10px;font-weight:700;letter-spacing:.12em}.xk-library-head h2,.xk-inspector header h2,.xk-export-card header h2{margin:3px 0 0;color:#f3f5f7;font-size:16px}.xk-panel{min-height:0;padding:14px;overflow:auto}.xk-upload,.xk-primary,.xk-export-card>button{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;min-height:38px;border:1px solid var(--xk-line-2);border-radius:9px;background:#20232a;color:#f5f7fa;font-weight:700;cursor:pointer}.xk-upload:hover,.xk-export-card>button:hover{border-color:rgba(49,195,255,.6);background:#252932}.xk-primary{border-color:#1597da!important;background:linear-gradient(135deg,#087fda,#16afd0)!important}
.xk-cost-note{display:flex;gap:8px;margin:12px 0 14px;padding:10px;border:1px solid rgba(50,184,222,.18);border-radius:9px;background:rgba(35,160,204,.07);color:#9aa4b2;font-size:10.5px;line-height:1.45}.xk-cost-note i{flex:none;color:#47c9ec;font-size:16px}
.xk-cost-note span{color:#9aa4b2}
.xk-project-open{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;min-height:36px;margin-top:7px;border:1px solid var(--xk-line);border-radius:9px;background:#16181d;color:#aeb5c0;font-weight:700;font-size:10.5px;cursor:pointer}.xk-project-open:hover{border-color:rgba(49,195,255,.6);background:#20232a;color:#f5f7fa}
.xk-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.xk-asset{display:flex;min-width:0;flex-direction:column;gap:6px;padding:7px;border:1px solid var(--xk-line);border-radius:9px;background:#17191d;text-align:left;cursor:grab}.xk-asset:hover{border-color:rgba(91,203,248,.45);background:#1b1e23}.xk-asset-thumb{display:grid;place-items:center;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#090a0c;color:#6a7280}.xk-asset-thumb img,.xk-asset-thumb video{width:100%;height:100%;object-fit:cover}.xk-asset-thumb i{font-size:24px}.xk-asset b{overflow:hidden;color:#dfe2e8;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}.xk-asset small{color:#747b87;font-size:10px}.xk-assets-empty{grid-column:1/-1;display:grid;place-items:center;min-height:130px;padding:18px;color:#6e7480;text-align:center;font-size:11px;line-height:1.6}.xk-assets-empty i{font-size:30px;margin-bottom:8px}
.xk-field{display:flex;flex-direction:column;gap:7px;margin-bottom:13px;color:#9fa5af;font-size:11px}.xk-field>span{display:flex;justify-content:space-between}.xk-field input:not([type=range]),.xk-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--xk-line);border-radius:8px;background:#0d0f12;color:#f4f5f7;padding:9px 10px;resize:vertical}.xk-field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.xk-panel-copy{color:#8c929e;font-size:11px;line-height:1.55}.xk-coming{display:flex;min-height:220px;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#7f8692;text-align:center;font-size:11px;line-height:1.55}.xk-coming i{font-size:30px;color:#4cc9f1}.xk-coming b{color:#d8dce2;font-size:14px}

.xk-compose{display:grid;grid-template-rows:42px minmax(0,1fr) 42px;min-width:0;min-height:0;background:#eef2f4;color:#17202a}.xk-canvas-bar{display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid rgba(11,24,34,.1);background:#f9fbfc}.xk-canvas-bar button{display:flex;gap:6px;padding:0 9px;border-color:rgba(9,28,42,.1);background:#fff;color:#344451;font-size:11px}.xk-canvas-meta{display:flex;gap:8px;color:#7a8995;font-size:10px}.xk-canvas-meta span+span:before{content:"·";margin-right:8px}.xk-zoom{display:flex;align-items:center;gap:3px;margin-left:auto;color:#61707c;font-size:10px}.xk-zoom button{min-width:28px;height:28px;padding:0}.xk-stage-wrap{display:grid;place-items:center;min-height:0;padding:18px;overflow:hidden;background:#e9eef1}.xk-stage{position:relative;width:min(100%,960px);max-height:100%;aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 10px 35px rgba(25,40,52,.18);transform:scale(var(--xk-stage-scale,1));transform-origin:center}.xk-stage video,.xk-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--xk-fit,contain);background:#000}.xk-stage audio{display:none}.xk-stage-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:radial-gradient(circle at 50% 40%,#242832,#090a0d 64%);color:#737c88;text-align:center}.xk-stage-empty span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.05);font-size:28px}.xk-stage-empty b{color:#c9ced5;font-size:13px}.xk-stage-empty small{font-size:10px}.xk-text-layer{position:absolute;inset:0;pointer-events:none}.xk-preview-text{position:absolute;transform:translate(-50%,-50%);max-width:88%;padding:.08em .2em;color:#fff;font-weight:800;line-height:1.2;text-align:center;white-space:pre-wrap;text-shadow:0 2px 8px rgba(0,0,0,.75)}.xk-preview-text.is-caption{max-width:86%;padding:.12em .38em;border-radius:.16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.xk-transport{display:flex;align-items:center;gap:4px;padding:0 12px;border-top:1px solid rgba(10,28,42,.1);background:#fff;color:#2b3945}.xk-transport button{color:#344451}.xk-transport .xk-play{border-radius:50%;background:#101820;color:#fff}.xk-transport #xk-timecode{margin-left:5px;color:#667681;font:600 10px/1 Inter,monospace}.xk-transport-spacer{flex:1}.xk-transport #xk-fit{display:flex;gap:5px;padding:0 8px;font-size:10px}

/* Width and max-height together distort portrait projects. Derive width from
   the available height so every stage ratio remains geometrically exact. */
.xk-stage{width:auto;height:min(100%,540px);max-width:100%;max-height:none}

.xk-inspector{display:flex;min-width:0;flex-direction:column;padding:0 13px 13px;border-left:1px solid var(--xk-line);background:#111215;overflow:auto}.xk-inspector header{padding:16px 0 12px;border-bottom:1px solid var(--xk-line);margin-bottom:13px}.xk-inspector-empty{display:flex;min-height:160px;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:#6f7681;text-align:center;font-size:11px}.xk-inspector-empty i{font-size:28px}.xk-inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.xk-inspector-actions button{min-height:34px;border:1px solid var(--xk-line);border-radius:8px;background:#1b1d22;color:#d8dce2;cursor:pointer}.xk-inspector-actions .is-danger{color:#ff9a9f}.xk-budget-card{margin-top:auto;padding:12px;border:1px solid rgba(38,190,225,.18);border-radius:10px;background:rgba(26,155,197,.07)}.xk-budget-card>span{display:flex;align-items:center;gap:6px;color:#5dd2ef;font-size:10px;font-weight:700}.xk-budget-card b,.xk-budget-card small{display:block}.xk-budget-card b{margin-top:8px;font-size:11px}.xk-budget-card small{margin-top:4px;color:#7d8591;font-size:10px;line-height:1.4}

.xk-timeline{display:grid;grid-template-rows:38px minmax(0,1fr);min-height:0;background:#0d0e10}.xk-timeline-toolbar{display:flex;align-items:center;gap:4px;padding:0 10px;border-bottom:1px solid var(--xk-line);color:#aab0ba}.xk-timeline-toolbar button{position:relative;height:28px;min-width:28px}.xk-timeline-toolbar button>small{position:absolute;right:2px;bottom:0;color:#65d3f7;font-size:10px;font-weight:800}.xk-timeline-toolbar button.is-active{color:#65d3f7;background:rgba(30,174,229,.12)}.xk-toolbar-divider{width:1px;height:17px;margin:0 5px;background:var(--xk-line-2)}.xk-timeline-summary{font-size:10px}.xk-timeline-toolbar>i{color:#6f7681;font-size:12px}.xk-timeline-toolbar input[type=range]{width:100px;accent-color:#63d2f5}.xk-timeline-body{--xk-ruler-height:25px;display:grid;grid-template-columns:160px minmax(0,1fr);min-height:0}.xk-track-label-column{display:grid;grid-template-rows:var(--xk-ruler-height) minmax(0,1fr);min-height:0;padding-bottom:var(--xk-horizontal-scrollbar-height,0px);border-right:1px solid var(--xk-line);background:#101115;overflow:hidden}.xk-track-label-ruler{height:var(--xk-ruler-height);border-bottom:1px solid var(--xk-line)}.xk-track-labels{min-height:0;overflow:hidden}.xk-track-label{display:flex;height:45px;align-items:center;gap:7px;padding:0 7px 0 10px;border-bottom:1px solid rgba(255,255,255,.05);color:#a0a6b0;font-size:10px}.xk-track-label.is-target-track{color:#dff6ff;background:rgba(45,184,231,.08);box-shadow:inset 2px 0 #42c7ef}.xk-track-label>i{flex:none;font-size:14px}.xk-track-label b{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.xk-track-actions{display:flex;flex:none;gap:1px}.xk-track-actions button{display:grid;place-items:center;width:23px;height:27px;padding:0;border:0;border-radius:5px;background:none;color:#69717d;cursor:pointer}.xk-track-actions button:hover{color:#dbe2ea;background:rgba(255,255,255,.06)}.xk-track-actions button.is-active{color:#65d3f7}.xk-track-actions button[data-track-remove]:hover{color:#ff999e}.xk-timeline-scroll{position:relative;min-width:0;overflow:auto;overscroll-behavior:contain}.xk-ruler{position:sticky;top:0;z-index:5;height:var(--xk-ruler-height);min-width:100%;border-bottom:1px solid var(--xk-line);background:#111216}.xk-ruler-mark{position:absolute;top:0;height:var(--xk-ruler-height);border-left:1px solid rgba(255,255,255,.15);color:#777e89;font:10px/20px Inter,sans-serif;padding-left:4px}.xk-track-rows{position:relative;min-width:100%}.xk-track-row{position:relative;height:45px;border-bottom:1px solid rgba(255,255,255,.05);background-color:#0c0d10;background-image:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:var(--xk-pps) 100%;transition:background-color .12s,box-shadow .12s}.xk-track-row.is-drop-target{background-color:#10232d;box-shadow:inset 0 0 0 1px rgba(75,205,244,.55)}.xk-clip{position:absolute;top:4px;height:37px;min-width:5px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:linear-gradient(135deg,#245c75,#1d3f54);box-shadow:inset 0 1px rgba(255,255,255,.08);color:#e9f6fb;cursor:grab;user-select:none}.xk-clip[data-kind=text]{background:linear-gradient(135deg,#6e4ba3,#4b3274)}.xk-clip[data-kind=audio]{background:linear-gradient(135deg,#25805f,#185640)}.xk-clip.is-selected{border-color:#8ee2ff;box-shadow:0 0 0 1px #28bff4,inset 0 1px rgba(255,255,255,.15)}.xk-clip-main{display:flex;align-items:center;gap:5px;height:100%;padding:0 8px;overflow:hidden}.xk-clip-main i{flex:none}.xk-clip-main b{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.xk-trim{position:absolute;top:0;bottom:0;width:6px;z-index:2;cursor:ew-resize}.xk-trim.left{left:0}.xk-trim.right{right:0}.xk-playhead{position:absolute;z-index:8;top:0;bottom:0;left:0;width:1px;background:#eefaff;pointer-events:none}.xk-playhead span{position:absolute;top:0;left:-4px;width:9px;height:9px;border-radius:2px 2px 50% 50%;background:#fff;box-shadow:0 0 0 1px #16212a}

.xk-export-pop{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px)}.xk-export-pop[hidden]{display:none}.xk-export-card{width:min(420px,calc(100vw - 40px));padding:18px;border:1px solid var(--xk-line-2);border-radius:16px;background:#17191d;box-shadow:0 24px 80px rgba(0,0,0,.55)}.xk-export-card header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.xk-export-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.xk-export-spec span{padding:10px;border:1px solid var(--xk-line);border-radius:9px;background:#101215}.xk-export-spec b,.xk-export-spec em{display:block}.xk-export-spec b{color:#777f8b;font-size:10px}.xk-export-spec em{margin-top:5px;color:#e1e5ea;font-size:11px;font-style:normal}.xk-export-safe{display:flex;gap:10px;margin:12px 0;padding:12px;border:1px solid rgba(55,205,237,.2);border-radius:10px;background:rgba(29,163,207,.08)}.xk-export-safe>i{flex:none;color:#58d6f4;font-size:20px}.xk-export-safe b,.xk-export-safe span{display:block}.xk-export-safe b{font-size:11px}.xk-export-safe span{margin-top:4px;color:#8f98a5;font-size:10px;line-height:1.45}.xk-export-card>button{margin-top:8px}.xk-export-card>p{margin:12px 2px 0;color:#737b87;font-size:10px;line-height:1.5}.xk-export-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;margin-top:9px;padding:10px;border:1px solid rgba(55,205,237,.2);border-radius:10px;background:#101215}.xk-export-progress progress{grid-column:1/-1;width:100%;height:7px;accent-color:#37c8eb}.xk-export-progress span{min-width:0;color:#aeb8c4;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xk-export-progress button{min-height:27px;padding:0 9px;border:1px solid var(--xk-line-2);border-radius:7px;background:#20232a;color:#e2e6eb;font-size:10px;cursor:pointer}.xk-export-progress button:hover{border-color:#e7888e;color:#ffb4b8}

.xk-field>small{margin-top:-3px;color:#737d88;font-size:10px}.xk-track-menu{position:fixed;z-index:80;display:grid;width:154px;padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#1a1c21;box-shadow:0 16px 45px rgba(0,0,0,.5)}.xk-track-menu[hidden]{display:none}.xk-track-menu button{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#d6dbe2;font:500 10px/1 Inter,sans-serif;text-align:left;cursor:pointer}.xk-track-menu button:hover{background:rgba(255,255,255,.07)}.xk-track-menu button.is-danger{color:#ff9ca2}.xk-track-menu button:disabled{opacity:.35;cursor:not-allowed}.xk-track-menu button i{font-size:14px}

.xk-toast{position:absolute;left:50%;bottom:258px;z-index:45;max-width:min(520px,calc(100% - 32px));padding:10px 14px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(22,24,29,.96);box-shadow:0 12px 36px rgba(0,0,0,.42);color:#eef1f5;font-size:11px;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .16s,transform .16s}.xk-toast.is-visible{opacity:1;transform:translate(-50%,0)}.xk-toast.is-danger{border-color:rgba(255,93,101,.42);color:#ffb7ba}

@media(max-width:1280px){.xk-editor-grid{grid-template-columns:56px 230px minmax(360px,1fr)}.xk-inspector{display:none}}
@media(max-width:1280px){.xk-editor-grid.library-collapsed{grid-template-columns:56px minmax(360px,1fr)}}
@media(max-width:900px){body.xiko-full #xiko-view{left:56px;grid-template-rows:48px minmax(0,1fr) 220px}.xk-editor-grid{grid-template-columns:52px minmax(0,1fr)}.xk-library{position:absolute;z-index:12;top:52px;bottom:246px;left:52px;width:270px;box-shadow:16px 0 35px rgba(0,0,0,.35)}.xk-save-state{display:none}.xk-project-name{max-width:220px}.xk-timeline-body{grid-template-columns:92px minmax(0,1fr)}.xk-track-label{padding:0 7px}.xk-track-label b{max-width:48px}}
@media(max-width:620px){body.xiko-full #xiko-view{left:0}.xk-topbar{padding:0 8px}.xk-brand{min-width:auto}.xk-brand b{display:none}.xk-project-name{max-width:none}.xk-editor-grid{grid-template-columns:45px minmax(0,1fr)}.xk-toolrail{padding-inline:3px}.xk-toolrail button span{display:none}.xk-toolrail button{min-height:43px}.xk-library{left:45px;bottom:220px}.xk-timeline-body{grid-template-columns:76px}.xk-canvas-meta{display:none}.xk-stage-wrap{padding:8px}}
@media(prefers-reduced-motion:reduce){body.xiko-full #xiko-view,.xk-stage{transition:none!important}}

/* Figma 6067:2 fidelity pass · measured from the source frame (2550×901).
   The canvas and timeline are neutral/light; media wells stay near-black and
   cyan is reserved for state and action, never used as decorative gradients. */
#xiko-view{
  --xk-bg:#fff;--xk-panel:#0e0e11;--xk-panel-2:#17181c;--xk-well:#090c14;
  --xk-line:rgba(9,12,20,.10);--xk-line-2:rgba(9,12,20,.16);
  --xk-text:#090c14;--xk-body:#313942;--xk-muted:#7f8992;--xk-blue:#00cae0;
  color-scheme:light;font-size:13px;
}
body.xiko-full #xiko-view{left:56px;grid-template-rows:56px minmax(0,1fr) clamp(200px,24vh,232px);align-content:start;background:#fff;transition:none}
body.xiko-full{overflow:hidden}
#xiko-view{-webkit-user-select:none;user-select:none}
#xiko-view input,#xiko-view textarea,#xiko-view [contenteditable=true]{-webkit-user-select:text;user-select:text}
body.xiko-full .main-content{margin-left:56px;padding:0;overflow:hidden;transition:none}
body.xiko-full .main-content::before{display:none}
.nav-xiko-ip,.xk-brand-mark{background:transparent;box-shadow:none}
.xk-topbar{gap:10px;padding:0 16px;border-color:#e2e7ea;background:#fff;color:#090c14}
.xk-brand{min-width:82px;font-size:13px;letter-spacing:.06em}.xk-brand-mark{width:28px;height:28px;border-radius:8px;color:#fff}
.xk-project-name input{height:30px;color:#111820;font-size:13px;font-weight:600}.xk-project-name input:hover{background:#f2f5f7}.xk-project-name input:focus{border-color:#c2cfd6;background:#fff}
.xk-save-state{color:#78848d;font-size:11px}
.xk-top-actions button{color:#26323a}.xk-top-actions button:hover,.xk-canvas-bar button:hover,.xk-transport button:hover,.xk-timeline-toolbar button:hover{background:#edf2f4}
.xk-top-actions .xk-export{height:34px;padding:0 16px;border:0;background:#00cae0;color:#071117;font-size:12px;font-weight:700;box-shadow:none}
.xk-top-actions .xk-export:hover{background:#09bfd3}

.xk-editor-grid{grid-template-columns:64px minmax(260px,19vw) minmax(420px,1fr) 244px;border-color:#dfe5e8}
.xk-editor-grid.library-collapsed{grid-template-columns:64px minmax(420px,1fr) 244px}
.xk-toolrail{gap:2px;padding:8px 5px;background:#090c14;border-color:rgba(255,255,255,.08)}
.xk-toolrail button{min-height:49px;border-radius:7px;color:#8f969e;font-size:11px}.xk-toolrail button i{font-size:19px}.xk-toolrail button:hover{color:#fff;background:#171b23}.xk-toolrail button.is-active{color:#00cae0;background:#171b23}
.xk-library{background:#0e0e11;border-color:rgba(255,255,255,.08)}
.xk-library-head{padding:14px 14px 11px;border-color:rgba(255,255,255,.08)}
.xk-library-head span,.xk-inspector header span,.xk-export-card header span{font-size:10px}.xk-library-head h2,.xk-inspector header h2,.xk-export-card header h2{font-size:14px}
.xk-panel{padding:13px}.xk-upload,.xk-primary,.xk-export-card>button{min-height:38px;border-color:rgba(255,255,255,.14);border-radius:7px;background:#1b1d22;font-size:12px}.xk-primary{border-color:#00cae0!important;background:#00cae0!important;color:#071117!important}
.xk-cost-note{border-color:rgba(0,202,224,.22);border-radius:7px;background:rgba(0,202,224,.07);font-size:10px}.xk-cost-note i{color:#00cae0}
.xk-assets{gap:8px}.xk-asset{border-radius:7px;background:#17181c}.xk-asset b{font-size:10px}.xk-asset small{font-size:10px}

.xk-compose{grid-template-rows:40px minmax(0,1fr) 48px;background:#eff3f5;color:#090c14}
.xk-canvas-bar{padding:0 14px;border-color:#dfe5e8;background:#fff}.xk-canvas-bar button{height:28px;border-color:#dbe2e6;border-radius:7px;color:#26343d;font-size:11px}.xk-canvas-meta{color:#7b8790;font-size:10px}.xk-zoom{color:#65737d;font-size:10px}
.xk-stage-wrap{padding:20px;background:#eff3f5}.xk-stage{height:min(100%,567px);background:#090c14;box-shadow:none}
.xk-stage video,.xk-stage>img{background:#090c14}.xk-stage-empty{gap:9px;background:#090c14;color:#88939b}.xk-stage-empty span{display:grid;place-items:center;width:56px;height:56px;background:transparent}.xk-stage-empty span img{display:block;width:52px;height:52px;object-fit:contain;pointer-events:none}.xk-stage-empty b{color:#dce3e7;font-size:12px}.xk-stage-empty small{font-size:10px}
.xk-stage .xk-preview-video{z-index:1;opacity:0;visibility:hidden;background:#090c14;transition:none;pointer-events:none}
.xk-stage .xk-preview-video.is-active{opacity:1;visibility:visible}
.xk-stage>#xk-preview-image{z-index:1}.xk-text-layer{z-index:2}.xk-stage-empty{z-index:3}
.xk-transport{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:0 12px;border-color:#e0e6e9;background:#fff;color:#29353d}
.xk-transport-left,.xk-transport-center,.xk-transport-right{display:flex;align-items:center;gap:6px}.xk-transport-center{justify-content:center}.xk-transport-right{justify-content:flex-end}.xk-transport button{height:30px;min-width:30px;color:#29353d}
.xk-transport .xk-play{width:32px;height:32px;background:#090c14;color:#fff}.xk-transport #xk-timecode{margin:0;color:#697781;font:600 10px/1 Inter,monospace}.xk-transport #xk-fit{font-size:10px}

.xk-inspector{padding:0 12px 12px;border-color:rgba(255,255,255,.08);background:#0e0e11;color:#eef2f4;color-scheme:dark}.xk-inspector header{padding:14px 0 11px;border-color:rgba(255,255,255,.09)}.xk-inspector-empty{font-size:10px}.xk-field{font-size:10px}.xk-inspector-actions button{font-size:11px}.xk-budget-card{border-radius:7px}

.xk-timeline{position:relative;display:block;border-top:1px solid #dce3e6;background:#fff;color:#202a31;overflow:hidden}
.xk-timeline-toolbar{position:absolute;inset:0 0 auto 0;z-index:3;height:42px;padding:0 12px;border-color:#e0e6e9;background:#fff;color:#53616b}.xk-timeline-toolbar button{height:28px;min-width:28px;color:#53616b}.xk-timeline-toolbar button>small,.xk-timeline-toolbar button.is-active{color:#009fb2}.xk-timeline-toolbar button.is-active{background:#e9f9fb}.xk-toolbar-divider{background:#dbe2e6}.xk-timeline-summary{font-size:10px}.xk-timeline-toolbar>i{color:#7c8891}.xk-timeline-toolbar input[type=range]{accent-color:#00aabc}.xk-timeline-fit{margin-left:4px}.xk-timeline-zoom-label{width:48px;color:#71808a;font:600 10px/1 Inter,sans-serif;text-align:right;white-space:nowrap}
.xk-timeline-body{position:absolute;inset:42px 0 0;display:grid;grid-template-columns:154px minmax(0,1fr);min-height:0;overflow:hidden}.xk-track-label-column{grid-template-rows:var(--xk-ruler-height) minmax(0,1fr);border-color:#e0e5e8;background:#fff}.xk-track-label-ruler{border-color:#e2e7ea;background:#fff}.xk-track-labels{min-height:0;background:#fff;overflow:hidden;overscroll-behavior:contain}.xk-track-label{height:43px;border-color:#e8ecee;color:#59666f;font-size:10px}.xk-track-label.is-target-track{color:#087f8d;background:#effbfc;box-shadow:inset 2px 0 #00cae0}.xk-track-actions button{color:#9aa4aa}.xk-track-actions button:hover{color:#26323a;background:#edf2f4}.xk-track-actions button.is-active{color:#009fb2}
.xk-ruler{height:25px;border-color:#e2e7ea;background:#fff;cursor:ew-resize;touch-action:none}.xk-ruler-mark{border-color:#ccd5da;color:#818c94;pointer-events:none}.xk-track-row{height:43px;border-color:#e8ecee;background-color:#fafbff;background-image:linear-gradient(90deg,rgba(9,12,20,.035) 1px,transparent 1px);cursor:ew-resize;touch-action:none}.xk-track-row.is-drop-target{background-color:#ecfafc;box-shadow:inset 0 0 0 1px #00b7cc}
.xk-clip{box-sizing:border-box;min-width:1px;top:4px;height:35px;border-color:#89aebb;border-radius:4px;background:#c2cfd6;box-shadow:none;color:#10242c}.xk-clip[data-kind=text]{border-color:#baa8ce;background:#d9cce6;color:#342342}.xk-clip[data-kind=caption]{border-color:#d0a83b;background:#f6df8a;color:#493a12}.xk-clip[data-kind=audio]{border-color:#8dbbaa;background:#b9d8cc;color:#173c30}.xk-clip.is-selected{border-color:#009caf;box-shadow:0 0 0 1px #00cae0}.xk-clip-main b{font-size:10px}.xk-playhead{background:#111820}.xk-playhead span{background:#111820;box-shadow:none}.xk-marquee{position:absolute;z-index:9;border:1px solid #00aabd;border-radius:3px;background:rgba(0,202,224,.14);pointer-events:none}.xk-track-row.is-asset-drop-target{background-color:#e7fbfd;box-shadow:inset 0 0 0 2px #00b6ca}

@media(max-width:1280px){.xk-editor-grid{grid-template-columns:58px 240px minmax(360px,1fr)}.xk-editor-grid.library-collapsed{grid-template-columns:58px minmax(360px,1fr)}}
@media(max-width:900px){body.xiko-full #xiko-view{grid-template-rows:52px minmax(0,1fr) 220px}.xk-library{top:52px;bottom:220px;width:min(270px,calc(100vw - 52px))}.xk-transport-left{visibility:hidden}}
@media(max-width:620px){body.xiko-full .main-content{margin-left:0}body.xiko-full #xiko-view{left:0}.xk-project-name{min-width:0}.xk-library{width:min(270px,calc(100vw - 45px))}}
@media(max-width:480px){.xk-topbar{gap:4px;padding:0 7px}.xk-top-actions{gap:2px}.xk-top-actions #xk-undo,.xk-top-actions #xk-redo{display:none}.xk-top-actions .xk-export{width:34px;padding:0}.xk-top-actions .xk-export span{display:none}.xk-project-name input{padding-inline:5px}.xk-transport-right #xk-fit span{display:none}.xk-timeline-toolbar{padding-inline:5px}.xk-timeline-summary{display:none}}

/* XIKO editor polish · one-language labels, unified light work panels and
   Premiere-style transport targets. Keep these scoped so Binder/SPHERE never
   inherit the editor palette. */
.xk-topbar{position:relative;height:56px;box-sizing:border-box;gap:10px;padding-inline:16px}
.xk-brand{min-width:auto;flex:none;gap:8px;padding-right:12px;border-right:1px solid #e2e7ea;font-size:14px;letter-spacing:.025em;line-height:1}
.xk-brand-mark{width:30px;height:30px;color:#fff}
.xk-project-name{width:min(280px,24vw);min-width:140px;max-width:280px;flex:0 1 280px}
.xk-project-name input{height:34px;padding-inline:10px;font-size:14px;line-height:34px;text-overflow:ellipsis}
.xk-save-state{position:absolute;left:50%;top:50%;z-index:1;margin:0;transform:translate(-50%,-50%);pointer-events:none}
.xk-top-actions{position:relative;z-index:2}
.xk-zoom{display:grid;grid-template-columns:29px 44px 29px;align-items:center;justify-items:center;gap:0;height:30px;box-sizing:border-box;margin-left:auto;margin-right:0;overflow:hidden;border:1px solid #d7e0e5;border-radius:8px;background:#fff;color:#5f6f79;font-size:10px}
#xiko-view .xk-zoom button{display:grid;place-items:center;justify-content:center;box-sizing:border-box;width:29px;min-width:29px;height:28px;padding:0;border:0;border-radius:0;background:transparent;color:#53636d}
#xiko-view .xk-zoom button i{display:grid;place-items:center;width:14px;height:14px;font-size:13px;line-height:1;-webkit-text-stroke:.18px currentColor}
#xiko-view .xk-zoom button i:before{display:block;line-height:1;transform:none}
#xiko-view .xk-zoom button:first-child{border-right:1px solid #e2e8eb}
#xiko-view .xk-zoom button:last-child{border-left:1px solid #e2e8eb}
#xiko-view .xk-zoom button:hover{background:#f0f4f6;color:#13212a}
.xk-zoom>span{display:grid;place-items:center;width:44px;height:28px;color:#43535d;font-size:10px;font-weight:650;line-height:1;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.xk-editor-grid{grid-template-columns:68px minmax(290px,20vw) minmax(420px,1fr) 272px}
.xk-editor-grid.library-collapsed{grid-template-columns:68px minmax(420px,1fr) 272px}
#xiko-view .xk-toolrail{gap:2px;padding:7px 5px;border-color:#dfe5e8;background:#fff;scrollbar-width:thin;scrollbar-color:#c5cdd2 transparent;color-scheme:light}
#xiko-view .xk-toolrail button{box-sizing:border-box;min-height:50px;flex:0 0 50px;gap:4px;border-radius:8px;color:#687680;font:600 10px/1.15 Inter,Pretendard,sans-serif}
#xiko-view .xk-toolrail button i{font-size:19px;line-height:1}
#xiko-view .xk-toolrail button span{display:block;max-width:100%;overflow:visible;color:inherit;white-space:nowrap}
#xiko-view .xk-toolrail button:hover{background:#f0f4f6;color:#17232c}
#xiko-view .xk-toolrail button.is-active{background:#e9f9fb;color:#009fb2}
.xk-library{background:#fff;color:#1b2730;color-scheme:light;border-color:#dfe5e8}
.xk-library-head{min-height:54px;box-sizing:border-box;padding:0 16px;border-color:#e3e8eb}
.xk-library-head h2,.xk-inspector header h2,.xk-export-card header h2{margin:0;color:#17232c;font-size:16px;font-weight:700;letter-spacing:-.01em}
#xiko-view .xk-library-head button{color:#75828c}
#xiko-view .xk-library-head button:hover{background:#edf2f4;color:#17232c}
.xk-panel{padding:16px;scrollbar-color:#c5cdd2 transparent}
.xk-media-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
#xiko-view .xk-library .xk-upload,#xiko-view .xk-library .xk-project-open,#xiko-view .xk-library .xk-primary{min-height:42px;border-color:#d6dde1;border-radius:8px;background:#f6f8f9;color:#1e2a33;font-size:12px}
#xiko-view .xk-media-actions .xk-upload,#xiko-view .xk-media-actions .xk-project-open{min-width:0;margin:0;padding:0 7px;gap:6px;white-space:nowrap}
#xiko-view .xk-media-actions .xk-upload span,#xiko-view .xk-media-actions .xk-project-open span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#xiko-view .xk-library .xk-upload:hover,#xiko-view .xk-library .xk-project-open:hover{border-color:#aebbc2;background:#edf2f4;color:#111a21}
#xiko-view .xk-library .xk-primary{border-color:#00cae0!important;background:#00cae0!important;color:#071117!important}
.xk-cost-note{border-color:#bceaf0;border-radius:8px;background:#effbfc;color:#53636c;font-size:11px}
.xk-cost-note i{color:#00aabd}.xk-cost-note span{color:#53636c}
.xk-panel-copy{color:#66747d;font-size:12px}
.xk-coming{color:#74818a;font-size:12px}.xk-coming b{color:#1f2b33}
.xk-assets{gap:10px}
.xk-asset{padding:8px;border-color:#e0e5e8;border-radius:8px;background:#f7f9fa}
.xk-asset:hover{border-color:#aebdc4;background:#f0f4f6}
.xk-asset[draggable=true]{cursor:grab}.xk-asset.is-dragging{opacity:.48;cursor:grabbing}
.xk-asset b{color:#1d2932;font-size:11px}.xk-asset small{color:#74818a;font-size:10px}.xk-assets-empty{color:#7b8790;font-size:12px}
.xk-library .xk-field{color:#58666f;font-size:12px}
.xk-library .xk-field input:not([type=range]),.xk-library .xk-field textarea{border-color:#d6dde1;background:#fff;color:#17232c}
.xk-library .xk-field select,.xk-inspector .xk-field select{width:100%;height:34px;border:1px solid #d6dde1;border-radius:7px;background:#fff;color:#17232c}
.xk-caption-panel{gap:12px}.xk-caption-add-row{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:end;gap:8px}.xk-caption-add-row .xk-field{margin:0}.xk-caption-add-row .xk-primary{min-height:36px}.xk-caption-file-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.xk-caption-file-actions #xk-caption-import{grid-column:1/-1}.xk-caption-file-actions button{min-height:36px;border-color:#d6dde1;background:#f6f8f9;color:#25313a;font-size:11px}.xk-caption-style-field{display:grid;gap:10px;padding-top:4px;border-top:1px solid #e3e8eb}
.xk-transport{position:relative}
.xk-transport-left,.xk-transport-right{gap:8px}
.xk-transport-left{grid-column:1}
.xk-transport-right{grid-column:3}
.xk-transport-center{position:absolute;left:50%;top:50%;z-index:2;width:30px;height:30px;gap:0;overflow:visible;transform:translate(-50%,-50%);pointer-events:none}
.xk-transport button{height:34px;min-width:34px}
#xiko-view .xk-transport .xk-play{display:grid;place-items:center;width:30px;height:30px;min-width:30px;padding:0;border:0;border-radius:50%;outline:0;background:#090c14;color:#fff;line-height:1;box-shadow:none;transform:none;transition:background-color .12s ease,box-shadow .12s ease;pointer-events:auto}
#xiko-view .xk-transport .xk-play:hover{border-radius:50%;background:#202a35;box-shadow:none;transform:none}
#xiko-view .xk-transport .xk-play:active{border-radius:50%;background:#2a3541;box-shadow:none;transform:none}
#xiko-view .xk-transport .xk-play:focus-visible{border-radius:50%;outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #18b9cc}
#xiko-view .xk-transport .xk-play i{display:grid;place-items:center;width:13px;height:13px;font-size:12px;line-height:1;transform:none;pointer-events:none}
#xiko-view .xk-transport .xk-play i:before{display:block;transform:translateX(.65px)}
#xiko-view .xk-transport .xk-play.is-pause-icon i:before{transform:none}
.xk-transport #xk-timecode{position:absolute;left:39px;top:50%;width:188px;margin:0;color:#52616b;font:600 11px/1 Inter,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateY(-50%);pointer-events:none}
.xk-transport #xk-fit{font-size:11px}
.xk-inspector{padding:0 16px 16px;border-color:#dfe5e8;background:#fff;color:#1b2730;color-scheme:light;scrollbar-color:#c5cdd2 transparent}
.xk-inspector header{display:flex;align-items:center;min-height:54px;box-sizing:border-box;padding:0;border-color:#e3e8eb;margin-bottom:16px}
.xk-inspector-empty{min-height:190px;color:#77848d;font-size:12px;line-height:1.5}
.xk-inspector-empty i{color:#9aa6ad;font-size:30px}
.xk-inspector .xk-field{color:#58666f;font-size:12px}
.xk-inspector .xk-field input:not([type=range]),.xk-inspector .xk-field textarea{border-color:#d6dde1;background:#fff;color:#17232c}
.xk-inspector input[type=range]{accent-color:#00b8cc}
#xiko-view .xk-inspector-actions button{min-height:38px;border-color:#d6dde1;background:#f6f8f9;color:#25313a;font-size:12px}
#xiko-view .xk-inspector-actions button:hover{background:#edf2f4}
.xk-budget-card{border-color:#bceaf0;border-radius:8px;background:#effbfc}
.xk-budget-card>span{color:#009caf;font-size:11px}.xk-budget-card b{color:#213039;font-size:12px}.xk-budget-card small{color:#66747d;font-size:10px}
.xk-export-pop{background:rgba(18,27,33,.28);backdrop-filter:blur(5px)}
.xk-export-card{width:min(440px,calc(100vw - 40px));padding:20px;border-color:#d9e0e4;border-radius:16px;background:#fff;color:#1c2831;box-shadow:0 24px 70px rgba(29,42,50,.20)}
.xk-export-card header{align-items:center;margin-bottom:18px}.xk-export-card header button{color:#77848d}.xk-export-card header button:hover{background:#edf2f4;color:#1c2831}
.xk-export-spec{gap:8px}.xk-export-spec span{padding:11px;border-color:#e1e6e9;border-radius:9px;background:#f5f7f8}
.xk-export-spec b{color:#7b8790;font-size:10px}.xk-export-spec em{color:#1e2a33;font-size:12px;font-weight:650}
.xk-export-safe{border-color:#bceaf0;background:#effbfc}.xk-export-safe>i{color:#00aabd}.xk-export-safe b{color:#26353e;font-size:12px}.xk-export-safe span{color:#607079;font-size:11px}
#xiko-view .xk-export-card>button{min-height:42px;border-color:#d6dde1;background:#fff;color:#26323a;font-size:12px}
#xiko-view .xk-export-card>button:hover{border-color:#aebbc2;background:#f2f5f7}
#xiko-view .xk-export-card>#xk-export-mp4{border-color:#00bfd4;background:#00cae0;color:#071117}
#xiko-view .xk-export-card>#xk-export-mp4:hover{background:#08bfd2}
#xiko-view .xk-export-card>button:disabled{border-color:#e0e5e8;background:#f5f7f8;color:#a4adb3;cursor:not-allowed}
.xk-export-card>p{color:#71808a;font-size:10px;line-height:1.55}.xk-export-progress{border-color:#dbe2e6;background:#f6f8f9}.xk-export-progress span{color:#596973}.xk-export-progress button{border-color:#d6dde1;background:#fff;color:#293740}
.xk-sequence-card .xk-field,.xk-export-quality{color:#596872}.xk-sequence-card select,.xk-sequence-card input,.xk-export-quality select{width:100%;height:40px;box-sizing:border-box;padding:0 10px;border:1px solid #d6dde1;border-radius:8px;background:#fff;color:#17232c;font:600 12px/1 Inter,Pretendard,sans-serif}
.xk-sequence-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.xk-sequence-actions button{min-height:42px;border:1px solid #d6dde1;border-radius:8px;background:#fff;color:#26323a}.xk-sequence-actions .xk-primary{border-color:#00bfd4;background:#00cae0;color:#071117}
.xk-export-quality{padding:12px;border:1px solid #e1e6e9;border-radius:10px;background:#f7f9fa}.xk-export-quality small{color:#71808a;font-variant-numeric:tabular-nums}
.xk-mp4-capability{display:flex;gap:10px;padding:12px;border:1px solid #dce3e7;border-radius:10px;background:#f8fafb}.xk-mp4-capability>i{flex:none;margin-top:1px;color:#667984;font-size:18px}.xk-mp4-capability div{display:flex;min-width:0;flex-direction:column;gap:4px}.xk-mp4-capability b{color:#26353e;font-size:11px}.xk-mp4-capability span{color:#667780;font-size:10px;line-height:1.5}
.xk-timeline-end{position:absolute;top:0;z-index:1;height:25px;padding-left:7px;color:#61717a;font:700 10px/25px Inter,Pretendard,sans-serif;white-space:nowrap;transform:translateX(-1px);pointer-events:none}.xk-timeline-end i{position:absolute;left:0;top:0;width:2px;height:100%;border-radius:2px;background:#00afc3}
.xk-track-label{font-size:11px}.xk-clip-main b{font-size:10px}
.xk-clip.is-copy-ghost{z-index:6;opacity:.72;border-style:dashed;pointer-events:none}

/* Status metadata is operational information, not decorative microcopy. */
.xk-save-state{font-size:13px;font-weight:600}
.xk-canvas-meta{font-size:12px;font-weight:600}
.xk-timeline-summary{font-size:12px;font-weight:600}
.xk-budget-card small{font-size:12px;line-height:1.5}
.xk-export-spec b{font-size:12px}.xk-export-spec em{font-size:14px}

@media(max-width:1440px){
  .xk-editor-grid{grid-template-columns:62px minmax(260px,22vw) minmax(360px,1fr)}
  .xk-editor-grid.library-collapsed{grid-template-columns:62px minmax(360px,1fr)}
  .xk-inspector{display:none}
}
@media(max-width:900px){
  body.xiko-full #xiko-view{grid-template-rows:52px minmax(0,1fr) 200px}
  .xk-editor-grid{grid-template-columns:52px minmax(0,1fr)}
  .xk-library{position:absolute;z-index:12;top:52px;bottom:200px;left:52px;width:min(300px,calc(100vw - 52px));box-shadow:16px 0 35px rgba(0,0,0,.35)}
  .xk-timeline-body{grid-template-columns:104px minmax(0,1fr)}
  .xk-track-label{padding-inline:8px}
  .xk-track-actions button[data-track-more]{display:none}
  .xk-stage-empty small{max-width:82%;line-height:1.5;white-space:normal}
  .xk-toast{bottom:214px}
}
@media(max-width:620px){
  .xk-editor-grid{grid-template-columns:44px minmax(0,1fr)}
  #xiko-view .xk-toolrail{padding-inline:3px}#xiko-view .xk-toolrail button{min-height:43px;flex-basis:43px}#xiko-view .xk-toolrail button span{display:none}
  .xk-library{left:44px;width:min(286px,calc(100vw - 44px))}
  .xk-timeline-body{grid-template-columns:76px minmax(0,1fr)}
  .xk-track-label{gap:5px;padding-inline:7px}.xk-track-label b{max-width:46px}
  .xk-track-actions{display:none}
  .xk-stage-wrap{padding:8px}
  .xk-transport #xk-timecode{width:auto;min-width:76px;font-size:10px}
  .xk-timecode-total{display:none}
}
@media(max-height:760px) and (min-width:621px){
  #xiko-view .xk-toolrail{gap:1px;padding-block:4px}
  #xiko-view .xk-toolrail button{min-height:42px;flex-basis:42px;gap:2px;font-size:10px}
  #xiko-view .xk-toolrail button i{font-size:17px}
}

/* Adjustable editor regions, a single ruler metric, and legible timeline microcopy. */
#xiko-view{
  --xk-library-width:320px;
  --xk-inspector-width:272px;
  --xk-timeline-height:232px;
  --xk-ruler-height:29px;
}
body.xiko-full #xiko-view{grid-template-rows:56px minmax(0,1fr) var(--xk-timeline-height)}
.xk-editor-grid{grid-template-columns:68px var(--xk-library-width) 6px minmax(420px,1fr) 6px var(--xk-inspector-width)}
.xk-toolrail{grid-column:1}.xk-library{grid-column:2}.xk-panel-resizer-library{grid-column:3}.xk-compose{grid-column:4}.xk-panel-resizer-inspector{grid-column:5}.xk-inspector{grid-column:6}
.xk-editor-grid.library-collapsed{grid-template-columns:68px minmax(420px,1fr) 6px var(--xk-inspector-width)}
.xk-editor-grid.library-collapsed .xk-panel-resizer-library{display:none}
.xk-editor-grid.library-collapsed .xk-compose{grid-column:2}
.xk-editor-grid.library-collapsed .xk-panel-resizer-inspector{grid-column:3}
.xk-editor-grid.library-collapsed .xk-inspector{grid-column:4}
.xk-panel-resizer{position:relative;z-index:10;background:#f7f9fa;touch-action:none}
.xk-panel-resizer::after{content:"";position:absolute;border-radius:999px;background:#cbd5da;transition:background-color .12s,transform .12s}
.xk-panel-resizer-library,.xk-panel-resizer-inspector{width:6px;cursor:col-resize}
.xk-panel-resizer-library::after,.xk-panel-resizer-inspector::after{inset:calc(50% - 24px) 2px auto;width:2px;height:48px}
.xk-panel-resizer-timeline{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:row-resize;background:transparent}
.xk-panel-resizer-timeline::after{left:calc(50% - 30px);top:3px;width:60px;height:2px}
.xk-panel-resizer:hover::after,.xk-panel-resizer:focus-visible::after,#xiko-view.is-resizing .xk-panel-resizer.is-active::after{background:#00aabd;transform:scale(1.08)}
.xk-panel-resizer:focus-visible{outline:2px solid #00aabd;outline-offset:-2px}
#xiko-view.is-resizing{cursor:col-resize}#xiko-view.is-resizing.is-resizing-timeline{cursor:row-resize}
#xiko-view.is-resizing iframe,#xiko-view.is-resizing video{pointer-events:none}
.xk-timeline-body{--xk-ruler-height:29px}
.xk-ruler{height:var(--xk-ruler-height)}
.xk-ruler-mark{height:var(--xk-ruler-height);padding-left:5px;color:#64737c;font:600 11px/28px Inter,Pretendard,sans-serif;font-variant-numeric:tabular-nums}
.xk-timeline-end{height:var(--xk-ruler-height);padding:0 6px 0 8px;background:#fff;color:#394952;font:750 11px/29px Inter,Pretendard,sans-serif}
.xk-timeline-end i{height:100%}
.xk-timeline-toolbar button>small{font-size:10px}.xk-timeline-zoom-label{width:54px;font-size:10px}.xk-field>small{font-size:10px}
.xk-library-head span,.xk-inspector header span,.xk-export-card header span{font-size:10px}
.xk-assets{position:relative;user-select:none}
.xk-asset.is-selected{border-color:#00aabd;background:#e8f9fb;box-shadow:0 0 0 1px #00bfd4}
.xk-asset-marquee{position:fixed;z-index:300;border:1px solid #00aabd;border-radius:4px;background:rgba(0,202,224,.14);pointer-events:none}

@media(max-width:1440px) and (min-width:901px){
  .xk-editor-grid{grid-template-columns:62px var(--xk-library-width) 6px minmax(360px,1fr)}
  .xk-toolrail{grid-column:1}.xk-library{grid-column:2}.xk-panel-resizer-library{display:block;grid-column:3}.xk-compose{grid-column:4}
  .xk-panel-resizer-inspector,.xk-inspector{display:none}
  .xk-editor-grid.library-collapsed{grid-template-columns:62px minmax(360px,1fr)}
  .xk-editor-grid.library-collapsed .xk-compose{grid-column:2}
}
@media(max-width:900px){
  body.xiko-full #xiko-view{grid-template-rows:52px minmax(0,1fr) min(var(--xk-timeline-height),42vh)}
  .xk-panel-resizer-library,.xk-panel-resizer-inspector{display:none!important}
  .xk-editor-grid,.xk-editor-grid.library-collapsed{grid-template-columns:52px minmax(0,1fr)}
  .xk-toolrail{grid-column:1}.xk-compose,.xk-editor-grid.library-collapsed .xk-compose{grid-column:2}
}
@media(max-width:620px){
  .xk-editor-grid,.xk-editor-grid.library-collapsed{grid-template-columns:44px minmax(0,1fr)}
}

/* XIKO stays light regardless of the global XITA theme. */
#xiko-view{color-scheme:light;--xk-panel:#fff;--xk-panel-2:#f6f8f9}
#xiko-view .xk-library{container-type:inline-size}
#xiko-view .xk-caption-panel{padding:16px;display:flex;flex-direction:column;gap:16px}
#xiko-view .xk-caption-panel[hidden]{display:none}
#xiko-view .xk-caption-panel .xk-field{margin:0;gap:8px;font-size:12px;color:#52616b}
#xiko-view .xk-caption-panel textarea{min-height:96px;line-height:1.6;padding:12px;resize:vertical}
#xiko-view .xk-caption-panel textarea::placeholder{color:#87929a}
#xiko-view .xk-caption-add-row{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:end;gap:12px;margin:0}
#xiko-view .xk-caption-add-row input{height:40px}
#xiko-view .xk-caption-add-row .xk-primary{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;min-height:40px;margin:0;padding:0 12px;white-space:nowrap}
#xiko-view .xk-caption-file-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 0;padding-top:20px;border-top:1px solid #e3e8eb}
#xiko-view .xk-caption-file-button{appearance:none;display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-width:0;height:40px;margin:0;padding:0 10px;border:1px solid #d6dde1;border-radius:8px;background:#f6f8f9;color:#26343d;font:600 12px/1.2 Inter,Pretendard,"Noto Sans KR",sans-serif;cursor:pointer;white-space:nowrap}
#xiko-view #xk-caption-import{grid-column:1/-1}
#xiko-view .xk-caption-file-button i{flex:none;font-size:16px;line-height:1}
#xiko-view .xk-caption-file-button:hover{border-color:#aebbc2;background:#edf2f4;color:#111a21}
#xiko-view .xk-caption-file-button:active{background:#e3ebef}
#xiko-view .xk-caption-panel button:focus-visible,#xiko-view .xk-caption-panel input:focus-visible,#xiko-view .xk-caption-panel textarea:focus-visible{outline:2px solid #009fb2;outline-offset:2px}
#xiko-view .xk-caption-panel .xk-panel-copy{margin:0;color:#6b7982;font-size:12px;line-height:1.5;word-break:keep-all}
@container(max-width:280px){
  #xiko-view .xk-caption-file-actions{grid-template-columns:minmax(0,1fr)}
  #xiko-view .xk-caption-add-row{grid-template-columns:64px minmax(0,1fr);gap:8px}
  #xiko-view .xk-caption-add-row .xk-primary{padding-inline:8px;gap:5px}
}
#xiko-view .xk-timeline-body{grid-template-columns:208px minmax(0,1fr)}
#xiko-view .xk-track-label{gap:5px;padding-inline:8px;box-sizing:border-box}
#xiko-view .xk-track-row{box-sizing:border-box}
#xiko-view .xk-track-code{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:22px;border-radius:4px;background:#eaf1f8;color:#3c617c;font:700 11px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
#xiko-view .xk-track-label[data-track-group=audio] .xk-track-code{background:#e6f3ed;color:#34765b}
#xiko-view .xk-track-label>i{font-size:13px;flex:none}
#xiko-view .xk-track-label>b{min-width:0;font-size:11px}
#xiko-view .xk-track-actions{gap:0}
#xiko-view .xk-track-label.is-audio-start,#xiko-view .xk-track-row.is-audio-start{border-top:2px solid #b9c8d1}
@media(max-width:900px){
  #xiko-view .xk-library{grid-column:auto;bottom:min(var(--xk-timeline-height),42vh)}
  #xiko-view .xk-timeline-body{grid-template-columns:132px minmax(0,1fr)}
  #xiko-view .xk-track-label>b,#xiko-view .xk-track-label>i{display:none}
  #xiko-view .xk-track-actions{margin-left:auto}
  #xiko-view .xk-track-actions button[data-track-more]{display:grid}
}

/* The editor is fixed to the viewport, so its left edge must follow the
   actual sidebar state instead of inheriting the old icon-only 56px offset.
   Otherwise an expanded sidebar masks the project and library columns. */
/* Track menus use the same light surface as the editor, including global dark mode. */
#xiko-view .xk-track-menu{width:176px;padding:6px;border:1px solid #dfe5e8;background:#fff;color:#26323a;box-shadow:0 8px 28px rgba(25,42,54,.16);color-scheme:light}
#xiko-view .xk-track-menu button{min-height:36px;gap:10px;padding:0 10px;color:#26323a;font-size:12px}
#xiko-view .xk-track-menu button:hover:not(:disabled){background:#edf2f4}
#xiko-view .xk-track-menu button.is-danger{color:#c13845}
#xiko-view .xk-track-menu button:disabled{color:#8a959d;opacity:1}
#xiko-view #xk-new-project{gap:5px;padding:0 9px;white-space:nowrap;border:1px solid #dfe5e8;border-radius:8px;font-size:12px}
#xiko-view .xk-project-picker{margin-bottom:14px}
#xiko-view .xk-project-picker select{width:100%;min-width:0;height:36px;padding:0 8px;border:1px solid #dfe5e8;border-radius:8px;background:#fff;color:#26323a;font:inherit;text-overflow:ellipsis}
@media(max-width:760px){#xiko-view #xk-new-project{width:34px;padding:0}#xk-new-project span{display:none}}
body.xiko-full #xiko-view{position:absolute;inset:0;left:0;transition:none}
body.xiko-full .main-content{margin-left:256px;transition:margin-left .44s cubic-bezier(.4,0,.2,1)}
body.xiko-full .main-content.sidebar-icon{margin-left:56px}
@media(max-width:620px){
  body.xiko-full .main-content,body.xiko-full .main-content.sidebar-icon{margin-left:0;transition:none}
}