.system-tropical { --atlas-gold: #d6b56d; --atlas-gold-light: #f4d99f; }
.atlas-hero { width:min(calc(100% - 32px),1220px); margin:0 auto; padding:clamp(48px,7vw,84px) 0 34px; text-align:center; }
.atlas-hero .system-title { max-width:none; margin-inline:auto; font-family:var(--font-b); font-size:clamp(46px,7vw,82px); text-transform:none; letter-spacing:-.04em; -webkit-text-fill-color:var(--text); background:none; }
.atlas-hero .system-lead { width:min(800px,100%); margin-inline:auto; }
.atlas-date { width:fit-content; margin:22px auto 0; padding:10px 16px; border:1px solid rgba(214,181,109,.23); border-radius:999px; color:#eadfc7; background:rgba(214,181,109,.07); font-weight:700; font-size:14px; }
.atlas-date::before { display:inline-block; width:7px; height:7px; margin-right:10px; border-radius:50%; background:var(--atlas-gold-light); box-shadow:0 0 12px var(--atlas-gold-light); content:""; }
.zodiac-atlas { width:min(calc(100% - 32px),1320px); margin:0 auto clamp(80px,9vw,120px); }
.atlas-stage { min-width:0; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(330px,.8fr); gap:24px; align-items:start; }
.atlas-wheel-card,.atlas-panel { border:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg,rgba(18,28,49,.82),rgba(8,13,24,.88)); box-shadow:0 20px 60px rgba(0,0,0,.35); backdrop-filter:blur(14px); }
.atlas-wheel-card { position:relative; min-width:0; padding:18px; overflow:hidden; border-radius:28px; }
.atlas-wheel-card::before { position:absolute; width:260px; height:260px; left:-120px; top:-110px; border-radius:50%; background:rgba(214,181,109,.09); filter:blur(70px); pointer-events:none; content:""; }
.atlas-wheel-wrap { position:relative; width:min(100%,760px); margin:0 auto; aspect-ratio:1; }
.atlas-wheel { width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 22px 34px rgba(0,0,0,.35)); }
.atlas-outer-circle { fill:rgba(2,6,18,.45); stroke:var(--atlas-gold); stroke-width:2; }
.atlas-ring { fill:none; stroke:rgba(255,255,255,.11); stroke-width:1.2; }
.atlas-spoke { stroke:rgba(255,255,255,.11); stroke-width:1; }
.atlas-sector-hit { fill:transparent; stroke:none; cursor:pointer; outline:none; transition:fill .22s ease,filter .22s ease; }
.atlas-sector-hit:hover,.atlas-sector-hit:focus-visible { fill:rgba(255,255,255,.07); }
.atlas-sector-hit.is-selected { fill:rgba(214,181,109,.17); filter:drop-shadow(0 0 8px rgba(214,181,109,.12)); }
.atlas-sector-name { fill:#f5f7ff; font-size:11px; font-weight:800; letter-spacing:1.7px; pointer-events:none; }
.atlas-sign-layer.is-selected .atlas-sector-name { fill:var(--atlas-gold-light); filter:drop-shadow(0 0 5px rgba(244,217,159,.7)); }
.atlas-sector-glyph { fill:#f5f7ff; font-family:Georgia,"Times New Roman",serif; font-size:37px; font-weight:700; pointer-events:none; transform-box:fill-box; transform-origin:center; transition:fill .22s,filter .22s,transform .28s; }
.atlas-sign-layer.is-selected .atlas-sector-glyph { fill:#fff2c8; transform:scale(1.55); filter:drop-shadow(0 0 7px rgba(244,217,159,.95)) drop-shadow(0 0 18px rgba(214,181,109,.85)) drop-shadow(0 10px 12px rgba(0,0,0,.65)); animation:atlas-symbol-float 2.4s ease-in-out .5s infinite; }
.atlas-constellation-line { fill:none; stroke:rgba(205,215,236,.24); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke .28s,filter .28s; }
.atlas-constellation-star { fill:rgba(222,229,244,.35); transform-box:fill-box; transform-origin:center; transition:fill .25s,filter .25s,opacity .25s; }
.atlas-sign-layer.is-selected .atlas-constellation-line { stroke:#f5dfaa; stroke-dasharray:150; stroke-dashoffset:150; filter:drop-shadow(0 0 4px rgba(244,217,159,.5)); animation:atlas-line-reveal 1.1s ease forwards,atlas-line-pulse 2.4s ease-in-out 1.1s infinite; }
.atlas-sign-layer.is-selected .atlas-constellation-star { animation:atlas-star-loop 2.4s cubic-bezier(.18,.9,.2,1.2) infinite; animation-delay:var(--delay,0s); }
.atlas-element-icon { cursor:help; outline:none; }
.atlas-element-hit { fill:transparent; }
.atlas-element-triangle,.atlas-element-bar { fill:none; stroke:#dec47f; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s,filter .2s; }
.atlas-element-icon:hover .atlas-element-triangle,.atlas-element-icon:focus-visible .atlas-element-triangle,.atlas-element-icon:hover .atlas-element-bar,.atlas-element-icon:focus-visible .atlas-element-bar { stroke:#fff2c8; stroke-width:2.8; filter:drop-shadow(0 0 4px rgba(255,255,255,.7)) drop-shadow(0 0 8px rgba(214,181,109,.7)); }
.atlas-sign-layer.is-selected .atlas-element-triangle,.atlas-sign-layer.is-selected .atlas-element-bar { stroke:#fff3c9; stroke-width:2.7; filter:drop-shadow(0 0 4px rgba(255,255,255,.8)) drop-shadow(0 0 10px rgba(214,181,109,.85)); animation:atlas-element-pulse 2s ease-in-out infinite; }
.atlas-center-disc { fill:#09101f; stroke:var(--atlas-gold); stroke-width:1.8; }
.atlas-center-star { fill:none; stroke:#e6ca82; stroke-width:2; filter:drop-shadow(0 0 7px rgba(214,181,109,.32)); }
.atlas-center-dot { fill:#f4d99f; filter:drop-shadow(0 0 8px rgba(244,217,159,.85)); }
.atlas-panel { position:sticky; top:88px; padding:28px; border-radius:28px; }
.atlas-panel-kicker { color:var(--atlas-gold-light); font:800 12px var(--font-h); letter-spacing:.13em; text-transform:uppercase; }
.atlas-panel-title { margin-top:10px; color:var(--text); font:700 23px var(--font-b); }
.atlas-panel-copy { min-height:46px; margin-top:8px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.1); color:var(--text-muted); font-size:14px; line-height:1.65; }
.atlas-sign-heading { margin-top:25px; display:flex; align-items:center; gap:16px; }
.atlas-panel-glyph { width:68px; height:68px; flex:0 0 68px; display:grid; place-items:center; border:1px solid rgba(214,181,109,.25); border-radius:50%; color:#fff0b8; background:rgba(214,181,109,.07); font:700 42px Georgia,serif; }
.atlas-panel-glyph.pop { animation:atlas-pop .38s ease; }
@keyframes atlas-pop { 50% { transform:scale(1.13); filter:drop-shadow(0 0 10px rgba(244,217,159,.6)); } }
@keyframes atlas-star-loop { 0%,14%,100% { opacity:.34; transform:scale(.9); filter:drop-shadow(0 0 0 transparent); } 5% { opacity:1; transform:scale(2.05); filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(244,217,159,1)); } 9% { opacity:1; transform:scale(1.35); filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(244,217,159,.85)); } }
@keyframes atlas-line-reveal { from { stroke-dashoffset:150; opacity:.2; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes atlas-line-pulse { 0%,100% { opacity:.72; filter:drop-shadow(0 0 3px rgba(244,217,159,.35)); } 50% { opacity:1; filter:drop-shadow(0 0 7px rgba(244,217,159,.62)); } }
@keyframes atlas-symbol-float { 0%,100% { transform:scale(1.55) translateY(0); } 50% { transform:scale(1.62) translateY(-3px); } }
@keyframes atlas-element-pulse { 0%,100% { opacity:.9; } 50% { opacity:1; filter:drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 13px rgba(214,181,109,.95)); } }
.atlas-panel h2#atlasName { color:var(--text); font:800 clamp(28px,3vw,38px)/1 var(--font-b); }
.atlas-panel-dates { margin-top:8px; color:var(--text-muted); font-size:13px; }
.atlas-chips { margin-top:21px; display:flex; flex-wrap:wrap; gap:8px; }
.atlas-chip { padding:8px 12px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#e8edf8; background:rgba(255,255,255,.06); font-size:12px; font-weight:700; }
.atlas-symbolic-name { margin-top:24px; color:#f4e3ae; font:700 17px var(--font-b); }
.atlas-animal { margin-top:6px; color:var(--text-muted); font-size:13px; }
.atlas-intro { margin-top:22px; color:var(--text-muted); font-size:14px; line-height:1.75; }
.atlas-depth-button { margin-top:22px; min-height:42px; padding:9px 14px; border:1px solid rgba(214,181,109,.3); border-radius:10px; color:var(--atlas-gold-light); background:rgba(214,181,109,.06); cursor:pointer; font:700 10px var(--font-h); letter-spacing:.08em; text-transform:uppercase; }
.atlas-depth-button:hover,.atlas-depth-button:focus-visible { border-color:var(--atlas-gold-light); background:rgba(214,181,109,.12); }
.atlas-depth { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.atlas-depth[aria-hidden="false"] { grid-template-rows:1fr; }
.atlas-depth-inner { overflow:hidden; }
.atlas-traits { padding-top:24px; display:grid; gap:18px; }
.atlas-trait-title { color:var(--atlas-gold-light); font:700 11px var(--font-h); letter-spacing:.1em; text-transform:uppercase; }
.atlas-trait-list { margin-top:10px; display:flex; flex-wrap:wrap; gap:7px; list-style:none; }
.atlas-trait-list li { padding:7px 9px; border-radius:8px; color:var(--text-muted); background:rgba(255,255,255,.055); font-size:12px; }
.atlas-trait-group.challenge .atlas-trait-list li { background:rgba(180,100,130,.11); }
.atlas-data-status { margin-top:20px; color:#778198; font-size:11px; }
.atlas-tooltip { position:fixed; z-index:80; width:min(280px,calc(100vw - 20px)); padding:12px 14px; border:1px solid rgba(214,181,109,.3); border-radius:12px; color:var(--text-muted); background:rgba(7,11,20,.96); box-shadow:0 12px 35px rgba(0,0,0,.42); opacity:0; pointer-events:none; transform:translate(-50%,calc(-100% - 10px)); transition:opacity .16s; }
.atlas-tooltip.is-visible { opacity:1; }
.atlas-tooltip strong { display:block; margin-bottom:4px; color:var(--atlas-gold-light); font-size:12px; }
.atlas-tooltip span { font-size:12px; line-height:1.5; }
.atlas-method { max-width:980px; }
.atlas-method-path { margin-top:30px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; counter-reset:atlas-step; }
.atlas-method-step { padding:25px; border-top:1px solid rgba(232,200,117,.28); color:var(--text-muted); counter-increment:atlas-step; }
.atlas-method-step::before { display:block; margin-bottom:15px; color:var(--system-accent); font:700 12px var(--font-h); content:"0" counter(atlas-step); }
.atlas-method-step strong { display:block; margin-bottom:8px; color:var(--text); font:600 15px var(--font-h); }
.atlas-method-step span { font-size:14px; line-height:1.7; }
.atlas-error { padding:35px; color:#ffd5d5; text-align:center; }
@media (max-width:900px) { .atlas-stage { grid-template-columns:1fr; } .atlas-panel { position:static; } }
@media (max-width:620px) { .atlas-hero { overflow:hidden; } .atlas-hero .system-title { font-size:clamp(38px,12vw,52px); overflow-wrap:anywhere; } .atlas-date { padding-inline:12px; font-size:12px; } .atlas-wheel-card { padding:7px; border-radius:20px; } .atlas-wheel-wrap { width:100%; } .atlas-sector-name { font-size:9px; letter-spacing:.8px; } .atlas-sector-glyph { font-size:34px; } .atlas-panel { min-width:0; padding:22px; border-radius:20px; } .atlas-method-path { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .atlas-sector-hit,.atlas-sector-glyph,.atlas-depth { transition:none; } .atlas-sign-layer.is-selected .atlas-constellation-star,.atlas-panel-glyph.pop { animation:none; } }
@media (forced-colors:active) { .atlas-wheel-card,.atlas-panel { border:1px solid CanvasText; background:Canvas; } }