/* Quiet black stage: illustration, typography and interaction carry the experience. */
:root{--bg:#050505;--bg-2:#0d0d0e;--bg-3:#181819;--paper:#eeeae3;--paper-dim:#999896;--paper-faint:#62615f;--line:#ffffff24;--line-soft:#ffffff10;--gold:#aaa292;--red:#af4d40;--red-deep:#963d33;--ribbon-h:0px}
html,body{background:#050505}body::before{display:none}.grain{opacity:.015}
.chrome.top{top:0;height:76px;background:#050505e8;border-bottom:1px solid #ffffff0d;backdrop-filter:blur(20px)}.chrome.bottom{background:#050505ed;border-top:1px solid #ffffff0e}
.logo-mark{color:#c5bbaa;width:23px}.logo-text{font-size:15px;letter-spacing:.19em}.logo-text em{font-size:8px;letter-spacing:.28em;color:#686866}.top-nav button{font-size:11px;letter-spacing:.08em;color:#868582}.top-nav button:hover,.top-nav button.active{color:#eeeae3}.top-nav button.active::after{height:1px;background:#ded8cd}
.icon-btn{border-color:#ffffff17;color:#9e9b95}.icon-btn.on{border-color:#d0c5b955;color:#e5dbca}.chapter-dots button.cur{background:#dad2c4;transform:scale(1.2)}.stage.done i{background:#ddd5c7;color:#111;border-color:#ddd5c7}.stage.done{color:#b7b2a9}.stage i{border-color:#ffffff26}.stages{font-size:10px}.chapter-name{font-size:10px;color:#77736c;letter-spacing:.2em}
.btn,.btn.ghost{border:1px solid #ffffff28;background:transparent;border-radius:2px;color:#d7d0c4;box-shadow:none;letter-spacing:.1em}.btn:hover:not(:disabled){background:#ffffff09;border-color:#ffffff60;transform:translateY(-1px)}
.btn.primary,.intro-copy .btn.primary{background:#e6dfd3;border:1px solid #e6dfd3;color:#151515;box-shadow:none;font-weight:500}.btn.primary:hover:not(:disabled),.intro-copy .btn.primary:hover:not(:disabled){background:#f6eee2;border-color:#f6eee2}.btn.text{color:#817d76;border:0;background:none}.btn.text:hover{color:#e8dfce}.btn:disabled{opacity:.3}
#ch-intro{background:#050505;padding-top:100px}.intro-copy{padding-left:1.5vw}.intro-heading h1{font-size:clamp(45px,5.4vw,78px);font-weight:400;letter-spacing:.12em;color:#f1e9dc;text-shadow:none}.intro-heading h1 span{color:#f1e9dc}.intro-heading h1 i{display:none}.intro-label{color:#89847a;font-size:10px;letter-spacing:.16em}.eyebrow{font-size:8px;color:#8b8478;letter-spacing:.2em}.eyebrow span{background:#5c564b;width:23px}.intro-lead,.intro-title p{font-size:12px;letter-spacing:.06em;color:#979289;line-height:2.3}.intro-meta{color:#686258;font-size:8px}.intro-bottom{border-top-color:#ffffff0c;color:#656058}.intro-bottom button{color:#939087;font-size:10px}
.art-orbit{border:0;background:radial-gradient(ellipse,#d85e310a,transparent 65%);box-shadow:none}.art-orbit::before,.art-orbit::after,.art-orbit>span{display:none}.art-caption{color:#858077;opacity:.7}.art-caption b{font-weight:400;font-size:10px;letter-spacing:.2em}.art-name{border-left:1px solid #9585735e;font-size:14px;color:#d8cdbc}.art-name small{color:#746c60}.art-footnote{color:#756c60}.character-layer img{filter:drop-shadow(0 10px 30px #0009)}
#introGlow{background:radial-gradient(ellipse at 70% 55%,#c0653309,transparent 55%)}#introPhoenix{opacity:0}#introPhoenix.show{opacity:.025}#introVignette{background:none}.intro-art .blank-feather-wrap{filter:drop-shadow(0 0 16px #d7c7a34a);opacity:.65}
.chapter-head h2{font-size:clamp(24px,3vw,36px);font-weight:400;letter-spacing:.18em}.chapter-head h2::before{display:none}.chapter-head::after{height:1px;background:#7a6e58;width:24px}.chapter-head p{color:#88837a;font-size:12px}.source-card{background:#101011;border-color:#ffffff12;box-shadow:none;border-radius:2px}.source-card:hover{border-color:#a2906a55;box-shadow:none;transform:translateY(-4px)}.source-card p{color:#8b8377}.source-card .sc-fig{background:#101011}.source-card .sc-hot{width:5px;height:5px;background:#c6b49a;animation:none;box-shadow:none}
.translate-stage,.silver-stage{background:radial-gradient(ellipse,#c8a97b06,transparent 70%),#0b0b0b;border-color:#ffffff15}.feather-side::before,.pattern-main::before{border-color:#ffffff0a}.shape-opt,.pat-card{background:#0c0c0d;border-color:#ffffff17}.shape-opt.sel,.pat-card.sel{background:#eee3d407;border-color:#a89677}.ctrl-opt.sel{background:#eee3d40c;border-color:#a89677}.node-card{background:#ffffff03;border-color:#ffffff0e;border-left-color:#a29b8e}
.drawer{background:#0c0c0d;border-color:#ffffff14}.dw-fig{background:#0f0f10;border-color:#ffffff11}.dw-level b{color:#c4aa88}.dw-source{border-left-color:#a89677;background:#bda37808}.overlay{background:#000b}.overlay-panel{background:#101011;border-color:#ffffff1c}.journey-guide{background:#0c0c0de8;border-color:#ffffff12;box-shadow:none}.journey-guide span{color:#b1a18b}.journey-guide p{color:#7f786e}.toast{background:#181819;border-color:#ffffff20;color:#d5c8b6;box-shadow:none}
.ext-block{background:#0a0a0b;border-color:#ffffff0e}.ext-fig{background:#0c0c0d}.ext-body h3{color:#d9d0c1}.ext-body p{color:#8e867a}.rs-chip{background:#eee4d505;border-color:#ffffff12}.board-gallery h3{font-weight:400}.board-gallery img{border-color:#ffffff12}.result-info h2{color:#e8dfd0;font-weight:400}.result-info .feather-id{color:#af9c7f}
.atlas-dialog{background:#0d0d0e;color:#e7dfd2;border:1px solid #ffffff24;box-shadow:0 25px 100px #000b}.atlas-dialog::backdrop{background:#000b}.atlas-dialog h2{color:#e7dfd2;font-weight:400}.atlas-close{color:#9c8e79}.atlas-kicker{color:#9d8b70}.atlas-tabs{border-bottom-color:#ffffff16}.atlas-tabs button{color:#7e7364}.atlas-tabs button[aria-selected=true]{color:#e5dac7;border-bottom-color:#b8a078}.role-detail h3{color:#e4d6be;font-weight:400}.role-detail .role-sub{color:#9a8569}.role-detail p{color:#9e9485}.role-traits span{border-color:#ffffff1d;color:#a69378}.role-quote{color:#c6b090;border-color:#ffffff17}.artwork-actions a,.artwork-actions button,.art-back{color:#bca27e;border-color:#bca27e30}.full-character-art{background:radial-gradient(ellipse,#cba87608,transparent 70%)}
#ch-phoenix{background:#050505}.phoenix-aureole{background:none;border:0}.phoenix-halo{border:0;box-shadow:none;background:radial-gradient(ellipse,color-mix(in srgb,var(--phoenix-accent,#9b4533) 5%,transparent),transparent 65%)}.phoenix-halo::after{display:none}.phoenix-stardust{opacity:.2}.revealing .phoenix-stardust{opacity:.25}.phoenix-stardust i{background:#b8aa92;box-shadow:none}.phoenix-illustration{filter:var(--plumage-filter,brightness(1)) brightness(.6) saturate(.6) blur(4px)}.revealing .phoenix-illustration{filter:var(--plumage-filter,brightness(1)) brightness(1) saturate(1) blur(0)}.settled .phoenix-illustration{filter:var(--plumage-filter,brightness(1));animation:phoenixBreath 8s ease-in-out infinite}.settled .personal-plume{filter:drop-shadow(0 0 6px #c6b38b);animation:none}.finale-title h1{color:#e8decf;font-weight:400}.finale-title p{color:#928472}.finale-line{color:#c7baaa}.finale-title{bottom:87px}.phoenix-palette-label{display:flex;align-items:center;justify-content:center;gap:7px;margin:-5px 0 18px;font-size:9px;letter-spacing:.05em;color:#877a67}.phoenix-palette-label i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:9px}
#finaleStage{inset:105px 4vw 265px}.phoenix-scene{width:min(100%,calc((100vh - 370px)*1.333333))}
@media(max-width:900px){.chrome.top{height:64px}.top-nav{gap:19px}.chapter{padding-top:98px}.chapter-head p{font-size:11px}.intro-heading h1{font-size:47px}}
@media(max-width:600px){.chrome.top{height:60px}.top-nav button{font-size:10px}.logo-text{font-size:12px}#ch-intro{padding-top:84px}.intro-heading h1{font-size:43px}.intro-label{margin-top:20px}.chapter{padding-top:90px}.prologue-skip{top:74px}.source-card .sc-fig{height:135px}.finale-title{bottom:83px}.finale-title h1{font-size:23px}.finale-title p{margin-bottom:14px}.phoenix-palette-label{font-size:8px;gap:5px;margin:0 0 15px;flex-wrap:wrap}.phoenix-palette-label i{width:4px;height:4px;margin-left:6px}#finaleStage{inset:105px 0 280px}.phoenix-scene{width:92vw}.journey-guide{left:12px;width:230px}.finale-actions .btn{font-size:11px}}
@media(max-height:760px) and (min-width:901px){#finaleStage{inset:95px 4vw 250px}.phoenix-scene{width:min(100%,calc((100vh - 345px)*1.333333))}.finale-title{bottom:77px}.finale-title h1{font-size:29px}.phoenix-palette-label{margin:0 0 12px}}

/* Actual repeating motifs, with enough area to read their rhythm. */
.pat-card{padding:16px 12px;border-radius:3px}
.pat-card svg{display:block;width:100%;height:auto;aspect-ratio:3/2;max-width:156px;margin:0 auto 12px;padding:8px;border-radius:2px;background:#141313;border-color:#d7c6ae20}
.pat-card .pat-note{color:#8e867b;line-height:1.6}
.pat-card.sel svg{background:#211d18;border-color:#c5ae7f55}
.source-card .sc-fig img{image-rendering:auto}

/* The authored feather travels to the right wing, aligns, then dissolves
   into its plumage. No separate badge remains after the return. */
.personal-plume{left:50%;top:94%;width:clamp(28px,5.2vw,62px);opacity:0;transform:translate(-50%,-50%) rotate(-18deg);transition:none;filter:drop-shadow(0 0 7px #e6dcc84a);pointer-events:none}
.assembling .personal-plume{animation:personalReturn 3.6s cubic-bezier(.4,0,.2,1) both}
.settled .personal-plume{animation:none;opacity:0;visibility:hidden;filter:none}
.phoenix-scene::after{content:'';position:absolute;left:58%;top:34%;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(ellipse,color-mix(in srgb,var(--phoenix-accent) 25%,#eee3cf55),transparent 65%);opacity:0;z-index:3;pointer-events:none}
.integrating:not(.settled)::after{animation:wingWelcome 1.2s ease-out both}
@keyframes personalReturn{
  0%{left:50%;top:94%;opacity:0;transform:translate(-50%,-50%) rotate(-18deg) scale(1)}
  12%{opacity:1}
  38%{left:41%;top:66%;opacity:1;transform:translate(-50%,-50%) rotate(8deg) scale(.95)}
  65%{left:49%;top:44%;opacity:1;transform:translate(-50%,-50%) rotate(34deg) scale(.7)}
  82%{left:58%;top:34%;opacity:.65;transform:translate(-50%,-50%) rotate(43deg) scale(.42)}
  100%{left:58%;top:34%;opacity:0;transform:translate(-50%,-50%) rotate(43deg) scale(.25)}
}
@keyframes wingWelcome{0%,100%{opacity:0}35%{opacity:.8}}
@media(max-width:900px){.pattern-lib{grid-template-columns:1fr 1fr}.pat-card svg{width:100%;height:auto;max-width:144px}.pat-card .pat-note{display:block;font-size:10px}.personal-plume{width:40px}}
@media(max-width:600px){.pat-card{padding:12px 10px}.pat-card svg{max-width:120px;margin-bottom:8px}.personal-plume{width:32px}.dw-fig img{max-height:300px}}
@media(prefers-reduced-motion:reduce){.assembling .personal-plume{animation:none!important;opacity:0}.phoenix-scene::after{display:none}.settled .phoenix-illustration{animation:none!important}}

/* Costume study: framed art, aligned extraction, and a continuous reveal. */
#ch-form{justify-content:flex-start;padding-top:112px}
.translate-stage{height:350px;background:radial-gradient(ellipse at 50% 52%,#653b2520,transparent 68%),#0b0b0c}
.translate-stage .ts-svg{inset:42px 0 43px;width:100%;height:calc(100% - 85px);overflow:visible}
.ts-svg .ts-g{transition:none;transform-origin:center}
.ts-label{z-index:2;font-size:11px;letter-spacing:.16em;top:18px;left:20px}.ts-label b{font:10px var(--sans);letter-spacing:.05em;margin-left:7px;color:#af9983}
.ts-steps{position:absolute;bottom:33px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;color:#57534e;font-size:8px;letter-spacing:.08em}
.ts-steps span{transition:color .4s}.ts-steps .active{color:#dbccba}.ts-meter{left:20px;right:20px;bottom:18px;height:1px}.ts-meter i{transition:none}
#formFeather{--form-reveal:0;opacity:calc(.12 + var(--form-reveal)*.88);transform:translateY(calc((1 - var(--form-reveal))*18px)) scale(calc(.94 + var(--form-reveal)*.06));transition:opacity .15s,transform .15s}
#formFeather svg{width:165px}
#formFeather svg>path{stroke-dashoffset:0;transition:stroke-dashoffset .15s}
#shapePicker{visibility:hidden;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .7s,transform .7s,visibility 0s .7s}
#shapePicker.ready{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
#formHint{min-height:36px;line-height:1.8;font-size:11px;letter-spacing:.03em}
@media(max-width:900px){.translate-stage{height:330px}}
@media(max-width:600px){#ch-form{padding-top:96px}.translate-stage{height:320px}.translate-stage .ts-svg{inset:45px 0 45px;height:calc(100% - 90px)}.ts-label{font-size:10px;left:16px}.ts-steps{left:16px;right:16px;gap:8px;font-size:8px}.form-layout{gap:28px}#shapePicker .shape-opt{width:88px}#formHint{font-size:10px}}
@media(prefers-reduced-motion:reduce){#formFeather,#shapePicker{transition:none}}
.card-preview{width:fit-content;max-width:100%;justify-self:center}