/* Khorvuul Studio: the shared finish of the start page, design editor and video editor. Loaded last.
   Filled controls instead of outlined ones, sentence-case headings, one scrollbar, one hover and one selected state. */

/* ---- One scrollbar ---- */
.studio ::-webkit-scrollbar,.studio::-webkit-scrollbar{width:10px;height:10px}
.studio ::-webkit-scrollbar-button{display:none}
.studio ::-webkit-scrollbar-track,.studio ::-webkit-scrollbar-corner{background:transparent}
.studio ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:5px;background:var(--st-line-strong) padding-box}
.studio ::-webkit-scrollbar-thumb:hover{background:var(--st-faint) padding-box}
@supports not selector(::-webkit-scrollbar){.studio *{scrollbar-width:thin;scrollbar-color:var(--st-line-strong) transparent}}

/* ---- Headings: words, not shouting labels ---- */
.cs-sub h4,.cs-panel-body h4,.cv-editor h4,.cs-h,.cs-group-title,.cs-keys h3,.cs-export-options h5,.cs-pop-body h5,.cs-menu-head,.cs-color-title,.cs-r-head{text-transform:none;letter-spacing:0}
.cs-sub h4,.cs-panel-body h4,.cv-editor h4{margin:20px 0 8px;font-size:var(--st-text-sm);font-weight:600;color:var(--st-text)}
.cs-sub>h4:first-child,.cs-panel-body>h4:first-child{margin-top:4px}
.cs-sec{align-items:baseline;margin-top:20px}.cs-panel-body .cs-sec h4{margin:0 0 8px}
.cs-panel-body .cs-link,.cv-link{color:var(--st-muted);text-decoration:none;font-size:var(--st-text-xs)}.cs-panel-body .cs-link:hover,.cv-link:hover{color:var(--st-accent);text-decoration:none}
.cs-h{color:var(--st-text);font-size:var(--st-text-sm)}

/* ---- Controls ---- */
.cs-btn,.cs-top-btn,.cv-top-btn,.cv-back,.cs-act,.cl-add,.cl-page,.cv-sheet-btn,.cs-format,.cs-gradname,.cs-fontbtn,.cv-add-text,.cv-editor .btn.ghost{border-color:transparent;background-color:var(--st-control);transition:background-color .12s,box-shadow .12s,color .12s}
.cs-btn:hover,.cs-top-btn:hover,.cv-top-btn:hover,.cv-back:hover,.cs-act:hover:not(:disabled),.cl-page:hover:not(:disabled),.cv-sheet-btn:hover,.cs-format:hover,.cs-gradname:hover,.cs-fontbtn:hover,.cv-add-text:hover,.cv-editor .btn.ghost:hover{border-color:transparent;background-color:var(--st-hover)}
.cs-btn:active,.cs-top-btn:active,.cv-top-btn:active,.cv-back:active{background-color:var(--st-pressed)}
.cs-btn.cs-primary,.cs-top-primary,.cv-export-btn,.cv-editor .btn.gradient{border-color:transparent;background-color:var(--st-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.25);font-weight:650}
.cs-btn.cs-primary:hover,.cs-top-primary:hover,.cv-export-btn:hover,.cv-editor .btn.gradient:hover:not(:disabled){background-color:var(--st-accent-hover)}
.cs-btn.cs-selected,.cs-act.cs-on,.cs-format-on{background-color:var(--st-accent-soft);box-shadow:inset 0 0 0 1px var(--st-accent)}
.cs-btn{min-height:var(--st-row);padding:0 14px}.cs-btn-sm{min-height:28px;padding:3px 10px}
.cs-dialog-head .cs-btn{min-width:32px;padding:0 8px}

/* Inputs: a filled well; the line shows on hover and focus */
.studio input.input,.studio select.input,.cs-in,.cs-field :is(input:not([type=color]):not([type=range]),select,textarea),.cs-panel-search,.cs-num,.cs-hex,.cs-notes-input,.cv-select,.cv-input,.cv-number,.cv-textarea,.cv-cap-text,.cl-search,.cl-select{border-color:transparent;background-color:var(--st-field);box-shadow:inset 0 0 0 1px var(--st-line)}
.studio input.input:hover,.cs-in:hover,.cs-panel-search:hover,.cs-num:hover,.cs-hex:hover,.cv-select:hover,.cv-input:hover,.cv-number:hover,.cl-search:hover,.cl-select:hover{box-shadow:inset 0 0 0 1px var(--st-line-strong)}
.cs-in:focus,.cs-hex:focus,.cs-panel-search:focus,.cs-num:focus-within,.cs-notes-input:focus,.cv-select:focus,.cv-input:focus,.cv-number:focus,.cv-textarea:focus,.cl-search:focus,.cl-select:focus,.cs-field :is(input,select,textarea):focus,.studio input.input:focus{outline:none;border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--st-accent),0 0 0 3px var(--st-focus)}
.cs-in,.cs-panel-search,.cv-input,.cl-search,.cl-select{padding-inline:10px}
.studio select,.cv-select,.cl-select{appearance:none;-webkit-appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238a8f9c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.studio select option{background:var(--st-raised);color:var(--st-text)}
.cs-panel-search,.cl-search,.cs-home .cs-search{padding-left:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238a8f9c' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.2'/%3E%3Cpath d='m9.3 9.3 3.2 3.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center}
.cs-seg,.cs-segment{padding:3px;border-color:transparent;background:var(--st-field)}
.cs-seg button,.cs-segment button{height:26px}.cs-seg-mini button{height:24px}
.cs-seg button.cs-on,.cs-segment button.cs-on{background:var(--st-control);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.cs-swatch-btn{box-shadow:inset 0 0 0 2px var(--st-panel)}

/* Chips: one row, selected is the same everywhere */
.cs-chip,.cl-chip,.st-fontchip{height:28px;padding:0 12px;border-color:transparent;border-radius:14px;background:var(--st-control);color:var(--st-muted);font-weight:500;white-space:nowrap;transition:background-color .12s,color .12s}
.cs-chip:hover,.cl-chip:hover,.st-fontchip:hover{background:var(--st-hover);color:var(--st-text)}
.cs-chip-on,.cs-chip-on:hover,.cl-chip.cl-on,.st-fontchip.cs-on{border-color:transparent;background:var(--st-accent);color:var(--st-accent-ink);font-weight:600}
.cs-chips{gap:6px}
.cl-chips{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}.cl-chips::-webkit-scrollbar{display:none}.cl-chip{flex:none}
.cs-lz-chips{gap:6px;margin:6px 0 16px}
#cs-templates{scroll-margin-top:88px}

/* Tiles */
.cs-tile,.cs-text-preset,.cs-combo,.cs-upload,.cl-gif,.cs-lib-card,.cs-lib-element{border-color:transparent;background-color:var(--st-control)}
.cs-tile{border-radius:10px}.cs-tile-grid{gap:8px}
.cs-tile:hover,.cs-text-preset:hover,.cs-combo:hover,.cs-upload:hover,.cl-gif:hover,.cs-lib-card:hover,.cs-lib-element:hover,.cs-format:hover{border-color:transparent;box-shadow:0 0 0 2px var(--st-accent)}
.cs-text-preset{margin:8px 0;padding:12px 14px;border-radius:10px}
.cs-panel-template{gap:6px;font-size:var(--st-text-xs)}.cs-panel-template svg{border-radius:6px}.cs-panel-grid{gap:12px 10px}
.cs-lz-thumb{border-radius:8px;background:var(--st-field);box-shadow:none}
.cs-panel-template:hover .cs-lz-thumb,.cs-template:hover .cs-lz-thumb{box-shadow:0 0 0 2px var(--st-accent)}
.cs-dropzone{padding:22px 14px;border-radius:10px;background:var(--st-field)}
.cs-jump{margin-bottom:6px}.cs-jump button.cs-chip{height:28px;padding:0 12px;border-radius:14px;font-size:var(--st-text-xs)}
.cs-drawrow{margin-bottom:14px;padding-bottom:14px}.cs-drawbtns{gap:8px}

/* Menus, pop-ups */
.cs-pop,.cv-menu-list{border-radius:12px;background:var(--st-raised);box-shadow:0 18px 50px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.18)}
.cs-menu,.cv-menu-list{padding:6px}.cs-menu button,.cv-menu-item{min-height:32px;border-radius:6px}
.cs-menu button:hover:not(:disabled){background:var(--st-hover)}
.cs-dialog{border-radius:14px;border-color:var(--st-line);box-shadow:0 30px 80px rgba(0,0,0,.45)}.cs-dialog-body{padding:22px 24px}
.cs-dialog::backdrop{background:rgba(8,9,13,.62);backdrop-filter:blur(2px)}

/* ---- Top bars: the design and the video editor read as one program ---- */
.cs-top,.cv-top{gap:8px;padding:0 12px}
.cs-top-home,.cv-back{border-color:transparent;background-color:transparent;font-weight:500}.cs-top-home:hover,.cv-back:hover{background-color:var(--st-hover)}
.cs-menu-btn,.cv-menu-btn{padding:0 10px;font-size:var(--st-text-sm);color:var(--st-muted)}.cs-menu-btn:hover,.cs-menu-btn.cs-on,.cv-menu-btn:hover,.cv-menu-btn.cv-open{color:var(--st-text)}
.cs-top-ghost{background-color:transparent}
.cs-top-primary,.cv-export-btn{height:36px;padding:0 18px;font-size:var(--st-text-sm)}
.cs-project-name,.cv-name{font-size:var(--st-text-sm)}

/* ---- Rails: the same in both editors ---- */
.cs-tools,.cv-tabs{background:var(--st-bg)}
.cs-tools{gap:4px}.cv-tabs{gap:4px;padding:8px 5px}
.cs-tools .cs-rail-btn,.cv-tab{height:58px;border-radius:10px;font-size:11.5px;transition:background-color .12s,color .12s}
.cs-tools .cs-rail-btn.cs-on,.cv-tab-active{background:var(--st-raised)!important;box-shadow:0 0 0 1px var(--st-line-strong),0 1px 3px rgba(0,0,0,.12);color:var(--st-text)!important;font-weight:600}
.cs-tools .cs-rail-btn.cs-on .cs-glyph,.cv-tab-active svg{color:var(--st-accent)}
.cs-tools .cs-rail-btn.cs-on::before{display:none}

/* ---- Side panels ---- */
.cs-panel,.cs-inspector,.cv-left,.cv-right{border-color:var(--st-line)}
.cs-panel-head{padding:14px 10px 12px 16px;border-bottom:0}.cs-panel-title{gap:2px}.cs-panel-title strong{font-size:var(--st-text-lg);font-weight:650}
.cs-panel-body{padding:4px 16px 28px}
.cv-panel{padding:14px 14px 24px}.cv-panel-head{margin-bottom:10px}.cv-panel-head strong{font-size:var(--st-text-lg);font-weight:650}
.cv-right{padding:14px 16px 24px}
.cv-lib-mark{scroll-margin-top:12px}
.cv-lib-jump{height:var(--st-row);margin:8px 0;padding:0 12px;border:0;background:var(--st-accent-soft);font-size:var(--st-text-xs)}
.cs-insp-head{height:56px;padding:0 8px 0 16px;border-bottom:0}.cs-insp-title strong{font-size:var(--st-text-md)}
.cs-actions{gap:6px;padding:0 16px 14px}.cs-act{height:32px;font-size:12px}
.cs-sect-head{height:40px;padding:0 8px 0 12px}.cs-sect-toggle{font-size:var(--st-text-sm)}
.cs-sect-body{gap:10px;padding:2px 16px 16px}
.cs-layer{height:34px;border-radius:8px}
.cs-page-open{border-color:transparent;background:var(--st-field);border-radius:8px}

/* ---- Canvas ---- */
.cs-main{grid-template-rows:minmax(0,1fr) 32px}
.cs-bottom{height:32px}
.cs-stage{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 24px 70px rgba(0,0,0,.34),0 4px 12px rgba(0,0,0,.2)}
.cs-float{padding:4px;border-radius:12px;border-color:var(--st-line)}.cs-fbtn{height:32px;border-radius:8px}

/* ---- Video: the library, the viewer bar, the timeline ---- */
.cl-lib{gap:10px}
.cl-rows{gap:0}.cl-row{min-height:48px;padding:4px 6px;gap:10px;border-radius:8px}
.cl-play{width:32px;height:32px;border:0;background:var(--st-control);font-size:11px;transition:background-color .12s,color .12s}.cl-play:hover{background:var(--st-accent);color:var(--st-accent-ink)}
.cl-row-text strong,.cl-row-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cl-row-text strong{font-weight:500}
.cl-add{height:28px;padding:0 10px}.cl-add:hover:not(:disabled){background-color:var(--st-accent);color:var(--st-accent-ink)}
.cl-page{width:32px;height:28px}
.cl-count{font-family:inherit}
.cl-gif-grid{gap:8px}.cl-gif{border-radius:8px}
.cv-transport{height:48px}
.cv-time,.cv-summary,.cv-number,.cl-pager{font-variant-numeric:tabular-nums}
.cv-filter-btn{height:26px;padding:0 10px;border-radius:13px}

/* ---- Start page ---- */
.creative-root{padding:24px 28px 40px!important}
.cs-home{max-width:1360px;padding:0;border:0;background:transparent}
.cs-home-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;min-height:252px;padding:32px 36px;border:1px solid var(--st-line);border-radius:18px;overflow:hidden;background:radial-gradient(620px 340px at 88% 40%,var(--st-accent-soft),transparent 70%),var(--st-panel)}
.cs-home-lead{display:flex;flex-direction:column;gap:18px;justify-content:center;min-width:0;z-index:1}
.cs-home .cs-home-title h1{font-size:32px;font-weight:700;letter-spacing:-.02em}
.cs-home .cs-home-title p{margin-top:6px;font-size:var(--st-text-md);color:var(--st-muted)}
.cs-home-actions{gap:8px}
.cs-home-stats{margin:0;gap:4px 16px;color:var(--st-faint)}.cs-home-stats b{font-weight:650;color:var(--st-muted)}
.cs-hero-art{position:relative;min-height:188px;pointer-events:none}
.cs-hero-page{position:absolute;top:50%;left:50%;width:138px;border-radius:6px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.08);line-height:0}
.cs-hero-page svg{display:block;width:100%;height:auto}
.cs-hero-page:nth-child(1){transform:translate(-118%,-50%) rotate(-9deg)}
.cs-hero-page:nth-child(2){z-index:1;width:156px;transform:translate(-50%,-52%)}
.cs-hero-page:nth-child(3){transform:translate(18%,-50%) rotate(9deg)}
.cs-home-sec{margin-top:36px}
.cs-section-head{gap:12px;margin-bottom:14px}.cs-section-head h2{font-size:19px;font-weight:650;letter-spacing:-.01em}
.cs-home-new{grid-template-columns:minmax(0,1fr) 288px;gap:20px}
.cs-groups{display:block}.cs-size-tabs{margin:0 0 14px}
.cs-size-row{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.cs-size{flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;border-radius:12px;background:var(--st-panel);box-shadow:0 0 0 1px var(--st-line);overflow:hidden}
.cs-size:hover{background:var(--st-panel);box-shadow:0 0 0 2px var(--st-accent);transform:none}
.cs-size-icon{width:100%;height:92px;border-radius:0;background:var(--st-field)}
.cs-size-icon i{border:0;border-radius:3px;background:var(--st-line-strong);box-shadow:0 1px 3px rgba(0,0,0,.14);transition:background .12s}
.cs-size:hover .cs-size-icon{background:var(--st-accent-soft)}.cs-size:hover .cs-size-icon i{background:linear-gradient(145deg,var(--st-accent),var(--st-accent-hover))}
.cs-size-text{gap:2px;padding:10px 12px 12px}.cs-size-text strong{font-size:var(--st-text-sm);white-space:normal;line-height:1.3}
.cs-custom{align-self:start;margin-top:42px;padding:16px;border:0;border-radius:12px;box-shadow:0 0 0 1px var(--st-line)}
.cs-custom .cs-group-title{margin:0 0 12px;font-size:var(--st-text-sm);color:var(--st-text)}
.cs-custom-row{gap:8px}.cs-custom .cs-in-sel{width:72px}.cs-custom .cs-btn{width:100%;margin-top:4px}
.cs-r-box.cs-r-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.cs-empty{padding:22px;border-color:var(--st-line-strong);border-radius:12px}
.cs-r-card{border:0;border-radius:12px;box-shadow:0 0 0 1px var(--st-line)}.cs-r-card:hover{box-shadow:0 0 0 2px var(--st-accent)}
.cs-t-grid,.cs-home .cs-lz-grid{grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:18px 14px}
.cs-template{padding:0 0 4px;border:0;border-radius:0;background:transparent;overflow:visible}.cs-template:hover{transform:none;box-shadow:none}
.cs-template-preview,.cs-home .cs-lz-thumb{aspect-ratio:4/3;padding:12px;border-radius:12px;background:var(--st-panel);box-shadow:0 0 0 1px var(--st-line);transition:box-shadow .12s}
.cs-template:hover .cs-template-preview,.cs-template:hover .cs-lz-thumb{box-shadow:0 0 0 2px var(--st-accent)}
.cs-template strong{padding:9px 2px 0;font-weight:500}.cs-template small{padding:1px 2px 0;color:var(--st-faint)}
.cs-lz-head{margin:18px 0 10px;font-size:var(--st-text-md);color:var(--st-text)}
.cs-format-note{margin-top:36px}
.cs-header{padding:12px 16px;border-radius:12px}

@media(max-width:1020px){.cs-home-new{grid-template-columns:minmax(0,1fr)}.cs-home-bar{grid-template-columns:minmax(0,1fr);min-height:0;padding:24px}.cs-hero-art{display:none}.cs-custom{margin-top:0}}
@media(max-width:760px){
  .creative-root{padding:12px!important}
  .cs-home{padding:0}.cs-home-bar{padding:20px 16px;border-radius:14px}.cs-home .cs-home-title h1{font-size:26px}
  .cs-home-actions .cs-btn{flex:1 1 100%;justify-content:flex-start;white-space:normal}
  .cs-size-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-t-grid,.cs-home .cs-lz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .cs-tools{background:var(--st-panel)}.cs-tools .cs-rail-btn{height:100%;padding:0;border-radius:0;font-size:9px}.cs-tools .cs-rail-btn.cs-on{font-weight:500}
  .cs-main{grid-template-rows:minmax(0,1fr) 28px}.cs-bottom{height:28px}
  .cs-top-primary{height:32px;padding:0 10px}.cs-top{gap:2px;padding:0 6px}.cs-top .cs-top-home span,.cs-top .cs-top-save span{display:none}.cs-top-group{flex:none}.cs-top-doc{flex:1 1 40px;min-width:0}
}
@media (prefers-reduced-motion:reduce){.cs-size-icon i,.cs-btn,.cs-chip,.cl-chip,.cs-tools .cs-rail-btn,.cv-tab{transition:none}}

/* The video rail is as wide as the design rail, so every label fits. */
.cv-left{grid-template-columns:76px minmax(0,1fr)}
@media(min-width:1281px){.cv-main{grid-template-columns:calc(var(--st-panel-w) + 76px) minmax(0,1fr) 288px}}
@media(min-width:1001px) and (max-width:1280px){.cv-main{grid-template-columns:calc(var(--st-panel-w) + 52px) minmax(0,1fr) 264px}}