:root{--ink:#49382b;--muted:#60472f;--accent:#715033;--line:#c9b791;--paper:#f4ecdc;--red:#a5322b;--black:#191817;--serif:"Chart Ming","Noto Serif TC","Songti TC",PMingLiU,serif;--sans:"Chart Sans","PingFang TC","Microsoft JhengHei",sans-serif;--chart-font:var(--serif);--number-scale:1;--cell-ratio:.9;color-scheme:light}
*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#e5dbc9;color:var(--ink);font:14px/1.6 var(--sans);-webkit-text-size-adjust:100%;text-size-adjust:100%}button,input,select,a{-webkit-tap-highlight-color:transparent}button,input,select{font:inherit;color:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.38;cursor:default}button{border:0;background:transparent}a{color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #9d7438;outline-offset:3px}button,input,select{border-radius:3px}input,select{min-width:0;max-width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]),select{width:100%;border:1px solid #cbb997;background:#fbf7ed;box-shadow:inset 0 1px 2px #634b2410;min-height:42px;padding:8px 10px}input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:none;margin:0}input[type=range]{width:100%;accent-color:var(--accent);min-height:30px;margin:5px 0 20px}p,h1,h2,h3{margin:0}p+p{margin-top:12px}h1,h2,h3{font-family:var(--serif);font-weight:400}svg.icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}svg.icon circle{fill:var(--paper)}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:var(--paper);padding:10px}.skip-link:focus{top:10px}.annual-ink{color:var(--red)}.hint{font-size:11px;line-height:1.8;color:var(--muted)}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 2%;min-height:100px;background:var(--paper);border-bottom:1px solid #ad9161;box-shadow:0 3px 0 #f8f2e5,0 4px 0 #c6b38d}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font:23px/1.3 var(--serif);letter-spacing:.05em;color:#513726}.brand-mark{font-size:29px;line-height:1;color:#9d7c43}.brand-dot{color:#9d7c43}.motto{display:flex;flex-wrap:wrap;gap:2px 12px;margin:10px 0 0 39px;color:#86602f;font:12px/1.6 var(--serif);letter-spacing:.06em}.motto em{font:italic 11px/1.7 Georgia,serif;letter-spacing:0;color:#80623f}.site-header nav{display:flex;align-items:center;gap:4px;flex:none}.site-header nav button{display:flex;align-items:center;gap:7px;padding:10px 13px;min-height:44px;font-size:13px;color:var(--muted);border-bottom:1px solid transparent;border-radius:0;white-space:nowrap}.site-header nav button.active{border-bottom-color:#a6864c;color:#583b26}.site-header nav button:hover{background:#e8dcc766;color:#583b26}
.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);margin:20px auto 20px;width:calc(100% - 48px);max-width:none;border:1px solid #bcaa87;border-radius:5px;background:#ded2bd;box-shadow:0 5px 20px #5943260b;min-height:740px;overflow:hidden}.control-panel{background:#f1e7d4;border-right:1px solid #bdab88;padding:22px 18px;min-width:0;position:relative}.section-heading{display:flex;gap:8px;align-items:center;font-size:16px;letter-spacing:.045em;padding-bottom:11px;margin-bottom:17px;border-bottom:3px double #bc9f6c;color:#513726}.section-heading>span{font-size:13px;color:#9b773f}.field-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin:0 0 8px}.field-label>span{font-size:10px;color:var(--muted)}.year-entry{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:6px}.year-entry button{background:#f9f3e7;border:1px solid #c5af86;font-size:20px;min-height:44px}.year-entry input{font:26px/1 Georgia,serif;text-align:center;padding:5px!important;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.year-entry input::-webkit-inner-spin-button,.year-entry input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field-error{font-size:11px;line-height:1.5;color:var(--red);margin:4px 0 8px;min-height:3px}.primary{background:#6d4930;color:#fff7e6;border:1px solid #614027;box-shadow:inset 0 0 0 2px #ffffff13;padding:10px 15px;min-height:43px}.primary:hover{background:#593923}.full{width:100%}.quiet{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#f9f3e7;border:1px solid #c5af86;color:#644a33;padding:7px 12px;min-height:36px;font-size:12px}.quiet:hover{background:#eaddc3}.text-button{display:inline-flex;align-items:center;gap:6px;padding:5px 0;color:#715033;font-size:11px;text-decoration:underline;text-decoration-color:#c2ac87;text-underline-offset:4px;min-height:30px}.year-caption{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.year-caption strong{font:16px var(--serif);letter-spacing:.08em}.ruled{border-top:3px double #cbb58e;padding-top:20px;margin-top:21px}.ruled .section-heading{border-bottom:0;padding-bottom:0;margin-bottom:14px}.layer-row{display:flex;gap:9px;align-items:center;padding:10px 0;cursor:pointer;min-height:61px}.layer-row strong{font-size:13px;font-weight:600}.layer-row small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.layer-dot{display:inline-block;border-radius:50%;width:6px;height:6px;flex:none}.annual-dot{background:var(--red)}.base-dot{background:var(--black)}.layer-sample{margin-left:auto;align-self:center;font:18px var(--serif);opacity:.8}.panel-foot{margin-top:25px}.panel-foot .hint{margin-top:9px}.mobile-controls{display:none}
.reading-panel{min-width:0}.chart-view{padding:24px 24px 0}.eyebrow{font-size:10px;letter-spacing:.18em;color:#60472f;margin-bottom:7px}h1{font-size:30px;line-height:1.3;color:#4c3525}.chart-layout{display:grid;grid-template-columns:minmax(0,1fr) 224px;align-items:start;gap:25px;max-width:none;margin:auto}.board-wrap{min-width:0;width:100%;max-width:none;margin:0 auto;align-self:start}.board-compass{text-align:center;font-size:14px;line-height:1.4;letter-spacing:.13em;color:#6b5337;padding:0 0 10px;font-family:var(--serif)}.board-compass>span{font:9px Georgia,serif;letter-spacing:.1em;margin-left:5px;opacity:.85}#compassBottom{padding:10px 0 0}.board-body{display:grid;grid-template-columns:17px minmax(0,1fr) 17px;gap:7px;align-items:center}.side-compass{display:flex;flex-direction:column;align-items:center;gap:4px;font:13px var(--serif);color:#6b5337}.side-compass>span{font:9px Georgia,serif}.star-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #49443b;gap:1px;background:#777064;min-width:0;box-shadow:0 5px 15px #5943260b;container-type:inline-size}.palace{display:block;position:relative;aspect-ratio:1 / var(--cell-ratio);padding:0;min-width:0;width:100%;background:#fffefa;color:var(--black);border-radius:0;overflow:hidden;text-align:center;font-family:var(--chart-font);isolation:isolate}.palace:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #9d7438}.palace-header{position:absolute;left:8%;right:8%;top:6%;display:flex;justify-content:space-between;gap:4px;align-items:center;font:clamp(10px,1.2vw,13px) var(--sans);color:#60472f}.palace-header>span:first-child{letter-spacing:.08em;color:#625847}.trigram{font-family:var(--serif);font-size:clamp(10px,1.2vw,13px);opacity:.7}.annual-group{position:absolute;top:25%;left:0;right:0;display:flex;flex-direction:column;align-items:center;color:var(--red);line-height:1;gap:6px}.annual-number{font-size:calc(clamp(34px,4.8vw,62px) * var(--number-scale));line-height:.95;font-family:Georgia,var(--chart-font);font-weight:400}.star-name{font:clamp(9px,1vw,12px)/1.2 var(--chart-font);letter-spacing:.1em;color:#7a3e31}.base-group{position:absolute;left:0;right:0;bottom:8%;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:8px}.base-number{font:calc(clamp(22px,2.5vw,31px) * var(--number-scale))/1 Georgia,var(--chart-font)}.base-caption{position:absolute;right:calc(50% + 21px);bottom:2px;font:9px var(--sans);color:#60472f}.single-annual .annual-group{top:33%}.single-base .base-group{bottom:auto;top:34%;flex-direction:column;align-items:center;gap:8px}.single-base .base-number{font-size:calc(clamp(34px,4.8vw,62px) * var(--number-scale))}.single-base .base-caption{position:static;color:#74654d;font:12px var(--chart-font)}.inspector{margin-top:0;border:1px solid #bfa984;background:#f1e7d4;padding:19px 17px;border-radius:3px}.inspector-heading{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:13px;border-bottom:3px double #bfa574;margin-bottom:17px}.inspector h2{font-size:24px;letter-spacing:.08em;line-height:1.2}.inspector-heading p{font-size:11px;color:#60472f;margin-top:7px}.trigram-symbol{font-size:25px;color:#a78b60;line-height:1}.detail-layer{margin-top:16px}.detail-layer .detail-label{font-size:10px;letter-spacing:.1em;color:#60472f}.detail-star{display:flex;align-items:baseline;gap:10px;margin:4px 0}.detail-number{font:36px/1 Georgia,serif}.detail-star h3{font-size:16px;letter-spacing:.03em}.detail-star h3 small{font:10px var(--sans);margin-left:5px;color:#60472f}.detail-layer p:last-child{font-size:11px;color:#60472f;line-height:1.7}.detail-divider{border-top:1px solid #cdbb97;margin-top:17px}.element-relation{margin-top:18px;padding-top:14px;border-top:3px double #c5ac7e}.element-relation>span{font-size:10px;color:#60472f}.element-relation>strong{display:block;font:16px/1.4 var(--serif);margin:5px 0 3px}.element-relation p{font-size:11px;color:#60472f}.inspector .detail-note{font-size:10px;color:#60472f;margin-top:15px;line-height:1.9}
.compare-view,.guide-view{padding:30px;max-width:1150px;margin:auto}.page-heading{margin-bottom:25px}.page-heading h1{margin-bottom:10px}.page-heading>p:last-child{font-size:12px;color:#806b4f}.compare-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0 22px}.compare-tools strong{font:19px Georgia,serif;color:#705233}.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.compare-card{padding:13px 13px 15px;border:1px solid #bca47a;background:#f4ebdb;border-radius:3px;min-width:0;color:#6f5136}.compare-heading{display:flex;gap:5px;justify-content:space-between;align-items:baseline;margin-bottom:9px}.compare-heading strong{font:21px Georgia,serif}.compare-heading>span{font:12px var(--serif)}.mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#b3a792;border:1px solid #b3a792}.mini-cell{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;aspect-ratio:1.35;background:#fffdf7;color:var(--red);font:24px Georgia,serif}.mini-cell small{font:9px var(--sans);color:#60472f}.compare-card>p{font-size:10px;margin-top:9px}.compare-hint{margin-top:20px}.guide-view{max-width:900px}.guide-section{margin-top:25px;padding-top:24px;border-top:3px double #bfa574}.guide-section h2{font-size:21px;margin-bottom:15px}.guide-section p{font-size:13px;line-height:1.95;color:#766048}.guide-two{display:grid;grid-template-columns:1fr 1fr;gap:26px}.guide-two h3{font-size:16px;margin:7px 0 10px}.guide-number{font:46px Georgia,serif;line-height:1.1}.route-list{display:flex;flex-wrap:wrap;padding:0;gap:8px;list-style:none;margin:18px 0 16px}.route-list li{padding:8px 11px;background:#f7efdf;border:1px solid #c5ad83;font-size:12px}.route-list li small{margin-right:7px;color:#9d7c43}.reference-tables{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:500px;margin:20px 0}.reference-tables h3{font-size:15px;margin-bottom:10px}.reference-grid{border-collapse:collapse;width:100%;background:#fffdf8}.reference-grid td{border:1px solid #9f917d;text-align:center;width:33.333%;padding:10px;font:24px Georgia,serif}.scope-note{border-top:1px solid #c1ae88;padding-top:20px;margin-top:30px;font-size:11px;color:#60472f}
dialog{background:#f4ead7;color:var(--ink);border:1px solid #b39764;border-radius:5px;box-shadow:0 16px 65px #38281940;width:min(440px,calc(100% - 28px));max-height:calc(100vh - 38px);max-height:calc(100dvh - 38px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:0;overflow:auto}dialog::backdrop{background:#30251a70}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin:0;padding:15px 20px;border-bottom:3px double #bc9f6c}.dialog-heading h2{font-size:22px}.close-button{min-width:40px;min-height:40px;font:28px Georgia,serif;color:#7b5e3c}.dialog-content{padding:22px}.range-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-top:23px}.range-label output{font:12px Georgia,serif;color:#60472f}.check-label{display:flex;gap:10px;align-items:center;min-height:44px;font-size:13px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}.dialog-actions+p{margin-top:12px}.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:3px}#exportDialog{width:min(620px,calc(100% - 24px))}#exportPreview{display:block;max-width:100%;height:auto;max-height:60vh;max-height:60dvh;object-fit:contain;margin:14px auto 0;border:1px solid #cbb997}#exportStatus{font-size:12px;color:#79664f}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;background:#59402d;color:#fff8ea;box-shadow:0 5px 18px #37281a20;padding:11px 18px;max-width:calc(100% - 24px);border:1px solid #9d7c43;border-radius:3px;font-size:12px;text-align:center}.noscript-note{padding:25px;margin:15px;border:1px solid var(--red);background:var(--paper)}
@supports(font-size:1cqw){.annual-number,.single-base .base-number{font-size:calc(clamp(26px,10cqw,64px) * var(--number-scale))}.base-number{font-size:calc(clamp(20px,5.4cqw,35px) * var(--number-scale))}.star-name{font-size:clamp(9px,2cqw,13px)}.palace-header{font-size:clamp(10px,2.1cqw,14px)}}
@media(min-width:1550px){.chart-layout{grid-template-columns:minmax(0,1fr) 248px;gap:32px}.chart-view{padding-top:30px}.inspector{padding:23px}}
@media(max-width:1210px){.workspace{grid-template-columns:240px minmax(0,1fr);width:calc(100% - 32px);margin-top:18px}.control-panel{padding:20px 15px}.chart-layout{grid-template-columns:1fr}.board-wrap{max-width:650px}.inspector{max-width:650px;width:100%;margin:0 auto 20px;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.inspector-heading{grid-column:1/-1;margin-bottom:0}.detail-layer{margin-top:15px}.detail-divider{display:none}.element-relation{grid-column:1/-1}.inspector .detail-note{grid-column:1/-1}.chart-view{padding:22px 20px 0}.site-header{padding:14px 2%;gap:12px}.brand{font-size:21px}.site-header nav button{padding:10px}.compare-grid{gap:13px}.compare-view,.guide-view{padding:23px}}
@media(max-width:960px){.site-header{flex-wrap:wrap}.site-header nav{width:100%;max-width:100%;justify-content:flex-start;margin-left:0;overflow-x:auto}.motto{margin-top:8px}.workspace{grid-template-columns:220px minmax(0,1fr)}.chart-view{padding:18px 14px 0}.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.board-body{gap:7px;grid-template-columns:17px minmax(0,1fr) 17px}.annual-group{gap:5px}.base-caption{right:calc(50% + 17px)}}
@media(max-width:760px){.site-header{padding:14px 14px 5px;gap:11px;min-height:0}.brand{font-size:21px;gap:8px}.brand-mark{font-size:27px}.motto{margin-left:34px;gap:2px 8px;font-size:11px}.motto em{font-size:10px}.site-header nav{margin-left:0;gap:0;justify-content:space-between}.site-header nav button{font-size:12px;padding:9px 10px;min-height:44px}.site-header nav .icon{width:15px}.workspace{display:flex;flex-direction:column;width:calc(100% - 20px);margin-top:15px;min-height:0;overflow:hidden}.mobile-controls{display:flex;align-items:center;gap:9px;text-align:left;width:100%;padding:11px 15px;min-height:49px;background:#f1e7d4;border-bottom:1px solid #bdab88;border-radius:0;font-size:12px}.mobile-controls>span:first-child{display:flex;align-items:center;gap:7px}.mobile-controls>span:nth-child(2){margin-left:auto;color:#8b6b44;font-size:11px}.chevron{font-size:17px;transition:transform .2s}.controls-open .chevron{transform:rotate(180deg)}.control-panel{display:none;border-right:0;border-bottom:3px double #bdab88;padding:21px;grid-template-columns:1fr 1fr;gap:22px 28px}.controls-open .control-panel{display:grid}.control-panel .ruled{margin:0;padding:0;border:0}.control-panel .section-heading{font-size:15px}.control-panel .panel-foot{grid-column:1/-1;margin-top:0}.control-panel .full{min-height:44px}.control-panel input,.control-panel select,dialog input,dialog select{font-size:16px}.reading-panel{width:100%}.chart-view{padding:19px 13px 0}.eyebrow{font-size:9px;margin-bottom:5px}.board-wrap{max-width:560px}.board-body{grid-template-columns:12px minmax(0,1fr) 12px;gap:7px}.board-compass{font-size:13px;padding-bottom:9px}.side-compass{font-size:11px}.side-compass>span{font-size:8px}.board-compass>span{font-size:8px}.palace-header{font-size:11px}.trigram{font-size:11px}.annual-number{font-size:calc(clamp(28px,8vw,48px) * var(--number-scale))}.base-number{font-size:calc(clamp(20px,5vw,29px) * var(--number-scale))}.annual-group{top:26%;gap:4px}.star-name{font-size:10px;letter-spacing:.02em}.base-caption{font-size:8px;right:calc(50% + 17px)}.base-group{bottom:8%}.chart-layout{gap:22px}.inspector{padding:16px;margin-bottom:14px;gap:0 14px}.inspector h2{font-size:22px}.inspector-heading{padding-bottom:12px}.detail-number{font-size:32px}.detail-star{gap:8px}.detail-star h3{font-size:15px}.detail-layer p:last-child{font-size:10px}.element-relation{margin-top:15px;padding-top:12px}.inspector .detail-note{margin-top:9px}.compare-view,.guide-view{padding:22px 17px}.page-heading h1{font-size:27px}.page-heading>p:last-child{font-size:11px}.compare-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.compare-card{padding:10px 8px}.compare-heading{flex-wrap:wrap;justify-content:center;text-align:center}.compare-heading strong{font-size:19px}.compare-heading>span{font-size:11px}.mini-cell{font-size:20px;aspect-ratio:.92;gap:3px}.mini-cell small{font-size:8px}.compare-card>p{font-size:9px}.compare-tools{gap:6px}.compare-tools .quiet{font-size:11px;padding:8px}.compare-tools strong{font-size:16px}.guide-two{gap:20px}.guide-section h2{font-size:20px}.guide-section p{font-size:12px}.reference-tables{gap:17px}.route-list{gap:6px}.route-list li{font-size:11px;padding:7px 8px}}
@media(max-width:390px){.brand{font-size:19px}.brand-mark{font-size:24px}.motto{margin-left:30px}.motto em{display:none}.site-header nav button{padding:8px;font-size:11px}.chart-view{padding-left:9px;padding-right:9px}.control-panel{grid-template-columns:1fr;gap:24px}.control-panel .section-heading{margin-bottom:12px}.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-cell{aspect-ratio:1.1}.inspector{gap:0 10px;padding:13px}.detail-star h3{font-size:14px}.detail-star h3 small{margin-left:3px}.guide-two{grid-template-columns:1fr}.palace-header{font-size:10px}.star-name{font-size:9px}.annual-group{gap:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} 
/* Allocate explicit rows so compact phone cells and height settings never stack labels. */
.palace{display:grid;grid-template-rows:19% 52% 29%;align-items:center}
.palace-header{position:static;grid-row:1;margin:0 8%;align-self:center;line-height:1.1}
.annual-group{position:static;grid-row:2;align-self:center;gap:4px}
.base-group{position:relative;grid-row:3;top:auto;bottom:auto;align-self:center}
/* Reset the grid area so a single layer centers within the entire palace. */
.single-annual .annual-group{grid-area:auto;position:absolute;top:50%;bottom:auto;left:0;right:0;transform:translateY(-50%)}
.single-base .base-group{grid-area:auto;position:absolute;top:50%;bottom:auto;left:0;right:0;transform:translateY(-50%)}
.annual-number,.single-base .base-number{font-size:calc(clamp(22px,6vw,62px) * var(--number-scale) * var(--cell-ratio))}
.base-number{font-size:calc(clamp(18px,3.4vw,35px) * var(--number-scale) * var(--cell-ratio))}
@supports(font-size:1cqw){.annual-number,.single-base .base-number{font-size:calc(clamp(22px,9.2cqw,62px) * var(--number-scale) * var(--cell-ratio))}.base-number{font-size:calc(clamp(18px,5cqw,35px) * var(--number-scale) * var(--cell-ratio))}.star-name{font-size:clamp(9px,2cqw,13px)}}
@media(max-width:390px){.annual-group{gap:3px}}
@media(min-width:761px){.board-wrap{max-width:none}}
.brand-block{min-width:0}.brand-line{display:flex;align-items:center;flex-wrap:wrap;gap:5px 14px}.brand-social-links{display:flex;align-items:center;gap:2px;flex:none}.brand-social-links a{display:grid;place-items:center;width:34px;height:38px;color:#715033;text-decoration:none;border-radius:3px}.brand-social-links a:hover{background:#e7d9bf;color:#49382b}.brand-social-links svg{display:block;width:18px;height:18px}.trigram{opacity:1;color:#60472f}.palace-header>span:first-child,.base-caption,.detail-label,.mini-cell small,.compare-hint{color:#60472f}.compare-modes{display:inline-flex;max-width:100%;gap:4px;padding:4px;border:1px solid #b69a6b;border-radius:3px;background:#e1d3b9;margin-bottom:6px}.compare-modes button{font-size:12px;min-height:40px;padding:8px 16px;color:#49382b}.compare-modes button[aria-pressed=true]{background:#fbf6e9;box-shadow:0 1px 3px #65472025;color:#49382b}.compare-modes button:hover{background:#eee3ce}#compareBoundary{color:#60472f;margin-top:8px}.compare-card{color:#49382b}.compare-card>p,.compare-heading>span{color:#60472f}
@media(max-width:1100px){.site-header{flex-wrap:wrap}.site-header nav{justify-content:flex-start}.brand-line{gap:4px 10px}}
@media(max-width:760px){.brand-social-links a{width:36px;height:40px}.brand-social-links{margin-left:28px}.brand-line{gap:2px 8px}.compare-modes{display:flex;width:100%}.compare-modes button{flex:1;padding:8px 6px;font-size:11px}}

.panel-foot{display:flex;flex-direction:column;gap:8px;border-top:3px double #cbb58e;padding-top:20px}.panel-foot .hint{margin-top:1px}

/* Natal house layers share positions with the canvas renderer. */
.mountain-ink{color:#285b48}.facing-ink{color:#285878}.mountain-dot{background:#285b48}.facing-dot{background:#285878}
details>summary{cursor:pointer;min-height:40px;padding:9px 0;font-size:12px;color:var(--accent);touch-action:manipulation}summary:focus-visible{outline:2px solid #9d7438;outline-offset:3px}
.house-fields>.field-label{margin-top:15px}.house-fields .field-label>span{font-size:9px}.year-assist{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin:8px 0 16px}.year-assist input{font-size:11px}.year-assist .quiet{padding:7px 9px}.bearing-summary{font:12px/1.8 var(--serif);margin:10px 0 4px}.house-records{border-top:1px solid #cbb58e;margin-top:13px}.house-records .field-label{margin-top:10px}.house-record-actions{display:flex;gap:15px;align-items:center;margin-top:10px}.house-board .palace{display:block}.house-board .palace-header{position:absolute;top:6%;left:8%;right:8%;margin:0}
.house-star{position:absolute;display:block;transform:translate(-50%,-50%);font-family:Georgia,var(--chart-font);font-weight:400;font-size:calc(var(--house-size) * clamp(75px,22vw,220px) * var(--number-scale) * var(--cell-ratio));line-height:1;white-space:nowrap}
.house-notice{max-width:none;margin:0 auto 18px;padding:11px 14px;border:1px solid #ac8249;background:#f7ead0;color:#64421f;font-size:12px;line-height:1.8}.compare-house-summary{font-size:13px;color:var(--muted);margin:-10px 0 15px}.house-mini{container-type:inline-size}.house-mini .mini-cell{display:block;position:relative;aspect-ratio:1 / var(--cell-ratio)}.house-mini .mini-cell>small{position:absolute;left:0;right:0;top:6%;line-height:1.1}.house-mini .house-star{font-size:calc(var(--house-size) * 85px * var(--number-scale) * var(--cell-ratio))}
@supports(font-size:1cqw){.house-board .house-star,.house-mini .house-star{font-size:calc(var(--house-size) * 33.333cqw * var(--number-scale) * var(--cell-ratio))}.house-mini .mini-cell>small{font-size:clamp(8px,3.3cqw,11px)}}
@media(max-width:760px){.house-section{grid-column:1/-1}.house-fields{display:block;max-width:500px}.house-notice{font-size:11px;padding:9px 11px}.house-board .palace-header{font-size:10px}.house-records input,.year-assist input{font-size:16px}.house-fields .field-label>span{font-size:10px}.house-mini .mini-cell{min-height:64px}.compare-grid.house-comparison{grid-template-columns:1fr}.house-mini{max-width:420px;margin:auto}.house-comparison .compare-card{padding:12px 16px}.house-comparison .compare-card .compare-heading{max-width:420px;margin:0 auto 10px}}
@media(min-width:761px) and (max-width:1050px){.compare-grid.house-comparison{grid-template-columns:1fr 1fr}}


/* Ordered mountain/facing pairs: a local, searchable reference. */
.pairs-view{padding:30px;max-width:1180px;margin:auto}.pairs-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.pairs-page-heading>div>p:last-child{font-size:13px;color:#60472f}.pair-source{font-size:12px;white-space:nowrap;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}.pair-reading-guide{padding:15px 18px;background:#f3e8d4;border-left:3px solid #b08c51;margin-bottom:22px;color:#60472f;font-size:12px;line-height:1.9}.pair-reading-guide strong{font-weight:600;color:#49382b;margin-right:12px}.pair-reading-guide p+p{margin-top:5px}.pair-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px;align-items:end;padding-bottom:20px;border-bottom:3px double #cbb58e}.pair-filters .field-label{margin-bottom:6px}.pair-filters input,.pair-filters select{min-height:44px;font-size:13px}.pair-filters button{min-height:44px;white-space:nowrap}.pair-results-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 15px;font-size:12px;color:#60472f}.pair-results-heading>p{font-weight:600;color:#49382b}.pair-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.pair-card{min-width:0;padding:20px 18px 13px;border:1px solid #c3ac86;border-radius:3px;background:#fffaf0}.pair-heading{display:flex;gap:13px;align-items:center;margin-bottom:13px}.pair-heading h3{font-size:21px;line-height:1.4}.pair-heading>div>p{font-size:10px;color:#60472f;margin-top:4px}.pair-digits{display:flex;align-items:center;gap:5px;flex:none;font:33px/1 Georgia,serif;font-variant-numeric:tabular-nums}.pair-digits b{font-weight:400}.pair-digits i{font:14px Georgia,serif;color:#8b7658}.pair-roles{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;line-height:1.7}.pair-tags{display:flex;gap:5px;flex-wrap:wrap;margin:12px 0}.pair-tags>span{font-size:10px;color:#60472f;padding:2px 6px;border:1px solid #d6c4a3;border-radius:2px;background:#f5ebd9}.pair-summary{font-size:13px;line-height:1.95;color:#49382b;margin:10px 0 14px}.pair-original{border-top:1px solid #d6c4a3;padding-top:12px;margin-top:12px}.pair-original-paragraph{margin:0;font:14px/1.95 var(--chart-font);color:#49382b;white-space:pre-line;overflow-wrap:anywhere}.pair-original-paragraph+.pair-original-paragraph{margin-top:9px}.pair-empty{padding:35px 15px;text-align:center;font-size:13px;color:#60472f;background:#f5ebd9;border:1px dashed #c3ac86}.inspector-combo{grid-column:1/-1;border-top:3px double #c1a77b;padding-top:19px;margin-top:20px;min-width:0}.inspector-combo>.detail-label{margin-bottom:14px}.inspector-combo .pair-heading{gap:10px}.inspector-combo .pair-heading h3{font-size:20px}.inspector-combo .pair-digits{font-size:32px}.inspector-combo .pair-summary{font-size:12px;line-height:1.95}.inspector-combo .pair-original-paragraph{font-size:13px}.pair-context{font-size:10px;line-height:1.8;color:#60472f;margin:5px 0 0}.inspector-combo .text-button{font-size:12px;min-height:40px}
@media(max-width:1250px){.pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pair-filters{grid-template-columns:1fr 1fr}.pair-search{min-width:0}.pair-filters>button{justify-self:start}.pairs-page-heading{flex-wrap:wrap;gap:4px}}
@media(max-width:760px){.site-header nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;width:100%;-webkit-overflow-scrolling:touch}.site-header nav button{flex:0 0 auto;white-space:nowrap}.pairs-view{padding:22px 17px}.pairs-page-heading h1{font-size:27px}.pair-reading-guide{padding:12px 14px;font-size:11px}.pair-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pair-card{padding:16px 14px 10px}.pair-filters input,.pair-filters select{font-size:16px}.pair-results-heading{font-size:11px}.pair-roles{font-size:11px}.pair-summary{font-size:13px}.inspector-combo{margin-top:15px}}
@media(max-width:560px){.pair-grid{grid-template-columns:1fr}.pair-filters{gap:12px 9px}.pair-search{grid-column:1/-1}.pair-filters>button{grid-column:1/-1;justify-self:stretch}.pair-heading h3{font-size:23px}.pair-digits{font-size:36px}.pair-card{padding:19px 18px 11px}.pair-results-heading{flex-wrap:wrap;gap:5px}}

/* User's house template: black upper pair, Chinese base, annual at lower right. */
.annual-ink,.annual-number,.mini-cell,.annual-group .star-name{color:var(--annual-color,var(--red))}.annual-dot{background:var(--annual-color,var(--red))}
.annual-color-setting{margin:19px 0}.color-control{display:flex;align-items:center;gap:11px}.color-control #annualColor{flex:none;width:54px;height:44px;min-height:44px;padding:3px;cursor:pointer}.color-control output{font:12px/1.4 ui-monospace,monospace;color:#60472f}.color-control .text-button{margin-left:auto;min-height:44px;white-space:nowrap}.house-template .board-compass,.house-template .side-compass{display:none}.house-template .board-body{position:relative;display:block;margin:40px 24px}.house-axis{position:absolute;inset:0;pointer-events:none;color:#191817;font:24px/1.2 var(--chart-font)}.house-axis>span{position:absolute;white-space:nowrap}.axis-top{left:var(--axis-x);top:-9px;transform:translate(-50%,-100%)}.axis-bottom{left:var(--axis-x);top:calc(100% + 9px);transform:translateX(-50%)}.axis-left{left:-7px;top:var(--axis-y);transform:translate(-100%,-50%)}.axis-right{left:calc(100% + 7px);top:var(--axis-y);transform:translateY(-50%)}
.house-board,.house-mini{--cell-ratio:var(--house-cell-ratio,.9)}.house-star-right{transform:translate(-100%,-50%)}


@media(max-width:760px){.house-template .board-body{margin:34px 19px}.house-axis{font-size:20px}.axis-left{left:-5px}.axis-right{left:calc(100% + 5px)}}
.year-caption{justify-content:flex-end}

.houses-view{padding:30px;max-width:1120px;margin:auto}.house-manager{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}.house-manager .house-records{border:1px solid #cbb58e;background:#fffaf0;margin:0;padding:24px}.house-manager .house-records>.field-label:first-child{margin-top:0}.house-manager input,.house-manager select{min-height:44px;font-size:15px}.house-manager .house-record-actions{flex-wrap:wrap;margin-top:20px}.house-record-preview{border-left:3px double #cbb58e;padding:22px}.house-record-preview h2{font-size:24px;overflow-wrap:anywhere;margin:12px 0}.house-record-preview>p:not(.detail-label){font-size:13px;line-height:1.9;color:#60472f;margin-bottom:24px}
#bearingDialog{width:min(940px,calc(100% - 24px));max-width:940px}.bearing-table-help{color:#60472f;font-size:12px;line-height:1.9;margin-bottom:16px}.bearing-table-scroll{overflow-x:auto;max-height:65vh}.bearing-table{width:100%;min-width:630px;border-collapse:collapse;font-size:12px;color:#49382b}.bearing-table th,.bearing-table td{padding:12px 14px;text-align:center;border:1px solid #d1bd99}.bearing-table thead th{position:sticky;top:0;background:#ede0c8;z-index:1;font-weight:600}.bearing-table small{display:block;font-size:11px;margin-top:5px}.bearing-table th .text-button{font-size:13px;min-height:44px}.bearing-table tr.current{background:#f1e2c5}.bearing-table tbody tr:hover{background:#f6eddb}
@media(max-width:760px){.houses-view{padding:22px 17px}.house-manager{grid-template-columns:1fr;gap:20px}.house-manager .house-records{padding:20px}.house-manager input,.house-manager select{font-size:16px}.house-record-preview{border-left:0;border-top:3px double #cbb58e;padding:20px 0}.bearing-table th,.bearing-table td{padding:10px}.house-record-actions .primary{min-height:44px}}
/* Compact the first two control sections while preserving touch-sized buttons. */
.year-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}.year-label-row .field-label{margin:0}.year-label-row .text-button{min-height:30px;padding:3px 0}.year-controls{display:block;min-width:0}.year-controls .year-entry{grid-template-columns:44px minmax(0,1fr) 44px;gap:4px}.year-controls .year-entry input{width:100%;min-width:0;max-width:100%;height:44px;font-size:22px;line-height:1.3;padding:0 4px!important}.year-section .field-error:empty{display:none}.control-panel #periodControls,.control-panel #houseSection{margin-top:14px;padding-top:12px}.house-fields>.field-label{margin-top:10px}.house-fields .year-assist{margin:7px 0 10px}.house-fields .bearing-summary{margin-top:7px}.house-fields .field-error:empty{display:none}.house-template .board-body{margin-top:36px}
/* Draw every grid edge once; selection never adds a second edge. */
.star-grid,.mini-grid{--grid-line:#615749;gap:0;border:0;border-top:1px solid var(--grid-line);border-left:1px solid var(--grid-line);background:transparent;box-shadow:none}.star-grid>.palace,.mini-grid>.mini-cell{border:0;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line)}.palace:focus-visible,.house-board .palace:focus-visible{box-shadow:none;outline:2px solid #9d7438;outline-offset:-6px}

@media(max-width:760px){.year-section{grid-column:1/-1}.control-panel #periodControls,.control-panel #houseSection{margin:0;padding:0}.year-controls .year-entry{grid-template-columns:44px minmax(0,1fr) 44px}.year-label-row .text-button{min-height:36px}.house-template .board-body{margin-top:32px}}

/* Keep the chart at the top beside the always-visible original descriptions. */
.house-template .inspector{display:block;margin-top:0;padding:12px}.house-template .inspector-heading{align-items:center;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid #bfa574;gap:8px}.house-palace-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}.house-template .inspector-heading h2{font-size:16px;letter-spacing:.03em}.house-template .inspector-heading p{font-size:10px;line-height:1.4;margin:0}.house-template .inspector-heading .trigram-symbol{font-size:18px}.house-star-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}.house-star-summary .detail-layer{min-width:0;margin:0}.house-star-summary .detail-label{font-size:10px;line-height:1.4;letter-spacing:0;margin:0}.house-star-summary .detail-star{gap:4px;margin:3px 0 0;align-items:baseline}.house-star-summary .detail-number{font-size:23px;line-height:1}.house-star-summary .detail-star h3{font-size:12px;line-height:1.5;letter-spacing:0;white-space:nowrap}.house-star-summary .detail-star h3 small{font-size:9px;margin-left:3px}.house-template .inspector-combo{margin-top:12px;padding-top:12px}.house-template .inspector-combo>.detail-label{margin-bottom:10px}
@media(max-width:1210px){.house-template .inspector{margin-top:0}}
.house-star.mountain-number,.house-star.facing-number{--number-scale:var(--house-main-scale,1)}.house-star.base-number{--number-scale:var(--house-base-scale,1)}.house-star.annual-number{--number-scale:var(--house-annual-scale,1)}

/* Optional layer controls stay below export actions, collapsed by default. */
.layer-controls{margin-top:16px}.layer-controls>summary{font-size:13px;min-height:44px;padding:12px 0}
@media(max-width:760px){.control-panel .layer-controls{grid-column:1/-1;margin-top:0}}

/* Both modes use the same header; the inspector starts beside the header. */
.chart-main{min-width:0}
.chart-heading{width:100%;max-width:none;margin:0 auto;padding:0 24px}
.chart-heading-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;min-width:0}
#chartTitle{font:700 30px/1.35 Georgia,var(--chart-font);letter-spacing:0;white-space:nowrap;color:#191817}
#chartTitle.annual-ink{color:var(--annual-color,var(--red))}
#chartTitle>span{font:700 20px/1.5 var(--chart-font);letter-spacing:.02em;margin-left:7px}
.period-badge{display:flex;flex-direction:column;gap:5px;flex:none;text-align:right;margin-left:auto;line-height:1.5;color:#191817}
.chart-period-main{font:700 19px/1.5 var(--chart-font);white-space:normal}
.chart-title-part{white-space:nowrap}
.chart-period-meta{font-size:12px;letter-spacing:.02em;color:#60472f}
.chart-main>.house-notice{margin-top:14px}
.cycle-titles{display:flex;flex-wrap:wrap;gap:3px 16px;margin:6px 0 9px;font:700 13px/1.5 var(--chart-font);color:var(--muted)}
.compare-periods{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0 0 8px;font:600 10px/1.5 var(--chart-font);color:var(--muted);text-align:left}
.compare-periods>span:first-child{flex-basis:100%}
.mini-grid:not(.house-mini) .mini-cell{aspect-ratio:1 / var(--cell-ratio);gap:5px}
.mini-base{font:16px/1 var(--number-font,Georgia,var(--chart-font));color:var(--black)}
.mini-annual{font:24px/1 var(--number-font,Georgia,var(--chart-font));color:var(--annual-color,var(--red))}
@media(min-width:761px){.chart-heading{max-width:none}}
@media(max-width:760px){.chart-heading{max-width:560px;padding:0 19px}#chartTitle{font-size:27px}}
@media(max-width:480px){.chart-heading-content{align-items:stretch;gap:10px}#chartTitle{width:100%}#chartTitle>span{font-size:20px}.period-badge{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;width:100%;margin:0;text-align:left}.chart-period-main{font-size:16px}.chart-period-meta{font-size:11px}}

/* Number typography is independent of labels and changes without rebuilding charts. */
.annual-number,.base-number,.house-star,.detail-number,.mini-cell,.compare-heading strong,.pair-digits{font-family:var(--number-font,Georgia,var(--chart-font))}

/* Keep compact annual-chart labels within their rows at every height/size setting. */
@supports(font-size:1cqw){
  .star-grid:not(.house-board){--star-label-space:0px}
  .star-grid.has-star-names:not(.house-board){--star-label-space:calc(clamp(8px,2cqw,13px) * 1.2 + 2px)}
  .star-grid:not(.house-board) .annual-group{gap:2px}
  .star-grid:not(.house-board) .annual-number{font-size:min(calc(clamp(22px,9.2cqw,62px) * var(--number-scale) * var(--cell-ratio)),calc((17.333cqw * var(--cell-ratio) - var(--star-label-space) - 1px) / .95))}
  .star-grid:not(.house-board) .base-number{font-size:min(calc(clamp(18px,5cqw,35px) * var(--number-scale) * var(--cell-ratio)),calc(9cqw * var(--cell-ratio)))}
  .star-grid:not(.house-board) .star-name{font-size:clamp(8px,2cqw,13px)}
  .star-grid.single-annual .annual-number,.star-grid.single-base .base-number{font-size:calc(clamp(22px,9.2cqw,62px) * var(--number-scale) * var(--cell-ratio))}
}
/* Touch devices keep readable form controls without changing desktop typography. */
@media(any-pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not(#yearInput),select{font-size:16px;min-height:44px}
  .brand-social-links a,.close-button{min-width:44px;min-height:44px}
}
.dialog-heading{position:sticky;top:0;z-index:1;background:#f4ead7}
@media(max-width:390px){.compare-tools{flex-wrap:wrap;justify-content:space-between}.compare-tools strong{order:-1;flex-basis:100%;text-align:center}}

/* Mode selection stays in the primary navigation on every screen size. */
.site-header{flex-wrap:wrap}
.site-header nav{min-width:0;max-width:100%}
.site-header nav [data-chart-mode].active{background:#fbf6e9;border-bottom-color:#8f6e3b;font-weight:600}
/* Single and nine-year charts are views within the selected chart mode. */
.chart-views{display:flex;width:max-content;max-width:calc(100% - 48px);margin:12px 24px 0;padding:3px;gap:3px;border:1px solid #b69a6b;border-radius:4px;background:#e1d3b9}
.chart-views button{min-height:38px;padding:6px 14px;font-size:12px;white-space:nowrap;color:#49382b}
.chart-views button[aria-pressed=true]{background:#fbf6e9;box-shadow:0 1px 3px #65472025;font-weight:600}
.chart-views button:hover{background:#eee3ce}
.chart-views+.chart-view{padding-top:12px}
.social-menu{position:relative}
#toggleSocial,.mobile-toolbar{display:none}
.bearing-entry{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px}
.bearing-entry .quiet{min-width:44px;min-height:44px;padding:8px}
.compass-content{text-align:center}
.compass-instruction{font-size:13px;color:var(--muted)}
.compass-readout{margin:12px auto 14px;padding:12px;border:1px solid var(--line);border-radius:4px;background:#fffaf0}
.compass-forward{display:block;font:28px/1 var(--serif);color:var(--accent)}
#compassDegree{display:block;font:52px/1.3 Georgia,var(--serif);font-variant-numeric:tabular-nums;color:#191817}
#compassBearing{font:16px/1.7 var(--serif);color:#49382b}
#compassStatus{font-size:12px;line-height:1.8;min-height:22px}
#compassAccuracy{margin-top:6px}
.compass-content .dialog-actions{justify-content:center;margin-top:15px}
.compass-content .dialog-actions button{min-height:44px}

/* Compact phone layout: one brand row, one navigation row, one tool row. */
@media(max-width:760px){
  .site-header{padding:4px 10px 0;gap:0;min-height:0;box-shadow:none}
  .brand-block{width:100%}
  .brand-line{flex-wrap:nowrap;justify-content:space-between;gap:6px;min-height:44px}
  .brand{font-size:18px;letter-spacing:.015em;gap:6px;white-space:nowrap}
  .brand-mark{font-size:22px}
  .motto{display:none}
  #toggleSocial{display:block;min-width:44px;min-height:44px;font:24px/1 Georgia,var(--serif);letter-spacing:2px}
  .brand-social-links{display:none;position:absolute;right:0;top:100%;z-index:10;margin:0;padding:6px;gap:0;border:1px solid #bfa984;border-radius:3px;background:#f4ecdc;box-shadow:0 5px 16px #49382b20}
  .social-open .brand-social-links{display:flex}
  .brand-social-links a{width:44px;height:44px}
  .site-header nav{gap:2px;width:100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav button{padding:8px 10px;min-height:44px;font-size:12px}
  .workspace{width:calc(100% - 12px);margin:6px auto 10px}
  .mobile-toolbar{display:flex;align-items:stretch;background:#f1e7d4;border-bottom:1px solid #bdab88}
  .mobile-toolbar>button{flex:0 0 44px;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border-radius:0;font-size:19px}
  .mobile-toolbar>.mobile-controls{flex:1 1 auto;width:auto;min-width:0;border:0;border-right:1px solid #cdbb97;padding:6px 10px;gap:7px;justify-content:space-between;background:transparent}
  .mobile-controls #mobileSummary{font:13px/1.3 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-controls .chevron{margin-left:0;font-size:14px;flex:none}
  .control-panel{padding:12px;gap:12px;grid-template-columns:1fr 1fr}
  .control-panel .panel-foot{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:12px;border-top:1px solid #cbb58e}
  .panel-foot #saveStatus{grid-column:1/-1}
  .control-panel .layer-controls{margin:0;border-top:1px solid #cbb58e}
  .layer-controls>summary{padding:10px 0}
  .year-label-row{margin-bottom:2px}
  .year-label-row .text-button{min-height:32px}
  .chart-view{padding:9px 6px 0}
  .chart-views{max-width:calc(100% - 20px);margin:6px 10px 0;padding:0;gap:0}
  .chart-views button{min-height:44px;padding:6px 12px}
  .chart-views+.chart-view{padding-top:9px}
  .chart-layout{gap:12px}
  .chart-heading{padding:0 19px}
  .chart-heading-content{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center}
  #chartTitle{font-size:22px;width:auto;line-height:1.15}
  #chartTitle>span{display:block;margin:2px 0 0;font-size:12px;line-height:1.35}
  .period-badge{width:auto;min-width:0;flex-direction:column;align-items:flex-end;gap:0;margin:0;text-align:right}
  .chart-period-main{font-size:14px;white-space:normal;line-height:1.45}
  .chart-period-meta{font-size:10px;line-height:1.5;letter-spacing:0}
  .board-compass{font-size:11px;padding:6px 0}
  .board-compass>span{display:none}
  #compassBottom{padding:6px 0}
  .house-template .board-body{margin:26px 19px}
  .house-axis{font-size:20px}
  .axis-top{top:-5px}.axis-bottom{top:calc(100% + 5px)}
  .inspector{padding:11px;margin-bottom:10px}
  .inspector-heading{padding-bottom:8px}
  .inspector h2{font-size:19px}
  .detail-layer{margin-top:10px}
  .detail-number{font-size:28px}
  .house-template .inspector{padding:10px}
  .compare-view,.guide-view,.pairs-view,.houses-view{padding:14px 10px}
  .page-heading{margin-bottom:14px}
  .page-heading h1,.pairs-page-heading h1{font-size:24px}
  .eyebrow{margin-bottom:3px}
  .compare-grid{gap:8px}.compare-card{padding:8px 6px}
  .dialog-heading{padding:8px 14px}
  .dialog-heading h2{font-size:20px}
  .dialog-content{padding:16px}
}

/* The three display presets share a compact heading and the existing paper palette. */
.house-axis{font-weight:700;font-size:24px}
@media(max-width:760px){
  #chartTitle{font-size:24px}
  #chartTitle>span{font-size:14px}
  .chart-period-main{font-size:15px;font-weight:700}
  .cycle-titles{gap:2px 10px;font-size:11px;margin:4px 0 6px}
  .house-axis{font-size:20px}
  .compare-grid:not(.house-comparison){grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare-heading{margin-bottom:5px}
  .compare-periods{font-size:10px;gap:1px 6px}
  .mini-annual{font-size:22px}.mini-base{font-size:15px}
}

/* Teacher reference: essential headings and numbers, with optional legends hidden. */
.reading-panel .chart-heading{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.reading-panel .chart-period-row{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:center;gap:16px;width:100%;font:700 18px/1.5 var(--chart-font);color:#191817}
.reading-panel .chart-period-row:has(.period-badge[hidden]){display:none}
.reading-panel .chart-period-main{font:inherit;white-space:nowrap}
.reading-panel .chart-period-row .period-badge{font:inherit;color:inherit}
.reading-panel .cycle-titles{justify-content:center;flex-wrap:nowrap;margin:0;font:inherit;color:inherit;white-space:nowrap}
.reading-panel .period-badge{align-items:center;justify-content:center;text-align:center;margin:0}
.reading-panel #chartTitle{width:auto;margin:0;font-size:26px;text-align:center;line-height:1.4}
.reading-panel #chartTitle>span{display:inline;margin-left:7px;font-size:20px}
.simple-chart .board-compass,.simple-chart .side-compass{display:none}
.simple-chart .board-body{display:block;position:relative;margin:20px 24px 28px}
.simple-chart .house-template .board-body{margin:38px 24px}
.simple-chart .star-grid:not(.house-board)>.palace{display:block}
.simple-chart .star-grid:not(.house-board) .annual-group{position:absolute;grid-area:auto;inset:0;transform:none;display:flex;align-items:center;justify-content:center}
.simple-chart .star-grid:not(.house-board) svg.annual-number{display:block;width:1em;height:1em;overflow:visible;flex:none;transform:none}
svg.annual-number text{font-family:inherit;font-size:100px;font-weight:400;fill:currentColor}
.simple-chart .star-grid:not(.house-board) .base-group{position:absolute;top:84%;bottom:auto;left:0;right:0;transform:translateY(-50%)}
.simple-chart .star-grid.single-base .base-group{top:50%}
.reading-panel .compare-card{display:flex;flex-direction:column}
.reading-panel .compare-periods{order:-1;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:baseline;gap:8px;text-align:center;width:100%;margin-bottom:4px;font-size:10px;white-space:nowrap}
.reading-panel .compare-periods>span:first-child{flex-basis:auto}
.reading-panel .compare-heading{width:100%;justify-content:center;gap:8px}
.reading-panel .mini-grid{width:100%}
@media(max-width:760px){
  .reading-panel .chart-heading{gap:5px}
  .reading-panel .chart-period-row{font-size:clamp(11px,3.58vw,14px);gap:10px}
  .reading-panel .compare-periods{font-size:8px;gap:5px}
  .reading-panel .house-comparison .compare-periods{font-size:10px}
  .reading-panel #chartTitle{font-size:22px}
  .reading-panel #chartTitle>span{font-size:16px}
  .simple-chart .board-body{margin:16px 19px 20px}
  .simple-chart .house-template .board-body{margin:30px 19px}
}

.reading-panel #chartTitle.period-title{font:700 19px/1.5 var(--chart-font);white-space:normal}
@media(max-width:760px){.reading-panel #chartTitle.period-title{font-size:16px}}

/* Keep comparison numerals anchored to the same points as the main chart. */
.mini-grid:not(.house-mini) .mini-cell{position:relative;display:block}
.mini-grid:not(.house-mini) .mini-annual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1}
.mini-grid:not(.house-mini) .mini-annual{transform:translateY(-.06em)}
.mini-grid:not(.house-mini) .mini-base{position:absolute;left:0;right:0;top:84%;transform:translateY(-50%)}
.mini-grid:not(.house-mini) .mini-cell:not(:has(.mini-annual)) .mini-base{top:50%}

@supports(font-size:1cqw){
  .mini-grid:not(.house-mini){container-type:inline-size}
  .mini-grid:not(.house-mini) .mini-annual{font-size:calc(11.333cqw * var(--cell-ratio) * var(--number-scale))}
  .mini-grid:not(.house-mini) .mini-base{font-size:calc(7.333cqw * var(--cell-ratio) * var(--number-scale))}
}

/* Separate the house heading, upper axis marker and grid. */
.reading-panel .house-template .board-body{margin-top:64px}
.house-template .axis-top{top:-16px}
@media(max-width:760px){
  .reading-panel .house-template .board-body{margin-top:54px}
  .house-template .axis-top{top:-13px}
}

/* Desktop charts and numerals grow with the available column width. */
@media(min-width:761px){
  @supports(font-size:1cqw){
    .star-grid:not(.house-board) .annual-number{font-size:min(calc(9.2cqw * var(--number-scale) * var(--cell-ratio)),calc((17.333cqw * var(--cell-ratio) - var(--star-label-space) - 1px) / .95))}
    .star-grid:not(.house-board) .base-number{font-size:min(calc(5cqw * var(--number-scale) * var(--cell-ratio)),calc(9cqw * var(--cell-ratio)))}
    .star-grid.single-annual .annual-number,.star-grid.single-base .base-number{font-size:calc(9.2cqw * var(--number-scale) * var(--cell-ratio))}
  }
}
/* Teacher's worksheet: a separate, read-only year reference. */
.hetu-view{padding:30px;max-width:1200px;margin:auto}
.cycle-reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.cycle-reference-card{min-width:0;border:1px solid #c3ac86;border-radius:3px;background:#fffaf0;overflow:hidden}
.cycle-reference-card h2{margin:0;padding:17px 16px;font-size:18px;line-height:1.6;background:#f3e8d4;color:#49382b;border-bottom:1px solid #c3ac86}
.cycle-reference-card table{border-collapse:collapse;width:100%;font-size:13px;color:#49382b}
.cycle-reference-card th,.cycle-reference-card td{padding:11px 16px;text-align:left;border-bottom:1px solid #e2d4bb;white-space:nowrap}
.cycle-reference-card th{font-size:11px;font-weight:600;color:#60472f;background:#faf2e3}
.cycle-reference-card tr:last-child td{border-bottom:0}
.cycle-reference-card td:first-child{font-variant-numeric:tabular-nums}
@media(max-width:1100px){.cycle-reference-grid{grid-template-columns:1fr;gap:18px}.cycle-reference-card th:first-child,.cycle-reference-card td:first-child{width:55%}}
@media(max-width:760px){.hetu-view{padding:14px 10px}.cycle-reference-card h2{padding:12px 14px;font-size:17px}.cycle-reference-card th,.cycle-reference-card td{padding:10px 14px}}

/* Balance the main chart against desktop height as well as column width. */
@media(min-width:761px){
  .chart-layout{--desktop-board-width:clamp(560px,72vh,940px);max-width:calc(var(--desktop-board-width) + 249px)}
}
@media(min-width:1550px){.chart-layout{max-width:calc(var(--desktop-board-width) + 280px)}}
@media(min-width:761px) and (max-width:1210px){.chart-layout{max-width:var(--desktop-board-width)}}

/* One type size and baseline for the paired Arabic numerals. */
.house-star .numeral-ink{display:block;width:1em;height:1em;overflow:visible;font-family:inherit;fill:currentColor}
.numeral-ink text{font-family:inherit;font-weight:400;font-size:100px}
/* A static, click-through watermark centered on the four internal intersections. */
.star-grid,.mini-grid{position:relative}
.chart-watermark{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:0}
.chart-watermark>svg{position:absolute;display:block;width:10%;aspect-ratio:1;height:auto;transform:translate(-50%,-50%);overflow:hidden;opacity:.12;filter:blur(1px)}
.guide-illustration{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.3fr);gap:32px;align-items:start}
.guide-chart-example{margin:28px 24px 0;min-width:0}
.guide-board-body{position:relative}
.guide-chart-example .star-grid{container-type:inline-size}
.guide-chart-example .palace{min-height:0;aspect-ratio:1 / var(--house-cell-ratio,.9);background:#fffefa}
.guide-illustration-copy .guide-two{gap:20px}
.guide-illustration-copy .guide-section{margin-bottom:20px}
.guide-illustration-copy .guide-number{font-size:36px}
@media(max-width:1050px){.guide-illustration{grid-template-columns:1fr;gap:20px}.guide-chart-example{width:calc(100% - 48px);max-width:390px;margin:20px auto}.guide-illustration-copy .guide-section{margin-bottom:24px}}

/* Keep the watermark beneath stars and grid edges. */
.star-grid,.mini-grid{background:#fffefa;isolation:isolate}
.star-grid>.palace,.mini-grid>.mini-cell{position:relative;z-index:1;background:transparent}

/* The year-cycle labels occupy two rows above the annual heading. */
.reading-panel .hetu-title{margin:2px 0 0;text-align:center;font:700 18px/1.5 var(--chart-font);color:#191817}
.reading-panel .compare-periods{display:flex;flex-direction:column;gap:2px;align-items:center}
.compare-cycle-row{display:flex;justify-content:center;align-items:baseline;gap:8px;max-width:100%}
.compare-hetu{display:block}
/* Chinese base numerals use a true medium face in the default number font. */
.base-number,.mini-base,.base-number .numeral-ink text,.reference-grid:not(.annual-ink){font-weight:500}
@media(max-width:760px){.reading-panel .hetu-title{font-size:clamp(11px,3.58vw,14px)}.compare-cycle-row{gap:5px}}