.porcelain-app{--studio-paper:var(--background);--studio-ink:var(--foreground);--studio-sage:var(--primary);--studio-soft:var(--secondary);--studio-serif:"Songti SC", "STSong", "Noto Serif CJK SC", "Times New Roman", serif;background:var(--studio-paper);min-height:100svh;color:var(--studio-ink);--radius:1rem;font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif}.porcelain-app button,.porcelain-app a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.porcelain-app button{cursor:pointer}.porcelain-app button:disabled{cursor:default;opacity:.35}.porcelain-app button:focus-visible,.porcelain-app a:focus-visible,.porcelain-app input:focus-visible{outline:2px solid var(--primary);outline-offset:4px}.porcelain-app button,.porcelain-app a{transition:background .18s,color .18s,opacity .18s}.porcelain-app h1,.porcelain-app h2,.porcelain-app p{margin:0}.porcelain-app svg{flex-shrink:0}.brand{color:var(--primary);align-items:center;gap:12px;display:flex}.brand>span{font-size:22px;font-family:var(--studio-serif);letter-spacing:3px}.brand small{letter-spacing:2.2px;margin-top:7px;font-family:Arial,sans-serif;font-size:8px;display:block}.stage{touch-action:none;min-height:340px;position:absolute;inset:103px 0 122px}.stage canvas{touch-action:none;outline:none}.icon-button{width:38px;height:38px;color:var(--primary);background:0 0;border:1px solid #0000;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.icon-button:hover{background:var(--secondary)}.branch-editor{flex:1;padding:20px 24px}.mouth-map{border:6px solid var(--secondary);width:80px;height:80px;box-shadow:inset 0 0 0 1px var(--border);background:var(--studio-faint);border-radius:50%;position:relative}.mouth-map:after,.mouth-map:before{content:"";background:var(--border);position:absolute}.mouth-map:after{width:100%;height:1px;top:50%;left:0}.mouth-map:before{width:1px;height:100%;top:0;left:50%}.mouth-map i{background:var(--primary);z-index:1;border-radius:50%;width:9px;height:9px;position:absolute;transform:translate(-50%,-50%)}.stage-loading,.canvas-fallback{text-align:center;height:100%;color:var(--muted-foreground);flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:40px;font-size:13px;display:flex}.context-error:not([hidden]){background:var(--background);z-index:4;place-content:center;padding:30px;font-size:14px;display:grid;position:absolute;inset:100px 0 120px}.context-error button{background:var(--primary);color:var(--primary-foreground);border-radius:var(--radius);margin-top:20px;padding:12px}.studio-modal{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--background);color:var(--foreground);width:min(490px,100vw - 28px);max-height:90svh;box-shadow:0 25px 100px color-mix(in srgb, var(--foreground) 18%, transparent);margin:auto;padding:0;position:fixed;inset:0;overflow:auto}.studio-modal::backdrop{background:color-mix(in srgb, var(--foreground) 30%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-body{padding:35px 30px;position:relative}.modal-close{z-index:1;background:var(--background);position:absolute;top:10px;right:10px}.modal-body h2{font-family:var(--studio-serif);margin:12px 0;font-size:25px;font-weight:400;line-height:1.5}.modal-body p{color:var(--muted-foreground);margin:10px 0;font-size:12px;line-height:1.9}.modal-body>small{letter-spacing:2px;color:var(--primary);font-size:9px}.modal-actions{justify-content:flex-end;gap:10px;margin-top:24px;display:flex}.modal-actions button{flex:1;height:44px;padding:0 15px;font-size:12px}.save-card{background:var(--secondary);border-radius:var(--radius-sm);justify-content:center;align-items:center;height:230px;display:flex;position:relative;overflow:hidden}.save-card small{letter-spacing:2px;color:var(--primary);font-size:7px;position:absolute;bottom:12px}.name-field{color:var(--muted-foreground);margin-top:21px;font-size:11px;display:block}.name-field input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--foreground);width:100%;margin-top:8px;padding:13px 12px;font-size:15px;display:block}.saved-link{color:var(--primary);justify-content:center;gap:5px;margin-top:20px;font-size:12px;display:flex}.bill-list{max-height:330px;margin:22px 0;padding:0;list-style:none;overflow:auto}.bill-list li{border-top:1px solid var(--border);align-items:center;gap:15px;padding:8px 0;display:flex}.bill-list svg{width:49px;height:58px}.bill-list li>div{flex:1}.bill-list strong{font-size:12px;font-weight:400;display:block}.bill-list small{color:var(--muted-foreground);margin-top:7px;font-size:10px;display:block}.bill-list li>span{color:var(--primary);font-size:12px}.removed-stems{margin:0;padding:12px 0;list-style:none}.removed-stems li{border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:8px;font-size:12px;display:flex}.empty-shelf{text-align:center;padding:70px 20px 100px}.empty-shelf>svg{color:var(--primary);margin:0 auto 25px}.empty-shelf h2{font-family:var(--studio-serif);font-size:27px;font-weight:400}.empty-shelf p{color:var(--muted-foreground);margin:15px 0 25px;font-size:12px}.saved-work{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);overflow:hidden}@media (min-width:1500px){.stage{inset:95px 0 122px}}@media (max-width:760px){.brand{gap:7px}.brand>svg{width:26px}.brand>span{letter-spacing:2px;font-size:19px}.brand small{letter-spacing:1.1px;margin-top:5px;font-size:6px}.stage{min-height:0;inset:79px 0 90px}.branch-editor{padding:22px}.modal-body{padding:27px 22px}.modal-body h2{font-size:23px}.save-card{height:235px}.modal-actions{gap:8px}.modal-actions button{min-height:46px;padding:0 10px;font-size:11px}.studio-modal{max-height:92svh}.empty-shelf{padding:55px 10px}.empty-shelf h2{font-size:24px}}@media (prefers-reduced-motion:reduce){.porcelain-app *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}@media (min-width:761px){.stage{inset:93px 0 122px}}@media (max-width:760px){.branch-editor input{scroll-margin-top:390px}html[lang=en-US] .brand>span{letter-spacing:.5px;font-size:14px;line-height:1.4}html[lang=en-US] .brand small{display:none}}.save-card img{object-fit:contain;width:100%;height:100%}
.immersive-app{background:var(--studio-stage);--dock-height:calc(162px + var(--safe-bottom));--overlay-bg:color-mix(in srgb, var(--background) 92%, transparent);--overlay-shadow:0 4px 24px color-mix(in srgb, var(--foreground) 5%, transparent);height:100dvh;min-height:0;position:fixed;inset:0;overflow:hidden}.minimal-header{top:var(--safe-top);z-index:5;pointer-events:none;justify-content:space-between;align-items:center;height:76px;padding:0 30px;display:flex;position:absolute;left:0;right:0}.minimal-header>*{pointer-events:auto}.minimal-brand{color:var(--primary);font-family:var(--studio-serif);letter-spacing:2px;align-items:center;gap:9px;font-size:19px;display:flex}.minimal-actions{align-items:center;gap:8px;display:flex}.tool-button{background:var(--overlay-bg);width:40px;height:40px;color:var(--primary);border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.tool-button:hover,.tool-button[aria-pressed=true]{background:var(--secondary)}.minimal-save,.minimal-pill,.preview-fab,.back-pill{border-radius:var(--radius-xl);background:var(--primary);height:40px;color:var(--primary-foreground);white-space:nowrap;justify-content:center;align-items:center;gap:7px;padding:0 18px;font-size:12px;display:flex}.minimal-save{margin-right:5px}.immersive-workspace{position:absolute;inset:0;overflow:hidden}.immersive-stage{inset:0 0 var(--dock-height);touch-action:none;background:var(--studio-stage);position:absolute}.preview-only .immersive-stage{inset:0}.scene-switch{z-index:4;top:calc(24px + var(--safe-top));background:var(--overlay-bg);border-radius:var(--radius-xl);box-shadow:var(--overlay-shadow);gap:2px;padding:4px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.scene-switch button{color:var(--muted-foreground);border-radius:var(--radius-xl);background:0 0;border:0;min-width:64px;height:30px;padding:0 12px;font-size:11px}.scene-switch button.active{background:var(--primary);color:var(--primary-foreground)}.floating-tools{z-index:4;transform:translateY(calc(-50% - var(--dock-height) / 2));flex-direction:column;gap:9px;display:flex;position:absolute;top:50%;left:25px}.selected-stems{right:25px;top:calc(100px + var(--safe-top));bottom:calc(var(--dock-height) + 70px);scrollbar-width:none;z-index:4;flex-direction:column;gap:8px;display:flex;position:absolute;overflow:auto}.selected-stems button{border-radius:var(--radius-sm);background:var(--overlay-bg);border:1px solid #0000;width:44px;height:49px;padding:2px}.selected-stems button.active{border-color:var(--primary);background:var(--secondary)}.selected-stems svg{width:100%;height:100%}.preview-fab{bottom:calc(var(--dock-height) + 20px);z-index:4;background:var(--overlay-bg);color:var(--primary);box-shadow:var(--overlay-shadow);position:absolute;right:26px}.material-dock{height:var(--dock-height);z-index:5;background:var(--background);border-top:1px solid var(--border);padding:10px max(28px, calc((100vw - 1250px) / 2)) calc(9px + var(--safe-bottom));flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}.dock-menu{flex-shrink:0;justify-content:space-between;align-items:center;height:30px;display:flex}.dock-tabs{gap:26px;display:flex}.dock-tabs button{height:30px;color:var(--muted-foreground);background:0 0;border:0;border-bottom:1px solid #0000;align-items:center;gap:7px;font-size:12px;display:flex}.dock-tabs button.active{border-color:var(--primary);color:var(--primary)}.auto-minimal{color:var(--primary);background:0 0;border:0;align-items:center;gap:6px;height:30px;font-size:11px;display:flex}.rail-wrap{flex:1;align-items:center;gap:12px;min-height:0;display:flex}.rail-arrow{color:var(--primary);background:0 0;border:0;flex-shrink:0;place-items:center;width:24px;height:44px;display:grid}.material-rail{scrollbar-width:none;scroll-snap-type:x proximity;flex:1;align-items:center;gap:12px;min-width:0;height:100%;display:flex;overflow:auto hidden}.material-item{border-radius:var(--radius-sm);scroll-snap-align:start;height:100%;color:var(--foreground);background:0 0;border:0;flex-direction:column;flex:0 0 80px;justify-content:center;align-items:center;gap:2px;padding:0 5px;display:flex;position:relative}.material-item>svg,.material-item>img{object-fit:contain;width:70px;height:74px}.material-item>span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:9px;overflow:hidden}.material-item:hover{background:var(--secondary)}.material-item.chosen:after{content:"";background:var(--primary);border-radius:50%;width:4px;height:4px;position:absolute;bottom:0}.compact-editor{right:83px;top:calc(98px + var(--safe-top));z-index:6;background:var(--overlay-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius);width:266px;box-shadow:var(--overlay-shadow);border:1px solid var(--border);padding:12px 17px 14px;position:absolute}.editor-top{justify-content:space-between;align-items:center;font-size:12px;display:flex}.editor-top .tool-button{background:0 0;width:30px;height:30px}.editor-modes{border-bottom:1px solid var(--border);justify-content:space-between;margin:8px 0 15px;display:flex}.editor-modes button{color:var(--muted-foreground);background:0 0;border:0;border-bottom:1px solid #0000;align-items:center;gap:5px;height:32px;font-size:10px;display:flex}.editor-modes button.active{border-color:var(--primary);color:var(--primary)}.compact-fields{min-height:146px}.compact-fields label{margin-bottom:10px;font-size:10px;display:block}.compact-fields label>span{justify-content:space-between;margin-bottom:4px;display:flex}.compact-fields output{color:var(--muted-foreground);font-size:9px}.compact-fields input{width:100%;accent-color:var(--primary);height:20px}.compact-editor-footer{justify-content:space-between;align-items:center;margin-top:8px;display:flex}.compact-editor-footer .minimal-pill{height:32px;padding:0 15px;font-size:10px}.compact-editor-footer .tool-button{background:0 0;width:32px;height:32px}.compact-colors{grid-template-columns:repeat(3,1fr);justify-items:center;gap:12px;padding:10px;display:grid}.compact-colors button{border:2px solid var(--background);border-radius:50%;place-items:center;width:38px;height:38px;display:grid}.compact-colors button[aria-pressed=true]{outline:1px solid var(--primary)}.compact-position{align-items:center;gap:20px;padding-top:15px;display:flex}.position-ranges{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.back-pill{bottom:calc(24px + var(--safe-bottom));z-index:4;background:var(--overlay-bg);color:var(--primary);position:absolute;left:50%;transform:translate(-50%)}.minimal-warning{top:calc(80px + var(--safe-top));background:var(--background);z-index:9;border-radius:var(--radius);max-width:85%;padding:10px;font-size:11px;position:absolute;left:50%;transform:translate(-50%)}.immersive-app .context-error:not([hidden]){z-index:10;inset:0}.immersive-app .studio-modal{width:min(430px,100vw - 24px)}.immersive-app .modal-body{padding:25px}.immersive-app .save-card{height:min(30dvh,270px)}.immersive-app .modal-body h2{font-size:22px}.immersive-app .modal-body p{font-size:11px}.immersive-app .save-card~p{display:none}.immersive-app .saved-link{margin-top:13px}.immersive-app .name-field{margin-top:12px}.immersive-app .modal-actions{margin-top:15px}@media (max-width:760px){.immersive-app{--dock-height:154px}.minimal-header{height:66px;padding:0 14px}.minimal-brand{letter-spacing:1px;gap:6px;font-size:15px}.minimal-brand svg{width:21px}.minimal-actions{gap:4px}.minimal-save{height:34px;padding:0 12px;font-size:11px}.minimal-actions .tool-button{width:32px;height:32px}.language-tool,.expand-tool{display:none}.scene-switch{top:calc(68px + var(--safe-top));padding:3px}.scene-switch button{min-width:57px;height:27px;padding:0 9px;font-size:10px}.floating-tools{gap:7px;top:calc(50% + 10px);left:12px}.floating-tools .tool-button{width:35px;height:35px}.floating-tools svg{width:16px}.selected-stems{right:12px;top:calc(113px + var(--safe-top));bottom:calc(var(--dock-height) + 50px);gap:5px}.selected-stems button{width:33px;height:38px}.preview-fab{right:12px;bottom:calc(var(--dock-height) + 12px);height:33px;padding:0 13px;font-size:10px}.material-dock{padding:8px 12px calc(8px + var(--safe-bottom))}.dock-menu{height:28px}.dock-tabs{gap:23px;padding-left:5px}.dock-tabs button{font-size:11px}.auto-minimal{font-size:10px}.rail-wrap{gap:3px}.rail-arrow{width:17px}.material-rail{gap:5px}.material-item{flex-basis:69px}.material-item>svg,.material-item>img{width:60px;height:68px}.material-item>span{font-size:8px}.compact-editor{width:auto;height:var(--dock-height);z-index:7;border-width:1px 0 0;border-radius:0;padding:8px 14px;inset:auto 12px 0}.editor-top{height:22px;font-size:11px}.editor-modes{border:0;gap:15px;margin:0;position:absolute;top:6px;right:45px}.editor-modes button{height:24px;font-size:9px}.compact-fields{align-items:center;gap:17px;height:63px;min-height:0;display:flex}.compact-fields label{flex:1;min-width:0;margin:0;font-size:9px}.compact-fields output{font-size:8px}.compact-fields input{height:27px}.compact-editor-footer{height:34px;margin:0}.compact-editor-footer .minimal-pill{height:29px}.compact-colors{justify-content:center;gap:15px;width:100%;padding:0;display:flex}.compact-colors button{width:30px;height:30px}.compact-position{gap:18px;width:100%;padding:0}.compact-position .mouth-map{flex-shrink:0;width:58px;height:58px}.position-ranges{flex-direction:row;gap:15px}.position-ranges input{width:calc(50% - 8px)}.back-pill{bottom:calc(24px + var(--safe-bottom));font-size:11px}.preview-only .floating-tools{transform:translateY(-50%)}.immersive-app .modal-body{padding:21px}.immersive-app .studio-modal{max-height:94dvh}.immersive-app .save-card{height:28dvh}.immersive-app .modal-body h2{margin:9px 0;font-size:21px}.immersive-app .name-field input{padding:10px}.immersive-app .modal-actions button{height:40px;min-height:40px}}@media (max-height:620px) and (min-width:761px){.immersive-app{--dock-height:calc(125px + var(--safe-bottom))}.material-item>svg,.material-item>img{height:55px}.minimal-header{height:60px}.scene-switch{top:calc(15px + var(--safe-top))}.compact-editor{top:calc(70px + var(--safe-top))}.selected-stems{top:calc(74px + var(--safe-top))}.floating-tools{gap:5px}}@media (prefers-reduced-motion:reduce){.material-rail{scroll-behavior:auto}}.selected-stems button{background:0 0;border-color:#0000}.selected-stems button.active{background:var(--overlay-bg);border-color:var(--primary)}.immersive-shelf{inset:calc(100px + var(--safe-top)) 5% max(30px, var(--safe-bottom));flex-direction:column;gap:25px;min-height:0;display:flex;position:absolute}.immersive-shelf h1{font-family:var(--studio-serif);color:var(--primary);letter-spacing:2px;font-size:28px;font-weight:400}.shelf-rail{scroll-snap-type:x mandatory;flex:1;align-items:center;gap:32px;min-height:0;padding-bottom:12px;display:flex;overflow-x:auto}.shelf-artwork{scroll-snap-align:center;flex-direction:column;flex:0 0 min(450px,65vw);max-height:100%;display:flex}.artwork-image{aspect-ratio:1;background:var(--background);border:0;min-height:0;max-height:calc(100dvh - 250px);display:block}.artwork-image img,.artwork-image svg{object-fit:contain;width:100%;height:100%}.artwork-caption{justify-content:space-between;align-items:center;gap:15px;padding-top:14px;display:flex}.artwork-caption h2{font-size:16px;font-family:var(--studio-serif);overflow-wrap:anywhere;max-width:240px;font-weight:400}.artwork-caption>div{gap:3px;display:flex}.artwork-caption .tool-button{background:0 0;width:32px;height:32px}.empty-shelf-minimal{color:var(--muted-foreground);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;font-size:14px;display:flex}@media (max-width:760px){.immersive-shelf{inset:calc(95px + var(--safe-top)) 20px max(25px, var(--safe-bottom));gap:16px}.immersive-shelf h1{font-size:24px}.shelf-rail{gap:20px}.shelf-artwork{flex-basis:calc(100vw - 40px)}.artwork-caption h2{font-size:15px}.artwork-caption .tool-button{width:28px;height:32px}}.asset-thumb{flex-shrink:0;width:72px;height:74px;display:block;position:relative}.asset-thumb img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%;display:block}.asset-thumb i{border:1px solid var(--background);border-radius:50%;width:6px;height:6px;position:absolute;bottom:2px;right:3px}.selected-stems .asset-thumb{width:100%;height:100%}.material-item>.asset-thumb{margin-top:-2px}.material-item>.asset-thumb img{transition:transform .2s}.material-item:hover>.asset-thumb img{transform:scale(1.09)}@media (max-width:760px){.material-item>.asset-thumb{width:66px;height:67px}}@media (max-height:620px) and (min-width:761px){.material-item>.asset-thumb{height:52px}}.asset-loading{top:calc(80px + var(--safe-top));z-index:5;color:var(--primary);align-items:center;gap:7px;font-size:10px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.asset-loading:empty{display:none}.asset-loading i{border:1px solid var(--primary);border-right-color:#0000;border-radius:50%;width:8px;height:8px;animation:.8s linear infinite asset-spin}@keyframes asset-spin{to{transform:rotate(360deg)}}@media (max-width:760px){.asset-loading{top:calc(105px + var(--safe-top))}.immersive-app{--dock-height:calc(154px + var(--safe-bottom))}}.flow-progress{top:calc(29px + var(--safe-top));z-index:4;white-space:nowrap;color:var(--muted-foreground);align-items:center;gap:12px;font-size:11px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.flow-progress>span{opacity:.55;align-items:center;gap:6px;display:flex}.flow-progress>span.current{color:var(--primary);opacity:1}.flow-progress small{border:1px solid var(--border);border-radius:50%;place-items:center;width:21px;height:21px;font-size:9px;display:grid}.flow-progress .current small{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.flow-progress svg{color:var(--muted-foreground);margin-left:6px}.placement-controls{bottom:calc(20px + var(--safe-bottom));z-index:6;background:var(--overlay-bg);border:1px solid var(--border);border-radius:var(--radius);max-width:calc(100vw - 24px);box-shadow:var(--overlay-shadow);padding:9px 14px 13px;position:absolute;left:50%;transform:translate(-50%)}.placement-heading{color:var(--primary);justify-content:space-between;align-items:center;gap:12px;font-size:11px;display:flex}.placement-heading .tool-button{background:0 0;width:30px;height:30px}.placement-buttons{align-items:center;gap:4px;display:flex}.placement-buttons .tool-button{width:34px;height:36px}.placement-buttons label{white-space:nowrap;align-items:center;gap:7px;padding:0 10px;font-size:10px;display:flex}.placement-buttons input{width:95px;accent-color:var(--primary)}.placement-buttons .minimal-pill{height:34px;padding:0 13px;font-size:10px}.preview-requires-arrangement,.immersive-app>.empty-shelf-minimal{position:absolute;inset:80px 20px 0}@media (max-width:760px){.flow-progress{top:calc(76px + var(--safe-top));gap:10px;font-size:10px}.flow-progress small{width:19px;height:19px}.placement-controls{bottom:calc(12px + var(--safe-bottom));width:calc(100vw - 24px);padding:7px 10px 10px}.placement-heading{font-size:10px}.placement-buttons{justify-content:space-between;gap:3px}.placement-buttons .tool-button{width:32px;height:38px}.placement-buttons label{padding:0 5px;font-size:0}.placement-buttons input{width:65px}.placement-buttons .minimal-pill{min-width:58px;padding:0 10px}}.scene-actions{left:50%;bottom:calc(24px + var(--safe-bottom));z-index:4;white-space:nowrap;align-items:center;gap:10px;display:flex;position:absolute;transform:translate(-50%)}.scene-actions .back-pill{position:static;transform:none}.scene-actions .minimal-pill,.scene-actions .back-pill{height:40px;font-size:12px}@media (max-width:760px){.scene-actions{bottom:calc(20px + var(--safe-bottom));gap:7px}.scene-actions .minimal-pill,.scene-actions .back-pill{height:38px;padding:0 14px;font-size:11px}}