.access-page{display:grid;grid-template-columns:1.1fr 1fr;min-height:calc(100vh - 130px);padding-top:32px;padding-bottom:40px;gap:0}.access-art{position:relative;overflow:hidden;background:#203e35;color:#f7f5ec;border-radius:12px 0 0 12px;padding:54px}.access-art h1{font:500 clamp(2.5rem,5vw,4.8rem)/1.2 var(--serif);position:relative;z-index:1;margin:28px 0}.access-art p{font-size:.95rem;line-height:1.9;color:#b4c6b9;position:relative;z-index:1}.access-orbit{position:absolute;width:360px;height:360px;right:-80px;bottom:-120px;border:1px solid #829b8766;border-radius:50%;display:grid;place-items:center}.access-orbit i{position:absolute;inset:40px;border:1px solid #829b8755;border-radius:50%}.access-orbit i+ i{inset:80px}.access-orbit span{font:7rem var(--serif);color:#ddcfaa44}.access-form{background:var(--white);padding:clamp(28px,5vw,64px);border:1px solid var(--line);border-left:0;border-radius:0 12px 12px 0;display:flex;flex-direction:column;justify-content:center}.access-kicker{font-size:.74rem;color:var(--blue);letter-spacing:.15em}.access-form h2{font:500 2.1rem var(--serif);margin:18px 0 32px}.access-form form{display:grid;gap:12px}.access-form label{font-size:.85rem}.access-form input{padding:17px 14px;border:1px solid var(--line-dark);border-radius:5px;background:var(--paper);font:1rem monospace;width:100%;min-width:0}.access-note{color:var(--muted);font-size:.79rem;line-height:1.85;margin:18px 0 0}.admin-entry{margin-top:32px;font-size:.78rem;color:var(--muted)}.quota-indicator{font-size:.8rem;color:var(--blue)}.header-history{border:1px solid var(--line-dark);border-radius:5px;padding:9px 12px;background:transparent;color:var(--ink);cursor:pointer}.member-page{padding-top:52px;padding-bottom:70px}.member-welcome{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center}.member-welcome h1{font:500 clamp(2.5rem,5vw,4.3rem)/1.2 var(--serif);margin:20px 0}.member-welcome>div>p{color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}.quota-card{background:var(--night);color:var(--white);padding:34px;border-radius:10px}.quota-card>strong{font:500 4.6rem var(--serif)}.quota-card>strong small{font:1.2rem var(--serif);color:#a8bdb0}.quota-card>p{margin:8px 0 24px;color:#b8c9bd;font-size:.85rem}.quota-card>small{display:block;margin-top:18px;font-size:.73rem;line-height:1.8;color:#b8c9bd}.quota-card button{width:100%}.history-section{margin-top:54px}.history-section>header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px}.history-section h2{font:500 1.8rem var(--serif);margin:0}.history-list{display:grid;gap:12px;margin-top:22px}.history-item{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:24px;border:1px solid var(--line);background:var(--white);border-radius:8px;color:var(--ink);cursor:pointer}.history-item:hover{border-color:var(--blue)}.history-item b{font-weight:500;font-size:1rem}.history-item small{display:block;font-size:.8rem;color:var(--muted);margin-top:8px}.history-item>span:last-child{font-size:1.8rem;color:var(--blue)}.history-empty{padding:40px 0;color:var(--muted);font-size:.9rem}.text-button{border:0;background:transparent;color:var(--blue);font:inherit;font-size:.83rem;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:8px 0}.member-page>.text-button{margin-top:32px}.data-consent{display:flex;gap:12px;align-items:flex-start;font-size:.8rem;color:var(--muted);line-height:1.8;margin:28px 0 6px}.data-consent input{flex:0 0 18px;width:18px;height:18px;margin-top:5px;accent-color:var(--blue)}button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:700px){.access-page{grid-template-columns:1fr;padding-top:18px;min-height:0}.access-art{border-radius:8px 8px 0 0;padding:30px}.access-art h1{font-size:2.7rem;margin:20px 0}.access-art p{font-size:.84rem}.access-form{border-left:1px solid var(--line);border-radius:0 0 8px 8px;padding:28px 24px}.access-form h2{font-size:1.8rem}.access-orbit{width:230px;height:230px;bottom:-90px;right:-40px}.member-page{padding-top:30px}.member-welcome{grid-template-columns:1fr;gap:20px}.member-welcome h1{font-size:2.7rem}.quota-card{padding:25px}.quota-card>strong{font-size:3.6rem}.history-section{margin-top:34px}.history-item{padding:20px 16px}.quota-indicator{font-size:.69rem;max-width:100px;text-align:right}.header-meta{gap:10px}.header-history{font-size:.75rem;padding:8px}.brand-caption{display:none}}

:root {
  color-scheme: light;
  --paper: #e9eef3;
  --paper-2: #dfe6ed;
  --white: #f9fbfc;
  --ink: #10151c;
  --muted: #586574;
  --faint: #82909e;
  --line: #c7d0d9;
  --line-dark: #9ca9b5;
  --blue: #075dff;
  --blue-deep: #0647bd;
  --blue-soft: #dce8ff;
  --orange: #ff4d00;
  --acid: #b6ff68;
  --night: #091018;
  --night-2: #101a25;
  --shadow: 0 26px 80px rgba(16, 25, 35, .13);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-family: var(--sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 8% 0%, rgba(7,93,255,.08), transparent 30rem), var(--paper); }
button, select, input { font: inherit; }
button, label, select, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  height: 72px;
  padding: 0 clamp(18px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(233, 238, 243, .88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 750; letter-spacing: .1em; }
.brand-mark { width: 34px; height: 34px; background: var(--night); color: var(--acid); display: grid; place-items: center; border-radius: 50% 50% 48% 52%; font-family: var(--serif); font-size: 1.25rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 6px 20px rgba(9,16,24,.18); }
.brand small { color: var(--muted); letter-spacing: .04em; font-weight: 500; margin-left: 8px; }
.header-meta { display: flex; align-items: center; gap: 18px; }
.local-note { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.local-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.stage-track { display: flex; align-items: center; gap: 7px; }
.stage-dot { width: 25px; height: 3px; border-radius: 4px; background: var(--line); transition: .3s ease; }
.stage-dot.active { width: 42px; background: var(--orange); }

.page { min-height: calc(100vh - 72px); }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.input-page {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(510px, 1.12fr);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.input-intro {
  min-height: calc(100vh - 72px);
  padding: clamp(46px, 8vh, 92px) clamp(28px, 5vw, 70px);
  position: relative;
  overflow: hidden;
  border-right: 1px solid #1b2a38;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 18% 14%, rgba(7,93,255,.42), transparent 24rem),
    var(--night);
  background-size: 54px 54px, 54px 54px, auto, auto;
}
.input-intro::after {
  content: "命";
  position: absolute;
  right: -3rem;
  bottom: -7rem;
  font-family: var(--serif);
  font-size: clamp(18rem, 34vw, 33rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(182, 255, 104, .15);
  pointer-events: none;
}
.kicker { color: var(--blue); font-weight: 750; letter-spacing: .16em; font-size: .78rem; text-transform: uppercase; }
.input-intro h1, .chart-title, .section-title {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.045em;
}
.input-intro h1 { margin: 28px 0 24px; font-size: clamp(3rem, 6.3vw, 6.2rem); line-height: .98; max-width: 7em; }
.input-intro .lead { max-width: 32rem; color: #aebac6; font-size: 1rem; line-height: 1.85; }
.input-intro .kicker { color: var(--acid); }
.rule-index { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); margin-top: 50px; max-width: 430px; }
.rule-index div { background: rgba(8,15,22,.78); padding: 15px; }
.rule-index span { color: var(--orange); display: block; font-family: Georgia, serif; font-size: .75rem; margin-bottom: 6px; }
.rule-index b { font-size: .82rem; font-weight: 650; color: #dce4eb; }

.birth-panel { padding: clamp(34px, 6vh, 72px) clamp(28px, 5vw, 72px); background: rgba(249,251,252,.96); }
.form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.form-head h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 7px 0 0; }
.step-number { font-family: Georgia, serif; color: var(--orange); font-size: 1.1rem; }

.calendar-toggle { display: inline-flex; padding: 4px; background: var(--paper-2); border-radius: 12px; margin-bottom: 26px; }
.calendar-toggle input { position: absolute; opacity: 0; }
.calendar-toggle label { cursor: pointer; padding: 9px 20px; border-radius: 9px; color: var(--muted); font-size: .86rem; font-weight: 650; }
.calendar-toggle input:checked + label { background: var(--ink); color: white; }

.field-group { margin-bottom: 25px; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; color: var(--ink); font-size: .85rem; font-weight: 700; }
.field-label small { color: var(--faint); font-weight: 400; font-size: .72rem; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.select-wrap { position: relative; }
.select-wrap::after { content: "↓"; position: absolute; right: 15px; top: 50%; transform: translateY(-52%); color: var(--blue); pointer-events: none; font-weight: 700; }
select {
  width: 100%;
  height: 54px;
  appearance: none;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  padding: 0 38px 0 14px;
  font-size: .9rem;
  outline: none;
  transition: .18s ease;
}
select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(38,60,255,.1); }
select:disabled { color: var(--faint); background: var(--paper-2); }

.inline-checks { display: flex; flex-wrap: wrap; gap: 9px; }
.check-pill input { position: absolute; opacity: 0; }
.check-pill label { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 17px; border: 1px solid var(--line-dark); border-radius: 999px; cursor: pointer; font-size: .84rem; color: var(--muted); }
.check-pill input:checked + label { color: white; background: var(--blue); border-color: var(--blue); }
.unknown-line { margin-top: 10px; }
.unknown-line label { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: .78rem; cursor: pointer; }
.unknown-line input { width: 17px; height: 17px; accent-color: var(--blue); }
.form-message { min-height: 22px; margin: 5px 0 8px; color: #b62f19; font-size: .78rem; }
.primary-button, .secondary-button {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  padding: 0 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 750;
  text-decoration: none;
  transition: .2s ease;
}
.primary-button { background: var(--orange); color: white; box-shadow: 0 14px 34px rgba(255,77,0,.22); }
.primary-button:hover { background: #e74600; transform: translateY(-2px); }
.primary-button:disabled { background: var(--line-dark); box-shadow: none; cursor: not-allowed; }
.secondary-button { background: transparent; border: 1px solid var(--line-dark); color: var(--ink); }
.secondary-button:hover { border-color: var(--blue); color: var(--blue); }
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.privacy-copy { color: var(--faint); font-size: .72rem; line-height: 1.55; max-width: 15rem; }

.chart-page { padding-bottom: 80px; }
.chart-hero { padding: clamp(44px, 7vw, 88px) 0 54px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(220,232,255,.38)); }
.chart-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: end; }
.chart-title { margin: 14px 0 22px; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .98; }
.chart-lead { color: var(--muted); max-width: 42rem; line-height: 1.8; }
.birth-ticket { background: var(--night); color: white; padding: 26px; border-radius: 24px 24px 8px 24px; transform: rotate(.7deg); box-shadow: 11px 11px 0 var(--acid); }
.birth-ticket .ticket-top { display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.7); font-size: .72rem; letter-spacing: .1em; }
.birth-ticket strong { display: block; font-family: var(--serif); font-size: clamp(1.55rem, 3vw, 2.35rem); margin: 24px 0 12px; }
.birth-ticket p { margin: 0; color: rgba(255,255,255,.78); font-size: .8rem; line-height: 1.65; }
.hero-actions { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }

.chart-nav { position: sticky; top: 72px; z-index: 25; background: rgba(233,238,243,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.chart-nav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.chart-nav a { flex: 0 0 auto; padding: 16px 18px; text-decoration: none; font-size: .78rem; color: var(--muted); border-bottom: 2px solid transparent; }
.chart-nav a:hover { color: var(--blue); border-color: var(--blue); }

.chart-section { padding: clamp(56px, 8vw, 96px) 0; border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: end; margin-bottom: 36px; }
.section-index { color: var(--orange); font-family: Georgia, serif; font-size: .8rem; letter-spacing: .1em; }
.section-title { font-size: clamp(2.4rem, 5vw, 4.8rem); margin: 8px 0 0; line-height: 1; }
.section-desc { color: var(--muted); line-height: 1.8; margin: 0; max-width: 38rem; }

.bazi-layout { display: grid; grid-template-columns: 1.45fr .55fr; gap: 18px; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--ink); background: var(--ink); gap: 1px; }
.pillar { background: var(--white); min-height: 390px; padding: 22px 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.pillar::after { content: attr(data-index); position: absolute; right: -6px; bottom: -24px; font-family: Georgia, serif; color: rgba(38,60,255,.065); font-size: 7rem; }
.pillar-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .74rem; }
.pillar-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.pillar-chars { margin: 30px 0; text-align: center; font-family: var(--serif); font-size: clamp(3.5rem, 6vw, 5.8rem); letter-spacing: .12em; line-height: 1; writing-mode: vertical-rl; align-self: center; }
.pillar.unknown .pillar-chars { color: var(--line-dark); letter-spacing: 0; }
.pillar-meta { margin-top: auto; position: relative; z-index: 1; }
.meta-row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; border-top: 1px solid var(--line); padding: 9px 0; font-size: .74rem; line-height: 1.5; }
.meta-row span { color: var(--faint); }
.bazi-side { display: grid; gap: 10px; }
.metric-card { border: 1px solid var(--line); background: rgba(249,251,252,.72); padding: 20px; border-radius: 18px; }
.metric-card strong { display: block; font-family: var(--serif); font-size: 1.55rem; margin: 9px 0 7px; }
.metric-card span { color: var(--blue); font-size: .72rem; font-weight: 700; }
.metric-card p { color: var(--muted); margin: 0; font-size: .77rem; line-height: 1.6; }

.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.insight-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: 0 12px 36px rgba(16,25,35,.045); }
.insight-card .source { color: var(--blue); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.insight-card h3 { font-family: var(--serif); font-size: 1.35rem; margin: 12px 0 9px; }
.insight-card p { color: var(--muted); line-height: 1.75; margin: 0; font-size: .83rem; }

.ziwei-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.meta-chip { border: 1px solid var(--line-dark); border-radius: 999px; padding: 8px 13px; color: var(--muted); font-size: .74rem; background: var(--white); }
.meta-chip b { color: var(--ink); }
.board-scroll { overflow-x: auto; padding-bottom: 10px; scrollbar-color: var(--blue) var(--paper-2); }
.palace-board { min-width: 850px; aspect-ratio: 1.45; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.palace { background: var(--white); padding: 14px; min-width: 0; position: relative; transition: .18s ease; }
.palace:hover { z-index: 2; background: var(--blue-soft); }
.palace.focus { background: var(--acid); }
.palace.pos-0 { grid-area: 4/1; }.palace.pos-1 { grid-area: 3/1; }.palace.pos-2 { grid-area: 2/1; }.palace.pos-3 { grid-area: 1/1; }
.palace.pos-4 { grid-area: 1/2; }.palace.pos-5 { grid-area: 1/3; }.palace.pos-6 { grid-area: 1/4; }.palace.pos-7 { grid-area: 2/4; }
.palace.pos-8 { grid-area: 3/4; }.palace.pos-9 { grid-area: 4/4; }.palace.pos-10 { grid-area: 4/3; }.palace.pos-11 { grid-area: 4/2; }
.board-center { grid-area: 2/2/4/4; background: var(--night); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 25px; position: relative; overflow: hidden; }
.board-center::before, .board-center::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.board-center::before { width: 310px; height: 310px; }.board-center::after { width: 190px; height: 190px; }
.board-center strong { font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.2rem); position: relative; z-index: 1; }
.board-center span { position: relative; z-index: 1; color: rgba(255,255,255,.7); font-size: .78rem; margin-top: 9px; }
.palace-top { display: flex; justify-content: space-between; gap: 8px; }
.palace-name { font-family: var(--serif); font-size: 1.06rem; font-weight: 700; }
.palace-branch { color: var(--muted); font-size: .72rem; }
.major-stars { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 16px; }
.star { font-weight: 750; font-size: .82rem; }
.star small { color: var(--muted); font-weight: 400; }
.star em { color: var(--orange); font-size: .63rem; font-style: normal; vertical-align: super; margin-left: 1px; }
.minor-stars { color: var(--faint); font-size: .66rem; line-height: 1.55; margin-top: 8px; }
.body-badge { position: absolute; right: 9px; bottom: 8px; color: var(--blue); border: 1px solid currentColor; border-radius: 999px; padding: 2px 6px; font-size: .58rem; }
.ziwei-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:24px 0 18px; }
.ziwei-toolbar [role="group"] { display:flex; padding:4px; border:1px solid var(--line-dark); border-radius:9px; }
.ziwei-toolbar button { min-height:44px; padding:8px 16px; background:transparent; border:0; border-radius:5px; color:var(--muted); cursor:pointer; font:inherit; font-size:.84rem; }
.ziwei-toolbar button[aria-pressed="true"] { background:var(--night); color:var(--white); }
.ziwei-toolbar button:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.ziwei-toolbar small { color:var(--muted); font-size:.75rem; }
.ziwei-view[data-ziwei-view="cards"] .board-caption,
.ziwei-view[data-ziwei-view="board"] .cards-caption { display:none; }
.ziwei-view[data-ziwei-view="cards"] .palace-board { min-width:0; aspect-ratio:auto; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto; gap:12px; background:transparent; border:0; }
.ziwei-view[data-ziwei-view="cards"] .palace { grid-area:auto; order:var(--palace-order); min-height:152px; padding:18px 16px 30px; border:1px solid var(--line); border-radius:8px; }
.ziwei-view[data-ziwei-view="cards"] .palace.focus { background:var(--white); border-top:3px solid var(--blue); }
.ziwei-view[data-ziwei-view="cards"] .palace.focus .palace-name { color:var(--blue); }
.ziwei-view[data-ziwei-view="cards"] .board-center { grid-area:auto; grid-column:1/-1; order:-1; padding:20px 24px; border-radius:8px; flex-direction:row; justify-content:space-between; gap:16px; text-align:left; }
.ziwei-view[data-ziwei-view="cards"] .board-center::before,
.ziwei-view[data-ziwei-view="cards"] .board-center::after { display:none; }
.ziwei-view[data-ziwei-view="cards"] .board-center strong { font-size:clamp(1.1rem,2vw,1.8rem); letter-spacing:.06em; }
.ziwei-view[data-ziwei-view="cards"] .board-center span { font-size:.75rem; margin:0; line-height:1.7; }
.submitted-answers { padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:20px 0 24px; }
.submitted-answers h4,.direction-hypothesis h4 { font-size:.82rem; color:var(--blue); margin:0 0 12px; }
.submitted-answers dl { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin:0 0 12px; }
.submitted-answers dl div { display:grid; grid-template-columns:5em 1fr; gap:8px; font-size:.82rem; line-height:1.65; }
.submitted-answers dt { color:var(--muted); }
.submitted-answers dd { margin:0; }
.submitted-answers small { color:var(--muted); font-size:.74rem; line-height:1.65; display:block; }
@media(max-width:780px) {
  .ziwei-view[data-ziwei-view="cards"] .palace-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ziwei-view[data-ziwei-view="cards"] .palace { padding:14px 12px 28px; min-height:150px; }
  .ziwei-view[data-ziwei-view="cards"] .board-center { display:block; padding:18px; }
  .ziwei-view[data-ziwei-view="cards"] .board-center strong { font-size:1.2rem; display:block; }
  .ziwei-view[data-ziwei-view="cards"] .board-center span { display:block; margin-top:8px; }
  .ziwei-view[data-ziwei-view="cards"] .star { font-size:.9rem; }
  .ziwei-view[data-ziwei-view="cards"] .minor-stars { font-size:.76rem; color:var(--muted); }
  .ziwei-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .ziwei-meta .meta-chip { padding:9px 6px; border-radius:6px; text-align:center; font-size:.75rem; }
  .submitted-answers dl { grid-template-columns:1fr; }
}

.reality-panel { background: radial-gradient(circle at 100% 0%, rgba(7,93,255,.32), transparent 30rem), var(--night); color: white; border-radius: 32px; padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: .68fr 1.32fr; gap: 56px; box-shadow: 0 34px 90px rgba(8,15,22,.2); }
.reality-panel .section-title { color: white; font-size: clamp(2.2rem, 4vw, 4rem); }
.reality-panel .section-desc { color: #b7b8af; }
.mini-question { padding: 18px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.15); margin: 0; }
.mini-question:first-child { padding-top: 0; }
.mini-question legend { font-family: var(--serif); font-size: 1rem; margin-bottom: 12px; }
.mini-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-option input { position: absolute; opacity: 0; }
.mini-option label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #c8c9c1; cursor: pointer; font-size: .78rem; }
.mini-option input:checked + label { color: var(--ink); background: var(--acid); border-color: var(--acid); }
.reality-form .primary-button { margin-top: 22px; }
.career-results { margin-top: 18px; display: grid; gap: 10px; }
.career-card { background: var(--white); color: var(--ink); border-radius: 15px; padding: 22px; display: grid; grid-template-columns: 40px 1fr; gap: 16px; }
.career-rank { color: var(--blue); font-family: Georgia, serif; }
.career-card h3 { font-family: var(--serif); margin: 0 0 6px; font-size: 1.25rem; }
.career-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.career-evidence { margin-top: 10px; color: var(--blue); font-size: .7rem; }

.method-note { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.note-card { border: 1px solid var(--line); padding: 24px; border-radius: 15px; background: var(--white); }
.note-card h3 { font-family: var(--serif); margin: 0 0 8px; }
.note-card p { color: var(--muted); margin: 0; line-height: 1.75; font-size: .8rem; }
.site-footer { padding: 26px 0 38px; color: var(--faint); font-size: .7rem; display: flex; justify-content: space-between; gap: 20px; }

.error-card { max-width: 620px; margin: 80px auto; background: var(--white); border: 1px solid var(--line); padding: 32px; border-radius: 18px; }
.error-card h2 { font-family: var(--serif); }

.deep-section {
  color: white;
  background:
    radial-gradient(circle at 16% 10%, rgba(7,93,255,.26), transparent 26rem),
    radial-gradient(circle at 88% 74%, rgba(182,255,104,.08), transparent 22rem),
    var(--night);
  overflow: hidden;
}
.deep-section .section-desc { color: #a8b4c0; }
.reading-shell { position: relative; z-index: 1; }
.reading-orbit { width: 420px; height: 420px; position: absolute; right: -145px; top: -240px; opacity: .45; pointer-events: none; }
.reading-orbit i { position: absolute; inset: 0; border: 1px solid rgba(182,255,104,.28); border-radius: 50%; }
.reading-orbit i:nth-child(2) { inset: 62px; border-color: rgba(7,93,255,.7); }
.reading-orbit i:nth-child(3) { inset: 136px; border-color: rgba(255,77,0,.55); }
.reading-label, .report-source { display: inline-flex; align-items: center; gap: 9px; color: var(--acid); font-size: .74rem; letter-spacing: .11em; font-weight: 750; text-transform: uppercase; }
.pulse { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px rgba(182,255,104,.1); }
.reading-core { max-width: 970px; margin: 22px 0 16px; font-family: var(--serif); font-size: clamp(2rem,4.8vw,4.5rem); line-height: 1.18; letter-spacing: -.035em; }
.reading-summary { max-width: 850px; color: #b4c0cb; font-size: 1rem; line-height: 1.9; }
.pattern-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 38px; }
.pattern-card { min-height: 420px; padding: 25px; display: flex; flex-direction: column; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); border-radius: 24px; backdrop-filter: blur(18px); }
.pattern-no { color: var(--orange); font-family: Georgia,serif; font-size: .78rem; }
.pattern-card h4 { font-family: var(--serif); font-size: 1.45rem; margin: 23px 0 12px; }
.pattern-card > p { color: #c0cad3; line-height: 1.82; font-size: .88rem; margin: 0; }
.tradeoff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 22px; }
.tradeoff span { padding: 12px; border-radius: 13px; color: #b7c1ca; background: rgba(255,255,255,.055); font-size: .72rem; line-height: 1.55; }
.tradeoff b { display: block; color: white; margin-bottom: 5px; font-size: .68rem; }
.evidence-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.evidence-row em { font-style: normal; color: #8fb3ff; font-size: .65rem; border: 1px solid rgba(143,179,255,.24); border-radius: 999px; padding: 4px 7px; }
.claim-feedback { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 15px; }
.claim-feedback button { min-height: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: #aeb9c2; background: transparent; cursor: pointer; font-size: .68rem; }
.claim-feedback button:hover, .claim-feedback button.selected { color: var(--night); background: var(--acid); border-color: var(--acid); }
.tension-card { margin-top: 12px; padding: 26px clamp(24px,4vw,46px); border-radius: 22px; color: var(--night); background: var(--acid); display: grid; grid-template-columns: .35fr .7fr 1.8fr; gap: 20px; align-items: center; }
.tension-card > span { font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.tension-card h4 { font-family: var(--serif); font-size: 1.45rem; margin: 0; }
.tension-card p { margin: 0; line-height: 1.7; font-size: .84rem; }

.reality-form { min-height: 470px; }
.question-step { display: none; min-height: 470px; animation: reveal .42s ease both; }
.question-step.active { display: flex; flex-direction: column; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.question-count { display: flex; justify-content: space-between; align-items: center; color: #8e9dab; font-size: .72rem; letter-spacing: .1em; }
.question-count span { color: var(--acid); }
.question-step fieldset { border: 0; padding: 0; margin: 36px 0 0; }
.question-step legend { max-width: 720px; font-family: var(--serif); font-size: clamp(1.7rem,3.2vw,3rem); line-height: 1.25; }
.question-hint { color: #8e9dab; font-size: .75rem; line-height: 1.65; margin: 12px 0 0; }
.answer-stack { display: grid; gap: 8px; margin-top: 25px; }
.answer-option { min-height: 56px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #bec8d1; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.035); cursor: pointer; transition: .18s ease; }
.answer-option input { position: absolute; opacity: 0; }
.answer-option span { font-size: .86rem; }
.answer-option i { color: #627180; font-style: normal; }
.answer-option:hover { border-color: rgba(182,255,104,.45); }
.answer-option.selected { color: var(--night); background: var(--acid); border-color: var(--acid); }
.answer-option.selected i { color: var(--night); }
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 24px; }
.text-button { min-height: 44px; padding: 0; border: 0; color: #9aa8b4; background: transparent; cursor: pointer; }
.question-step .primary-button:disabled { opacity: .42; }

#careerReport { scroll-margin-top: 130px; }
.final-report { margin-top: 28px; padding: clamp(28px,6vw,72px); background: var(--white); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow); }
.report-mast { padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.report-source { color: var(--blue); }
.report-source .pulse { box-shadow: 0 0 0 6px rgba(7,93,255,.09); }
.report-mast h2 { max-width: 980px; margin: 22px 0 14px; font-family: var(--serif); font-size: clamp(2.1rem,4.8vw,4.7rem); line-height: 1.15; letter-spacing: -.04em; }
.report-mast p { max-width: 800px; color: var(--muted); line-height: 1.85; }
.report-band { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; margin: 52px 0 18px; }
.report-band span { color: var(--orange); font-family: Georgia,serif; }
.report-band h3 { margin: 0; font-family: var(--serif); font-size: 1.55rem; }
.report-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.report-two article { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #f3f6f8; }
.report-two h4 { margin: 0 0 9px; font-family: var(--serif); font-size: 1.25rem; }
.report-two p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.75; }
.report-two aside { margin-top: 14px; padding: 12px; border-left: 3px solid var(--acid); color: var(--ink); background: white; font-size: .74rem; }
.report-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; }
.report-tags span { padding: 5px 8px; color: var(--blue); background: var(--blue-soft); border-radius: 999px; font-size: .64rem; }
.path-stack { display: grid; gap: 10px; }
.path-card { padding: clamp(20px,3vw,34px); display: grid; grid-template-columns: 55px 1fr; gap: 20px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.path-index { color: var(--blue); font-family: Georgia,serif; }
.path-card h4 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 8px; }
.path-why { color: var(--muted); line-height: 1.75; font-size: .84rem; }
.path-card dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 18px 0 0; background: var(--line); border: 1px solid var(--line); }
.path-card dl div { padding: 14px; background: #f5f7f9; }
.path-card dt { color: var(--faint); font-size: .66rem; margin-bottom: 6px; }
.path-card dd { margin: 0; color: var(--ink); font-size: .74rem; line-height: 1.6; }
.report-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 50px; }
.drain-card, .action-card { padding: clamp(24px,4vw,38px); border-radius: 22px; }
.drain-card { color: white; background: var(--night); }
.drain-card > span, .action-card > span { color: var(--acid); font-size: .7rem; letter-spacing: .1em; }
.drain-card h3, .action-card h3 { font-family: var(--serif); font-size: 1.55rem; line-height: 1.25; }
.drain-card ul { margin: 18px 0 0; padding-left: 1.2em; color: #b9c3cb; font-size: .8rem; line-height: 1.75; }
.action-card { color: var(--night); background: var(--acid); }
.action-card > span { color: var(--blue); }
.action-card p { font-size: .82rem; line-height: 1.75; }
.action-card b { display: block; margin-top: 18px; font-size: .74rem; }

@media (max-width: 920px) {
  .input-page { grid-template-columns: 1fr; border: 0; }
  .input-intro { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 48px; }
  .input-intro h1 { max-width: none; font-size: clamp(3rem, 12vw, 5.8rem); }
  .input-intro::after { font-size: 18rem; right: -2rem; bottom: -5rem; }
  .birth-panel { padding-top: 42px; }
  .chart-hero-grid, .section-head, .bazi-layout, .reality-panel { grid-template-columns: 1fr; }
  .chart-hero-grid { gap: 34px; }
  .birth-ticket { max-width: 520px; }
  .section-head { gap: 20px; }
  .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pillar { min-height: 350px; }
  .bazi-side { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .metric-card { padding: 16px; }
  .reality-panel { gap: 32px; }
  .pattern-grid { grid-template-columns: 1fr; }
  .pattern-card { min-height: 0; }
  .tension-card { grid-template-columns: 1fr; }
  .report-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-header { height: 62px; padding: 0 14px; }
  .brand small, .local-note { display: none; }
  .stage-dot { width: 17px; }.stage-dot.active { width: 30px; }
  .page { min-height: calc(100vh - 62px); }
  .wrap { width: min(100% - 28px, 560px); }
  .input-intro { min-height: 390px; padding: 42px 20px 36px; }
  .input-intro h1 { font-size: 3.25rem; margin-top: 22px; }
  .input-intro .lead { font-size: .92rem; }
  .rule-index { margin-top: 34px; }
  .birth-panel { padding: 34px 18px 44px; }
  .form-head { margin-bottom: 26px; }
  .form-head h2 { font-size: 1.8rem; }
  .field-grid.two { grid-template-columns: 1fr; }
  .submit-row { display: block; }
  .submit-row .primary-button { width: 100%; }
  .privacy-copy { max-width: none; margin-top: 12px; text-align: center; }
  .chart-nav { top: 62px; }
  .chart-hero { padding-top: 42px; }
  .chart-title { font-size: 3.65rem; }
  .birth-ticket { margin: 8px 7px 10px 0; padding: 22px; box-shadow: 7px 7px 0 var(--acid); }
  .chart-section { padding: 58px 0; }
  .section-title { font-size: 3rem; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar { min-height: 305px; padding: 15px 12px; }
  .pillar-chars { font-size: 3.8rem; margin: 22px 0; }
  .meta-row { grid-template-columns: 38px 1fr; font-size: .68rem; }
  .bazi-side { grid-template-columns: 1fr; }
  .insight-grid { grid-template-columns: 1fr; }
  .mobile-board-hint { display: block; }
  .palace-board { min-width: 760px; }
  .method-note { grid-template-columns: 1fr; }
  .site-footer { display: block; line-height: 1.7; }
  .site-footer span { display: block; }
  .career-card { grid-template-columns: 30px 1fr; padding: 18px; }
  .reading-core { font-size: 2.35rem; }
  .reading-summary { font-size: .9rem; }
  .pattern-card { padding: 21px; }
  .tradeoff { grid-template-columns: 1fr; }
  .claim-feedback { grid-template-columns: 1fr 1fr; }
  .tension-card { padding: 23px; }
  .reality-panel { border-radius: 24px; padding: 26px 20px; }
  .question-step { min-height: 560px; }
  .question-step legend { font-size: 1.75rem; }
  .answer-option { min-height: 58px; }
  .question-actions .primary-button { min-height: 48px; padding: 0 15px; }
  .final-report { width: calc(100% + 12px); margin-left: -6px; padding: 28px 18px; border-radius: 24px; }
  .report-mast h2 { font-size: 2.35rem; }
  .report-two { grid-template-columns: 1fr; }
  .report-band { grid-template-columns: 38px 1fr; }
  .path-card { grid-template-columns: 32px 1fr; padding: 20px 15px; gap: 8px; }
  .path-card dl { grid-template-columns: 1fr; }
  .report-bottom { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.analysis-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 0 0 20px; padding: 14px 16px; border: 1px solid rgba(24,23,20,.12);
  border-radius: 14px; background: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5;
}
.analysis-notice > div { display: grid; gap: 2px; }
.analysis-notice strong { display: block; color: var(--ink); }
.analysis-notice span { color: var(--muted); }
.analysis-notice.loading { border-color: rgba(184,116,49,.28); background: rgba(240,224,196,.34); }
.analysis-notice.loading strong::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 0 rgba(184,116,49,.45); animation: noticePulse 1.8s infinite;
}
.analysis-notice.success { border-color: rgba(45,112,78,.22); background: rgba(224,241,231,.46); }
.analysis-notice.error { border-color: rgba(151,72,55,.24); background: rgba(248,232,226,.58); }
.retry-analysis {
  flex: 0 0 auto; border: 1px solid var(--ink); border-radius: 999px; background: transparent;
  color: var(--ink); padding: 8px 13px; font: inherit; cursor: pointer;
}
.retry-analysis:hover { background: var(--ink); color: var(--paper); }
@keyframes noticePulse { 70% { box-shadow: 0 0 0 8px rgba(184,116,49,0); } 100% { box-shadow: 0 0 0 0 rgba(184,116,49,0); } }

@media (max-width: 680px) {
  .analysis-notice { align-items: flex-start; flex-direction: column; }
  .retry-analysis { width: 100%; }
}
:root { --atlas-lime: #d6f4a6; }

/* Editorial analysis: restrained headings, generous reading rhythm. */
.deep-section { background: #101d29; }
.deep-section .section-title, .reality-panel .section-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .02em; }
.deep-section .section-head { margin-bottom: 34px; align-items: end; }
.atlas-eyebrow { display: block; font: 600 .68rem/1.6 var(--sans); letter-spacing: .1em; color: #789eaf; }
.atlas-intro { max-width: 850px; }
.atlas-lead { font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.8; margin: 18px 0; letter-spacing: .025em; }
.atlas-summary { font-size: .91rem; line-height: 1.95; color: #afbfcc; margin: 0; }
.dimensions { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin: 40px 0; }
.dimension { min-width: 0; padding: 30px 0; border-top: 1px solid #334351; }
.dimension header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dimension-no { color: #92b2c4; font: italic 1rem Georgia, serif; }
.dimension h3 { font-size: 1.2rem; font-weight: 600; margin: 0; letter-spacing: .07em; }
.dimension p, .dimension blockquote, .dimension dd { font-size: .85rem; line-height: 1.95; color: #c5d0d9; }
.dimension > p { margin: 0 0 20px; }
.dimension blockquote { margin: 0 0 20px; padding: 12px 16px; background: #1b2b38; border-left: 2px solid #96bdb2; }
.dimension blockquote > span, .dimension-practice > span { display: block; color: var(--atlas-lime); font-size: .7rem; letter-spacing: .05em; margin-bottom: 4px; }
.dimension dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 22px; }
.dimension dt { color: #8eabbc; font-size: .7rem; margin-bottom: 5px; }
.dimension dd { margin: 0; font-size: .79rem; }
.atlas-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-tags span { border: 1px solid #39505e; border-radius: 4px; padding: 3px 7px; font-size: .63rem; color: #9fbbc9; }
.atlas-tension { padding: 30px; display: grid; grid-template-columns: 1fr 2.6fr; gap: 35px; background: #213533; border: 1px solid #45594b; border-radius: 4px 24px 4px 24px; }
.atlas-tension h3 { font: 1.5rem/1.6 var(--serif); color: var(--atlas-lime); margin: 10px 0; }
.atlas-tension p { font-size: .9rem; line-height: 1.95; margin: 0 0 18px; color: #d1dcd5; }
.environment-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 38px; }
.environment-strip h3 { font-size: .88rem; color: #d6e0e7; }
.environment-strip p, .atlas-boundary { color: #aebec9; font-size: .8rem; line-height: 1.9; }
.atlas-boundary { font-size: .71rem; border-top: 1px solid #334351; padding-top: 22px; margin: 24px 0 0; }

/* A drawing, never a simulated report or a fabricated progress percentage. */
.analysis-wait { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 50px; min-height: 330px; padding: 38px; border: 1px solid #354858; border-radius: 24px; background: #142431; color: #e6edf2; }
.orbit-drawing { width: 220px; height: 220px; position: relative; display: grid; place-items: center; }
.orbit-drawing svg { width: 100%; overflow: visible; fill: none; stroke: #8ca9ba; stroke-width: .7; }
.orbit-drawing ellipse { stroke-dasharray: 60 12 140 18; animation: orbit-trace 7s linear infinite; }
.orbit-drawing ellipse:nth-child(2) { stroke: #d6f4a6; animation-direction: reverse; }
.orbit-drawing ellipse:nth-child(3) { stroke: #559df2; animation-duration: 10s; }
.orbit-drawing circle { fill: #d6f4a6; stroke: none; animation: breathe 2.8s ease-in-out infinite; }
.orbit-drawing path { stroke: #38505f; stroke-dasharray: 2 5; }
.orbit-drawing > span { position: absolute; bottom: 0; font-size: .65rem; letter-spacing: .5em; color: #94afbf; }
.wait-copy h3 { font: 1.4rem/1.6 var(--serif); margin: 12px 0; }
.wait-copy p { color: #afbfcc; font-size: .86rem; line-height: 1.9; max-width: 470px; }
.wait-copy small { display: block; color: #91a9b9; font-size: .7rem; line-height: 1.8; }
.wait-line { max-width: 340px; height: 2px; background: #334a5a; overflow: hidden; margin: 25px 0 18px; }
.wait-line i { display: block; width: 35%; height: 100%; background: #b2ccbd; animation: wait-sweep 2.8s ease-in-out infinite; }
.loading-dots { animation: breathe 1.6s infinite; }
@keyframes orbit-trace { to { stroke-dashoffset: -460; } }
@keyframes breathe { 50% { opacity: .3; } }
@keyframes wait-sweep { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
.wait-light { margin-top: 30px; background: #f7fafb; border-color: #c9d8dd; color: var(--ink); }
.wait-light p, .wait-light small { color: #5a7382; }
.wait-light .wait-line { background: #dce6e8; }
.wait-light .wait-line i { background: #386e88; }
.wait-light .orbit-drawing ellipse:nth-child(2) { stroke: #63823c; }
.wait-light .orbit-drawing circle { fill: #47745b; }
.analysis-failure { padding: 32px; border: 1px solid #7d7770; border-radius: 20px; margin-top: 24px; }
.analysis-failure h3 { font-size: 1.3rem; }
.analysis-failure p { font-size: .85rem; line-height: 1.85; overflow-wrap: anywhere; }

/* Three-lane career atlas. Nodes select details, rather than implying a score. */
.career-atlas { margin-top: 48px; padding: clamp(22px,4vw,48px); border: 1px solid #cbd6da; background: #f8faf8; border-radius: 28px; }
.career-atlas .atlas-eyebrow { color: #53776b; }
.career-atlas .atlas-intro h2 { font: 2.4rem/1.4 var(--serif); margin: 12px 0 20px; }
.career-atlas .atlas-summary { color: #54665f; }
.career-atlas .atlas-tags span { color: #567266; border-color: #c4d4ca; }
.calibration-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin: 34px 0 56px; border-top: 1px solid #cbd6da; padding-top: 26px; }
.calibration-grid article { min-width: 0; }
.calibration-grid p { font-size: .8rem; color: #56685f; line-height: 1.85; }
.calibration-grid .calibration-before { color: #72847c; border-left: 2px solid #c1cec6; padding-left: 12px; }
.calibration-grid strong { display: block; font-size: .88rem; line-height: 1.7; }
.map-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.map-heading h3 { font-size: 1.25rem; margin: 0; }
.map-heading p, .map-heading > span { color: #63786d; font-size: .74rem; line-height: 1.8; }
.map-origin { display: flex; flex-direction: column; align-items: center; margin-top: 30px; }
.map-origin span { font-size: .75rem; background: #263e34; color: #e7f2e1; border-radius: 99px; padding: 10px 20px; }
.map-origin i { height: 26px; border-left: 1px solid #aabdaf; }
.career-branches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; position: relative; }
.career-branches::before { content: ''; position: absolute; height: 1px; top: 0; left: 16.66%; right: 16.66%; background: #aabdaf; }
.career-branch { --branch-color: #2d5d76; --branch-bg: #e3edf2; min-width: 0; position: relative; padding-top: 24px; }
.career-branch::before { content: ''; position: absolute; top: 0; left: 50%; height: 24px; border-left: 1px solid #aabdaf; }
.branch-venture { --branch-color: #53713d; --branch-bg: #e9efdd; }
.branch-niche { --branch-color: #87623d; --branch-bg: #f1e8db; }
.career-branch > header { padding: 20px; background: var(--branch-bg); border-top: 3px solid var(--branch-color); border-radius: 8px 8px 0 0; }
.career-branch > header > span { color: var(--branch-color); font: italic .8rem Georgia,serif; }
.career-branch h3 { font-size: 1.15rem; margin: 8px 0; }
.career-branch > header p { font-size: .72rem; color: var(--branch-color); margin: 0; }
.branch-nodes { display: grid; gap: 10px; padding: 12px 8px; background: #edf1ec; border-radius: 0 0 12px 12px; }
.career-node { text-align: left; padding: 18px; border: 1px solid #d0dbd3; border-radius: 8px; background: #fff; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; color: var(--ink); width: 100%; min-width: 0; }
.career-node:hover { transform: translateY(-2px); border-color: var(--branch-color); }
.career-node[aria-pressed="true"] { background: var(--branch-bg); border-color: var(--branch-color); box-shadow: inset 3px 0 var(--branch-color); }
.career-node:focus-visible, .answer-option:focus-within, .catalog-note summary:focus-visible { outline: 3px solid #5b91bd; outline-offset: 4px; }
.node-meta { font-size: .64rem; color: #617267; display: block; }
.career-node strong { display: block; font-size: 1rem; line-height: 1.6; margin: 7px 0 16px; overflow-wrap: anywhere; }
.node-foot { display: flex; justify-content: space-between; font-size: .66rem; color: var(--branch-color); gap: 8px; }
.node-foot b { font-size: 1rem; line-height: 1; }
.direction-detail { margin-top: 24px; background: white; border: 1px solid #b8cabe; border-radius: 14px; padding: clamp(20px,3vw,32px); scroll-margin-top: 130px; }
.direction-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.direction-detail-head h3 { font: 1.6rem/1.5 var(--serif); margin: 9px 0 0; }
.detail-symbol { font-size: 2rem; color: #688676; }
.direction-why { max-width: 800px; color: #425c4f; font-size: .91rem; line-height: 1.9; }
.direction-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; margin: 20px 0; }
.direction-facts article { border-top: 1px solid #dce4dc; padding-top: 16px; }
.direction-facts h4 { font-size: .75rem; color: #668071; margin: 0; font-weight: 500; }
.direction-facts p { font-size: .84rem; line-height: 1.9; margin: 8px 0 14px; }
.atlas-next { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; margin-top: 30px; }
.atlas-next article { padding: 26px; border-radius: 12px; border: 1px solid #d4ddd4; }
.atlas-next h3 { font-size: 1.15rem; margin: 10px 0 16px; }
.atlas-next ul { margin: 0; padding-left: 1.1em; }
.atlas-next p, .atlas-next li { font-size: .82rem; color: #4a6253; line-height: 1.9; }
.atlas-next li + li { margin-top: 9px; }
.atlas-next .atlas-action { background: #e7efd8; border-color: #bccbab; }
.continue-rule { border-top: 1px solid #c3d0b4; padding-top: 14px; }
.catalog-note { margin-top: 25px; color: #63766a; font-size: .72rem; line-height: 1.9; }
.catalog-note summary { cursor: pointer; padding: 10px 0; }
.catalog-note a { color: #3f6855; display: inline-block; margin: 0 18px 6px 0; text-underline-offset: 3px; }
.method-micro { padding-top: 22px; padding-bottom: 38px; border-top: 1px solid var(--line); }
.method-micro p { font-size: .7rem; line-height: 1.9; color: #64717f; margin: 6px 0; }
@media (max-width: 760px) {
  .dimensions { grid-template-columns: 1fr; margin: 25px 0; }
  .atlas-tension, .environment-strip, .calibration-grid, .atlas-next { grid-template-columns: 1fr; gap: 20px; }
  .atlas-tension { padding: 24px; }
  .environment-strip { gap: 8px; }
  .analysis-wait { grid-template-columns: 1fr; gap: 12px; padding: 26px 22px; }
  .orbit-drawing { width: 160px; height: 160px; margin: auto; }
  .wait-copy .atlas-eyebrow { font-size: .57rem; }
  .career-atlas { padding: 26px 16px; margin-top: 28px; border-radius: 20px; }
  .career-atlas .atlas-intro h2 { font-size: 2rem; }
  .calibration-grid { margin-bottom: 32px; gap: 24px; }
  .map-heading { display: block; }
  .map-origin { align-items: start; padding-left: 14px; }
  .map-origin i { margin-left: 14px; }
  .career-branches { grid-template-columns: 1fr; gap: 22px; padding-left: 28px; }
  .career-branches::before { left: 28px; width: 1px; height: auto; top: -1px; bottom: 0; right: auto; }
  .career-branch { padding-top: 0; }
  .career-branch::before { width: 22px; height: 1px; left: -1px; top: 36px; border: 0; background: #aabdaf; }
  .career-branch > header { margin-left: 16px; padding: 16px; }
  .branch-nodes { margin-left: 16px; }
  .career-node { padding: 16px; }
  .career-node strong { margin: 5px 0 10px; }
  .direction-facts { grid-template-columns: 1fr; gap: 0; }
  .direction-detail-head h3 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-drawing ellipse, .orbit-drawing circle, .wait-line i, .loading-dots { animation: none; }
  .career-node { transition: none; }
}
.map-method, .catalog-library { border-top: 1px solid #ccd9cf; margin-top: 26px; color: #4a6253; font-size: .8rem; line-height: 1.85; }
.map-method summary, .catalog-library summary { padding: 16px 0; cursor: pointer; font-weight: 600; color: #314d3e; min-height: 48px; }
.map-method summary:focus-visible, .catalog-library summary:focus-visible { outline: 3px solid #5b91bd; outline-offset: 2px; }
.map-method ol { padding-left: 22px; margin: 0 0 22px; }
.map-method li { padding: 6px 0; }
.map-method li b { display: block; color: #2d4a39; }
.catalog-controls { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin: 20px 0 12px; }
.catalog-controls label { display: grid; gap: 6px; color: #526d5b; font-size: .72rem; }
.catalog-controls input, .catalog-controls select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #b7cabc; border-radius: 8px; background: white; color: #263d30; font: inherit; font-size: 16px; }
.catalog-controls input:focus-visible, .catalog-controls select:focus-visible { outline: 3px solid #5b91bd; outline-offset: 2px; }
.catalog-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.catalog-item { border: 1px solid #d6e0d5; border-radius: 9px; padding: 17px; background: white; }
.catalog-item span { font-size: .65rem; color: #637e6c; }
.catalog-item h4 { font-size: .91rem; margin: 9px 0; color: #2d4536; }
.catalog-item p { font-size: .75rem; margin: 0; line-height: 1.85; }
.catalog-empty { grid-column: 1 / -1; padding: 20px; }
#catalogCount { font-size: .7rem; color: #63806c; }
@media (max-width:760px) {
  .catalog-controls, .catalog-items { grid-template-columns: 1fr; }
  .catalog-items { max-height: 500px; }
}
:root { --entry-design-version: 2; }

/* Entry experience: ink green, rice paper, cinnabar. Report layout stays unchanged. */
.brand-logo { width: 150px; height: 50px; object-fit: contain; display: block; }
.brand-caption { font-size: 12px; font-weight: 400; letter-spacing: .12em; color: #68736c; padding-left: 14px; border-left: 1px solid #c7c9bf; }
body:has(.input-page) { background: #eeeee6; }
body:has(.input-page) .site-header { background: rgba(246,246,239,.94); border-color: #dbddd1; }
body:has(.input-page) .local-note::before { background: #547b68; }
body:has(.input-page) .stage-dot.active { background: #b54b38; }
.input-page { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); --blue: #386955; --blue-soft: #e6ede6; --orange: #b54b38; --line-dark: #aab7ac; border-color: #d5dbd0; }
.input-intro { min-height: 750px; padding: 58px 48px 30px; background: #213b34; color: #f1eedf; border-color: #324d42; justify-content: flex-start; isolation: isolate; }
.input-intro::after { content: ''; inset: 14px; font-size: 0; border: 1px solid #ffffff0d; pointer-events: none; }
.intro-copy { position: relative; z-index: 2; }
.intro-eyebrow { display: flex; align-items: center; gap: 15px; font-size: 11px; letter-spacing: .24em; color: #c3cebc; }
.intro-seal { display: grid; place-items: center; width: 29px; height: 34px; border: 1px solid #c87559; color: #e0a286; font-family: var(--serif); font-size: 11px; letter-spacing: 1px; writing-mode: vertical-rl; border-radius: 2px; }
.input-intro h1 { font-size: clamp(36px, 3.8vw, 49px); font-weight: 500; letter-spacing: .09em; line-height: 1.5; margin: 30px 0 16px; max-width: none; }
.input-intro .lead { font-size: 14px; color: #c1cbbf; line-height: 1.9; letter-spacing: .06em; margin: 0; }
.intro-path { display: flex; align-items: center; gap: 10px; color: #acbcaa; font-size: 11px; letter-spacing: .12em; margin-top: 23px; }
.intro-path i { width: 18px; height: 1px; background: #768e78; }
.landscape { position: relative; width: calc(100% + 96px); margin: 4px -48px -5px; flex: 1; min-height: 280px; display: flex; align-items: center; overflow: hidden; }
.landscape svg { width: 100%; height: auto; display: block; overflow: visible; }
.landscape-caption { position: absolute; right: 42px; top: 30%; writing-mode: vertical-rl; color: #b4c4af; opacity: .65; font-family: var(--serif); letter-spacing: .45em; font-size: 11px; }
.moon { animation: moon-breathe 8s ease-in-out infinite; transform-origin: 264px 132px; }
.moon-halo { stroke-dasharray: 1 9; animation: orbit-turn 100s linear infinite; transform-origin: 264px 132px; }
.orbit-spark { animation: orbit-turn 100s linear infinite; transform-origin: 264px 132px; }
.mountain-lines { stroke-dasharray: 1100; animation: mountain-reveal 2.4s ease-out both; }
.water-ripples { animation: water-breathe 6s ease-in-out infinite; transform-origin: 264px 321px; }
.intro-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid #f1eedf22; padding-top: 21px; z-index: 2; font-size: 11px; letter-spacing: .04em; color: #b7c4b5; }
.chart-conventions { max-width: 100%; }
.chart-conventions summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: center; min-height: 30px; }
.chart-conventions summary::-webkit-details-marker { display: none; }
.chart-conventions summary span { font-size: 16px; color: #dcc4a1; }
.chart-conventions[open] summary span { transform: rotate(45deg); }
.chart-conventions p { font-size: 11px; line-height: 1.9; margin: 8px 0 0; color: #c8d2c5; }
.chart-conventions summary:focus-visible { outline: 2px solid #dcc4a1; outline-offset: 5px; }
.input-page .birth-panel { padding: 49px 42px 42px; background: #f9f9f3; }
.input-page .form-head { margin-bottom: 29px; }
.input-page .form-head h2 { font-weight: 500; font-size: 32px; letter-spacing: .08em; }
.input-page .form-head .kicker { font-size: 11px; font-weight: 500; }
.input-page .step-number { font-size: 14px; color: #a35c46; }
.input-page .field-label small { color: #778579; }
.input-page .calendar-toggle { background: #e8ece3; }
.input-page .calendar-toggle input:checked + label { background: #2c483c; }
.input-page select { background-color: #fbfbf6; border-color: #b7c3b5; }
.input-page select:disabled { opacity: .55; cursor: not-allowed; }
.input-page .primary-button { background: #a94834; box-shadow: 0 9px 24px #a9483418; }
.input-page .primary-button:hover { background: #923d2c; }
.location-hint { display: block; margin-top: 9px; color: #748072; font-size: 11px; line-height: 1.6; }
@keyframes moon-breathe { 50% { opacity: .82; transform: scale(.96); } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes mountain-reveal { from { stroke-dashoffset: 1100; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes water-breathe { 50% { opacity: .4; transform: scaleX(.85); } }
@media (max-width: 920px) {
 .input-page { grid-template-columns: 1fr; }
 .input-intro { min-height: 340px; padding: 34px 34px 24px; border-right: 0; }
 .input-intro h1 { font-size: 38px; margin-top: 20px; line-height: 1.4; }
 .input-intro .lead { font-size: 13px; }
 .landscape { position: absolute; width: 48%; min-height: 0; right: 10px; bottom: 65px; margin: 0; opacity: .8; z-index: -1; }
 .landscape-caption { display: none; }
 .intro-bottom { margin-top: 22px; }
 .input-page .birth-panel { padding: 36px 34px; }
}
@media (max-width: 620px) {
 .brand-logo { width: 123px; height: 41px; }
 .brand-caption { display: none; }
 .input-intro { min-height: 292px; padding: 27px 24px 16px; }
 .intro-eyebrow { font-size: 10px; gap: 10px; }
 .intro-seal { width: 22px; height: 27px; font-size: 9px; }
 .input-intro h1 { font-size: 32px; line-height: 1.4; margin: 17px 0 10px; letter-spacing: .07em; }
 .input-intro .lead { font-size: 12px; }
 .intro-path { margin-top: 14px; font-size: 10px; }
 .landscape { width: 56%; right: -11px; bottom: 53px; opacity: .65; }
 .intro-bottom { margin-top: 18px; padding-top: 10px; font-size: 10px; }
 .input-page .birth-panel { padding: 28px 20px 36px; }
 .input-page .form-head h2 { font-size: 27px; }
 .input-page .field-label small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .moon, .moon-halo, .orbit-spark, .mountain-lines, .water-ripples { animation: none; }
}

/* Compact editorial hierarchy: one heading per section, analysis takes the space. */
.conventions-micro { margin: 0; font-size: 10px; line-height: 1.9; color: #b7c4b5; letter-spacing: .02em; }
.intro-bottom { align-items: center; }
.chart-page { --blue: #386955; --orange: #a94834; --blue-soft: #e6ede6; --acid: #cdd8bd; --night: #213b34; --white: #f9f9f3; --line: #ccd4ca; }
body:has(.chart-page) { background: #f0f2eb; }
body:has(.access-page),body:has(.member-page),body:has(#adminApp) { --paper:#f0f2eb; --paper-2:#e8ece3; --blue:#386955; --orange:#a94834; --blue-soft:#e6ede6; --acid:#cdd8bd; --night:#213b34; --white:#f9f9f3; --line:#ccd4ca; --line-dark:#aab7ac; --muted:#68776d; background:var(--paper); }
body:has(.access-page) .site-header,body:has(.member-page) .site-header { background:rgba(246,246,239,.94); border-color:#dbddd1; }
.access-page .primary-button,.member-page .primary-button,#adminApp .primary-button { box-shadow:none; }
body:has(.chart-page) .site-header { background: rgba(246,246,239,.94); border-color: #dbddd1; }
.chart-hero { padding: 42px 0; background: #f7f8f1; }
.chart-hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.chart-title { font-size: clamp(32px, 4vw, 48px); letter-spacing: .07em; font-weight: 500; line-height: 1.3; margin: 0 0 14px; }
.chart-lead { margin: 0; font-size: 14px; }
.hero-actions { margin-top: 24px; }
.birth-ticket { transform: none; border-radius: 4px; box-shadow: none; padding: 24px; }
.birth-ticket strong { font-size: 26px; margin: 16px 0 12px; }
.chart-nav { background: rgba(240,242,235,.95); }
.chart-nav .wrap { justify-content: space-between; }
.chart-nav a { font-size: 13px; }
.chart-section { padding: 54px 0; scroll-margin-top: 122px; }
.section-head { display: block; margin-bottom: 28px; }
.section-title { font-size: clamp(27px, 3vw, 36px); font-weight: 500; letter-spacing: .03em; margin: 0; line-height: 1.3; }
.reality-panel .section-desc { margin-top: 16px; font-size: 14px; }
.chart-readings { margin-top: 34px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 36px; }
.chart-reading { padding: 25px 0 27px; border-top: 1px solid var(--line); min-width: 0; }
.chart-reading h3 { font-family: var(--serif); font-weight: 600; font-size: 23px; margin: 0 0 16px; letter-spacing: .03em; }
.chart-reading p { font-size: 14px; line-height: 1.95; margin: 0; color: #43534a; overflow-wrap: anywhere; }
.reading-work { border-left: 2px solid #b7c7ac; padding-left: 15px; margin: 19px 0; }
.reading-work h4 { font-size: 11px; font-weight: 500; color: #6b796b; letter-spacing: .09em; margin: 0 0 5px; }
.chart-reading .reading-practice { font-size: 13px; }
.reading-practice strong { display: block; color: #9e4d38; font-size: 11px; font-weight: 500; margin-bottom: 4px; }
.chart-reading .atlas-tags { margin-top: 18px; }
.chart-reading-wait { display: flex; align-items: center; gap: 20px; margin-top: 32px; padding: 28px 0; border-top: 1px solid var(--line); font-size: 15px; color: #3a5748; }
.chart-reading-wait small { display: block; font-size: 12px; font-weight: 400; color: #778477; margin-top: 8px; }
.reading-spinner { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #bac8b7; border-top: 2px solid #a94834; border-radius: 50%; animation: reading-spin 1.6s linear infinite; }
@keyframes reading-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
 .chart-hero-grid { grid-template-columns: 1fr; gap: 24px; }
 .chart-hero { padding: 30px 0; }
 .chart-title { font-size: 34px; }
 .chart-section { padding: 38px 0; }
 .chart-readings { grid-template-columns: 1fr; margin-top: 24px; }
 .chart-reading h3 { font-size: 22px; }
 .chart-nav a { font-size: 11px; padding: 15px 5px; }
 .chart-nav .wrap { gap: 5px; }
 .birth-ticket strong { font-size: 23px; }
 .conventions-micro { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .reading-spinner { animation: none; } }

/* A single intake, with quiet paper-like choice cards. */
.reality-entry { grid-column: 1 / -1; padding: 42px 48px; background: #f9f9f3; border-top: 1px solid #d5dbd0; }
.reality-entry > header { display: flex; align-items: baseline; gap: 24px; margin-bottom: 30px; }
.reality-entry h2 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: .06em; }
.reality-entry header p { color: #697a6c; font-size: 13px; margin: 0; }
.entry-questions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 40px; }
.entry-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.entry-question legend { font-size: 15px; line-height: 1.7; font-weight: 600; margin-bottom: 13px; padding: 0; color: #233e33; }
.entry-question legend > span { font-family: var(--serif); color: #a94834; font-size: 17px; margin-right: 12px; }
.entry-options { display: grid; gap: 7px; }
.entry-options label { display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: 44px; border: 1px solid #d8ded3; border-radius: 5px; background: #fcfcf8; cursor: pointer; transition: background .18s, border-color .18s; }
.entry-options input { accent-color: #386955; width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }
.entry-options span { font-size: 13px; line-height: 1.65; color: #526256; }
.entry-options label:hover { border-color: #819784; }
.entry-options label:has(input:checked) { border-color: #386955; background: #e6ede3; box-shadow: inset 3px 0 #386955; }
.entry-options label:has(input:checked) span { color: #244234; }
.entry-options label:focus-within { outline: 2px solid #a94834; outline-offset: 2px; }
.reality-entry .submit-row { border-top: 1px solid #d8ded3; margin-top: 34px; padding-top: 28px; justify-content: space-between; }

/* Prominent, honest stage-based progress. */
.generation-progress { margin: 0 0 32px; padding: 30px 36px; border-radius: 8px; background: #213b34; color: #f5f2e5; box-shadow: 0 10px 30px #24382c14; }
.progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.progress-kicker { font-size: 11px; letter-spacing: .12em; color: #c2ccb7; }
.progress-heading h2 { font: 500 27px/1.5 var(--serif); margin: 9px 0 0; letter-spacing: .03em; }
.progress-heading strong { font-family: var(--serif); font-size: 44px; font-weight: 400; white-space: nowrap; }
.progress-heading strong small { font-family: var(--sans); font-size: 12px; color: #c2ccb7; }
.generation-track { height: 8px; border-radius: 20px; background: #ffffff1a; margin: 25px 0; overflow: hidden; }
.generation-track i { display: block; height: 100%; border-radius: inherit; background: repeating-linear-gradient(110deg,#cfab77 0px,#cfab77 12px,#e7cca0 12px,#e7cca0 24px); background-size: 52px 100%; animation: progress-flow 2s linear infinite; transition: width .7s ease; }
.generation-steps { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: 0; margin: 0; }
.generation-steps li { display: flex; align-items: center; gap: 11px; font-size: 13px; line-height: 1.6; }
.generation-steps li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #9aaf9b; border-radius: 50%; flex-shrink: 0; font-size: 19px; }
.generation-steps small { display: block; font-size: 11px; color: #b8c5b3; margin-top: 3px; }
.generation-steps .is-ai > span { background: #bdd0ac; color: #213b34; border-color: #bdd0ac; }
.generation-steps .is-loading > span { animation: reading-spin 2s linear infinite; border-color: #d9b684; color: #d9b684; }
.generation-steps .is-error > span { border-color: #eda993; color: #eda993; }
.generation-progress > p { margin: 22px 0 0; font-size: 12px; color: #c2ccb7; line-height: 1.7; }
.generation-progress.is-complete { background: #e5ece1; color: #213b34; box-shadow: none; }
.is-complete .progress-kicker,.is-complete .progress-heading small,.is-complete .generation-steps small,.generation-progress.is-complete > p { color: #526b56; }
.is-complete .generation-track i { animation: none; background: #638565; }
@keyframes progress-flow { to { background-position: 52px 0; } }
.synthesis-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin: 30px 0 44px; }
.synthesis-grid article { border-top: 2px solid #8ca28d; padding-top: 20px; }
.synthesis-grid h3 { font: 500 23px/1.5 var(--serif); margin: 0 0 15px; }
.synthesis-grid p { color: #4a5d50; font-size: 14px; line-height: 2; margin: 0; }
.direction-basis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; padding: 24px; margin: 22px 0; background: #edf1e9; border-radius: 6px; }
.direction-basis h4 { color: #47654d; font-size: 12px; font-weight: 600; margin: 0 0 9px; }
.direction-basis p { color: #3d5145; font-size: 13px; line-height: 1.9; margin: 0; }
.branch-empty { margin: 10px; padding: 22px 10px; color: #64786a; font-size: 13px; line-height: 1.9; }
.distance-legend { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 18px 0 8px; }
.distance-legend > span { display: flex; align-items: center; gap: 8px; }
.distance-legend small { font-size: 11px; color: #627266; }
.distance-badge { display: inline-block; padding: 4px 8px; font-size: 11px; line-height: 1.4; border-radius: 3px; color: #355d4a; background: #e7eee3; }
.distance-adjacent { background: #e4ecf1; color: #416278; }
.distance-unexpected { background: #f1e6db; color: #8b5338; }
.career-node strong { margin-bottom: 10px; }
.career-node .distance-badge { margin-bottom: 16px; }
.direction-detail > .distance-badge { margin-top: 12px; }
@media (max-width: 760px) {
 .reality-entry { padding: 28px 20px; }
 .reality-entry > header { display: block; }
 .reality-entry h2 { font-size: 27px; }
 .reality-entry header p { margin-top: 10px; }
 .entry-questions { grid-template-columns: 1fr; gap: 28px; }
 .generation-progress { padding: 23px 20px; margin-bottom: 22px; }
 .progress-heading { align-items: flex-start; gap: 12px; }
 .progress-heading h2 { font-size: 22px; max-width: 10em; }
 .progress-heading strong { font-size: 32px; }
 .progress-heading strong small { display: block; font-size: 10px; }
 .generation-steps { gap: 12px; }
 .generation-steps li { display: block; font-size: 11px; }
 .generation-steps li > span { margin-bottom: 9px; }
 .generation-steps small { font-size: 10px; }
 .synthesis-grid,.direction-basis { grid-template-columns: 1fr; gap: 23px; }
 .synthesis-grid { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
 .generation-track i,.generation-steps .is-loading > span { animation: none; transition: none; }
}