/* Elyunora · Birth chart studio. Independent editorial layout; no UI frameworks. */
:root{
 --chart-night:#0C1029;--chart-violet:#242041;--chart-orchid:#8F6CB3;
 --chart-rose:#E5ACCC;--chart-cream:#F7F0E7;--chart-pale:#C5D5ED;
 --chart-ink:#24243B;
}
html{scroll-padding-top:28px}
body{background:var(--chart-night);color:var(--chart-cream)}
.chart-eyebrow,.chart-label,.chart-hero-line,.sample-tag,.panel-header,.detail-top,
.detail-kicker,.method-number{font-size:11px;letter-spacing:.15em;font-weight:700}
.chart-label{color:#C9A9DD}
.chart-section .chart-label,.chart-next .chart-label{color:#6B4677}
.chart-hero{min-height:655px;position:relative;overflow:hidden;display:grid;align-items:center;
  background:radial-gradient(ellipse at 75% 45%,#393052 0,transparent 49%),
  radial-gradient(ellipse at 78% 70%,#30243e 0,transparent 48%),#0C1029;
  border-bottom:1px solid #ffffff20;padding:96px max(7%,calc((100% - 1280px)/2)) 98px}
.chart-hero-inner{position:relative;z-index:1;max-width:850px}
.chart-eyebrow{color:var(--chart-rose);display:block}
.chart-eyebrow span{font-size:16px;margin-right:10px}
.chart-hero-line{display:flex;align-items:center;gap:12px;color:#C2B3CC;font-size:10px;margin-top:22px}
.chart-line{width:29px;height:1px;background:var(--chart-rose)}
.chart-hero h1{font:normal clamp(52px,6.3vw,92px)/1.08 Georgia,serif;
  letter-spacing:-.053em;margin:38px 0 27px;max-width:900px}
.chart-hero h1 em{color:var(--chart-rose);font-weight:normal}
.chart-hero p{font-size:16px;max-width:630px;line-height:1.86;color:#E1DBE6;margin:0}
.chart-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:29px;margin:31px 0 22px}
.chart-primary{background:var(--chart-rose);color:#1B1730;font-size:13px;font-weight:800;
 padding:17px 23px;min-height:50px;display:inline-flex;align-items:center;justify-content:space-between;gap:40px}
.chart-primary:hover{background:#F0C0DD}
.chart-secondary,.chart-text-link{display:inline-flex;min-height:46px;align-items:center;
 border-bottom:1px solid #C8A8D0;color:#FAE9F5;font-size:13px;gap:12px}
.chart-secondary:hover,.chart-text-link:hover{color:#E5ACCC}
.chart-hero .chart-hero-honesty{font-size:12px;color:#C8C1D6;margin-top:16px;letter-spacing:.02em}
.hero-deco{position:absolute;pointer-events:none;width:540px;height:540px;right:2%;top:63px;opacity:.22}
.deco-ring{position:absolute;inset:7%;border:1px solid #DAB7E0;border-radius:50%}
.deco-a{transform:rotate(27deg) scaleY(.42)}
.deco-b{transform:rotate(-42deg) scaleY(.65)}
.deco-center{font:normal 170px/540px Georgia,serif;position:absolute;inset:0;text-align:center;color:#DAB7E0}

.chart-section{padding:100px max(6%,calc((100% - 1380px)/2)) 112px;background:var(--chart-cream);color:var(--chart-ink)}
.chart-section-top{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:30px}
.chart-section-top>div{flex:1}
.chart-section-top h2,.chart-method h2,.chart-next h2{font:normal clamp(41px,4.5vw,65px)/1.1 Georgia,serif;
 letter-spacing:-.045em;margin:18px 0 0}
.chart-section-top h2 em,.chart-method h2 em,.chart-next h2 em{color:#8E6599}
.chart-section-top>p{max-width:420px;line-height:1.85;color:#625A71;font-size:15px;margin-bottom:0}
.sample-identity{display:flex;flex-wrap:wrap;align-items:center;gap:12px 25px;padding:17px 18px;
 margin-bottom:20px;background:#E8E0ED;border:1px solid #D5C6D8;color:#514563;font-size:12px}
.sample-identity strong{font-weight:700;color:#302A40}
.sample-tag{color:#6B3B6E;border-right:1px solid #BBABC5;padding-right:23px}
.chart-workspace{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:18px;align-items:stretch}
.chart-workspace>*{min-width:0}
.chart-panel{background:radial-gradient(circle at 48% 48%,#322848 0,#211C3A 48%,#17172F 95%);
 color:#F7F0E7;border-radius:3px;padding:24px 26px 16px;position:relative}
.panel-header{display:flex;justify-content:space-between;gap:14px;color:#E7C8E6;font-size:10px}
.panel-header span:last-child{color:#B6A9C7}
.wheel-wrapper{max-width:580px;margin:16px auto 0;aspect-ratio:1;display:grid;place-items:center}
#birth-chart-wheel{display:block;width:100%;max-width:580px;height:auto;overflow:visible}
.chart-wheel-note{font-size:11px;line-height:1.6;color:#C5BBCE;max-width:500px;margin:0 auto 11px;text-align:center}
.chart-guide{background:#EEE7ED;border:1px solid #DCD0E0;padding:29px 30px 25px}
.guide-header h3,.position-table-section h3{font:normal clamp(28px,3vw,41px)/1.18 Georgia,serif;
 margin:13px 0 10px;letter-spacing:-.035em}
.guide-header h3 em,.position-table-section h3 em{color:#8C5E92}
.guide-header>p{line-height:1.72;color:#61566B;font-size:13px;max-width:500px;margin:0 0 18px}
.planet-choice-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;min-height:118px}
.planet-choice{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
 border:1px solid #C8B5CA;background:#F8F3F9;color:#312843;padding:11px 3px 9px;
 min-height:62px;cursor:pointer;transition:background .17s,border-color .17s}
.planet-choice .planet-symbol{font:normal 22px/1 Georgia,serif}
.planet-choice .planet-name{font-size:10px;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.planet-choice[aria-pressed="true"]{color:#FFF8FD;background:#49345A;border-color:#49345A}
.planet-choice:hover:not([aria-pressed="true"]){background:#E7D5E7;border-color:#936B98}
.planet-choice:focus-visible{outline:3px solid #5A3A72;outline-offset:2px}
.chart-loading{grid-column:1/-1;color:#62576B;line-height:1.7}
.chart-detail{margin-top:20px;background:#FAF6F8;border-left:3px solid #94709A;padding:24px 25px 20px;
 min-height:307px}
.detail-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#88618E}
.chart-detail h4{font:normal clamp(23px,2.1vw,30px)/1.25 Georgia,serif;margin:14px 0 11px;color:#32243C}
.chart-detail h4 em{color:#96759A;font-weight:normal}
.detail-observation{font-size:13px;line-height:1.65;color:#56465E;font-weight:650;margin:0}
.detail-divider{height:1px;background:#D9CDD9;margin:19px 0}
.detail-kicker{color:#7B5483;font-size:10px}
#detail-interpretation{font-size:14px;line-height:1.77;color:#514858;margin:12px 0 9px}
.detail-question{font:italic normal 19px/1.5 Georgia,serif;color:#403249;margin:18px 0}
.detail-footnote{font-size:11px;line-height:1.6;color:#766C7C;margin:16px 0 0}
.position-table-section{margin-top:22px;padding:38px 36px;background:#EAE1EA;
 display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:50px;align-items:start}
.position-table-section p{font-size:14px;color:#605669;line-height:1.8;max-width:390px}
.chart-table-scroll{min-width:0;overflow-x:auto}
.chart-positions{border-collapse:collapse;width:100%;font-size:13px;color:#41374A}
.chart-positions caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chart-positions th{text-transform:uppercase;font-weight:700;font-size:10px;letter-spacing:.1em;
 color:#6A5471;text-align:left;border-bottom:1px solid #BDAABC;padding:12px 9px}
.chart-positions td{border-bottom:1px solid #D4C5D5;padding:12px 9px;vertical-align:middle}
.chart-positions tr:last-child td{border-bottom:0}
.chart-positions td:first-child{font-weight:750}
.chart-positions tbody tr[data-active="true"]{background:#DED1E1}
.chart-positions .sign-mark{color:#724C7B;margin-right:5px;font-size:15px}

.chart-method{background:radial-gradient(ellipse at 15% 30%,#332A4D 0,transparent 48%),#16162D;
 padding:99px max(7%,calc((100% - 1300px)/2)) 105px;color:#F7F0E7}
.method-heading{max-width:770px}
.chart-method h2 em{color:var(--chart-rose)}
.method-heading>p{max-width:580px;color:#CCC5D6;font-size:16px;line-height:1.82;margin:25px 0 0}
.method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:50px}
.method-grid article{border:1px solid #6F5C7A;padding:35px 31px 40px;
 background:linear-gradient(160deg,#392E4B6A,#1B192D6A)}
.method-number{color:var(--chart-rose);font-size:10px}
.method-grid h3{font:normal 31px/1.2 Georgia,serif;margin:35px 0 18px}
.method-grid p{color:#D1CAD7;font-size:14px;line-height:1.8;margin:0}
.chart-next{padding:100px max(8%,calc((100% - 1250px)/2)) 110px;background:#EDE5ED;color:var(--chart-ink);
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:80px}
.chart-next h2{margin-top:24px}
.next-copy p{color:#554A61;font-size:15px;line-height:1.9;margin:0 0 20px}
.next-copy .chart-primary{background:#28223E;color:#F5E5F0;margin:10px 0 8px}
.next-copy .chart-primary:hover{background:#4B355B}
.next-copy .chart-text-link{color:#5D456B;border-color:#8B7799;margin:10px 0 0 25px}
@media(max-width:1020px){
 .chart-workspace{grid-template-columns:1fr}
 .chart-panel,.chart-guide{padding:27px}
 .wheel-wrapper{max-width:540px}
 .planet-choice-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
 .position-table-section{gap:24px}
 .hero-deco{right:-215px}
}
@media(max-width:720px){
 .chart-hero{padding:69px 6% 73px;min-height:560px}
 .chart-hero h1{font-size:clamp(39px,9vw,59px);margin:28px 0 24px}
 .chart-hero p{font-size:15px;line-height:1.78}
 .chart-hero-actions{gap:12px 22px}
 .chart-section{padding:70px 5% 80px}
 .chart-section-top{display:block}
 .chart-section-top>p{margin-top:19px}
 .chart-section-top h2,.chart-method h2,.chart-next h2{font-size:clamp(37px,9vw,51px)}
 .sample-identity{gap:8px 15px;font-size:11px}
 .sample-tag{border-right:0;padding:0;width:100%}
 .chart-workspace{gap:12px}
 .chart-panel,.chart-guide{padding:19px 17px}
 .panel-header{font-size:9px;flex-wrap:wrap}
 .chart-detail{padding:19px;min-height:0}
 .position-table-section{padding:30px 18px;grid-template-columns:1fr;gap:15px}
 .chart-method{padding:75px 6% 80px}
 .method-grid{grid-template-columns:1fr;gap:12px;margin-top:35px}
 .method-grid article{padding:29px 25px}
 .method-grid h3{margin:17px 0 12px}
 .chart-next{padding:75px 6% 80px;grid-template-columns:1fr;gap:24px}
 .next-copy .chart-text-link{display:flex;margin:13px 0 0;width:max-content}
 .hero-deco{opacity:.12;width:450px;height:450px;right:-230px;top:80px}
}
@media(max-width:410px){
 .planet-choice-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .planet-choice{padding:10px 1px;min-height:58px}
 .planet-choice .planet-symbol{font-size:20px}
 .planet-choice .planet-name{font-size:9px;letter-spacing:-.025em}
 .chart-guide{padding:17px 13px}
 .chart-table-scroll{overflow-x:visible}
 .chart-positions{table-layout:fixed;width:100%}
 .chart-positions th,.chart-positions td{font-size:11px;letter-spacing:0;overflow-wrap:anywhere;padding:10px 4px}
 .chart-positions th{font-size:9px}
 .chart-positions th:nth-child(1),.chart-positions td:nth-child(1){width:27%}
 .chart-positions th:nth-child(2),.chart-positions td:nth-child(2){width:32%}
 .chart-positions th:nth-child(3),.chart-positions td:nth-child(3){width:26%}
 .chart-positions th:nth-child(4),.chart-positions td:nth-child(4){width:15%}
 .chart-primary{gap:18px}
}
@media(prefers-reduced-motion:reduce){.planet-choice{transition:none}}

/* 02.7 — chart-studio decorative centerpiece rendered by CSS, not emoji. */
.deco-center{display:grid;place-items:center;font-size:0;line-height:1}
.deco-center:after{content:"";width:130px;height:130px;background:#DAB7E0;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}