/* Echo showroom: one stage, a horizontal collection and two actions. */
.cx-page { --cx-accent:#7ddcff; --cx-ink:#eef8fb; --cx-muted:#a4bfca; color:var(--cx-ink); width:min(1200px,100%); min-height:calc(100dvh - 32px); margin:0 auto; padding:36px 32px 40px; outline:0; }
.cx-page button { font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cx-page button:disabled { cursor:default; }
.cx-page button:focus-visible { outline:3px solid var(--cx-accent); outline-offset:3px; }
.cx-page-heading { position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; pointer-events:none; }
.cx-page-heading > * { pointer-events:auto; }
.cx-page-heading h1 { margin:0 0 17px; font-size:clamp(30px,3vw,42px); line-height:1.1; }
.cx-preview-label { padding:13px 22px; border:1px solid #accce80b; border-radius:30px; background:#09182099; font-size:16px; }
.cx-tabs { display:flex; width:248px; gap:4px; padding:4px; border:1px solid #355366; border-radius:13px; background:#0a202cbb; }
.cx-tabs button { flex:1; min-height:44px; padding:8px 16px; border:0; border-radius:9px; background:transparent; color:#9fc3d6; font-size:13px; }
.cx-tabs button[aria-pressed=true] { color:#effbff; background:linear-gradient(#30627a,#234a5e); box-shadow:inset 0 1px 0 #85d9f333; }
.cx-wardrobe-layout { margin-top:-115px; }
.cx-fitting { position:relative; }
.cx-stage { position:relative; display:grid; place-items:center; height:440px; isolation:isolate; }
.cx-stage-atmosphere { position:absolute; inset:-36px -32px 0; z-index:-3; background:radial-gradient(ellipse 38% 68% at 50% 47%,#317abc66,#173f6455 45%,transparent 82%); pointer-events:none; }
.cx-stage-atmosphere::before { content:''; position:absolute; inset:0; background:linear-gradient(#0d1e2999,#0d1e2999),var(--cx-world) center/cover; mask-image:radial-gradient(ellipse 46% 70% at 50% 40%,#0007,transparent); }
.cx-stage::after { content:''; position:absolute; z-index:-2; left:8%; right:8%; bottom:6px; height:68px; border-radius:50%; border:1px solid #3678a52a; background:radial-gradient(ellipse,#153548aa,#10283688); }
.cx-avatar { display:block; width:100%; height:100%; object-fit:contain; border:0; pointer-events:none; }
.cx-stage > .cx-avatar { width:410px; height:410px; max-width:86%; margin-top:-3px; filter:drop-shadow(0 10px 7px #04111d44); }
.cx-pedestal { position:absolute; z-index:-1; width:67%; height:65px; left:16.5%; bottom:52px; border-radius:50%; background:radial-gradient(ellipse at 46% 27%,#82c2e9 0,#4686b1 30%,#254c6a 67%,#153044 100%); box-shadow:0 13px 0 #0a1b2b,0 22px 26px #020d1899,inset 0 2px 1px #9edaff66; }
.cx-pedestal::after { content:''; position:absolute; width:35%; height:45%; left:32.5%; top:25%; border-radius:50%; background:#05182e66; filter:blur(8px); }
.cx-inventory { position:relative; z-index:2; margin:0 auto; max-width:960px; }
.cx-carousel { display:flex; align-items:center; gap:8px; }
.cx-scroll { flex:0 0 44px; height:44px; border:1px solid #335c72; border-radius:50%; background:#102a39; color:#b4d8e9; font:28px/1 sans-serif!important; }
.cx-scroll:hover { background:#21475c; border-color:#6fb8d5; }
.cx-scroll:disabled { opacity:.35; }
.cx-carousel:not(.has-overflow) .cx-scroll { visibility:hidden; }
.cx-items { display:flex; flex:1; min-width:0; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#3d6377 transparent; padding:5px 4px 12px; }
.cx-item { position:relative; flex:0 0 calc((100% - 50px)/6); min-width:104px; display:flex; flex-direction:column; align-items:center; padding:2px 0 14px; overflow:hidden; border:1px solid #315569; border-radius:15px; background:linear-gradient(145deg,#1c3a4a,#132b39); color:#c9e1eb; text-align:center; scroll-snap-align:center; transition:border-color .16s,background .16s; }
.cx-item:hover { border-color:#74b4d0; background:#214559; }
.cx-item[aria-pressed=true] { border:2px solid #81dcff; padding-top:1px; padding-bottom:13px; background:linear-gradient(150deg,#28516a,#18394c); box-shadow:inset 0 0 20px #65c8ed0d; }
.cx-item-art { display:grid; place-items:center; height:103px; width:100%; margin-bottom:3px; }
.cx-item-art .cx-avatar { width:108px; height:108px; max-width:100%; }
.cx-item-name { padding:0 6px; font-size:11px; line-height:1.35; }
.cx-item-check { position:absolute; top:7px; right:7px; display:none; width:20px; height:20px; border-radius:50%; background:#8ce0ff; color:#102a37; font:13px/20px sans-serif; }
.cx-item[aria-pressed=true] .cx-item-check { display:block; }
.cx-world-sample { display:block; width:100%; height:100%; border-radius:9px; background:var(--cx-world) center/cover,#163442; }
.cx-world-item .cx-item-art { padding:10px; }
.cx-actions { position:relative; display:grid; grid-template-columns:1fr 1fr; max-width:600px; margin:16px auto 0; gap:16px; }
.cx-equipped-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.cx-equipped-status.is-error { position:static; grid-column:1/-1; width:auto; height:auto; clip-path:none; white-space:normal; color:#ffdfa3; font-size:13px; line-height:1.5; text-align:center; }
.cx-equip,.cx-preview-button { display:flex; justify-content:center; align-items:center; gap:12px; min-height:52px; padding:12px 16px; border-radius:12px; font-family:inherit; font-size:14px; cursor:pointer; }
.cx-equip { border:0; background:#74d4f2; box-shadow:0 4px 0 #35899e; color:#103442; }
.cx-equip:disabled { box-shadow:none; background:#2d515f; color:#abccd9; }
.cx-preview-button { border:1px solid #579cb9; color:#d5edf8; background:#102e40; }
.cx-equip:active:not(:disabled),.cx-preview-button:active { transform:translateY(2px); }
.cx-lesson-preview { width:min(700px,calc(100% - 28px)); max-height:calc(100dvh - 40px); padding:24px; border:1px solid #477185; border-radius:26px; background:#102b38; color:#e8f6fa; overflow-y:auto; }
.cx-lesson-preview::backdrop { background:#020b16c9; backdrop-filter:blur(8px); }
.cx-lesson-preview h2 { margin:0 44px 20px 0; font-size:22px; }
.cx-dialog-close { position:absolute; top:14px; right:14px; width:44px; height:44px; border:0; border-radius:12px; background:#22434e; color:white; font-size:28px; cursor:pointer; }
.cx-preview-scene { padding:28px; border-radius:20px; background:linear-gradient(#0b223b70,#102733b3),var(--cx-world) center/cover,#153644; }
.cx-preview-echo { display:flex; align-items:center; gap:20px; }
.cx-preview-echo .cx-avatar { flex:0 0 180px; width:180px; height:180px; }
.cx-preview-echo p { padding:20px; border:2px solid #517080; border-radius:18px; background:#102a37ed; color:#e8f7fc; font-size:17px; line-height:1.6; }
.cx-preview-code { padding:24px; border:2px solid #3e6370; border-radius:18px; background:#0c212bea; color:#e4faff; font:20px/1.6 Consolas,monospace; text-align:center; }
.cx-preview-code span { padding:7px 15px; border:2px solid #84eac0; border-radius:9px; background:#1b513f; color:#a3efd1; }
.cx-preview-note { margin:18px 0; color:#abc8d2; font-size:13px; line-height:1.6; }
.cx-lesson-preview > .cx-equip { width:100%; }
.cx-lesson-preview button:focus-visible { outline:3px solid white; outline-offset:3px; }
.lesson-lab.is-custom-world { background:linear-gradient(90deg,#101f24a8,#101f24c7 35%,#101f24c7 65%,#101f24a8),var(--lesson-world) center/cover fixed; }
.is-custom-world .lesson-action-bar { background:#101f24eb; }
.is-custom-world .ll-bubble { background:#13252bf5; }
@media(min-width:1500px) { .cx-stage{height:500px}.cx-stage>.cx-avatar{width:470px;height:470px} }
@media(max-width:1100px) { .cx-page{padding-inline:24px}.cx-scroll{flex-basis:44px}.cx-carousel{gap:4px}.cx-item{min-width:104px}.cx-stage-atmosphere{inset-inline:-24px} }
@media(max-width:767px) { .cx-page{padding:24px 16px 32px;min-height:calc(100dvh - 80px)}.cx-page-heading h1{font-size:31px;margin-bottom:13px}.cx-preview-label{padding:11px 16px;font-size:13px}.cx-tabs{width:216px}.cx-tabs button{min-height:44px;font-size:12px}.cx-wardrobe-layout{margin-top:2px}.cx-stage{height:300px}.cx-stage>.cx-avatar{height:308px;width:308px;margin-top:-20px}.cx-pedestal{width:84%;left:8%;height:47px;bottom:34px}.cx-stage::after{left:0;right:0;bottom:4px;height:44px}.cx-stage-atmosphere{inset:-90px -16px 0}.cx-carousel{gap:0}.cx-scroll{display:none}.cx-items{gap:9px;padding:5px 4px 12px;scroll-padding-inline:4px}.cx-item{flex-basis:calc((100% - 18px)/3);min-width:100px}.cx-item-art{height:96px}.cx-item-art .cx-avatar{height:100px;width:100px}.cx-item-name{font-size:10px}.cx-actions{gap:10px;margin-top:12px}.cx-equip,.cx-preview-button{font-size:12px;gap:6px;padding-inline:8px}.cx-preview-scene{padding:16px}.cx-preview-echo{gap:8px}.cx-preview-echo .cx-avatar{width:106px;height:126px;flex-basis:106px}.cx-preview-echo p{padding:14px;font-size:14px}.cx-preview-code{padding:20px 10px;font-size:17px}.cx-lesson-preview{padding:20px}.cx-lesson-preview h2{font-size:19px} }
@media(max-width:360px) { .cx-preview-label{font-size:12px;padding:9px 12px}.cx-stage{height:270px}.cx-stage>.cx-avatar{width:280px;height:280px} }
@media(prefers-reduced-motion:reduce) { .cx-page *, .cx-lesson-preview *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }
/* Premium is an equipment rule; all artwork remains available to preview. */
.cx-premium-badge{position:absolute;left:5px;top:5px;display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:#564391;color:#e5d5ff;font-size:17px;line-height:1}.cx-equip.is-premium{background:#6046cd;border-color:#aa8ef5;color:white}.cx-equip.is-premium:hover{background:#6c50dc}