/* v0.3.5: black title plates, chalk-white double frames and a crimson grid. */
:root{--bg:#100d0e;--surface:#1b1718;--surface2:#292123;--surface3:#3c2d30;--border:#685255;--grid:#37272a;--text:#faf5ef;--text-muted:#cfc1c0;--text-dim:#b6a4a5;--teal:#f06457;--teal-rgb:240,100,87;--coral:#f06457;--coral-rgb:240,100,87;--violet:#dfbfc0;--violet-rgb:223,191,192;--amber:#e9b876;--amber-rgb:233,184,118;--danger:#ff7280;--danger-rgb:255,114,128;--danger-soft:#ff98a2;--on-accent:#1d0809;--radius:3px;--radius-sm:3px;--surface-rgb:27,23,24;--frame:#e6d9d3;--heat-0:#69666a;--heat-1:#a78c75;--heat-2:#e2ad68;--heat-3:#ed7946;--heat-4:#ed494b;--heat-4-rgb:237,73,75;}
[data-theme="light"]{--bg:#f5f0ea;--surface:#fffcf8;--surface2:#eee4dd;--surface3:#e3d1c9;--border:#b49c94;--grid:#dbc7bd;--text:#241719;--text-muted:#654e4c;--text-dim:#775c58;--teal:#a62824;--teal-rgb:166,40,36;--coral:#a62824;--coral-rgb:166,40,36;--violet:#7c4145;--violet-rgb:124,65,69;--amber:#86531c;--amber-rgb:134,83,28;--danger:#b31c32;--danger-rgb:179,28,50;--danger-soft:#a21f30;--on-accent:#fff;--surface-rgb:255,252,248;--frame:#70504d;--heat-0:#ccc1b9;--heat-1:#b49a80;--heat-2:#c99740;--heat-3:#d16936;--heat-4:#b92e35;--heat-4-rgb:185,46,53;}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px;}
html[data-character] #app{padding:0;max-width:1440px;margin-inline:auto;border-inline:1px solid var(--border);isolation:isolate;}
#topbar{height:auto;min-height:76px;padding:12px 24px;gap:12px;background:var(--surface);border-bottom:3px solid #a52529;box-shadow:0 4px 0 var(--bg),0 5px 0 var(--border);}
#topbar-logo,.picker-brand{font-weight:900;letter-spacing:-.055em;color:var(--text);}
#topbar-logo span,.picker-brand>span:not(.picker-version){color:var(--teal);}
#topbar-title{color:var(--text-muted);}
#topbar-action{display:flex;align-items:center;gap:8px;flex-shrink:0;}
#topbar .profile-switch,#topbar .settings-btn{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:3px;background:var(--surface2);color:var(--text);}
#topbar-action svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
#topbar .lang-toggle,#topbar .theme-toggle{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;width:72px;height:44px;min-height:44px;padding:3px;border-radius:3px;background:var(--surface2);border:1px solid var(--border);}
#topbar .lt-opt,#topbar .tt-ico{display:grid;place-items:center;width:32px;height:36px;line-height:1;font-size:.7rem;}
#topbar .tt-ico svg{width:18px;height:18px;}
#topbar .lt-knob,#topbar .tt-knob{top:3px;left:3px;width:32px;height:36px;border-radius:1px;background:var(--surface3);border:1px solid var(--border);}
#topbar .lt-knob{transform:translateX(0);}[lang="en"] #topbar .lt-knob{transform:translateX(32px);}
#topbar .tt-knob{transform:translateX(32px);}[data-theme="light"] #topbar .tt-knob{transform:translateX(0);}
.profile-header-portrait{display:block;width:40px;height:44px;object-fit:cover;object-position:50% 7%;border-radius:2px;border:1px solid var(--border);background:var(--bg);flex-shrink:0;}
#app-workspace{display:flex;position:relative;isolation:isolate;flex:1;min-height:0;width:100%;max-width:1120px;margin:0 auto;gap:16px;padding:0 20px;}
#app-workspace #content{min-width:0;flex:1;max-width:850px;margin:0;padding:24px 12px 32px;position:relative;z-index:1;}
#app-workspace .view{max-width:none;margin:0;padding:16px 4px;}
#app-workspace #profile-character{display:block;position:relative;flex:0 0 210px;width:210px;align-self:stretch;margin:24px 0;pointer-events:none;overflow:hidden;isolation:isolate;background:var(--bg);}
#app-workspace #profile-character[hidden]{display:none;}
#profile-character img{width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;}
[data-theme="light"] #profile-character img{mix-blend-mode:multiply;filter:brightness(1.12);}
[data-character="ela"] #profile-character{order:2;}
.page-intro{position:relative;padding:28px 30px;margin:8px 0 24px;border:0;border-radius:0;background:#110e10 url('assets/culling-frame.svg') center/100% 100% no-repeat;color:#faf5ef;}
.page-intro h1{color:#faf5ef;font-weight:900;letter-spacing:-.045em;}
.page-intro .eyebrow{color:#fb9b92;letter-spacing:.13em;}
.page-intro p:not(.eyebrow){color:#ddcccb;}
.card,.day-card,.library-card,.home-last,.ex-card,.notice,.decay-explanation{border-radius:3px;}
.day-card,.library-card{border-top:2px solid var(--border);}
.day-card:hover,.library-card:hover{border-top-color:var(--teal);}
.home-metrics{padding:18px;background:var(--surface);border:1px solid var(--border);border-left:3px solid #a52529;border-radius:0;}
.home-metrics strong{color:var(--text);}.home-metrics>div+div strong{color:var(--teal);}
.section-title{color:var(--text-muted);letter-spacing:.12em;}
.btn,.section-nav button,.filter-chips button{border-radius:3px;}
.btn-primary,.section-nav .on,.filter-chips .on{color:var(--on-accent);}
#tabs{position:relative;z-index:5;width:100%;background:var(--surface);border-top:1px solid var(--border);}
#tabs .tab-btn{position:relative;border-radius:2px;color:var(--text-muted);}
#tabs .tab-btn.active{color:var(--text);background:rgba(var(--teal-rgb),.14);}
#tabs .tab-btn.active::before{content:'';position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--teal);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);}
#tabs .tab-btn svg{width:23px;height:23px;flex-shrink:0;}
.profile-page{background:linear-gradient(180deg,transparent,var(--bg) 85%),repeating-linear-gradient(90deg,transparent 0 63px,#ba262a18 63px 64px),repeating-linear-gradient(0deg,transparent 0 63px,#ba262a18 63px 64px),radial-gradient(ellipse at 50% 0,#6a1b23 0,var(--bg) 65%);}
[data-theme="light"] .profile-page{background:linear-gradient(180deg,transparent,var(--bg) 85%),repeating-linear-gradient(90deg,transparent 0 63px,#ba262a14 63px 64px),repeating-linear-gradient(0deg,transparent 0 63px,#ba262a14 63px 64px),var(--bg);}
.profile-shell{width:min(920px,100%);padding-top:36px;}.picker-brand{margin-bottom:32px;}.picker-intro{max-width:55ch;}
.profile-shell h1{display:inline-block;padding:22px 30px;color:#faf5ef;background:#110e10 url('assets/culling-frame.svg') center/100% 100% no-repeat;}
#profile-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.profile-card{position:relative;margin:0;min-width:0;border-radius:2px;transition:border-color .18s,transform .18s;}.profile-card:hover{transform:translateY(-3px);}
.profile-card-illustrated{isolation:isolate;min-height:470px;overflow:hidden;align-items:flex-end;padding:24px;background:var(--bg);color:var(--text);border:1px solid var(--frame);border-top:4px solid #a52529;box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--border);}
.profile-card-illustrated::before{content:'';position:absolute;inset:8px;border:1px solid var(--border);pointer-events:none;z-index:-1;}
.profile-card-illustrated::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg),transparent 45%);pointer-events:none;}
.profile-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;z-index:-2;mix-blend-mode:lighten;}
[data-theme="light"] .profile-portrait{mix-blend-mode:multiply;filter:brightness(1.12);}
.profile-card-copy{min-width:0;overflow-wrap:anywhere;}.profile-card-illustrated strong{font-size:1.35rem;}.profile-card-illustrated small{color:var(--text-muted);}.profile-card-illustrated .profile-arrow{color:var(--teal);}.new-profile{margin-top:28px;}
.anatomy-toggle{display:flex;gap:8px;margin:14px 0;}
.anatomy-toggle button,.anatomy-toolbar button{min-height:44px;padding:8px 16px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:3px;font:inherit;cursor:pointer;}
.anatomy-toggle [aria-pressed="true"]{background:var(--teal);color:var(--on-accent);border-color:var(--teal);font-weight:800;}
#anatomy-panel{border:1px solid var(--border);border-top:3px solid #a52529;border-radius:3px;overflow:hidden;background:var(--surface);}
#anatomy-panel[hidden],#body-svg-wrap[hidden],#anatomy-toggle[hidden]{display:none;}
.anatomy-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;}.anatomy-toolbar label{font-size:.875rem;}.anatomy-toolbar select{flex:1;min-width:180px;width:auto;font-size:.875rem;}
#anatomy-canvas{height:clamp(420px,62dvh,650px);width:100%;position:relative;}#anatomy-canvas canvas{display:block;width:100%;height:100%;touch-action:none;}
#anatomy-selection{font-weight:700;margin:14px 16px;}.anatomy-hint,.anatomy-credit{font-size:.875rem;line-height:1.5;color:var(--text-muted);margin:12px 16px;}#anatomy-status{padding:12px;border-left:3px solid var(--amber);}
@media(max-width:1000px){#app-workspace{padding:0 16px;gap:8px;}#app-workspace #profile-character{flex-basis:170px;width:170px;}}
@media(max-width:760px){
 #app-workspace{padding:0 8px;}#app-workspace #content{padding:16px 8px 28px;}
 /* Only #content scrolls; artwork stays in the stationary workspace behind it. */
 #app-workspace #profile-character{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0;opacity:.28;background:var(--bg);}
 #profile-character img{object-position:70% center;object-fit:contain;}[data-character="ela"] #profile-character img{object-position:30% center;}
 #app-workspace :is(.card,.day-card,.library-card,.home-last,.home-metrics,.ex-card,.notice,.decay-explanation){background:rgba(var(--surface-rgb),.9);}
 #topbar{padding:10px 12px;}
}
@media(max-width:540px){
 #topbar{display:grid;grid-template-columns:34px 1fr;gap:8px 10px;padding:10px 14px;}
 #topbar-title{display:none;}.profile-header-portrait{width:34px;height:36px;}#topbar-logo{font-size:1.18rem;}
 #topbar-action{grid-column:1/-1;width:100%;display:grid;grid-template-columns:44px 44px 72px 72px;justify-content:end;gap:8px;}
 #topbar .profile-switch{margin:0;}.profile-shell{padding:28px 16px;}.profile-shell h1{padding:22px;font-size:1.8rem;}
 #profile-list{gap:14px;}.profile-card-illustrated{min-height:330px;padding:16px 12px;}.profile-card-illustrated strong{font-size:1.05rem;}.profile-card-illustrated small{font-size:.8rem;}.profile-card-illustrated .profile-arrow{display:none;}.profile-card:not(.profile-card-illustrated){grid-column:1/-1;}
 .page-intro{padding:24px 22px;}.page-intro h1{font-size:1.8rem;}
 #anatomy-canvas{height:470px;}.anatomy-toolbar label{width:100%;}.anatomy-toolbar select{width:100%;flex-basis:100%;}
}
@media(prefers-reduced-motion:reduce){.profile-card{transition:none;}.profile-card:hover{transform:none;}}