*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Noto Sans JP','メイリオ',sans-serif;background-color:#f0f0f0;color:#333}header{text-align:center;padding:20px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);position:relative}h1{font-size:2.5em;margin-bottom:5px}.version{font-size:.9em;color:#666}.version a{color:#06c;text-decoration:none}.version a:hover{text-decoration:underline}.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:700px;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:#000;font-size:38px;margin-bottom:20px;font-weight:700}.app-description{color:#333;font-size:20px;margin-bottom:30px}.login-icon{width:300px;margin-bottom:20px}.login-form{display:flex;flex-direction:column;gap:20px}#login-username{padding:10px;margin-top:10px;font-size:18px;border:2px solid #000;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:10px;margin-top:10px;font-size:18px;border:2px solid #000;border-radius:8px;text-align:center;width:70%;margin-left:auto;margin-right:auto;display:block;box-sizing:border-box}#login-btn{background-color:#0c71e4;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:#0ea8fa}.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:#0c71e4;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}@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:#ff7f9c;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)}.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}main{display:flex;padding:20px;gap:20px;max-width:1400px;margin:0 auto}#comic-view{flex:1;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.comic-header{margin-bottom:20px;text-align:center;display:flex;flex-direction:column;align-items:center}.comic-title-input{font-size:2.5em;width:80%;margin-bottom:15px;padding:10px;border:1px solid #ddd;border-radius:4px;text-align:center;font-weight:700}.comic-author-input{font-size:1.5em;width:60%;padding:8px;border:1px solid #ddd;border-radius:4px;text-align:center}#comic-container{width:100%;max-width:800px;margin:0 auto;aspect-ratio:4/5;background:#fff;border:1px solid #ddd;position:relative;overflow:hidden}#comic-svg{width:100%;height:100%;position:absolute;top:0;left:0;stroke:black;stroke-width:1px;background:#fff;vector-effect:non-scaling-stroke}#tool-palette{width:300px;background:#fff;padding:10px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.tool-section{margin-bottom:15px;border:1px solid #ddd;border-radius:4px}.tool-section h3{background:#e6f2ff;padding:10px;border-bottom:1px solid #ddd;cursor:pointer}.tool-content{padding:15px}.image-select-button,button{background-color:#4a90e2;border:2px solid #3a80d2;border-radius:20px;padding:8px 16px;margin:5px;cursor:pointer;transition:all .3s ease;font-family:Arial,sans-serif;font-size:14px;outline:0;color:#fff}.image-select-button:hover,button:hover{background-color:#3a80d2;box-shadow:0 2px 5px rgba(58,128,210,.2)}.image-select-button:active,button:active{transform:scale(.95)}#image-input+label{font-weight:700;font-size:14px;padding:10px 20px;margin:10px 5px;transform:scale(1);text-transform:none;letter-spacing:1px;transition:all .3s ease;border-radius:20px}#image-input+label:hover{transform:scale(1.05)}#add-image+label,#preview-btn,#save-btn{background-color:#f0f0f0;border:2px solid #d0d0d0;color:#666;font-size:18px!important;font-weight:400;border-radius:20px;transition:all .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer}#add-image+label:hover,#preview-btn:hover,#save-btn:hover{background-color:#e0e0e0;box-shadow:0 2px 5px rgba(0,0,0,.2)}.image-select-button.primary{background-color:#ff7f9c!important;color:#fff!important;font-weight:700!important;padding:12px 24px!important;font-size:16px!important;margin:10px 0!important;box-shadow:0 4px 6px rgba(0,0,0,.1)!important;transition:all .3s ease!important;display:inline-block!important;text-align:center!important;border-radius:20px!important;cursor:pointer!important;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer}.image-select-button.primary:hover{background-color:#ff6b8e!important;box-shadow:0 6px 8px rgba(0,0,0,.15)!important;transform:translateY(-2px)!important}#add-bubble{background-color:#4a90e2;border-color:#3a80d2;color:#fff}#add-bubble:hover{background-color:#3a80d2}input[type=file]{display:none}.image-select-button{display:inline-block;text-align:center}select{width:100%;padding:5px;margin:5px 0;border:1px solid #ddd;border-radius:4px}input[type=number]{width:100%;padding:5px;margin:5px 0;border:1px solid #ddd;border-radius:4px}#font-family{max-height:300px;overflow-y:auto;padding:5px}#font-family option{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#font-family::-webkit-scrollbar{width:10px}#font-family::-webkit-scrollbar-track{background:#f1f1f1}#font-family::-webkit-scrollbar-thumb{background:#888;border-radius:5px}#font-family::-webkit-scrollbar-thumb:hover{background:#555}.comic-frame{fill:none;cursor:move;vector-effect:non-scaling-stroke}.frame-point{fill:white;stroke:black;stroke-width:2;cursor:pointer;r:6;pointer-events:all}.comic-image{pointer-events:all}.speech-bubble{cursor:move;pointer-events:all}.speech-bubble-bg{fill:white;stroke:black;stroke-width:2}.speech-bubble-text{font-family:sans-serif;user-select:none;pointer-events:all}#preview-btn,#save-btn{background-color:#4caf50;border:2px solid #45a049;color:#fff;font-weight:700;font-size:14px;box-shadow:0 4px 8px rgba(76,175,80,.3);padding:10px 20px;margin:10px 5px;border-radius:20px;text-transform:none;letter-spacing:1px;transition:all .3s ease;display:inline-block;text-align:center}#preview-btn:hover,#save-btn:hover{background-color:#45a049;box-shadow:0 6px 12px rgba(69,160,73,.4);transform:scale(1.05)}.slider-container{display:flex;align-items:center;gap:10px}.slider-container label{flex-grow:1}.slider-container input[type=range]{flex-grow:2}.slider-container span{width:30px;text-align:right;font-weight:700;color:#333}.control-panel{position:fixed;top:20px;right:20px;background:#fff;padding:15px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:1000}.control-group{display:block;flex-direction:column;gap:8px;margin-bottom:8px}.control-group label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.control-group input[type=checkbox]{width:16px;height:16px;cursor:pointer}.comic-title{font-size:36px;margin-top:100px;text-align:center;stroke:none}.comic-author{font-size:20px;margin-top:20px;text-align:center;stroke:none}.image-select-button.secondary{background-color:#4a90e2;color:#fff}.image-select-button.secondary:hover{background-color:#3a80d2}#preview-btn,#save-btn{background-color:#9370db;color:#fff;box-shadow:0 0 15px rgba(147,112,219,.5)}#preview-btn:hover,#save-btn:hover{background-color:#8a5cd6;box-shadow:0 0 20px rgba(147,112,219,.7)}.bubble-controls{padding:10px;background:#f5f5f5;border-radius:5px;margin-top:10px}.checkbox-row{display:flex;align-items:center;gap:5px;margin-bottom:5px}.checkbox-row input[type=checkbox]{margin:0}.checkbox-row label{margin:0}.checkbox-row select{width:100%;padding:5px;border:1px solid #ddd;border-radius:4px;background-color:#fff;font-size:14px}.control-group input[type=text]{width:100%;padding:8px;border:1px solid #ddd;border-radius:5px;margin-top:5px;font-size:14px}.control-group label{display:block;margin-bottom:5px;color:#333}.vertical-text{-ms-writing-mode:tb-rl;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.05em}.horizontal-text{writing-mode:horizontal-tb;letter-spacing:normal}.vertical-line{display:inline-block;white-space:nowrap}.horizontal-line{display:block}.vertical-char{unicode-bidi:bidi-override;direction:vertical-lr}.horizontal-char{unicode-bidi:normal;direction:ltr}.slider-container{display:flex;align-items:center;gap:10px;margin-bottom:10px}.slider-container label{flex-grow:1}.slider-container input[type=range]{flex-grow:2}.slider-container span{width:30px;text-align:right;font-weight:700;color:#333}.slider-container[id=border-width-container]{display:none}.tool-section h3{display:flex;justify-content:space-between;align-items:center;background:#f0f0f0;padding:8px;border-bottom:1px solid #ddd;cursor:pointer;user-select:none;font-size:14px}.tool-section h3::after{content:'▼';font-size:12px;transition:transform .3s ease}.tool-section.collapsed h3::after{transform:rotate(-90deg)}.tool-section .tool-content{max-height:600px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.tool-section.collapsed .tool-content{max-height:0;opacity:0;padding:0}.tweek-buttons{display:flex;align-items:center}.tweek-buttons button{font-size:1.2em;font-weight:700;align-items:center;cursor:pointer;padding:5px;width:50px;margin:10px 2px;transition:color .3s ease}.tweek-buttons button:hover{color:#4a90e2}#edge-btn,#monotone-btn{transition:all .3s ease}#edge-btn.active,#monotone-btn.active{background-color:#4caf50;color:#fff;box-shadow:0 0 15px rgba(76,175,80,.5);opacity:1}#edge-btn.inactive,#monotone-btn.inactive{background-color:#4169e1;color:#e0f0ff;opacity:.7;box-shadow:none}.line-effect line{stroke-linecap:round;opacity:.8}.line-effect-speed line{stroke-dasharray:10 5}.line-effect-impact line{stroke-width:3;stroke-opacity:0.6}#add-line-effect{background-color:#4a90e2;color:#fff}#add-line-effect:hover{background-color:#357abd}#line-effect-type{width:100%;padding:5px;margin-top:10px;border:1px solid #ddd;border-radius:4px}#layout-select{width:100%;padding:8px;margin-top:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.tool-link{text-decoration:none;color:#4a90e2;transition:color .3s ease}.tool-link:hover{color:#357abd;text-decoration:underline}.tool-section ul{margin-left:1em;line-height:1.6;list-style-type:disc}.tool-section ul li{margin-bottom:.5em}.credit-group{margin-bottom:30px}.credit-group:last-child{margin-bottom:0}.help-dialog-icon{display:block;max-width:150px;margin:20px auto 30px;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.header-icon{position:absolute;left:20px;top:45%;transform:translateY(-50%);max-width:100px;border-radius:10px}.help-button{position:absolute;top:26px;right:26px;background-color:#4169e1;color:#fff;border:none;border-radius:20px;padding:5px 10px;cursor:pointer;font-size:20px;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:background-color .3s ease}.help-button:hover{background-color:#3a5fdb}.control-group input[type=range]+input[type=number]{display:inline-block;margin-left:10px;width:40px;padding:2px 5px;border:1px solid #ddd;border-radius:4px;text-align:right;vertical-align:middle}.number-control{display:flex;align-items:center;gap:1px;width:100%}.number-control .label{white-space:nowrap;min-width:30px;text-align:right}.number-control input[type=range]{flex:1 1 100px;max-width:100px;margin:0 10px}.number-control input[type=number]{flex:0 0 60px;width:60px;padding:2px 5px;border:1px solid #ddd;border-radius:4px;text-align:right;margin-left:0}.bag-text{paint-order:stroke fill;stroke:var(--stroke-color,white);stroke-width:calc(var(--font-size,16px) * .3);stroke-linejoin:round;stroke-linecap:round}.notification-banner{position:fixed;top:75px;right:5%;background-color:gold;color:#333;padding:10px 20px;border-radius:20px;box-shadow:0 4px 6px rgba(0,0,0,.1);font-size:14px;z-index:1000;animation:pulse 1s infinite alternate;opacity:.9}.notification-banner.success{background-color:#4caf50;color:#fff}.notification-banner.error{background-color:#ff4136;color:#fff}@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.05);opacity:1}}#rotate-left-bubble,#rotate-right-bubble{display:inline-block;margin:0 5px;padding:5px;background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .3s ease}#rotate-left-bubble:hover,#rotate-right-bubble:hover{background-color:#e0e0e0}.rotation-handle{fill:rgba(0,123,255,0.7);stroke:white;stroke-width:2;cursor:grab}.rotation-handle:hover{fill:rgba(0,123,255,0.9);stroke-width:3}.rotation-handle:hover{fill:rgba(0,123,255,0.9);stroke-width:3}