body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-family:'Arial Black','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro',sans-serif;background-color:#f0f0f0;margin:0;padding:0;height:100vh;overflow:hidden}#app-container{width:100%;height:100vh;position:relative;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:scale(.9);transition:opacity .6s cubic-bezier(.4, 0, .2, 1),transform .6s cubic-bezier(.4, 0, .2, 1)}#video-container{width:100%;height:22.5vw;max-height:50vh;background-color:#0f0;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:0 solid #000;font-weight:300}#subtitle-wrapper{display:flex;align-items:center;justify-content:center;position:absolute;bottom:10%;width:100%;height:auto}#debug-info{position:fixed;left:0;bottom:0;width:100%;background-color:rgba(0,0,0,.8);color:#0f0;font-family:monospace;font-size:16px;padding:10px;box-sizing:border-box;white-space:pre-wrap;max-height:100px;overflow-y:auto;z-index:9999;word-wrap:break-word;line-height:1.3;display:none}#subtitle{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;transform-origin:center center;background-color:transparent;color:#000;font-size:5vw;max-width:90%;word-wrap:break-word;white-space:nowrap;line-height:1.5;display:inline-block;top:0;left:0;overflow:visible;z-index:100;text-shadow:4px 0 2px #fff,0 -4px 2px #fff,0 4px 2px #fff,-3px 0 2px #fff,3px 0 2px #fff,0 -3px 2px #fff,0 3px 2px #fff,-2px 0 2px #fff,2px 0 2px #fff,0 -2px 2px #fff,0 2px 2px #fff,-1px 0 0 #fff,1px 0 0 #fff,0 -1px 0 #fff,0 1px 0 #fff,-4px -4px 2px #fff,4px -4px 2px #fff,-4px 4px 2px #fff,4px 4px 2px #fff,-3px -3px 2px #fff,3px -3px 2px #fff,-3px 3px 2px #fff,3px 3px 2px #fff,-2px -2px 2px #fff,2px -2px 2px #fff,-2px 2px 2px #fff,2px 2px 2px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,6px 0 6px #fff,-6px 0 6px #fff,0 6px 6px #fff,0 -6px 6px #fff,6px 6px 6px #fff,-6px -6px 6px #fff,6px -6px 6px #fff,-6px 6px 6px #fff,8px 0 8px #fff,-8px 0 8px #fff,0 8px 8px #fff,0 -8px 8px #fff}#subtitle .volume-line{display:block;width:100%;text-align:center}.max-volume-text{position:relative;text-shadow:8px 0 2px #fff,0 -8px 2px #fff,0 8px 2px #fff,-8px 0 2px #fff,8px 0 2px #fff,0 -3px 2px #fff,0 3px 2px #fff,-2px 0 2px #fff,2px 0 2px #fff,0 -2px 2px #fff,0 2px 2px #fff,-1px 0 0 #fff,1px 0 0 #fff,0 -1px 0 #fff,0 1px 0 #fff,-4px -4px 2px #fff,4px -4px 2px #fff,-4px 4px 2px #fff,4px 4px 2px #fff,-3px -3px 2px #fff,3px -3px 2px #fff,-3px 3px 2px #fff,3px 3px 2px #fff,-2px -2px 2px #fff,2px -2px 2px #fff,-2px 2px 2px #fff,2px 2px 2px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,6px 0 6px #fff,-6px 0 6px #fff,0 6px 6px #fff,0 -6px 6px #fff,6px 6px 6px #fff,-6px -6px 6px #fff,6px -6px 6px #fff,-6px 6px 6px #fff,8px 0 8px #fff,-8px 0 8px #fff,0 8px 8px #fff,0 -8px 8px #fff}#controls{position:absolute;bottom:0;width:100%;background-color:rgba(255,255,255,.9);padding:10px;box-sizing:border-box;z-index:200;top:calc(22.5vw + 2px);height:calc(100vh - 22.5vw - 2px);display:flex;flex-direction:column;justify-content:flex-start}#controls.visible{top:calc(22.5vw + 2px);height:calc(100vh - 22.5vw - 2px)}.top-row{display:flex;align-items:center;justify-content:flex-start;width:100%;gap:20px;margin-bottom:10px}#app-name{font-family:'Arial Black','Hiragino Kaku Gothic Pro','Noto Sans JP',sans-serif;font-size:36px;font-weight:700;color:#df177b;white-space:nowrap}.button-container{display:flex;gap:10px}#status-container{display:flex;align-items:center;margin-left:10px}#status{margin-left:10px;margin-right:10px;font-size:20px;font-weight:700;color:#333}#volume-indicator{width:100px;height:10px;background-color:#e0e0e0;margin-right:10px;border-radius:5px;overflow:hidden}#volume-bar{width:0;height:100%;background-color:#4caf50;transition:width .1s ease}.shake{animation:shake .5s infinite}@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px,0) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0)}100%{transform:translate(1px,-2px) rotate(-1deg)}}#volume-settings{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding:15px;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);align-self:flex-start;width:calc(100% - 30px);max-width:970px}.setting-row{display:flex;align-items:center;gap:10px;width:100%}.setting-row>*{display:flex;align-items:center}.setting-row label{text-align:right;font-weight:700;margin-right:5px;white-space:nowrap;color:#333;justify-content:flex-end}.setting-row label[for$="-threshold"]{min-width:120px}.setting-row label[for$="-size"]{min-width:60px}.setting-row label[for$="-font"]{min-width:70px}.setting-row label[for$="-color"]{min-width:30px}.setting-row input[type=number],.setting-row select{width:100%;max-width:60px;padding:5px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.setting-row input[type=color]{width:80px;height:30px;padding:0}.setting-row select{width:100%;max-width:300px;padding:5px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-family:inherit;font-weight:400}.setting-row select option{font-family:'Nico Moji','Noto Sans JP',sans-serif;font-size:16px;padding:5px;font-weight:400}.setting-row:not(:last-child){border-bottom:1px solid #e0e0e0;padding-bottom:10px}#toggle-volume-settings{margin-left:10px;background-color:#6c757d}#save-volume-settings{margin-top:10px;padding:5px 10px;font-size:16px}.status-and-volume-container{display:flex;align-items:center;margin-left:10px}.button-container button{font-size:18px;padding:8px 15px;font-weight:700}#help-btn{width:35px;height:35px;border-radius:50%;background-color:#51a9e0;color:#fff;font-weight:700;font-size:20px;border:none;margin-top:7px;margin-right:15px;cursor:pointer;transition:background-color .3s ease;display:flex;align-items:center;justify-content:center}#help-btn:hover{background-color:#4169e1}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5);justify-content:center;align-items:center}.modal.show{display:flex}.modal-content{background-color:#fefefe;margin:0;padding:30px;border-radius:10px;width:90%;max-width:1000px;position:absolute;left:50%;transform:translateX(-50%);box-shadow:0 4px 6px rgba(0,0,0,.1)}.close-btn{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer;position:absolute;top:10px;right:20px}.close-btn:hover{color:#333}.help-section{margin-bottom:20px;font-family:'Hiragino Kaku Gothic Pro','Noto Sans JP',sans-serif}.help-section h2{font-family:'Arial Black','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro',sans-serif}.help-section h3{font-family:'Arial Black','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro',sans-serif;color:#df177b;border-bottom:2px solid #df177b;padding-bottom:5px;margin-bottom:10px}.help-section ul{list-style-type:disc;padding-left:30px;margin-bottom:15px}.help-section a{color:#007bff;text-decoration:none;font-weight:700}.help-section a:hover{text-decoration:underline}.modal-footer{display:flex;justify-content:center;margin-top:20px;padding-top:10px;border-top:1px solid #e0e0e0}.ok-btn{background-color:#df177b;color:#fff;border:none;padding:10px 30px;font-size:18px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.ok-btn:hover{background-color:#b01462}.login-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.95);display:flex;justify-content:center;align-items:center;opacity:1;transition:opacity .6s cubic-bezier(.4, 0, .2, 1),transform .6s cubic-bezier(.4, 0, .2, 1),visibility .6s;z-index:1000;transform:scale(1)}.login-screen.login-transition{opacity:0;transform:scale(1.1);visibility:hidden}.login-content{background-color:#fff;padding:50px;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,.1);text-align:center;max-width:600px;width:90%}.login-footer{margin-top:0;font-size:18px;color:#666;font-family:'Hiragino Kaku Gothic Pro','Noto Sans JP',sans-serif}.app-title{font-family:'Arial Black','Hiragino Kaku Gothic Pro','Noto Sans JP',sans-serif;color:#df177b;font-size:48px;margin-bottom:20px;font-weight:700}.app-description{color:#333;font-size:24px;margin-bottom:30px}.login-form{display:flex;flex-direction:column;gap:20px}#login-username{padding:15px;margin-top:10px;font-size:18px;border:2px solid #df177b;border-radius:8px;text-align:center;width:70%;margin-left:auto;margin-right:auto;display:block;box-sizing:border-box}#login-username:focus{outline:0;box-shadow:0 0 10px rgba(223,23,123,.5)}#login-password{padding:15px;margin-top:10px;font-size:18px;border:2px solid #df177b;border-radius:8px;text-align:center;width:70%;margin-left:auto;margin-right:auto;display:block;box-sizing:border-box}#login-btn{background-color:#df177b;color:#fff;border:none;padding:15px;font-size:20px;border-radius:8px;width:40%;cursor:pointer;transition:background-color .3s ease}#login-btn:hover{background-color:#b01462}.error-message{color:red;font-size:18px;margin-top:10px;height:30px}.remember-password{display:flex;align-items:center;justify-content:center;margin:5px 0 5px 0;gap:10px}.remember-password input[type=checkbox]{width:20px;height:20px;accent-color:#df177b;cursor:pointer}.remember-password label{font-size:16px;color:#333;cursor:pointer}.login-buttons{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px}.login-buttons #help-btn{background-color:#007bff;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:20px;font-weight:700;cursor:pointer;transition:background-color .3s ease;display:flex;justify-content:center;align-items:center;margin-right:10px}.login-buttons #help-btn:hover{background-color:#0056b3}.volume-settings-buttons{display:flex;justify-content:center;gap:15px;margin-top:20px;padding-top:15px;border-top:1px solid #e0e0e0}#reset-volume-settings,#save-volume-settings{background-color:#df177b;color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}#save-volume-settings:hover{background-color:#b01462}#reset-volume-settings{margin-top:10px;background-color:#858789}#reset-volume-settings:hover{background-color:#6590ae}#notification-area{position:fixed;bottom:calc(100% - 100vh + 110px);right:10px;z-index:1000;max-width:300px;width:100%}.notification{background-color:rgba(0,0,0,.7);color:#fff;padding:12px 20px;border-radius:8px;margin-bottom:10px;opacity:0;transition:opacity .3s ease-in-out;font-size:14px;text-align:center}.notification.show{opacity:1}.notification.success{background-color:rgba(40,167,69,.8)}.notification.error{background-color:rgba(220,53,69,.8)}#volume-settings .settings-buttons{display:flex;justify-content:flex-end;align-items:center;gap:10px;width:100%;margin-top:10px}#reset-volume-settings,#save-volume-settings{font-size:14px;padding:8px 12px;height:36px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}#volume-settings .settings-buttons input[type=checkbox]{margin-right:0;margin-left:10px;vertical-align:middle;appearance:checkbox;-webkit-appearance:checkbox;width:16px;height:16px;cursor:pointer;position:relative;top:4px;accent-color:#df177b}#volume-settings .settings-buttons label{margin-left:0;margin-right:10px;vertical-align:middle;cursor:pointer;user-select:none;font-size:16px;color:#333;position:relative;top:4px}#volume-settings .settings-buttons input[type=number]{margin-left:-10px;margin-right:20px;position:relative;top:5px;width:50px}#subtitle,.help-section,body{font-family:'Noto Sans JP','M PLUS 1p','Arial Black','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro',sans-serif}.font-load-error{font-family:'Noto Sans JP',sans-serif!important;color:red;border-bottom:2px dotted red;padding-bottom:5px}@keyframes loginTransition{0%{opacity:0;transform:scale(.7) rotate(-15deg)}50%{opacity:.5;transform:scale(1.1) rotate(7deg)}100%{opacity:1;transform:scale(1) rotate(0)}}#app-container.login-transition,#login-container.login-transition{transition:opacity .6s cubic-bezier(.4, 0, .2, 1),transform .6s cubic-bezier(.4, 0, .2, 1)}@keyframes circleTransition{0%{transform:scale(0);opacity:1}70%{transform:scale(1.2);opacity:1}100%{transform:scale(2.5);opacity:0}}.circle-transition{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#df177b;border-radius:50%;z-index:1001;pointer-events:none;animation:circleTransition .8s cubic-bezier(.4,0,.2,1) forwards}.login-screen.transition-overlay{z-index:1000;opacity:1;transform:scale(1);transition:opacity .8s cubic-bezier(.4, 0, .2, 1),transform .8s cubic-bezier(.4, 0, .2, 1)}.login-screen.transition-overlay.fade-out{opacity:0;transform:scale(1.1)}#replacement-map-dialog{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5)}#replacement-map-dialog.show{display:flex;align-items:center;justify-content:center}#replacement-map-dialog .modal-content{background-color:#fefefe;padding:20px;border-radius:10px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto}#replacement-map-dialog .modal-header h2{font-family:'Arial Black','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro',sans-serif;color:#df177b;border-bottom:2px solid #df177b;padding-bottom:5px;margin-bottom:10px}#replacement-map-dialog .modal-header{position:relative;margin-bottom:20px}#replacement-map-dialog .modal-body{margin-bottom:20px}#replacement-map-dialog .modal-footer{display:flex;justify-content:center;margin-top:20px;padding-top:10px;border-top:1px solid #e0e0e0}#replacement-map-table{width:100%;border-collapse:collapse;margin-bottom:15px;text-align:center}#replacement-map-table th{background-color:#f8f9fa;border:1px solid #e0e0e0;padding:5px;text-align:center;font-family:'Arial Black','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro',sans-serif}#replacement-map-table td{border:1px solid #e0e0e0;padding:1px;text-align:center;vertical-align:middle}#replacement-map-table button,#replacement-map-table input,#replacement-map-table select{text-align:center;margin:0 auto;display:block;width:100%;box-sizing:border-box;font-size:16px}#replacement-map-table select,.delete-replacement-map-row{text-align:center;margin:0 auto;display:block;width:100%}#edit-replacement-map-btn{background-color:#48abe5;color:#fff;border-radius:4px;border:none;margin-top:10px;padding:8px 12px;font-size:15px;cursor:pointer;margin-right:10px}#edit-replacement-map-btn:hover{background-color:#107fcdf8}#add-replacement-map-row-btn{background-color:#51a9e0;color:#fff;border:none;padding:5px 20px;border-radius:8px;font-size:16px;cursor:pointer;transition:background-color .3s ease;margin-bottom:15px;width:100%;height:35px}#add-replacement-map-row-btn:hover{background-color:#107fcdf8}#save-replacement-map-btn{background-color:#df177b;color:#fff;border:none;padding:10px 30px;font-size:18px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}#save-replacement-map-btn:hover{background-color:#b01462}#replacement-map-dialog .close-btn{position:absolute;top:-30px;right:0;color:#aaa;font-size:28px;font-weight:700;cursor:pointer}#replacement-map-note{width:100%;text-align:center;font-size:15px;color:#666;margin-top:10px;line-height:1.4}#reset-settings-modal{display:none;position:fixed;z-index:1100;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}#reset-settings-modal .modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:80%;max-width:500px;border-radius:10px;text-align:center}#reset-settings-modal .modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0;padding-bottom:10px}#reset-settings-modal .modal-header h2{margin:0;font-size:18px}#reset-settings-modal .modal-header .close-btn{color:#aaa;font-size:28px;font-weight:700;cursor:pointer}#reset-settings-modal .modal-header .close-btn:focus,#reset-settings-modal .modal-header .close-btn:hover{color:#000;text-decoration:none;cursor:pointer}#reset-settings-modal .modal-body{padding:20px 0;font-size:16px}#reset-settings-modal .modal-footer{display:flex;justify-content:center;gap:15px;padding-top:10px;border-top:1px solid #e0e0e0}#reset-settings-modal .modal-footer button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:background-color .3s ease}#confirm-reset-btn{background-color:#df177b;color:#fff}#confirm-reset-btn:hover{background-color:#b01462}#cancel-reset-btn{background-color:#858789;color:#fff}#cancel-reset-btn:hover{background-color:#6590ae}.delete-replacement-map-row{background-color:#858789;color:#fff;border:none;padding:2px 8px;font-size:15px;cursor:pointer;border-radius:5px;transition:background-color .3s ease;margin-right:0}.delete-replacement-map-row:hover{background-color:#6590ae}.license-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-family:'Noto Sans JP',sans-serif}.license-table td,.license-table th{border:1px solid #e0e0e0;padding:6px;text-align:left;font-size:12px}.license-table th{background-color:#f5f5f5;font-weight:700;color:#333;text-transform:none}.license-table tr:nth-child(2n){background-color:#f9f9f9}.license-table tr:hover{background-color:#f0f0f0;transition:background-color .3s ease}.license-table a{color:#06c;text-decoration:none;transition:color .3s ease;font-weight:500}.license-table a:hover{color:#004080;text-decoration:underline}#license-dialog .modal-header h2{font-family:'Noto Sans JP',sans-serif;font-size:24px;color:#333;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #e0e0e0}#license-dialog .modal-body h3{font-family:'Noto Sans JP',sans-serif;font-size:18px;color:#444;margin-top:20px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #e0e0e0}#license-dialog .modal-body p{font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:1.6;color:#666;margin-bottom:10px}#help-dialog .secondary-btn,.help-section .secondary-btn{display:inline-block;padding:10px 20px;font-family:'Noto Sans JP',sans-serif;font-size:14px;font-weight:600;text-align:center;text-decoration:none;color:#fff;background-color:#4a90e2;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px rgba(0,0,0,.1);margin-top:10px}#help-dialog .secondary-btn:hover,.help-section .secondary-btn:hover{background-color:#357abd;transform:translateY(-2px);box-shadow:0 6px 8px rgba(0,0,0,.15)}#help-dialog .secondary-btn:active,.help-section .secondary-btn:active{transform:translateY(1px);box-shadow:0 2px 4px rgba(0,0,0,.1);background-color:#2c6ab0}.help-section .secondary-btn{margin-left:0!important;width:auto!important}#show-license-btn{background-color:#4a90e2;color:#fff;border:none;padding:10px 30px;font-size:18px;border-radius:5px;cursor:pointer;transition:background-color .3s ease}#show-license-btn:hover{background-color:#357abd}.password-input-container{position:relative;display:flex;align-items:center;width:100%}.password-input-container input{width:100%;box-sizing:border-box}.toggle-password-btn{position:absolute;right:100px;background:0 0;border:none;cursor:pointer;font-size:1.4em;color:#888;padding:0 5px;margin:0;z-index:10;opacity:.7;transition:opacity .3s ease,color .3s ease;width:auto;height:100%;display:flex;align-items:center;justify-content:center}.toggle-password-btn:hover{opacity:1}.toggle-password-btn.password-visible{color:#333;opacity:1}