/* WhenCD — a quiet combat field guide. Layout and motion shared by all routes. */
:root{--bg:#0c1017;--panel:#151b25;--panel-deep:#101620;--line:#ffffff12;--border:#ffffff18;--text:#f1f3f5;--muted:#a0aec0;--accent:#ffc18c;--teal:#86ded1;--radius:20px}
body{background:radial-gradient(ellipse at 82% 0,#1f314025,transparent 45%),var(--bg);line-height:1.6}
body[data-journey=defensifs]{--accent:#86ded1}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#a9c5ea03 1px,transparent 1px),linear-gradient(90deg,#a9c5ea03 1px,transparent 1px);background-size:72px 72px;z-index:-1}
h1[tabindex="-1"]:focus{outline:none}
h1{font-family:var(--font);font-weight:800;letter-spacing:-2.5px}
button,a,summary,select{transition:color .2s,background .2s,border-color .2s,box-shadow .2s,transform .2s}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.site-masthead{position:sticky;top:0;z-index:35;background:#0c1017e8;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.masthead-inner{max-width:1440px;padding:18px 40px}
.site-masthead .brand{font-size:29px;letter-spacing:-1.8px}.site-masthead .brand svg{width:32px;height:32px}
.masthead-actions{display:flex;align-items:center;gap:28px}
.masthead-method{font-size:12px;min-height:44px;letter-spacing:.2px;color:#c7cfdb}
.masthead-method span{margin-left:10px;color:var(--accent)}
.motion-control{display:flex;align-items:center;gap:8px;font-size:11px;color:#9aa8bb;min-height:44px}
.motion-control>span:first-child{display:grid;place-items:center;width:26px;height:26px;border:1px solid #ffffff24;border-radius:50%;color:#d9e2ef}
.motion-control[aria-pressed=true]>span:first-child{color:var(--accent);border-color:var(--accent)}
.main>.topbar{max-width:1440px;height:56px;border:0}.breadcrumb{font-size:11px}.topbar-right{gap:18px}
.page-wrap{max-width:1440px;padding:12px 40px 0}
.journey-nav{gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px}
.journey-nav a,.journey-nav button{border:0;border-radius:8px;padding:10px 14px;font-size:12px;min-height:44px}
.journey-nav button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.journey-nav .change-character{font-size:11px;border:1px solid var(--line)}
.context-bar{gap:12px}.segmented{padding:3px;background:#111721;border-color:var(--line);border-radius:10px}
.segmented button{min-height:40px;padding:8px 20px}.segmented button[aria-pressed=true]{background:#26313e;color:#f1f3f5;box-shadow:0 2px 10px #0003}
.encounter-field select{min-height:44px;background:#121923;border-radius:10px}.encounter-field label{color:#9dabbf}
.context-info{width:32px;height:32px;min-width:32px;border-color:#ffffff25}
.spec-header{padding:22px 0;min-height:138px;border:0}
.spec-header.blood-art:before,.spec-header.blood-art:after{opacity:.28}
.spec-identity{position:relative;z-index:1;gap:20px}
.spec-emblem{width:78px;height:78px;border-radius:22px;padding:5px;box-shadow:0 0 45px color-mix(in srgb,var(--class) 10%,transparent)}
.spec-emblem img{border-radius:16px}
.spec-header h1{font-size:clamp(34px,4.4vw,56px);line-height:1.2;letter-spacing:-2px}
.eyebrow{font-size:9px;letter-spacing:2px}.spec-subline{font-size:12px;color:#b7c2d2}
.spec-tabs{gap:24px;border-color:var(--line);margin-bottom:22px}
.spec-tab{padding:12px 0 15px;min-height:48px;font-size:12px}.spec-tab img{width:22px;height:22px;border-radius:7px}
.section-heading{margin:28px 0 18px}.section-heading>.quiet-link{white-space:nowrap;flex-shrink:0}.section-heading h2{font-size:18px;letter-spacing:-.5px}.section-heading h2 span{font-size:12px;margin-left:14px;color:#9aa8bb}
.quiet-link{font-size:12px;min-height:40px}.mplus-season{font-size:11px;gap:14px;margin:0 0 20px;color:#8e9caf}
.mplus-season .quiet-link{min-height:28px}.phase-badge{font-size:9px;letter-spacing:.5px;border:1px solid #ffffff16;background:#ffffff04;padding:5px 8px;border-radius:6px;color:#bdc6d6}
.workspace-grid{grid-template-columns:minmax(0,1fr) 302px;gap:24px;align-items:start}
.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(140deg,#19212c,#141a24 68%);box-shadow:0 14px 45px #0000000d}
.card-pad{padding:28px}.rotation-card{padding:28px 30px;background:linear-gradient(150deg,#19202b,#141a24 45%)}
.card-topline .overline{font-size:10px;letter-spacing:1.6px;color:#a6b5c9}
.rotation-card>h2{font-size:27px;line-height:1.3;letter-spacing:-1px;margin-top:24px}
.rotation-card>.muted{font-size:13px;color:#aab7c8;margin-top:8px;line-height:1.8}
.target-mode-tabs{margin:18px 0 0;gap:10px;display:grid;grid-template-columns:1fr 1fr}
.target-mode-tabs button{min-height:52px;background:#0d141d;border-color:#ffffff17;border-radius:10px;font-size:13px}
.target-mode-tabs button[aria-pressed=true]{background:#ffc18c0c;border-color:#ffc18c66;color:#ffd0a7}
.target-mode-tabs button small{font-size:10px;margin-left:6px;color:#a5b0c1}
.rotation-tabs{margin-top:24px;gap:0;border-bottom:1px solid #ffffff12;display:flex}
.rotation-tab{padding:14px 22px 14px 0;margin-right:26px;min-height:50px;font-size:13px;color:#95a4b8;position:relative}
.rotation-tab[aria-selected=true]{color:#ffe0c3;border-color:var(--accent)}
.guide-variant-picker{padding:16px 0 0;margin-bottom:20px;border-top:0}.guide-variant-picker summary{font-size:11px;color:#b4c1d2}
.guide-variant-options button{border-radius:8px;min-height:44px}
.simple-heading{font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-top:26px}
.guide-reading{font-size:14px;margin:18px 0 10px;color:#dce2eb}
.guide-context-note{font-size:12px;color:#98a8be}
.guide-timeline.simple-timeline{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 15px;margin:30px 0}
.guide-timeline .simple-step{padding:13px 5px 10px;border-radius:12px;background:#ffffff02}
.guide-timeline .simple-step strong{font-size:12px;min-height:34px;font-weight:700}
.guide-timeline .simple-step small{font-size:11px;line-height:1.6;color:#bbc5d4}
.guide-timeline .simple-step .spell-button{width:52px;height:52px;flex-basis:52px}
.simple-step:not(:last-child):not(:nth-child(6n)):after{top:30px;right:-11px}
.guide-timeline .simple-step:nth-child(4n):after{display:none}.guide-timeline .simple-step:nth-child(6n):not(:last-child):after{display:block}
.simple-number{top:5px;left:calc(50% - 35px);background:#2b3544;border:1px solid #71809677;color:white;width:19px;height:19px;font-size:9px}
.spell-button{border-radius:12px}.spell-button:hover{transform:translateY(-2px);box-shadow:0 0 0 3px #ffc18c33,0 6px 18px #0005}
.ability-icon,.spell-button img{object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid #ffffff26}
.inline-ability{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;line-height:1.4;white-space:normal}
.inline-ability img{width:18px!important;height:18px!important;min-width:18px;max-width:none;border-radius:4px;display:inline}
.spell-replacement{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap;font-size:10px;line-height:1.5;color:#b4c0d0;margin-top:7px}
.spell-replacement>span:first-of-type{color:#8797aa}.spell-replacement b{font-size:10px;color:#c7abec;font-weight:500}
.simple-step .spell-replacement{justify-content:center;max-width:100%}.simple-step .spell-replacement img{width:20px;height:20px}
.simple-details{padding:15px 0;border-color:#ffffff10}.simple-details summary{font-size:12px;color:#c2cbd9;min-height:24px}
.simple-details p{color:#aab8ca;font-size:12px}
.simple-return{padding:14px 0;border-top:1px solid #ffffff10;color:#e4bf9f;font-size:12px}
.talent-card{padding:25px;background:linear-gradient(155deg,#1b222d,#131a23);position:relative;overflow:hidden}
.talent-card:before{content:"";height:2px;position:absolute;top:0;left:25px;right:25px;background:linear-gradient(90deg,var(--class),transparent);opacity:.8}
.talent-name{font-size:25px;line-height:1.3;letter-spacing:-.8px;margin:18px 0 8px}
.talent-kicker,.talent-variation,.talent-note{font-size:11px;line-height:1.8}.talent-variation{margin:16px 0;color:#a2b1c4}.talent-note{color:#8e9eb3}
.talent-visual{margin:22px 0 18px}.primary-button{background:var(--accent);color:#271b12;border-radius:9px;min-height:44px;font-size:12px;font-weight:800}
.primary-button:hover{background:#ffcea5;transform:translateY(-1px);box-shadow:0 8px 22px #ffc18c16}
.right-column{position:sticky;top:100px}.talent-card .overline{font-size:10px}
.unified-cycle{margin-top:24px}.cycle-intro{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}
.flow-mark{font-size:29px;color:var(--accent);line-height:1.2}.cycle-intro b{font-size:15px}
.cycle-intro p{font-size:12px;color:#a6b4c7;margin:5px 0 0;line-height:1.7}
.cycle-intro>.phase-badge{margin-left:auto;white-space:nowrap}
.flow-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#a5b9d1;margin:24px 0 10px}
.flow-help{font-size:11px;line-height:1.8;color:#97a9bf;margin-bottom:14px}
.cycle-shared{border-left:2px solid #ffc18c38;padding-left:18px;margin:20px 0}
.cycle-branch{margin:10px 0;border:1px solid #83d8ce33;border-radius:12px;background:#72d5c806;overflow:hidden}
.cycle-branch>summary{display:flex;align-items:center;gap:10px;padding:16px;cursor:pointer;list-style:none}
.cycle-branch>summary::-webkit-details-marker{display:none}
.branch-symbol{font-size:21px;color:#8de4d6}.branch-heading{min-width:0;flex:1}.branch-heading small{display:block;color:#86bdba;font-size:9px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:5px}
.branch-heading strong{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12px;font-weight:700;color:#def1ee;line-height:1.5}
.branch-heading em{font-style:normal;color:#8dabae;font-weight:400;font-size:10px}.branch-heading img{width:28px;height:28px;border-radius:6px}
.branch-preview{display:flex;align-items:center;gap:4px;opacity:.8}.branch-preview i{font-style:normal;color:#60768b}
.branch-open{font-size:9px;color:#95bdba;white-space:nowrap}.branch-open>span{display:inline-block;font-size:16px;margin-left:8px}
.cycle-branch[open]{border-color:#89dcd17a;background:#78d3c709}.cycle-branch[open] .branch-open>span{transform:rotate(180deg)}
.branch-content{padding:0 18px 10px;border-top:1px solid #8de4d620}
.branch-reason{font-size:12px;line-height:1.8;margin:16px 0 10px;color:#bdcfda}.sequence-instruction{font-size:11px;color:#8dd0c8}
.cycle-branch .simple-step small{color:#a9dfd6}
.cycle-loop{font-size:11px;color:#a7b8ce;padding:18px 0 6px;line-height:1.7}
.cycle-caution{border-top:1px solid #ffffff10;font-size:11px;color:#91a4bf;line-height:1.8;margin-top:18px;padding-top:16px}
.cycle-tools{border:1px solid #ffc18c25;background:#ffc18c05;border-radius:10px;margin:20px 0}
.cycle-tools>summary{display:flex;align-items:center;gap:10px;padding:13px 15px;list-style:none;font-size:11px;color:#e3c3a8;cursor:pointer}
.cycle-tools .tools-icons{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}
.cycle-tools>.guide-timeline{margin:20px 16px}.cycle-tools summary>span:first-child{flex:1}
.cycle-weave{border:1px solid #b9a7ec22;background:#b9a7ec06;padding:14px 16px;border-radius:12px;margin-bottom:18px}
.cycle-weave>.flow-label{color:#c2b4e2;display:block;margin:0}
.cycle-weave .guide-timeline{margin:18px 0 0}.cycle-weave .simple-step small{color:#c8b8e9}
.cycle-amplifiers{margin:18px 0}.amplifier-note{padding:12px 0;border-bottom:1px solid #ffffff0c}
.amplifier-note summary{display:flex;gap:8px;align-items:center;font-size:11px;list-style:none;cursor:pointer}
.amplifier-note summary b{color:#c8d2df;font-size:11px}.amplifier-note summary>span{font-size:10px;color:#96a8c0;margin-left:auto}
.amplifier-note summary i{font-style:normal;color:#adbacd}.amplifier-note p{font-size:12px;line-height:1.8;color:#a8b7ca;margin:12px 0 0 32px}
/* Defense cards share the same threat → action hierarchy. */
.guild-intro{font-size:13px;color:#9aabbe;max-width:940px;line-height:1.9}
.guild-defense-section{margin-top:24px;padding:30px}.guild-defense-section>.muted{font-size:13px;margin-top:14px;color:#9badc1}
.panel-title h2{font-size:18px;letter-spacing:-.4px}.guild-coverage{font-size:11px;line-height:1.8;color:#86bdb5}
.guild-mechanics,.defensive-attack-grid{gap:18px;margin-top:24px}.guild-mechanic,.defensive-attack{background:#0d151f70;border:1px solid #ffffff0c;border-radius:14px;padding:24px;transition:border-color .2s,background .2s}
.guild-mechanic:hover,.defensive-attack:hover{border-color:#86ded133;background:#111d2770}
.guild-mechanic-title{gap:14px;font-size:15px;line-height:1.5}.guild-mechanic-icon{width:44px;height:44px;flex-basis:44px;border-radius:11px;box-shadow:0 5px 18px #0003}
.defense-evidence{font-size:9px;padding:4px 8px;color:#9dafc4;border-color:#ffffff12;border-radius:6px}
.defense-guidance p{font-size:12px;color:#b6c4d5;line-height:1.9}.defense-guidance p strong{color:#eef4f6;font-weight:700}
.guild-cd-row{gap:14px;padding:18px 0;border-color:#ffffff0d}.guild-cd-row>img{width:42px;height:42px;border-radius:10px}
.guild-cd-row strong{font-size:13px}.guild-cd-timing{font-size:11px;color:#8ce0cf}.guild-cd-meta{font-size:10px;color:#899fb8;line-height:1.8}
.guild-no-observation{font-size:11px;line-height:1.9;color:#8fa2ba;border-top:1px solid #ffffff0c;padding-top:16px}
.personal-usage-grid article{background:#8ce0cf05;border-color:#8ce0cf20}
footer{margin-top:56px;padding:25px 0;border-color:#ffffff10;color:#788ba5;font-size:10px}
dialog{border:1px solid #ffffff1c;border-radius:20px;background:#151e2b;box-shadow:0 35px 100px #0009;max-width:720px;color:#e5ebf4}
dialog::backdrop{background:#040810ba;backdrop-filter:blur(7px)}.dialog-header{border-color:#ffffff12}.dialog-header h2{font-size:23px;letter-spacing:-.7px}
#dialog-content p{font-size:13px;line-height:1.9}.spell-detail{gap:20px}.spell-detail img{border-radius:12px}.toast{background:#263747;border-color:#89b7c550;box-shadow:0 10px 35px #0005}
/* Landing and character selection. */
.onboarding .journey-home{max-width:1120px;padding:76px 0 38px;position:relative;isolation:isolate}
.home-kicker{font-size:9px;letter-spacing:2.1px;color:#a8bacf;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px}
.home-kicker>span{height:5px;width:5px;border-radius:50%;background:#ffc18c;box-shadow:0 0 12px #ffc18c}
.journey-home h1{font-size:clamp(40px,5.7vw,77px);line-height:1.12;letter-spacing:-3.4px;margin:26px 0 20px}
.journey-home h1 em{font-style:normal;color:#ffc18c}
.journey-home>p.home-lead{font-size:15px;line-height:1.9;color:#9eafc4}
/* Open paths blend into the landscape instead of covering it with panels. */
.journey-cards{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));gap:76px;margin:36px auto 0;max-width:980px;align-items:stretch}
.journey-cards:after{content:"";position:absolute;pointer-events:none;left:50%;top:25%;bottom:10%;width:1px;background:linear-gradient(transparent,#d6e7f533,transparent)}
.onboarding .journey-choice{--journey:#ffc18c;position:relative;isolation:isolate;overflow:visible;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 28px 26px;border:0;border-radius:0;background:none;box-shadow:none;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.onboarding .journey-choice.journey-defense{--journey:#86ded1}
.journey-choice:before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:2% -12% -2%;border-radius:50%;background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--journey) 11%,transparent),transparent 66%);opacity:.65;transition:opacity .4s,transform .4s}
.onboarding .journey-choice:hover,.onboarding .journey-choice:focus-visible{transform:translateY(-4px);box-shadow:none}
.onboarding .journey-choice:focus-visible{outline:0}
.journey-choice:hover:before,.journey-choice:focus-visible:before{opacity:1;transform:scale(1.06)}
.journey-index{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0;border:0;background:none;font-size:9px;line-height:1.4;letter-spacing:2.3px;font-weight:700;color:var(--journey);text-shadow:0 2px 10px #07111e}
.journey-index>i{width:4px;height:4px;transform:rotate(45deg);background:currentColor;box-shadow:0 0 10px currentColor}
.journey-emblem{position:relative;display:grid;place-items:center;flex:none;width:180px;height:180px;margin:18px auto 0;color:var(--journey);transition:transform .45s}
.journey-choice:hover .journey-emblem,.journey-choice:focus-visible .journey-emblem{transform:scale(1.06)}
.emblem-halo{position:absolute;inset:-32px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--journey) 22%,transparent),transparent 67%);animation:emblem-glow 5s ease-in-out infinite}
.emblem-orbit{position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--journey) 20%,transparent);border-top-color:var(--journey);border-radius:50%;box-shadow:0 -4px 18px -12px var(--journey),inset 0 0 18px color-mix(in srgb,var(--journey) 5%,transparent);animation:orbit 18s linear infinite}
.emblem-orbit:after{content:"";position:absolute;top:22px;right:20px;width:4px;height:4px;border-radius:50%;background:var(--journey);box-shadow:0 0 7px 2px var(--journey)}
.emblem-orbit.orbit-inner{inset:23px;border-style:dashed;border-color:color-mix(in srgb,var(--journey) 28%,transparent);animation:orbit 38s linear infinite reverse;box-shadow:none}
.orbit-inner:after{width:2px;height:2px;top:auto;right:auto;bottom:17px;left:17px;opacity:.75}
.emblem-core{position:relative;display:grid;place-items:center;width:98px;height:98px;border:1px solid color-mix(in srgb,var(--journey) 45%,transparent);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--journey) 10%,#0b16258c),#0b162526);box-shadow:inset 0 0 28px color-mix(in srgb,var(--journey) 7%,transparent),0 0 32px color-mix(in srgb,var(--journey) 9%,transparent);transition:box-shadow .4s}
.emblem-core svg{width:47px;height:47px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--journey) 50%,transparent))}
.journey-choice:hover .emblem-core,.journey-choice:focus-visible .emblem-core{box-shadow:inset 0 0 25px color-mix(in srgb,var(--journey) 20%,transparent),0 0 40px color-mix(in srgb,var(--journey) 18%,transparent)}
.emblem-rotation .emblem-orbit{animation-direction:reverse}
.emblem-rotation .orbit-inner{animation-direction:normal}
.journey-art-caption{display:flex;justify-content:center;align-items:center;gap:10px;color:#becdda;font-size:9px;letter-spacing:1.2px;line-height:1.5;margin:2px 0 19px;text-shadow:0 2px 8px #07111e}
.journey-art-caption i{color:var(--journey);font-style:normal}
.journey-choice h2{font-size:clamp(30px,3vw,38px);line-height:1.1;letter-spacing:-1.4px;margin:0 0 16px;text-shadow:0 3px 22px #07111e}
.journey-choice h2 em{font-style:normal;color:var(--journey)}
.journey-choice p{font-size:13px;min-height:0;line-height:1.8;color:#d0dbe7;max-width:305px;margin:0 auto 24px;flex:1;text-shadow:0 2px 9px #07111e}
.journey-cta{display:inline-flex;align-items:center;justify-content:center;gap:24px;width:auto;min-width:238px;min-height:50px;margin:0 auto;padding:13px 25px;border:1px solid color-mix(in srgb,var(--journey) 48%,transparent);border-radius:99px;background:#0b1927a8;box-shadow:inset 0 0 20px color-mix(in srgb,var(--journey) 6%,transparent),0 6px 25px #0002;font-size:12px;font-weight:700;color:var(--journey);transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.journey-cta svg{flex-shrink:0;transition:transform .3s}
.journey-choice:hover .journey-cta,.journey-choice:focus-visible .journey-cta{background:var(--journey);border-color:var(--journey);color:#102026;box-shadow:0 0 32px color-mix(in srgb,var(--journey) 22%,transparent)}
.journey-choice:focus-visible .journey-cta{outline:2px solid #fff;outline-offset:5px}
.journey-choice:hover .journey-cta svg,.journey-choice:focus-visible .journey-cta svg{transform:translateX(3px)}
@keyframes emblem-glow{50%{opacity:.5;transform:scale(.88)}}
.home-bottom{display:flex;justify-content:center;gap:22px;align-items:center;color:#afbed0;font-size:10px;margin:28px 0 0;letter-spacing:.4px;text-shadow:0 2px 8px #07111e}
.home-bottom i{color:#8da4bf;font-style:normal}
.character-menu{padding-top:32px;max-width:1100px}.selection-steps{gap:24px;margin:0 0 42px;font-size:11px;letter-spacing:.3px}
.selection-steps li[aria-current]{background:#ffc18c0c;padding:8px 14px;border-radius:99px;border:1px solid #ffc18c20}
.character-menu h1{font-size:46px;letter-spacing:-1.6px;margin:18px 0 12px}.character-menu-intro{font-size:14px;color:#9cadc2}
.class-choices{gap:14px}.character-choice{flex-basis:calc((100% - 42px)/4);background:linear-gradient(145deg,#1a222e,#121a25);border-color:#ffffff12;border-radius:15px;min-height:160px;padding:22px 14px;gap:10px}
.character-choice:after{content:"";position:absolute;bottom:0;left:25%;right:25%;height:1px;background:var(--choice-color);opacity:.25}
.character-choice img{width:48px;height:48px;border-radius:13px;box-shadow:0 6px 20px #0004,0 0 0 4px #ffffff03}
.character-choice strong{font-size:13px;font-weight:700}.character-choice>span{color:#8e9fb6;font-size:10px}
.character-choice:hover{background:color-mix(in srgb,var(--choice-color) 6%,#151d28);box-shadow:0 10px 28px #0003;border-color:color-mix(in srgb,var(--choice-color) 50%,transparent)}
.specialization-choice{flex-basis:260px;min-height:250px}.specialization-choice img{width:68px;height:68px;border-radius:17px}.specialization-choice strong{font-size:21px}
.selection-back{font-size:12px;margin-top:8px;color:#b0bed0}
/* Motion is decorative; all content remains available without it. */
.load-track{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;overflow:hidden}
.load-track span{display:block;background:#ffc18c;width:35%;height:100%;animation:loading-track 1.4s ease-in-out infinite}
.app-ready .load-track{opacity:0;transition:opacity .4s}.app-ready .load-track span{animation:none}
.loading-shell{padding:60px 0;max-width:900px}.loading-shell>span{display:block;background:linear-gradient(100deg,#172230,#243143,#172230);background-size:200% 100%;height:58px;border-radius:12px;margin-bottom:20px;animation:shimmer 1.4s infinite}
.loading-shell>span:nth-child(2){width:70%}.loading-shell>span:nth-child(3){height:200px}.loading-shell p{font-size:12px;color:#a1b2c8}
.reveal-item{opacity:1;transform:none}.reveal-item:not(.in-view){opacity:0;transform:translateY(16px)}
.reveal-item.in-view{transition:opacity .55s var(--reveal-delay,0ms),transform .55s cubic-bezier(.2,.7,.3,1) var(--reveal-delay,0ms),border-color .2s,background .2s,box-shadow .2s}
.view-content.entering{animation:view-appear .3s ease-out}
@keyframes flow-dot{0%,15%{left:0;opacity:0}30%{opacity:1}85%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.35;transform:scale(.94)}}
@keyframes loading-track{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes view-appear{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=off] .reveal-item{opacity:1!important;transform:none!important}
@media(min-width:1500px){.guide-timeline.simple-timeline{grid-template-columns:repeat(6,minmax(0,1fr))}.guide-timeline .simple-step:nth-child(4n):not(:last-child):after{display:block}.guide-timeline .simple-step:nth-child(6n):after{display:none}}
@media(max-width:1100px){.workspace-grid{grid-template-columns:minmax(0,1fr) 265px;gap:18px}.rotation-card{padding:24px}.talent-card{padding:20px}.branch-preview{display:none}.section-heading h2 span{display:block;margin:4px 0 0}.cycle-intro>.phase-badge{display:none}}
@media(max-width:900px){.workspace-grid{grid-template-columns:minmax(0,1fr)}.right-column{position:static;max-width:100%}.talent-card{display:block;max-width:100%}.talent-visual{max-width:350px;margin-left:auto;margin-right:auto}.talent-card .primary-button{max-width:350px;display:block;margin:auto}.talent-note{text-align:center}.branch-preview{display:flex}.class-choices .character-choice{flex-basis:calc((100% - 28px)/3)}.spec-header h1{font-size:44px}.guild-mechanics,.defensive-attack-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.masthead-inner{padding:10px 20px;gap:14px}.masthead-actions{gap:16px}.site-masthead .brand{font-size:26px}.site-masthead .brand svg{width:27px;height:27px}.motion-label{display:none}.masthead-method{font-size:10px}.page-wrap{padding:14px 18px 0}.main>.topbar{padding:0 20px;height:46px}.topbar-right .data-status{display:none}.patch{font-size:9px}.journey-nav{gap:2px;margin-bottom:18px;padding-bottom:12px}.journey-nav a,.journey-nav button{font-size:10px;padding:8px 9px}.journey-nav .change-character{margin-left:0;font-size:10px}.context-bar{flex-wrap:wrap;gap:10px}.encounter-field{margin-left:0;flex:1 1 220px;min-width:0}.encounter-field label{display:none}.encounter-field select{max-width:100%;width:100%;font-size:11px}.segmented button{font-size:11px;padding:8px 12px}.difficulty-label,.context-info{display:none}.spec-header{padding:25px 0 20px;min-height:132px}.spec-emblem{width:64px;height:64px;border-radius:18px}.spec-identity{gap:15px}.spec-header h1{font-size:clamp(25px,7.8vw,38px);letter-spacing:-1.1px}.spec-subline{font-size:10px}.spec-tabs{gap:6px 16px;overflow:visible;display:flex;flex-wrap:wrap;margin-bottom:18px}.spec-tabs .spec-tab{flex:0 1 auto;padding:9px 0}.spec-tab{font-size:11px;white-space:nowrap}.section-heading{margin-top:22px}.section-heading h2{font-size:16px}.section-heading h2 span{font-size:11px}.quiet-link{font-size:10px}.mplus-season{font-size:10px;flex-wrap:wrap;gap:8px}.rotation-card{padding:20px 16px}.rotation-card>h2{font-size:24px}.rotation-card>.muted{font-size:12px}.target-mode-tabs{gap:8px}.target-mode-tabs button{font-size:12px;padding:10px 6px}.target-mode-tabs button small{display:block;margin:0;font-size:9px}.rotation-tab{font-size:12px;margin-right:18px}.guide-timeline.simple-timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}.guide-timeline .simple-step:not(:last-child):nth-child(4n):after{display:block}.guide-timeline .simple-step:nth-child(3n):after{display:none!important}.guide-timeline .simple-step strong{font-size:11px}.guide-timeline .simple-step small{font-size:10px}.guide-reading{font-size:12px}.cycle-intro b{font-size:14px}.cycle-intro p{font-size:11px}.branch-preview{display:none}.cycle-branch>summary{padding:13px 10px;gap:7px}.branch-heading strong{font-size:13px}.branch-heading small{font-size:8px}.branch-open{font-size:9px}.branch-symbol{display:none}.branch-content{padding:0 12px 10px}.branch-reason{font-size:11px}.cycle-tools>summary{font-size:10px;flex-wrap:wrap}.cycle-tools .tools-icons img{height:22px;width:22px}.cycle-shared{padding-left:10px}.amplifier-note summary{flex-wrap:wrap}.amplifier-note summary>span{margin-left:0}.guild-defense-section{padding:20px 16px}.guild-mechanics,.defensive-attack-grid{grid-template-columns:1fr}.guild-mechanic,.defensive-attack{padding:20px}.guild-intro{font-size:12px}.panel-title h2{font-size:16px}.onboarding .journey-home{padding:42px 0 24px}.home-kicker{font-size:8px;letter-spacing:1.5px}.journey-home h1{font-size:43px;letter-spacing:-2px;margin-top:22px}.journey-home>p.home-lead{font-size:13px}.journey-cards{grid-template-columns:1fr;margin-top:28px;gap:40px}.journey-cards:after{display:none}.onboarding .journey-choice{padding:8px 18px 14px;border-radius:0}.journey-choice:before{inset:0 3%}.journey-choice h2{font-size:34px}.journey-choice p{font-size:12px;min-height:0;max-width:280px;margin-bottom:24px}.journey-emblem{width:166px;height:166px;margin-top:16px}.emblem-core{width:88px;height:88px;border-radius:50%}.emblem-core svg{width:42px;height:42px}.journey-art-caption{margin-bottom:18px}.journey-cta{min-height:48px;min-width:228px}.home-orbit{width:100%;height:500px;top:-100px}.home-bottom{font-size:9px;gap:13px}.character-menu{padding-top:18px}.character-menu h1{font-size:34px}.selection-steps{font-size:9px;gap:12px;margin-bottom:30px}.selection-steps li[aria-current]{padding:6px 10px}.selection-journey{font-size:9px}.class-choices{gap:10px}.class-choices .character-choice{flex-basis:calc((100% - 10px)/2);min-height:154px;padding:18px 10px}.character-choice strong{font-size:12px}.specialization-choice{flex-basis:calc((100% - 12px)/2);min-height:210px}.specialization-choice strong{font-size:18px}.specialization-choice img{height:58px;width:58px}footer{font-size:9px;display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}dialog{width:calc(100vw - 24px);padding:20px}.dialog-header h2{font-size:21px}.spell-detail{gap:12px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) *,html:not([data-motion=on]) *:before,html:not([data-motion=on]) *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html:not([data-motion=on]) .reveal-item{opacity:1!important;transform:none!important}}

/* A gentle pulse keeps the decision path alive without moving its content. */
.cycle-intro .flow-mark,.defensive-mark{animation:decision-breathe 5s ease-in-out infinite}
.branch-alternative b{display:inline-flex;align-items:center;gap:6px}
@keyframes decision-breathe{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .cycle-intro .flow-mark,html:not([data-motion=on]) .defensive-mark{animation:none}}

/* Opening and cycle share one spell timeline; motion never selects an ability. */
.guide-timeline .simple-step{border:1px solid #ffffff08;transition:background .25s,border-color .25s}
.guide-timeline .simple-step:hover,.guide-timeline .simple-step:focus-within{background:#ffffff05;border-color:#ffc18c38}
.guide-timeline[data-timeline-kind] .simple-step:after{display:none!important}
.timeline-link{position:absolute;right:-12px;top:26px;font-size:20px;line-height:1;color:#c7a688;pointer-events:none;animation:timeline-flow 3.6s ease-in-out infinite;animation-delay:var(--step-delay,0ms)}
.guide-timeline .simple-step:nth-child(4n) .timeline-link{display:none}
.guide-timeline[data-enter=on] .simple-step{animation:timeline-arrive .42s both;animation-delay:var(--step-delay,0ms)}
.guide-timeline .simple-step>small{overflow-wrap:anywhere}
.guide-timeline[data-timeline-kind=parallel] .simple-number{color:#c8b8e9}
.cycle-shared{border:0;padding-left:0}
.cycle-branch .timeline-link{color:#8dd0c8}
.cycle-branch .simple-step:hover,.cycle-branch .simple-step:focus-within{border-color:#8dd0c855}
.cycle-loop{display:flex;align-items:flex-start;gap:9px}
.loop-symbol{display:inline-block;color:var(--accent);font-size:18px;line-height:1.25;animation:decision-breathe 4s ease-in-out infinite}
@keyframes timeline-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes timeline-flow{0%,100%{opacity:.35;transform:translateX(0)}50%{opacity:.9;transform:translateX(2px)}}
@media(min-width:1500px){.guide-timeline .simple-step:nth-child(4n) .timeline-link{display:block}.guide-timeline .simple-step:nth-child(6n) .timeline-link{display:none}}
@media(max-width:650px){.guide-timeline .simple-step:nth-child(4n) .timeline-link{display:block}.guide-timeline .simple-step:nth-child(3n) .timeline-link{display:none}.cycle-shared{padding-left:0}.branch-content .guide-timeline{gap:22px 10px}.cycle-tools>.guide-timeline{margin:20px 12px}}

/* Shared fantasy environment; inner routes use a quieter treatment in field-guide.css. */
.home-world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0b1521;isolation:isolate}
.home-world-scene{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 46%;filter:saturate(.84) brightness(.76);transform:scale(1.08);animation:world-arrive 1.2s ease-out both,world-pan 28s ease-in-out infinite alternate}
.home-world:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07101c70 0%,#09132228 27%,#09142360 44%,#08101de0 85%,#0c1017ed 100%),radial-gradient(ellipse at 50% 25%,#07142238,transparent 65%)}
body[data-view=home] .journey-home{z-index:1}
body[data-view=home] .journey-home h1{text-shadow:0 3px 28px #07101cc9}
body[data-view=home] .journey-home .home-kicker,body[data-view=home] .journey-home .home-lead{text-shadow:0 2px 12px #07101c}
body[data-view=home] .journey-home .home-lead{color:#c3d0df}
.onboarding:has(.home-world) footer{position:relative;z-index:1}
.world-aurora{position:absolute;inset:-25% -12% 38%;opacity:.4;background:radial-gradient(ellipse at 32% 24%,#68c8df38,transparent 44%),radial-gradient(ellipse at 74% 60%,#bd9ad631,transparent 47%);mix-blend-mode:screen;animation:world-aurora 19s ease-in-out infinite alternate}
.world-fog{position:absolute;z-index:1;width:150%;height:54%;left:-25%;border-radius:50%;background:radial-gradient(ellipse at 22% 58%,#aac6dc3b,transparent 45%),radial-gradient(ellipse at 70% 60%,#8bd6dc24,transparent 42%);animation:world-fog 16s ease-in-out infinite alternate;opacity:.68}
.fog-near{top:55%;mix-blend-mode:screen}
.fog-far{top:16%;height:48%;opacity:.4;animation-duration:24s;animation-direction:alternate-reverse}
.world-particles{position:absolute;inset:0;z-index:1}
.world-particles i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#b3f1ed;box-shadow:0 0 9px 1px #98e5e080;opacity:0;animation:world-mote var(--speed) ease-in-out var(--delay) infinite}
.world-particles i:nth-child(3n){background:#ffd7a3;box-shadow:0 0 9px 1px #f8c18980}
@keyframes world-arrive{from{opacity:0}to{opacity:1}}
@keyframes world-pan{from{transform:scale(1.08) translate3d(1%,.4%,0)}to{transform:scale(1.12) translate3d(-1.3%,-.7%,0)}}
@keyframes world-aurora{from{transform:translate3d(-3%,-2%,0) rotate(-4deg);opacity:.25}to{transform:translate3d(4%,3%,0) rotate(4deg);opacity:.6}}
@keyframes world-fog{from{transform:translate3d(-9%,3%,0)}to{transform:translate3d(9%,-3%,0)}}
@keyframes world-mote{0%,100%{opacity:0;transform:translate3d(-15px,35px,0)}20%{opacity:.55}65%{opacity:.8}90%{opacity:0;transform:translate3d(40px,-165px,0)}}
@media(max-width:650px){.home-world-scene{object-position:76% center;filter:saturate(.78) brightness(.7)}.home-world:after{background:linear-gradient(180deg,#07101c76,#09132240 27%,#08101daa 58%,#0c1017e8)}.world-particles i:nth-child(n+7){display:none}.world-fog{opacity:.46}}

/* Moving threads of light keep the landscape alive without adding a JS loop. */
.world-magic{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none;mask-image:radial-gradient(ellipse at 50% 27%,#0000 12%,#0007 36%,#000 65%)}
.magic-flow{--flow-ink:url(#world-flow-defense);opacity:.86;transition:opacity .7s}
.flow-rotation,.flow-horizon{--flow-ink:url(#world-flow-rotation)}
.flow-track{stroke:var(--flow-ink);stroke-width:.6;opacity:.1}
.flow-trace{vector-effect:non-scaling-stroke;stroke:var(--flow-ink);stroke-linecap:round;stroke-dasharray:18 82;animation:arcane-flow var(--flow-duration) linear var(--flow-delay) infinite}
.flow-bloom{stroke-width:16;opacity:.045}
.flow-halo{stroke-width:6;opacity:.17}
.flow-thread{stroke-width:1.25;opacity:.85}
.flow-tip{stroke:#ecfff9;stroke-width:2.7;stroke-dasharray:.32 99.68;opacity:.95}
.flow-rotation .flow-tip,.flow-horizon .flow-tip{stroke:#fff1d9}
.flow-horizon{opacity:.52}
.magic-flare{color:#baffef;transform-box:fill-box;transform-origin:center;animation:arcane-flare 9s ease-in-out var(--flare-delay) infinite}
.flare-warm{color:#ffdbab}
.flare-halo{fill:currentColor;opacity:.045}
.flare-rays{stroke:currentColor;stroke-width:.8;opacity:.6}
.flare-core{fill:#f0fffc}
.onboarding:has(.journey-defense:hover,.journey-defense:focus-visible) .flow-defense,
.onboarding:has(.journey-rotation:hover,.journey-rotation:focus-visible) .flow-rotation{opacity:1}
.onboarding:has(.journey-defense:hover,.journey-defense:focus-visible) .flow-rotation,
.onboarding:has(.journey-rotation:hover,.journey-rotation:focus-visible) .flow-defense{opacity:.32}
@keyframes arcane-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes arcane-flare{0%,100%{opacity:.15;transform:scale(.6)}45%,55%{opacity:.75;transform:scale(1)}}
@media(max-width:650px){.world-magic{left:0;width:100%;opacity:.8;mask-image:linear-gradient(#0009,#0004 32%,#000 68%)}.magic-flow:nth-of-type(2),.flow-horizon{display:none}.flow-thread{stroke-width:1.4}.flow-bloom{stroke-width:12}}
html[data-motion=off] .world-magic{opacity:.25}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .world-magic{opacity:.25}}