/* Keep the portrait colors intact and soften its edges into the scene. */
.art-frame{mix-blend-mode:normal;mask-image:none;display:flex;align-items:center;justify-content:center}
.art-frame img{width:auto;height:auto;max-width:100%;max-height:100%;flex:none;mask-image:linear-gradient(to right,transparent,black 16%,black 84%,transparent),linear-gradient(to bottom,transparent,black 9%,black 80%,transparent);mask-composite:intersect}
.art-orbit{opacity:.35}
.scene-landscape{position:fixed;inset:-6%;pointer-events:none;background-image:url('landscape-v1.webp');background-size:cover;background-position:center 42%;filter:saturate(.75);opacity:.76;transform:scale(1.12);transition:filter 1s,opacity 1s;animation:landscape-drift 24s ease-in-out infinite alternate}
.scene-haze{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--paper),transparent 85%),linear-gradient(0deg,var(--paper),transparent 75%);opacity:.7}
body[data-scene=dusk] .scene-landscape{filter:sepia(.32) saturate(.85)}
body[data-scene=moon] .scene-landscape{filter:brightness(.45) saturate(.65);opacity:.65}
.portrait{--look-x:0px;--look-y:0px;--look-turn:0deg}
.art-frame{transform:translate(var(--look-x),var(--look-y)) rotate(var(--look-turn));transition:transform .7s ease-out;will-change:transform}
.art-frame img{animation:character-breathe 7s ease-in-out infinite;transform-origin:50% 85%;will-change:transform;mask-image:linear-gradient(to right,transparent,black 21%,black 80%,transparent),linear-gradient(to bottom,transparent,black 8%,black 75%,transparent)}
.art-frame.reveal{animation:character-arrive .9s ease-out}
.art-orbit{animation:orbit-breathe 12s ease-in-out infinite alternate}
body.still .art-frame{transform:none!important;transition:none;animation:none}
@keyframes character-breathe{0%,100%{transform:translateY(2px) scale(1)}50%{transform:translateY(-5px) scale(1.014)}}
@keyframes character-arrive{from{opacity:.3}to{opacity:1}}
@keyframes landscape-drift{to{transform:scale(1.18) translate(1%,-1%)}}
@keyframes orbit-breathe{to{opacity:.12;transform:rotate(-12deg) scale(1.025)}}
@media(prefers-reduced-motion:reduce){.scene-landscape,.art-frame,.art-frame img,.art-orbit{animation:none!important;transition:none!important;transform:none!important}}
.character-picker{position:relative;z-index:3;max-width:1500px;margin:0 auto;padding:10px 5% 20px;display:flex;align-items:center;gap:24px;font-size:12px}
.character-picker>span{color:var(--muted);white-space:nowrap}
#character-options{display:flex;gap:12px;flex-wrap:wrap}
.character-option{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border:1px solid var(--line);border-radius:5px;opacity:.65;background:var(--panel)}
.character-option[aria-pressed=true]{opacity:1;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.character-option img{width:36px;height:42px;object-fit:cover;object-position:50% 15%;border-radius:3px}
.character-option small{display:block;font-size:9px;color:var(--muted);margin-top:4px}
.zen .character-picker{display:none}
@media(max-width:700px){.character-picker{padding:12px 6% 20px;align-items:flex-start;gap:12px;flex-direction:column}#character-options{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}.character-option{text-align:left}}