:root {
  color-scheme: light;
  --bg: #D5D7DD;
  --shell: #7E90C5;
  --shell-light: #A7B6DE;
  --panel: #E0E5EF;
  --panel-shadow: #B4C0D8;
  --nav: #252731;
  --nav-border: #11131A;
  --ink: #20283A;
  --muted: #58657A;
  --card-edge: #53658D;
  --gold: #FFCA36;
  --gold-bright: #FFF1A8;
  --burgundy: #FF3F9B;
  --ember: #41E8FF;
  --shadow: rgba(22, 27, 43, 0.42);
  --vignette: rgba(20, 26, 44, 0.12);
  --accent-1: #176BFF;
  --accent-2: #7C2BFF;
  --accent-3: #D926FF;
  --accent-4: #00BDEB;
  --accent-5: #FF347F;
  --accent-6: #3E37B8;
  --accent-7: #FF3F9B;
  --accent-8: #41E8FF;
  --font: "Pixelify Sans", "Trebuchet MS", sans-serif;
  --font-text: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(44, 50, 67, 0.1) 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #DADCE1, #C9CCD4);
  background-size: 4px 4px, auto, auto;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow-x: hidden;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 14px 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #8799CD, #7184B9 75%);
  border: 3px solid #292A32;
  border-radius: 22px;
  box-shadow: 0 12px 0 #343540, 0 24px 50px var(--shadow), inset 0 1px 0 rgba(255,255,255,.65);
}

.card {
  position: relative;
  width: 100%;
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}
.window-bar {
  width: 100%; min-height: 30px; margin-bottom: 20px; padding: 5px 10px;
  display: flex; align-items: center; gap: 8px;
  color: white; background: linear-gradient(90deg, #475A95, #536AA8 55%, #43568F);
  border: 2px solid #344574; box-shadow: inset 1px 1px rgba(255,255,255,.28), 2px 2px 0 rgba(35,42,66,.24);
  text-align: left; font: 700 .7rem var(--font); letter-spacing: .07em; text-transform: uppercase;
}
.window-bar__icon { color: #FFE05D; }
.window-bar__controls { margin-left: auto; color: #E5EBFA; letter-spacing: .16em; }

.name { margin: 0; color: #17213D; font: 700 2.45rem var(--font); letter-spacing: .14em; text-transform: lowercase; text-shadow: 2px 2px 0 #E9EDFA; }
.subtitle { width: min(100%, 42ch); max-width: none; margin: 10px 0 0; color: #31374A; font: italic 1.3rem var(--font-text); line-height: 1.25; }
.subtitle__by { display: block; margin-top: 6px; color: #59647B; font: 600 .65rem var(--font); letter-spacing: .14em; text-transform: uppercase; }

.divider { width: 100%; margin: 18px 0 22px; display: flex; align-items: center; gap: 12px; color: var(--ember); }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, #566A9C 25%, #566A9C 75%, transparent); }
.divider span { color: #00C9F0; font: 700 .75rem var(--font); line-height: 1; }

.hero { width: 100%; display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 18px; text-align: left; }
.photo {
  position: relative; width: 100%; min-height: 300px; overflow: hidden;
  background-color: #CBD2E2; background-size: cover; background-position: 50% 18%; background-repeat: no-repeat;
  border: 4px ridge #8794B4; outline: 1px solid #F0F2F8; outline-offset: -7px;
  box-shadow: 0 4px 0 #455683, 0 8px 18px -10px var(--shadow);
}
.reading { width: 100%; min-height: 300px; margin: 0; padding: 12px; text-align: left; background: linear-gradient(135deg, #E0E5EF, #C8D2E8); border: 3px ridge #8394BB; box-shadow: inset 1px 1px 0 #fff, 2px 3px 0 rgba(41,51,83,.28); }
.reading__label { margin: 0 0 10px; padding: 5px 7px; color: #fff; background: linear-gradient(90deg, #465B96, #637BB5); border-bottom: 2px solid #374A7F; font: 700 .68rem var(--font); letter-spacing: .08em; text-transform: uppercase; }
.reading__empty { margin: 0; color: #515C71; font: italic 1.05rem var(--font-text); }
.reading[hidden] { display: none; }
.reading__list { display: flex; flex-direction: column; gap: 9px; }
.book { display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--ink); background: #F0F2F7; border: 2px outset #AAB7D0; text-decoration: none; box-shadow: 1px 2px 0 rgba(34,43,67,.18); }
.book__cover { width: 40px; height: 60px; flex: none; object-fit: cover; border: 1px solid #68799F; background: #D7DCE8; }
.book__info { flex: 1; min-width: 0; }
.book__title { font: 600 1.05rem var(--font-text); line-height: 1.2; }
.book__author { margin-top: 2px; color: #58657A; font: italic .95rem var(--font-text); }
a.book:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(25,35,60,.2); }
.progress { height: 7px; margin-top: 8px; overflow: hidden; background: #30384D; border: 1px inset #A9B5D0; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, #FF3F9B, #FFDB38, #41E8FF); }
.book__pct { margin-top: 4px; color: #58657A; font: 600 .62rem var(--font); letter-spacing: .06em; }

.socials { width: 100%; margin: 0; padding: 12px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; background: rgba(45,58,97,.42); border: 2px solid #56699B; box-shadow: inset 1px 1px rgba(255,255,255,.18); }
.socials li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.chip {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; height: 48px;
  color: var(--chip-ink, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--chip) 72%, white), var(--chip) 48%, color-mix(in srgb, var(--chip) 72%, black));
  border: 2px outset color-mix(in srgb, var(--chip) 62%, white); box-shadow: inset 1px 1px 0 rgba(255,255,255,.38), 0 3px 0 rgba(0,0,0,.32);
  font: 700 .72rem var(--font); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: transform .12s, filter .12s;
}
.chip:hover, .chip:focus-visible { filter: brightness(1.14); transform: translateY(-1px); }
.chip:active { transform: translateY(2px); filter: brightness(.9); }
.chip__glyph { font: 1rem var(--font-text); letter-spacing: 0; }
.icon { width: 18px; height: 18px; flex: none; }
.icon--stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.footer { display: flex; justify-content: space-between; gap: 8px; margin: 0 -2px; padding: 8px 10px 2px; color: #E3E8F4; font: 600 .58rem var(--font); letter-spacing: .09em; text-transform: uppercase; }

@media (max-width: 600px) {
  body { align-items: flex-start; padding: 14px 10px 24px; }
  .page { border-radius: 16px; padding: 0 8px 9px; }
  .card { padding: 16px 6px 14px; }
  .hero { grid-template-columns: 1fr; gap: 12px; }
  .photo { min-height: 0; aspect-ratio: 1 / 1; background-position: 50% 25%; }
  .reading { min-height: 0; }
  .name { font-size: 2rem; letter-spacing: .1em; }
  .subtitle { font-size: 1.15rem; }
  .socials { padding: 8px; gap: 8px; }
  .chip { font-size: .62rem; }
  .footer { font-size: .5rem; }
}

@media (max-width: 360px) {
  .name { font-size: 1.65rem; }
  .chip { gap: 5px; }
}