/* A section-scoped character stage. Media can be replaced without changing layout. */
.ambient-page .character-studio {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 680px; min-height: clamp(620px, 52vw, 800px);
  margin: 18px 0 72px; border-radius: 32px;
  background: #870018; color: #fff;
  box-shadow: 0 28px 70px #50051a26;
  touch-action: pan-y; scroll-margin-top: 112px;
}
.character-studio .character-media { position: absolute; inset: 0; z-index: -2; }
.character-studio .character-media img,
.character-studio .character-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.character-studio .character-media video { opacity: 0; transition: opacity .5s; }
.character-studio.is-ready .character-media video { opacity: 1; }
.character-studio::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #38000c40, transparent 58%), linear-gradient(0deg, #42000c88, transparent 25%); }
.character-studio .character-topline { position: absolute; inset: 28px 36px auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; letter-spacing: .1em; }
.character-studio .character-wordmark { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 550; letter-spacing: .02em; }
.character-studio .character-wordmark b { font-size: 30px; font-weight: 400; line-height: 1; }
.character-studio .character-demo-label { border: 1px solid #ffffff45; border-radius: 99px; padding: 5px 12px; font-size: 11px; background: #4b001826; }
.character-studio .character-copy { width: 47%; max-width: 610px; padding: clamp(140px, 13vw, 205px) 0 130px clamp(30px, 4vw, 60px); }
.character-studio .character-intro { color: #ffe3e8; font-size: 14px; line-height: 1.6; letter-spacing: .1em; margin: 0 0 18px; }
.character-studio h2.character-title { margin: 0 0 22px; color: #fff; font-size: clamp(34px, 4.1vw, 62px); line-height: 1.18; letter-spacing: -.035em; font-weight: 550; text-wrap: balance; }
.character-studio .character-message { position: relative; font-size: clamp(16px, 1.6vw, 22px); font-weight: 400; line-height: 1.65; color: #fff5f6; margin: 0 0 28px; max-width: 26em; }
.character-studio .character-type-reserve { visibility: hidden; }
.character-studio .character-type-output { position: absolute; inset: 0; }
.character-studio.is-typing .character-type-output::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 4px; vertical-align: -.1em; background: #fff; animation: character-cursor .8s step-end infinite; }
.character-studio .character-actions { display: flex; flex-wrap: wrap; gap: 9px; max-width: 450px; }
.character-studio .character-pill { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; padding: 9px 17px; border: 1px solid #ffffffdd; border-radius: 99px; background: #fff; color: #38131b; font-size: 13px; line-height: 1.4; font-weight: 550; cursor: pointer; transition: color .2s, background .2s, transform .2s, border-color .2s; }
.character-studio .character-pill:hover { background: #240911; color: #fff; border-color: #240911; transform: translateY(-2px); }
.character-studio .character-pill span[aria-hidden] { font-size: 16px; }
.character-studio .character-share { margin-top: 13px; background: #480b242b; color: #fff; border-color: #ffffff66; font-weight: 400; }
.character-studio .character-share:hover { background: #fff; color: #38131b; border-color: #fff; }
.character-studio .character-share svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.character-studio .character-bottomline { position: absolute; inset: auto 36px 25px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.character-studio .character-hint { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #fff0f3; line-height: 1.5; }
.character-studio .character-hint > span { font: 10px 'JetBrains Mono', monospace; letter-spacing: .08em; opacity: .7; }
.character-studio .character-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: end; }
.character-studio .character-scrub { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #fff; }
.character-studio .character-scrub input { accent-color: #fff; width: 112px; height: 30px; cursor: ew-resize; }
.character-studio .character-reset { width: 40px; height: 40px; border: 1px solid #ffffff66; border-radius: 50%; color: #fff; background: #ffffff0d; cursor: pointer; font-size: 22px; transition: background .2s, transform .3s; }
.character-studio .character-reset:hover { background: #ffffff28; transform: rotate(-30deg); }
.character-studio .character-source { color: #ffe4e9; font-size: 10px; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.character-studio [hidden] { display: none !important; }
.character-studio a:focus-visible,.character-studio button:focus-visible,.character-studio input:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.character-studio :disabled { cursor: default; opacity: .4; }
.character-studio.is-enhanced:not(.has-entered) .character-intro { opacity: 0; filter: blur(4px); }
.character-studio.is-enhanced:not(.has-entered) .character-title,
.character-studio.is-enhanced:not(.has-entered) .character-actions,
.character-studio.is-enhanced:not(.has-entered) .character-share { opacity: 0; transform: translateY(16px); }
.character-studio .character-intro { transition: opacity .8s, filter 1s; }
.character-studio .character-title { transition: opacity .7s .12s, transform .7s .12s; }
.character-studio .character-actions,.character-studio .character-share { transition: opacity .6s .4s, transform .6s .4s; }
@keyframes character-cursor { 50% { opacity: 0; } }
html[data-theme="dark"] .character-studio { box-shadow: 0 28px 70px #0005; }
@media (max-width: 900px) and (min-width: 641px) {
  .character-studio .character-copy { width: 48%; padding-left: 30px; }
  .character-studio .character-topline,.character-studio .character-bottomline { left: 30px; right: 30px; }
  .character-studio h2.character-title { font-size: 36px; }
}
@media (max-width: 640px) {
  .ambient-page .character-studio { min-height: 0; margin: 8px 0 40px; border-radius: 25px; }
  .character-studio .character-topline { inset: 22px 22px auto; }
  .character-studio .character-wordmark { font-size: 14px; gap: 8px; }
  .character-studio .character-wordmark b { font-size: 25px; }
  .character-studio .character-demo-label { font-size: 10px; }
  .character-studio .character-media { height: 430px; }
  .character-studio .character-media img,.character-studio .character-media video { object-position: 72% center; }
  .character-studio::after { background: linear-gradient(0deg, #760217 0, #760217 46%, #760217ed 50%, transparent 69%); }
  .character-studio .character-copy { width: 100%; max-width: none; padding: 390px 24px 24px; }
  .character-studio .character-intro { font-size: 12px; margin-bottom: 12px; }
  .character-studio h2.character-title { font-size: clamp(30px, 8.8vw, 44px); margin-bottom: 16px; }
  .character-studio h2.character-title br { display: none; }
  .character-studio .character-message { font-size: 15px; margin-bottom: 20px; }
  .character-studio .character-actions { gap: 8px; }
  .character-studio .character-pill { font-size: 12px; padding: 10px 15px; }
  .character-studio .character-bottomline { position: relative; inset: auto; margin: 0 24px; padding: 20px 0 24px; border-top: 1px solid #ffffff26; align-items: start; flex-direction: column; gap: 13px; }
  .character-studio .character-controls { width: 100%; justify-content: start; gap: 12px; }
  .character-studio .character-source { margin-left: auto; }
  .character-studio .character-hint > span { display: none; }
}
.character-studio.is-still *, body:has(#motion-pause:checked) .character-studio * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .character-studio * { animation: none !important; transition: none !important; } }

/* Personal portraits replace the reference-video stage. */
.ambient-page .character-studio { --studio-accent:#75d9ff; --studio-glow:#285f96; min-height:780px; background:#080d17; box-shadow:0 28px 70px #102b4433; scroll-margin-top:112px !important; }
.character-studio[data-style="anime"] { --studio-accent:#bba7ff; --studio-glow:#6342b1; }
.character-studio[data-style="ancient"] { --studio-accent:#aeebdb; --studio-glow:#377c77; }
.character-studio[data-style="realistic"] { --studio-accent:#f4c992; --studio-glow:#895e3e; }
.character-studio[data-style="wool"] { --studio-accent:#f2cbea; --studio-glow:#6e6096; }
.character-studio::before { content:''; position:absolute; z-index:-3; inset:0; background:radial-gradient(ellipse at 4% 70%,var(--studio-glow),transparent 65%); opacity:.26; }
.character-studio .character-portrait { position:absolute; z-index:-2; inset:0 0 0 auto; width:59%; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 22%,#000); -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000); }
.character-studio .character-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:0; transform:perspective(1200px) translate3d(calc(var(--portrait-x,0) * 12px),calc(var(--portrait-y,0) * 8px),0) rotateY(calc(var(--portrait-x,0) * -3deg)) scale(1.025); transition:opacity .75s ease,filter .7s; filter:blur(8px); }
.character-studio .character-portrait img.is-active { opacity:1; filter:blur(0); }
.character-studio::after { background:linear-gradient(0deg,#080d17 0,transparent 30%); }
.character-studio .character-orbit { position:absolute; z-index:-1; left:12%; top:14%; width:62%; aspect-ratio:1; border:1px solid #c4e7ff10; border-radius:50%; pointer-events:none; transform:rotate(-24deg) scaleY(.65); }
.character-studio .character-orbit::before { content:''; position:absolute; width:6px; height:6px; background:var(--studio-accent); border-radius:50%; left:14%; top:14%; box-shadow:0 0 22px var(--studio-accent); }
.character-studio.is-visible:not(.is-still) .character-orbit { animation:personal-orbit 24s linear infinite; }
.character-studio .character-wordmark b { color:var(--studio-accent); transition:color .7s; }
.character-studio .character-edition { border:1px solid #ffffff2a; border-radius:99px; padding:6px 12px; background:#080d1766; backdrop-filter:blur(14px); font-size:10px; }
.character-studio .character-copy { position:relative; padding-top:150px; padding-bottom:148px; }
.character-studio .character-intro { color:var(--studio-accent); font-size:13px; margin-bottom:20px; transition:opacity .8s,filter 1s,color .7s; }
.character-studio .character-message { color:#d5dce8; font-size:clamp(15px,1.5vw,20px); line-height:1.85; }
.character-studio .character-type-reserve { visibility:visible; opacity:0; }
.character-studio.is-typing .character-type-output::after { background:var(--studio-accent); }
.character-studio .character-pill { background:#f4f7fc; color:#162133; font-size:12px; }
.character-studio .character-pill:hover { background:var(--studio-accent); border-color:var(--studio-accent); color:#162133; }
.character-studio .character-share { background:transparent; color:#d9e1eb; border-color:#ffffff38; }
.character-studio .character-share:hover { background:#ffffff12; color:#fff; border-color:#ffffff80; }
.character-studio .character-bottomline { bottom:28px; }
.character-studio .character-hint { font-size:11px; color:#a8b8cc; gap:7px; }
.character-studio .character-hint strong { color:var(--studio-accent); font-size:12px; font-weight:500; transition:color .7s; }
.character-studio .character-hint > span { font-size:9px; }
.character-studio .character-picker { padding:13px 14px 12px; border:1px solid #d8e8ff2b; border-radius:21px; background:#132033a6; backdrop-filter:blur(22px); box-shadow:0 12px 35px #0003; max-width:100%; }
.character-studio .character-picker-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; font-size:10px; color:#c1cee0; padding:0 5px 9px; }
.character-studio .character-picker-heading span:last-child { color:var(--studio-accent); }
.character-studio .character-style-list { display:flex; flex-wrap:wrap; gap:5px; }
.character-studio .character-style { display:flex; align-items:center; justify-content:center; gap:6px; min-width:58px; min-height:40px; padding:8px 11px; border:1px solid transparent; border-radius:12px; background:transparent; color:#c8d5e7; font:inherit; font-size:12px; cursor:pointer; transition:background .25s,color .25s,border-color .25s,transform .25s; }
.character-studio .character-style > span { font-size:15px; color:var(--style-color); }
.character-studio .character-style[data-character-style="modern"] { --style-color:#75d9ff; }
.character-studio .character-style[data-character-style="anime"] { --style-color:#bba7ff; }
.character-studio .character-style[data-character-style="ancient"] { --style-color:#aeebdb; }
.character-studio .character-style[data-character-style="realistic"] { --style-color:#f4c992; }
.character-studio .character-style[data-character-style="wool"] { --style-color:#f2cbea; }
.character-studio .character-style:hover { background:#ffffff12; transform:translateY(-2px); }
.character-studio .character-style[aria-pressed="true"] { color:#fff; background:#ffffff17; border-color:var(--style-color); box-shadow:inset 0 0 16px #b7d8ff12; }
.character-studio a:focus-visible,.character-studio button:focus-visible { outline-color:var(--studio-accent); }
@keyframes personal-orbit { to { transform:rotate(336deg) scaleY(.65); } }
@media (min-width:1600px) { .ambient-page .character-studio { min-height:820px; } .character-studio .character-copy { padding-top:170px; } }
@media (max-width:900px) and (min-width:641px) { .character-studio .character-copy { width:49%; padding-left:28px; padding-top:120px; } .character-studio .character-bottomline { align-items:start; flex-direction:column; gap:18px; } .character-studio .character-hint > span { display:none; } }
@media (max-width:640px) {
 .ambient-page .character-studio { min-height:0; }
 .character-studio .character-topline { inset:20px 20px auto; z-index:2; }
 .character-studio .character-wordmark { font-size:13px; }
 .character-studio .character-edition { font-size:9px; }
 .character-studio .character-portrait { inset:0 0 auto; width:100%; height:490px; mask-image:linear-gradient(#000 66%,transparent); -webkit-mask-image:linear-gradient(#000 66%,transparent); }
 .character-studio .character-portrait img { object-position:center top; }
 .character-studio::after { display:none; }
 .character-studio .character-orbit { top:300px; left:-35%; width:150%; }
 .character-studio .character-copy { padding:425px 24px 26px; }
 .character-studio .character-intro { font-size:11px; margin-bottom:12px; }
 .character-studio .character-message { font-size:14px; margin-bottom:20px; }
 .character-studio .character-pill { font-size:11px; padding:10px 13px; }
 .character-studio .character-bottomline { position:relative; inset:auto; margin:0 22px; padding:0 0 24px; border:0; align-items:stretch; gap:20px; }
 .character-studio .character-hint { order:2; font-size:10px; }
 .character-studio .character-picker { padding:12px 8px 8px; border-radius:17px; }
 .character-studio .character-style-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; }
 .character-studio .character-style { min-width:0; flex-direction:column; gap:5px; padding:7px 4px; font-size:10px; }
 .character-studio .character-picker-heading { font-size:9px; gap:8px; }
}

/* Grouped 14-style selector; one stable two-row panel. */
.character-studio[data-style="modern"] { --studio-accent:#75d9ff; --studio-glow:#285f96; }
.character-studio .character-style[data-character-style="modern"] { --style-color:#75d9ff; }
.character-studio[data-style="ancient"] { --studio-accent:#aeebdb; --studio-glow:#377c77; }
.character-studio .character-style[data-character-style="ancient"] { --style-color:#aeebdb; }
.character-studio[data-style="realistic"] { --studio-accent:#f4c992; --studio-glow:#895e3e; }
.character-studio .character-style[data-character-style="realistic"] { --style-color:#f4c992; }
.character-studio[data-style="crystal"] { --studio-accent:#a8baff; --studio-glow:#60549d; }
.character-studio .character-style[data-character-style="crystal"] { --style-color:#a8baff; }
.character-studio[data-style="steampunk"] { --studio-accent:#efbc77; --studio-glow:#895637; }
.character-studio .character-style[data-character-style="steampunk"] { --style-color:#efbc77; }
.character-studio[data-style="wool"] { --studio-accent:#f2cbea; --studio-glow:#6e6096; }
.character-studio .character-style[data-character-style="wool"] { --style-color:#f2cbea; }
.character-studio[data-style="chibi"] { --studio-accent:#ffe098; --studio-glow:#7e6954; }
.character-studio .character-style[data-character-style="chibi"] { --style-color:#ffe098; }
.character-studio[data-style="guoman"] { --studio-accent:#a4ead9; --studio-glow:#347976; }
.character-studio .character-style[data-character-style="guoman"] { --style-color:#a4ead9; }
.character-studio[data-style="kawaii"] { --studio-accent:#f6b9de; --studio-glow:#895586; }
.character-studio .character-style[data-character-style="kawaii"] { --style-color:#f6b9de; }
.character-studio[data-style="warm3d"] { --studio-accent:#ffd38c; --studio-glow:#936839; }
.character-studio .character-style[data-character-style="warm3d"] { --style-color:#ffd38c; }
.character-studio[data-style="adventure"] { --studio-accent:#ffbf91; --studio-glow:#8c4e37; }
.character-studio .character-style[data-character-style="adventure"] { --style-color:#ffbf91; }
.character-studio[data-style="anime"] { --studio-accent:#bba7ff; --studio-glow:#6342b1; }
.character-studio .character-style[data-character-style="anime"] { --style-color:#bba7ff; }
.character-studio[data-style="illustration"] { --studio-accent:#dfc99e; --studio-glow:#777058; }
.character-studio .character-style[data-character-style="illustration"] { --style-color:#dfc99e; }
.character-studio[data-style="cartoon"] { --studio-accent:#f9c382; --studio-glow:#755392; }
.character-studio .character-style[data-character-style="cartoon"] { --style-color:#f9c382; }

.character-studio .character-portrait { top:58px; width:56%; }
.character-studio .character-portrait img { inset:0 auto auto 50%; width:auto; max-width:100%; height:100%; aspect-ratio:2/3; transform-origin:center top; object-fit:contain; object-position:center top; transform:translateX(-50%) perspective(1200px) translate3d(calc(var(--portrait-x,0) * 12px),calc(var(--portrait-y,0) * 8px),0) rotateY(calc(var(--portrait-x,0) * -3deg)) scale(1.025); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(#000 89%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(#000 89%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
.character-studio .character-picker { width:390px; flex-shrink:0; }
.character-studio .character-groups { display:flex; gap:6px; margin:0 0 8px; padding:3px; border-radius:12px; background:#080d1766; }
.character-studio .character-groups button { flex:1; min-height:34px; border:0; border-radius:9px; background:transparent; color:#9dadc4; cursor:pointer; font:inherit; font-size:11px; transition:background .25s,color .25s; }
.character-studio .character-groups button[aria-pressed="true"] { background:#ffffff18; color:#fff; }
.character-studio .character-style-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; min-height:90px; align-content:start; }
.character-studio .character-style { min-width:0; min-height:42px; padding:8px 6px; font-size:11px; }
@media (max-width:900px) and (min-width:641px) { .character-studio .character-copy { padding-bottom:265px; } .character-studio .character-bottomline { flex-direction:row; align-items:end; } .character-studio .character-picker { width:350px; } .character-studio .character-hint { max-width:170px; } }
@media (max-width:640px) {
 .character-studio .character-portrait { top:55px; width:100%; height:440px; }
 .character-studio .character-portrait img { object-fit:contain; }
 .character-studio .character-picker { width:100%; }
 .character-studio .character-style { flex-direction:row; font-size:10px; min-height:42px; }
 .character-studio .character-style-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
 .character-studio .character-edition { font-size:8px; padding:5px 8px; }
 .character-studio .character-wordmark { font-size:11px; gap:6px; }
}
@media(prefers-reduced-motion:reduce) { .character-studio *, .character-studio *::before, .character-studio *::after { animation:none!important; transition:none!important; } }
.character-studio.is-still *, .character-studio.is-still *::before, .character-studio.is-still *::after { animation:none!important; transition:none!important; }

.character-studio[data-style="guoman-full"] { --studio-accent:#b7e4c5; --studio-glow:#427268; }
.character-studio .character-style[data-character-style="guoman-full"] { --style-color:#b7e4c5; }

/* A real, paused turntable clip overlays its still portrait after the first seek. */
.character-studio .character-turntable { position:absolute; inset:0 auto auto 50%; width:auto; max-width:100%; height:100%; aspect-ratio:864/1504; object-fit:contain; object-position:center top; transform:translateX(-50%); opacity:0; pointer-events:none; transition:opacity .4s ease; -webkit-mask-image:linear-gradient(#000 88%,transparent); mask-image:linear-gradient(#000 88%,transparent); }
.character-studio.has-turntable { touch-action:pan-y; }
.character-studio.has-turntable .character-turntable { opacity:1; }
.character-studio.has-turntable .character-portrait img { opacity:0; }
.character-studio .character-turn-controls { display:flex; align-items:center; gap:10px; margin-top:9px; }
.character-studio .character-turn-controls label { display:flex; align-items:center; gap:8px; font-size:11px; color:#d4dfed; }
.character-studio .character-turn-controls input { width:102px; min-height:36px; accent-color:var(--studio-accent); cursor:ew-resize; }
.character-studio .character-turn-controls button { min-height:36px; padding:5px 13px; border:1px solid #ffffff40; border-radius:99px; background:#ffffff0d; color:#e7edf6; cursor:pointer; font:inherit; font-size:11px; }
.character-studio .character-turn-controls button:hover { background:#ffffff20; }
.character-studio .character-style[data-character-video]::after { content:'↔'; color:var(--style-color); font-size:13px; }
@media (max-width:900px) and (min-width:641px) { .character-studio .character-turn-controls { gap:5px; flex-wrap:wrap; } .character-studio .character-turn-controls input { width:80px; } }

.character-studio .character-video-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.character-studio:not([data-style="reference"]) .character-turntable { -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(#000 88%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
/* The reference guest keeps the original wide red stage, separate from personal portraits. */
.ambient-page .character-studio { transition:background-color .55s ease; }
.ambient-page .character-studio[data-style="reference"] { --studio-accent:#ffd5bf; --studio-glow:#8f1634; background:#870018; }
.character-studio .character-style[data-character-style="reference"] { --style-color:#ffd5bf; }
.character-studio[data-style="reference"] .character-portrait { inset:0; width:100%; height:100%; mask-image:none; -webkit-mask-image:none; }
.character-studio[data-style="reference"] .character-portrait img,
.character-studio[data-style="reference"] .character-turntable { inset:0; width:100%; max-width:none; height:100%; aspect-ratio:auto; object-fit:cover; object-position:70% center; transform:none; mask-image:none; -webkit-mask-image:none; }
.character-studio[data-style="reference"]::after { background:linear-gradient(90deg,#38000c3d,transparent 58%),linear-gradient(0deg,#42000c99,transparent 32%); }
.character-studio[data-style="reference"] .character-orbit { opacity:0; }
.character-studio[data-style="reference"] .character-picker { background:#3c1325a6; }
.character-studio[data-style="reference"] .character-groups { background:#350b2255; }
.character-studio[data-style="reference"] .character-message,
.character-studio[data-style="reference"] .character-hint { color:#ffe7eb; }
.character-studio .character-source { align-self:flex-start; }
@media(max-width:640px) {
 .character-studio[data-style="reference"] .character-portrait { top:55px; height:440px; mask-image:linear-gradient(#000 70%,transparent); -webkit-mask-image:linear-gradient(#000 70%,transparent); }
 .character-studio[data-style="reference"] .character-portrait img,
 .character-studio[data-style="reference"] .character-turntable { object-position:80% center; }
 .character-studio .character-groups { gap:2px; }
 .character-studio .character-groups button { font-size:10px; padding:4px 2px; }
}

/* Keep the portrait clear; open the compact switcher only when requested. */
.character-studio .character-picker-dock { position:relative; z-index:5; flex:0 0 auto; margin-left:auto; }
.character-studio .character-picker-toggle { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:9px 14px; border:1px solid #d8e8ff38; border-radius:99px; background:#132033b8; color:#e8edf7; backdrop-filter:blur(20px); box-shadow:0 6px 24px #0003; font:inherit; font-size:12px; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.character-studio .character-picker-toggle > span { color:var(--studio-accent); font-size:19px; }
.character-studio .character-picker-toggle svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .25s; }
.character-studio .character-picker-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.character-studio .character-picker-toggle:hover { background:#243751dd; border-color:var(--studio-accent); transform:translateY(-2px); }
.character-studio .character-picker-dock .character-picker { position:absolute; right:0; bottom:calc(100% + 12px); width:320px; max-width:calc(100vw - 64px); max-height:var(--picker-room,360px); overflow-y:auto; overscroll-behavior:contain; padding:12px; border-radius:18px; transform-origin:bottom right; }
.character-studio .character-picker-dock .character-picker:not([hidden]) { animation:character-picker-in .22s ease-out both; }
.character-studio .character-picker-dock .character-style-list { min-height:0; }
.character-studio .character-picker-dock .character-groups { gap:2px; }
.character-studio .character-picker-dock .character-groups button { font-size:10px; padding:4px 2px; }
.character-studio .character-picker-dock .character-style { gap:4px; padding:8px 3px; font-size:10px; }
@keyframes character-picker-in { from { opacity:0; transform:translateY(9px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:640px) {
 .character-studio .character-bottomline { padding-bottom:84px; }
 .character-studio .character-picker-dock { position:absolute; right:0; bottom:20px; }
 .character-studio .character-picker-toggle { min-height:44px; font-size:11px; }
 .character-studio .character-picker-dock .character-picker { max-width:calc(100vw - 76px); }
}
@media(max-width:360px) { .character-studio .character-picker-dock .character-style-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* One continuous daylight surface; transparent subjects also work at night. */
html:not([data-theme="dark"]) .ambient-page .character-studio:not([data-style="reference"]) { background:radial-gradient(ellipse at 78% 30%,#dcecff 0%,transparent 56%),linear-gradient(120deg,#f9fbff,#eff3ff 55%,#edf1fb); color:#22304a; box-shadow:0 24px 64px #607ca52b; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"])::after { background:linear-gradient(0deg,#607ea517,transparent 35%); }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"])::before { opacity:.09; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-title { color:#22304a; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-intro,
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-hint strong { color:#496781; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-message,
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-hint { color:#5a6881; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-wordmark b { color:#578baf; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-edition { color:#4c6280; background:#ffffffa6; border-color:#8ca8d240; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-wordmark { color:#263a57; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-source { color:#5e728e; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-orbit { border-color:#789dca20; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-pill { background:#ffffffcc; color:#273750; border-color:#a4b6d84d; box-shadow:0 5px 16px #5676a212; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-pill:hover { background:#dbeafd; border-color:#7da1ce; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-share { background:transparent; box-shadow:none; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-turn-controls label { color:#465d7c; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-turn-controls button { color:#405777; border-color:#99afcf80; background:#ffffff80; }
html:not([data-theme="dark"]) .character-studio:not([data-style="reference"]) .character-turn-controls input { accent-color:#678db7; }
html:not([data-theme="dark"]) .character-studio .character-picker-toggle { background:#f5f8ffe8; color:#293b58; border-color:#ffffffa6; box-shadow:0 7px 24px #172c4c24; }
html:not([data-theme="dark"]) .character-studio .character-picker-toggle > span { color:#637fce; }
html:not([data-theme="dark"]) .character-studio .character-picker-toggle:hover { background:#fff; border-color:#9eb7e3; }
html:not([data-theme="dark"]) .character-studio .character-picker-dock .character-picker { background:#f4f7fff2; border-color:#fff; box-shadow:0 16px 42px #17335635; }
html:not([data-theme="dark"]) .character-studio .character-picker-heading,
html:not([data-theme="dark"]) .character-studio .character-picker-heading span:last-child { color:#476286; }
html:not([data-theme="dark"]) .character-studio .character-groups { background:#dfe7f6; }
html:not([data-theme="dark"]) .character-studio .character-groups button { color:#637390; }
html:not([data-theme="dark"]) .character-studio .character-groups button[aria-pressed="true"] { background:#fff; color:#2b4164; }
html:not([data-theme="dark"]) .character-studio .character-style { color:#4f607d; }
html:not([data-theme="dark"]) .character-studio .character-style > span,
html:not([data-theme="dark"]) .character-studio .character-style::after { color:#687ac1; }
html:not([data-theme="dark"]) .character-studio .character-style:hover { background:#e4eafb; }
html:not([data-theme="dark"]) .character-studio .character-style[aria-pressed="true"] { color:#273b66; background:#e0e9ff; border-color:#91a8d8; }
@media(max-width:640px) {
 html:not([data-theme="dark"]) .ambient-page .character-studio:not([data-style="reference"]) { background:radial-gradient(ellipse at 50% 18%,#dcecff,transparent 52%),linear-gradient(165deg,#f7faff,#edf2ff 55%,#f8faff); }
}

html[data-theme="dark"] .character-studio[data-style="reference"]::after { background:linear-gradient(90deg,#25001277,transparent 65%),linear-gradient(0deg,#240010b3,transparent 45%); }

.character-studio[data-style="reference"] .character-picker-toggle { background:#3c1325b8; }
html:not([data-theme="dark"]) .character-studio[data-style="reference"] .character-picker-toggle { background:#f5f8ffe8; }