:root{--page-bg:#f7f3ea;--ink:#5f2a1f}*{box-sizing:border-box}html,body{background:var(--page-bg);min-height:100%;margin:0}body{overflow-x:hidden}.diagram-page{width:100%;min-height:100vh;padding:12px 0 36px}.workspace-shell{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:14px;width:min(1540px,100vw - 12px);margin:0 auto;display:grid}.workspace-main{flex-direction:column;gap:10px;min-width:0;display:flex}.title-sidebar{background:#fffcf5eb;border:1px solid #5f2a1f29;border-radius:22px;flex-direction:column;gap:14px;min-height:calc(100vh - 24px);max-height:calc(100vh - 24px);padding:16px 14px;display:flex;position:sticky;top:12px}.title-sidebar-header h2,.title-sidebar-header p{margin:0}.title-sidebar-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.title-sidebar-eyebrow{color:#d12a1d;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;font-weight:700}.title-sidebar-header h2{color:var(--ink);font-size:1.35rem}.title-sidebar-total{color:#d12a1d;background:#fffcf5f2;border:1px solid #d12a1d4d;border-radius:10px;justify-content:center;align-items:center;min-width:64px;height:32px;padding:0 12px;font-size:1rem;font-weight:700;line-height:1;display:inline-flex}.title-sidebar-copy{color:#5f2a1fcc;line-height:1.5}.title-sidebar-input{min-height:180px;color:var(--ink);font:inherit;resize:vertical;background:#fffcf5fa;border:1px solid #5f2a1f2e;border-radius:18px;padding:14px 16px;line-height:1.55}.title-sidebar-meta{color:var(--ink);justify-content:space-between;align-items:center;gap:10px;font-size:.9rem;font-weight:700;display:flex}.title-sidebar-count,.title-sidebar-active{white-space:nowrap}.title-sidebar-list{flex-direction:column;gap:8px;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.title-sidebar-item{width:100%;color:var(--ink);text-align:left;background:#fffcf5fa;border:1px solid #5f2a1f24;border-radius:16px;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:12px;display:grid}.title-sidebar-item.is-active{background:#fff7ef;border-color:#d12a1d73;box-shadow:0 10px 20px #5f2a1f14}.title-sidebar-item.is-generated{border-color:#3d6b2f73}.title-sidebar-index{background:#efe4c8;border-radius:999px;justify-content:center;align-items:center;width:36px;height:36px;font-weight:700;display:inline-flex}.title-sidebar-text{overflow-wrap:anywhere;min-width:0;font-weight:700;line-height:1.45}.title-sidebar-empty{color:#5f2a1fb8;border:1px dashed #5f2a1f2e;border-radius:16px;padding:16px}.diagram-wrap{justify-content:center;align-items:center;width:100%;min-height:calc(100vh - 340px);display:flex}.diagram-page.has-generated-text .diagram-wrap{min-height:180px}.voice-diagram{width:min(41vw,680px);height:auto;max-height:31vh;margin:0 auto;display:block}.voice-name{fill:var(--ink);letter-spacing:.08em;font-family:Georgia,Times New Roman,serif;font-weight:700}.text-generator{grid-template-columns:1fr;gap:12px;width:min(1180px,100vw - 32px);display:grid}.control-board{grid-template-columns:minmax(0,1.6fr) minmax(180px,.7fr) minmax(180px,.7fr) minmax(180px,.7fr);align-items:stretch;gap:14px;width:100%;display:grid}.control-panel{background:#fffcf5f5;border:1px solid #5f2a1f29;border-radius:22px;flex-direction:column;justify-content:flex-start;gap:12px;min-height:110px;padding:14px 16px 16px;display:flex}.control-label{color:#d12a1d;letter-spacing:.08em;text-transform:uppercase;text-align:center;margin:0;font-size:.82rem;font-weight:700}.control-panel-title{align-items:stretch}.title-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;display:grid}.title-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.title-count{color:var(--ink);font-size:.92rem;font-weight:700}.title-active{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;max-width:56ch;font-size:.92rem;font-weight:700;overflow:hidden}.control-panel-music,.control-panel-visual,.control-panel-export{justify-content:space-between}.title-input,.generated-output,.generate-button{font:inherit}.title-input,.generated-output{color:var(--ink);background:#fffcf5f2;border:1px solid #5f2a1f2e}.title-input{border-radius:18px;width:100%;min-height:56px;padding:0 18px;font-size:1rem}.title-input-multiline{resize:vertical;min-height:108px;padding:16px 18px}.generate-button{color:#fffdf8;cursor:pointer;background:#bcc1c6;border:0;border-radius:18px;min-height:56px;padding:0 22px;font-weight:700;transition:background-color .12s,color .12s,opacity .12s}.control-panel .generate-button{width:100%}.generate-button.is-pending{color:#f8fafc;background:#b8bfc6}.generate-button.is-done{color:#f7fff4;background:#3f7d34}.generate-button.is-loading{color:#fff8ef;background:#8f6b22}.script-toggle{min-height:44px;color:var(--ink);font:inherit;cursor:pointer;background:#fffcf5f2;border:1px solid #5f2a1f38;border-radius:14px;grid-column:1/-1;justify-self:start;padding:0 16px;font-weight:700}.generated-output{resize:none;border-radius:22px;grid-column:1/-1;min-height:220px;padding:18px;line-height:1.6;overflow:hidden}.generated-label{color:var(--ink);grid-column:1/-1;margin:2px 0 -2px;font-weight:700}.generated-title-display{min-height:52px;color:var(--ink);overflow-wrap:anywhere;background:#fffcf5f2;border:1px solid #5f2a1f2e;border-radius:18px;grid-column:1/-1;padding:14px 18px;font-weight:700;line-height:1.45}.generate-button:disabled{cursor:not-allowed;opacity:1}.auto-loop-panel{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:14px;display:flex}.auto-loop-button{color:#fff7ef;min-height:46px;font:inherit;cursor:pointer;background:#6b3427;border:0;border-radius:14px;padding:0 18px;font-weight:700}.auto-loop-button.is-running{color:#fff8ef;background:#8f6b22}.auto-loop-status{color:var(--ink);margin:0;font-weight:700}.visual-stage-panel{background:#eef6f8eb;border:1px solid #2f5d6b2e;border-radius:18px;grid-column:1/-1;align-items:center;gap:12px;padding:14px 16px;display:flex}.visual-stage-badge{color:#f7fbfc;letter-spacing:.03em;background:#2f5d6b;border-radius:999px;flex:none;justify-content:center;align-items:center;min-width:116px;min-height:38px;padding:0 14px;font-weight:700;display:inline-flex}.visual-stage-text{color:#2f5d6b;margin:0;font-weight:700;line-height:1.45}.music-player{flex-wrap:nowrap;grid-column:1/-1;align-items:center;gap:14px;display:flex}.music-player audio{flex:auto;min-width:0;max-width:560px}.music-duration{color:var(--ink);text-align:right;flex:none;min-width:3.5rem;font-weight:700}.music-download{color:var(--ink);flex:none;font-weight:700}.music-save-button{color:#fff7ef;min-height:44px;font:inherit;cursor:pointer;background:#6b3427;border:0;border-radius:14px;flex:none;padding:0 16px;font-weight:700}.music-save-button:disabled{cursor:not-allowed;opacity:.55}.music-status{color:var(--ink);grid-column:1/-1;margin:0;font-weight:700}.visual-status{color:#2f5d6b;grid-column:1/-1;margin:0;font-weight:700}.export-status{color:#3d6b2f;grid-column:1/-1;margin:0;font-weight:700}.visual-player{flex-wrap:nowrap;grid-column:1/-1;align-items:center;gap:14px;display:flex}.visual-player video{background:#000;border-radius:18px;flex:auto;min-width:0;max-width:320px}.visual-duration{color:var(--ink);text-align:right;flex:none;min-width:3.5rem;font-weight:700}.visual-download{color:var(--ink);flex:none;font-weight:700}@media (max-width:720px){.diagram-page{padding-bottom:24px}.workspace-shell{grid-template-columns:1fr;width:calc(100vw - 20px)}.workspace-main{gap:8px}.title-sidebar{min-height:0;max-height:320px;position:static}.title-sidebar-meta{flex-wrap:wrap}.diagram-wrap{min-height:0}.voice-diagram{width:min(70vw,520px);max-height:none}.voice-name{letter-spacing:.04em}.text-generator{grid-template-columns:1fr;width:100%}.control-board{grid-template-columns:1fr}.generate-button{min-height:52px}.title-actions{grid-template-columns:1fr}.title-meta{flex-direction:column;align-items:stretch}.music-player,.visual-player{flex-wrap:wrap}}.site-hub{background:#fffcf5f5;border:1px solid #5f2a1f1f;border-radius:22px;margin-bottom:8px;padding:18px;box-shadow:0 16px 30px #5f2a1f14}.site-hub-actions{flex-wrap:wrap;gap:12px;display:flex}.site-hub-button{color:#5f2a1f;background:#f0e3d6;border:1px solid #5f2a1f33;border-radius:999px;padding:10px 20px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}.site-hub-button.is-open{color:#fff7f0;background:#5f2a1f;transform:translateY(-1px);box-shadow:0 12px 20px #5f2a1f33}.site-hub-panel{background:#fffaf4;border:1px solid #5f2a1f1f;border-radius:18px;margin-top:16px;padding:16px;display:none}.site-hub-panel.is-open{display:block}.site-hub-panel-header h3{color:var(--ink);margin:0;font-size:1.1rem}.site-hub-panel-header p{color:#5f2a1fb3;margin:6px 0 0}.site-hub-frame{background:#000;border:none;border-radius:16px;width:100%;min-height:520px}.pub-video-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.pub-video-card{color:#fff;background:#1b1b1b;border-radius:16px;margin:0;padding:10px;overflow:hidden}.pub-video-card video{background:#000;border-radius:12px;width:100%;display:block}.pub-video-card figcaption{color:#ffffffb3;margin-top:8px;font-size:.8rem}