:root{--ink:#1a1033;--ink-2:#2a1d52;--panel:#231845;--panel-hi:#34276a;--paper:#fff8ec;--muted:#c9bfe8;--scrim:#1a1033db;--gold-1:#fff3b0;--gold-2:#f5b82e;--gold-3:#a5600a;--tier-0:#48d25e;--tier-1:#3f8cff;--tier-2:#b055ff;--tier-3:#ffc21f;--a-water:#3a8bff;--a-fire:#ff8a2a;--a-nature:#4cc46a;--a-earth:#c9853f;--a-thunder:#8f63f5;--grass-1:#9bdb6e;--sand-1:#f2d29b;--snow-1:#f4f8ff;--fs-s:14px;--fs-m:16px;--fs-l:19px;--fs-xl:24px;--fs-xxl:32px;--fs-title:clamp(44px, 11vw, 88px);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--bar-h:60px;--r-s:8px;--r-m:14px;--r-l:22px;--r-pill:999px;--rim:0 0 0 3px var(--ink);--drop:0 4px 0 var(--ink);--bevel:inset 2px 2px 0 #fffc, inset -2px -2px 0 #140c2859;--lip:inset 0 2px 0 #ffffff14;--soft:0 12px 28px #08031873}*{box-sizing:border-box}html{background:var(--ink);color:var(--paper);word-break:keep-all;overflow-wrap:anywhere;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-family:Jua,Malgun Gothic,Apple SD Gothic Neo,sans-serif;font-weight:400}body{background:var(--ink);margin:0}h1,h2,b,dt,strong{font-weight:400}a{color:inherit}img{max-width:100%;height:auto;display:block}img[data-src]:not([src]){display:none}.bar{z-index:10;height:var(--bar-h);justify-content:space-between;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);background:var(--scrim);display:flex;position:fixed;inset:0 0 auto}.brand{align-items:center;gap:var(--sp-2);font-size:var(--fs-l);text-decoration:none;display:flex}.brand img{border-radius:var(--r-s);width:32px;height:32px}.brand:focus-visible{outline:3px solid var(--paper);outline-offset:3px;border-radius:var(--r-s)}.btn{height:52px;padding:0 var(--sp-6);border-radius:var(--r-m);font:inherit;font-size:var(--fs-l);color:var(--ink);white-space:nowrap;background:linear-gradient(var(--gold-1), var(--gold-2));box-shadow:var(--rim), var(--drop), var(--bevel);justify-content:center;align-items:center;line-height:1;text-decoration:none;transition:transform .12s ease-out;display:inline-flex}.btn:hover{box-shadow:var(--rim), 0 6px 0 var(--ink), var(--bevel);transform:translateY(-1px)}.btn:active{box-shadow:var(--rim), 0 2px 0 var(--ink), 0 0 0 3px var(--gold-3) inset;transform:translateY(2px)}.btn:focus-visible{outline:3px solid var(--paper);outline-offset:3px}.btn-l{height:60px;padding:0 var(--sp-7);font-size:var(--fs-xl)}.btn-s{height:40px;padding:0 var(--sp-4);font-size:var(--fs-m)}#stage{z-index:0;position:fixed;inset:0}#stage canvas{opacity:0;width:100%;height:100%;transition:opacity .6s ease-out;display:block}#stage canvas.on{opacity:1}#stage.grab canvas{cursor:pointer}.no3d #stage{display:none}main{z-index:1;position:relative}.pin{padding:calc(var(--bar-h) + var(--sp-5)) clamp(var(--sp-4), 4vw, var(--sp-8)) var(--sp-6);align-items:center;display:flex}.js:not(.no3d) main,.js:not(.no3d) .beat{pointer-events:none}.js:not(.no3d) .beat{height:240vh}.js:not(.no3d) #s1{height:170vh}.js:not(.no3d) #s6{height:200vh}.js:not(.no3d) .pin{height:100vh;height:100svh;position:sticky;top:0}.beat[data-side=left] .pin{justify-content:flex-start}.beat[data-side=right] .pin{justify-content:flex-end}.beat[data-side=bottom] .pin{justify-content:center;align-items:flex-end}.panel{pointer-events:auto;width:min(440px,38vw);padding:var(--sp-6);border-radius:var(--r-l);background:var(--panel);box-shadow:var(--rim), var(--drop), var(--lip), var(--soft)}.panel.hero{box-shadow:none;background:0 0;width:min(560px,44vw);padding:0}.panel.finale{text-align:center;width:min(560px,100%)}h1{margin:0 0 var(--sp-4);font-size:var(--fs-title);color:var(--gold-1);line-height:1.15}h2{margin:0 0 var(--sp-3);font-size:var(--fs-xxl);line-height:1.2}p{margin:0 0 var(--sp-4);font-size:var(--fs-m);max-width:34em;line-height:1.6}.lead{font-size:var(--fs-xl);line-height:1.5}.lead em{color:var(--gold-1);font-style:normal}.small{font-size:var(--fs-s);color:var(--muted);margin-bottom:0}.note{font-size:var(--fs-s);color:var(--muted)}.cta-row{margin:var(--sp-5) 0 var(--sp-4)}.cue{margin:var(--sp-7) 0 0;font-size:var(--fs-s);color:var(--muted)}.tiers{gap:var(--sp-3);margin:0 0 var(--sp-4);flex-wrap:wrap;padding:0;list-style:none;display:flex}.tiers li{height:32px;padding:0 var(--sp-4);border-radius:var(--r-pill);color:var(--ink);font-size:var(--fs-s);box-shadow:var(--rim);align-items:center;display:inline-flex}.tiers .t0{background:var(--tier-0)}.tiers .t1{background:var(--tier-1)}.tiers .t2{background:var(--tier-2)}.tiers .t3{background:var(--tier-3)}.roles{gap:var(--sp-2);margin:0 0 var(--sp-4);grid-template-columns:1fr 1fr;display:grid}.roles div{padding:var(--sp-3);border-radius:var(--r-m);background:var(--ink-2)}.roles dt{color:var(--gold-1);font-size:var(--fs-m)}.roles dd{margin:var(--sp-1) 0 0;color:var(--muted);font-size:var(--fs-s);line-height:1.4}.cycle{margin:0 0 var(--sp-4)}.cycle svg{width:100%;max-width:240px;margin:0 auto;display:block;overflow:visible}.cycle circle{stroke:var(--ink);stroke-width:3px}.cycle text{fill:var(--ink);text-anchor:middle;dominant-baseline:central;font-family:inherit;font-size:15px}.cycle .links line{stroke:var(--muted);stroke-width:3px;stroke-linecap:round;marker-end:url(#arw)}.cycle .arw{fill:var(--muted)}.cycle .water circle{fill:var(--a-water)}.cycle .fire circle{fill:var(--a-fire)}.cycle .nature circle{fill:var(--a-nature)}.cycle .earth circle{fill:var(--a-earth)}.cycle .thunder circle{fill:var(--a-thunder)}.cycle figcaption{margin-top:var(--sp-2);text-align:center;font-size:var(--fs-s);color:var(--muted)}.chapters{margin:var(--sp-4) 0 0;padding:0;list-style:none}.chapters li{column-gap:var(--sp-3);padding-bottom:var(--sp-4);grid-template-columns:20px 1fr;display:grid;position:relative}.chapters li:last-child{padding-bottom:0}.chapters li:before{content:"";width:20px;height:20px;margin-top:var(--sp-1);border-radius:var(--r-pill);box-shadow:var(--rim);grid-row:1/span 2}.chapters li:not(:last-child):after{content:"";top:28px;left:0;bottom:var(--sp-1);background:linear-gradient(var(--panel-hi), var(--panel-hi)) center / 2px 100% no-repeat;width:20px;position:absolute}.chapters b{font-size:var(--fs-l)}.chapters span{font-size:var(--fs-s);color:var(--muted);line-height:1.5}.chapters .c1:before{background:var(--grass-1)}.chapters .c2:before{background:var(--sand-1)}.chapters .c3:before{background:var(--snow-1)}.chapters .c4:before{background:var(--gold-2)}.chapters .c4 b{color:var(--gold-1)}.facts{justify-content:center;gap:var(--sp-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.facts li{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--ink-2);color:var(--muted);font-size:var(--fs-s)}.tag{z-index:5;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-m);background:var(--panel);box-shadow:var(--rim), var(--drop);pointer-events:none;opacity:0;white-space:nowrap;flex-direction:column;transition:opacity .15s ease-out;display:flex;position:fixed;top:0;left:0}.tag.on{opacity:1}.tag b{font-size:var(--fs-m)}.tag span{font-size:var(--fs-s);color:var(--muted)}.no3d .tag,.no3d .hint3d,.no3d .cue{display:none}.fallback{pointer-events:auto;margin:0;display:none}.fallback img{border-radius:var(--r-l);width:270px;box-shadow:var(--rim), var(--drop), var(--soft)}.fallback.icon img{width:168px}.no3d .fallback,html:not(.js) .fallback{display:block}.no3d .beat,html:not(.js) .beat{pointer-events:auto;height:auto}.no3d .pin,html:not(.js) .pin{gap:var(--sp-7);height:auto;padding:var(--sp-8) var(--sp-4);grid-template-columns:minmax(0,440px) auto;justify-content:center;align-items:center;display:grid;position:static}.no3d #s1 .pin,html:not(.js) #s1 .pin{padding-top:calc(var(--bar-h) + var(--sp-8))}.no3d .panel,html:not(.js) .panel{width:100%}.no3d .beat[data-side=right] .panel,html:not(.js) .beat[data-side=right] .panel{order:2}.foot{z-index:1;justify-content:center;gap:var(--sp-5);padding:var(--sp-6) var(--sp-4) var(--sp-7);font-size:var(--fs-s);flex-wrap:wrap;display:flex;position:relative}.foot a{color:var(--muted)}.foot a:hover{color:var(--paper)}.foot a:focus-visible{outline:3px solid var(--paper);outline-offset:3px}@media (max-width:959px){.js:not(.no3d) .pin{padding:calc(var(--bar-h) + var(--sp-3)) var(--sp-4) var(--sp-4);justify-content:center;align-items:flex-end}.beat[data-side] .pin{justify-content:center}.js:not(.no3d) .beat[data-align=top] .pin{align-items:flex-start}.panel,.panel.hero,.panel.finale{width:min(560px,100%)}.panel{padding:var(--sp-5)}.panel.hero{padding:0}h2{font-size:var(--fs-xl)}.lead{font-size:var(--fs-l)}.cta-row{margin:var(--sp-4) 0 var(--sp-3)}.cue{margin-top:var(--sp-4)}.cycle svg{max-width:168px}.no3d .pin,html:not(.js) .pin{justify-items:center;gap:var(--sp-6);padding:var(--sp-7) var(--sp-4);grid-template-columns:minmax(0,1fr)}.no3d .beat[data-side=right] .panel,html:not(.js) .beat[data-side=right] .panel{order:0}.fallback img{width:220px}}@media (max-width:959px) and (max-height:700px){.js:not(.no3d) .roles,.js:not(.no3d) .cycle figcaption{display:none}.js:not(.no3d) .cycle svg{max-width:132px}.js:not(.no3d) .panel p{margin-bottom:var(--sp-3)}}@media (prefers-reduced-motion:reduce){.btn,.tag,#stage canvas{transition:none}}