/* Public sample editor; no engine or private tools. */
.showcase{min-width:0;container-type:inline-size}
.preview-editor{--preview-accent:#f2a15a;background:#202020;border-radius:12px;padding:12px;color:#e8e8e8;font-size:12px;overflow:hidden}
.preview-toolbar{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;margin-bottom:8px}
.preview-tabs,.preview-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.preview-control{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;border:1px solid #414141;border-radius:6px;background:#303030;color:#d3d7da;padding:4px 6px;line-height:1.3;font-size:10px}
.preview-tab{border-radius:999px;padding:6px 8px;color:#8a9298}
.preview-tab.active{background:#4a3524;border-color:#87562e;color:#f4b67c}
.preview-logo{display:block;width:104px;height:auto;max-height:35px;object-fit:contain;margin:0 auto;flex:1 1 104px;max-width:104px;min-width:36px}
.preview-actions{margin-left:auto}
.preview-actions .preview-control{padding:6px 9px;border-radius:999px}
.preview-audio{background:#f4f4f4;border-color:#f4f4f4;color:#26313b}
.preview-export{background:var(--preview-accent);border-color:var(--preview-accent);color:#25180e}
.preview-transcript{position:relative;min-height:236px;padding:6px;border-radius:10px;background:#181818;overflow:hidden}
.preview-cue{display:grid;grid-template-columns:40px 43px minmax(0,1fr);align-items:center;gap:7px;min-height:25px;padding:4px 5px;border-radius:4px;font-size:12px;line-height:1.4}
.preview-cue>span:last-child{min-width:0;overflow-wrap:anywhere}
.preview-cue time{font-size:9px;color:#969ca2}
.preview-speaker{display:block;border-radius:999px;text-align:center;font-size:9px;line-height:1.5;padding:1px 4px;white-space:nowrap}
.speaker-orange{background:#55351c;color:#e4a76e}
.speaker-blue{background:#193847;color:#78afd0}
.preview-cue.selected{background:#392e22;box-shadow:inset 0 0 0 1px #674b2a}
.preview-cue mark{display:inline-block;padding:0 3px;background:#f2a15a;color:#241609;border-radius:3px}
.preview-pause{display:inline-block;vertical-align:middle;width:24px;height:9px;margin-left:5px;border-radius:5px;background:#47565b}
.preview-frames{display:grid;gap:3px;padding-right:10px;margin-right:6px;border-right:1px solid #3c3c3c}
.preview-frames>div{display:flex;align-items:center;gap:4px}
.preview-frames span{min-width:22px;color:#b7c1c8;font-size:10px}
.preview-frames b{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:24px;border:1px solid #414141;border-radius:999px;background:#303030;font-size:10px;font-weight:400}
.preview-tools{display:flex;justify-content:flex-end;align-items:center;gap:4px;padding:6px 0 7px}
.preview-tools .preview-control{height:24px;min-width:25px}
.preview-tools .preview-export{font-size:14px}
.preview-timeline{border-top:1px solid #353535;padding-top:6px}
.preview-wave-header{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:7px;font-size:9px;color:#93a1aa;gap:8px}
.preview-wave-header>span:first-child{color:#e7e7e7}
.preview-wave-header>span:last-child{font-size:8px;text-align:right}
.preview-wave-header>i{position:absolute;left:50%;width:30px;height:3px;border-radius:3px;background:#656565;transform:translateX(-50%)}
.preview-ruler{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:#9e9e9e;padding-bottom:6px;background:repeating-linear-gradient(90deg,#777 0 1px,transparent 1px 4%) left bottom/100% 3px no-repeat}
.preview-lanes{position:relative;margin-top:3px;overflow:hidden}
.preview-lane{position:relative;height:28px;border-bottom:1px solid #353535;overflow:hidden;background:#211e1a}
.lane-blue{background:#1b2023}
.preview-wave-bars{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1px;position:relative;z-index:1}
.preview-wave-bars b{display:block;flex:1;min-width:0;max-width:5px;border-radius:2px;background:#bd9b76}
.lane-blue .preview-wave-bars b{background:#789eaf}
.preview-wave-selection{position:absolute;inset:0 auto 0 25%;width:16%;background:#8c562a66;z-index:2;border-inline:1px solid #cb8f4c88}
.preview-cut{position:absolute;top:0;bottom:0;width:2px;background:#070707;z-index:3}
.cut-first{left:23%}.cut-second{left:73%}
.preview-playhead{position:absolute;top:0;bottom:0;left:28%;width:2px;background:#ffffff;z-index:4}
.preview-playhead::before{content:"";position:absolute;top:0;left:-3px;border-top:6px solid #ffffff;border-left:4px solid transparent;border-right:4px solid transparent}
.preview-range{height:4px;background:#636363;border-radius:999px;margin:8px 5px 3px;display:flex;justify-content:space-between;align-items:center}
.preview-range i{height:12px;width:12px;border:2px solid #aaa;background:#202020;border-radius:50%;margin:0 -5px}
.preview-tag{border:1px solid #444;background:#2c2c30;color:#bdbac1;padding:4px 7px;border-radius:6px;cursor:pointer}
.demo-intro{font-size:11px;color:#b9b3aa;margin:6px 0 8px}
.preview-transcript{height:236px;min-height:236px;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
.preview-cue{--speaker-rgb:228,167,110}
.preview-cue .preview-speaker{background:rgba(var(--speaker-rgb),.18);color:rgb(var(--speaker-rgb))}
.preview-cue.selected{background:rgba(var(--speaker-rgb),.13);box-shadow:inset 0 0 0 1px rgba(var(--speaker-rgb),.35)}
.demo-word{display:inline;padding:2px 1px;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;line-height:inherit;cursor:pointer}
.demo-word:hover{background:#ffffff16}.demo-word[aria-pressed=true]{background:#f2a15a;color:#241609}
.demo-word:focus-visible{outline-offset:1px}.demo-words{min-width:0;overflow-wrap:anywhere}
.demo-input{display:block;box-sizing:border-box;width:100%;min-height:44px;max-height:100px;resize:vertical;font:inherit;line-height:1.5;border:1px solid #c88750;border-radius:4px;background:#2b251f;color:#f2eee8;padding:3px}
.preview-frames button{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:24px;padding:0 3px;border:1px solid #414141;border-radius:999px;background:#303030;color:#ddd;font-size:10px}
.demo-shortcuts,.demo-speakers{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:11px}
.demo-shortcuts button,.demo-speakers button{border:1px solid #47413a;border-radius:5px;background:#302b26;color:#d4cbc1;font-size:10px;padding:5px 6px;line-height:1.4}
.demo-shortcuts button:hover,.demo-speakers button:hover,.preview-frames button:hover{background:#4b3828;color:#fff}
.demo-shortcuts button:disabled{opacity:.45;cursor:default}.demo-shortcuts kbd{font:inherit;font-weight:bold;color:#f4b479}
.demo-speakers{margin-top:7px;font-size:10px;color:#aaa}
.demo-speakers button{min-width:26px;padding:3px 5px;background:#292929}
.demo-speakers button:nth-of-type(1){color:#e4a76e}.demo-speakers button:nth-of-type(2){color:#78afd0}.demo-speakers button:nth-of-type(3){color:#b199e0}.demo-speakers button:nth-of-type(4){color:#84be9a}
.demo-arrows{margin-left:auto;font-size:10px}
#demoStatus{margin:9px 0 0;min-height:28px;font-size:10px;line-height:1.5;color:#ad9d8e}
.demo-column{min-width:0}
.preview-lanes{cursor:crosshair;touch-action:none}
.demo-input{display:inline-block;width:auto;max-width:100%;min-height:24px;vertical-align:baseline;padding:1px 3px;line-height:1.4}
.preview-transcript-area{position:relative}
.preview-transcript{padding-bottom:80px}
.preview-transcript-area .preview-frames{position:absolute;right:12px;bottom:12px;z-index:5;padding:5px 6px;margin:0;border:1px solid #333;border-radius:7px;background:#191919f5}
.demo-invitation{padding:10px 12px 18px}
.demo-invitation h2{font-size:clamp(15px,4.9cqi,28px);line-height:1.5;color:#fff;font-weight:400;margin:0 0 12px;text-align:center;text-wrap:balance}
.demo-invitation .demo-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.demo-invitation .demo-shortcuts button{font-size:12px;padding:6px 8px;text-align:left}
.demo-invitation kbd{font:inherit;color:#ff9a3c;margin-right:4px}
.demo-invitation .demo-speakers{font-size:12px;gap:6px}
.demo-invitation .demo-speakers>span:first-child{display:none}
.demo-invitation .demo-speakers button{font-size:11px;color:#dedede;padding:4px 6px}
.demo-invitation .demo-arrows{display:block;flex-basis:100%;font-size:12px;margin:5px 0 0;text-align:center}
.demo-invitation #demoStatus{font-size:11px;text-align:center;margin-bottom:0}
.demo-column>.features{display:flex;flex-direction:column;gap:11px;padding:22px 10px 5px}
.demo-column>.features>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px}
.demo-column>.features b{font-size:19px;color:#ff9a3c}
.demo-column>.features small{font-size:14px;color:#eee;margin:0}
@media(max-width:700px){.demo-column{max-width:480px;width:100%;margin:auto}.demo-column>.features b{font-size:18px}.demo-column>.features small{font-size:13px}}
@container(max-width:440px){
  .preview-editor{padding:9px}
  .preview-toolbar{gap:5px}
  .preview-logo{width:88px;flex-basis:88px;min-width:36px}
  .preview-tab{padding:5px 6px;font-size:9px}
  .preview-actions .preview-control{padding:5px 7px;font-size:9px}
  .preview-cue{grid-template-columns:32px 40px minmax(0,1fr);gap:5px;font-size:11px}
}
@container(max-width:355px){
  .preview-toolbar{gap:2px}
  .preview-tabs,.preview-actions{gap:2px}
  .preview-tab{font-size:8px;padding:5px 3px}
  .preview-actions .preview-control{font-size:8px;padding:5px 4px}
  .preview-logo{margin:0 auto;min-width:30px;max-width:65px}
  .preview-wave-header>i{left:40%;width:22px}
  .preview-cue{padding-inline:3px;font-size:10px}
}