*{box-sizing:border-box}:root{--bg-color: #f0f2f5;--text-color: #0f0f0f;--text-sub-color: #606060;--card-bg-color: #ffffff;--border-color: #e0e0e0;--border-color-strong: #ccc;--primary-color: #065fd4;--primary-bg-color: #e8f0fe;--primary-hover-color: #174ea6;--primary-hover-bg-color: #d2e3fc;--secondary-bg-color: #f2f2f2;--secondary-hover-bg-color: #e5e5e5;--floating-bg: rgba(255, 255, 255, .9);--input-bg-color: #fff;--shadow-color: rgba(0,0,0,.1);--placeholder-bg: #f9f9f9;--volume-control-bg: #f9f9f9;--setting-box-bg: #fdfdfd;--toast-bg: #333;--toast-text: #fff}@media (prefers-color-scheme: dark){:root{--bg-color: #0f0f0f;--text-color: #f1f1f1;--text-sub-color: #aaaaaa;--card-bg-color: #212121;--border-color: #3e3e3e;--border-color-strong: #555;--primary-color: #3ea6ff;--primary-bg-color: #263850;--primary-hover-color: #60b6ff;--primary-hover-bg-color: #3e5570;--secondary-bg-color: #303030;--secondary-hover-bg-color: #404040;--floating-bg: rgba(33, 33, 33, .9);--input-bg-color: #121212;--shadow-color: rgba(0,0,0,.5);--placeholder-bg: #181818;--volume-control-bg: #303030;--setting-box-bg: #2a2a2a;--toast-bg: #f1f1f1;--toast-text: #0f0f0f}}body{font-family:Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:20px}.app-header{background-color:#14487f;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;margin:-20px -20px 15px;box-shadow:0 2px 4px var(--shadow-color)}.header-logo{font-weight:700;font-size:1.2rem;letter-spacing:.5px}.header-help-link{color:#fff;text-decoration:none;font-size:.85rem;font-weight:700}.header-help-link:hover{text-decoration:underline}@media screen and (max-width: 1000px){.header-description{display:none}}h1{font-size:1.2rem;margin:0 0 15px}#time-display{font-size:18px;color:var(--text-color);margin-top:10px}#time-input{margin-top:20px}#video-container{width:100%;height:fit-content;display:flex;align-items:flex-end;justify-content:center;gap:20px;border:1px solid var(--border-color);background-color:var(--card-bg-color);padding:20px;border-radius:8px;box-shadow:0 2px 4px var(--shadow-color)}#video-container.layout-vertical,#video-container.vertical-layout{flex-direction:column!important;align-items:center}#video-container.layout-vertical>div,#video-container.vertical-layout>div{width:var(--v-width, 100%)!important;height:auto!important}#video-container.layout-horizontal{flex-direction:row!important;align-items:flex-end!important}#range-container{display:flex;justify-content:center}#positon_bar{width:40%}#player,#player2{width:100%;height:auto;aspect-ratio:640 / 390}#MainArea,#SubArea{display:flex;width:50%;flex-basis:50%;height:fit-content;flex-direction:column}#CenterLine{flex-basis:16px;cursor:col-resize;background-color:var(--primary-color)}#floating-controls{position:fixed;bottom:0;left:0;width:100%;background-color:var(--floating-bg);box-shadow:0 -2px 8px #00000026;padding:10px 20px;display:flex;justify-content:center;align-items:center;gap:25px;flex-wrap:nowrap;z-index:1001;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .3s ease-in-out}#floating-controls:not(.collapsed):not(.is-at-end):after{content:"";position:absolute;right:40px;top:0;bottom:0;width:40px;background:linear-gradient(to right,transparent,var(--floating-bg));pointer-events:none;z-index:1}#floating-controls-content{display:flex;align-items:center;flex-wrap:nowrap;flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-top:130px;margin-top:-110px;pointer-events:none}#floating-controls-content>*{pointer-events:auto}#floating-panel-toggle-btn{flex-shrink:0;position:relative;z-index:10}.floating-group{display:flex;align-items:center;gap:8px}#floating-controls label{font-weight:500;font-size:.9em;color:#3c4043}#floating-controls input[type=range]{width:100px}#floating-controls input[type=number]{width:70px;text-align:center;height:36px;border-radius:4px;border:1px solid #ccc}@media screen and (max-width: 750px){#video-container:not(.layout-horizontal):not(.layout-vertical){width:100%;height:fit-content;display:flex;flex-direction:column;align-items:center;border:1px solid var(--border-color)}#video-container:not(.layout-horizontal):not(.layout-vertical) #MainArea{display:flex;width:100%!important;flex-basis:auto!important;height:fit-content;flex-direction:column}#video-container:not(.layout-horizontal):not(.layout-vertical) #SubArea{display:flex;width:100%!important;flex-basis:auto!important;height:fit-content;flex-direction:column}#positon_bar{display:none}.settings-container{flex-direction:column}.settings-container>.control-group{min-width:0;box-sizing:border-box}#floating-controls{padding:8px 10px 4px;gap:5px;justify-content:space-between;width:100%}#floating-controls:not(.collapsed):not(.is-at-end):after{bottom:16px;right:50px}#floating-controls-content{flex:1;min-width:0;gap:4px;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--border-color-strong) transparent}#floating-controls-content::-webkit-scrollbar{height:10px;display:block}#floating-controls-content::-webkit-scrollbar-track{background:#0000000d;border-radius:5px;margin:0 8px}#floating-controls-content::-webkit-scrollbar-thumb{background-color:var(--border-color-strong);border-radius:5px;border:2px solid transparent;background-clip:padding-box}#floating-controls-content::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}.floating-group{gap:4px!important;padding:0 4px!important}#floating-controls input[type=range]{width:60px!important;flex-shrink:1}#floating-controls input[type=number]{width:50px!important}#floating-positon-label{min-width:0!important;font-size:.75rem!important;white-space:nowrap}.floating-separator{margin:0 2px!important;height:20px!important}.floating-icon{height:18px!important}#floating-controls .action-btn,#floating-controls .time-adjust-btn{padding:0 6px;height:32px;font-size:11px}#floating-panel-toggle-btn{align-self:center;margin-bottom:8px}}.control-group{margin-top:20px;padding:15px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--card-bg-color);box-shadow:0 2px 4px var(--shadow-color)}.video-controls{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:15px}.popout{position:fixed!important;bottom:20px;z-index:1000;box-shadow:0 4px 8px #0000004d;background:#000;resize:both;overflow:hidden}.settings-container{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;align-items:flex-start;min-height:415px}.settings-container>.control-group{flex:1;min-width:300px;margin-top:0}.settings-container>.control-group.collapsed{flex:0 0 auto;min-width:0}.settings-main-panel{flex:2;display:flex;flex-direction:column;min-width:300px}.settings-main-panel>.control-group{margin-top:0;width:100%}.settings-tabs{display:flex;background-color:#f1f3f4;border-bottom:1px solid #ccc;border-radius:8px 8px 0 0;padding:6px 6px 0}.tab-btn{flex:1;padding:10px 5px;color:#666;cursor:pointer;border:1px solid transparent;border-bottom:none;background-color:#f8f9fa;background:none;font-size:.9rem;font-weight:700;border-radius:5px 5px 0 0;margin-right:2px;transition:background-color .2s,color .2s;outline:none}.tab-btn:hover{background-color:#0000000d;color:#14487f}.tab-btn.active{color:#14487f;background-color:#fff;border-color:#ccc;border:1px solid #ccc;border-bottom:1px solid #fff;margin-bottom:-1px;border-bottom-color:#14487f}.settings-main-panel>.control-group{display:none;border:none;margin-top:0}.settings-main-panel>.control-group.active{display:block}.settings-main-panel>.control-group>.toggle-header{display:none}.settings-main-panel>.control-group.active>.group-content{display:block!important;padding:0}.toggle-header{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;white-space:nowrap}.control-group.collapsed .group-content{display:none}.control-group.collapsed .toggle-header{margin-bottom:0}.control-group.collapsed{order:1}#memo-view{min-height:100px;max-height:300px;overflow-y:auto;white-space:pre-wrap;cursor:text;border:1px solid var(--border-color-strong);padding:5px;background:var(--input-bg-color);border-radius:4px;color:var(--text-color)}#memo-edit{width:100%;height:300px;box-sizing:border-box;padding:5px;border-radius:4px;border:1px solid var(--border-color-strong);resize:vertical;background-color:var(--input-bg-color);color:var(--text-color)}.timestamp-link{color:var(--primary-color);text-decoration:none;cursor:pointer;font-weight:700}.timestamp-link:hover{text-decoration:underline}.video-placeholder{width:100%;height:auto;aspect-ratio:640 / 390;display:none;flex-direction:column;align-items:center;justify-content:center;background-color:var(--placeholder-bg);border:1px dashed var(--border-color-strong);color:var(--text-sub-color);border-radius:8px}.video-placeholder p{margin:0 0 15px;font-weight:700}.video-placeholder input[type=text]{padding:8px;width:80%;max-width:300px;margin-bottom:10px;border:1px solid var(--border-color-strong);border-radius:4px;background-color:var(--input-bg-color);color:var(--text-color)}#toast{visibility:hidden;min-width:250px;background-color:var(--toast-bg);color:var(--toast-text);text-align:center;border-radius:4px;padding:10px;position:fixed;z-index:1001;left:50%;transform:translate(-50%);bottom:80px;font-size:16px;opacity:0;transition:opacity .3s}#toast.show{visibility:visible;opacity:1}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--border-color);border-radius:3px}input[type=range]::-moz-range-track{height:6px;background:var(--border-color);border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--primary-color);margin-top:-5px;box-shadow:0 2px 4px #0003;transition:transform .1s}input[type=range]::-moz-range-thumb{height:16px;width:16px;border:none;border-radius:50%;background:var(--primary-color);box-shadow:0 2px 4px #0003;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover,input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}input[type=range]:focus{outline:none}button{padding:6px 12px;border:1px solid var(--border-color-strong);border-radius:4px;background-color:var(--card-bg-color);cursor:pointer;font-size:13px;color:var(--text-color);transition:background-color .2s,box-shadow .2s,border-color .2s;font-family:inherit}button:hover{background-color:var(--secondary-hover-bg-color);border-color:var(--text-sub-color);box-shadow:0 1px 2px var(--shadow-color)}button:active{background-color:var(--border-color);box-shadow:inset 0 1px 3px var(--shadow-color)}input[type=text],input[type=number],select{padding:6px 10px;border:1px solid var(--border-color-strong);border-radius:4px;font-size:14px;transition:border-color .2s,box-shadow .2s;font-family:inherit;box-sizing:border-box;background-color:var(--input-bg-color);color:var(--text-color)}input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus,#memo-edit:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #065fd433;outline:none}input[type=checkbox],input[type=radio]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary-color);vertical-align:text-bottom}.volume-control-container{display:flex;align-items:center;gap:8px;border:1px solid var(--border-color);padding:2px 12px;border-radius:20px;background-color:var(--volume-control-bg);transition:box-shadow .2s,border-color .2s}.volume-control-container:hover{border-color:var(--border-color-strong);box-shadow:0 1px 2px var(--shadow-color)}.volume-control-container .volume-slider{width:80px;margin:0}.volume-control-container .volume-label{min-width:30px;text-align:right;font-size:.9em;color:var(--text-sub-color);font-variant-numeric:tabular-nums}.volume-control-container .mute-btn{border:none;background:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1;color:var(--text-color)}.volume-popover{display:none;position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:10px;border:1px solid var(--border-color-strong);border-radius:4px;box-shadow:0 2px 10px var(--shadow-color);z-index:1000;margin-bottom:8px;background:var(--card-bg-color);color:var(--text-color)}.volume-popover.floating{margin-bottom:10px}.volume-popover input[type=range]{-moz-appearance:slider-vertical;appearance:slider-vertical;-webkit-appearance:slider-vertical;writing-mode:bt-lr;width:12px!important;height:100px!important;cursor:pointer}.volume-badge{position:absolute;top:-2px;right:-5px;font-size:9px;font-weight:700;background-color:var(--primary-color);color:#fff;min-width:12px;height:12px;border-radius:3px;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:1px;line-height:1;box-shadow:0 1px 2px #0003}.time-adjust-btn{min-width:48px;height:36px;border-radius:18px;border:1px solid var(--border-color);background-color:var(--card-bg-color);color:var(--text-color);font-weight:500;font-size:14px;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s;display:inline-flex;align-items:center;justify-content:center;padding:0 10px}.time-adjust-btn:hover{background-color:var(--secondary-bg-color);color:var(--text-color);box-shadow:0 1px 3px var(--shadow-color);border-color:var(--border-color-strong)}.time-adjust-btn:active{background-color:var(--secondary-hover-bg-color);box-shadow:none}.action-btn{height:36px;padding:0 16px;border-radius:4px;border:none;background-color:var(--primary-bg-color);color:var(--primary-color);font-weight:500;font-size:14px;cursor:pointer;transition:background-color .2s,color .2s}.action-btn:hover{background-color:var(--primary-hover-bg-color);color:var(--primary-hover-color)}.action-btn.secondary{background-color:var(--secondary-bg-color);color:var(--text-color)}.action-btn.secondary:hover{background-color:var(--secondary-hover-bg-color);color:var(--text-color)}.video-setting-panel{display:flex;flex-direction:column;gap:15px}.video-setting-box{border:1px solid var(--border-color);border-radius:8px;padding:15px;background-color:var(--setting-box-bg)}.video-setting-box h4{margin-top:0;margin-bottom:10px;font-size:1.1em;color:var(--text-color);border-bottom:1px solid var(--border-color);padding-bottom:8px}.video-setting-box .video-controls{margin-top:0}#floating-controls.collapsed{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:none;width:auto;left:auto;right:10px;bottom:10px;padding:0!important}#floating-controls.collapsed #floating-panel-toggle-btn{width:32px;height:32px;border-radius:50%;font-size:14px;box-shadow:0 3px 8px var(--shadow-color);padding:0}.popout{position:fixed!important;bottom:60px;z-index:1000;box-shadow:0 4px 8px #0000004d;background:#000;resize:both;overflow:hidden}#MainArea.popout{left:20px;right:auto;width:320px}#SubArea.popout{right:20px;left:auto;width:320px}#floating-controls-content>.floating-group{padding:0 7.5px}.floating-separator{height:30px;margin-left:5px;margin-right:5px;border-left:2px solid rgba(50,50,50,.2)}.floating-icon{height:25px}.tooltip-container{position:relative;display:inline-flex;align-items:center;gap:5px;margin-left:10px}.tooltip-text{visibility:hidden;width:220px;background-color:var(--toast-bg);color:var(--toast-text);text-align:center;border-radius:4px;padding:8px;position:absolute;z-index:1002;bottom:135%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s;font-size:.75rem;pointer-events:none;box-shadow:0 2px 8px #0003;line-height:1.4}.tooltip-text:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--toast-bg) transparent transparent transparent}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}