:root{--bg:#fbf7f0;--ink:#2a2521;--muted:#7a7068;--line:#e8dfd3;--love:#f2a29b;--good:#f5c877;--needs:#bba8f0;--paid:#8cd6c3;--serif:"Fraunces", Georgia, "Times New Roman", serif;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0}body{background:radial-gradient(1200px 800px at 30% 15%, #fffdf9 0%, var(--bg) 55%, #f3ece1 100%);min-height:100vh;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;padding:48px 28px;display:flex}.wrap{grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);align-items:center;gap:24px 64px;width:100%;max-width:1180px;display:grid}header{grid-column:1/-1}.kanji{color:var(--muted);letter-spacing:.35em;margin-bottom:10px;font-family:Noto Serif JP,serif;font-size:14px}h1{font-family:var(--serif);letter-spacing:-.02em;font-size:clamp(44px,5.5vw,64px);font-weight:600;line-height:1}.sub{color:var(--muted);margin-top:12px;font-size:16px}.diagram svg{touch-action:manipulation;width:100%;height:auto;display:block;overflow:visible}.circles{isolation:isolate;filter:drop-shadow(0 28px 36px #5a3c1e1a)}.circle{mix-blend-mode:multiply;fill-opacity:.82;opacity:0;transform-box:fill-box;transform-origin:50%;animation:1s cubic-bezier(.2,.8,.2,1) forwards pop}.circle:nth-child(2){animation-delay:80ms}.circle:nth-child(3){animation-delay:.16s}.circle:nth-child(4){animation-delay:.24s}@keyframes pop{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes fade{0%{opacity:0}to{opacity:1}}.center-fill,.overlay-layer,.outlines,.labels{opacity:0;animation:.8s .55s forwards fade}.outline{fill:none;stroke:#fffffff2;stroke-width:1.5px}.zone{opacity:0;transition:opacity .22s}.zone.active{opacity:1}.labels{pointer-events:none}.label-circle{font:600 13px var(--sans);letter-spacing:.14em;fill:var(--ink);text-anchor:middle}.label-pair{font:italic 400 21px var(--serif);fill:var(--ink);text-anchor:middle}.label-center{font:600 19px var(--serif);letter-spacing:.22em;fill:#3b2a10;text-anchor:middle}.label-center-jp{letter-spacing:.3em;fill:#6b5020;text-anchor:middle;font:400 11px Noto Serif JP,serif}.dot{fill:#fff;opacity:.9}svg.hovering{cursor:pointer}.panel{flex-direction:column;gap:22px;display:flex}.card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);background:#ffffffb8;border-radius:22px;min-height:580px;padding:30px 30px 26px;box-shadow:0 20px 50px -24px #5a3c1e40}.card .content{transition:opacity .18s,transform .18s}.card .content.swap{opacity:0;transform:translateY(4px)}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:600}.card h2{font-family:var(--serif);letter-spacing:-.01em;margin:10px 0 12px;font-size:32px;font-weight:600;line-height:1.12}.card p{color:#4a423c;font-size:15.5px;line-height:1.6}.chips{flex-wrap:wrap;gap:8px;margin-top:22px;display:flex}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;align-items:center;gap:7px;padding:6px 11px 6px 9px;font-size:12px;font-weight:500;transition:opacity .2s;display:inline-flex}.chip i{border-radius:50%;width:10px;height:10px;display:inline-block}.chip.off{opacity:.38}.examples{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.examples-label{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-size:11px;font-weight:600}.examples ul{flex-direction:column;gap:8px;padding:0;list-style:none;display:flex}.examples li{color:#4a423c;padding-left:18px;font-size:14.5px;line-height:1.45;position:relative}.examples li:before{content:"";background:#d8c9b6;border-radius:50%;width:6px;height:6px;position:absolute;top:.55em;left:2px}.chip.off i{box-shadow:inset 0 0 0 1.5px #b9aea3;background:0 0!important}.explore-label{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-size:11px;font-weight:600}.pills{flex-wrap:wrap;gap:8px;display:flex}.pill{font:500 13px var(--sans);color:var(--ink);border:1px solid var(--line);cursor:pointer;background:#fff9;border-radius:999px;padding:8px 14px;transition:all .18s}.pill:hover{background:#fff;border-color:#d6cabb}.pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}.pill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.note{color:var(--muted);font-size:12.5px;line-height:1.6}@media (width<=900px){.wrap{grid-template-columns:1fr;gap:28px}.card{min-height:0}}@media (width<=600px){body{padding:32px 18px}.card{padding:24px 22px 22px}.label-circle{letter-spacing:.1em;font-size:16px}.label-pair{font-size:25px}.label-center{font-size:23px}.label-center-jp{font-size:13px}}