/* Noir casework belongs to Badge Takeover, never the platform's library. */
.badge-takeover{--case-paper:#e3d6b8;--case-brass:#ba8740;--case-rust:#994733;background:#202320}
.badge-takeover main{color:#eeeae1}.badge-takeover .card{color:#191a17;background:var(--case-paper)}
.badge-takeover .badge,.badge{background-color:#e3d6b8;background-image:repeating-linear-gradient(173deg,#55341806 0 1px,transparent 1px 11px)}
.badge .badge-seal{filter:saturate(.73);background:linear-gradient(125deg,var(--badge-color) 5%,#e3d6b8 24%,var(--badge-color) 36%,#cabfa788 52%,#745e38 75%,var(--badge-color) 90%)}
#crumb-stage{position:relative;overflow:hidden;background:repeating-linear-gradient(18deg,transparent 0 64px,#e3d6b80f 64px 84px),#384744;border:2px solid #ba874080;border-radius:18px;isolation:isolate;aspect-ratio:1/1.06;min-width:0}
.crumb-rig{width:110%;max-width:none;position:absolute;left:-5%;bottom:-4%;overflow:visible}
.crumb-nameplate{position:absolute;bottom:0;left:0;right:0;padding:68px 22px 22px;background:linear-gradient(transparent,#202320 55%);pointer-events:none;display:grid;gap:6px;color:#e3d6b8}
.crumb-nameplate strong{font:bold clamp(17px,2vw,29px)/1.15 'American Typewriter',Georgia,serif}.crumb-nameplate small{font:700 10px/1.4 monospace;color:#ba8740;letter-spacing:1px}
.crumb-body,.crumb-head,.crumb-arm,.crumb-free-arm{transform-box:view-box}
.crumb-body{transform-origin:50% 100%;animation:crumb-body 8s ease-in-out infinite}
.crumb-head{transform-origin:50% 53%;animation:crumb-idle 8s ease-in-out infinite}
.crumb-arm{transform-origin:33% 69%;animation:crumb-arm 8s ease-in-out infinite}
.crumb-free-arm{transform-origin:76% 63%;animation:crumb-free-arm 6.4s ease-in-out infinite}
.crumb-eye{transform-box:fill-box;transform-origin:center;animation:crumb-blink 5.7s infinite}
.crumb-pupil{transition:transform .25s ease}.crumb-brow{transition:transform .3s ease}
[data-mood=listening] .crumb-head{animation:crumb-listen 8s ease-in-out infinite}
[data-mood=listening] .crumb-eye[data-eye="1"] .crumb-brow,[data-mood=questioning] .crumb-eye[data-eye="1"] .crumb-brow{transform:translateY(-12px)}
[data-mood=thinking] .crumb-pupil{transform:translateX(-6px)}
[data-mood=thinking] .crumb-head{animation:crumb-think 7s ease-in-out infinite}
[data-mood=verdict] .crumb-arm{animation:crumb-verdict 1.8s ease-in-out both,crumb-arm 8s ease-in-out 1.8s infinite}
[data-mood=verdict] .crumb-head{animation:crumb-nod 1.6s ease-in-out both,crumb-idle 8s ease-in-out 1.6s infinite}
[data-mood=verdict] .crumb-nameplate strong{color:#e3d6b8}
@keyframes crumb-blink{0%,96%,100%{transform:scaleY(1)}97%,98%{transform:scaleY(.08)}}
@keyframes crumb-body{0%,100%{transform:rotate(0) scaleY(1)}25%{transform:rotate(1.1deg) scaleY(1.012)}50%{transform:rotate(0) scaleY(1)}75%{transform:rotate(-1.1deg) scaleY(.988)}}
@keyframes crumb-idle{0%,15%,100%{transform:rotate(-1.5deg)}33%,47%{transform:rotate(3.5deg)}65%,82%{transform:rotate(-3.5deg)}}
@keyframes crumb-listen{0%,12%,100%{transform:rotate(-2deg)}29%,42%{transform:rotate(5.5deg)}49%{transform:translateY(.8%) rotate(3deg)}54%{transform:rotate(1deg)}63%,80%{transform:rotate(-4.5deg)}}
@keyframes crumb-think{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(-6.5deg)}}
@keyframes crumb-arm{0%,19%,100%{transform:rotate(0)}31%,43%{transform:rotate(-6deg)}60%,85%{transform:rotate(1deg)}}
@keyframes crumb-free-arm{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(2.4deg)}75%{transform:rotate(-2.4deg)}}
@keyframes crumb-verdict{0%,100%{transform:rotate(0)}48%{transform:rotate(-12deg)}}
@keyframes crumb-nod{0%,100%{transform:rotate(-1.5deg)}48%{transform:translateY(1.1%) rotate(-4deg)}}
#crumb-stage.is-paused *{animation-play-state:paused!important}
body.crumb-stage-active main{max-width:1550px;display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);column-gap:32px}
body.crumb-stage-active main>.brandbar,body.crumb-stage-active main>#connection,body.crumb-stage-active main>#error,body.crumb-stage-active main>h1,body.crumb-stage-active main>#appEyebrow{grid-column:1/-1}
body.crumb-stage-active #crumb-stage{grid-column:1;grid-row:auto;position:sticky;top:18px;align-self:start}
body.crumb-stage-active #app{grid-column:2;min-width:0}
body.crumb-stage-active #app .card{font-size:20px;margin-top:12px}body.crumb-stage-active .case-heading{color:#e3d6b8}
body.crumb-stage-active .card p{line-height:1.35}body.crumb-stage-active #app>.eyebrow{color:#ba8740}
#crumb-stage.controller-crumb{height:155px;aspect-ratio:auto;margin:14px 0}
.controller-crumb .crumb-rig{width:220px;left:auto;right:-10px;bottom:-65px}.controller-crumb .crumb-nameplate{right:130px;padding:18px;background:none;bottom:12px}
@media(max-width:750px){body.crumb-stage-active main{display:block}body.crumb-stage-active #crumb-stage{position:relative;max-height:310px;aspect-ratio:auto}body.crumb-stage-active .crumb-rig{width:350px;left:calc(50% - 175px);bottom:-65px}body.crumb-stage-active #crumb-stage{height:310px}}
@media(prefers-reduced-motion:reduce){#crumb-stage *{animation:none!important;transition:none!important}}
.badge-takeover .brandbar{color:#191a17}.badge-takeover .card:before{background:#ba8740}.badge-takeover .card .eyebrow{background:#ba8740;color:#191a17}