:root {
--paper: #1A1C20;
--paper2: #111214;
--blush: #546E7A;
--rose: #263238;
--rose2: #37474F;
--ink: #CFD8DC;
--stroke: rgba(207, 216, 220, .15);
--stroke2: rgba(207, 216, 220, .10);
--fontTitle: 'Cinzel', serif;
--fontBody: 'Noto Serif JP', serif;
--fontUI: 'Sawarabi Gothic', sans-serif;
--radius: 8px;
--shadow: 0 18px 60px rgba(0, 0, 0, .5);
--bloom: rgba(84, 110, 122, .2);
--mist: rgba(26, 28, 32, .55);
--spark: rgba(255, 255, 255, .35);
}

.wrap {
width: 100%;
max-width: 900px;
height: 100vh;
margin: 0 auto;
font-family: var(--fontBody);
color: var(--ink);
position: relative;
}

body {
margin: 0 auto;
padding: 0;
background: #121212;
overflow: hidden;
height: 100vh;
}

.bg {
height: 100%;
border: 1px solid var(--stroke);
border-radius: var(--radius);
overflow: hidden;
position: relative;
box-shadow: var(--shadow);
background:
    radial-gradient(1200px 600px at 30% -10%, rgba(84, 110, 122, .15), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(38, 50, 56, .3), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper2));
box-sizing: border-box;
}

.bg::before {
content: "";
position: absolute;
inset: 0;
background:
    repeating-linear-gradient(15deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, .02), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(84, 110, 122, .05), transparent 60%);
mix-blend-mode: multiply;
opacity: .55;
pointer-events: none;
}

.bg::after {
content: "";
position: absolute;
inset: -30%;
background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 55%),
    radial-gradient(circle at 75% 60%, rgba(84, 110, 122, .1), transparent 60%),
    radial-gradient(circle at 50% 85%, rgba(38, 50, 56, .1), transparent 65%);
filter: blur(18px);
opacity: .65;
pointer-events: none;
animation: glowDrift 12s ease-in-out infinite;
}

@keyframes glowDrift {
0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
}

50% {
    transform: translate3d(20px, -14px, 0) rotate(2deg);
}

100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
}

.layi {
height: 100%;
display: grid;
grid-template-columns: 120px 1fr;
position: relative;
}

.sidebar {
border-right: 1px solid var(--stroke);
background: linear-gradient(180deg, rgba(26, 28, 32, .8), rgba(17, 18, 20, .4));
}

.inside {
padding: 18px 12px;
display: grid;
gap: 12px;
align-content: start;
position: sticky;
top: 0;
}

.navarea:hover .navigation button {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.fanButton {
width: 56px;
height: 56px;
margin: 6px auto 0;
border-radius: 16px;
border: 1px solid var(--stroke);
background:
    radial-gradient(circle at 30% 25%, rgba(84, 110, 122, .3), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(38, 50, 56, .3), transparent 60%),
    linear-gradient(180deg, rgba(26, 28, 32, .7), rgba(17, 18, 20, .4));
box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
display: grid;
place-items: center;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.fanButton:hover {
transform: translateY(-2px);
box-shadow: 0 16px 42px rgba(0, 0, 0, .4);
filter: brightness(1.03);
}

.fanButton img {
width: 32px;
opacity: .8;
}

.navLabel {
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
text-align: center;
color: rgba(207, 216, 220, .5);
}

.navigation {
display: grid;
gap: 8px;
margin: 6px;
width: 64px;
}

.navigation button {
all: unset;
cursor: pointer;
width: 64px;
padding: 13px 8px;
border-radius: 14px;
border: 1px solid transparent;
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(207, 216, 220, .7);
background: rgba(255, 255, 255, .03);
transition: .22s ease;
text-align: center;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
}

.navigation button:hover {
border-color: rgba(207, 216, 220, .2);
background:
    radial-gradient(circle at 30% 30%, rgba(84, 110, 122, .2), transparent 60%),
    rgba(255, 255, 255, .05);
box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.main {
overflow: auto;
display: flex;
flex-direction: column;
min-width: 0;
}

.content {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 14px 18px 50px;
scroll-behavior: smooth;
}

.content::-webkit-scrollbar {
width: 10px;
}

.content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, .2);
border-left: 1px solid var(--stroke);
}

.content::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--blush), var(--rose));
border: 1px solid rgba(29, 3, 4, .16);
border-radius: 999px;
}

.content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(202, 108, 113, .72), rgba(213, 197, 186, .55));
}

.content {
scrollbar-width: thin;
scrollbar-color: var(--blush) var(--paper2);
}

/* ========================= HEADER  ========================= */
.headerwrap {
flex: 0 0 auto;
padding: 18px 18px 0;
}

.header {
border: 1px solid var(--stroke);
border-radius: calc(var(--radius) + 2px);
overflow: hidden;
background: var(--paper2);
box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.headerimg {
height: 180px;
background:
    linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2)),
    var(--img);
background-size: cover;
background-position: center;
position: relative;
filter: grayscale(100%);
transition: filter .4s ease;
}

.headerimg:hover {
filter: grayscale(0%);
}

.headerimg::after {
content: "";
position: absolute;
inset: -10%;
background:
    radial-gradient(220px 140px at 20% 25%, rgba(84, 110, 122, .15), transparent 60%),
    radial-gradient(180px 120px at 75% 35%, rgba(38, 50, 56, .2), transparent 60%),
    radial-gradient(140px 90px at 55% 75%, rgba(255, 255, 255, .22), transparent 65%),
    repeating-linear-gradient(20deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 12px);
mix-blend-mode: screen;
opacity: .9;
animation: bloomFloat 9s ease-in-out infinite;
}

@keyframes bloomFloat {
0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
}

50% {
    transform: translate3d(14px, -10px, 0) rotate(1.6deg);
}

100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
}
}

.headerbar {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: end;
padding: 14px 16px 16px;
background: linear-gradient(180deg, var(--paper), var(--paper2));
border-top: 1px solid var(--stroke);
}

.characterName {
margin: 0;
font-family: var(--fontTitle);
font-weight: 400;
font-size: 40px;
line-height: 1;
color: var(--ink);
text-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.characterSubtitle {
margin-top: 6px;
font-family: var(--fontUI);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(207, 216, 220, .5);
}

.headertags {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}

.tag {
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid var(--stroke);
background: rgba(255, 255, 255, .05);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.tag:hover {
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(0, 0, 0, .2);
filter: brightness(1.02);
}

.sectionGrid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 14px;
}

.panel {
border: 1px solid var(--stroke);
border-radius: calc(var(--radius) + 2px);
background: rgba(255, 255, 255, .02);
box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
overflow: hidden;
position: relative;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.panel:hover {
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
filter: saturate(1.02);
}

.panelHeader {
padding: 12px 14px;
background:
    radial-gradient(circle at 20% 10%, rgba(84, 110, 122, .1), transparent 55%),
    linear-gradient(180deg, var(--paper), var(--paper2));
border-bottom: 1px solid var(--stroke);
display: flex;
justify-content: space-between;
gap: 10px;
align-items: baseline;
}

.panelHeader h2 {
margin: 0;
font-family: var(--fontUI);
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ink);
}

.panelHeader span {
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .14em;
color: rgba(207, 216, 220, .4);
}

.panelBody {
padding: 14px;
line-height: 1.55;
font-size: 13px;
color: rgba(207, 216, 220, .8);
}

.quote {
padding: 12px 12px 12px 14px;
border-left: 3px solid var(--blush);
background: rgba(255, 255, 255, .03);
border-radius: 4px;
font-style: italic;
}

.divider {
height: 1px;
background: var(--stroke);
margin: 20px auto;
position: relative;
}

.divider::before {
content: '𖦹';
position: absolute;
left: 45%;
top: -20px;
background: var(--paper);
padding: 5px 10px;
font-size: 1.3em;
color: var(--blush);
}

.imageBlock {
border-radius: 16px;
border: 1px solid var(--stroke);
overflow: hidden;
position: relative;
background: var(--paper2);
filter: grayscale(100%);
transition: transform .22s ease, box-shadow .22s ease, filter .4s ease;
}

.imageBlock:hover {
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(29, 3, 4, .14);
filter: grayscale(0%) brightness(1.03) saturate(1.04);
}

.imageBlock::after {
content: "";
position: absolute;
inset: -10%;
background:
    radial-gradient(220px 140px at 20% 25%, rgba(84, 110, 122, .1), transparent 60%),
    radial-gradient(180px 120px at 80% 35%, rgba(38, 50, 56, .1), transparent 60%),
    radial-gradient(120px 90px at 55% 78%, rgba(255, 255, 255, .20), transparent 65%),
    repeating-linear-gradient(25deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 12px);
mix-blend-mode: screen;
opacity: .92;
pointer-events: none;
animation: bloomFloat 10s ease-in-out infinite;
}

.imageCaption {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
padding: 8px 10px;
border-radius: 14px;
border: 1px solid var(--stroke);
background: rgba(0, 0, 0, .6);
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
opacity: 0;
transform: translateY(6px);
transition: .22s ease;
}

.imageBlock:hover .imageCaption {
opacity: 1;
transform: translateY(0);
}

.imageWide {
height: 200px;
}

.imageSquare {
height: 140px;
}

.imageMain {
height: 270px;
position: relative;
border-radius: var(--radius);
width: 270px;
overflow: visible;
}

.details {
display: grid;
gap: 8px;
}

.detailRow {
display: grid;
grid-template-columns: 110px 1fr;
gap: 10px;
padding: 10px;
border-radius: 14px;
background: rgba(255, 255, 255, .02);
border: 1px solid var(--stroke2);
transition: .22s ease;
}

.detailRow:hover {
background: rgba(255, 255, 255, .05);
border-color: rgba(29, 3, 4, .16);
}

.detailItem {
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(207, 216, 220, .5);
}

.detailValue {
font-size: 13px;
color: var(--ink);
}

.meterGroup {
display: grid;
gap: 10px;
}

.barMeter {
--value: 70;
border-radius: 14px;
border: 1px solid var(--stroke);
background: rgba(0, 0, 0, .2);
padding: 10px;
}

.barTop {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: baseline;
margin-bottom: 8px;
}

.barTitle {
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
}

.barValue {
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .14em;
color: rgba(207, 216, 220, .4);
}

.barTrack {
height: 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .05);
background: rgba(0, 0, 0, .3);
overflow: hidden;
}

.barFill {
height: 100%;
width: calc(var(--value) * 1%);
border-radius: 999px;
background: linear-gradient(90deg, var(--blush), var(--rose));
box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
transition: width .6s ease;
}

.splitColumns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.list {
border-radius: 14px;
border: 1px solid var(--stroke);
background: rgba(255, 255, 255, .02);
padding: 10px;
}

.list h3 {
margin: 0 0 8px 0;
font-family: var(--fontUI);
color: var(--blush);
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
}

.list h4 {
margin: 8px 0 8px 0;
font-family: var(--fontUI);
color: var(--blush);
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
}

.list p {
margin: 0;
font-size: 13px;
color: rgba(207, 216, 220, .7);
line-height: 1.5;
}

.chipRow {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.chip {
font-style: normal;
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid var(--stroke);
background: rgba(255, 255, 255, .05);
transition: .22s ease;
}

.chip:hover {
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(0, 0, 0, .2);
background: rgba(255, 255, 255, .08);
}

.masonry {
column-count: 3;
column-gap: 10px;
}

.masonryItem {
break-inside: avoid;
margin: 0 0 10px 0;
}

.masonry .imageBlock {
width: 100%;
}

.relationAvatar::after {
content: "";
position: absolute;
inset: -10%;
background:
    radial-gradient(120px 90px at 20% 25%, rgba(84, 110, 122, .1), transparent 60%),
    radial-gradient(120px 90px at 70% 80%, rgba(255, 255, 255, .18), transparent 65%);
mix-blend-mode: screen;
opacity: .9;
pointer-events: none;
}

.relationCard:hover .relationAvatar {
filter: grayscale(0%);
}

.relationMeta {
display: grid;
gap: 4px;
}

.relationName {
font-family: var(--fontUI);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
}

.relationLine {
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .12em;
color: rgba(207, 216, 220, .4);
}

.relationTag {
display: inline-block;
margin-top: 4px;
padding: 6px 8px;
border-radius: 999px;
border: 1px solid var(--stroke);
background: rgba(255, 255, 255, .05);
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(207, 216, 220, .6);
}

.relationTextBox {
margin-top: 8px;
height: 88px;
overflow: auto;
padding: 10px;
border-radius: 14px;
border: 1px solid var(--stroke2);
background: rgba(0, 0, 0, .2);
font-size: 13px;
color: rgba(207, 216, 220, .7);
line-height: 1.5;
}

.relationTextBox::-webkit-scrollbar {
width: 8px;
}

.relationTextBox::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--blush), var(--rose));
border: 1px solid var(--stroke);
border-radius: 999px;
}

.imageGrid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.relationsStack {
display: grid;
gap: 10px;
}

.relationEntry {
border-radius: 18px;
border: 1px solid rgba(29, 3, 4, .14);
background:
    radial-gradient(220px 140px at 16% 20%, rgba(84, 110, 122, .1), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper2));
overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.relationEntry:hover {
transform: translateY(-2px);
box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
filter: saturate(1.02);
}

.relationEntryHeader {
padding: 10px 12px;
border-bottom: 1px solid rgba(29, 3, 4, .12);
background:
    radial-gradient(circle at 18% 20%, rgba(84, 110, 122, .1), transparent 55%),
    linear-gradient(180deg, var(--paper2), var(--paper));
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(207, 216, 220, .5);
}

.relationEntryBody {
display: grid;
grid-template-columns: 220px 1fr;
gap: 12px;
padding: 12px;
}

.relationLeft {
display: grid;
gap: 10px;
min-width: 0;
}

.relationAvatarLarge {
height: 160px;
border-radius: 16px;
border: 1px solid rgba(29, 3, 4, .16);
overflow: hidden;
position: relative;
background: rgba(0, 0, 0, .3);
filter: grayscale(100%);
transition: filter .4s ease;
}

.relationAvatarLarge::after {
content: "";
position: absolute;
inset: -10%;
background:
    radial-gradient(220px 140px at 20% 25%, rgba(84, 110, 122, .1), transparent 60%),
    radial-gradient(180px 120px at 80% 35%, rgba(38, 50, 56, .1), transparent 60%),
    radial-gradient(120px 90px at 55% 78%, rgba(255, 255, 255, .20), transparent 65%),
    repeating-linear-gradient(25deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 12px);
mix-blend-mode: screen;
opacity: .92;
pointer-events: none;
animation: bloomFloat 10s ease-in-out infinite;
}

.relationEntry:hover .relationAvatarLarge {
filter: grayscale(0%);
}

.relationIdentity {
border-radius: 16px;
border: 1px solid rgba(29, 3, 4, .12);
background: rgba(255, 255, 255, .02);
padding: 10px;
display: grid;
gap: 8px;
}

.relationNameLine {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}

.relationName {
margin: 0;
font-family: var(--fontUI);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink);
}

.relationType {
display: inline-block;
padding: 6px 8px;
border-radius: 999px;
border: 1px solid rgba(29, 3, 4, .16);
background: rgba(255, 255, 255, .05);
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(207, 216, 220, .5);
}

.relationQuote {
margin: 0;
padding: 10px;
border-radius: 14px;
border-left: 3px solid var(--blush);
background: rgba(255, 255, 255, .02);
font-style: italic;
color: rgba(207, 216, 220, .7);
}

.relationRight {
display: grid;
gap: 10px;
min-width: 0;
}

.relationTextScroll {
height: 190px;
overflow: auto;
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(29, 3, 4, .12);
background: rgba(0, 0, 0, .2);
line-height: 1.55;
color: rgba(207, 216, 220, .8);
}

.relationTextScroll::-webkit-scrollbar {
width: 8px;
}

.relationTextScroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--blush), var(--rose));
border: 1px solid rgba(29, 3, 4, .14);
border-radius: 999px;
}

.relationMoments {
display: grid;
gap: 8px;
padding: 10px;
border-radius: 16px;
border: 1px solid rgba(29, 3, 4, .12);
background: rgba(255, 255, 255, .02);
}

.relationMoments h4 {
margin: 0;
font-family: var(--fontUI);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(207, 216, 220, .5);
}

.relationMoments p {
margin: 0;
font-size: 13px;
color: rgba(207, 216, 220, .7);
line-height: 1.5;
}

.tabContent {
display: none;
opacity: 0;
transform: translateY(8px);
transition: opacity .28s ease, transform .28s ease;
will-change: opacity, transform;
}

.tabContent.isActive {
display: block;
opacity: 1;
transform: translateY(0);
}

.tabContent.isFadingOut {
opacity: 0;
transform: translateY(12px);
}

.code {
margin: 15px auto;
font: 1.5em var(--fontTitle);
text-align: center;
color: var(--blush);
cursor: pointer;
transition: transform .5s;
text-shadow: 0px 0px 5px;
}

a {
color: var(--blush);
text-decoration: none;
}

a:visited {
color: var(--blush);
text-decoration: none;
}

a:link {
color: var(--blush);
text-decoration: none;
}

@media (max-width: 850px) {
.layi {
    grid-template-columns: 1fr;
}

.headerbar {
    text-align: center;
}

.headerimg {
    display: none;
}

.sidebar {
    border-right: none;
    border-bottom: 1px solid var(--stroke);
}

.inside {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.navLabel {
    display: none;
}

.navigation {
    display: flex;
    justify-content: center;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    margin: 0;
}

.navigation button {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    width: auto;
    padding: 5px 5px;
    border-radius: 8px;
}

.sectionGrid, .headerbar, .relationEntryBody {
    grid-template-columns: 1fr;
}

.headertags {
    justify-content: center;
}

.imageMain {
    margin: 0 auto;
}

.masonry {
    column-count: 2;
}
}

@media (max-width: 500px) {
.masonry {
    column-count: 1;
}
.navigation {
    grid-template-columns: repeat(3, 1fr);
}
.characterName {
    font-size: 32px;
}
}