.annual{border:1px solid #cadedd;background:#edf5f1;border-radius:12px;padding:8px;margin-top:12px;min-height:0;flex:1;max-height:135px;overflow:auto}
.annual>small{text-align:center;font-weight:600;margin-bottom:6px}
.annual .stars{min-height:0!important;gap:4px 7px!important}
.annual .star{font-size:10px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.annual[style*="visibility:hidden"]{display:none}
.support-card{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #dfdacb;background:#f4f0e8;border-radius:18px;padding:22px;margin-top:24px}
.support-card h2{font-size:20px;margin-bottom:6px}.support-card p{font-size:14px;margin:0;color:#776955}.support-card button{white-space:nowrap}
.mobile-chart-hint{display:none}.mobile-jump{display:none}
@media(max-width:760px){
 input,select{font-size:16px;min-height:44px}button{min-height:44px}
 .site-header{height:auto;min-height:74px;flex-wrap:wrap;padding:12px 16px}.site-header nav{flex:1;justify-content:center}
 main{padding:20px 10px 30px}.input-panel{padding:16px}.form-row{gap:6px}.form-row select{padding:10px 3px}
 .mobile-jump{display:block;margin-top:10px;width:100%;background:white;color:var(--teal);font-weight:600}
 .mobile-chart-hint{display:block;font-size:12px;color:var(--muted);padding:8px 12px;margin:0;background:#edf5f1}
 .chart-toolbar{position:sticky;top:0;background:white;z-index:2}.chart-buttons{justify-content:space-between;width:100%}.chart-buttons button{min-width:38px;padding:8px}
 #chart-viewport{touch-action:pan-x pan-y;overscroll-behavior:auto;scrollbar-width:thin}
 .support-card{align-items:stretch;flex-direction:column;padding:18px}.support-card button{width:100%}
 .secondary-actions{gap:10px}.checks{justify-content:space-around}.feature-note{padding:12px}
 body.full .mobile-chart-hint{display:none}
}
@media print{.support-card,.mobile-jump,.mobile-chart-hint{display:none!important}.annual{overflow:visible}}
.support-dialog{text-align:center}.support-dialog>p{line-height:1.7}.support-qr{display:block;width:min(100%,320px);height:auto;margin:16px auto;border-radius:16px}.support-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px 0}.support-actions a{display:inline-flex;align-items:center;border-radius:12px;text-decoration:none}.support-dialog small{color:var(--muted);line-height:1.6}
.support-dialog .support-qr{aspect-ratio:1;height:auto;max-height:340px;object-fit:cover;object-position:center}
/* A4: 210 × 297 mm, margins 10 mm. Leave 1 mm for rounding. */
@page{size:A4 portrait;margin:10mm}
@media print{
 html,body{margin:0!important;padding:0!important;width:190mm!important;background:white!important;overflow:visible!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
 #app-panel{display:block!important;width:190mm!important;margin:0!important;padding:0!important;max-width:none!important}
 .workspace,.chart-panel{display:block!important;width:190mm!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:visible!important}
 #chart-viewport{width:190mm!important;height:276mm!important;max-height:none!important;overflow:visible!important;padding:0!important;margin:0!important}
 #chart-stage{width:190mm!important;height:276mm!important;overflow:visible!important;padding:0!important;margin:0!important;position:relative!important}
 :is(#chart,#print-chart){position:relative!important;inset:auto!important;transform:none!important;width:190mm!important;height:276mm!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;border:1px solid #8f9b96!important;box-sizing:border-box!important;break-inside:avoid!important;page-break-inside:avoid!important;font-size:11px!important}
 :is(#chart,#print-chart) article{padding:9px 7px 22px!important;min-height:0!important;min-width:0!important;overflow:hidden!important}
 :is(#chart,#print-chart) h3{font-size:12px!important;min-height:26px!important;margin-bottom:10px!important}
 :is(#chart,#print-chart) .mainstars{min-height:36px!important;margin-bottom:8px!important}
 :is(#chart,#print-chart) .mainstars .star{font-size:14px!important}
 :is(#chart,#print-chart) .star{font-size:11px!important;min-height:15px!important;white-space:normal!important;overflow-wrap:anywhere!important}
 :is(#chart,#print-chart) .stars{gap:3px 6px!important;min-height:0!important}
 :is(#chart,#print-chart) .annual{flex:0 1 auto!important;max-height:none!important;overflow:visible!important;margin-top:8px!important;padding:6px!important}
 :is(#chart,#print-chart) .annual .star{font-size:9px!important;min-height:12px!important}
 :is(#chart,#print-chart) .center{padding:24px 12px!important;gap:14px!important;min-height:0!important;font-size:12px!important}
 :is(#chart,#print-chart) .center table{font-size:11px!important}:is(#chart,#print-chart) .center td{padding:4px 5px!important}
 :is(#chart,#print-chart) .center .info-row{font-size:12px!important}:is(#chart,#print-chart) .center .signature{font-size:9px!important}
 :is(#chart,#print-chart) .age,:is(#chart,#print-chart) .month{font-size:10px!important}:is(#chart,#print-chart) .foot{font-size:16px!important}
 :is(#chart,#print-chart) .center .color-legend{font-size:9px!important;padding:6px 8px!important}
}

.secondary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.secondary-actions button{width:100%}
.printer-help{background:transparent;color:var(--teal);font-size:13px;width:100%;margin-top:8px}
.support-floating{position:fixed;right:20px;bottom:20px;z-index:20;border-radius:999px;background:var(--teal);color:white;padding:12px 18px;box-shadow:0 4px 18px #0003;font-weight:600}
#print-root{display:none}
@media(max-width:760px){.support-floating{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:10px 14px;font-size:13px}main{padding-bottom:85px}}
@media print{
 @page{size:A4 portrait;margin:10mm}
 html,body,body.full{width:190mm!important;height:auto!important;min-height:0!important;max-height:none!important;display:block!important;overflow:visible!important}
 body > :not(#print-root){display:none!important}
 #print-root{display:block!important;position:relative!important;width:190mm!important;height:265mm!important;margin:0!important;padding:0!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important}
 #print-chart{display:grid!important;position:relative!important;inset:auto!important;width:190mm!important;height:265mm!important;transform:none!important;margin:0!important;padding:0!important;overflow:hidden!important;border:1px solid #8f9b96!important;box-sizing:border-box!important}
 #print-chart button{min-height:0!important;padding:0!important;border:0!important;background:transparent!important;border-radius:0!important}
 #print-chart .annual .star{line-height:1.15!important}
}

.chart-primary-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}
#print{font-size:20px;font-weight:750;background:var(--teal);color:white;padding:13px 20px;min-height:50px}
#fullscreen{font-size:16px;font-weight:650;min-height:50px}
#toggle-controls{display:none}.support-header{display:none}
.zoom-slider{display:flex;align-items:center;flex:1;max-width:160px;margin:0}.zoom-slider input{width:100%;min-height:32px;accent-color:var(--teal);padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.support-floating,.support-header{background:linear-gradient(135deg,#f7c66c,#edaa45);color:#4e320b;border:1px solid #d89a38;font-weight:700;animation:support-glow 3.5s ease-in-out infinite}
@keyframes support-glow{0%,100%{box-shadow:0 3px 12px #c98d3526}50%{box-shadow:0 3px 18px #d69b4559,0 0 0 4px #f5c87524}}
@media(prefers-reduced-motion:reduce){.support-floating,.support-header{animation:none}}
body.full .support-floating,body.full .support-card{display:none}body.full .support-header{display:inline-flex;margin-left:auto}
body.full #toggle-controls{display:none}body.full #chart-viewport{height:calc(100vh - 150px);height:calc(100dvh - 150px)}
@media(max-width:760px){
 #app-panel .page-heading{display:none}.workspace{display:flex;flex-direction:column;gap:12px}.chart-panel{order:0;width:100%;margin:0 auto}.input-panel{order:1;display:none}body.controls-open .input-panel{display:block}
 #toggle-controls{display:inline-flex;align-items:center;gap:6px;font-size:13px;width:100%;justify-content:center}
 .chart-primary-actions{gap:8px}#print,#fullscreen{flex:1;white-space:nowrap;padding:10px;font-size:17px}#print{font-size:20px}
 .chart-toolbar{position:relative}.chart-buttons{justify-content:center;gap:8px}.zoom-slider{max-width:130px}
 #chart-viewport{width:100%;overflow:auto;max-height:80vh;margin:0 auto}
 body.full .chart-toolbar{position:sticky}.support-header{font-size:13px;min-height:40px;padding:8px 12px}body.full .support-header{margin:0;justify-content:center;width:100%}
}
@media print{.support-header,.support-floating{display:none!important}}

.secondary-actions #print{grid-column:1 / -1;font-size:20px}.interpretation-context p{max-width:850px;line-height:1.8;margin:16px 0}

/* Bright pearl and sapphire theme */
:root{--ink:#182c50;--teal:#3565b1;--deep:#234b8a;--cream:#f7f9ff;--line:#dee6f3;--muted:#6a7c99;--gold:#b9955b}
body{background:linear-gradient(135deg,#fcfdff,#eef4ff);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.site-header{background:#ffffffed;border-bottom-color:#e5ebf6}.site-header nav{background:#eff3fb}.site-header nav button[aria-selected=true]{color:#315ca2}
.input-panel,.chart-panel{background:#fff;border-color:#dce5f4;box-shadow:0 8px 30px #254e8810}
button:hover{background:#edf3ff}.primary,#print{background:linear-gradient(120deg,#4277c7,#315ba2);border-color:#3565b1;color:white;box-shadow:0 4px 12px #315ba21c}
input,select{background:#f8faff;border-color:#dce5f3;color:#203858}.feature-note,.mobile-chart-hint,.notice{background:#eef4ff;border-color:#dce7fb;color:#355580}
.annual{background:#f0f5ff;border-color:#d4e1f5}.support-card{background:linear-gradient(120deg,#fffaf0,#fff);border-color:#eadbbd}.support-card p{color:#7e7058}
.access-badge{background:#eef4ff;color:#315c9c;border-color:#dce7f8}.chart-toolbar{background:#fff}.culture-note{background:#eef4ff}.hero-art{border-color:#dae5f6;background:#fff}
.secondary-actions{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.secondary-actions #good-days,.secondary-actions #library{font-size:15px;font-weight:600;padding:12px 8px;min-height:50px;display:flex;align-items:center;justify-content:center}
.chart-buttons{flex-wrap:wrap}.chart-buttons #photo,.chart-buttons #fullscreen{min-height:44px;font-size:14px;padding:10px 12px}
.splash{background:radial-gradient(ellipse at 50% 25%,#fff 0,#f1f6ff 65%,#e8effa 100%);color:#244778;gap:12px}
.loading-art{width:min(90vw,680px);max-height:56vh}.loading-art svg{display:block;width:100%;height:auto;max-height:56vh}
.splash h1{font-size:clamp(28px,5vw,42px);margin:0}.splash p{color:#6a7c99;margin:0}.loading-caption{color:#7b8aa3;font-size:12px}
.loading-progress{height:3px;width:180px;background:#dfe8f7;border-radius:9px;overflow:hidden;margin:12px 0 0}.loading-progress span{display:block;background:#b9955b;width:100%;height:100%;transform-origin:left;animation:loading-fill 8s linear both}
.drawing-stroke{stroke-dasharray:70;stroke-dashoffset:70;animation:drawing-line 4s ease-in-out infinite}
@keyframes loading-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes drawing-line{0%{stroke-dashoffset:70}65%,100%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.drawing-stroke,.loading-progress span{animation:none}}
@media(max-width:760px){.chart-buttons #photo,.chart-buttons #fullscreen{flex:1}.chart-buttons .zoom-slider{order:2;flex:1;max-width:140px}.loading-art{width:96vw}.splash p{font-size:14px;padding:0 18px;text-align:center}}
@media print{body{background:white!important}.chart-panel{box-shadow:none!important}}
.support-dialog .support-qr{aspect-ratio:auto;max-height:none;object-fit:contain;width:min(100%,300px)}

/* Soft ivory, ink and antique brass */
:root{--ink:#283c3e;--teal:#4d686a;--deep:#334d50;--cream:#f6f5ef;--line:#dce1db;--muted:#77817c;--gold:#a18a62}
body{background:linear-gradient(130deg,#faf9f4,#eef1eb);color:var(--ink)}
.site-header{background:#fafbf8ed;border-color:#e1e4db}.brand{font-size:21px}.brand small{font-size:12px;letter-spacing:.015em}.site-header nav{background:#e9eee7}.site-header nav button[aria-selected=true]{color:#334d50}
.input-panel,.chart-panel{border-color:#dce1d8;background:#fffefa;box-shadow:0 8px 28px #334d500b}
.primary,#print{background:linear-gradient(120deg,#5a7575,#3c585b);border-color:#506b6d;box-shadow:0 4px 12px #334d5015;color:#fff}
button:hover{background:#e9eee7}input,select{background:#f7f8f2;border-color:#dce2d8;color:#334d50}
.feature-note,.notice,.mobile-chart-hint,.culture-note{background:#eef2e9;border-color:#dce4d5;color:#49605b}.annual{background:#f0f3eb;border-color:#dce4d5}
.access-badge{background:#edf1e8;color:#4d665d;border-color:#dce4d5}.chart-toolbar{background:#fffefa}
.support-card{background:linear-gradient(120deg,#f5f0e4,#fffefa);border-color:#e3dac7}.support-floating,.support-header{background:linear-gradient(135deg,#e4d1a7,#d5bd8f);border-color:#c6af83;color:#4c402a}
.hero-art{border-color:#dce1d8;background:#fffefa}.splash{background:radial-gradient(ellipse at 50% 25%,#fffefa,#f1f3eb 65%,#e8ede5);color:#334d50}.splash p,.loading-caption{color:#78847a}.loading-progress{background:#dde4d7}.loading-progress span{background:#a18a62}
.loading-art svg g[stroke="#b9c9e3"]{stroke:#b6c4b6}.loading-art svg g[stroke="#294e8a"]{stroke:#4d686a}.loading-art svg g[stroke="#cbd6e8"]{stroke:#c4cebf}
@media(max-width:760px){.brand{font-size:19px}.brand img{width:40px;height:40px}.brand small{font-size:11px}}

.intro-help{width:100%;margin:8px 0 14px;color:var(--teal);background:#f0f3eb;font-weight:600}.intro-guide section{margin-bottom:22px}.intro-guide h3{font-size:18px;color:var(--deep);margin-bottom:8px}.intro-guide p{line-height:1.75;margin-bottom:10px}.intro-preference{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:18px 0;cursor:pointer}.intro-preference input{width:20px;height:20px;min-height:20px;accent-color:var(--teal)}

/* Fixed cells: no inner scrollbars; all star groups fit the cell. */
:is(#chart,.about-preview) article{min-height:0;padding:10px 8px 24px}
:is(#chart,.about-preview) h3{min-height:22px;margin-bottom:9px}
:is(#chart,.about-preview) .mainstars{min-height:34px;margin-bottom:8px}
:is(#chart,.about-preview) .stars{min-height:0;gap:2px 8px}
:is(#chart,.about-preview) .star{font-size:11px;min-height:14px;line-height:1.25}
:is(#chart,.about-preview) .mainstars .star{font-size:15px;min-height:19px}
:is(#chart,.about-preview) .annual{flex:0 0 auto;min-height:0;max-height:none;overflow:visible;padding:6px;margin-top:8px}
:is(#chart,.about-preview) .annual .star{font-size:9px;min-height:11px;line-height:1.2}
.void-badge{position:absolute;transform:translate(-50%,-50%);z-index:3;min-width:68px;max-width:142px;padding:3px 8px;border-radius:3px;background:#f0f2f5;color:#151c19;font-size:12px;font-weight:700;text-align:center;line-height:1.25}
@media(max-width:760px){#chart-viewport{max-height:none}}
@media print{
 :is(#chart,#print-chart) .stars{gap:1px 5px!important}
 :is(#chart,#print-chart) h3{min-height:20px!important;margin-bottom:6px!important}
 :is(#chart,#print-chart) .mainstars{min-height:28px!important;margin-bottom:5px!important}
 :is(#chart,#print-chart) .star{font-size:9px!important;min-height:11px!important;line-height:1.2!important}
 :is(#chart,#print-chart) .mainstars .star{font-size:12px!important}
 :is(#chart,#print-chart) .annual{margin-top:5px!important;padding:4px!important;max-height:none!important;overflow:visible!important;flex:0 0 auto!important}
 :is(#chart,#print-chart) .annual .star{font-size:8px!important;min-height:9px!important;line-height:1.15!important}
 .void-badge{font-size:10px;min-width:56px;padding:2px 6px}
}

/* Contained chart, with scrollbar-free panning when zoomed. */
#chart-viewport{scrollbar-width:none;-ms-overflow-style:none;overflow:auto}
#chart-viewport::-webkit-scrollbar{display:none;width:0;height:0}
#chart-stage{box-sizing:border-box}
:is(#chart,.about-preview) .center{gap:14px;padding:30px 14px 38px;min-height:0}
:is(#chart,.about-preview) .center table{font-size:12px}
:is(#chart,.about-preview) .center td{padding:4px 6px}
:is(#chart,.about-preview) .center .signature{margin:2px 0 0;font-size:10px}
:is(#chart,.about-preview) .center .color-legend{flex-shrink:0;margin:0 0 12px;padding:6px 10px;font-size:9px;line-height:1.4;background:#eef2e9}
:is(#chart,.about-preview) .center .color-legend span{margin:0 5px}
:is(#chart,.about-preview) .foot{font-size:15px;letter-spacing:.5px;bottom:6px}
.void-badge{min-width:44px;max-width:110px;font-size:10px;padding:2px 5px;line-height:1.1;border-radius:3px}
@media print{
 :is(#chart,#print-chart) .center{gap:10px!important;padding:24px 12px 30px!important}
 :is(#chart,#print-chart) .center td{padding:3px 4px!important}
 :is(#chart,#print-chart) .center .color-legend{font-size:8px!important;padding:4px 7px!important;margin:0 0 10px!important}
 :is(#chart,#print-chart) .foot{font-size:12px!important}
 .void-badge{min-width:38px;max-width:90px;font-size:8px;padding:1px 4px}
}
/* Slightly larger chart text for on-screen reading. */
@media screen{
 :is(#chart,.about-preview) h3{font-size:15px}
 :is(#chart,.about-preview) .star{font-size:12px;min-height:15px}
 :is(#chart,.about-preview) .mainstars .star{font-size:16px;min-height:20px}
 :is(#chart,.about-preview) .annual .star{font-size:10px;min-height:12px}
 :is(#chart,.about-preview) .center table{font-size:13px}
 :is(#chart,.about-preview) .center .info-row{font-size:15px}
}

.weekday{color:#b3262e;font-weight:700;white-space:nowrap}
/* Mobile form remains visible without a disclosure control. */
@media(max-width:760px){
 .workspace .input-panel,body.controls-open .workspace .input-panel{display:block;order:0}
 .workspace .chart-panel{order:1}
 #toggle-controls,body.controls-open #toggle-controls{display:none}
 body.full .workspace .input-panel{display:none}
}

/* Bronze drum watermark: independent of star element colors. */
:is(#chart,.about-preview){isolation:isolate;background:#fffef9}
:is(#chart,.about-preview)::before{content:"";position:absolute;inset:0;z-index:-1;background:url('/drum-background.svg') center/100% 100% no-repeat;opacity:.10;pointer-events:none}
:is(#chart,.about-preview) .center{background:transparent}
.print-background-option{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-top:14px}.print-background-option input{width:18px;height:18px;min-height:18px;accent-color:var(--teal)}
@media print{
 :is(#chart,#print-chart)::before{display:none!important}
 #print-chart.with-print-background::before{display:block!important;opacity:.10!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
/* Extend the bronze drum decoration across the entire chart. */
:is(#chart,.about-preview)::before{background-size:cover;opacity:.13}

:is(#chart,.about-preview)::before{background-size:50% auto;background-repeat:repeat;opacity:.11}

/* 60% page/surface, 30% secondary panels, 10% action accents. */
:root,[data-theme="ivory"]{--theme-main:#f7f5ee;--theme-surface:#fffef9;--theme-secondary:#e3eae1;--theme-accent:#526e65;--theme-ink:#293e37;--theme-muted:#697970;--theme-line:#d4ddd2;--theme-glow:#b7c3ac}
[data-theme="ocean"]{--theme-main:#f2f6fb;--theme-surface:#fbfdff;--theme-secondary:#dae6f2;--theme-accent:#35618d;--theme-ink:#233e58;--theme-muted:#667d92;--theme-line:#cbdbe9;--theme-glow:#a9c9e7}
[data-theme="rose"]{--theme-main:#faf4ef;--theme-surface:#fffaf7;--theme-secondary:#efddd8;--theme-accent:#925b62;--theme-ink:#4c3638;--theme-muted:#8a7273;--theme-line:#e6cfca;--theme-glow:#dfb4b4}
[data-theme="forest"]{--theme-main:#eff5f0;--theme-surface:#f9fcf9;--theme-secondary:#d7e6dc;--theme-accent:#326e56;--theme-ink:#234738;--theme-muted:#617d6e;--theme-line:#c7dacd;--theme-glow:#9fc8b2}
[data-theme="night"]{--theme-main:#202a30;--theme-surface:#29353b;--theme-secondary:#35464e;--theme-accent:#cbb78c;--theme-ink:#eef0e9;--theme-muted:#b1c0c4;--theme-line:#46585f;--theme-glow:#8c7e61}
html[data-theme]{--ink:var(--theme-ink);--muted:var(--theme-muted);--line:var(--theme-line);--cream:var(--theme-main);--teal:var(--theme-accent);--deep:var(--theme-accent)}
html[data-theme] body{background:var(--theme-main);color:var(--theme-ink)}
html[data-theme] .site-header,html[data-theme] .input-panel,html[data-theme] .chart-toolbar,html[data-theme] dialog{background:var(--theme-surface);border-color:var(--theme-line);color:var(--theme-ink)}
html[data-theme] .site-header nav,html[data-theme] input,html[data-theme] select,html[data-theme] .feature-note,html[data-theme] .notice,html[data-theme] .culture-note,html[data-theme] .support-card,html[data-theme] .mobile-chart-hint,html[data-theme] .intro-help{background:var(--theme-secondary);color:var(--theme-ink);border-color:var(--theme-line)}
html[data-theme] button{background:var(--theme-surface);color:var(--theme-ink);border-color:var(--theme-line)}
html[data-theme] button:hover{background:var(--theme-secondary)}
html[data-theme] .primary,html[data-theme] #print,html[data-theme] .support-floating,html[data-theme] .support-header{background:var(--theme-accent);color:#fff;border-color:var(--theme-accent)}
html[data-theme="night"] .primary,html[data-theme="night"] #print,html[data-theme="night"] .support-floating,html[data-theme="night"] .support-header{color:#202a30}
html[data-theme] .support-card p,html[data-theme] .storage-note,html[data-theme] .site-header nav button[aria-selected=true]{color:var(--theme-ink)}
html[data-theme] .access-badge{background:var(--theme-secondary);color:var(--theme-accent);border-color:var(--theme-line)}
.theme-picker{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap;margin:0}.theme-picker select{font-size:13px;padding:8px 10px;min-height:36px;width:auto}
@media(max-width:1000px){.header-note{display:none}}
@media(max-width:760px){.theme-picker{width:100%;justify-content:center}.theme-picker select{flex:1;max-width:240px}}
@media print{html[data-theme] body{background:white!important;color:#202421!important}}

[data-theme="night"]{--theme-main:#131a27;--theme-surface:#1d293c;--theme-secondary:#2b3c54;--theme-accent:#e4ba68;--theme-ink:#f4f1e9;--theme-muted:#bbc6d7;--theme-line:#3f526d;--theme-glow:#b78836}
[data-theme="sunrise"]{--theme-main:#fffaf5;--theme-surface:#ffffff;--theme-secondary:#ffe1c2;--theme-accent:#c93426;--theme-ink:#49281d;--theme-muted:#886454;--theme-line:#efcbae;--theme-glow:#ffb565}
[data-theme="coral"]{--theme-main:#fff8f7;--theme-surface:#ffffff;--theme-secondary:#ffd8d2;--theme-accent:#c12e4d;--theme-ink:#512b36;--theme-muted:#8d6370;--theme-line:#efbdc6;--theme-glow:#f58a9e}
[data-theme="sapphire"]{--theme-main:#f6f9ff;--theme-surface:#ffffff;--theme-secondary:#d3e4ff;--theme-accent:#2458c6;--theme-ink:#213759;--theme-muted:#627795;--theme-line:#bad0ef;--theme-glow:#7fa9f4}
[data-theme="violet"]{--theme-main:#faf7ff;--theme-surface:#ffffff;--theme-secondary:#e3d8fa;--theme-accent:#7044b2;--theme-ink:#3a2b54;--theme-muted:#7b688f;--theme-line:#d0bce8;--theme-glow:#b697e1}
html[data-theme] .input-panel{background:var(--theme-secondary)}
html[data-theme] input,html[data-theme] select{background:var(--theme-surface)}
html[data-theme] .gender span{background:var(--theme-surface);color:var(--theme-ink);border:1px solid var(--theme-line)}
html[data-theme] .gender input:checked+span{background:var(--theme-accent);color:white;border-color:var(--theme-accent)}
html[data-theme="night"] .gender input:checked+span{color:#131a27}
html[data-theme] :is(#chart,#print-chart,.about-preview) button.star{background:transparent!important;border:0!important}
html[data-theme] :is(#chart,#print-chart,.about-preview){color:#202421;--ink:#202421;--muted:#697970}
html[data-theme] .chart-footnote{color:var(--theme-muted);background:var(--theme-surface)}
html[data-theme] .site-header nav button[aria-selected=true]{background:var(--theme-accent);color:white}
html[data-theme="night"] .site-header nav button[aria-selected=true]{color:#131a27}

/* Quiet countryside, a moving drawing hand and rotating bagua. */
.distant-landscape{opacity:.38;filter:blur(.65px)}
.village-distance{opacity:.50}
.sage-drawing-hand{transform-box:fill-box;transform-origin:0% 0%;animation:sage-draw 1.8s ease-in-out infinite}
.spinning-bagua{transform-box:fill-box;transform-origin:center;animation:bagua-turn 14s linear infinite}
@keyframes sage-draw{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes bagua-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sage-drawing-hand,.spinning-bagua{animation:none}}
/* Rotate around the fixed center of the bagua, in SVG coordinates. */
.spinning-bagua{transform-box:view-box;transform-origin:514px 413px;animation:bagua-turn 14s linear infinite}
@media(prefers-reduced-motion:reduce){.spinning-bagua{animation:none}}

.bagua-clock{transform-box:view-box;transform-origin:0px 0px;animation:bagua-turn 14s linear infinite}
@media(prefers-reduced-motion:reduce){.bagua-clock{animation:none}}

.village-distance{opacity:.78}
.areca-leaves{transform-box:fill-box;transform-origin:50% 70%;animation:village-sway 3.8s ease-in-out infinite}
.rice-stems{transform-box:fill-box;transform-origin:center bottom;animation:village-sway 2.8s ease-in-out infinite alternate}
.buffalo-head{transform-box:fill-box;transform-origin:left center;animation:buffalo-graze 4s ease-in-out infinite}
.buffalo-tail{transform-box:fill-box;transform-origin:right top;animation:tail-swish 1.9s ease-in-out infinite}
.thatched-roof{transform-box:fill-box;transform-origin:center bottom;animation:roof-breeze 4.5s ease-in-out infinite}
.village-cloud{animation:cloud-drift 8s ease-in-out infinite alternate}
@keyframes village-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes buffalo-graze{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(12deg)}}
@keyframes tail-swish{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg)}}
@keyframes roof-breeze{0%,100%{transform:skewX(-.5deg)}50%{transform:skewX(.5deg)}}
@keyframes cloud-drift{to{transform:translateX(16px)}}
@media(prefers-reduced-motion:reduce){.areca-leaves,.rice-stems,.buffalo-head,.buffalo-tail,.thatched-roof,.village-cloud{animation:none}}