button:disabled{opacity:.5;cursor:wait}.error{color:#8f2f2f;font-weight:700;line-height:1.7}.settings{margin-top:22px;border-top:1px solid #e4d1b6;padding-top:16px}.settings summary,details summary{cursor:pointer;color:var(--deepred);font-weight:700}.settings .grid2{margin-top:18px}.hint,.pro-note{line-height:1.8}.birth-line{line-height:1.8;font-size:14px;color:var(--muted)}.table-wrap{overflow:auto}.pro table{min-width:450px}.pro details{margin-top:18px}.pro details p{line-height:1.9;font-size:13px}.five-row{grid-template-columns:44px 1fr 44px}.result-card canvas{display:block;width:100%;height:auto;border-radius:15px;background:#fffaf0}.swatch-label{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.swatch-label small{font-size:10px}.swatches{gap:18px}.result-side h2{font-size:clamp(32px,5vw,46px)}.result-side details{margin-top:20px}.beast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.beast-tile{padding:10px 8px;background:#f6ecd9;border:1px solid #e4d1b6;border-radius:10px;font-size:12px}.beast-tile b{display:block;color:var(--deepred);font-family:serif;font-size:18px;margin-bottom:3px}.screen h2:focus{outline:none}#cardNote{min-height:1.5em}.pillar .unknown{font-size:20px}.swatch[data-color="red"]{--gem-light:#ffdce0;--gem-mid:#eb777a;--gem-dark:#b84050;--gem-glow:#fff2ed}.swatch[data-color="orange"]{--gem-light:#ffe9cb;--gem-mid:#f3ab66;--gem-dark:#ce7e37;--gem-glow:#fff3ce}.swatch[data-color="yellow"]{--gem-light:#fffae0;--gem-mid:#ebd580;--gem-dark:#b69b43;--gem-glow:#fff9d6}.swatch[data-color="white"]{--gem-light:#ffffff;--gem-mid:#e9edf1;--gem-dark:#9eb4c4;--gem-glow:#ffffff}.swatch[data-color="pink"]{--gem-light:#fff0fa;--gem-mid:#f2bad2;--gem-dark:#ca749d;--gem-glow:#fff1fc}.swatch[data-color="gray"]{--gem-light:#edf7ff;--gem-mid:#a6b2c5;--gem-dark:#687b95;--gem-glow:#ebf9ff}@media(max-width:480px){.form-card,.summary,.result-side{padding:25px 20px}.shell{padding:0 16px}.beast-grid{grid-template-columns:repeat(2,1fr)}.swatches{gap:14px}.swatch-label{font-size:11px}}
@font-face{font-family:"Clearsky Card Serif";src:url("fonts/clearsky-card-serif-v4.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
.result-layout{grid-template-columns:1.03fr 1fr;gap:42px;max-width:1100px;margin:auto}.result-card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:0 32px 70px rgba(103,75,40,.21)}.result-card:before{display:none}.result-card canvas{border-radius:3px}.result-side{padding:34px 30px;background:rgba(255,250,240,.76);box-shadow:0 16px 50px rgba(90,53,37,.08)}.result-side h2{font-family:"Clearsky Card Serif",serif;font-weight:400;letter-spacing:.05em;margin:12px 0}.result-side .sub{font-size:14px}.result-side .logic-row{font-size:14px}.result-side .swatches{gap:19px}.preview-card{padding:0;border-radius:2px;background:#fff7e9}.preview-card img{border-radius:2px}.preview-card:before{font-size:9px;letter-spacing:.18em}.hero-card-wrap{min-height:700px}.result-layout .actions .btn{font-size:13px;padding:13px 19px}@media(max-width:900px){.result-layout{grid-template-columns:1fr;gap:26px;max-width:580px}.hero-card-wrap{min-height:590px}.result-card{width:min(100%,500px);margin:auto}}@media(max-width:480px){.result-side{padding:26px 20px}.result-side .swatches{gap:14px}}

.swatch[data-color="lightgreen"]{--gem-light:#f0fff4;--gem-mid:#a0ddbb;--gem-dark:#4ba77e;--gem-glow:#f3fff8}.swatch[data-color="gold"]{--gem-light:#fff6d8;--gem-mid:#dfbd73;--gem-dark:#987238;--gem-glow:#fff6c7}.swatch[data-color="silver"]{--gem-light:#ffffff;--gem-mid:#c9d9e7;--gem-dark:#6e879f;--gem-glow:#f5fbff;border-color:#eff7ff;box-shadow:0 0 0 1px #8ca7bf,inset 0 0 0 1px #fff}.result-side .swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.swatch-label{font-size:14px}.swatch-label small{font-size:12px;text-align:center;line-height:1.5}

.scene-placement{font-size:12px;color:#75685c;line-height:1.6}.swatch-label{gap:8px}.swatch-label .scene-placement{max-width:110px}

/* Keep native date/time controls and expanded tables within their panels. */
.grid2,.analysis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.analysis-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.grid2>*,.analysis-grid>*,.field,.summary,.pro,.table-wrap{min-width:0;max-width:100%}
.field input,.field select{display:block;min-width:0;max-width:100%;box-sizing:border-box}
.field input[type="date"],.field input[type="time"]{appearance:none;-webkit-appearance:none;min-inline-size:0;inline-size:100%;max-inline-size:100%;min-height:52px}
.field input::-webkit-date-and-time-value{min-width:0;text-align:left}
.field input::-webkit-datetime-edit{min-width:0;padding:0}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pro{overflow-wrap:anywhere}.pro table{min-width:450px}.pro th,.pro td{white-space:nowrap}
@media(max-width:900px){.grid2,.analysis-grid{grid-template-columns:minmax(0,1fr)}}

.consultation-action{margin-top:24px;padding-top:22px;border-top:1px solid #eadcc8}.consultation-action .btn{display:flex;justify-content:center;align-items:center;width:100%;min-height:48px;padding:14px 12px;text-align:center;text-decoration:none;font-size:16px;line-height:1.6}.consultation-action .btn:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

.professional-reading{margin-top:22px;padding:18px;border-left:3px solid var(--gold);border-radius:12px;background:#f8edda}.professional-reading h3{margin:0 0 10px;font-size:16px;color:var(--deepred)}.professional-reading p{margin:0;line-height:1.95;font-size:16px;color:var(--ink)}

.hero-card-wrap{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:20px 0;min-width:0}
.preview-card .hero-stamp{position:absolute;z-index:4;top:32px;left:-14px;width:90px;height:90px;object-fit:contain;border-radius:0;transform:rotate(-5deg);opacity:.88}
.collection-cta{position:relative;z-index:4;min-height:48px;font-size:16px;max-width:100%;background:var(--paper)!important}
.collection-cta:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
@media(max-width:480px){.preview-card .hero-stamp{width:78px;height:78px;left:-12px;top:26px}.hero-card-wrap{gap:28px}}

.swatch.scene-gem{object-fit:contain;border:0;background:transparent;box-shadow:none;overflow:visible;width:76px;height:76px;flex:0 0 76px}
@media(max-width:480px){.swatch.scene-gem{width:60px;height:60px;flex-basis:60px}.result-side .swatches{gap:12px}}

/* Readable five-element colours for the actual stems and branches. */
[data-element="木"]{--element-ink:#347344}
[data-element="土"]{--element-ink:#51321f}
[data-element="火"]{--element-ink:#ab3535}
[data-element="水"]{--element-ink:#326d99}
[data-element="金"]{--element-ink:#8d6a00}
.pillar b[data-element],.pillar span[data-element],.element-glyph{color:var(--element-ink)}