*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-size:100%;overscroll-behavior-y:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.container{max-width:1400px;margin:0 auto;padding:12px;min-height:100vh;display:flex;flex-direction:column;position:relative}.lang-toggle{position:absolute;top:12px;right:12px;z-index:1000}.lang-switch-btn{background:transparent;border:none;color:#fffc;font-size:.85em;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s;font-family:inherit;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.1)}.lang-switch-btn:hover{color:#fff;background:#ffffff1a}header{text-align:center;color:#fff;margin-bottom:16px;padding:12px 16px}header h1{font-size:2.2em;margin-bottom:6px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}header p{font-size:1em;opacity:.9}main{flex:1;display:flex;flex-direction:column;position:relative}.input-section{background:#fff;border-radius:12px;padding:16px;box-shadow:0 6px 24px #0003;margin-bottom:16px}.input-container{display:flex;gap:8px;margin-bottom:12px}#conceptInput{flex:1;padding:10px 14px;font-size:1em;border:2px solid #e0e0e0;border-radius:8px;transition:border-color .3s}#conceptInput:focus{outline:none;border-color:#667eea}#visualizeBtn{padding:10px 20px;font-size:1em;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .2s,box-shadow .2s}#visualizeBtn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}#visualizeBtn:active{transform:translateY(0)}.examples-container{margin-top:12px}.examples-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#666;font-size:.95em}.generate-btn{padding:6px 14px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;border-radius:16px;cursor:pointer;font-size:.85em;font-weight:700;transition:all .3s}.generate-btn:hover{transform:scale(1.05);box-shadow:0 4px 16px #f093fb66}.generate-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}.example-btn{padding:6px 10px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:.8em;transition:all .2s;text-align:center}.example-btn:hover{background:#667eea;color:#fff;border-color:#667eea;transform:translateY(-1px)}.example-btn.generated{background:linear-gradient(135deg,#a8edea,#fed6e3);border-color:#a8edea}.example-btn.generated:hover{background:linear-gradient(135deg,#667eea,#764ba2)}.generating-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.generating-content{background:#fff;padding:32px 48px;border-radius:16px;text-align:center;box-shadow:0 8px 32px #0000004d}.generating-content .spinner{margin:0 auto 16px}.generating-content p{color:#667eea;font-weight:700;font-size:1.1em}.back-bar{background:#fffffff2;padding:8px 16px;border-radius:8px;margin-bottom:12px;box-shadow:0 2px 12px #0000001a}.back-btn{padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:700;transition:all .2s}.back-btn:hover{transform:scale(1.02);box-shadow:0 4px 12px #667eea66}.result-section{display:grid;grid-template-columns:1fr 10px 2fr;gap:0;flex:1;min-height:0;position:relative}.result-section.panel-collapsed{grid-template-columns:0 10px 1fr}.result-section.panel-collapsed .explanation-panel,.result-section.panel-collapsed .main-splitter{display:none}.result-section.panel-collapsed{grid-template-columns:1fr}.main-splitter{width:10px;background:transparent;cursor:col-resize;display:flex;align-items:center;justify-content:center;z-index:100;transition:background .2s}.main-splitter:hover{background:#667eea1a}.splitter-handle{width:4px;height:24px;background:#ccc;border-radius:2px;transition:background .2s}.main-splitter:hover .splitter-handle{background:#667eea}.explanation-panel{background:#fff;border-radius:12px;padding:16px;box-shadow:0 6px 24px #0003;display:flex;flex-direction:column;overflow:visible;transition:all .3s;position:relative}.panel-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.panel-header h2{color:#667eea;font-size:1.3em;flex:1}.mobile-expand-btn{background:transparent;border:none;color:#667eea;cursor:pointer;padding:4px;display:none;align-items:center;justify-content:center;transition:transform .3s}.download-btn{padding:6px 12px;background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:700;transition:all .3s;white-space:nowrap;flex-shrink:0}.download-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #38ef7d66}.explanation-content{flex:1;overflow-y:auto}.explanation-content p{line-height:1.7;color:#555;font-size:.95em;margin-bottom:12px}.formula-section{background:#f8f9fa;padding:10px;border-radius:8px;border-left:3px solid #667eea;margin-top:10px}.formula-section h4{color:#667eea;margin-bottom:8px;font-size:.85em}.formula-section .math-formula{font-size:1em;padding:4px 0}.visualization-panel{background:#fff;border-radius:12px;padding:12px;box-shadow:0 6px 24px #0003;display:flex;flex-direction:column;position:relative;overflow:hidden}.viz-header{position:absolute;top:8px;right:8px;z-index:10;display:flex;gap:4px}.detach-btn,.maximize-btn,.restore-btn,.viz-action-btn{width:28px;height:28px;background:#667eeae6;color:#fff;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.detach-btn:hover,.maximize-btn:hover,.restore-btn:hover,.viz-action-btn:hover{background:#764ba2;transform:scale(1.1)}.app-container{flex:1;width:100%;min-height:0}.app-container iframe{width:100%;height:100%;min-height:350px;border:none;border-radius:8px}.modify-section{margin-top:10px;border-top:1px solid #e0e0e0}.modify-header{padding:6px 0}.modify-toggle-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;background:transparent;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:.8em;color:#666;transition:all .2s}.modify-toggle-btn:hover{background:#f5f5f5;border-color:#667eea;color:#667eea}.modify-toggle-btn svg{flex-shrink:0}.modify-toggle-btn .chevron-icon{transition:transform .2s}.modify-toggle-btn.expanded .chevron-icon{transform:rotate(180deg)}.modify-content{padding-top:10px;overflow:hidden;transition:all .2s ease}.modify-content.hidden{display:none}.modify-label{font-size:.85em;color:#666;margin-bottom:8px}.modify-suggestions{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.suggestion-btn{padding:4px 10px;background:#f0f0f0;border:1px solid #ddd;border-radius:12px;cursor:pointer;font-size:.75em;color:#666;transition:all .2s}.suggestion-btn:hover{background:#667eea;color:#fff;border-color:#667eea}.modify-input-container{display:flex;gap:8px}.modify-input-container textarea{flex:1;padding:8px;border:1px solid #e0e0e0;border-radius:6px;font-size:.85em;resize:vertical;min-height:50px;font-family:inherit}.modify-input-container textarea:focus{outline:none;border-color:#667eea}#modifySubmitBtn{padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.85em;font-weight:700;transition:all .2s;align-self:flex-end}#modifySubmitBtn:hover{transform:scale(1.05)}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.spinner{width:36px;height:36px;border:3px solid #f3f3f3;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-timer{font-size:.9em;color:#888;margin-top:4px;font-variant-numeric:tabular-nums}#loadingMessage{text-align:center}.floating-controls{position:absolute;top:40px;right:8px;left:auto;width:280px;background:#fff;border-radius:10px;box-shadow:0 8px 32px #0000004d;z-index:100;overflow:hidden;transition:opacity .2s}.floating-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:4px 8px;cursor:move;display:flex;justify-content:space-between;align-items:center;font-size:.75em;font-weight:700;-webkit-user-select:none;user-select:none}.floating-actions{display:flex;gap:4px}.floating-action-btn{width:18px;height:18px;background:#fff3;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:.8em;display:flex;align-items:center;justify-content:center;transition:background .2s}.floating-action-btn:hover{background:#ffffff4d}.floating-body{padding:12px;max-height:400px;overflow-y:auto}#controlsContent{font-size:.9em}#controlsContent input[type=range]{width:100%;margin:4px 0}#controlsContent label{display:block;margin:8px 0 4px;font-size:.9em;color:#333}#controlsContent button{padding:6px 12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:4px;cursor:pointer;margin:4px 2px;font-size:.85em}#controlsContent button:hover{opacity:.9}#controlsContent select{padding:4px 8px;border:1px solid #ddd;border-radius:4px;margin:4px 0}#controlsContent input[type=checkbox]{margin-right:6px}.opacity-control{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #e0e0e0;font-size:.85em}.opacity-control label{color:#666;white-space:nowrap}.opacity-control input[type=range]{flex:1;margin:0}.opacity-control span{min-width:36px;text-align:right;color:#666}.controls-minimized{position:absolute;top:40px;right:8px;left:auto;padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:.85em;font-weight:700;box-shadow:0 4px 16px #0000004d;z-index:100;transition:all .2s}.controls-minimized:hover{transform:scale(1.05)}body.app-maximized .container{max-width:100%;padding:8px}body.app-maximized #mainHeader,body.app-maximized #inputSection,body.app-maximized #mainFooter{display:none}body.app-maximized .back-bar{display:block!important}body.app-maximized .result-section{grid-template-columns:1fr 10px 2.5fr;height:calc(100vh - 60px)}body.app-maximized .explanation-panel,body.app-maximized .visualization-panel{height:100%}body.app-maximized .result-section.panel-collapsed{grid-template-columns:1fr}body.app-maximized .result-section.panel-collapsed .visualization-panel{width:100%}body.app-maximized .lang-switch-btn{color:#fffc;background:#667eea80}body.app-maximized .lang-switch-btn:hover{background:#667eeacc;color:#fff}body.maximized .container{max-width:100%;padding:8px}body.maximized #mainHeader,body.maximized #inputSection,body.maximized #mainFooter{display:none}body.maximized .result-section{grid-template-columns:1fr 2.5fr;height:calc(100vh - 16px)}body.maximized .explanation-panel,body.maximized .visualization-panel{height:100%}.hidden{display:none!important}footer{text-align:center;color:#fff;padding:10px;opacity:.8;font-size:.85em}@media (max-width: 900px){.lang-toggle{top:8px;right:8px}.lang-switch-btn{font-size:.8em}.result-section{grid-template-columns:1fr;grid-template-rows:auto 10px 1fr}.main-splitter{width:100%;height:10px;cursor:row-resize;flex-direction:column}.splitter-handle{width:24px;height:4px}header h1{font-size:1.6em}.input-container{flex-direction:column}#conceptInput{font-size:16px;padding:12px 14px;min-height:48px}#visualizeBtn{min-height:48px;font-size:1.1em}.examples-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.example-btn{min-height:44px;padding:10px 12px;font-size:.85em}.generate-btn{min-height:44px;padding:10px 16px}.panel-header{flex-wrap:wrap}.download-btn{width:auto;text-align:center;min-height:36px;margin-left:8px}.back-btn{min-height:44px;padding:10px 16px}.floating-controls{width:260px;right:10px;max-height:70vh}.floating-body{max-height:50vh}.controls-minimized{min-height:44px;padding:10px 18px}.suggestion-btn{min-height:36px;padding:8px 14px;font-size:.8em}.modify-input-container{flex-direction:column}.modify-input-container textarea{font-size:16px;min-height:60px}#modifySubmitBtn{min-height:44px;width:100%}.collapse-panel-btn,.expand-panel-btn{display:none}.maximize-btn,.restore-btn{width:36px;height:36px}body.maximized .result-section,body.app-maximized .result-section{grid-template-columns:1fr}.explanation-panel.mobile-minimized{flex:0 0 auto;overflow:hidden;padding:8px 12px;margin-bottom:8px}.explanation-panel.mobile-minimized .explanation-content{display:none}.explanation-panel.mobile-minimized .panel-header{margin-bottom:0}.explanation-panel.mobile-minimized .download-btn{display:none}.mobile-expand-btn{display:flex}.explanation-panel:not(.mobile-minimized) .mobile-expand-btn{transform:rotate(180deg)}}@media (max-width: 480px){.container{padding:8px}header{padding:8px 12px;margin-bottom:12px}header h1{font-size:1.4em}header p{font-size:.9em}.input-section{padding:12px}.examples-grid{grid-template-columns:repeat(3,1fr)}.example-btn{font-size:.75em;padding:8px 6px}.explanation-panel,.visualization-panel{padding:10px;border-radius:10px}.floating-controls{width:calc(100vw - 20px);left:10px;right:10px}.app-container iframe{min-height:300px}}