/* Character-stage layout; shared theme.css supplies the current day/night colors. */
.atlas-page{background:var(--ink);color:var(--yellow);color-scheme:dark}
.atlas-page ::selection{background:var(--yellow);color:var(--ink)}
.atlas-page .site-header{background:var(--ink);color:var(--yellow);border-bottom-color:#4b431d}
.atlas-page .wordmark,.atlas-page .nav-links a{color:var(--yellow)}
.atlas-page .header-actions .account-link{color:var(--yellow);border-color:var(--yellow)}
.atlas-page .header-actions .account-link:hover{background:var(--yellow);color:var(--ink)}
.atlas-page .lang-button{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.atlas-page .skip-link{background:var(--yellow);color:var(--ink)}
.atlas-page .experience-main{background:var(--ink);padding:30px clamp(18px,4vw,72px) 24px}
.atlas-page .experience-heading{margin-bottom:25px;align-items:end}
.atlas-page .experience-heading h1{font-size:clamp(44px,5.2vw,84px);color:var(--yellow)}
.atlas-page .experience-heading>p{max-width:30ch;color:var(--yellow);font-size:16px}
.atlas-page .atlas-stage{height:clamp(400px,53vh,640px);background:var(--yellow)}
.atlas-page .atlas-stage :is(canvas,.atlas-fallback){filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff);image-rendering:auto}
.atlas-bubbles{position:absolute;inset:0;z-index:2;pointer-events:none}
.atlas-bubble{position:absolute;display:block;width:max-content;max-width:min(25%,245px);font-size:clamp(13px,1.05vw,16px);font-weight:650;line-height:1.45;text-wrap:balance}
.atlas-bubble-card{position:relative;display:block;padding:12px 17px;border:1px solid;border-radius:16px;transform-origin:50% 80%;box-shadow:0 6px 16px #30250020}
.atlas-bubble-card::after{content:'';position:absolute;right:-5px;top:50%;width:9px;height:9px;background:inherit;border-top:1px solid;border-right:1px solid;border-color:inherit;transform:translateY(-50%) rotate(45deg)}
.atlas-bubble:nth-child(even) .atlas-bubble-card::after{right:auto;left:-5px;transform:translateY(-50%) rotate(225deg)}
.atlas-bubble:nth-child(1){left:8%;top:16%}
.atlas-bubble:nth-child(2){right:7%;top:22%}
.atlas-bubble:nth-child(3){left:4%;top:46%}
.atlas-bubble:nth-child(4){right:4%;top:51%}
.atlas-bubble:nth-child(5){left:10%;top:77%}
.atlas-bubble:nth-child(6){right:8%;top:80%}
.atlas-scrubber{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;margin-top:22px}
.atlas-scrubber input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;width:100%;height:44px;margin:0;cursor:ew-resize;accent-color:var(--yellow)}
.atlas-scrubber input[type=range]::-webkit-slider-runnable-track{height:4px;background:#6b602d;border-radius:2px}
.atlas-scrubber input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;background:var(--yellow);border:0;border-radius:50%}
.atlas-scrubber input[type=range]::-moz-range-track{height:4px;background:#6b602d;border:0;border-radius:2px}
.atlas-scrubber input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--yellow);border:0;border-radius:50%}
.atlas-page .atlas-arrows button{border:1px solid var(--yellow);color:var(--yellow);background:transparent}
.atlas-page .atlas-arrows button:hover:enabled{background:var(--yellow);color:var(--ink)}
.atlas-page .atlas-arrows button:disabled{opacity:.35}
.atlas-page .atlas-control-line{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:9px 0 0;min-height:24px}
.atlas-page .atlas-control-line p{color:var(--yellow);font-size:13px;margin:0}
.atlas-sample-note{font-size:12px;color:#d8bd54}
.atlas-page .text-button{color:var(--yellow)}
.atlas-page .site-footer{background:var(--ink);border-top:1px solid #4b431d;color:var(--yellow);min-height:106px;padding-top:24px;padding-bottom:24px}
.atlas-page .site-footer a{color:var(--yellow)}
.atlas-page :is(a,button,input):focus-visible,.atlas-page .atlas-stage:focus-visible{outline-color:var(--yellow);outline-offset:5px}
.atlas-page .atlas-stage:focus-visible{outline-offset:5px}
@media(max-width:1000px){.atlas-page .experience-heading h1{font-size:clamp(40px,5.5vw,66px)}.atlas-bubble{max-width:23%;font-size:13px}.atlas-bubble-card{padding:10px 12px}.atlas-bubble:nth-child(odd){left:3%}.atlas-bubble:nth-child(even){right:3%}}
@media(max-width:750px){
  .atlas-page .site-header .nav-links{border-top-color:#4b431d}
  .atlas-page .experience-main{padding-top:26px;padding-bottom:28px}
  .atlas-page .experience-heading{margin-bottom:24px;display:block}
  .atlas-page .experience-heading h1{font-size:clamp(34px,9vw,58px);line-height:1.05;white-space:normal}
  .atlas-page .experience-heading>p{font-size:14px;max-width:100%;margin:16px 0 0}
  .atlas-page .atlas-stage{height:clamp(520px,135vw,620px)}
  .atlas-bubble{max-width:44%;font-size:12px;line-height:1.45}
  .atlas-bubble-card{padding:9px 11px;border-radius:13px}
  .atlas-bubble:nth-child(odd){left:14px}
  .atlas-bubble:nth-child(even){right:14px}
  .atlas-bubble:nth-child(1),.atlas-bubble:nth-child(2){top:24px}
  .atlas-bubble:nth-child(3),.atlas-bubble:nth-child(4){top:91px}
  .atlas-bubble:nth-child(5),.atlas-bubble:nth-child(6){top:158px}
  .atlas-scrubber{gap:18px;margin-top:17px}
  .atlas-page .atlas-arrows button{width:44px;height:44px}
  .atlas-page .atlas-control-line{gap:8px;margin-top:8px}
  .atlas-page .atlas-control-line p{font-size:12px}
  .atlas-sample-note{font-size:11px}
}