:root{--ink:#27343c;--navy:#254b61;--muted:#7b807f;--line:#dddcd5;--paper:#fffdf9;--gold:#a67b3f;--bg:#f4f3ef;--e0:#34834c;--e1:#cb4741;--e2:#b17e24;--e3:#808790;--e4:#296695}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd995d;outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{color:inherit}h1,h2,p{margin:0}.topbar{height:86px;border-bottom:1px solid var(--line);padding:0 42px;display:flex;align-items:center;justify-content:space-between;background:#fffdf9}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:1.5px}.brand small{display:block;font-size:8px;letter-spacing:1.8px;color:var(--muted);margin-top:5px}.seal{font-family:Georgia,serif;color:var(--navy);font-size:42px;line-height:1}.topbar nav{display:flex;gap:30px;font-size:13px;color:#616c72;align-items:center}.topbar nav a{text-decoration:none}.textbtn{background:none;border:0;color:inherit}main{max-width:1570px;margin:auto;padding:0 40px}.intro{padding:31px 0 29px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--gold);font-weight:700}h1{font:37px/1.3 Georgia,'Times New Roman',serif;letter-spacing:-.5px;margin:7px 0 8px}h1 em{color:var(--navy);font-style:normal}.intro p{font-size:13px;color:#757c7b}.intro-stamp{border-left:1px solid #cfc9bd;text-align:center;padding-left:27px;color:#a69a85}.intro-stamp>span{font:35px Georgia,serif;letter-spacing:10px}.intro-stamp small{display:block;font-size:8px;letter-spacing:2px;margin-top:5px}.workspace{display:grid;grid-template-columns:285px minmax(0,1fr);gap:25px;align-items:start}.panel{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:22px}.panel-title{display:flex;align-items:center;gap:10px;margin-bottom:22px}.step{color:var(--gold);font-size:11px;border-bottom:1px solid #bfa578;padding-bottom:2px}h2{font-size:15px;font-weight:600}.panel label{display:block;font-size:12px;font-weight:600;color:#59636a;margin-bottom:15px}input:not([type=checkbox]),select{width:100%;margin-top:7px;height:40px;background:white;border:1px solid #d7dcd9;border-radius:3px;padding:8px 10px;color:#273a44;min-width:0;outline:0}input:focus,select:focus{border-color:#7c9aaa;box-shadow:0 0 0 2px #dfe9ec}.two,.three{display:grid;gap:10px;grid-template-columns:1fr 1fr}.three{grid-template-columns:1fr 1fr 1.3fr}.panel .check{display:flex;align-items:center;gap:7px;font-weight:400}.check input{accent-color:var(--navy)}[hidden]{display:none!important}.settings{border-top:1px solid #e4e2dc;padding-top:13px;margin-top:4px;margin-bottom:19px;font-size:11px;color:#7c827e}.settings summary{cursor:pointer;font-size:12px;color:#69777c;list-style:none;display:flex;justify-content:space-between}.settings label{margin-top:15px}.settings p{margin:9px 0}.primary{background:var(--navy);color:white;width:100%;padding:12px;border:1px solid var(--navy);border-radius:3px;display:flex;justify-content:center;gap:40px;align-items:center;font-size:13px;font-weight:600}.primary:hover{background:#173d52}.privacy{font-size:10px;color:#8b8f8d;text-align:center;margin-top:12px;line-height:1.6}.saved{margin-top:17px;padding:18px 21px}.saved-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.saved-title h2{font-size:12px}.saved-title>span{font-size:10px;background:#eeede7;border-radius:10px;padding:1px 7px}.saved-empty{font-size:11px;color:#92958d;line-height:1.7}.saved-item{display:flex;align-items:center;gap:5px;border-top:1px solid #eee;padding:9px 0}.saved-item button{border:0;background:none;text-align:left;padding:0;color:var(--navy);min-width:0}.saved-item .load{flex:1;overflow-wrap:anywhere}.saved-item small{display:block;font-size:10px;color:#8c918f;margin-top:2px}.saved-item .delete{padding:8px;color:#8a8880}.side-link{display:block;text-align:center;color:#91968e;font-size:11px;margin:16px;text-decoration:none}.result-tools{display:flex;justify-content:space-between;align-items:center;height:44px;margin-bottom:11px;font-size:11px;color:#8a8f8a}.result-tools>div:first-child{display:flex;align-items:center;gap:7px}.live-dot{width:5px;height:5px;background:#a98c56;border-radius:50%}.actions{display:flex;gap:8px}.actions button{border:1px solid #d6d9d4;background:#fffdf9;border-radius:3px;color:#48606c;font-size:12px;padding:8px 13px}.actions button:hover{background:#e9eeec}.chart-scroll{overflow-x:auto;padding-bottom:1px}.chart{background:var(--paper);border:1.5px solid #3f535c;min-width:760px;box-shadow:0 3px 12px #243b4810;position:relative}.chart-head{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;padding:28px 26px;gap:22px;border-bottom:1px solid #6b7b82}.chart-heading{text-align:center}.chart-brand{font-size:10px;color:#8b7758;letter-spacing:2px;margin-bottom:10px}.chart h2{font:700 25px Georgia,'Times New Roman',serif;color:var(--navy)}.chart-heading small{display:block;color:#9b9b91;font-size:9px;letter-spacing:2px;margin-top:7px}.person{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px}.person dt{color:#8b8f87}.person dd{margin:0;color:#394b53;overflow-wrap:anywhere}.person .person-name{font-weight:700;font-size:15px;color:#213e50}.pillars{width:100%;border-collapse:collapse;table-layout:fixed}.pillars th,.pillars td{border:1px solid #c4c8c3;border-top:0;text-align:center;padding:14px 7px;font-weight:400}.pillars tr>*:first-child{border-left:0;width:100px}.pillars tr>*:last-child{border-right:0}.pillars th{color:var(--navy);font-size:11px;font-weight:600;letter-spacing:.4px;background:#f1f3ee}.pillars .colhead td{background:#f0f2ee;color:var(--navy);font-size:11px;letter-spacing:1px;padding:10px}.pillars .godrow td{font-size:13px}.pillars .daycol{background:#f8f4e9}.pillars .pillarcell{padding:18px 5px 16px;background-image:linear-gradient(135deg,#ffffff00,#efe9de30)}.hanzi{font:16px Georgia,serif;opacity:.45;display:block;margin-top:5px}.big-gan,.big-zhi{font-size:28px;font-weight:700;line-height:1.4;text-transform:uppercase}.big-zhi{margin-top:3px}.hidden-wrap{display:flex;justify-content:center;gap:11px;align-items:start}.hidden-wrap span{font-size:13px}.hidden-wrap small{display:block;color:#6b7478;font-size:10px;margin-top:7px}.e0{color:var(--e0)}.e1{color:var(--e1)}.e2{color:var(--e2)}.e3{color:var(--e3)}.e4{color:var(--e4)}.pillars .smallrow td{font-size:12px;padding:12px 6px}.section-bar{display:flex;align-items:center;justify-content:space-between;background:#eff2ee;border-top:1px solid #8f9b9b;border-bottom:1px solid #a6b1ad;padding:9px 15px;gap:12px}.section-bar h3{font-size:11px;color:var(--navy);letter-spacing:1px;margin:0}.section-bar small{font-size:10px;color:#7a827c}.cycle-grid{display:grid;grid-template-columns:repeat(10,1fr)}.cycle-btn{border:0;border-right:1px solid #ced0c7;background:transparent;min-width:0;padding:16px 2px 12px;text-align:center;color:var(--ink);font-size:13px;position:relative}.cycle-btn:last-child{border-right:0}.cycle-btn b{display:block;font-weight:600;font-size:16px;line-height:1.6}.cycle-btn .age{display:block;font-size:10px;margin-top:9px;color:#92958c}.cycle-btn .years{font-size:10px;margin-top:5px;display:block;color:#677278}.cycle-btn.selected{background:#f6e7c6;box-shadow:inset 0 3px #b9934d}.cycle-btn:hover{background:#f1ebdc}.annual td{width:10%;text-align:center;border-right:1px solid #d2d2c8;padding:11px 3px;vertical-align:top;font-size:12px}.annual td:last-child{border-right:0}.annual b{font-weight:500;display:block;font-size:15px;line-height:1.6}.annual small{display:block;color:#9a9c94;font-size:10px;margin-top:5px}.annual button{border:0;background:none;color:inherit;padding:3px 0;width:100%}.annual .picked{background:#f6e7c6}.annual .annual-year{border-top:1px solid #e1dfd7;margin-top:8px;padding-top:8px;font-size:12px}.annual table{width:100%;border-collapse:collapse;table-layout:fixed}.under-grid{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid #8f9b9b}.extras{display:grid;grid-template-columns:95px 1fr;font-size:11px}.extras dt,.extras dd{margin:0;border-right:1px solid #c4c8c3;border-bottom:1px solid #c4c8c3;padding:10px 7px}.extras dt{color:var(--navy);font-size:10px;font-weight:600;background:#f1f3ee}.extras dd{text-align:center}.extras small{display:block;color:#969b91;margin-top:2px}.shensha-title{font-size:11px;text-align:center;color:var(--navy);background:#f1f3ee;padding:8px;border-bottom:1px solid #c4c8c3;letter-spacing:.8px}.shensha-grid{display:grid;grid-template-columns:repeat(4,1fr);height:calc(100% - 34px)}.shensha-cell{text-align:center;font-size:11px;padding:8px 5px;border-right:1px solid #c4c8c3}.shensha-cell:last-child{border:0}.shensha-cell strong{display:block;font-size:10px;color:#808d8c;margin-bottom:9px;font-weight:500}.shensha-cell span{display:block;margin-top:4px}.chart-bottom{padding:9px 15px;display:flex;justify-content:space-between;color:#9a9c90;font-size:9px;border-top:1px solid #8f9b9b}.chart-help{display:flex;justify-content:space-between;font-size:10px;color:#8b918b;padding:13px 0;gap:10px;flex-wrap:wrap}.legend{display:flex;gap:12px}.legend i{font-style:normal;font-size:10px}.notes{font-size:12px;border-top:1px solid var(--line);padding-top:14px;margin:7px 0 20px;color:#7a837f;line-height:1.8}.notes summary{cursor:pointer;color:#66747a}.notes p{margin-top:10px}.dirty{background:#fff0cb;padding:10px;font-size:11px;color:#8e6d35;margin:0 0 10px}.error{font-size:12px;background:#fff0eb;color:#b04938;padding:9px;margin:8px 0}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#23485b;color:white;border-radius:4px;padding:12px 25px;font-size:13px;box-shadow:0 5px 22px #0002;z-index:10}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:30px;padding:22px 0;color:#8f948b;font-size:9px;letter-spacing:1px}footer span{letter-spacing:0}dialog{max-width:470px;padding:35px;border:1px solid #c5cbc2;border-radius:7px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#1b344b66}dialog h2{font:25px Georgia,serif;margin:10px 0 20px}dialog li{margin:15px 0;font-size:13px}dialog ol{padding-left:18px}dialog p{font-size:12px;color:#7b827a;margin:17px 0}.close{position:absolute;right:12px;top:9px;background:none;border:0;font-size:24px;color:#777}@media(min-width:1550px){main{padding:0 55px}.workspace{grid-template-columns:300px minmax(0,1fr);gap:30px}.big-gan,.big-zhi{font-size:33px}.pillars th,.pillars td{padding:16px 8px}}@media(max-width:1150px){main{padding:0 22px}.workspace{grid-template-columns:250px minmax(0,1fr);gap:18px}.panel{padding:17px}.topbar{padding:0 24px}.chart{min-width:760px}.intro{padding:25px 0}.intro h1{font-size:33px}}@media(max-width:820px){.workspace{grid-template-columns:1fr}.topbar{height:72px;padding:0 18px}.topbar nav{gap:9px;font-size:11px}.brand{font-size:11px;letter-spacing:1px;gap:8px}.brand small{font-size:6px;letter-spacing:1px}.seal{font-size:35px}main{padding:0 16px}.intro-stamp{display:none}.intro h1{font-size:32px}.intro p{font-size:12px}.panel-title{margin-bottom:15px}#birthForm{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.panel-title,.three,.settings,.primary,.privacy,#error{grid-column:1/-1}.panel>label{min-width:0}.panel .two{display:contents}.panel .three{grid-template-columns:1fr 1fr 1fr}#birthForm .three label{margin-bottom:15px}.saved{margin-top:12px}.saved-title{margin-bottom:7px}.saved-empty{font-size:11px}.side-link{display:none}.results{min-width:0}.result-tools{margin:0 0 9px}.result-tools>div:first-child{font-size:10px}.actions button{padding:7px 9px;font-size:11px}.chart-help{font-size:10px}.chart{min-width:760px}.notes{margin-top:10px}footer{font-size:8px;gap:10px}footer span{max-width:170px;text-align:right}}@media print{@page{size:A4 portrait;margin:8mm}body{background:white;-webkit-print-color-adjust:exact;print-color-adjust:exact}.topbar,.intro,aside,.result-tools,.chart-help,.notes,footer,.dirty,dialog,.toast{display:none!important}main{padding:0;max-width:none}.workspace{display:block}.chart-scroll{overflow:visible}.chart{min-width:0;width:100%;border:1px solid #3f535c;box-shadow:none}.chart-head{padding:18px;gap:15px}.chart h2{font-size:24px}.person{font-size:11px}.pillars th,.pillars td{padding:11px 5px}.pillars .pillarcell{padding:13px 4px}.big-gan,.big-zhi{font-size:28px}.cycle-btn{padding:10px 1px}.cycle-btn b{font-size:14px}.cycle-btn .age,.cycle-btn .years{font-size:9px}.section-bar{padding:7px 10px}.annual td{padding:7px 2px}.shensha-cell{font-size:10px}.chart-bottom{font-size:8px}.under-grid,.cycle-grid,.annual,.pillars{break-inside:avoid}.results{width:100%}.chart-help{display:none}}

.extras{margin:0}.pillars .hidden-wrap{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}.pillars .hidden-wrap small{font-size:10px;margin:0;line-height:1.5}.chart-head .person{margin:0}

/* A4 portrait chart: typography and table proportions follow the reference. */
:root{--e0:#078420;--e1:#e52b35;--e2:#ed9900;--e3:#999;--e4:#286299}
.chart{--label:10%;width:100%;max-width:900px;margin:0 auto;background:#fff;color:#111;border:1.5px solid #111;font-family:Arial,'Helvetica Neue',sans-serif;line-height:1.3;box-shadow:0 2px 12px #0000000c}
.chart-head{padding:15px 16px;min-height:108px;gap:16px;border-color:#999;grid-template-columns:43% 57%}
.chart h2{font:700 23px/1.2 'Times New Roman',serif;color:#111;white-space:nowrap}
.chart-brand{font-size:12px;letter-spacing:1px;color:#254b61;margin-bottom:12px}.chart-heading small{display:none}
.person{font-size:14px;gap:5px 8px;grid-template-columns:128px minmax(0,1fr)}.person dt,.person dd{color:#111}.person dd::before{content:': ';}.person .person-name{font-size:15px;color:#111}
.pillars th,.pillars td{border-color:#aaa;padding:12px 6px;background:transparent;font-size:16px}.pillars tr>*:first-child{width:10%}.pillars th{font-size:13px;color:#235578;background:transparent;letter-spacing:0;font-weight:700;overflow-wrap:normal}.pillars .daycol{background:transparent}.pillars .godrow td{font-size:16px}.pillars .smallrow td{font-size:16px;padding:12px 5px}.pillars tr:first-child td{font-weight:700}.pillars .pillarcell{padding:0;background:none}.big-gan,.big-zhi{font-size:29px;line-height:1.4}.big-zhi{margin-top:8px}.pillars .hidden-wrap span{font-size:16px}.pillars .hidden-wrap small{font-size:14px;color:#111;line-height:1.3}
.labeled-row{display:grid;grid-template-columns:var(--label) minmax(0,1fr);border-bottom:1px solid #aaa}.row-label{display:flex;justify-content:center;align-items:center;text-align:center;border-right:1px solid #aaa;font-size:13px;font-weight:700;color:#235578}.cycle-info{padding:5px 10px;background:#fff;border-top:0;border-bottom:1px solid #aaa}.cycle-info h3{font-size:10px;letter-spacing:0}.cycle-info small{font-size:10px;color:#555}
.cycle-btn{border-color:#aaa;padding:10px 1px 8px;font-size:14px}.cycle-btn b,.annual b{font-size:17px;font-weight:400;line-height:1.3;color:#111}.cycle-btn .age{font-size:12px;margin-top:11px}.cycle-btn .years{font-size:12px;margin-top:7px;color:#111}.cycle-btn.selected{background:#ffe7b4;box-shadow:none}.annual td{padding:9px 1px;border-color:#aaa;font-size:14px}.annual .annual-year{font-size:15px;border-color:#bbb;margin-top:8px;padding-top:7px}.annual small{font-size:12px;margin-top:6px}.annual .picked{background:#ffe7b4}.annual button{padding:0}.annual-row:last-of-type{border-bottom:0}
.under-grid{grid-template-columns:28% 72%;border-top:0;min-height:184px}.extras{grid-template-columns:35.714% 1fr;font-size:14px}.extras dt,.extras dd{border-color:#aaa;padding:8px 4px;display:flex;flex-direction:column;justify-content:center}.extras dt{font-size:12px;text-align:center;background:transparent;color:#235578}.extras small{font-size:12px}.shensha-title{font-size:13px;font-weight:700;background:transparent;color:#235578;letter-spacing:0;border-color:#aaa;padding:7px}.shensha-grid{height:auto;min-height:145px}.shensha-cell{padding:0 0 8px;font-size:14px;border-color:#aaa}.shensha-cell strong{font-size:12px;font-weight:700;color:#235578;margin:0 0 7px;padding:7px 2px;border-bottom:1px solid #aaa}.chart-bottom{border-color:#aaa;padding:6px 9px;color:#777;font-size:10px;gap:8px;flex-wrap:wrap}.print-legend{display:flex;gap:9px}.print-legend i{font-style:normal}.chart-convention{font-size:9px;width:100%;text-align:right}
@media print{
 @page{size:A4 portrait;margin:7mm}
 html,body{margin:0!important;padding:0!important;width:196mm;background:#fff}
 main,.workspace,.results,.chart-scroll{margin:0!important;padding:0!important;width:196mm;max-width:none;min-width:0;overflow:visible;display:block}
 .chart{width:196mm;max-width:none;min-width:0;margin:0;border:0.35mm solid #111;box-shadow:none;break-inside:avoid;page-break-inside:avoid;font-size:10pt}
 .chart-head{height:auto;min-height:32mm;padding:3mm;gap:3mm;grid-template-columns:43% minmax(0,1fr)}
 .chart h2{font-size:16pt}.chart-brand{font-size:9pt;margin-bottom:3mm}.person{font-size:9.5pt;gap:1mm 2mm;grid-template-columns:29mm minmax(0,1fr)}.person .person-name{font-size:10pt}
 .pillars{height:90mm}.pillars th,.pillars td{padding:2mm 1mm;font-size:11pt}.pillars th{font-size:9pt}.pillars .smallrow td,.pillars .godrow td{font-size:11pt;padding:2mm 1mm}.pillars .pillarcell{padding:0}.big-gan,.big-zhi{font-size:22pt;line-height:1.25}.big-zhi{margin-top:2mm}.pillars .hidden-wrap span{font-size:11pt}.pillars .hidden-wrap small{font-size:9.5pt}
 .cycle-info{height:6mm;padding:1mm 2mm}.cycle-info h3,.cycle-info small{font-size:7pt}.row-label{font-size:9pt}.cycle-grid{height:29mm}.cycle-btn{padding:2mm 0;font-size:10pt}.cycle-btn b,.annual b{font-size:11.5pt;line-height:1.25}.cycle-btn .age{font-size:8pt;margin-top:3mm;white-space:nowrap}.cycle-btn .years{font-size:10pt;margin-top:2mm;white-space:nowrap}
 .annual-row{height:29mm}.annual td{padding:2mm 0}.annual .annual-year{font-size:10pt;padding-top:2mm;margin-top:2mm}.annual small{font-size:8pt;margin-top:1.5mm}.annual button{padding:0}
 .under-grid{min-height:45mm;height:45mm}.extras{font-size:10pt}.extras dt{font-size:8.5pt}.extras dt,.extras dd{padding:1mm}.extras small{font-size:8.5pt}.shensha-title{font-size:9pt;padding:2mm}.shensha-grid{min-height:0}.shensha-cell{font-size:9pt;padding:0 0 1mm}.shensha-cell strong{font-size:8pt;padding:2mm 0;margin-bottom:2mm}.chart-bottom{min-height:9mm;padding:1mm 2mm;font-size:7pt;gap:1mm}.chart-convention{font-size:6.5pt}.print-legend{gap:2mm}
}

/* Brand logo beside the two heading lines, including the A4 print. */
.chart-heading{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.chart-logo{display:block;width:106.6667px;height:106.6667px;object-fit:contain;flex:0 0 106.6667px}
.chart-heading-text{min-width:0}.chart-heading .chart-brand{font-size:11px;letter-spacing:.7px;margin-bottom:9px}
.chart-heading h2{font-size:20px;white-space:normal}
@media print{.chart-heading{gap:2mm}.chart-logo{width:26.6667mm;height:26.6667mm;flex-basis:26.6667mm}.chart-heading .chart-brand{font-size:8pt;margin-bottom:2mm}.chart-heading h2{font-size:13.5pt;line-height:1.25}}
/* Match both chart title lines. */
.chart-heading .chart-brand{font:700 20px/1.2 'Times New Roman',serif;letter-spacing:0;color:#111}
@media print{.chart-heading .chart-brand{font-size:13.5pt;line-height:1.25}}
/* Main page heading matches the chart title typography. */
.intro h1{font:700 33.3333px/1.2 'Times New Roman',serif;letter-spacing:0;color:#111}
.intro h1 em{font-style:normal;color:inherit}

.person .solar-term-date small{display:block;font-size:11px;color:#555;margin-top:2px}
@media print{.person .solar-term-date{font-size:9pt}.person .solar-term-date small{font-size:8pt}}
/* Larger, stronger text throughout the birth information form. */
#birthForm{font-size:16px;font-weight:600}
#birthForm .panel-title h2{font-size:18px;font-weight:700}
#birthForm .step{font-size:14px;font-weight:700}
#birthForm label,#birthForm .check{font-size:15px;font-weight:700;color:#34434d}
#birthForm input:not([type=checkbox]),#birthForm select{font-size:16px;font-weight:400;text-transform:none;height:44px;padding:8px;color:#243a47}
#birthForm .settings summary{font-size:15px;font-weight:700}
#birthForm .settings p,#birthForm .privacy{font-size:13px;font-weight:600;line-height:1.6}
#birthForm .primary{font-size:16px;font-weight:700}
#birthForm .error{font-size:14px;font-weight:700}

/* Keep chart actions beside the form submit action. */
#birthForm .form-actions{display:grid;grid-template-columns:1.1fr 1.1fr .85fr;gap:6px;grid-column:1/-1}
#birthForm .form-actions button{min-width:0;min-height:46px;padding:9px 3px;border:1px solid #254b61;border-radius:3px;font-size:13px;line-height:1.35;font-weight:700;background:#fff;color:#254b61;cursor:pointer}
#birthForm .form-actions .primary{display:block;width:100%;background:#254b61;color:#fff;font-size:13px}
#birthForm .form-actions button:hover{background:#e9eeec}
#birthForm .form-actions .primary:hover{background:#173d52}
#birthForm .form-actions button:disabled{cursor:default;opacity:.45}
/* A subtle watermark behind the chart, without fading its text. */
.chart{isolation:isolate}
.chart::before{content:"";position:absolute;inset:0;background:url('nen-hoa-sen-bat-tu.png') center / 100% 100% no-repeat;opacity:.20;pointer-events:none;z-index:0}
.chart>*{position:relative;z-index:1}
@media print{.chart::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* Soft chick-yellow paper across the complete chart. */
.chart{background-color:#fffce9;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.chart .cycle-info{background-color:transparent}
.chart .cycle-btn.selected,.chart .annual .picked{background-color:#ffdc82}

/* Clear icons above each action label in the compact button row. */
#birthForm .form-actions button,#birthForm .form-actions .primary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.button-icon{display:block;width:20px;height:20px;flex:none}
/* Blend away the white surrounding the original logo on yellow paper. */
.chart-logo{mix-blend-mode:multiply}
.chart-logo{clip-path:circle(50% at 50% 50%)}

/* Bold the chart row headings on screen and in A4 print. */
.chart .pillars th[scope="row"],.chart .row-label,.chart .cycle-info h3,.chart .extras dt{font-weight:900}

/* Match the reference's condensed blue labels and plain body text. */
@font-face{font-family:'Chart Narrow';src:url('fonts/chart-narrow-bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}
.chart{font-family:Arial,'Helvetica Neue',sans-serif}
.chart .pillars th[scope="row"],.chart .row-label,.chart .extras dt,.chart .shensha-title,.chart .shensha-cell strong,.chart .cycle-info h3{font-family:'Chart Narrow','Arial Narrow',Arial,sans-serif;font-weight:700;line-height:1.18;letter-spacing:0;color:#174568}
.chart .pillars th[scope="row"],.chart .row-label{font-size:16px}
.chart .extras dt,.chart .shensha-cell strong{font-size:15px}
.chart .shensha-title{font-size:17px}
.chart .cycle-info h3{font-size:12px}
.chart .big-gan,.chart .big-zhi{font-family:Arial,sans-serif;font-weight:700}
.chart .person .person-name{font-weight:400}
@media print{.chart .pillars th[scope="row"],.chart .row-label{font-size:11pt}.chart .extras dt,.chart .shensha-cell strong{font-size:10pt}.chart .shensha-title{font-size:11pt}.chart .cycle-info h3{font-size:8pt}}

/* Website address: two-thirds larger than the former footer text. */
.chart-bottom .chart-website{font-size:14.6667px;line-height:1.3;text-decoration:none}
@media print{.chart-bottom .chart-website{font-size:9.6667pt}}

/* Keep the address at the left, vertically centered in its footer row. */
.chart-bottom{align-items:center}
.chart-bottom .chart-website{display:block;width:auto;text-align:left;font-weight:400;font-style:normal;align-self:center}

/* Nạp âm values one size smaller and italic. */
.chart .pillars .nayin-row td{font-size:15px;font-style:italic}
@media print{.chart .pillars .nayin-row td{font-size:10pt}}

/* Enlarge and strengthen the upper-right title stamp by two thirds. */
.intro-stamp>span{font-size:58.3333px;font-weight:700}
.intro-stamp small{font-size:13.3333px;font-weight:700}

/* Main heading one size larger in burgundy. */
.intro h1{font-size:35px;color:#800020}
.intro h1 em{color:inherit}

/* Increase the introductory subject line by two font sizes. */
.intro .eyebrow{font-size:12px}

/* Keep the two additional stage rows within the A4 portrait page. */
@media print{.pillars{height:104mm}.pillars th,.pillars td,.pillars .smallrow td,.pillars .godrow td{padding:1.2mm 1mm}.cycle-grid,.annual-row{height:27mm}}

.download-link{display:block;grid-column:1/-1;margin-top:12px;text-align:center;color:#254b61;font-size:14px;text-decoration:underline}

.export-image::before{display:none}

/* Double frame around the complete chart, including JPG and print. */
.chart{border:4px double #111}
@media print{.chart{border:1mm double #111}}

/* User-supplied logo replaces the small header yin-yang symbol. */
.header-logo{display:block;width:42px;height:42px;object-fit:contain;flex:0 0 42px}
@media(max-width:820px){.header-logo{width:35px;height:35px;flex-basis:35px}}

/* One complete chart per A4 page; scale only if its content exceeds the safe area. */
@media print{
 @page{size:A4 portrait;margin:7mm}
 html,body{width:196mm!important;height:281mm!important;overflow:hidden!important}
 .chart-scroll{position:relative!important;width:196mm!important;height:281mm!important;overflow:hidden!important}
 .chart{position:absolute!important;top:0;left:var(--print-left,0px);transform:scale(var(--print-scale,1));transform-origin:top left;break-inside:avoid;page-break-inside:avoid}
}

/* Responsive forms and an overview/detail switch for narrow screens. */
.results,aside{min-width:0}
.chart-view-tools{display:none}
@media screen and (max-width:820px){
 .chart-view-tools{display:flex;gap:8px;margin:14px 0 10px}
 .chart-view-tools button{min-height:44px;border:1px solid #254b61;border-radius:4px;padding:8px 14px;background:#fff;color:#254b61;font-size:14px;font-weight:600}
 .chart-view-tools button[aria-pressed="true"]{background:#254b61;color:#fff}
 .chart-scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%}
 .chart-scroll.mobile-fit{overflow:hidden;padding-bottom:0}
 .mobile-fit .chart{width:900px;min-width:900px;max-width:none;margin:0;transform:scale(var(--chart-scale,1));transform-origin:top left}
 .panel label{min-width:0}
 #birthForm input:not([type=checkbox]),#birthForm select{font-size:16px;min-height:44px}
 .topbar .textbtn{min-height:44px}
 .toast{width:max-content;max-width:calc(100vw - 24px);bottom:16px;padding:12px 16px}
 dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;padding:26px}
}
@media screen and (max-width:480px){
 .topbar{padding:8px 12px;height:auto;min-height:72px;gap:8px;flex-wrap:wrap}
 .topbar nav{gap:12px;margin-left:auto}
 main{padding:0 12px}
 .intro{padding:20px 0}
 .intro h1{font-size:31px}
 .intro .eyebrow{font-size:11px;letter-spacing:1.4px}
 #birthForm{gap:0 12px;padding:16px}
 #birthForm>label:first-child{grid-column:1/-1}
 #birthForm .three{gap:8px;grid-template-columns:1fr 1fr 1.35fr}
 #birthForm .form-actions button{font-size:13px;min-height:56px}
 .brand{letter-spacing:.6px}.brand small{letter-spacing:.5px}
}
@media print{.chart-view-tools{display:none!important}}

/* Stronger outer frame and a finer inner frame. */
.chart{border:2px solid #111;padding:3px}
.chart::after{content:"";position:absolute;inset:2px;border:1px solid #111;pointer-events:none;z-index:5}
@media print{.chart{border:.5mm solid #111;padding:.8mm}.chart::after{inset:.5mm;border:.25mm solid #111}}

/* Print the same complete A4 composition as the saved image. */
#a4PrintSheet{display:none}
@media print{
 body.print-ready{width:auto!important;height:auto!important;overflow:visible!important}
 body.print-ready>header,body.print-ready>main,body.print-ready>dialog,body.print-ready>.toast{display:none!important}
 body.print-ready #a4PrintSheet{display:block!important;width:190mm;height:268.762mm;margin:0 auto!important;padding:0!important;break-inside:avoid;page-break-inside:avoid;line-height:0}
 #a4PrintImage{display:block;width:100%;height:100%;object-fit:contain;border:0;margin:0;padding:0}
}