*{box-sizing:border-box;margin:0;padding:0}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--color-bg);color:var(--color-text);overflow:hidden;width:100vw;height:100vh}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}canvas,.scene-tab,.panel-nav-btn,.sub-tab-btn,.chip-btn,.btn-action,.btn-expression,.mobile-toggle-fab,.mobile-drawer-close,.drama-ctrl-btn,.drama-scene-btn,.drama-toggle-btn{user-select:none;-webkit-user-select:none}input,textarea,select,p,span,.subtitle-text,.card-title,.card-sub{user-select:text;-webkit-user-select:text}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.u-hidden,[hidden]{display:none}.u-flex-1{flex:1}.u-mt-4{margin-top:var(--space-1)}.u-mt-6{margin-top:6px}.u-mt-8{margin-top:var(--space-2)}.u-mt-12{margin-top:var(--space-3)}.u-mt-14{margin-top:14px}.u-mb-4{margin-bottom:var(--space-1)}.u-mb-6{margin-bottom:6px}.u-mb-8{margin-bottom:var(--space-2)}.u-mb-12{margin-bottom:var(--space-3)}.u-nowrap{white-space:nowrap}#btn-reopen-hints{display:none}header{position:absolute;top:var(--space-3);left:var(--space-4);right:var(--space-4);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:6px var(--space-3);border-radius:var(--radius-lg);border:1px solid var(--card-border);box-shadow:var(--shadow-2);box-sizing:border-box}.header-left{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.brand-logo-wrap{display:flex;align-items:center;gap:var(--space-2);text-decoration:none}.logo-badge{background:linear-gradient(135deg,var(--color-accent-strong),var(--color-accent));color:var(--color-text);font-weight:800;padding:4px 8px;border-radius:var(--radius-sm);font-size:var(--fs-sm);letter-spacing:.5px;display:flex;align-items:center;gap:5px;-webkit-user-select:none;user-select:none}.logo-badge img{width:16px;height:16px;display:block}.title-group{display:flex;flex-direction:column}.title-group h1{font-size:var(--fs-md);font-weight:700;color:var(--color-text);margin:0;line-height:1.2}.title-group p{font-size:var(--fs-xs);color:var(--color-text-muted);margin:1px 0 0}.scene-tabs{display:flex;align-items:center;gap:var(--space-1);flex:1;justify-content:flex-start;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 4px}.scene-tabs::-webkit-scrollbar{display:none}.scene-tab{background:transparent;border:none;color:var(--color-text-muted);padding:6px 10px;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all var(--dur-base) ease;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;flex-shrink:0}.scene-tab:hover{color:var(--color-text);background:#ffffff14}.scene-tab.active{background:var(--color-accent-strong);color:var(--color-text);box-shadow:0 2px 8px #0284c766}.scene-tab--link{background:#0ea5e91f;border:1px solid rgba(56,189,248,.3);color:var(--color-accent)}.scene-tab--link:hover{background:#0ea5e938;color:var(--color-text);border-color:var(--color-accent)}.header-right{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;position:relative}.header-project-actions{display:flex;align-items:center;gap:6px}.header-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:600;cursor:pointer;border:1px solid var(--card-border);background:var(--color-surface-2);color:var(--color-text);transition:all var(--dur-base) ease;white-space:nowrap;text-decoration:none;box-sizing:border-box}.header-action-btn:hover{background:var(--color-surface-3);border-color:var(--color-border-strong);transform:translateY(-1px)}.header-action-btn.ghost-btn{background:#ffffff0d;border-color:#ffffff1f}.header-action-btn.ghost-btn:hover{background:#ffffff1f;border-color:#ffffff40;color:var(--color-text)}.header-action-btn.export-video-btn{background:linear-gradient(135deg,var(--color-danger),var(--accent-rose));border-color:#f43f5e66;color:var(--color-text);font-weight:700;box-shadow:0 2px 8px #e11d4859}.header-action-btn.export-video-btn:hover{background:linear-gradient(135deg,var(--accent-rose),var(--color-danger));box-shadow:0 4px 12px #e11d4880}.header-action-btn.header-more-btn,.header-action-btn.mobile-only-item{display:none}.header-more-btn{font-size:var(--fs-lg);font-weight:800;padding:4px 10px;background:var(--color-surface-2);border:1px solid var(--color-surface-3);color:var(--color-text);line-height:1}.header-menu-backdrop{display:none}@media(max-width:1439px){#btn-project-share-url .action-btn-text{display:none}}@media(min-width:900px)and (max-width:1279px){header{gap:8px;padding:6px 10px}.title-group{display:none}.header-action-btn{padding:5px 8px;font-size:var(--fs-xs);gap:4px}.scene-tabs{flex-shrink:0;gap:4px;padding:2px 4px;overflow:visible}.scene-tab{padding:6px 10px;font-size:var(--fs-base);gap:0;flex-shrink:0;white-space:nowrap}.scene-tab .tab-label{display:none}}@media(min-width:1280px)and (max-width:1365px){.title-group{display:none}}@media(min-width:1366px)and (max-width:1439px){.title-group p{display:none}}@media(min-width:1280px){.scene-tabs{flex-shrink:0;overflow:visible;gap:3px;padding:2px}.scene-tab{flex-shrink:0;white-space:nowrap;padding:5px 7px;font-size:var(--fs-xs);gap:3px}.scene-tab .tab-label{display:inline}}@media(max-width:899px){header{top:8px;left:8px;right:8px;padding:4px 6px;border-radius:var(--radius-lg);gap:var(--space-1);justify-content:space-between;height:44px;box-sizing:border-box}.header-left{flex-shrink:0}.logo-badge{font-size:var(--fs-xs);padding:4px 6px;letter-spacing:.2px;gap:4px}.logo-badge img{width:14px;height:14px}.title-group{display:none}.scene-tabs{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 8px;gap:4px;justify-content:flex-start;border-radius:var(--radius-md);scroll-snap-type:x mandatory;mask-image:linear-gradient(to right,transparent 0%,black 12px,black calc(100% - 12px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 12px,black calc(100% - 12px),transparent 100%)}.scene-tab{padding:4px 8px;font-size:var(--fs-xs);flex-shrink:0;scroll-snap-align:start;border-radius:var(--radius-sm)}.header-right{flex-shrink:0;position:relative}.header-action-btn.header-more-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:var(--radius-md);background:var(--color-surface-2);border:1px solid var(--color-surface-3);color:var(--color-text);font-size:var(--fs-lg);cursor:pointer}.header-action-btn.header-more-btn:active{background:var(--color-surface-3)}header .header-project-actions{display:none;flex-direction:column;position:absolute;top:calc(100% + 8px);right:0;width:190px;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:6px;box-shadow:0 12px 32px #000000bf;z-index:100;gap:4px}header .header-project-actions.mobile-open{display:flex;animation:menuFadeIn var(--dur-fast) ease-out}@keyframes menuFadeIn{0%{opacity:0;transform:translateY(-4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.header-project-actions .header-action-btn{width:100%;justify-content:flex-start;padding:8px 10px;font-size:var(--fs-xs);border-radius:var(--radius-md)}.header-project-actions .header-action-btn .action-btn-text{display:inline!important}.header-project-actions .header-action-btn.mobile-only-item{display:flex}.header-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:95;opacity:0;pointer-events:none;transition:opacity var(--dur-base) ease}.header-menu-backdrop.active{display:block;opacity:1;pointer-events:auto}}.control-panel{position:absolute;right:16px;top:68px;bottom:16px;width:390px;z-index:30;background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:18px;border:1px solid var(--card-border);box-shadow:0 16px 36px #00000080;display:flex;flex-direction:column;overflow:hidden}.panel-nav{display:flex;background:#0f172a99;border-bottom:1px solid var(--card-border);padding:4px;gap:3px}.panel-nav-btn{flex:1;min-width:0;padding:6px 2px;background:transparent;border:none;color:var(--color-text-muted);border-radius:var(--radius-md);cursor:pointer;transition:all var(--dur-base);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.panel-nav-icon{font-size:var(--fs-md);line-height:1}.panel-nav-label{font-size:var(--fs-xs);font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-nav-btn.active{background:var(--color-accent-strong);color:var(--color-text)}.panel-body{padding:16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:16px}#panel-interaction,#panel-characters,#panel-animals,#panel-storyboard{display:none}.section-title{font-size:var(--fs-md);font-weight:700;color:var(--color-accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.char-grid--2col{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.char-card{background:#0f172a99;border:1px solid var(--card-border);border-radius:var(--radius-md);padding:8px 10px;cursor:pointer;transition:all .15s;text-align:left}.char-card:hover{border-color:var(--color-accent)}.char-card.active{border-color:var(--color-accent);background:#0ea5e926;box-shadow:0 0 10px #38bdf840}#char-grid .char-card{display:flex;align-items:center;gap:8px;padding:6px 8px;min-width:0}.char-thumb-wrapper{position:relative;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;flex-shrink:0;border-radius:var(--radius-sm);background:#1e293b99;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;overflow:hidden}.char-thumb-fallback{font-size:20px;line-height:1;pointer-events:none}.char-card.thumb-loaded .char-thumb-fallback{opacity:0;position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.char-info{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.char-name{font-size:var(--fs-md);font-weight:700;color:var(--color-text)}#char-grid .char-card .char-name{font-size:var(--fs-sm);line-height:1.25;word-break:break-word;white-space:normal}#char-grid .char-card.active .char-name{color:var(--color-accent)}.char-role{font-size:var(--fs-sm);color:var(--color-text-muted)}#char-grid .char-card .char-role{font-size:var(--fs-xs);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewport-hints{position:absolute;bottom:20px;left:20px;z-index:10;display:flex;gap:8px}.hint-chip{background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 14px;border-radius:20px;border:1px solid var(--card-border);font-size:var(--fs-sm);color:var(--color-text-muted)}.hint-chip strong{color:var(--color-accent)}.hint-reopen-btn{display:none;position:absolute;bottom:20px;left:20px;z-index:10;background:var(--color-surface-2);border:1px solid var(--color-surface-3);color:var(--color-text);padding:6px 10px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--fs-sm)}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm);color:var(--color-text-muted)}.toggle-switch{position:relative;width:36px;height:20px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-surface-3);transition:.3s;border-radius:20px}.slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:var(--color-text);transition:.3s;border-radius:50%}input:checked+.slider{background-color:var(--color-accent-strong)}input:checked+.slider:before{transform:translate(16px)}.animal-banner{background:#0ea5e91f;border:1px solid rgba(56,189,248,.35);border-radius:10px;padding:10px 12px;margin-bottom:12px}.animal-banner-header{display:flex;align-items:center;justify-content:space-between}.animal-banner-title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--color-accent);font-size:var(--fs-md)}.animal-archetype-badge{font-size:var(--fs-xs);background:#38bdf840;color:var(--color-accent);padding:2px 6px;border-radius:var(--radius-sm);font-weight:600}.animal-banner-desc{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:4px;line-height:1.4}.custom-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.label-species-count{font-size:var(--fs-xs);color:var(--color-text-muted)}.animal-scale-box{margin-top:14px;background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px}.animal-scale-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.animal-scale-title{font-size:var(--fs-sm);font-weight:600;color:var(--color-text-muted)}.animal-scale-val{font-size:var(--fs-xs);font-weight:700;color:var(--color-accent)}.animal-desc-box{margin-top:14px;padding:10px;background:#0f172ab3;border-radius:var(--radius-md);border-left:3px solid var(--color-accent)}.animal-desc-title{font-size:var(--fs-sm);font-weight:700;color:var(--color-text)}.animal-desc-text{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:4px;line-height:1.4}@media(min-width:900px)and (max-width:1279px){.control-panel{width:340px;top:66px;right:12px;bottom:12px}.viewport-hints{left:12px;bottom:12px;max-width:calc(100vw - 365px);flex-wrap:wrap;gap:6px}.hint-chip{font-size:var(--fs-xs);padding:4px 8px}}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.action-grid--4col{grid-template-columns:repeat(4,1fr)}.btn-action,.btn-expression{background:#0f172a99;border:1px solid var(--card-border);color:var(--color-text);border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center}.btn-action{padding:8px 4px;gap:4px}.btn-expression{padding:7px 4px;gap:3px}.btn-action:hover,.btn-expression:hover{background:#ffffff1a}.btn-action.active,.btn-expression.active{background:var(--color-accent-strong);border-color:var(--color-accent);color:var(--color-text);box-shadow:0 2px 8px #0284c766}.btn-action span.icon,.btn-expression span.icon{font-size:var(--fs-lg)}.custom-row{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.custom-label{font-size:var(--fs-md);font-weight:700;color:var(--color-text)}.chip-group,.chip-group--wrap{display:flex;flex-wrap:wrap;gap:5px}.chip-group--wrap{gap:6px}.chip-btn{background:#0f172a99;border:1px solid var(--card-border);color:var(--color-text-muted);padding:6px 11px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .15s}.chip-btn:hover{border-color:var(--color-text-muted);color:var(--color-text)}.chip-btn.active{background:var(--color-accent);color:var(--color-surface-1);border-color:var(--color-accent);font-weight:700}.chip-group.visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}.visual-grid--3col{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.visual-grid--4col{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.subpanel-grid--2col{display:grid;grid-template-columns:repeat(2,1fr);max-height:280px;overflow-y:auto;padding-right:4px;gap:7px}.panel-group-title{color:var(--color-accent);font-weight:700;margin-bottom:6px;font-size:var(--fs-md)}.alien-opt-title{color:var(--accent-purple)}.pop-controls-box{margin-top:10px;padding:10px;background:#1e293bb3;border:1px solid rgba(99,102,241,.4);border-radius:var(--radius-md)}.pop-controls-header{font-size:var(--fs-xs);font-weight:700;color:var(--color-indigo-light);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.btn-random-pop{font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--radius-sm);background:var(--style-pixel);color:var(--color-text);cursor:pointer;border:none}.pop-chip-btn{font-size:var(--fs-xs);padding:2px 8px}.chip-btn.visual-card{background:#0f172abf;border:1px solid var(--color-border);border-radius:9px;padding:7px 8px;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;position:relative;transition:all .18s cubic-bezier(.4,0,.2,1);overflow:hidden;-webkit-user-select:none;user-select:none;box-sizing:border-box;min-height:48px;color:var(--color-text-muted)}.chip-btn.visual-card:hover{background:#1e293be6;border-color:#38bdf866;transform:translateY(-1px);box-shadow:var(--shadow-2);color:var(--color-text)}.chip-btn.visual-card.active{background:linear-gradient(135deg,#0284c759,#0ea5e92e);border-color:var(--color-accent);box-shadow:0 0 12px #38bdf859,inset 0 0 8px #38bdf826;color:var(--color-text);font-weight:600}.chip-btn.visual-card>*{pointer-events:none}.chip-btn.visual-card .card-icon-wrapper{position:relative;width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#ffffff0f;border-radius:var(--radius-md);border:1px solid var(--color-border);font-size:var(--fs-lg);line-height:1;transition:all .18s ease}.chip-btn.visual-card:hover .card-icon-wrapper{background:#ffffff1a;transform:scale(1.05)}.chip-btn.visual-card.active .card-icon-wrapper{background:#38bdf838;border-color:#38bdf88c;transform:scale(1.06)}.color-dot{background-color:var(--dot, var(--color-accent))}.chip-btn.visual-card .color-dot{position:absolute;bottom:-2px;right:-2px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--color-surface-1);box-shadow:0 0 4px #00000080;background-color:var(--dot, var(--color-accent))}.animal-variant-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background-color:var(--dot, var(--color-accent));border:1px solid rgba(255,255,255,.4);margin-right:4px}.chip-btn.visual-card .card-info{display:flex;flex-direction:column;flex:1;min-width:0;gap:1px}.chip-btn.visual-card .card-title{font-size:var(--fs-sm);font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}.chip-btn.visual-card.active .card-title{color:var(--color-accent)}.chip-btn.visual-card .card-sub{font-size:var(--fs-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.chip-btn.visual-card.active .card-sub{color:var(--color-accent)}.chip-btn.visual-card .card-check{display:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);color:var(--color-surface-1);font-size:var(--fs-xs);font-weight:900;align-items:center;justify-content:center;position:absolute;top:4px;right:4px;box-shadow:0 0 6px #38bdf899}.chip-btn.visual-card.active .card-check{display:flex}.category-divider{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin:10px 0 2px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-accent);opacity:.9}.category-divider:before,.category-divider:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.3),transparent)}.btn-random{background:linear-gradient(135deg,var(--accent-pink),var(--accent-rose));border:none;color:var(--color-text);padding:8px 12px;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 12px #f43f5e59;transition:all .15s ease}.btn-random:hover{transform:scale(1.02);box-shadow:0 6px 16px #f43f5e80}.customizer-toolbar{display:flex;flex-direction:column;gap:8px;margin-bottom:2px}.sub-tabs-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#0f172ab3;padding:4px;border-radius:10px;border:1px solid var(--card-border)}.sub-tab-btn{background:transparent;border:1px solid transparent;color:var(--color-text-muted);padding:7px 2px;border-radius:7px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .18s ease;white-space:nowrap}.sub-tab-btn .sub-tab-icon{font-size:var(--fs-base);line-height:1}.sub-tab-btn:hover{color:var(--color-text);background:#ffffff0f}.sub-tab-btn.active{background:var(--color-accent-strong);color:var(--color-text);border-color:#38bdf880;box-shadow:0 2px 8px #0284c766}.sub-panel{display:none;flex-direction:column;gap:14px}#subpanel-outfit,#subpanel-appearance,#subpanel-accessories{display:none}.sub-panel.active{display:flex;animation:fadeInSubTab .18s ease-in-out}@keyframes fadeInSubTab{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.rig-highlight-box{background:#0ea5e926;padding:8px 10px;border-radius:10px;border:1px solid rgba(56,189,248,.35)}.custom-color-control-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.custom-color-label{font-size:var(--fs-xs);color:var(--color-text-muted);width:62px}.custom-color-btns{display:flex;gap:4px}.custom-color-btn{font-size:var(--fs-xs);padding:2px 8px}.custom-color-inputs{display:flex;gap:6px;align-items:center}.species-card-wrap{display:flex;align-items:center;justify-content:space-between;width:100%}.species-card__body{display:flex;align-items:center;gap:8px}.species-card__icon{font-size:var(--fs-xl);line-height:1;flex-shrink:0}.species-card__name{font-size:var(--fs-sm);font-weight:600;color:var(--color-text)}.species-card__sub{font-size:var(--fs-xs);color:var(--color-text-muted)}.species-card__check{font-size:var(--fs-xs);color:var(--color-accent);opacity:0;transition:opacity .15s ease}.char-card.active .species-card__check{opacity:1}.viewport-hints{transition:opacity .2s ease,transform .2s ease}.viewport-hints.viewport-hints--hidden{opacity:0;pointer-events:none;transform:translateY(6px)}.hint-close-btn{background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:20px;color:var(--color-text-muted);font-size:var(--fs-sm);line-height:1;padding:6px 10px;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center}.hint-close-btn:hover{background:#1e293bf2;color:var(--color-text);border-color:#ffffff40}.hint-reopen-btn{position:absolute;bottom:20px;left:20px;z-index:10;width:28px;height:28px;background:#0f172ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);border-radius:50%;color:var(--color-accent);font-size:var(--fs-md);font-weight:700;line-height:1;padding:0;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center}.hint-reopen-btn:hover{background:#1e293bf2;border-color:var(--color-accent);box-shadow:0 0 8px #38bdf84d}.shot-card-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px}.shot-duration-wrap{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:var(--fs-xs);color:var(--color-text-muted);min-width:65px}.shot-duration-input{width:44px;background:#1e293bcc;border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:2px 4px;color:var(--color-accent);font-size:var(--fs-sm);font-weight:700;text-align:center;outline:none}.shot-card-controls{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:4px}.shot-icon-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--color-text-muted);border-radius:5px;min-width:28px;min-height:28px;padding:2px 6px;font-size:var(--fs-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.shot-icon-btn:hover:not(:disabled){background:#ffffff26;color:var(--color-text)}.shot-icon-btn.danger:hover:not(:disabled){background:var(--color-danger);color:var(--color-text)}.shot-icon-btn:disabled{opacity:.35;cursor:not-allowed}.shot-select{width:100%;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;background:var(--color-surface-2);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:4px 6px;color:var(--color-text);font-size:var(--fs-sm);outline:none}.reaction-item{background:#0f172a80;border:1px solid var(--card-border);border-radius:var(--radius-md);padding:8px 10px;font-size:var(--fs-sm);color:var(--color-text);cursor:pointer;text-align:left;line-height:1.4;margin-bottom:6px}.reaction-item:hover{border-color:var(--color-accent);background:#38bdf81a}.input-row{display:flex;gap:6px;margin-top:4px}.input-speech{flex:1;background:#0f172acc;border:1px solid var(--card-border);border-radius:var(--radius-md);color:var(--color-text);padding:8px 10px;font-size:var(--fs-sm);outline:none}.btn-speak{background:var(--color-success);color:var(--color-text);border:none;border-radius:var(--radius-md);padding:0 12px;font-weight:700;font-size:var(--fs-sm);cursor:pointer}.stage-settings-section{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--card-border)}.card-thumb{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;opacity:0;transition:opacity var(--dur-base) ease;pointer-events:none;display:block}.chip-btn.visual-card.thumb-loaded .card-thumb,.char-card.thumb-loaded .card-thumb{opacity:1}.chip-btn.visual-card.thumb-loaded .card-emoji{opacity:0;position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.chip-btn.visual-card .color-dot{z-index:2}.character-save-banner{display:flex;gap:8px;background:#0f172ab3;border:1px solid var(--card-border);border-radius:10px;padding:8px 10px;align-items:center;margin-bottom:4px}.char-name-input-wrap{flex:1;display:flex;align-items:center;gap:6px;background:#1e293be6;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);padding:4px 8px}.char-name-input{width:100%;background:transparent;border:none;color:var(--color-text);font-size:var(--fs-sm);font-weight:700;outline:none}#input-project-title{background:#1e293be6;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:6px 10px;width:100%;box-sizing:border-box}.btn-save-char{display:flex;align-items:center;gap:4px;background:var(--color-accent-strong);border:1px solid var(--color-accent);color:var(--color-text);padding:6px 10px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:700;cursor:pointer;transition:all var(--dur-base);white-space:nowrap}.btn-save-char:hover{background:var(--color-accent-strong);transform:translateY(-1px)}.char-roster-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto}.roster-card{background:#0f172ab3;border:1px solid var(--card-border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;transition:all var(--dur-base)}.roster-card:hover{border-color:var(--color-accent);background:#1e293bd9}.roster-card.active{border-color:var(--color-accent);background:#0e749040;box-shadow:0 0 12px #38bdf84d}.roster-header{display:flex;align-items:center;justify-content:space-between}.roster-title{font-size:var(--fs-md);font-weight:700;color:var(--color-text)}.roster-badge{font-size:var(--fs-xs);padding:2px 6px;border-radius:var(--radius-sm);background:#ffffff1a;color:var(--color-text-muted)}.roster-badge.custom{background:#10b98133;color:var(--color-success);border:1px solid rgba(16,185,129,.4)}.roster-details{font-size:var(--fs-xs);color:var(--color-text-muted)}.roster-actions{display:flex;gap:6px;margin-top:4px}.roster-btn{flex:1;padding:4px 6px;border-radius:5px;font-size:var(--fs-xs);font-weight:600;cursor:pointer;border:1px solid var(--card-border);background:#ffffff0d;color:var(--color-text);transition:all .15s;text-align:center}.roster-btn:hover{background:#ffffff26;color:var(--color-text)}.roster-btn.primary{background:var(--accent-blue);border-color:var(--color-accent);color:var(--color-text)}.btn-delete-char{color:var(--color-danger)}.storyboard-toolbar{display:flex;flex-direction:column;gap:8px;background:#0f172ab3;border:1px solid var(--card-border);border-radius:10px;padding:10px}.storyboard-title-group{display:flex;flex-direction:column;gap:4px}.storyboard-total-badge{font-size:var(--fs-xs);color:var(--color-accent);font-family:monospace}.btn-add-shot{background:var(--color-accent-strong);border-color:var(--color-accent);margin-top:4px}.storyboard-shots-list{display:flex;flex-direction:column;gap:12px}.shot-card{background:#0f172ab3;border:1px solid var(--card-border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:all var(--dur-base)}.shot-card:hover{border-color:#38bdf866}.shot-card.active{border-color:var(--color-accent);background:#1e3a8a40;box-shadow:0 0 12px #38bdf840}.shot-num-badge{font-size:var(--fs-xs);font-weight:800;background:var(--color-accent-strong);color:var(--color-text);padding:3px 8px;border-radius:6px;white-space:nowrap}.shot-title-input{flex:1;background:#1e293bcc;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:3px 6px;font-size:var(--fs-sm);font-weight:600;color:var(--color-text);outline:none}.shot-duration-wrap{display:flex;align-items:center;gap:3px;font-size:var(--fs-xs);color:var(--color-text-muted)}.shot-duration-input{width:48px;background:#1e293bcc;border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:2px 4px;color:var(--color-accent);font-size:var(--fs-sm);font-weight:700;text-align:center;outline:none}.shot-card-controls{display:flex;gap:3px}.shot-icon-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--color-text-muted);border-radius:5px;padding:2px 6px;font-size:var(--fs-xs);cursor:pointer;transition:all .15s}.shot-icon-btn:hover{background:#ffffff26;color:var(--color-text)}.shot-icon-btn.danger:hover{background:var(--color-danger);color:var(--color-text)}.shot-icon-btn:disabled,button:disabled{opacity:.35;cursor:not-allowed}.shot-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:6px}.shot-select-label{font-size:var(--fs-xs);font-weight:700;color:var(--color-text-muted);margin-bottom:2px;display:block}.shot-select{width:100%;background:var(--color-surface-2);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:4px 6px;color:var(--color-text);font-size:var(--fs-sm);outline:none;min-width:0;text-overflow:ellipsis}.shot-dialogue-wrap{display:flex;flex-direction:column;gap:3px}.shot-dialogue-input{width:100%;background:var(--color-surface-2);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:6px;color:var(--color-text);font-size:var(--fs-sm);line-height:1.4;resize:vertical;min-height:44px;outline:none;font-family:inherit}.drama-subtitle-box{display:none;position:absolute;bottom:215px;left:50%;transform:translate(-50%);z-index:35;background:linear-gradient(180deg,#0f172af2,#020617fa);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1.5px solid rgba(56,189,248,.45);border-radius:18px;padding:12px 26px;max-width:720px;width:calc(100% - 60px);text-align:center;box-shadow:0 16px 40px #000000bf,0 0 20px #38bdf833;pointer-events:none;animation:subtitleFadeIn .25s cubic-bezier(.16,1,.3,1)}@keyframes subtitleFadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.subtitle-speaker-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}.subtitle-speaker{display:inline-block;font-size:var(--fs-sm);font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--color-accent);background:#38bdf826;border:1px solid rgba(56,189,248,.3);padding:3px 12px;border-radius:20px;margin-bottom:0}.subtitle-text{font-size:var(--fs-lg);font-weight:700;color:var(--color-text);line-height:1.45;text-shadow:0 2px 6px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,1)}.drama-playback-dock{display:none;position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:25;background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:20px;padding:12px 20px;width:calc(100% - 40px);max-width:960px;box-shadow:0 20px 40px #0009;flex-direction:column;gap:10px}.drama-timeline-row{display:flex;align-items:center;gap:12px}.drama-time{font-family:JetBrains Mono,monospace;font-size:var(--fs-sm);font-weight:700;color:var(--color-text-muted);min-width:42px}.drama-slider{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff26;border-radius:var(--radius-sm);outline:none;cursor:pointer;transition:background .2s}.drama-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 10px #38bdf8cc;cursor:pointer;transition:transform .1s}.drama-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.drama-controls-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.drama-btn-group,.drama-scenes-nav,.drama-settings-group{display:flex;align-items:center;gap:6px}.drama-ctrl-btn{background:var(--color-surface-2);border:1px solid var(--card-border);color:var(--color-text);padding:7px 14px;border-radius:10px;font-size:var(--fs-md);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all var(--dur-base)}.drama-ctrl-btn:hover{background:var(--color-surface-3);transform:translateY(-1px)}.drama-ctrl-btn.primary{background:linear-gradient(135deg,var(--color-accent-strong),var(--accent-blue));border-color:var(--color-accent);box-shadow:0 4px 12px #2563eb59}.drama-ctrl-btn.primary:hover{box-shadow:0 6px 16px #2563eb80}.drama-btn-record{background:var(--color-danger);border-color:var(--accent-rose)}.drama-scenes-nav{background:#0f172a99;padding:3px;border-radius:12px;border:1px solid var(--color-border)}.drama-scene-btn{background:transparent;border:none;color:var(--color-text-muted);font-size:var(--fs-xs);font-weight:700;padding:6px 10px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--dur-base);white-space:nowrap}.drama-scene-btn:hover{color:var(--color-text);background:#ffffff0f}.drama-scene-btn.active{background:var(--accent-blue);color:var(--color-text);box-shadow:0 2px 6px #2563eb66}.drama-toggle-btn{background:var(--color-surface-2);border:1px solid var(--card-border);color:var(--color-text-muted);font-size:var(--fs-sm);font-weight:700;padding:6px 12px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all var(--dur-base)}.drama-toggle-btn:hover{background:var(--color-surface-3);color:var(--color-text)}.drama-audio-backdrop,.drama-modal-backdrop,#drama-audio-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:99}.drama-audio-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 40px);max-width:840px;max-height:85vh;background:#0f172af5;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border:1px solid rgba(56,189,248,.35);border-radius:20px;box-shadow:0 25px 60px #000c,0 0 30px #38bdf826;z-index:100;flex-direction:column;overflow:hidden;color:var(--color-text)}.drama-modal-header{padding:14px 20px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;background:#1e293b99}.drama-modal-title{font-size:var(--fs-base);font-weight:800;color:var(--color-accent);display:flex;align-items:center;gap:8px}.drama-modal-close{background:transparent;border:none;color:var(--color-text-muted);font-size:var(--fs-xl);cursor:pointer;line-height:1;padding:4px 8px;border-radius:6px;transition:all .15s}.drama-modal-close:hover{color:var(--color-danger);background:#f43f5e26}.drama-modal-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.drama-modal-desc{font-size:var(--fs-sm);color:var(--color-text-muted);line-height:1.5;background:#38bdf814;border:1px solid rgba(56,189,248,.2);border-radius:10px;padding:9px 12px}.drama-cue-list{display:flex;flex-direction:column;gap:8px}.drama-cue-card{background:#1e293b99;border:1px solid var(--color-border);border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:all .2s}.drama-cue-card:hover{border-color:#38bdf866;background:#1e293bd9}.drama-cue-card.has-override{border-color:#f59e0b66;background:#292519a6}.drama-cue-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.drama-cue-meta{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs)}.drama-cue-speaker{font-weight:700;color:var(--color-accent)}.drama-cue-scene{color:var(--color-text-subtle);margin-left:4px}.drama-cue-badge{font-size:var(--fs-xs);padding:2px 7px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;gap:4px}.badge-edge-tts{background:#38bdf82e;color:var(--color-accent);border:1px solid rgba(56,189,248,.35)}.badge-mp3-override{background:#f59e0b38;color:var(--color-warning);border:1px solid rgba(245,158,11,.45)}.drama-cue-text{font-size:var(--fs-md);color:var(--color-text);line-height:1.4;white-space:normal;word-break:break-word}.drama-cue-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.cue-btn{background:var(--color-surface-2);border:1px solid var(--card-border);color:var(--color-text-muted);padding:5px 9px;border-radius:var(--radius-md);font-size:var(--fs-xs);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:all .15s}.cue-btn:hover{background:var(--color-surface-3);color:var(--color-text)}.cue-btn.btn-upload{background:#0ea5e926;border-color:#0ea5e959;color:var(--color-accent)}.cue-btn.btn-upload:hover{background:#0ea5e94d}.cue-btn.btn-revert{background:#f43f5e26;border-color:#f43f5e4d;color:var(--color-danger)}.cue-btn.btn-revert:hover{background:#f43f5e4d}.recording-banner{display:none;position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:50;background:#0f172ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid var(--color-danger);border-radius:20px;padding:8px 18px;color:var(--color-text);font-size:var(--fs-md);font-weight:700;box-shadow:0 4px 16px #ef444466;align-items:center;gap:8px}.mobile-toggle-fab,.mobile-panel-backdrop,.mobile-drawer-header,.hint-mobile{display:none}@media(max-width:768px){body{overflow:hidden;position:fixed;width:100%;height:100%;-webkit-tap-highlight-color:transparent}#canvas-container{touch-action:none}.mobile-toggle-fab{position:fixed;bottom:20px;right:16px;z-index:40;display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--color-accent-strong),var(--accent-blue));color:var(--color-text);border:1.5px solid rgba(56,189,248,.6);padding:10px 18px;border-radius:30px;font-size:var(--fs-md);font-weight:700;box-shadow:0 10px 25px #0284c78c,0 0 15px #38bdf866;cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;animation:fabPulse 2.5s infinite}@keyframes fabPulse{0%,to{box-shadow:0 10px 25px #0284c78c,0 0 15px #38bdf866}50%{box-shadow:0 12px 30px #0284c7bf,0 0 22px #38bdf8a6}}.mobile-toggle-fab:active{transform:scale(.94)}.mobile-toggle-fab.hidden{display:none!important}.mobile-panel-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:45;opacity:0;pointer-events:none;transition:opacity .25s ease}.mobile-panel-backdrop.active{display:block;opacity:1;pointer-events:auto}.control-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-height:75vh;border-radius:20px 20px 0 0;z-index:50;border:none;border-top:1.5px solid rgba(56,189,248,.45);box-shadow:0 -12px 40px #000000d9;transform:translateY(105%);transition:transform .3s cubic-bezier(.16,1,.3,1);pointer-events:none}.control-panel.mobile-open{transform:translateY(0);pointer-events:auto}.mobile-drawer-header{display:flex;flex-direction:column;align-items:center;padding:8px 16px 6px;background:#0f172ad9;border-bottom:1px solid var(--card-border)}.mobile-drawer-handle{width:42px;height:4px;background:#ffffff59;border-radius:2px;margin-bottom:6px}.mobile-drawer-title-row{width:100%;display:flex;align-items:center;justify-content:space-between}.mobile-drawer-title{font-size:var(--fs-md);font-weight:700;color:var(--color-accent)}.mobile-drawer-close{background:#ffffff1a;border:none;color:var(--color-text-muted);width:28px;height:28px;border-radius:50%;font-size:var(--fs-base);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}.mobile-drawer-close:active{background:#f43f5e4d;color:var(--color-danger)}.panel-body{padding:12px 14px;max-height:calc(75vh - 90px);overscroll-behavior:contain}.char-grid{grid-template-columns:1fr 1fr;gap:6px}.sub-tab-btn{padding:6px 1px;font-size:var(--fs-xs)}.hint-desktop{display:none!important}.hint-mobile{display:flex!important}.viewport-hints{bottom:22px;left:12px;z-index:10;pointer-events:none}.hint-chip{font-size:var(--fs-xs);padding:5px 11px;background:#0f172ae6;border-color:#38bdf84d}.drama-playback-dock,.drama-subtitle-box{width:auto;transform:none;max-width:none}.drama-playback-dock{bottom:8px;left:8px;right:8px;padding:8px 10px;border-radius:14px;gap:6px}.drama-timeline-row{gap:8px}.drama-time{font-size:var(--fs-xs);min-width:36px}.drama-controls-row{gap:6px;flex-direction:column;align-items:stretch}.drama-btn-group{display:flex;width:100%;gap:6px}.drama-ctrl-btn{flex:1;justify-content:center;padding:7px 8px;font-size:var(--fs-sm)}.drama-scenes-nav,.drama-settings-group{width:100%;display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}.drama-scenes-nav::-webkit-scrollbar,.drama-settings-group::-webkit-scrollbar{display:none}.drama-scenes-nav{gap:3px;padding:2px 3px}.drama-scene-btn{flex-shrink:0;padding:5px 8px;font-size:var(--fs-xs)}.drama-settings-group{gap:4px;padding-top:2px}.drama-toggle-btn{flex-shrink:0;padding:5px 8px;font-size:var(--fs-xs)}.drama-subtitle-box{bottom:135px;left:10px;right:10px;padding:8px 14px;border-radius:14px}.subtitle-speaker{font-size:var(--fs-xs);padding:2px 8px}.subtitle-text{font-size:var(--fs-base);line-height:1.35}.drama-audio-modal{width:calc(100% - 16px);max-height:85vh;border-radius:14px}.drama-cue-card{flex-direction:column;align-items:flex-start;gap:8px}.drama-cue-actions{width:100%;justify-content:flex-end}}@media(max-width:900px)and (orientation:landscape)and (max-height:520px){header{padding:4px 8px}.scene-tabs{padding:2px 4px}.control-panel{top:0;right:0;bottom:0;left:auto;width:320px;max-height:100vh;border-radius:0;transform:translate(105%)}.control-panel.mobile-open{transform:translate(0)}.drama-playback-dock{bottom:4px;padding:5px 8px}.drama-subtitle-box{bottom:80px;padding:5px 12px}}