:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#151923;font-synthesis:none;text-rendering:optimizelegibility;--ink:#151923;--muted:#667085;--line:#15192324;--panel:#ffffffe6;--panel-solid:#fff;--blue:#286bda;--red:#dc2626;--gold:#e4ae25;--green:#15803d;--steel:#263140;--shadow:0 18px 44px #15192324;background:#eef2f6;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#eef2f6;min-width:320px}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0}img,video{max-width:100%;display:block}h1,h2,h3,p,figure,dl,dd{margin:0}.app{isolation:isolate;min-height:100vh;padding:18px;position:relative}.app:before{content:"";z-index:-2;filter:saturate(.92);background:linear-gradient(#f6f8fcc7,#ebf0f6f0),url(/backgrounds/metal-city-anime.png) 50%/cover;position:fixed;inset:0}.app:after{content:"";z-index:-1;pointer-events:none;background-image:linear-gradient(#2631400f 1px,#0000 1px),linear-gradient(90deg,#2631400f 1px,#0000 1px);background-size:42px 42px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000 0%,#0000 80%);mask-image:linear-gradient(#000 0%,#0000 80%)}.app-header,.codex-shell{width:min(1380px,100%);margin-inline:auto}.app-header{justify-content:space-between;align-items:end;gap:18px;margin-bottom:16px;display:flex}.eyebrow{color:var(--red);letter-spacing:0;text-transform:uppercase;font-size:12px;font-weight:900}h1{color:var(--ink);letter-spacing:0;margin-top:6px;font-size:34px;line-height:1.05}.header-metrics{grid-template-columns:repeat(3,minmax(86px,1fr));gap:8px;display:grid}.metric{border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffc7;border-radius:8px;min-height:70px;padding:12px;box-shadow:0 14px 28px #1519231a}.metric strong{color:var(--steel);font-size:26px;line-height:1;display:block}.metric span{color:var(--muted);margin-top:7px;font-size:12px;font-weight:800;display:block}.codex-shell{grid-template-columns:286px minmax(0,1fr);align-items:start;gap:14px;display:grid}.roster-panel,.media-panel,.profile-panel,.info-panel{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:8px}.roster-panel{padding:12px;position:sticky;top:18px}.search-box{gap:8px;display:grid}.search-box label{color:var(--steel);font-size:13px;font-weight:900}.search-box input{border:1px solid var(--line);width:100%;min-height:42px;color:var(--ink);background:#fff;border-radius:8px;outline:none;padding:0 12px}.search-box input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #286bda29}.roster-list{gap:8px;margin-top:12px;display:grid}.roster-item{text-align:left;background:#ffffffa8;border:1px solid #0000;border-radius:8px;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:82px;padding:8px;transition:border-color .16s,background .16s,transform .16s;display:grid}.roster-item:hover,.roster-item.active{background:#fff;border-color:#286bda6b;transform:translateY(-1px)}.roster-item img{aspect-ratio:1;object-fit:cover;background:#dce5ef;border-radius:8px;width:72px}.roster-item strong,.roster-item small{min-width:0;display:block}.roster-item strong{color:var(--ink);word-break:keep-all;font-size:16px;font-weight:950}.roster-item small{color:var(--muted);margin-top:4px;font-size:12px;font-weight:800;line-height:1.35}.detail-view{grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr);gap:14px;display:grid}.media-panel{min-width:0;overflow:hidden}.media-toolbar{border-bottom:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px;display:grid}.media-tab{min-height:42px;color:var(--steel);background:#26314014;border-radius:8px;font-weight:950;transition:background .16s,color .16s}.media-tab.active{background:var(--steel);color:#fff}.media-stage{background:linear-gradient(150deg,#286bda29,#0000 36%),linear-gradient(32deg,#dc262624,#0000 42%),#f8fafc;min-height:640px;display:grid;position:relative;overflow:hidden}.media-stage>img,.media-stage>video{object-fit:contain;object-position:center;width:100%;height:100%;min-height:640px;padding:18px}.media-stage.video>video,.media-stage.video>img{object-fit:contain;background:#070b14;padding:0}.media-stage.pending>img{object-fit:cover;filter:saturate(.84)contrast(.96)}.media-stage figcaption{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0c121ebd;border:1px solid #ffffff80;border-radius:8px;gap:4px;padding:12px 14px;display:grid;position:absolute;bottom:16px;left:16px;right:16px}.media-stage figcaption strong{font-size:18px;font-weight:950}.media-stage figcaption span{color:#ffffffd1;word-break:keep-all;font-size:13px;line-height:1.45}.profile-panel{flex-direction:column;gap:12px;padding:22px;display:flex}.profile-kicker,.tag-row{flex-wrap:wrap;gap:8px;display:flex}.profile-kicker span,.tag-row span{border-radius:8px;align-items:center;min-height:30px;padding:0 10px;font-size:12px;font-weight:900;display:inline-flex}.profile-kicker span{color:#fff;background:#151923}.profile-kicker span+span{color:var(--steel);background:#15192314}.profile-panel h2{color:var(--ink);letter-spacing:0;word-break:keep-all;font-size:44px;line-height:1}.english-name{color:var(--blue);font-size:16px;font-weight:950}.headline{color:var(--steel);word-break:keep-all;font-size:20px;font-weight:900;line-height:1.35}.tag-row span{border:1px solid var(--line);color:var(--muted);background:#fff}.profile-description{color:#475467;word-break:keep-all;font-size:15px;line-height:1.7}.color-row{gap:8px;margin-top:auto;display:flex}.color-row span{border:3px solid #fff;border-radius:50%;width:38px;height:38px;box-shadow:0 8px 18px #15192329}.info-panel{min-width:0;padding:18px}.panel-header{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;display:flex}.panel-header h3{color:var(--ink);font-size:22px;line-height:1.1}.line-list,.mode-lines,.stat-list,.relation-list{gap:10px;display:grid}.info-line{border-top:1px solid var(--line);grid-template-columns:170px minmax(0,1fr);align-items:start;gap:14px;padding-block:12px;display:grid}.info-line:first-child{border-top:0;padding-top:0}.info-line div{min-width:0}.info-line strong,.info-line span{display:block}.info-line strong{color:var(--steel);word-break:keep-all;font-size:15px;font-weight:950}.info-line span{color:var(--red);margin-top:5px;font-size:12px;font-weight:950}.info-line p{color:#586274;word-break:keep-all;font-size:14px;line-height:1.55}.mode-line{border-top:1px solid var(--line);text-align:left;background:0 0;grid-template-columns:94px 120px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:12px 0;display:grid}.mode-line:first-child{border-top:0;padding-top:0}.mode-line span{color:var(--blue);font-size:12px;font-weight:950}.mode-line strong{color:var(--steel);word-break:keep-all;font-size:14px;font-weight:950}.mode-line small{color:var(--muted);word-break:keep-all;font-size:13px;line-height:1.45}.mode-line.active strong{color:var(--red)}.stat-row{grid-template-columns:82px 42px minmax(0,1fr);align-items:center;gap:10px;display:grid}.stat-row span{color:var(--steel);font-size:13px;font-weight:950}.stat-row strong{color:var(--ink);font-size:14px}.stat-row i{background:#2631401f;border-radius:999px;height:10px;position:relative;overflow:hidden}.stat-row i:before{content:"";width:var(--value);border-radius:inherit;background:linear-gradient(90deg, var(--blue), var(--green), var(--gold));position:absolute;inset:0 auto 0 0}.relation-list div{border-top:1px solid var(--line);grid-template-columns:96px minmax(0,1fr);gap:12px;padding-top:10px;display:grid}.relation-list div:first-child{border-top:0;padding-top:0}.relation-list dt{color:var(--steel);font-size:13px;font-weight:950}.relation-list dd{color:var(--muted);word-break:keep-all;font-size:14px;line-height:1.45}.empty-app{background:#eef2f6;place-items:center;min-height:100vh;padding:24px;display:grid}@media (width<=1120px){.codex-shell,.detail-view{grid-template-columns:1fr}.roster-panel{position:static}.roster-list{grid-template-columns:repeat(2,minmax(0,1fr))}.media-stage,.media-stage>img,.media-stage>video{min-height:560px}}@media (width<=760px){.app{padding:12px}.app-header{gap:12px;display:grid}h1{font-size:28px}.header-metrics,.roster-list,.media-toolbar{grid-template-columns:1fr}.media-stage,.media-stage>img,.media-stage>video{min-height:460px}.media-stage figcaption{bottom:10px;left:10px;right:10px}.profile-panel{padding:18px}.profile-panel h2{font-size:36px}.headline{font-size:18px}.info-line,.mode-line,.relation-list div{grid-template-columns:1fr}}