*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --f-display:'Gloock','Iowan Old Style',Georgia,'Times New Roman',serif;
  --f-body:'Literata',Georgia,'Times New Roman',serif;
  --f-ui:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#F6F5F9;--sf:#ECEAF3;--card:#FFFFFF;--bdr:#DAD7E6;--bdr2:#C3BFD6;
  --txt:#14152B;--txt2:#363858;--txt3:#585A7C;--txt4:#666890;
  --ac:#4B3AA6;--ac2:#3A2B8C;--ac-soft:#E6E2F8;--brass:#9C7A2E;
  --night:#0C0D22;--night2:#15173B;--n-txt:#EEECF8;--n-txt2:#B6B4D4;--n-line:rgba(210,179,101,.38);--n-brass:#D2B365;
  --shell:1080px;--read:680px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);font-size:18px;line-height:1.75;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ac);text-decoration:none}
a:hover{color:var(--ac2)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:3px}
img,svg{max-width:100%}
.shell{max-width:var(--shell);margin:0 auto;padding:0 1.5rem}

/* nav */
.nav{position:sticky;top:0;z-index:200;background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--bdr)}
.nav-inner{max-width:var(--shell);margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;gap:1rem}
.nav-logo{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--txt);line-height:1}
.nav-logo:hover{color:var(--ac)}
.mark{flex:none;color:var(--ac)}
.nav-link{margin-left:0;font:500 .95rem var(--f-ui);color:var(--txt3)}
.nav-link:hover{color:var(--ac)}
.pbar{position:fixed;top:0;left:0;height:2px;background:var(--ac);z-index:999;width:0;transition:width .08s linear;pointer-events:none}

/* breadcrumb */
.bc{display:flex;flex-wrap:wrap;gap:.2rem .6rem;padding-top:1.5rem;font:.9rem/1.4 var(--f-ui);color:var(--txt4)}
.bc a{color:var(--txt3)}
.bc a:hover{color:var(--ac)}
.bc-sep{color:var(--bdr2)}

/* ads */
.ad{margin:2rem 0;overflow:hidden}
.ad:has(ins[data-ad-status="unfilled"]){display:none}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}

/* article header */
.art-hd{max-width:820px;padding:2.25rem 0 2.5rem;border-bottom:1px solid var(--bdr)}
.art-sym{display:block;font-size:2.6rem;line-height:1;margin-bottom:1.1rem}
.art-cat{font:600 .95rem var(--f-ui)}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.01em;color:var(--txt);margin-top:.5rem;text-wrap:balance}
.deck{font-family:var(--f-body);font-style:italic;font-size:1.3rem;line-height:1.6;color:var(--txt2);margin-top:1.25rem;max-width:36em}
.byline{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;margin-top:1.5rem;font:.92rem var(--f-ui);color:var(--txt4)}

/* article layout */
.art-grid{display:grid;grid-template-columns:210px minmax(0,var(--read));gap:4.5rem;padding-top:3rem}
.art-grid.solo{grid-template-columns:minmax(0,var(--read))}
.rail{position:sticky;top:5.5rem;align-self:start}
.toc-lbl{font:600 .95rem var(--f-ui);color:var(--txt);margin-bottom:.8rem;list-style:none;cursor:pointer}
.toc-lbl::-webkit-details-marker{display:none}
.toc:not([open]) .toc-lbl{margin-bottom:0}
.toc ol{list-style:none;border-left:1px solid var(--bdr)}
.toc a{display:block;margin-left:-1px;padding:.4rem 0 .4rem 1rem;border-left:2px solid transparent;font:.95rem/1.4 var(--f-ui);color:var(--txt3)}
.toc a:hover{color:var(--txt)}
.toc a.on{color:var(--ac);border-left-color:var(--ac);font-weight:600}

/* article body */
.body h2,.mean-wrap h2,.faq h2,.more h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.55rem,3vw,1.9rem);line-height:1.25;letter-spacing:-.005em;color:var(--txt);margin:3rem 0 1rem;scroll-margin-top:5.5rem;text-wrap:balance}
.body>h2:first-child{margin-top:0}
.body p{font-size:1.1rem;line-height:1.8;color:var(--txt);margin-bottom:1.35rem}
.body>p:first-of-type::first-letter{float:left;font-family:var(--f-display);font-size:4.3rem;line-height:.82;color:var(--ac);padding:.08em .1em 0 0}
.body ul,.body ol{margin:0 0 1.35rem 1.4rem;font-size:1.1rem}
.body li{margin-bottom:.45rem}
.body strong{font-weight:600}
.body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.body blockquote{border-left:2px solid var(--ac);padding-left:1.2rem;margin:1.75rem 0;font-style:italic;color:var(--txt2)}

/* meanings */
.mean-wrap{margin-top:1rem}
.mean{margin-top:1.25rem;border-top:1px solid var(--bdr)}
.mean>div{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:.25rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--bdr)}
.mean dt{font-family:var(--f-display);font-size:1.15rem;line-height:1.35;color:var(--txt)}
.mean dd{font-size:1.02rem;line-height:1.7;color:var(--txt2)}
.mean dt:only-child{grid-column:1/-1}

/* FAQ */
.faq{margin-top:.5rem}
.faq-list{margin-top:1.25rem;border-top:1px solid var(--bdr)}
.faq details{border-bottom:1px solid var(--bdr)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 0;font:600 1.05rem/1.45 var(--f-ui);color:var(--txt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font:400 1.5rem/1 var(--f-ui);color:var(--ac)}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{color:var(--ac)}
.faq details p{padding:0 2.5rem 1.25rem 0;font-size:1.05rem;line-height:1.75;color:var(--txt2)}

/* related */
.more{margin-top:1rem}
.more ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;margin-top:1.25rem;border-top:1px solid var(--bdr)}
.more li{border-bottom:1px solid var(--bdr)}
.more a{display:flex;align-items:center;gap:.9rem;padding:.9rem 0;font-family:var(--f-display);font-size:1.1rem;line-height:1.35;color:var(--txt)}
.more a:hover{color:var(--ac)}
.more .sym{font-size:1.4rem;width:1.8rem;text-align:center;flex:none}

/* homepage hero */
.hero{position:relative;overflow:hidden;background:var(--night);color:var(--n-txt);border-bottom:1px solid #23264E}
.hero::before{content:'';position:absolute;width:880px;height:880px;right:-220px;top:-160px;background:radial-gradient(closest-side,rgba(104,84,214,.26),transparent);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:3rem;align-items:center;padding:4.5rem 0 4.5rem}
.hero h1{color:var(--n-txt);font-size:clamp(2.7rem,5.4vw,4.4rem);line-height:1.03;margin-top:0}
.hero-p{font-size:1.2rem;line-height:1.65;color:var(--n-txt2);margin:1.5rem 0 2rem;max-width:28em}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.75rem}
.btn{display:inline-block;font:600 1rem var(--f-ui);background:var(--n-txt);color:var(--night);padding:.85rem 1.4rem;border-radius:8px;transition:background .2s}
.btn:hover{background:var(--n-brass);color:var(--night)}
.hero a.quiet{font:500 1rem var(--f-ui);color:var(--n-txt);border-bottom:1px solid var(--n-line);padding-bottom:2px}
.hero a.quiet:hover{border-color:var(--n-brass);color:var(--n-brass)}
.hero a:focus-visible{outline-color:var(--n-brass)}

/* wheel */
.wheel{--inset:12%;--R:28.1%;--ns:3.1rem;position:relative;width:100%;max-width:540px;aspect-ratio:1;margin-inline:auto}
.wheel>svg{position:absolute;inset:var(--inset);width:calc(100% - 2*var(--inset));height:calc(100% - 2*var(--inset));overflow:visible}
.wheel svg *{fill:none;stroke:var(--n-brass);stroke-width:.22}
.wheel .faint{opacity:.4}
.wheel .core{fill:var(--n-brass);stroke:none}
.ring{stroke-dasharray:1;animation:draw 2s cubic-bezier(.3,.6,.2,1) backwards}
.ring.r2{animation-delay:.15s}.ring.r3{animation-delay:.3s}.ring.r4{animation-delay:.45s}
@keyframes draw{from{stroke-dashoffset:1}}
.node{position:absolute;left:calc(50% + var(--cx)*var(--R));top:calc(50% + var(--cy)*var(--R));width:var(--ns);height:var(--ns);margin:calc(var(--ns)/-2) 0 0 calc(var(--ns)/-2);color:var(--n-txt)}
.node-sym{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;line-height:1;background:var(--night2);border:1px solid var(--n-line);transition:background .2s,transform .2s,border-color .2s}
.node-lbl{position:absolute;width:7.4rem;font:500 .86rem/1.25 var(--f-ui);color:var(--n-txt2);transition:color .2s}
.on-r .node-lbl{left:calc(100% + .65rem);top:50%;transform:translateY(-50%);text-align:left}
.on-l .node-lbl{right:calc(100% + .65rem);top:50%;transform:translateY(-50%);text-align:right}
.on-t .node-lbl{bottom:calc(100% + .5rem);left:50%;margin-left:-3.7rem;text-align:center}
.on-b .node-lbl{top:calc(100% + .5rem);left:50%;margin-left:-3.7rem;text-align:center}
.node:hover .node-sym,.node:focus-visible .node-sym{background:#23265A;border-color:var(--n-brass);transform:scale(1.08)}
.node:hover .node-lbl,.node:focus-visible .node-lbl{color:var(--n-txt)}
.node:hover{color:var(--n-txt)}

/* homepage index */
.index{padding-top:4rem}
.idx-title{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.15;color:var(--txt);scroll-margin-top:5rem}
.idx-lede{margin-top:.6rem;color:var(--txt3);max-width:34em}
.idx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem 2.75rem;margin-top:2.5rem}
.chap h3{font-family:var(--f-display);font-weight:400;font-size:1.35rem;line-height:1.25}
.chap h3 a{display:flex;align-items:center;gap:.7rem;color:var(--txt)}
.chap h3 a:hover{color:var(--ac)}
.chap h3 .sym{font-size:1.5rem;line-height:1}
.chap ul{list-style:none;margin-top:.9rem;border-top:1px solid var(--bdr)}
.chap li a{display:block;padding:.55rem 0;border-bottom:1px solid var(--bdr);font-size:1rem;line-height:1.4;color:var(--txt2)}
.chap li a:hover{color:var(--ac)}
.chap .all{display:inline-block;margin-top:.8rem;font:600 .95rem var(--f-ui)}

/* category page */
.cat-band{background:var(--night);color:var(--n-txt);padding:3.25rem 0 3rem;border-bottom:1px solid #23264E}
.cat-band .sym{display:block;font-size:2.4rem;line-height:1;margin-bottom:1rem}
.cat-band h1{color:var(--n-txt);margin-top:0;font-size:clamp(2rem,4.4vw,3rem)}
.cat-band p{color:var(--n-txt2);max-width:38em;margin-top:1rem;font-size:1.12rem;line-height:1.65}
.cnt{margin:2.25rem 0 .5rem;font:.95rem var(--f-ui);color:var(--txt4)}
.rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;border-top:1px solid var(--bdr)}
.row{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.2rem 1rem;padding:1.2rem 0;border-bottom:1px solid var(--bdr);color:var(--txt)}
.row .sym{font-size:1.6rem;line-height:1.2;text-align:center}
.row-ttl{font-family:var(--f-display);font-size:1.18rem;line-height:1.3;color:var(--txt)}
.row-exc{grid-column:2;font-size:.98rem;line-height:1.6;color:var(--txt3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row:hover .row-ttl{color:var(--ac)}

/* footer */
.ftr{background:var(--night);color:var(--n-txt2);margin-top:6rem;padding:3.5rem 0 2.25rem}
.ftr-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:3rem}
.ftr .nav-logo,.ftr .mark{color:var(--n-txt)}
.ftr-brand p{margin-top:1rem;font-size:1rem;line-height:1.65;max-width:24em}
.ftr-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem 1.5rem}
.ftr-nav a{font:.95rem/1.4 var(--f-ui);color:var(--n-txt2)}
.ftr-nav a:hover{color:var(--n-brass)}
.ftr-copy{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid #23264E;font:.88rem/1.6 var(--f-ui);color:#8D8BB4}

/* prose pages + search + notes */
.prose{max-width:var(--read);padding:2.5rem 0 1rem}
.prose h1{margin-bottom:1.25rem}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.3;margin:2.25rem 0 .75rem;color:var(--txt)}
.prose p,.prose li{font-size:1.06rem;line-height:1.8;color:var(--txt);margin-bottom:1rem}
.prose ul{margin:0 0 1.25rem 1.3rem}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose .updated{font:.9rem var(--f-ui);color:var(--txt4)}
.note{margin:2rem 0;padding:1rem 1.25rem;border-left:2px solid var(--ac);background:var(--sf);font-size:1rem;line-height:1.7;color:var(--txt2)}
.srch{width:100%;font:500 1.1rem var(--f-ui);padding:.9rem 1.1rem;border:1px solid var(--bdr2);border-radius:8px;background:var(--card);color:var(--txt)}
.srch:focus{outline:2px solid var(--ac);outline-offset:2px}
.ftr-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.25rem}
.ftr-legal a{font:.9rem var(--f-ui);color:var(--n-txt2)}
.ftr-legal a:hover{color:var(--n-brass)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:1.4rem}

/* 404 */
.nf{text-align:center;padding:6rem 0 2rem}
.nf p{color:var(--txt3);margin:1rem 0 1.75rem}

/* dark theme */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --bg:#0B0C1E;--sf:#121431;--card:#161838;--bdr:#292B52;--bdr2:#3A3D6E;
  --txt:#ECEAF6;--txt2:#C6C4E0;--txt3:#A5A3C8;--txt4:#8F8DB6;
  --ac:#A99BFF;--ac2:#C2B8FF;--ac-soft:#24214F;--brass:#D2B365;
}
}
:root[data-theme="dark"]{
  --bg:#0B0C1E;--sf:#121431;--card:#161838;--bdr:#292B52;--bdr2:#3A3D6E;
  --txt:#ECEAF6;--txt2:#C6C4E0;--txt3:#A5A3C8;--txt4:#8F8DB6;
  --ac:#A99BFF;--ac2:#C2B8FF;--ac-soft:#24214F;--brass:#D2B365;
}

/* responsive */
@media(max-width:960px){
  .art-grid{grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-top:2rem}
  .rail{position:static}
  .toc{padding-bottom:1.25rem;border-bottom:1px solid var(--bdr)}
  .toc-lbl{display:flex;justify-content:space-between;align-items:center}
  .toc-lbl::after{content:'+';font:400 1.5rem/1 var(--f-ui);color:var(--ac)}
  .toc[open] .toc-lbl::after{content:'\2212'}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem;padding:3rem 0}
  .wheel{max-width:440px}
  .idx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-top{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  body{font-size:17px}
  .shell,.nav-inner{padding-left:1.1rem;padding-right:1.1rem}
  .deck{font-size:1.15rem}
  .body p,.body ul,.body ol{font-size:1.06rem}
  .mean>div{grid-template-columns:minmax(0,1fr)}
  .more ul,.rows,.idx-grid{grid-template-columns:minmax(0,1fr)}
  .ftr-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wheel{--inset:11%;--R:28.9%;--ns:2.3rem}
  .node-sym{font-size:1.1rem}
  .node-lbl{width:5.2rem;font-size:.7rem}
  .on-t .node-lbl,.on-b .node-lbl{margin-left:-2.6rem}
  .hero-p{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring{animation:none}
  .node-sym{transition:none}
}