:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue",sans-serif;color:#24262a;background:#fff;font-synthesis:none;font-size:14px;--muted:#92959c;--line:#ededef;--blue:#3979e8;--soft-blue:#edf3ff;--sidebar:#fafafb;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0;background:none}button:disabled{cursor:not-allowed;opacity:.4}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{pointer-events:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #9fbeff;outline-offset:4px}input:focus-visible,select:focus-visible{outline:2px solid #9fbeff;outline-offset:2px}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}h1,h2,h3,p{margin:0}::selection{background:#dce9ff}
.app-shell{display:flex;min-height:100svh}.sidebar{width:228px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--line);padding:30px 17px 20px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:5}.brand{display:flex;gap:10px;align-items:center;padding:0 10px;letter-spacing:-.5px;font-weight:650;font-size:19px}.brand img{border-radius:12px}.sidebar-content{padding-top:44px;flex:1}.nav-caption{font-size:11px;letter-spacing:.6px;color:#a0a3aa;font-weight:500;padding:0 13px;margin-bottom:12px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;min-height:43px;padding:11px 13px;text-align:left;border-radius:11px;color:#777b83;font-size:13px;margin-bottom:5px;transition:background .2s,color .2s}.nav-item svg{width:18px;height:18px}.nav-item:hover{background:#f0f0f3;color:#24262a}.nav-item.active{background:#eceef2;color:#2b3038;font-weight:550}.nav-dot{width:5px;height:5px;background:#727c8d;border-radius:50%;margin-left:auto}.nav-count{margin-left:auto;color:#93969d;font-size:11px}.sidebar-divider{height:1px;background:var(--line);margin:24px 13px}.companion-heading{display:flex;align-items:center;justify-content:space-between;padding-right:8px;margin-bottom:8px}.companion-heading .nav-caption{margin:0}.companion-list{display:flex;flex-direction:column;gap:5px}.companion-link{display:flex;gap:11px;align-items:center;text-align:left;padding:9px 12px;border-radius:12px;width:100%;transition:background .2s}.companion-link:hover{background:#f0f0f3}.companion-thumb{width:33px;height:33px;flex-shrink:0;border:1px solid #ededf0;border-radius:50%;background:#fff;overflow:hidden;display:grid;place-items:center;color:#92959b;font-size:12px}.companion-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.companion-copy{min-width:0;flex:1}.companion-copy strong{font-size:12px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.companion-copy small{font-size:10px;color:#9a9da4;display:block;margin-top:3px}.companion-online{width:5px;height:5px;border-radius:50%;background:#86af93}.sidebar-import{display:flex;gap:10px;align-items:center;font-size:12px;color:#92969d;padding:15px 13px;margin-top:7px}.sidebar-import:hover{color:var(--blue)}.sidebar-import svg{width:16px;height:16px}.sidebar-bottom{padding-top:20px}.help-nav{font-size:12px;margin-bottom:17px;color:#8f939b}.device-card{border-top:1px solid var(--line);padding:19px 9px 0;display:flex;gap:11px;align-items:center}.device-icon{width:33px;height:33px;background:#eff0f3;border-radius:10px;display:grid;place-items:center;color:#9298a4}.device-icon svg{width:17px;height:17px}.device-card strong{font-size:11px;font-weight:500;display:block}.device-card div>span{display:block;font-size:10px;color:#a1a4aa;margin-top:4px}.saved-dot{width:5px;height:5px;border-radius:50%;background:#8bb59b;margin-left:auto}.saved-dot.warning{background:#d2a15c}.workspace{margin-left:228px;flex:1;min-width:0;display:flex;flex-direction:column}.workspace-header{height:93px;display:flex;align-items:center;justify-content:space-between;padding:0 43px;gap:16px}.page-title{display:flex;align-items:center;gap:15px;white-space:nowrap}.page-title h1{font-size:14px;font-weight:550;letter-spacing:.1px}.header-divider{width:1px;height:13px;background:#e4e5e8}.page-title>span:last-child{font-size:11px;color:#a0a3aa}.header-actions{display:flex;gap:13px;align-items:center}.mobile-brand{display:none}.icon-button{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;color:#92969e;transition:background .2s,color .2s;flex-shrink:0}.icon-button:hover{background:#f1f2f4;color:#353a44}.icon-button.tiny{width:25px;height:25px}.icon-button.tiny svg{width:16px;height:16px}.button{min-height:42px;border-radius:12px;padding:11px 18px;display:inline-flex;justify-content:center;align-items:center;gap:8px;font-size:12px;font-weight:550;transition:background .2s,transform .2s;white-space:nowrap}.button:active{transform:scale(.98)}.button.primary{background:#2b2d32;color:#fff;box-shadow:0 2px 3px #23262e08}.button.primary:hover{background:#42454d}.button.secondary{background:#fff;border:1px solid #e5e6e9;color:#60646c}.button.secondary:hover{background:#f7f8fa}.button.small{min-height:35px;padding:9px 13px;border-radius:10px;font-size:11px}.button svg{width:16px;height:16px}.text-button{color:var(--blue);font-size:12px;padding:8px 0;display:inline-flex;align-items:center;justify-content:center;gap:5px}.text-button:hover{color:#215bbd}.text-button svg{width:15px;height:15px}
.room{position:relative;flex:1;min-height:655px;display:flex;flex-direction:column}.room-intro{text-align:center;padding:43px 20px 0;pointer-events:none}.presence{font-size:10px;letter-spacing:.35px;color:#a0a4ad;display:inline-flex;align-items:center;gap:7px}.presence i{width:5px;height:5px;border-radius:50%;background:#8db89e}.room-intro h2{font-size:33px;letter-spacing:-1.6px;line-height:1.4;font-weight:550;margin:17px 0 11px;color:#2e3035}.room-intro>p{font-size:12px;color:#a1a4ac;letter-spacing:.4px}.pet-stage{height:390px;min-height:390px;position:relative;margin:4px 24px 0;flex:1;isolation:isolate}.pet{position:absolute;width:clamp(175px,22vw,320px);transform:translate(-50%,-50%);user-select:none;touch-action:none;transition:left .45s var(--ease),top .45s var(--ease);z-index:1}.pet.dragging{transition:none;z-index:4}.pet-body{width:100%;aspect-ratio:1;display:block;position:relative;border-radius:30px;padding:0;cursor:grab;transform:scale(var(--pet-scale,1));transform-origin:center bottom;transition:transform .35s var(--ease)}.pet.dragging .pet-body{cursor:grabbing}.pet-body::after{content:"";position:absolute;inset:12%;border:1px dashed transparent;border-radius:24px;transition:border-color .2s;pointer-events:none}.pet-body:hover::after{border-color:#e7e9ee}.pet.dragging .pet-body::after{border-color:#c8d9f8}.pet-body:focus-visible{outline-offset:-25px}.pet-poster,.pet-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#fff;border-radius:15px}.pet-poster{opacity:1;transition:opacity .2s}.pet-video{opacity:0;transition:opacity .2s linear;will-change:opacity}.pet-video.front{opacity:1}.pet.has-video .pet-poster{opacity:0}.pet-caption{text-align:center;margin-top:15px;position:relative;pointer-events:none}.pet-name{font-size:15px;font-weight:550;letter-spacing:-.2px;display:inline-flex;align-items:center;gap:6px}.pet-name svg{width:11px;height:11px;color:#babdc3;opacity:0;transform:translateX(-3px);transition:opacity .2s,transform .2s}.pet:hover .pet-name svg,.pet:focus-within .pet-name svg{opacity:1;transform:translateX(0)}.pet-status{font-size:10px;color:#a0a4ac;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:5px}.pet-status svg{width:11px;height:11px;stroke-width:1.4}.pet-status .status-dot{width:4px;height:4px;background:#9eb5a6;border-radius:50%}.pet.dragging .pet-caption{opacity:.5}.room-footer{display:flex;align-items:center;flex-direction:column;gap:20px;padding:22px 20px 28px;z-index:3;pointer-events:none}.playback-bar{display:flex;align-items:center;padding:5px;background:#f5f5f7;border:1px solid #f0f0f2;border-radius:30px;gap:3px;pointer-events:auto}.playback-bar>button{height:34px;display:flex;align-items:center;gap:8px;border-radius:24px;padding:0 17px;font-size:11px;color:#8e939b;transition:background .2s,box-shadow .2s}.playback-bar>button:hover{color:#454a54}.playback-bar>button.motion-button{background:#fff;box-shadow:0 2px 6px #1a23300d;color:#606873}.playback-bar svg{width:14px;height:14px;stroke-width:1.6}.motion-dot{width:4px;height:4px;border-radius:50%;background:#88b89a;margin-left:3px}.paused .motion-dot{background:#c1c4cb}.control-divider{height:13px;width:1px;background:#e2e4e8;margin:0 3px}.interaction-hint{display:flex;align-items:center;gap:7px;color:#b1b4bb;font-size:10px;letter-spacing:.3px}.interaction-hint svg{width:11px;height:11px}.interaction-hint i{font-style:normal;color:#c8cad0;margin:0 2px}.workspace-footer{padding:22px 43px 25px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.3px;color:#b3b6bd;gap:10px}.workspace-footer>span:last-child{display:flex;align-items:center;gap:6px}.workspace-footer i{width:4px;height:4px;background:#b7bdc7;border-radius:50%}.empty-space{text-align:center;flex:1;min-height:370px;padding:70px 20px;display:flex;align-items:center;flex-direction:column}.empty-mark{display:grid;place-items:center;width:65px;height:65px;border-radius:22px;background:#f6f7fa;color:#a0b5da;margin-bottom:20px}.empty-mark svg{width:26px;height:26px}.empty-space h3{font-size:19px;font-weight:550}.empty-space p{font-size:12px;color:#a0a4ad;margin:13px 0 24px}.empty-space .text-button{margin-top:12px}
dialog{border:1px solid #e7e8ec;padding:0;color:inherit;background:#fff;box-shadow:0 22px 100px #18243e18}dialog::backdrop{background:#1c243a26;backdrop-filter:blur(4px)}dialog[open]{animation:modal-in .24s var(--ease)}.modal{width:min(570px,calc(100vw - 32px));max-height:calc(100svh - 64px);border-radius:24px;overflow:auto}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:28px 30px 0}.modal-header h2{font-size:23px;letter-spacing:-.7px;font-weight:600;line-height:1.5}.modal-header .icon-button{margin:-3px -7px 0 0}.eyebrow{display:block;font-size:10px;color:#a0a5ae;letter-spacing:.6px;margin:0 0 6px}.modal-body{padding:19px 30px 28px}.modal-description{color:#959ba5;font-size:12px;line-height:1.9;margin-bottom:24px}.drop-zone{border:1px dashed #d9dfe9;background:#fafbfd;border-radius:17px;text-align:center;padding:32px 16px 27px;display:flex;flex-direction:column;align-items:center;transition:background .2s,border-color .2s}.drop-zone.dragover{background:#f0f5ff;border-color:#84a9ec}.upload-symbol{width:49px;height:49px;border-radius:16px;display:grid;place-items:center;background:#eef3fc;color:#7c9dcf;margin-bottom:18px}.upload-symbol svg{width:22px;height:22px}.drop-zone>strong{font-size:13px;font-weight:550;margin-bottom:8px}.drop-zone>span:not(.upload-symbol){font-size:10px;color:#a3a9b3;line-height:1.8}.drop-actions{display:flex;gap:10px;margin-top:23px}.drop-actions .button{min-height:36px;padding:10px 15px;font-size:11px;border-radius:10px}.import-note{display:flex;gap:11px;margin-top:22px;color:#a2a8b1;align-items:flex-start}.import-note>svg{width:15px;height:15px;margin-top:3px}.import-note p{font-size:10px;line-height:1.9}.modal-footer{display:flex;justify-content:space-between;gap:12px;position:sticky;bottom:0;padding:16px 30px;background:#fff;border-top:1px solid var(--line);z-index:2}.form-error{font-size:11px;line-height:1.8;color:#af534d;background:#fff5f3;border:1px solid #f4dfdc;border-radius:10px;padding:10px 13px;margin-top:15px}.import-group{border:1px solid var(--line);padding:18px;border-radius:15px;margin-top:14px}.import-group:first-child{margin-top:0}.import-group-heading{display:flex;align-items:center;gap:13px;margin-bottom:19px}.import-preview{width:55px;height:55px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:#fafbfd;display:grid;place-items:center;flex-shrink:0;color:#bec8d8}.import-preview img,.import-preview video{width:100%;height:100%;object-fit:contain;background:#fff}.import-name{flex:1;min-width:0}.import-name label{display:block;font-size:10px;color:#a0a5af;margin-bottom:5px}.text-input{width:100%;min-height:35px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:9px;background:#fff;font-size:12px;color:#454a53}.import-group-heading small{font-size:9px;color:#a9afb7;display:block;margin-top:6px}.asset-mapping{display:grid;grid-template-columns:65px minmax(0,1fr);align-items:center;gap:10px}.asset-mapping label{font-size:11px;color:#878e99;display:flex;gap:5px;align-items:center}.asset-mapping label b{font-size:10px;color:#82a1d3;font-weight:400}.asset-mapping select{min-height:31px;min-width:0;width:100%;font-size:10px;color:#737b88;border:1px solid #e9ebef;background:#fafbfc;border-radius:8px;padding:6px 25px 6px 8px;overflow:hidden;text-overflow:ellipsis}.import-summary{font-size:10px;color:#a3a9b2;margin:14px 1px 0}.import-options-note{font-size:10px;color:#929aaa;line-height:1.8;margin:15px 0 0}
.drawer{position:fixed;inset:16px 16px 16px auto;margin:0;width:350px;height:calc(100svh - 32px);max-height:none;max-width:calc(100vw - 32px);border-radius:21px;overflow:auto}.drawer[open]{animation:drawer-in .3s var(--ease)}.drawer::backdrop{background:#1729450a;backdrop-filter:blur(1px)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;font-size:11px;color:#989eaa}.drawer-header .icon-button{width:29px;height:29px}.detail-profile{text-align:center;padding:13px 25px 25px}.detail-picture{width:102px;height:102px;display:grid;place-items:center;background:#f8f9fc;border-radius:50%;margin:0 auto 17px;overflow:hidden;border:1px solid #eeeef2;color:#9ca9bc;font-size:27px}.detail-picture img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.detail-profile h2{font-size:22px;font-weight:550;letter-spacing:-.6px;overflow-wrap:anywhere}.detail-state{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:#9ba3ae;margin-top:9px}.detail-state svg{width:12px;height:12px}.detail-tabs{margin:0 23px;padding:4px;border-radius:25px;background:#f3f4f6;display:flex;gap:3px}.detail-tabs button{flex:1;padding:8px 6px;border-radius:20px;font-size:11px;color:#a0a5af}.detail-tabs button.selected{background:#fff;color:#5c6573;box-shadow:0 1px 5px #15243a0b}.detail-section{padding:25px 23px}.section-label{font-size:10px;color:#a0a7b2;letter-spacing:.4px;font-weight:400;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}.section-label span{font-size:9px;color:#b5bac3}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.action-button{border:1px solid #eceef2;border-radius:13px;display:flex;align-items:center;flex-direction:column;gap:10px;padding:16px 5px 12px;color:#919aa8;font-size:10px;transition:border-color .2s,background .2s}.action-button svg{width:20px;height:20px;stroke-width:1.35}.action-button:hover{background:#f7f9fd;border-color:#dce6f7}.action-button.selected{background:#f0f5ff;border-color:#dce7fc;color:#6f94ce}.detail-tip{font-size:10px;line-height:1.8;color:#acb2bc;margin-top:15px}.detail-divider{height:1px;background:var(--line);margin:0 23px}.detail-activity{padding:24px 23px}.activity-list{display:flex;flex-direction:column;gap:18px}.activity-item{display:flex;gap:10px;align-items:flex-start}.activity-item>svg{width:15px;height:15px;color:#a4abb7;margin-top:2px}.activity-item strong{font-size:10px;display:block;font-weight:450;color:#838c9a}.activity-item small{font-size:9px;display:block;color:#b6bcc5;margin-top:5px}.detail-form-row{margin-bottom:24px}.detail-form-row label{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px;color:#828b99}.detail-form-row output{color:#a4acb8;font-size:10px}.detail-form-row input[type=range]{width:100%;accent-color:#7b9fd7;cursor:pointer;height:4px}.scale-labels{display:flex;justify-content:space-between;font-size:9px;color:#b5bcc6;margin-top:9px}.asset-list{display:flex;flex-direction:column;gap:11px}.asset-row{display:flex;align-items:center;gap:8px;font-size:10px;color:#969fac}.asset-row svg{width:12px;height:12px;color:#9ab1a4}.asset-row .asset-filename{margin-left:auto;max-width:155px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#b1b8c2;font-size:9px}.asset-row.missing svg{color:#c7cbd2}.detail-bottom{padding:0 23px 25px;display:flex;justify-content:space-between;gap:12px}.detail-bottom .text-button{font-size:10px;color:#9da5b0}.detail-bottom .text-button:hover{color:#d1847e}.detail-local{display:flex;align-items:center;justify-content:center;gap:6px;color:#bcc2ca;font-size:9px;padding:0 20px 23px}.detail-local svg{width:12px;height:12px}
.library-modal{width:min(750px,calc(100vw - 32px))}.library-toolbar{display:flex;justify-content:space-between;align-items:center;padding:24px 30px 20px;gap:15px}.segmented{background:#f3f4f6;padding:4px;border-radius:20px;display:flex}.segmented button{font-size:10px;color:#a0a5ad;border-radius:20px;padding:7px 15px}.segmented button.selected{background:#fff;color:#59616d;box-shadow:0 1px 4px #1f283c0b}.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:0 30px 30px}.library-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:12px;text-align:center;position:relative}.library-art{height:150px;width:100%;display:grid;place-items:center;cursor:pointer;border-radius:9px;color:#b2baca}.library-art img{width:100%;height:100%;object-fit:contain}.library-card h3{font-size:12px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:11px 0 6px}.library-card p{color:#a9afb9;font-size:9px}.library-card .text-button{font-size:10px;margin-top:9px}.library-card .library-type{position:absolute;right:10px;top:10px;background:#f5f6f8;border-radius:5px;color:#acb2bd;font-size:8px;padding:4px 6px}.library-empty{grid-column:1/-1;text-align:center;color:#abb1bb;font-size:12px;padding:65px 15px}.settings-modal{width:min(430px,calc(100vw - 32px))}.settings-modal h2{font-size:21px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 0 24px}.setting-row strong,.setting-action strong{font-size:12px;font-weight:500}.setting-row p,.setting-action small{display:block;font-size:10px;color:#a0a7b2;line-height:1.8;margin-top:6px}.switch{width:35px;height:21px;background:#d3d7df;border-radius:15px;padding:3px;flex-shrink:0;transition:background .2s}.switch span{width:15px;height:15px;border-radius:50%;background:#fff;display:block;box-shadow:0 1px 2px #151b2c16;transition:transform .2s}.switch[aria-checked=true]{background:#7f9ece}.switch[aria-checked=true] span{transform:translateX(14px)}.setting-action{padding:20px 0;display:flex;width:100%;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid var(--line);gap:10px}.setting-action>svg{color:#a1a9b6;width:17px;height:17px}.setting-action:hover strong{color:var(--blue)}.settings-footnote{font-size:10px;line-height:1.9;color:#b0b6c0;margin-top:13px}.help-modal{width:min(590px,calc(100vw - 32px))}.help-item{display:flex;gap:16px;margin:10px 0 26px}.help-item>span{color:#b4c5e0;font-size:11px;padding-top:2px}.help-item h3{font-size:12px;font-weight:550;margin-bottom:9px}.help-item p{font-size:11px;line-height:1.9;color:#969eab}.filename-guide{display:grid;grid-template-columns:1fr auto;gap:9px 20px;margin-top:13px;padding:14px;background:#f8f9fb;border-radius:11px;color:#a2aab7;font-size:10px}.filename-guide code{font-size:9px;overflow-wrap:anywhere}.help-credit{font-size:10px;line-height:1.9;color:#b2b8c2;border-top:1px solid var(--line);padding-top:17px}.toast-region{position:fixed;bottom:28px;left:calc(50% + 114px);transform:translateX(-50%);z-index:50;pointer-events:none}.toast{display:flex;align-items:center;gap:10px;padding:13px 18px;white-space:nowrap;border-radius:14px;background:#323842;color:#fff;box-shadow:0 6px 30px #18233820;font-size:11px;animation:toast-in .25s var(--ease);pointer-events:auto;max-width:calc(100vw - 35px)}.toast svg{width:14px;height:14px;color:#b5d6c4}.toast>span{overflow:hidden;text-overflow:ellipsis}.toast button{color:#b7ccf4;font-size:11px;padding:0 0 0 10px;border-left:1px solid #ffffff26;margin-left:5px}.drop-page-overlay{position:fixed;inset:14px;z-index:40;border:2px dashed #8caee7;border-radius:22px;background:#f6f9ffef;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:15px;pointer-events:none;color:#7c9bcd}.drop-page-overlay svg{width:36px;height:36px}.drop-page-overlay strong{font-size:19px;font-weight:550}
@keyframes modal-in{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}@keyframes drawer-in{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1550px){.room-intro{padding-top:70px}.pet-stage{min-height:430px}.room-footer{padding-bottom:45px}.pet{width:340px}.room-intro h2{font-size:37px}}
@media(max-width:1100px){.sidebar{width:190px;padding:27px 12px 18px}.brand{font-size:16px;gap:8px;padding:0 8px}.brand img{width:32px;height:32px}.workspace{margin-left:190px}.workspace-header{padding:0 30px}.workspace-footer{padding-left:30px;padding-right:30px}.pet{width:clamp(170px,23vw,250px)}.pet-stage{margin:10px 6px 0}.toast-region{left:calc(50% + 95px)}}
@media(max-width:850px){.sidebar{width:76px;padding:26px 12px 18px}.brand{padding:0;justify-content:center}.brand>span,.nav-caption,.nav-item>span,.companion-heading,.sidebar-divider,.companion-copy,.companion-online,.sidebar-import,.device-card>div,.saved-dot{display:none}.sidebar-content{padding-top:36px}.nav-item{justify-content:center;padding:13px 0;height:43px;margin-bottom:8px}.companion-list{border-top:1px solid var(--line);padding-top:20px;margin-top:23px;gap:12px}.companion-link{padding:4px 0;justify-content:center}.device-card{padding:17px 0 0;justify-content:center}.help-nav{margin-bottom:13px}.workspace{margin-left:76px}.workspace-header{height:83px;padding:0 25px}.room-intro{padding-top:35px}.room-intro h2{font-size:29px}.pet{width:clamp(160px,27vw,240px)}.pet-caption{margin-top:12px}.pet-stage{margin:10px 0 0;min-height:360px}.room{min-height:610px}.toast-region{left:calc(50% + 38px)}.workspace-footer{font-size:8px;padding:17px 25px 22px}}
@media(max-width:600px){.sidebar{display:none}.workspace{margin-left:0}.workspace-header{height:78px;padding:0 20px;gap:10px}.mobile-brand{display:block;line-height:0}.page-title{gap:10px}.page-title h1{font-size:12px}.page-title .header-divider,.page-title>span:last-child{display:none}.header-actions{gap:5px}.header-actions .button{font-size:10px;padding:9px 11px}.header-actions .icon-button{width:31px;height:31px}.room{min-height:calc(100svh - 135px)}.room-intro{padding:32px 15px 0}.room-intro h2{font-size:27px;margin-top:16px}.room-intro>p{font-size:10px;letter-spacing:.2px}.presence{font-size:9px}.pet-stage{min-height:300px;height:300px;margin:0;flex:1}.pet{width:30vw;max-width:180px}.pet-body{border-radius:12px}.pet-caption{margin-top:13px}.pet-name{font-size:11px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}.pet-name svg{display:none}.pet-status{font-size:8px;gap:3px;margin-top:6px}.pet-status svg{width:9px;height:9px}.pet-body::after{inset:6%;border-radius:12px}.pet-body:focus-visible{outline-offset:0}.room-footer{padding:6px 15px 20px;gap:18px}.playback-bar>button{font-size:10px;padding:0 15px}.interaction-hint{font-size:8px;gap:5px}.workspace-footer{padding:17px 20px;font-size:8px}.workspace-footer>span:first-child{display:none}.workspace-footer{justify-content:center}.toast-region{left:50%;bottom:20px}.modal{max-height:calc(100svh - 36px);border-radius:20px}.modal-header{padding:23px 22px 0}.modal-header h2{font-size:21px}.modal-body{padding:16px 22px 23px}.modal-description{font-size:11px}.modal-footer{padding:15px 22px}.drop-zone{padding:25px 10px}.drop-zone>strong{font-size:12px}.drop-zone>span:not(.upload-symbol){font-size:9px}.drop-actions{gap:8px}.drop-actions .button{font-size:10px;padding:10px 12px}.drawer{inset:10px 10px 10px auto;max-width:calc(100vw - 20px);height:calc(100svh - 20px)}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 22px 23px;gap:10px}.library-toolbar{padding:20px 22px}.library-art{height:130px}.library-toolbar .text-button{font-size:10px}.segmented button{padding:7px 11px}.desktop-only{display:none}.import-note p{font-size:9px}.import-group{padding:13px}.asset-mapping{grid-template-columns:48px minmax(0,1fr);gap:9px}.asset-mapping select{font-size:9px}.help-item{gap:12px}.help-item h3{font-size:11px}.help-item p{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.mobile-library{display:none}.sidebar-content{min-height:0;overflow-y:auto;scrollbar-width:thin}.pet-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pet-status{color:#9199a5}.detail-tabs svg{width:14px;height:14px;vertical-align:middle;margin-right:4px}.detail-tabs span{vertical-align:middle}
@media(max-width:600px){.mobile-library{display:grid}}
@media(min-width:601px) and (max-height:800px){.workspace-header{height:76px}.room{min-height:0}.room-intro{padding-top:22px}.room-intro h2{font-size:29px;margin-top:13px}.pet-stage{min-height:300px;height:300px}.pet{width:clamp(170px,20vw,270px)}.room-footer{padding:12px 20px 20px;gap:14px}.workspace-footer{padding-top:16px;padding-bottom:18px}}

/* Feather the composed media once so the two animation buffers share an edge.
   Keep the interaction outline and caption outside the mask. */
.pet-media {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent 0%, #000 3%, #000 77%,
      rgb(0 0 0 / .96) 82%, rgb(0 0 0 / .78) 87%,
      rgb(0 0 0 / .42) 92%, rgb(0 0 0 / .12) 97%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(to bottom,
      transparent 0%, #000 3%, #000 77%,
      rgb(0 0 0 / .96) 82%, rgb(0 0 0 / .78) 87%,
      rgb(0 0 0 / .42) 92%, rgb(0 0 0 / .12) 97%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* A quiet wash beneath the fading edge, without adding another video layer. */
.pet-body::before {
  content: "";
  position: absolute;
  left: 23%;
  right: 23%;
  bottom: 1%;
  height: 18%;
  background: radial-gradient(ellipse, rgb(158 174 193 / .065), transparent 70%);
  pointer-events: none;
}

.room-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.appearance-switch {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid #f0f0f2;
  border-radius: 30px;
  background: #f5f5f7;
}
.appearance-switch button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 24px;
  color: #8e939b;
  font-size: 11px;
  white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.appearance-switch button:hover { color: #454a54; }
.appearance-switch button[aria-pressed=true] {
  background: #fff;
  color: #606873;
  box-shadow: 0 2px 6px #1a23300d;
}
.pet-aura {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  opacity: 0;
  pointer-events: none;
  filter: blur(clamp(9px, 1.5vw, 20px)) saturate(1.25);
  -webkit-mask-image: radial-gradient(ellipse, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 30%, transparent 72%);
  transition: opacity .25s;
}

/* VP-inspired presentation: diffuse colors from the current animation frame
   behind a wider, rounded feather. The central image itself stays sharp. */
body[data-edge-effect=glow] .pet-aura { opacity: .7; }
body[data-edge-effect=glow] .pet-media {
  -webkit-mask-image: radial-gradient(ellipse 58% 55% at 50% 45%,
    #000 38%, rgb(0 0 0 / .96) 52%, rgb(0 0 0 / .68) 68%,
    rgb(0 0 0 / .24) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 55% at 50% 45%,
    #000 38%, rgb(0 0 0 / .96) 52%, rgb(0 0 0 / .68) 68%,
    rgb(0 0 0 / .24) 84%, transparent 100%);
}
body[data-edge-effect=glow] .pet-body::before { opacity: 0; }

/* Framed presentation keeps a deliberate boundary instead of fading it. */
body[data-edge-effect=framed] .pet-body {
  border-radius: 24%;
  background: linear-gradient(155deg, #fafbfc, #f0f2f5);
  box-shadow: 0 12px 30px #263a5710;
}
body[data-edge-effect=framed] .pet-media {
  overflow: hidden;
  border-radius: inherit;
  mix-blend-mode: multiply;
  -webkit-mask-image: none;
  mask-image: none;
}
body[data-edge-effect=framed] .pet-body::before { opacity: 0; }
body[data-edge-effect=framed] .pet-body::after {
  inset: 0;
  border-radius: inherit;
  border-style: solid;
  border-color: #e9edf2;
}
body[data-edge-effect=framed] .pet-body:hover::after { border-color: #cedaeb; }
body[data-edge-effect=framed] .pet.dragging .pet-body::after { border-color: #a7bfe3; }

@media(max-width:600px) {
  .room-controls { gap: 10px; }
  .appearance-switch button { font-size: 10px; padding: 0 15px; }
}

/* Release layout: keep the space focused on its companions. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.room { min-height: calc(100svh - 93px); }
.pet-stage { margin-top: 0; }
.room-footer { padding-bottom: 35px; }
.save-indicator { display: flex; align-items: center; gap: 8px; padding: 5px 14px 6px; color: #a0a5ae; font-size: 10px; }
.save-indicator .saved-dot { margin: 0; flex-shrink: 0; }
.drawer-header { justify-content: flex-end; padding-bottom: 0; }
.publish-action { margin: 0 23px 24px; }
.detail-form-row input:disabled { background: #f8f9fb; color: #8d95a0; }
.connection-notice { margin: 0 30px 8px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #faf6ef; border-radius: 12px; color: #93816a; font-size: 11px; }
.connection-notice button { color: #746550; padding: 5px; white-space: nowrap; }
@media(min-width:601px) and (max-height:800px) { .room { min-height: calc(100svh - 76px); } .room-footer { padding-bottom: 26px; } }
@media(max-width:850px) { .save-indicator { justify-content: center; padding: 0; } .save-indicator #storage-label { display: none; } }
@media(max-width:600px) { .room { min-height: calc(100svh - 78px); } .room-footer { padding-bottom: 30px; } .connection-notice { margin: 0 20px 10px; } }