:root{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: planner sheet. Summary strip on top, the 9x9 chart as a map on the left, the selected 3x3 block as the writing surface on the right. */
:root{
  --bg:#EDF0F3; --surface:#FBFCFD; --fg:#1B2450; --muted:#5C6587; --line:#C9CFDB; --gold:#C98A0B;
  --a0:#C4533F; --a1:#C9781F; --a2:#8E8A1E; --a3:#3F8F5A; --a4:#23898C; --a5:#3B6FC2; --a6:#7A58B8; --a7:#B8508E;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#12162B; --surface:#1B2140; --fg:#E6E9F5; --muted:#9AA2C4; --line:#343C63; --gold:#E9B544;
  --a0:#E88673; --a1:#EDA55A; --a2:#C6C25A; --a3:#6FC48C; --a4:#5CC2C5; --a5:#7FA6EE; --a6:#AC8EE6; --a7:#E583BE;
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#12162B; --surface:#1B2140; --fg:#E6E9F5; --muted:#9AA2C4; --line:#343C63; --gold:#E9B544;
  --a0:#E88673; --a1:#EDA55A; --a2:#C6C25A; --a3:#6FC48C; --a4:#5CC2C5; --a5:#7FA6EE; --a6:#AC8EE6; --a7:#E583BE;
  color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px;padding-block:24px 56px;display:flex;flex-direction:column;gap:22px}
button,textarea,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

header{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:end;justify-content:space-between}
.brand{display:block;color:inherit;text-decoration:none;font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1;margin:0}
h1.tag{color:var(--muted);margin:7px 0 0;font-family:var(--body);font-size:15px;font-weight:500;line-height:1.4;max-width:44ch;text-wrap:balance}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{display:inline-block;color:inherit;text-decoration:none;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:500}
.tab[aria-current="page"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tab:disabled{cursor:default;color:var(--muted);border-style:dashed}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-left:6px;align-self:center}
.lang a{text-decoration:none;background:none;border:0;padding:5px 9px;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--muted)}
.lang a[aria-current="true"]{background:var(--fg);color:var(--bg)}
.tab small{font-family:var(--mono);font-size:10px;margin-left:5px;letter-spacing:.04em}

.note{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;border:1px dashed var(--line);border-radius:8px;padding:10px 14px;color:var(--muted);font-size:14px}
.note b{color:var(--fg);font-weight:700}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:14px;font-weight:500}
.btn:hover{border-color:var(--fg)}
.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:disabled{cursor:default;color:var(--muted);border-style:dashed;background:none}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;margin:2px 0 0;text-wrap:balance}

/* progress strip */
.progress{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:center}
.count{font-family:var(--display);font-weight:700;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.count span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted);margin-left:6px}
.bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.bar{display:flex;flex-direction:column;gap:4px;min-width:0}
.bar i{display:block;height:6px;border-radius:3px;background:color-mix(in oklab,var(--c) 22%,var(--surface));overflow:hidden}
.bar i b{display:block;height:100%;background:var(--c)}
.bar span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.progress{grid-template-columns:minmax(0,1fr)}.bar span{display:none}}

.work{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:900px){.work{grid-template-columns:minmax(0,1fr)}}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* 9x9 map */
.map{container-type:inline-size;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;aspect-ratio:1;max-width:100%}
.block{--c:var(--gold);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:1px;padding:0;border:1px solid var(--line);background:var(--line);border-radius:4px;overflow:hidden;cursor:pointer;min-width:0;min-height:0}
.block[aria-pressed="true"]{outline:2px solid var(--fg);outline-offset:1px}
.block span{display:flex;align-items:center;justify-content:center;text-align:center;padding:2px;background:color-mix(in oklab,var(--c) 9%,var(--surface));font-size:clamp(5px,1.55cqw,10.5px);line-height:1.18;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;min-width:0;min-height:0}
.block span.core{background:color-mix(in oklab,var(--c) 38%,var(--surface));font-weight:700}
.block span.done{background:color-mix(in oklab,var(--c) 26%,var(--surface));text-decoration:line-through;text-decoration-color:var(--c)}
.block.mid span{background:color-mix(in oklab,var(--k) 38%,var(--surface));font-weight:700}
.block.mid span.core{background:var(--fg);color:var(--bg);font-family:var(--display)}

/* 3x3 editor */
.edit{--c:var(--gold);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cell{display:flex;flex-direction:column;gap:4px;background:color-mix(in oklab,var(--k,var(--c)) 10%,var(--surface));border:1px solid var(--line);border-radius:6px;padding:8px;min-width:0;aspect-ratio:1/1.02}
.cell.core{background:color-mix(in oklab,var(--c) 36%,var(--surface));border-color:var(--c)}
.cell label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cell.core label{color:var(--fg)}
.cell textarea{flex:1;width:100%;min-height:0;resize:none;border:0;background:none;padding:0;font-size:14px;line-height:1.3;outline-offset:3px}
.cell.core textarea{font-weight:700}
.cell textarea::placeholder{color:var(--muted);opacity:.7}
.tick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.tick input{accent-color:var(--fg);margin:0;width:15px;height:15px}
@media (max-width:480px){.cell{padding:6px;aspect-ratio:1/1.25}.cell textarea{font-size:13px}}
.hint{color:var(--muted);font-size:13.5px;margin:0;max-width:62ch}

/* wheel */
.wheelbox{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px}
.wheelbox svg{display:block;width:100%;height:auto}
.wheelbox text{font-family:var(--body);font-size:11px;fill:var(--fg)}
.wheelbox text.n{font-family:var(--mono);font-size:8px;fill:var(--muted)}
.sliders{display:flex;flex-direction:column;gap:10px}
.sl{display:grid;grid-template-columns:10px minmax(0,8.5em) minmax(0,1fr) 2.2em;gap:10px;align-items:center}
.sl i{width:10px;height:10px;border-radius:2px;background:var(--c)}
.sl input{width:100%;accent-color:var(--c)}
.sl output{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.low{border-left:3px solid var(--c);padding:4px 0 4px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.low p{margin:0;max-width:52ch}
.story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;border-top:1px solid var(--line);padding-top:22px;margin-top:6px}
.story>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.story h3{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0}
.story p{margin:0;font-size:14.5px;line-height:1.6;max-width:62ch}
@media (max-width:900px){.story{grid-template-columns:minmax(0,1fr)}}
.sl button{background:none;border:0;padding:0;text-align:left;cursor:pointer;text-decoration:underline dotted;text-decoration-color:var(--muted);text-underline-offset:4px;min-width:0}
.sl button[aria-expanded="true"]{font-weight:700;text-decoration:none}
.def{margin:-2px 0 4px 20px;padding:8px 12px;border-left:3px solid var(--c);background:color-mix(in oklab,var(--c) 10%,var(--surface));border-radius:0 6px 6px 0;font-size:14px;line-height:1.5}
.def b{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:3px}
.wheelbox text.lbl{cursor:pointer}
footer a{color:inherit}
footer{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}

.more{display:flex;flex-direction:column;gap:26px;margin-top:28px}
#view-mandala .more{margin-top:6px}
.more .story{margin-top:0}
.about{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.about>p{margin:0;max-width:70ch;font-size:15.5px;line-height:1.6}
.about a,.story a{color:inherit;text-underline-offset:3px}
.story.faq{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;padding-top:6px;margin-top:0}
@media (max-width:900px){.story.faq{grid-template-columns:minmax(0,1fr)}}