:root{--xm-pageBackground:#ffffff;--xm-background:#f7f8f1;--xm-surface:#e2e8d9;--xm-ink:#314d3d;--xm-nameInk:#203529;--xm-muted:#788273;--xm-secondary:#637360;--xm-line:#b5bfb0;--xm-card:#f2f1e8;--xm-cardLine:#d4d9cb}
/* One fixed botanical identity, built on the frozen Web 1.3.1 interface. */
html,body{min-width:1280px;background:var(--xm-pageBackground)}
.namecard-web{margin:0;height:100dvh;background:var(--xm-pageBackground);box-shadow:none}
.herbarium-leaves{position:absolute;right:22px;bottom:68px;width:260px;height:430px;object-fit:contain;opacity:.72;pointer-events:none;z-index:-1;mix-blend-mode:multiply}
.letter-brand{width:112px;height:30px;flex-basis:112px;justify-self:start;object-position:left center}
.letter-identity .brand-link{display:block;justify-self:start;width:112px;height:30px;line-height:0}
.letter-top :is(button,input,select):is(:hover,:focus-visible):not(:disabled){background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.letter-top input:is(:hover,:focus-visible)::placeholder{color:var(--on-accent);opacity:1}
.letter-top :is(.date-control,.time-control):is(:hover,:focus-within) :is(.date-readable,.time-placeholder){color:var(--on-accent)}
.letter-top .time-control:focus-within input,.letter-top .time-control:focus-within input::-webkit-datetime-edit{background:var(--forest);color:var(--on-accent)}
.letter-top .time-control.is-empty:not(:focus-within) input:is(:hover,:focus-visible),.letter-top .time-control.is-empty:not(:focus-within) input:is(:hover,:focus-visible)::-webkit-datetime-edit{color:transparent}
.letter-top input:is(:hover,:focus-visible)::-webkit-calendar-picker-indicator{filter:invert(1)}
.letter-top .place-control:is(:hover,:focus-within) input{background:var(--forest);color:var(--on-accent);border-color:var(--forest)}
.letter-top .place-control:is(:hover,:focus-within) input::placeholder{color:var(--on-accent);opacity:1}
.letter-top .place-control:is(:hover,:focus-within) .place-clear{color:var(--on-accent)}
.utility-controls button{border-radius:4px}
.brand-version{color:var(--xm-secondary);font-size:12px;letter-spacing:.035em}
.surname-entry{width:480px;height:264px}
.surname-entry .surname-input{color:var(--xm-ink);background:var(--xm-background);border:1px solid var(--xm-line);box-shadow:0 4px 18px #314d3d08;border-radius:4px}
.surname-entry .surname-input:placeholder-shown{font-size:40px;letter-spacing:.04em}
.surname-intro{position:absolute;top:-55px;left:0;width:100%;margin:0;font:17px/1.8 var(--ui-font);letter-spacing:.24em;text-align:center;color:var(--xm-ink);pointer-events:none}
.surname-entry .surname-submit{border-radius:4px;width:38px;height:38px;background:var(--xm-ink);box-shadow:none}
/* Render the expanded card at its real size. Text then uses the same font
   metrics during the shared selection animation and after it settles. */
.name-choice.is-enlarged{--expanded-card-scale:var(--selection-scale,1)}
.name-choice.is-enlarged .namecard{--selection-scale:1;--card-scale:1;position:absolute;left:0;top:50%;width:100%;height:calc(100% * var(--expanded-card-scale));margin:0;transform:translateY(-50%)}
.name-choice.is-enlarged .namecard strong{color:var(--xm-nameInk);font-weight:700}
.namecard .glyph-pinyin{color:var(--card-large-ink)}
html[data-card-scheme='fine'] .namecard{border-color:var(--xm-cardLine);box-shadow:var(--card-shadow)}
html[data-card-scheme='fine'] .namecard.is-selected{border-color:var(--xm-muted)}
html[data-card-scheme='fine'] .namecard::before,html[data-card-scheme='fine'] .namecard::after{display:none}
.namecard-brand{width:calc(70px/var(--selection-scale,1));height:auto}
.namecard-ornament{object-fit:contain;opacity:.8}
.namecard-ornament-top,.namecard-ornament-bottom{width:calc(84px/var(--card-scale));height:calc(78px/var(--card-scale));left:50%}
.namecard-ornament-top{top:calc(38px/var(--card-scale))}
.namecard-ornament-bottom{bottom:calc(38px/var(--card-scale))}
.namecard-copy{color:var(--xm-ink)}
.namecard:focus-visible{outline-offset:3px}
.details-panel{background:var(--xm-background);border-color:var(--xm-line);border-radius:8px}
.details-panel::backdrop{background:#314d3d45;backdrop-filter:blur(3px)}
.panel-heading h2,.bazi-report-grid h3{color:var(--xm-ink)}
@media(min-width:1500px){.herbarium-leaves{right:65px;width:320px;height:480px}}
@media(max-height:740px){.herbarium-leaves{height:370px;width:240px;bottom:64px}.surname-intro{top:-48px}}