/* 模块 04 · 模型选择：星体与刻度 */

/* opener: two dials */
.opm { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opm-dial { display: grid; justify-items: center; gap: 6px; }
.opm-dial svg { width: 100%; max-width: 280px; overflow: visible; }
.opm-dial > span { font-size: .86rem; color: var(--on-ink-muted); }
.opm-arc { fill: none; stroke: rgba(241, 239, 233, .25); stroke-width: 1.5; stroke-dasharray: 2 5; }
.opm text { fill: var(--on-ink-2); font-size: 12px; font-family: var(--sans); }
.opm .opm-small { font-size: 8.5px; fill: var(--on-ink-muted); }
.opm-tick { fill: var(--on-ink-muted); }
.opm circle:not(.opm-tick) { fill: var(--mark); }
.opm-needle { stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round; transform-origin: 100px 110px; }
.page.in .opm-needle.n1 { animation: needle1 6s var(--ease) infinite; }
.page.in .opm-needle.n2 { animation: needle2 6s var(--ease) infinite; }
@keyframes needle1 { 0%, 100% { transform: rotate(-55deg); } 33% { transform: rotate(0deg); } 66% { transform: rotate(55deg); } }
@keyframes needle2 { 0%, 100% { transform: rotate(-45deg); } 50% { transform: rotate(60deg); } }

/* ===== models: three bodies in the sky ===== */
.md { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); grid-template-areas: "top exp" "sky exp" "info exp" "info bal" "info src"; column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.md-top { grid-area: top; }
.md-sky { grid-area: sky; display: grid; grid-template-columns: 1.2fr 1.05fr .8fr; align-items: end; gap: 10px; margin-top: 20px; }
.md-body { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 10px; border-radius: 22px; transition: background-color .3s; }
.md-body:hover { background: rgba(241, 239, 233, .04); }
.md-body[aria-pressed="true"] { background: rgba(241, 239, 233, .07); }
.md-orb { display: block; border-radius: 50%; transition: transform .6s var(--spring), box-shadow .6s; }
.md-astra .md-orb { width: clamp(96px, 10vw, 150px); aspect-ratio: 1; background: radial-gradient(circle at 36% 32%, #fff 0%, #fff4c9 18%, #ffd36a 42%, #e08a14 72%, #5a2b00 100%); box-shadow: 0 0 60px 10px rgba(255, 200, 80, .35), 0 0 140px 30px rgba(255, 180, 60, .12); }
.md-sol .md-orb { width: clamp(84px, 8.6vw, 128px); aspect-ratio: 1; background: radial-gradient(circle at 36% 32%, #fff3d6 0%, #ffb35c 30%, #f06a1f 62%, #8f2a05 100%); box-shadow: 0 0 50px 6px rgba(255, 120, 40, .32); }
.md-luna .md-orb { width: clamp(58px, 6vw, 88px); aspect-ratio: 1; background: radial-gradient(circle at 62% 64%, rgba(0, 0, 0, .18) 0 8%, transparent 9%), radial-gradient(circle at 30% 42%, rgba(0, 0, 0, .14) 0 6%, transparent 7%), radial-gradient(circle at 36% 30%, #ffffff 0%, #d9dbe3 40%, #9aa0b2 76%, #4d5262 100%); box-shadow: 0 0 40px 2px rgba(190, 200, 230, .2); }
.md-body[aria-pressed="true"] .md-orb { transform: scale(1.08); }
.md-body b { font-family: var(--display); font-size: 1.5rem; letter-spacing: -.02em; }
.md-body small { font: .74rem/1 var(--mono); color: var(--on-ink-muted); }
.md-info { grid-area: info; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.md-full { font: .78rem/1 var(--mono); color: var(--mark); }
.md-detail .sub { margin-top: 8px; }
.md-detail p:last-child { margin-top: 8px; color: var(--on-ink-2); }
.md-detail p span { display: inline-block; font-size: .74rem; color: var(--on-ink-muted); margin-right: 8px; }
.md-h { font-size: .8rem; color: var(--on-ink-muted); margin-bottom: 8px; }
.md-row { display: grid; grid-template-columns: 3.4em 1fr; grid-template-areas: "n bar" "n em"; column-gap: 10px; align-items: center; padding: 6px 0; opacity: .55; transition: opacity .3s; }
.md-row.on { opacity: 1; }
.md-row span { grid-area: n; font-weight: 600; }
.md-bar { grid-area: bar; height: 8px; border-radius: 6px; background: var(--on-ink); width: calc(var(--b) / 5 * 100%); min-width: 0; transition: width .6s var(--ease); }
.md-row[data-cost="luna"] .md-bar { width: 12px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-ink-muted); }
.md-row.on .md-bar { background: var(--mark); }
.md-row em { grid-area: em; font-style: normal; font-size: .78rem; color: var(--on-ink-2); }
.md-cost .note { margin-top: 8px; font-size: .76rem; }
.md-exp { grid-area: exp; align-self: start; margin-top: 28px; padding: 22px; border-radius: 22px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-ink); }
.md-exp-k { font-size: .74rem; letter-spacing: .06em; color: var(--mark); }
.md-exp .sub { margin-top: 6px; }
.md-exp p { margin-top: 10px; font-size: .92rem; color: var(--on-ink-2); }
.md-shrink { position: relative; height: 150px; margin-top: 14px; border-radius: 14px; background: rgba(241, 239, 233, .04); overflow: hidden; }
.md-world { position: absolute; inset: 14px; border-radius: 12px; border: 1.5px dashed rgba(255, 216, 77, .7); transition: all 1.2s var(--ease); }
.md-world i { position: absolute; border-radius: 50%; background: rgba(255, 216, 77, .5); transition: all 1.2s var(--ease); }
.md-world i:nth-child(1) { left: 10%; top: 20%; width: 26px; height: 26px; } .md-world i:nth-child(2) { left: 40%; top: 50%; width: 40px; height: 40px; background: rgba(120, 200, 255, .5); } .md-world i:nth-child(3) { left: 70%; top: 18%; width: 18px; height: 18px; } .md-world i:nth-child(4) { left: 78%; top: 62%; width: 30px; height: 30px; background: rgba(255, 140, 120, .5); } .md-world i:nth-child(5) { left: 22%; top: 66%; width: 14px; height: 14px; }
.md-world span, .md-cards span { position: absolute; left: 10px; bottom: 6px; font-size: .74rem; color: var(--on-ink-2); transition: opacity .6s; }
.md-cards { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .6s .6s; }
.md-cards i { width: 46px; height: 58px; border-radius: 8px; background: rgba(241, 239, 233, .16); }
.md-cards span { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.md-shrink.go .md-world { inset: 50% 46%; opacity: 0; }
.md-shrink.go .md-world i { transform: scale(0); }
.md-shrink.go .md-cards { opacity: 1; }
.md-ask { display: grid; gap: 4px; }
.md-ask b { font-weight: 600; color: var(--on-ink); padding-left: 14px; position: relative; }
.md-ask b::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--mark); }
.md-bal { grid-area: bal; margin-top: 14px; font-size: .9rem; color: var(--on-ink-2); padding-left: 14px; border-left: 3px solid var(--mark); }
.md .src { grid-area: src; }

/* ===== effort: one dial, a drawing of the thinking ===== */
.ef { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); grid-template-areas: "main side" "src side"; column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.ef-main { grid-area: main; }
.ef-dial { position: relative; margin-top: 26px; padding: 0 8px; }
.ef-range { width: 100%; color: rgba(255, 255, 255, .6); height: 36px; }
.ef-range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, #fff calc(var(--p, .2) * 100%), rgba(255, 255, 255, .3) calc(var(--p, .2) * 100%)); }
.ef-range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -12px; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(0, 0, 0, .3); }
.ef-ticks { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 4px; }
.ef-ticks li { text-align: center; }
.ef-ticks li:first-child { text-align: left; } .ef-ticks li:last-child { text-align: right; }
.ef-ticks button { font-size: .86rem; color: rgba(240, 242, 252, .72); padding: 4px 2px; transition: color .2s; }
.ef-ticks button.on { color: #fff; font-weight: 700; }
.ef-view { margin-top: 18px; display: grid; grid-template-columns: minmax(200px, .62fr) 1fr; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 22px; background: rgba(12, 14, 50, .26); backdrop-filter: blur(6px); }
.ef-name { font-family: var(--display); font-size: 2.2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.05; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ef-start { font: 600 .72rem/1 var(--sans); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px; background: var(--mark); color: var(--ink); }
.ef-use { margin-top: 8px; font-weight: 600; }
.ef-say p:last-child { margin-top: 6px; font-size: .92rem; color: rgba(246, 246, 252, .88); }
.th { width: 100%; height: auto; overflow: visible; }
.th-line { stroke: #fff; stroke-width: 2.2; }
.th-branch { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; stroke-dasharray: 3 4; }
.th-branch.lane { stroke: var(--mark); stroke-dasharray: none; stroke-width: 1.8; }
.th-line.lane { stroke: var(--mark); }
.th-node { fill: #fff; }
.th-node.sub { fill: var(--mark); }
.th-dead { fill: rgba(255, 255, 255, .55); }
.th-end { fill: var(--mark); stroke: #fff; stroke-width: 2; }
.th-label { fill: rgba(255, 255, 255, .85); font-size: 12px; font-family: var(--sans); }
.ef-draw .th-line, .ef-draw .th-branch { animation: th-draw .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes th-draw { from { opacity: 0; } }
.ef-take { margin-top: 16px; font-size: .92rem; color: rgba(246, 246, 252, .9); max-width: 46em; }
.ef-side { grid-area: side; display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .94); color: #111; box-shadow: 0 30px 60px -30px rgba(10, 14, 60, .6); }
.ef-h { font-size: .8rem; color: #6b6b72; }
.ef-ui { position: relative; }
.ef-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: #f1f1f4; font-size: .9rem; box-shadow: 0 0 0 2px var(--mark); }
.ef-chip .ic { width: 12px; height: 12px; }
.ef-pop { margin-top: 8px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 16px 30px -12px rgba(0, 0, 0, .3); display: grid; gap: 10px; }
.ef-power { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: .74rem; color: #6b6b72; }
.ef-power input { color: #4c78f0; }
.ef-adv { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: .86rem; color: #45454b; }
.ef-advbox .cx-menu { box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); min-width: 0; }
.ef-three { display: grid; gap: 10px; }
.ef-three div { display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; font-size: .86rem; line-height: 1.55; }
.ef-three dt { font: 600 .8rem/1.6 var(--mono); }
.ef-three code { background: #f1f1f4; color: #111; }
.ef-power-note { font-size: .84rem; line-height: 1.6; color: #333; }
.ef-trouble { font-size: .84rem; border-radius: 12px; background: #f5f5f7; padding: 10px 12px; }
.ef-trouble summary { cursor: pointer; font-weight: 600; }
.ef-trouble p { margin-top: 6px; line-height: 1.6; color: #333; }
.ef-side .note { color: #6b6b72; font-size: .78rem; }
.ef-side .note code { background: #f1f1f4; color: #111; }
.ef .src { grid-area: src; }

@media (max-width: 1100px) {
  .md, .ef { grid-template-columns: 1fr; grid-template-areas: none; }
  .md > *, .ef > * { grid-area: auto !important; }
  .md-info { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ef-view { grid-template-columns: 1fr; }
  .ef-ticks button { font-size: .68rem; }
  .opm { grid-template-columns: 1fr; }
}