:root {color-scheme: dark; --bg:#091b24;--paper:#112834;--ink:#f0ede4;--soft:#c4d1d0;--muted:#9eb5b7;--accent:#8ac9c1;--line:#31505b;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif;line-height:1.7}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 75% -10%,#20526355,transparent 50%);z-index:-1}a{color:var(--accent)}.skip{position:absolute;top:-100px;left:1rem;background:white;color:black;padding:.5rem}.skip:focus{top:1rem}.wrap{width:min(100% - 2.4rem,860px);margin:auto}.hero{text-align:center;padding:clamp(5rem,13vw,10rem) 0 5rem;border-bottom:1px solid var(--line)}.mark{font-size:3.8rem;line-height:1;color:var(--accent);margin-bottom:1.8rem}.eyebrow{font:small-caps .85rem system-ui,sans-serif;letter-spacing:.2em;color:var(--accent)}h1{font-weight:400;line-height:1.15;font-size:clamp(2.5rem,7vw,5.6rem);max-width:780px;margin:1rem auto 1.5rem}.japanese{font-family:'Yu Mincho','Hiragino Mincho ProN','Noto Serif CJK JP',serif;font-size:clamp(1.3rem,3.5vw,2rem);letter-spacing:.06em;margin:.4rem 0}.romaji{font-family:system-ui,sans-serif;font-size:.9rem;color:var(--muted);margin:0 0 2.5rem}.subtitle{font-style:italic;font-size:1.15rem;color:var(--soft)}.motto{margin-top:3rem;color:var(--accent);font-style:italic}.intro{padding:2.7rem 0;color:var(--soft);max-width:690px;text-align:center;margin:auto}.controls{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin:0 auto 2.5rem}button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:.7rem 1.2rem;font: .88rem system-ui,sans-serif;cursor:pointer}button:hover,button:focus-visible{border-color:var(--accent);outline-offset:3px}button[aria-pressed="true"]{background:var(--accent);color:#08212b}.group-label{font:small-caps .8rem system-ui,sans-serif;letter-spacing:.18em;color:var(--accent);margin:3rem 0 0}.precepts{list-style:none;padding:0;margin:0}.precept{display:grid;grid-template-columns:75px 1fr;gap:1.3rem;padding:2.5rem 0;border-bottom:1px solid var(--line)}.symbol{width:65px;height:65px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.75rem;color:var(--accent);font-family:serif}.num{font: .82rem system-ui,sans-serif;letter-spacing:.15em;color:var(--accent);display:block;margin:0 0 .45rem}h2{font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.3;font-weight:400;margin:0 0 .9rem}.precept p{margin:0;color:var(--soft);font-size:1.07rem}.closing{text-align:center;padding:6rem 0 7rem}.closing .jp{font-size:2rem;color:var(--accent)}.closing blockquote{margin:2rem auto;font-style:italic;font-size:clamp(1.3rem,3vw,2rem);max-width:680px}.closing p{color:var(--soft)}footer{border-top:1px solid var(--line);padding:1.8rem;text-align:center;font: .8rem system-ui,sans-serif;color:var(--muted)}.hidden-symbols .symbol{display:none}.hidden-symbols .precept{grid-template-columns:1fr}.hidden-symbols .num{font-size:.95rem}@media(max-width:560px){.precept{grid-template-columns:46px 1fr;gap:.8rem;padding:2rem 0}.symbol{width:42px;height:42px;font-size:1.25rem}.hero{padding-top:5rem}.precept p{font-size:1rem}}@media print{body{background:white;color:#111}body:before,.controls{display:none}.precept{break-inside:avoid;border-color:#bbb}.precept p,.intro,.closing p{color:#333}.mark,.eyebrow,.num,.group-label,.symbol,.motto{color:#176b67}.hero{padding:2rem 0}.closing{padding:2rem 0}a{color:#111}}

/* Illustrated edition: consistent Michi Institute shell, warm washi art */
.wrap{width:min(100% - 2.5rem,1080px)}
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#091b24,#102c38 60%,#0a202a)}
.hero:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-6rem;height:10rem;border-radius:50%;background:#23536422;filter:blur(24px);pointer-events:none}
.precept{grid-template-columns:minmax(230px,38%) 1fr;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding:3.7rem 0}
.art{margin:0;aspect-ratio:1;overflow:hidden;background:#f4efe4;border-radius:3px;box-shadow:0 18px 44px #0003;border:1px solid #50656b}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.precept h2{font-size:clamp(1.45rem,3vw,2.15rem)}.precept p{font-size:1.12rem}
.hidden-symbols .art{display:none}.hidden-symbols .precept{grid-template-columns:1fr}
@media(max-width:690px){.precept{grid-template-columns:1fr;gap:1rem;padding:2.7rem 0}.art{width:100%;max-width:560px;justify-self:center}.precept p{font-size:1.02rem}}
@media print{.precept{grid-template-columns:34% 1fr;gap:1rem;padding:1rem 0;page-break-inside:avoid}.art{box-shadow:none}.precept p{font-size:10pt}.precept h2{font-size:15pt}}

.precept:not(:has(.art)){grid-template-columns:1fr!important}
.one-col{grid-template-columns:1fr}
[data-one]{grid-template-columns:1fr}