:root{--background:#151411;--panel:#211F19;--panel-light:#302B20;--border:#65583C;--text:#EEE8D8;--muted:#B5A98B;--accent:#D6C7A0;--glow:rgba(214,199,160,0.14);--surface:#1A1813;--field-bg:#211E17;--portrait-start:#302B20;--portrait-end:#151411}*{box-sizing:border-box}html,body{width:100%;min-width:320px;min-height:100%;margin:0}body{overflow-x:hidden;overflow-y:auto;background:var(--background);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;font-size:14px;transition:background-color 450ms ease,color 450ms ease}button{font:inherit}.archive{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;width:100%;height:calc(100vh - 64px);height:calc(100dvh - 64px);min-height:420px;padding:14px;background:var(--background);transition:background-color 450ms ease}.sidebar,.content{min-width:0;min-height:0;border:1px solid var(--border);background:var(--panel);transition:background-color 450ms ease,border-color 450ms ease}.sidebar{display:flex;flex-direction:column;padding:20px 12px}.brand{display:flex;align-items:center;gap:11px;padding:0 4px 24px}.brand-mark{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border:1px solid var(--accent);color:var(--accent);font-size:17px;font-weight:800;letter-spacing:1px;transition:color 450ms ease,border-color 450ms ease}.brand h1{margin:0;font-size:11px;line-height:1.5;letter-spacing:1px}.brand p{margin:5px 0 0;color:var(--muted);font-size:9px;letter-spacing:1.5px}.section-label,.sidebar-footer,.topbar,.content-footer{color:var(--muted);font-size:9px;letter-spacing:1.2px;transition:color 450ms ease}.section-label{padding:16px 8px 10px;border-top:1px solid var(--border)}#character-list{display:grid;gap:5px}.character{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-width:0;padding:12px 9px;border:1px solid transparent;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease,transform 220ms ease,box-shadow 220ms ease}.character:hover{transform:translateX(4px);border-color:var(--border);background:var(--panel-light)}.character.active{border-color:var(--accent);background:linear-gradient(90deg,var(--glow),var(--panel-light));box-shadow:inset 3px 0 var(--accent)}.character:active{transform:translateX(2px) scale(0.985)}.number{flex-shrink:0;color:var(--accent);font-size:10px;letter-spacing:0.5px}.character-info{display:grid;gap:3px;min-width:0}.character-name{overflow-wrap:anywhere;font-size:12px;font-weight:600}.character-alias{color:var(--muted);font-size:10px}.character{animation:buttonAppear 350ms ease both}.character:nth-child(2){animation-delay:40ms}.character:nth-child(3){animation-delay:80ms}.character:nth-child(4){animation-delay:120ms}.character:nth-child(5){animation-delay:160ms}.character:nth-child(6){animation-delay:200ms}.character:nth-child(7){animation-delay:240ms}@keyframes buttonAppear{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.sidebar-footer{margin-top:auto;padding:16px 8px 0;border-top:1px solid var(--border);line-height:1.9}.content{display:flex;flex-direction:column;padding:18px}.topbar,.content-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar{flex-shrink:0;padding-bottom:14px;border-bottom:1px solid var(--border)}.status{display:inline-flex;align-items:center;gap:7px;color:var(--accent)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow)}.dossier{display:grid;grid-template-columns:minmax(170px,0.7fr) minmax(0,1.3fr);align-items:stretch;gap:clamp(18px,3vw,36px);flex:1;min-width:0;min-height:0;margin-top:16px;padding:clamp(14px,2.2vw,26px);overflow:hidden;border:1px solid var(--border);background:var(--surface);opacity:1;transform:translateY(0);transition:opacity 180ms ease,transform 180ms ease,background-color 450ms ease,border-color 450ms ease}.dossier.switching{opacity:0;transform:translateY(8px)}.portrait{position:relative;display:grid;place-items:center;align-self:stretch;min-width:0;min-height:180px;max-height:100%;overflow:hidden;border:1px solid var(--accent);background:linear-gradient(180deg,transparent 50%,var(--portrait-end)),linear-gradient(145deg,var(--portrait-start),var(--portrait-end));color:var(--muted);transition:background 450ms ease,border-color 450ms ease,color 450ms ease}.portrait::before,.portrait::after{position:absolute;width:30px;height:30px;content:"";opacity:0.7}.portrait::before{top:10px;left:10px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}.portrait::after{right:10px;bottom:10px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent)}.portrait-placeholder{display:grid;justify-items:center;gap:10px;padding:14px;text-align:center;letter-spacing:2px;font-size:10px}.portrait-symbol{color:var(--accent);font-size:clamp(34px,5vw,64px);font-weight:300;letter-spacing:4px}.portrait-caption{color:var(--muted);font-size:8px;letter-spacing:1px}.details{min-width:0;min-height:0;overflow-y:auto;padding:2px 8px 8px 0;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.details::-webkit-scrollbar{width:5px}.details::-webkit-scrollbar-thumb{background:var(--border)}.identity{min-width:0}.eyebrow{display:inline-block;padding:6px 9px;border:1px solid var(--border);background:var(--panel-light);color:var(--accent);font-size:9px;letter-spacing:1.8px;transition:background-color 450ms ease,color 450ms ease,border-color 450ms ease}.details h2{margin:14px 0 5px;font-size:clamp(24px,3vw,40px);line-height:1.12;overflow-wrap:anywhere}.alias{margin:0;color:var(--muted);font-size:15px}.divider{height:1px;margin:20px 0;background:var(--border);transition:background-color 450ms ease}.field{margin-top:12px;padding:12px 14px;border:1px solid var(--border);background:var(--field-bg);transition:background-color 450ms ease,border-color 450ms ease}.field h3{margin:0 0 8px;color:var(--accent);font-size:9px;line-height:1.6;letter-spacing:1.4px;transition:color 450ms ease}.field p{margin:0;color:var(--text);font-size:12px;line-height:1.7;overflow-wrap:anywhere;transition:color 450ms ease}.palette{margin-top:14px;padding:13px 14px;border:1px solid var(--border);background:var(--panel);transition:background-color 450ms ease,border-color 450ms ease}.palette-heading{margin-bottom:10px;color:var(--muted);font-size:9px;letter-spacing:1.5px}.palette-content{display:flex;align-items:center;gap:12px;min-width:0}.palette-swatch{flex-shrink:0;width:34px;height:34px;border:1px solid var(--border);background:var(--accent);box-shadow:0 0 14px var(--glow);transition:background-color 450ms ease,box-shadow 450ms ease,border-color 450ms ease}.palette-details{display:grid;gap:5px;min-width:0}.palette-name{color:var(--text);font-size:10px;letter-spacing:0.8px;overflow-wrap:anywhere}.palette-hex{color:var(--accent);font-size:11px;letter-spacing:1px}.content-footer{flex-shrink:0;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}@media (max-width:760px){.archive{grid-template-columns:185px minmax(0,1fr);gap:7px;padding:7px}.sidebar{padding:12px 7px}.brand{align-items:flex-start;gap:8px;padding-bottom:16px}.brand-mark{width:32px;height:32px;font-size:13px}.brand h1{font-size:9px}.brand p{font-size:8px}.character{gap:7px;padding:10px 5px}.character-name{font-size:10px}.character-alias{font-size:9px}.content{padding:10px}.topbar,.content-footer{font-size:8px;letter-spacing:0.5px}.dossier{grid-template-columns:minmax(0,1fr);gap:14px;overflow:hidden;padding:12px}.portrait{min-height:95px;max-height:120px}.portrait-symbol{font-size:30px}.portrait-placeholder{gap:5px;font-size:8px}.portrait-caption{font-size:7px}.details{padding-right:4px}.details h2{font-size:clamp(21px,5vw,32px)}.field{padding:10px}.field h3{font-size:8px}.field p{font-size:11px}}@media (max-width:430px){.archive{grid-template-columns:120px minmax(0,1fr)}.brand{flex-direction:column}.brand h1{font-size:8px}.section-label{padding-right:2px;padding-left:2px;font-size:8px}.character{align-items:flex-start;gap:5px}.number{font-size:8px}.character-name{font-size:9px}.character-alias{font-size:8px}.status{gap:4px}.status-dot{flex-shrink:0}.content-footer{align-items:flex-start;font-size:7px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:inherit}.brand-mark{width:48px;height:48px;border-color:var(--border-bright,#454c53);background:linear-gradient(145deg,#20252a,#101214);font-size:17px;font-weight:700;letter-spacing:0.08em}.brand-name{display:flex;flex-direction:column;gap:2px}.brand-name strong{font-size:12px;font-weight:700;letter-spacing:0.16em}.brand-name small{color:var(--muted);font-size:10px}.license-note a{color:var(--accent);font-size:9px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(198,204,210,0.45);text-underline-offset:3px;transition:color 180ms ease,text-decoration-color 180ms ease}.license-note a:hover{color:var(--text);text-decoration-color:var(--text)}@media (max-width:760px){.content-footer{flex-wrap:wrap}.license-note{width:100%}} /* Мобильная компоновка архива: закреплённая панель и прокручиваемый список. */ @media(max-width:760px){ .archive{display:flex;flex-direction:column;height:auto;min-height:100dvh;padding:8px;gap:8px} .sidebar{position:sticky;top:0;z-index:20;max-height:42dvh;min-height:0;padding:10px;background:var(--panel);box-shadow:0 8px 18px rgba(0,0,0,.24)} .sidebar .brand{align-items:center;flex-direction:row;padding:0 2px 8px} .sidebar .brand-mark{width:32px;height:32px} .sidebar .brand-name strong{font-size:10px;letter-spacing:.08em;overflow-wrap:anywhere} .sidebar .brand-name small{font-size:8px;letter-spacing:.08em} .section-label{padding:8px 3px;border-top:1px solid var(--border);font-size:8px} #character-list{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;min-width:0;padding:2px 0 6px;scrollbar-width:thin;scroll-snap-type:x proximity} .character{flex:0 0 auto;width:auto;min-width:112px;max-width:160px;padding:8px;scroll-snap-align:start} .character:hover{transform:none} .character-info{max-width:110px} .sidebar-footer{display:block;margin-top:0;padding:7px 3px 0;border-top:1px solid var(--border);font-size:8px;line-height:1.45;overflow-wrap:anywhere} .content{min-height:68dvh;padding:12px} .dossier{grid-template-columns:minmax(0,1fr);overflow:visible} .portrait{min-height:100px;max-height:130px} .details{overflow:visible} .content-footer{flex-wrap:wrap;gap:8px} .content-footer>span{min-width:0;overflow-wrap:anywhere} } @media(max-width:430px){ .archive{padding:5px} .sidebar{max-height:44dvh;padding:8px} .sidebar .brand{flex-direction:row} .sidebar .brand-name strong{font-size:9px} .sidebar-footer{font-size:7px;letter-spacing:.6px} .character{min-width:104px} .content{padding:8px} .topbar{align-items:flex-start;flex-wrap:wrap} .status{max-width:100%;overflow-wrap:anywhere} }.language-control{position:relative;display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;width:min(1080px,calc(100% - 36px));margin:0 auto 20px;font:10px Consolas,"Courier New",monospace;letter-spacing:.04em}.language-toggle,.language-choice{padding:9px 12px;border:1px solid var(--border-bright,#454c53);background:var(--panel,#131619);color:var(--text,#e5e8eb);font:inherit;cursor:pointer}.language-toggle:hover,.language-choice:hover{border-color:var(--accent,#c6ccd2)}.language-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:50;display:grid;gap:5px;min-width:190px;padding:8px;border:1px solid var(--border-bright,#454c53);background:var(--bg,#0c0e10);box-shadow:0 10px 28px rgba(0,0,0,.35)}.language-menu[hidden]{display:none}.language-menu .language-choice{text-align:left}.translation-guide-link{display:block;padding:10px 12px;border-top:1px solid var(--border,#292e33);color:var(--text,#e5e8eb);line-height:1.5}.translation-guide-link:hover{color:var(--accent,#c6ccd2)}.language-choice[aria-pressed="true"]{border-color:var(--accent,#c6ccd2);background:var(--panel-hover,#191d21)}@media(max-width:600px){.language-control{width:calc(100% - 28px);justify-content:flex-start}.language-menu{left:0;right:auto;max-width:calc(100vw - 28px)}}.portrait{width:min(100%,360px);aspect-ratio:3/4;height:auto;min-height:0;max-height:none;align-self:start;justify-self:center;padding:0;}.portrait-image{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:center;}.portrait.has-image{display:block;}.portrait-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:14px;text-align:center;letter-spacing:2px;font-size:10px;}@media(max-width:700px){.portrait{width:min(100%,300px);aspect-ratio:3/4;min-height:0;max-height:none;}}
/* Version 1.0: portrait orientation 3:4 on desktop and mobile. */
@media(min-width:761px){.dossier{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:clamp(14px,2vw,26px);padding:clamp(10px,1.4vw,18px)}.portrait{width:100%;max-width:none;aspect-ratio:3/4;justify-self:stretch;align-self:start}}
@media(max-width:760px){.portrait{width:min(100%,300px);aspect-ratio:3/4;justify-self:center}}

/* Исправление ориентации портрета: 3 по ширине × 4 по высоте. */
.portrait {
  aspect-ratio: 3 / 4;
  height: auto;
  min-height: 0;
  max-height: none;
}
.portrait-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 761px) {
  .portrait {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}
@media (max-width: 760px) {
  .portrait {
    width: min(100%, 300px);
    aspect-ratio: 3 / 4;
    justify-self: center;
  }
}


/* Version 1.0: portrait scales down proportionally to fit both dossier dimensions. */
@media (min-width: 761px) {
  .dossier {
    grid-template-rows: minmax(0, 1fr);
    container-type: size;
  }
  .portrait {
    width: min(100%, 75cqh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 3 / 4;
    justify-self: end;
    align-self: start;
    min-width: 0;
    min-height: 0;
    flex: none;
  }
}