:root{--color-canvas:#fbf6ec;--color-panel:#fffdf7;--color-type:#2d2416;--color-dim:#6e604b;--color-key:#a16207;--color-accent:#1e40af;--color-rule:#eadfc8;--color-round:4px;--color-measure:1200px;--color-font-head:'Space Grotesk',system-ui,sans-serif;--color-f2:'Inter',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--color-canvas);color:var(--color-type);font:16px/1.78 var(--color-f2)}
img{max-width:100%;height:auto} a{color:var(--color-key);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--color-font-head);line-height:1.2;letter-spacing:-.01em;color:var(--color-type)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.pg-column{max-width:var(--color-measure);margin:0 auto;padding:0 1rem} .pg-body-wrap{max-width:var(--color-measure);margin:0 auto;padding:1.2rem 1rem 3rem}
.pg-to-content{position:absolute;left:-9999px} .pg-to-content:focus{left:1rem;top:1rem;background:var(--color-panel);padding:.5rem;z-index:99}
.pg-topbar__in{max-width:var(--color-measure);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.pg-wordmark{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--color-font-head);color:var(--color-type);text-decoration:none}
.pg-menu{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .pg-menu a{color:var(--color-type);text-decoration:none;font-weight:600;font-size:.95rem}
.pg-banner{background:var(--color-canvas);border-bottom:1px solid var(--color-rule)} .pg-topbar__in{flex-direction:column;gap:.4rem;padding:.9rem 1rem}  .pg-menu a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.pg-page-top{margin:1rem 0 1.4rem} .pg-intro-text{font-size:1.12rem;max-width:46em;color:var(--color-dim)} .pg-page-top{background:var(--color-key);color:#fff;padding:2.4rem 1.6rem;border-radius:var(--color-round)} .pg-page-top h1,.pg-page-top .pg-intro-text{color:#fff} .pg-page-top .pg-intro-text{opacity:.92}
.pg-workbench{margin:1.4rem 0 2rem}
.pg-remark{margin:1.4em 0;padding:.9em 1.1em;background:var(--color-panel);border-left:4px solid var(--color-accent);border-radius:0 var(--color-round) var(--color-round) 0}
.pg-formula-box{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--color-panel);border:1px dashed var(--color-key);border-radius:var(--color-round);overflow-x:auto}
.pg-tbl-box{margin:1.2em 0;overflow-x:auto;border:1px solid var(--color-rule);border-radius:var(--color-round);background:var(--color-panel)}
.pg-tbl{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .pg-tbl th,.pg-tbl td{padding:.5em .75em;border-bottom:1px solid var(--color-rule);text-align:left}
.pg-tbl thead th{background:color-mix(in srgb,var(--color-rule) 60%,var(--color-panel))}
ol.pg-procedure{padding-left:1.3em} ol.pg-procedure>li{margin:.5em 0}
.pg-figure{margin:1.6em 0;text-align:center} .pg-figure img{width:100%;max-width:720px;border-radius:var(--color-round);border:1px solid var(--color-rule);background:#fff} .pg-figure figcaption{font-size:.9em;color:var(--color-dim)}
.pg-more-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.pg-guide-card{display:block;padding:1.1rem;background:var(--color-panel);border-radius:var(--color-round);border:1px solid var(--color-rule);border-top:4px solid var(--color-key);color:var(--color-type);text-decoration:none}
.pg-guide-card b{display:block;font-family:var(--color-font-head);margin-bottom:.35rem} .pg-guide-card span{color:var(--color-dim);font-size:.92rem} .pg-guide-card:hover{border-color:var(--color-key)}
.pg-guide-card--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .pg-guide-card--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--color-type) 14%,transparent)}
.pg-link-card__img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .pg-read__txt{display:block;padding:1rem 1.1rem 1.1rem} .pg-read__txt>span{display:block}
.pg-blist a,.pg-brow,.pg-post__kicker{background:none!important}
.pg-item__meta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--color-key)}
.pg-more-links--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .pg-more-links--feat>.pg-guide-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .pg-more-links--feat>.pg-guide-card:first-child b{font-size:1.35rem}
.pg-blist{display:grid;gap:1rem;margin:1.2em 0} .pg-brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--color-panel);border:1px solid var(--color-rule);border-radius:var(--color-round);overflow:hidden;color:var(--color-type);text-decoration:none}
.pg-brow .pg-link-card__img{height:100%;aspect-ratio:auto;min-height:126px} .pg-brow b{display:block;font-family:var(--color-font-head);font-size:1.12rem;margin-bottom:.3rem} .pg-brow .pg-read__txt>span{color:var(--color-dim);font-size:.93rem} .pg-brow:hover{border-color:var(--color-key)}
.pg-blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .pg-blist--min li{counter-increment:bl;border-top:1px solid var(--color-rule)} .pg-blist--min li:last-child{border-bottom:1px solid var(--color-rule)}
.pg-blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--color-type);text-decoration:none} .pg-blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--color-font-head);color:var(--color-key)}
.pg-blist--min b{font-family:var(--color-font-head);font-size:1.15rem} .pg-blist--min span{color:var(--color-dim);font-size:.93rem} .pg-blist--min a:hover b{color:var(--color-key)}
.pg-post__head--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--color-round);overflow:hidden} .pg-post__head--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.pg-post__ov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .pg-post__ov h1,.pg-post__ov .pg-post__meta,.pg-post__ov .pg-post__kicker{color:#fff}
.pg-post__head--band{background:var(--color-key);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--color-round)} .pg-post__head--band h1,.pg-post__head--band .pg-post__meta,.pg-post__head--band .pg-post__kicker{color:#fff}
.pg-post__head--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .pg-post__head--split .pg-post__cover{margin:0}
.pg-contents--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .pg-contents--chips li{margin:0} .pg-contents--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--color-rule);border-radius:999px;background:var(--color-canvas);text-decoration:none;font-size:.88rem}
.pg-contents--rail{background:none;border:0;border-left:3px solid var(--color-accent);border-radius:0;padding:.2rem 0 .2rem 1rem}
.pg-langs--globe summary{display:flex;align-items:center;gap:.35rem} .pg-langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .pg-langpills a{padding:.25rem .7rem;border:1px solid var(--color-rule);border-radius:999px;text-decoration:none} .pg-langpills a[aria-current]{background:var(--color-key);border-color:var(--color-key);color:#fff}
@media (max-width:700px){.pg-more-links--feat{grid-template-columns:1fr} .pg-more-links--feat>.pg-guide-card:first-child{display:flex} .pg-brow{grid-template-columns:1fr} .pg-brow .pg-link-card__img{min-height:0;aspect-ratio:1200/630} .pg-post__head--split{grid-template-columns:1fr} .pg-post__ov{position:static;background:var(--color-key);padding:1.2rem} .pg-post__head--overlay>img{min-height:0}}
.pg-post{max-width:48rem;margin:0 auto} .pg-post__head{margin:.6rem 0 1.2rem} .pg-post__head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.pg-post__kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-key);text-decoration:none}
.pg-upd{color:var(--color-dim);font-size:.9rem;margin:2rem 0 0} .pg-sign{font-style:italic;color:var(--color-dim)} .pg-post__meta{color:var(--color-dim);font-size:.92rem;margin:0} .pg-post__cover{margin:0 0 1.6rem} .pg-post__cover img{display:block;width:100%;height:auto;border-radius:var(--color-round)}
.pg-post .pg-intro-text{font-size:1.2rem;color:var(--color-type)} .pg-post .pg-intro-text::first-letter{font-family:var(--color-font-head);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--color-key)}
.pg-post .pg-contents--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--color-panel);border:1px solid var(--color-rule);border-left:4px solid var(--color-key);border-radius:var(--color-round);font-size:.95rem}
.pg-contents--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .pg-contents--post li{margin:.2rem 0}
.pg-post h3{color:var(--color-key)} .pg-post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--color-accent);font-size:1.1em}
.pg-answers h3{font-size:1.05rem;margin-top:1.3em}
.pg-path{font-size:.88rem;color:var(--color-dim);margin:.4rem 0 1rem} .pg-path a{color:var(--color-dim)}
.pg-try-it{margin:2.4rem 0;padding:1.4rem;background:var(--color-panel);border-radius:var(--color-round);border:1px solid var(--color-rule);border-top:4px solid var(--color-key);text-align:center}
.pg-pill-btn{display:inline-block;padding:.7em 1.4em;background:var(--color-key);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.pg-bottom{border-top:1px solid var(--color-rule);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--color-dim);background:var(--color-panel)}
.pg-bottom nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .pg-bottom a{color:var(--color-dim)} .pg-bottom{text-align:center} .pg-bottom nav{justify-content:center}
.pg-block>h2{border-top:2px solid var(--color-rule);padding-top:1rem}
.pg-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:2.4rem;align-items:start} .pg-contents{position:sticky;top:5rem;font-size:.9rem;border-left:2px solid var(--color-rule);padding-left:1rem} .pg-contents ol{list-style:none;padding:0;margin:.4rem 0 0} .pg-contents li{margin:.35rem 0} .pg-contents a{text-decoration:none;color:var(--color-dim)} .pg-contents a:hover{color:var(--color-key)} .pg-layout>*{min-width:0} @media(max-width:900px){.pg-layout{grid-template-columns:1fr} .pg-contents:not(.pg-contents--post){display:none}}
.pg-langs{position:relative} .pg-langs summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--color-rule);border-radius:999px;font-size:.85rem}
.pg-lang-menu__list{position:absolute;right:0;top:120%;background:var(--color-panel);border:1px solid var(--color-rule);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.pg-lang-menu__list a{padding:.3rem .5rem;text-decoration:none;color:var(--color-type)} .pg-lang-menu__list a[aria-current]{font-weight:700;color:var(--color-key)}
.pg-codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .pg-codes a{text-decoration:none;color:var(--color-dim);padding:.1rem .3rem;border-radius:4px} .pg-codes a[aria-current]{color:var(--color-key);background:color-mix(in srgb,var(--color-key) 12%,transparent)}
[data-unit]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-unit]:empty{margin:0}
[data-unit="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--color-panel)}
[data-unit="sidebar_left"],[data-unit="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-unit="sidebar_left"]{left:12px} [data-unit="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-unit="sidebar_left"],[data-unit="sidebar_right"]{display:none}}
.pg-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--color-dim)}
.pg-pill-btn{background:transparent;color:var(--color-key);border:2px solid var(--color-key);border-radius:var(--color-round)} .pg-pill-btn:hover{background:var(--color-key);color:#fff}
.pg-tbl th,.pg-tbl td{border:1px solid var(--color-rule)} .pg-tbl thead th{background:var(--color-key);color:#fff}
.pg-block a:not(.pg-pill-btn):not(.pg-guide-card){text-decoration:none;font-weight:600} .pg-block a:not(.pg-pill-btn):not(.pg-guide-card):hover{text-decoration:underline}
.pg-page-top--art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;text-align:left} .pg-page-top--art .pg-art{width:170px;height:170px;display:grid;place-items:center} .pg-art svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--color-key) 35%,transparent))} .pg-art--ring{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--color-accent) 30%,transparent) 0 38%,transparent 39% 52%,color-mix(in srgb,var(--color-key) 18%,transparent) 53% 66%,transparent 67%)} .pg-art--ring svg{width:56%;height:56%} @media(max-width:700px){.pg-page-top--art{grid-template-columns:1fr} .pg-page-top--art .pg-art{display:none}}
@media (max-width:640px){.pg-topbar__in{justify-content:center} .pg-menu{justify-content:center}}

/* =================================================================
   Zodiac Chart tool — astronomical-clock look, site tokens only
   ================================================================= */
.zc-app {
    --zc-fire: color-mix(in srgb, var(--color-key) 42%, var(--color-panel));
    --zc-earth: color-mix(in srgb, var(--color-dim) 34%, var(--color-panel));
    --zc-air: color-mix(in srgb, var(--color-accent) 20%, var(--color-panel));
    --zc-water: color-mix(in srgb, var(--color-accent) 46%, var(--color-panel));
    --zc-card: color-mix(in srgb, var(--color-key) 30%, var(--color-panel));
    --zc-fix: color-mix(in srgb, var(--color-accent) 32%, var(--color-panel));
    --zc-mut: color-mix(in srgb, var(--color-dim) 30%, var(--color-panel));
    --zc-pos: color-mix(in srgb, var(--color-key) 30%, var(--color-panel));
    --zc-neg: color-mix(in srgb, var(--color-accent) 30%, var(--color-panel));
    --zc-soft: color-mix(in srgb, var(--color-rule) 55%, var(--color-panel));
    --zc-gild: color-mix(in srgb, var(--color-key) 70%, var(--color-type));
    color: var(--color-type);
    font-family: var(--color-f2);
    color-scheme: inherit;
    line-height: 1.5;
    position: relative;
    min-width: 0;
}
.zc-app *, .zc-app *::before, .zc-app *::after { box-sizing: border-box; }
.zc-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zc-app [hidden] { display: none !important; }
.zc-app button { font: inherit; color: inherit; }
.zc-app :focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 2px; }

/* ---------- finder form ---------- */
.zc-find {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-rule);
    border-radius: var(--color-round);
    padding: 20px 20px 18px;
    box-shadow: inset 0 0 0 4px var(--color-panel), inset 0 0 0 5px var(--zc-soft);
}
.zc-find__head { margin-bottom: 14px; }
.zc-find__title { font-family: var(--color-font-head); font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; letter-spacing: .01em; }
.zc-find__hint { margin: 0; color: var(--color-dim); font-size: .95rem; max-width: 62ch; }
.zc-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 12px 14px; }
.zc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.zc-label { font-weight: 600; font-size: .9rem; }
.zc-opt { font-weight: 400; color: var(--color-dim); }
.zc-input {
    width: 100%; min-height: 44px; padding: 9px 12px;
    font: inherit; font-size: 1rem; color: var(--color-type);
    background: var(--color-canvas); border: 1px solid var(--color-rule); border-radius: var(--color-round);
    color-scheme: inherit;
}
.zc-input:hover { border-color: color-mix(in srgb, var(--color-key) 45%, var(--color-rule)); }
.zc-input:focus { outline: none; border-color: var(--color-key); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-key) 22%, transparent); }
.zc-input[aria-invalid="true"] { border-color: var(--color-key); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-key) 30%, transparent); }
.zc-input:disabled { opacity: .55; }
.zc-input::placeholder { color: var(--color-dim); opacity: .8; }
.zc-combo { position: relative; }
.zc-city-list {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow: auto;
    background: var(--color-panel); border: 1px solid var(--color-rule); border-radius: var(--color-round);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-type) 18%, transparent);
}
.zc-city-opt, .zc-city-none { padding: 8px 10px; border-radius: var(--color-round); cursor: pointer; display: flex; flex-direction: column; }
.zc-city-none { cursor: default; color: var(--color-dim); }
.zc-city-opt:hover, .zc-city-opt--hi { background: color-mix(in srgb, var(--color-key) 14%, var(--color-panel)); }
.zc-city-opt__n { font-weight: 600; }
.zc-city-opt__c { font-size: .82rem; color: var(--color-dim); }
.zc-zone { margin: 10px 0 0; font-size: .88rem; color: var(--color-dim); min-height: 1.3em; overflow-wrap: anywhere; }
.zc-linkbtn {
    background: none; border: 0; padding: 4px 0; margin-top: 2px; min-height: 36px;
    color: var(--color-accent) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .9rem; text-align: left;
}
.zc-manual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin-top: 8px; padding: 12px; border: 1px dashed var(--color-rule); border-radius: var(--color-round); }
.zc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.zc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 10px 22px; border-radius: 999px; cursor: pointer;
    font-weight: 700; letter-spacing: .01em;
    background: var(--color-key); color: var(--color-panel) !important; border: 1px solid var(--color-key);
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.zc-btn:hover { background: color-mix(in srgb, var(--color-key) 86%, var(--color-type)); box-shadow: 0 3px 10px color-mix(in srgb, var(--color-key) 30%, transparent); }
.zc-btn:active { transform: translateY(1px); }
.zc-btn--ghost { background: transparent; color: var(--color-type) !important; border-color: var(--color-rule); font-weight: 600; }
.zc-btn--ghost:hover { background: color-mix(in srgb, var(--color-key) 10%, var(--color-panel)); box-shadow: none; }
.zc-err {
    margin: 12px 0 0; padding: 10px 12px; border-radius: var(--color-round);
    background: color-mix(in srgb, var(--color-key) 13%, var(--color-panel)); border-left: 4px solid var(--color-key); font-weight: 600;
}

/* ---------- finder result ---------- */
.zc-result {
    margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start;
    padding: 20px; border-radius: var(--color-round);
    background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-key) 16%, var(--color-panel)), var(--color-panel) 60%);
    border: 1px solid color-mix(in srgb, var(--color-key) 40%, var(--color-rule));
}
.zc-result--in { animation: zc-rise .45s ease-out both; }
@keyframes zc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.zc-res__glyphs { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.zc-res__glyph {
    display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
    font-family: var(--color-font-head); font-size: 3rem; line-height: 1; color: var(--zc-gild);
    background: var(--color-panel); border: 2px solid var(--zc-gild);
    box-shadow: 0 0 0 5px var(--color-panel), 0 0 0 6px color-mix(in srgb, var(--zc-gild) 45%, transparent);
}
.zc-res__glyph--a, .zc-res__glyph--b { width: 64px; height: 64px; font-size: 2.1rem; }
.zc-res__glyph--b { color: var(--color-accent); border-color: var(--color-accent); }
.zc-res__body > p { margin: 0 0 6px; }
.zc-res__kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-dim); font-weight: 700; }
.zc-res__sign { font-family: var(--color-font-head); font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 700; line-height: 1.1; }
.zc-res__main { font-size: 1.05rem; font-weight: 600; }
.zc-res__hint, .zc-res__period, .zc-res__sun, .zc-res__zone { color: var(--color-dim); font-size: .95rem; }
.zc-res__fixed, .zc-res__warn {
    padding: 8px 10px; border-radius: var(--color-round); font-size: .93rem;
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-panel)); border-left: 3px solid var(--color-accent);
}
.zc-res__warn { background: color-mix(in srgb, var(--color-key) 12%, var(--color-panel)); border-left-color: var(--color-key); }
.zc-res__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.zc-strip { display: block; width: 100%; max-width: 420px; height: auto; margin: 10px 0 4px; overflow: visible; }
.zc-strip__bar { stroke: var(--color-rule); stroke-width: 1; }
.zc-strip__bar--el0 { fill: var(--zc-fire); } .zc-strip__bar--el1 { fill: var(--zc-earth); }
.zc-strip__bar--el2 { fill: var(--zc-air); } .zc-strip__bar--el3 { fill: var(--zc-water); }
.zc-strip__tick { stroke: var(--color-dim); stroke-width: 1; }
.zc-strip__edge { stroke: var(--color-type); stroke-width: 2; }
.zc-strip__lab { font-size: 11px; fill: var(--color-dim); font-family: var(--color-f2); }
.zc-strip__sun { fill: var(--color-panel); stroke: var(--zc-gild); stroke-width: 2.5; }
.zc-strip__sung { font-size: 12px; fill: var(--zc-gild); }
.zc-strip__deg { font-size: 11px; font-weight: 700; fill: var(--color-type); font-family: var(--color-f2); }

/* ---------- tabs ---------- */
.zc-tabs { display: flex; gap: 4px; margin: 22px 0 0; border-bottom: 2px solid var(--color-rule); overflow-x: auto; scrollbar-width: thin; }
.zc-tab {
    flex: 0 0 auto; min-height: 44px; padding: 10px 16px; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: var(--color-round) var(--color-round) 0 0;
    font-family: var(--color-font-head); font-weight: 600; color: var(--color-dim) !important; margin-bottom: -2px;
}
.zc-tab:hover { color: var(--color-type) !important; background: color-mix(in srgb, var(--color-key) 8%, transparent); }
.zc-tab[aria-selected="true"] { color: var(--color-type) !important; background: var(--color-panel); border-color: var(--color-rule); border-bottom: 2px solid var(--color-panel); box-shadow: inset 0 3px 0 var(--color-key); }
.zc-panel { padding: 18px 0 4px; }

/* ---------- reference wheel ---------- */
.zc-ov { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.zc-ov__legend { float: left; padding: 0; margin-right: 6px; font-weight: 600; font-size: .9rem; }
.zc-ov__opt { position: relative; cursor: pointer; }
.zc-ov__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zc-ov__opt span {
    display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--color-rule); background: var(--color-panel); font-size: .9rem; font-weight: 600;
}
.zc-ov__opt input:checked + span { background: var(--color-type); color: var(--color-panel); border-color: var(--color-type); }
.zc-ov__opt input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent); outline-offset: 2px; }
.zc-wheelbox { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.zc-wheelwrap { min-width: 0; }
.zc-wheel { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; overflow: visible; touch-action: manipulation; }
.zc-w-rim { fill: var(--color-panel); stroke: var(--zc-gild); stroke-width: 3; }
.zc-sec { cursor: pointer; outline: none; }
.zc-sec__bg { fill: var(--color-panel); stroke: var(--color-rule); stroke-width: 1; transition: fill .25s ease, opacity .25s ease; }
.zc-wheel[data-ov="element"] .zc-sec[data-el="0"] .zc-sec__bg { fill: var(--zc-fire); }
.zc-wheel[data-ov="element"] .zc-sec[data-el="1"] .zc-sec__bg { fill: var(--zc-earth); }
.zc-wheel[data-ov="element"] .zc-sec[data-el="2"] .zc-sec__bg { fill: var(--zc-air); }
.zc-wheel[data-ov="element"] .zc-sec[data-el="3"] .zc-sec__bg { fill: var(--zc-water); }
.zc-wheel[data-ov="modality"] .zc-sec[data-mod="0"] .zc-sec__bg { fill: var(--zc-card); }
.zc-wheel[data-ov="modality"] .zc-sec[data-mod="1"] .zc-sec__bg { fill: var(--zc-fix); }
.zc-wheel[data-ov="modality"] .zc-sec[data-mod="2"] .zc-sec__bg { fill: var(--zc-mut); }
.zc-wheel[data-ov="polarity"] .zc-sec[data-pol="0"] .zc-sec__bg { fill: var(--zc-pos); }
.zc-wheel[data-ov="polarity"] .zc-sec[data-pol="1"] .zc-sec__bg { fill: var(--zc-neg); }
.zc-sec:hover .zc-sec__bg { opacity: .82; }
.zc-sec--on .zc-sec__bg { stroke: var(--color-type); stroke-width: 3; }
.zc-sec:focus-visible .zc-sec__bg { stroke: var(--color-accent); stroke-width: 4; }
.zc-sec__glyph { font-family: var(--color-font-head); font-size: 38px; fill: var(--color-type); pointer-events: none; }
.zc-sec--on .zc-sec__glyph { fill: var(--zc-gild); font-size: 44px; }
.zc-sec__name { font-family: var(--color-f2); font-size: 13px; font-weight: 600; fill: var(--color-type); pointer-events: none; }
.zc-sec--kin .zc-sec__name { text-decoration: underline; }
.zc-ticks, .zc-w-center, .zc-w-sun { pointer-events: none; }
.zc-w-tick { stroke: var(--color-dim); stroke-width: 1; }
.zc-w-bound { stroke: var(--zc-gild); stroke-width: 1.6; }
.zc-w-date { font-family: var(--color-f2); font-size: 15px; fill: var(--color-dim); font-weight: 600; }
.zc-w-disc { fill: var(--color-canvas); stroke: var(--zc-gild); stroke-width: 2; }
.zc-w-cglyph { font-family: var(--color-font-head); font-size: 84px; fill: var(--zc-gild); }
.zc-w-cname { font-family: var(--color-font-head); font-size: 30px; font-weight: 700; fill: var(--color-type); }
.zc-w-csub { font-family: var(--color-f2); font-size: 16px; fill: var(--color-dim); }
.zc-sec--opp .zc-sec__bg { stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
.zc-w-sunline { stroke: var(--zc-gild); stroke-width: 2; }
.zc-w-sundot { fill: var(--color-panel); stroke: var(--zc-gild); stroke-width: 2.5; }
.zc-w-sunglyph { font-size: 14px; fill: var(--zc-gild); }
.zc-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .88rem; }
.zc-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.zc-legend__sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-rule); background: var(--color-panel); }
.zc-legend__item--element-0 .zc-legend__sw { background: var(--zc-fire); } .zc-legend__item--element-1 .zc-legend__sw { background: var(--zc-earth); }
.zc-legend__item--element-2 .zc-legend__sw { background: var(--zc-air); } .zc-legend__item--element-3 .zc-legend__sw { background: var(--zc-water); }
.zc-legend__item--modality-0 .zc-legend__sw { background: var(--zc-card); } .zc-legend__item--modality-1 .zc-legend__sw { background: var(--zc-fix); }
.zc-legend__item--modality-2 .zc-legend__sw { background: var(--zc-mut); }
.zc-legend__item--polarity-0 .zc-legend__sw { background: var(--zc-pos); } .zc-legend__item--polarity-1 .zc-legend__sw { background: var(--zc-neg); }
.zc-legend__name { font-weight: 600; }
.zc-legend__signs { color: var(--color-dim); letter-spacing: .1em; }

/* sign card */
.zc-card {
    min-width: 0; background: var(--color-panel); border: 1px solid var(--color-rule); border-radius: var(--color-round);
    padding: 18px; position: relative;
    box-shadow: inset 0 0 0 4px var(--color-panel), inset 0 0 0 5px var(--zc-soft);
}
.zc-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.zc-card__glyph {
    flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    font-family: var(--color-font-head); font-size: 2.2rem; color: var(--zc-gild); border: 2px solid var(--zc-gild); background: var(--color-canvas);
}
.zc-card__name { font-family: var(--color-font-head); font-size: 1.6rem; margin: 0; line-height: 1.1; }
.zc-card__sym { margin: 2px 0 0; color: var(--color-dim); font-style: italic; }
.zc-card__sym::first-letter { text-transform: uppercase; }
.zc-card__dl { margin: 0; display: grid; gap: 0; }
.zc-card__row { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--color-rule); }
.zc-card__row dt { color: var(--color-dim); font-size: .88rem; font-weight: 600; }
.zc-card__row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.zc-chip {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 11px 3px 8px;
    border-radius: 999px; border: 1px solid var(--color-rule); background: var(--color-canvas); cursor: pointer; font-size: .88rem; font-weight: 600;
}
.zc-chip:hover { border-color: var(--color-key); background: color-mix(in srgb, var(--color-key) 10%, var(--color-canvas)); }
.zc-chip__g { color: var(--zc-gild); font-size: 1.05rem; }
.zc-card__kw { margin: 12px 0 6px; font-weight: 600; }
.zc-card__note { margin: 0; color: var(--color-dim); font-size: .84rem; }
.zc-card__you { margin: 10px 0 0; padding: 6px 10px; border-radius: var(--color-round); background: color-mix(in srgb, var(--color-key) 14%, var(--color-panel)); font-weight: 600; }

/* ---------- relationship grid ---------- */
.zc-grid__hint { margin: 0 0 12px; color: var(--color-dim); }
.zc-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.zc-grid { border-collapse: separate; border-spacing: 2px; margin: 0 auto; font-size: .95rem; }
.zc-grid th, .zc-grid td { padding: 0; text-align: center; }
.zc-grid__h { font-family: var(--color-font-head); font-weight: 400; color: var(--zc-gild); width: 34px; height: 30px; font-size: 1.15rem; }
.zc-grid__c .zc-cell {
    width: 34px; height: 34px; border-radius: var(--color-round); border: 1px solid transparent; cursor: pointer;
    background: var(--zc-soft); font-size: 1rem; line-height: 1; padding: 0;
}
.zc-k0 .zc-cell { background: color-mix(in srgb, var(--color-type) 16%, var(--color-panel)); }
.zc-k1 .zc-cell, .zc-k5 .zc-cell { background: var(--zc-soft); color: var(--color-dim) !important; }
.zc-k2 .zc-cell { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-panel)); }
.zc-k4 .zc-cell { background: color-mix(in srgb, var(--color-accent) 42%, var(--color-panel)); }
.zc-k3 .zc-cell { background: color-mix(in srgb, var(--color-key) 28%, var(--color-panel)); }
.zc-k6 .zc-cell { background: color-mix(in srgb, var(--color-key) 48%, var(--color-panel)); }
.zc-grid__c--line .zc-cell { border-color: color-mix(in srgb, var(--color-type) 30%, transparent); }
.zc-cell:hover { border-color: var(--color-type); }
.zc-cell--on { border-color: var(--color-type) !important; box-shadow: 0 0 0 2px var(--color-type); transform: scale(1.08); }
.zc-grid__detail {
    margin: 14px auto 0; max-width: 640px; padding: 12px 14px; border-radius: var(--color-round); min-height: 3.2em;
    background: var(--color-panel); border: 1px solid var(--color-rule); border-left: 4px solid var(--color-key); font-weight: 600;
}
.zc-grid__key { list-style: none; padding: 0; margin: 12px auto 0; max-width: 680px; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .86rem; }
.zc-gk { display: inline-flex; align-items: center; gap: 6px; }
.zc-gk__sym { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--color-round); background: var(--zc-soft); }
.zc-gk.zc-k0 .zc-gk__sym { background: color-mix(in srgb, var(--color-type) 16%, var(--color-panel)); }
.zc-gk.zc-k2 .zc-gk__sym { background: color-mix(in srgb, var(--color-accent) 22%, var(--color-panel)); }
.zc-gk.zc-k4 .zc-gk__sym { background: color-mix(in srgb, var(--color-accent) 42%, var(--color-panel)); }
.zc-gk.zc-k3 .zc-gk__sym { background: color-mix(in srgb, var(--color-key) 28%, var(--color-panel)); }
.zc-gk.zc-k6 .zc-gk__sym { background: color-mix(in srgb, var(--color-key) 48%, var(--color-panel)); }

/* ---------- your planets ---------- */
.zc-chart-empty { display: flex; gap: 16px; align-items: center; padding: 18px; border: 1px dashed var(--color-rule); border-radius: var(--color-round); color: var(--color-dim); }
.zc-empty-art { width: 84px; height: 84px; flex: 0 0 auto; }
.zc-ea1 { fill: none; stroke: var(--zc-gild); stroke-width: 2; }
.zc-ea2 { fill: none; stroke: var(--color-rule); stroke-width: 2; stroke-dasharray: 3 5; }
.zc-ea3 { fill: var(--color-accent); }
.zc-chart-empty__text { margin: 0; }
.zc-chart__title { font-family: var(--color-font-head); font-weight: 700; font-size: 1.1rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.zc-chart__notes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.zc-note { padding: 8px 10px; border-radius: var(--color-round); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-panel)); border-left: 3px solid var(--color-accent); font-size: .92rem; }
.zc-note--gap, .zc-note--overlap, .zc-note--polar { background: color-mix(in srgb, var(--color-key) 12%, var(--color-panel)); border-left-color: var(--color-key); }
.zc-chart__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.zc-chart__wheelwrap { min-width: 0; }
.zc-cwheel { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
.zc-c-bg { fill: var(--color-panel); }
.zc-c-rim { fill: none; stroke: var(--zc-gild); stroke-width: 3; }
.zc-c-sign { stroke: var(--color-rule); stroke-width: 1; }
.zc-c-el0 { fill: var(--zc-fire); } .zc-c-el1 { fill: var(--zc-earth); } .zc-c-el2 { fill: var(--zc-air); } .zc-c-el3 { fill: var(--zc-water); }
.zc-c-sglyph { font-family: var(--color-font-head); font-size: 22px; fill: var(--color-type); }
.zc-c-sbound { stroke: var(--zc-gild); stroke-width: 1.4; }
.zc-c-tick { stroke: var(--color-dim); stroke-width: 1; }
.zc-c-ring { fill: var(--color-panel); stroke: var(--color-type); stroke-width: 1.2; }
.zc-c-inner { fill: var(--color-canvas); stroke: var(--color-rule); stroke-width: 1.2; }
.zc-c-house { stroke: var(--color-rule); stroke-width: 1; }
.zc-c-house--ang { stroke: var(--color-dim); stroke-width: 1.4; }
.zc-c-hnum { font-family: var(--color-f2); font-size: 12px; fill: var(--color-dim); }
.zc-axis { stroke: var(--color-type); stroke-width: 2.4; }
.zc-axis__lab { font-family: var(--color-font-head); font-size: 14px; font-weight: 700; fill: var(--color-type); paint-order: stroke; stroke: var(--color-panel); stroke-width: 4px; }
.zc-c-asp { stroke-width: 1.4; opacity: .75; }
.zc-c-asp--soft { stroke: var(--color-accent); }
.zc-c-asp--hard { stroke: var(--color-key); stroke-dasharray: 5 3; }
.zc-c-moonpath { fill: none; stroke: color-mix(in srgb, var(--color-accent) 55%, transparent); stroke-width: 9; stroke-linecap: round; }
.zc-c-pltick { stroke: var(--color-type); stroke-width: 2; }
.zc-c-pllead { stroke: var(--color-dim); stroke-width: 1; }
.zc-c-pldot { fill: var(--color-panel); stroke: var(--color-rule); stroke-width: 1; }
.zc-c-plg { font-size: 18px; fill: var(--color-type); }
.zc-c-pl--sun .zc-c-plg, .zc-c-pl--moon .zc-c-plg { fill: var(--zc-gild); }
.zc-c-pl--rx .zc-c-pldot { stroke: var(--color-key); stroke-dasharray: 3 2; }
.zc-c-pldeg { font-family: var(--color-f2); font-size: 11px; fill: var(--color-dim); font-weight: 600; }
.zc-c-cap { font-family: var(--color-f2); font-size: 13px; fill: var(--color-dim); }
.zc-chart__side { min-width: 0; }
.zc-ptable { width: 100%; border-collapse: collapse; font-size: .93rem; }
.zc-ptable th, .zc-ptable td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.zc-ptable thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-dim); }
.zc-ptable tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--color-rule) 28%, transparent); }
.zc-pl__name { font-weight: 600; white-space: nowrap; }
.zc-pl__g { display: inline-block; width: 1.5em; color: var(--zc-gild); }
.zc-pos { white-space: nowrap; font-variant-numeric: tabular-nums; }
.zc-pl__house { text-align: center !important; }
.zc-rx { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--color-key) 20%, var(--color-panel)); }
.zc-edge, .zc-switch { display: inline-block; font-size: .8rem; color: var(--color-accent); font-weight: 600; }
.zc-edge { cursor: help; border-bottom: 1px dotted var(--color-accent); }
.zc-asp__title { font-family: var(--color-font-head); font-size: 1rem; margin: 16px 0 6px; }
.zc-asp { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.zc-asp__i { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 3px 0; border-bottom: 1px dotted var(--color-rule); }
.zc-asp__sym { text-align: center; color: var(--color-dim); }
.zc-asp__i--soft .zc-asp__sym { color: var(--color-accent); }
.zc-asp__i--hard .zc-asp__sym { color: var(--color-key); }
.zc-asp__orb { color: var(--color-dim); font-size: .84rem; white-space: nowrap; }
.zc-asp__note, .zc-asp__none { color: var(--color-dim); font-size: .88rem; }
.zc-chart__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.zc-chart__method { margin: 12px 0 0; font-size: .82rem; color: var(--color-dim); }

/* ---------- toast ---------- */
.zc-toast {
    position: fixed; z-index: 50; left: 50%; bottom: 20px; transform: translateX(-50%);
    max-width: min(92vw, 520px); padding: 10px 16px; border-radius: var(--color-round);
    background: var(--color-type); color: var(--color-panel); font-weight: 600; box-shadow: 0 8px 24px color-mix(in srgb, var(--color-type) 30%, transparent);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .zc-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .zc-field--place { grid-column: 1 / -1; }
    .zc-wheelbox, .zc-chart__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .zc-find { padding: 16px 14px; }
    .zc-fields, .zc-manual { grid-template-columns: minmax(0, 1fr); }
    .zc-result { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .zc-res__glyphs { flex-direction: row; justify-content: flex-start; }
    .zc-res__glyph { width: 68px; height: 68px; font-size: 2.3rem; }
    .zc-res__glyph--a, .zc-res__glyph--b { width: 56px; height: 56px; font-size: 1.8rem; }
    .zc-card__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .zc-actions .zc-btn { flex: 1 1 auto; }
    .zc-tab { padding: 10px 12px; font-size: .92rem; }
    .zc-grid__h { width: 24px; font-size: .95rem; }
    .zc-grid__c .zc-cell { width: 24px; height: 28px; font-size: .85rem; }
    .zc-grid { border-spacing: 1px; }
    .zc-chart-empty { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .zc-app *, .zc-app *::before, .zc-app *::after { animation: none !important; transition: none !important; }
}
@media print {
    .zc-find, .zc-tabs, .zc-chart__acts, .zc-res__acts, .zc-toast { display: none !important; }
    .zc-panel[hidden] { display: block !important; }
}

/* design: sites/<d>/design/site.css */
/* zodiac-chart.com — "Town-hall astronomical clock dial in parchment, gilt and lapis enamel"
   header = lapis-enamel sky band with gilt stars over a gilt chapter ring of hour ticks;
   page = cream dial plate with a faint engraved dial; gilt sun-pointer headings and boss dividers;
   lapis enamel table heads; dial-plate cards; night-segment footer with enamel language bosses. */

:root{
  --z-lapis:color-mix(in srgb,var(--color-accent) 74%,var(--color-type));
  --z-deep:color-mix(in srgb,var(--color-accent) 48%,var(--color-type));
  --z-night:color-mix(in srgb,var(--color-accent) 34%,var(--color-type));
  --z-gold:color-mix(in srgb,var(--color-key) 40%,#f3d27a);
  --z-pale:color-mix(in srgb,var(--z-gold) 28%,#fff);
  --z-hair:color-mix(in srgb,var(--color-key) 32%,var(--color-rule));
  --z-tint:color-mix(in srgb,var(--color-key) 6%,var(--color-panel));
  --z-ltint:color-mix(in srgb,var(--color-accent) 6%,var(--color-panel));
}
::selection{background:color-mix(in srgb,var(--color-accent) 20%,transparent);color:var(--color-type)}
body{background:var(--color-canvas) url(/assets/img/d-dial.svg) no-repeat calc(100% + 300px) 40px/780px 780px;font-variant-numeric:tabular-nums}
@media(max-width:700px){body{background-size:440px 440px;background-position:calc(100% + 190px) 60px}}

/* ---------- header: lapis enamel sky band + gilt chapter ring ---------- */
.pg-banner{position:relative;border:0;padding:0 0 14px;
  background:url(/assets/img/d-stars.svg) 0 0/220px 84px,linear-gradient(180deg,var(--z-lapis),var(--z-deep));
  color:#fff}
.pg-banner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:14px;pointer-events:none;
  background:url(/assets/img/d-ticks.svg) repeat-x 0 2px/30px 12px,linear-gradient(var(--z-gold),var(--z-gold)) 0 0/100% 2px no-repeat,var(--z-night)}
.pg-banner .pg-topbar__in{padding:1.05rem 1rem .8rem;gap:.55rem}
.pg-wordmark,.pg-banner .pg-wordmark{color:#fff;font:700 1.32rem/1.1 var(--color-font-head);letter-spacing:.06em;gap:.75rem}
.pg-wordmark svg{flex:none;border-radius:50%;
  box-shadow:0 0 0 2px var(--z-gold),0 0 0 4px var(--z-deep),0 0 0 5px color-mix(in srgb,var(--z-gold) 70%,transparent)}
.pg-menu{gap:.3rem 2rem;justify-content:center}
.pg-banner .pg-menu>a{color:var(--z-pale);font:600 .78rem/1 var(--color-f2);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:.45rem .1rem .4rem;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.pg-banner .pg-menu>a:hover{color:#fff;border-bottom-color:color-mix(in srgb,var(--z-gold) 55%,transparent)}
.pg-banner .pg-menu>a[aria-current]{color:#fff;border-bottom-color:var(--z-gold)}
.pg-banner a:focus-visible{outline:2px solid var(--z-gold);outline-offset:3px}

/* ---------- breadcrumbs ---------- */
.pg-path{font-size:.82rem;letter-spacing:.04em;margin:1.2rem 0 1rem}
.pg-path a{color:var(--color-key);text-underline-offset:3px}

/* ---------- first screen: the dial face ---------- */
.pg-page-top{position:relative;background:radial-gradient(120% 140% at 100% 50%,var(--z-tint),var(--color-panel) 60%);
  color:var(--color-type);border:1px solid var(--z-hair);border-radius:var(--color-round);margin:1.6rem 0 1.6rem;padding:2.4rem 2.2rem;
  box-shadow:inset 0 0 0 5px var(--color-panel),inset 0 0 0 6px color-mix(in srgb,var(--color-key) 40%,transparent)}
.pg-page-top h1,.pg-page-top .pg-intro-text{color:var(--color-type)}
.pg-page-top h1{letter-spacing:-.01em;margin-top:0}
.pg-page-top .pg-intro-text{opacity:1;color:color-mix(in srgb,var(--color-type) 82%,var(--color-dim));max-width:62ch}
.pg-page-top--art .pg-art{width:190px;height:190px}
.pg-art--ring{border-radius:50%;
  background:radial-gradient(circle,var(--color-panel) 0 50%,var(--color-key) 50.5% 51.5%,transparent 52% 66%,var(--color-key) 66.5% 67.5%,var(--z-lapis) 68% 92%,var(--z-gold) 92.5% 94%,transparent 94.5%),
    repeating-conic-gradient(var(--color-key) 0 .9deg,transparent .9deg 7.5deg),var(--color-panel)}
.pg-art--ring svg{width:50%;height:50%;filter:none}

/* ---------- tool frame (outer only) ---------- */
.pg-workbench{background:linear-gradient(var(--z-hair),var(--z-hair)) 0 12px/100% 1px no-repeat,url(/assets/img/d-ticks-ink.svg) repeat-x 0 0/30px 12px,var(--color-panel);
  border:1px solid var(--z-hair);border-radius:var(--color-round);padding:1.8rem 1.2rem 1.2rem;
  box-shadow:0 1px 0 color-mix(in srgb,var(--color-key) 25%,transparent)}
@media(max-width:640px){.pg-workbench{padding:1.5rem .55rem .7rem;margin-left:-.25rem;margin-right:-.25rem}}

/* ---------- contents (home, top) ---------- */
.pg-contents:not(.pg-contents--post){background:var(--color-panel);border:1px solid var(--z-hair);border-radius:var(--color-round);padding:1.1rem 1.4rem 1.2rem;
  box-shadow:inset 0 0 0 4px var(--color-panel),inset 0 0 0 5px color-mix(in srgb,var(--color-key) 22%,transparent)}
.pg-contents strong,.pg-contents>b,.pg-contents>h2{font:700 .76rem/1 var(--color-f2);letter-spacing:.16em;text-transform:uppercase;color:var(--color-key)}
.pg-contents li::marker{color:var(--color-key);font-family:var(--color-font-head);font-weight:700}
.pg-contents a{color:var(--color-type);text-decoration-color:color-mix(in srgb,var(--color-key) 45%,transparent);text-underline-offset:3px}
.pg-contents a:hover{color:var(--color-key)}

/* ---------- sections: gilt hairline with a sun-pointer boss ---------- */
.pg-block>h2{border-top:0;padding-top:0}
.pg-block::before{content:'';display:block;height:16px;margin:3rem 0 .2rem;
  background:radial-gradient(circle,var(--z-gold) 0 3px,transparent 3.5px) 50% 50%/16px 16px no-repeat,
    radial-gradient(circle,transparent 0 5.5px,var(--color-key) 6px 7px,transparent 7.5px) 50% 50%/16px 16px no-repeat,
    linear-gradient(90deg,transparent,var(--z-hair) 12%,var(--z-hair) calc(50% - 14px),transparent calc(50% - 14px) calc(50% + 14px),var(--z-hair) calc(50% + 14px),var(--z-hair) 88%,transparent) 0 50%/100% 1px no-repeat}
.pg-block>h2::before,.pg-answers>h2::before{content:'';display:inline-block;width:.62em;height:.62em;margin-right:.5em;vertical-align:.06em;border-radius:50%;
  background:radial-gradient(circle,var(--z-gold) 0 36%,var(--color-key) 38% 46%,transparent 48%),repeating-conic-gradient(var(--color-key) 0 9deg,transparent 9deg 30deg)}
h2{letter-spacing:-.005em}
h3{color:color-mix(in srgb,var(--color-type) 88%,var(--color-accent))}

/* ---------- tables: lapis enamel head, engraved hairlines ---------- */
.pg-tbl-box{border:1px solid var(--z-hair);border-radius:var(--color-round);background:var(--color-panel)}
.pg-tbl{border-collapse:collapse}
.pg-tbl caption{font:600 .76rem/1.3 var(--color-f2);letter-spacing:.12em;text-transform:uppercase;color:var(--color-dim);padding:.7rem .4rem}
.pg-tbl thead th{background:var(--z-lapis);color:#fff;font-family:var(--color-font-head);font-weight:600;letter-spacing:.02em;border-bottom:2px solid var(--z-gold)}
.pg-tbl td,.pg-tbl th{border-color:color-mix(in srgb,var(--color-key) 18%,var(--color-rule))}
.pg-tbl tbody tr:nth-child(even) td{background:var(--z-tint)}
.pg-tbl tbody tr:nth-child(odd) td{background:var(--color-panel)}
.pg-tbl tbody tr:hover td{background:var(--z-ltint)}

/* ---------- figures, notes, formulas ---------- */
.pg-figure{background:var(--color-panel);border:1px solid var(--z-hair);border-radius:var(--color-round);padding:1rem}
.pg-figure figcaption{font-style:italic;color:var(--color-dim);text-align:center;font-size:.9rem}
.pg-remark{background:var(--z-tint);border:1px solid var(--z-hair);border-left:3px solid var(--color-key);border-radius:var(--color-round)}
.pg-formula-box{background:var(--z-ltint);border-left:3px solid var(--z-lapis);border-radius:var(--color-round)}
blockquote{border-left:3px solid var(--color-key);background:var(--z-tint);font-style:italic}

/* ---------- buttons / CTA ---------- */
.pg-pill-btn{background:var(--z-lapis);color:#fff;border-radius:var(--color-round);
  box-shadow:inset 0 0 0 2px var(--z-lapis),inset 0 0 0 3px var(--z-gold);transition:background-color .2s}
.pg-pill-btn:hover{background:var(--color-key);box-shadow:inset 0 0 0 2px var(--color-key),inset 0 0 0 3px var(--z-pale)}
.pg-try-it{background:url(/assets/img/d-ticks-ink.svg) repeat-x 0 0/30px 12px,var(--color-panel);border:1px solid var(--z-hair);border-top:1px solid var(--z-hair);padding-top:2rem}

/* ---------- guide cards: dial-plate panels ---------- */
.pg-guide-card{background:var(--color-panel);border:1px solid var(--z-hair);border-top:4px double var(--color-key);transition:transform .2s ease,border-color .2s ease}
.pg-guide-card:hover{border-color:var(--color-key);transform:translateY(-2px)}
.pg-guide-card--img:hover{box-shadow:0 8px 18px color-mix(in srgb,var(--color-type) 10%,transparent)}
.pg-link-card__img{border-bottom:1px solid var(--z-hair)}
.pg-guide-card b{color:var(--color-type)}
.pg-item__meta{font:600 .72rem/1 var(--color-f2);letter-spacing:.12em;text-transform:uppercase;color:var(--color-key)}

/* ---------- FAQ ---------- */
.pg-answers h3{position:relative;padding:1rem 0 0 1.4rem;border-top:1px dotted var(--z-hair)}
.pg-answers h3::before{content:'';position:absolute;left:.15rem;top:1.42rem;width:.5rem;height:.5rem;transform:rotate(45deg);background:var(--z-gold);box-shadow:0 0 0 1px var(--color-key)}
.pg-answers h3+p{padding-left:1.4rem}

/* ---------- article ---------- */
.pg-post__head--band{position:relative;padding:2.4rem 1.8rem 2.8rem;border-radius:var(--color-round);
  background:url(/assets/img/d-ticks.svg) repeat-x 0 100%/30px 12px,url(/assets/img/d-stars.svg) 0 0/220px 84px,linear-gradient(180deg,var(--z-lapis),var(--z-deep));
  border-bottom:3px solid var(--z-gold)}
.pg-post__head--band .pg-post__kicker{color:var(--z-gold);font:700 .74rem/1 var(--color-f2);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.pg-post__head--band .pg-post__kicker:hover{color:#fff}
.pg-post__head--band .pg-post__meta{color:var(--z-pale)}
.pg-post .pg-intro-text::first-letter{color:var(--color-key);text-shadow:1px 1px 0 color-mix(in srgb,var(--z-gold) 60%,transparent)}
.pg-post .pg-contents--post{background:var(--color-panel);border:1px solid var(--z-hair);border-left:1px solid var(--z-hair);
  box-shadow:inset 0 0 0 4px var(--color-panel),inset 0 0 0 5px color-mix(in srgb,var(--color-key) 20%,transparent)}
.pg-contents--chips a{border-color:var(--z-hair);background:var(--color-canvas);color:var(--color-type);transition:background-color .2s,color .2s,border-color .2s}
.pg-contents--chips a:hover{background:var(--z-lapis);border-color:var(--z-lapis);color:#fff}
.pg-post li::marker{color:var(--color-key)}
.pg-post h2{scroll-margin-top:1rem}

/* ---------- footer: the night segment of the dial ---------- */
.pg-bottom{position:relative;border-top:0;margin-top:3.2rem;padding:2.8rem 0 2.6rem;color:color-mix(in srgb,#fff 82%,var(--z-night));
  background:url(/assets/img/d-stars.svg) 30px 22px/220px 84px,radial-gradient(70% 120% at 50% 0,var(--z-deep),var(--z-night) 70%)}
.pg-bottom::before{content:'';position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none;
  background:url(/assets/img/d-ticks.svg) repeat-x 0 0/30px 12px,linear-gradient(var(--z-gold),var(--z-gold)) 0 12px/100% 2px no-repeat}
.pg-bottom a{color:var(--z-pale);text-underline-offset:3px}
.pg-bottom a:hover{color:#fff}
.pg-bottom a:focus-visible{outline:2px solid var(--z-gold);outline-offset:2px}
.pg-bottom p{color:color-mix(in srgb,#fff 82%,var(--z-night))}
.pg-langpills{justify-content:center;gap:.5rem;margin-top:1.2rem}
.pg-langpills a{border:1px solid color-mix(in srgb,var(--z-gold) 55%,transparent);background:color-mix(in srgb,var(--z-night) 60%,var(--color-accent));
  color:#fff;text-decoration:none;font-size:.82rem;letter-spacing:.03em;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent);transition:background-color .2s}
.pg-langpills a:hover{background:var(--z-lapis)}
.pg-langpills a[aria-current]{background:var(--z-gold);border-color:var(--z-gold);color:var(--color-type)}

@media(prefers-reduced-motion:reduce){.pg-guide-card,.pg-guide-card:hover{transition:none;transform:none}
  .pg-banner .pg-menu>a,.pg-pill-btn,.pg-contents--chips a,.pg-langpills a{transition:none}}

/* ---------- rhythm + phone refinements ---------- */
.pg-block::before{margin:2.6rem 0 0}
.pg-block>h2{margin-top:1.3rem}
@media(max-width:640px){
  .pg-page-top{padding:1.5rem 1.1rem;margin:1rem 0 1.2rem;box-shadow:inset 0 0 0 4px var(--color-panel),inset 0 0 0 5px color-mix(in srgb,var(--color-key) 40%,transparent)}
  .pg-banner .pg-topbar__in{padding:.8rem 1rem .6rem;gap:.35rem}
  .pg-wordmark,.pg-banner .pg-wordmark{font-size:1.18rem}
  .pg-contents:not(.pg-contents--post){padding:1rem 1rem 1.1rem}
  .pg-post__head--band{padding:1.6rem 1.1rem 2.4rem}
  .pg-block::before{margin-top:2rem}
}