.container{grid-gap:20px;display:grid;grid-template-areas:"ti st" "pr su" "tl tl";grid-template-columns:500px 1fr;grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;min-width:1000px;padding:20px}.container .title{grid-area:ti}.container .preview{grid-area:pr}.container .timeline{grid-area:tl;margin:0 -20px -20px}.container .timeline canvas{display:block;height:200px;width:100%}.container .subs{grid-area:su}.container .sub-tools{display:flex;grid-area:st}.container .sub-tools .btn{margin-left:10px}.spacer{flex:1}.preview #audio-loading{display:none;font-size:80%;margin-top:10px;opacity:.6}.preview #audio-select,.preview #srt-select{display:none}.preview .shortcuts .shortcut{align-items:center;color:#283547;display:flex;font-size:80%;margin-bottom:5px}.preview .shortcuts .shortcut .key{border:2px solid #2f3f54;border-radius:3px;font-weight:700;min-width:2.5em;padding:2px 6px;text-align:center}.preview .shortcuts .shortcut .action{flex:1;margin-left:10px}.subs{grid-gap:10px;display:grid;grid-template:"t t" "s d" "x x";grid-template-columns:1fr -webkit-min-content;grid-template-columns:1fr min-content;grid-template-rows:-webkit-min-content -webkit-min-content 1fr;grid-template-rows:min-content min-content 1fr}.subs .text{grid-area:t}.subs .text input{width:100%}.subs .speaker{align-items:center;color:#fff;display:flex;grid-area:s}.subs .speaker .label{margin-right:40px;opacity:.6}.subs .speaker label{font-weight:700;padding:0 20px 0 5px}.subs .delete{grid-area:d}.subs .delete .btn{opacity:0}.btn{background-color:#ac6c82;border-radius:5px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:inherit;cursor:pointer;padding:10px 20px;text-decoration:none;transition:background-color .3s;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.btn:hover{background-color:#a35c74}.btn.btn-sm{padding:5px 10px}input[type=number],input[type=text]{background-color:#364861;border:2px solid #364861;border-radius:5px;box-shadow:none;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:#fff;font:inherit;font-weight:700;outline:none;padding:5px 10px}input[type=number]::-webkit-input-placeholder,input[type=text]::-webkit-input-placeholder{color:#455c7b}input[type=number]:focus,input[type=text]:focus{border-color:#da727e}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:#455c7b;color:#ffbc67;font-family:system-ui,sans-serif}