:root {
  --ink: #101828; --muted: #657083; --faint: #98a2b3; --line: #e5e9ef;
  --paper: #f6f8fa; --white: #fff; --green: #159472; --sidebar: 264px;
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink); background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 70px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; background: var(--paper); }
body { overflow-x: hidden; }
button, a { font: inherit; } button { border: 0; } a { color: inherit; text-decoration: none; }
.site-shell { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 18px auto auto 18px; z-index: 20; width: var(--sidebar); max-height: calc(100vh - 36px); overflow-y: auto;
  display: flex; flex-direction: column; padding: 32px 24px 24px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 18px 42px rgba(34,53,74,.08); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: baseline; width: max-content; margin: 2px 8px 55px; }
.brand-word { font-size: 19px; font-weight: 800; letter-spacing: .08em; }
.brand-dot { color: var(--green); font-size: 25px; font-weight: 800; }
.brand small { margin-left: 9px; color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.primary-nav { display: grid; gap: 4px; }
.nav-link {
  position: relative; display: grid; grid-template-columns: 32px 1fr; align-items: center;
  min-height: 48px; padding: 0 13px; border-radius: 8px; color: #697386;
  font-size: 13px; font-weight: 600; transition: color .2s ease, background-color .2s ease;
}
.nav-link::before { content: ""; position: absolute; left: -24px; width: 2px; height: 0; background: var(--green); transition: height .2s ease; }
.nav-link:hover { color: var(--ink); background: #f4f7f7; }
.nav-link.is-active { color: var(--ink); background: #edf7f3; }
.nav-link.is-active::before { height: 24px; }
.nav-glyph { color: #9ca6b5; font-size: 9px; letter-spacing: .08em; }
.nav-link.is-active .nav-glyph { color: var(--green); }

.membership-card {
  position: relative; margin-top: auto; overflow: hidden; padding: 20px;
  border: 1px solid rgba(81,101,128,.14); border-radius: 8px;
  background: linear-gradient(145deg, #e8f8f2 0%, #edf4ff 54%, #efebff 100%);
  box-shadow: 0 18px 45px rgba(50,67,93,.1), inset 0 1px rgba(255,255,255,.85);
}
.membership-card::after { content: ""; position: absolute; right: -45px; bottom: -60px; width: 150px; height: 150px; border: 1px solid rgba(91,75,184,.09); border-radius: 50%; box-shadow: 0 0 0 20px rgba(91,75,184,.025), 0 0 0 42px rgba(21,148,114,.02); }
.member-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #557166; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.membership-card > p { position: relative; z-index: 1; margin: 32px 0 4px; color: #3d4b60; font-size: 12px; font-weight: 700; }
.membership-card h2 { position: relative; z-index: 1; margin: 0; font-size: 27px; letter-spacing: 0; }
.member-benefits-title { position: relative; z-index: 1; margin: 0 0 10px !important; color: #278e79 !important; font-size: 10px !important; font-weight: 800 !important; }
.member-rule { width: 100%; height: 1px; margin: 20px 0 15px; background: linear-gradient(90deg, rgba(21,148,114,.55), rgba(110,94,210,.3), transparent); }
.membership-card ul { position: relative; z-index: 1; display: grid; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; color: #5c687a; font-size: 10px; }
.membership-card li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--green); }
.member-cta { position: relative; z-index: 1; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: 7px; background: #142239; color: white; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.member-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(20,34,57,.18); }
.member-cta span:last-child { color: #9d90ff; font-size: 18px; }
.sidebar-footer { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; margin-top: 18px; padding: 15px 6px 0; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #edf1f5; color: #5f6b7e; font-size: 11px; font-weight: 700; }
.sidebar-footer b, .sidebar-footer small { display: block; }
.sidebar-footer b { font-size: 10px; } .sidebar-footer small { margin-top: 2px; color: var(--faint); font-size: 8px; }
.sidebar-footer button { padding: 5px 0; background: transparent; color: var(--green); font-size: 9px; cursor: pointer; }

main { margin-left: var(--sidebar); min-width: 0; background: var(--white); }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid rgba(229,233,239,.9); background: rgba(255,255,255,.9); }
.mobile-brand { display: none; }
.breadcrumbs { display: flex; gap: 10px; color: var(--faint); font-size: 10px; letter-spacing: .06em; }
.breadcrumbs strong { color: #49566a; }
.login-button { display: flex; align-items: center; gap: 8px; padding: 0; background: transparent; color: #586579; font-size: 10px; cursor: pointer; }
.avatar.mini { width: 28px; height: 28px; }

.hero { position: relative; min-height: 570px; height: min(690px, calc(100vh - 68px)); overflow: hidden; background: #eef2f4; isolation: isolate; }
.hero-media { position: absolute; z-index: -3; inset: 0 0 0 36%; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 53% center; filter: saturate(.58) contrast(.92) brightness(.9); }
.hero-wash { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #f9fbfc 0%, #f9fbfc 38%, rgba(249,251,252,.92) 49%, rgba(249,251,252,.18) 73%, rgba(12,27,40,.12) 100%), linear-gradient(0deg, rgba(13,28,42,.18), transparent 46%); }
.hero::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.42); border-radius: 8px; pointer-events: none; }
.hero-content { position: relative; z-index: 2; width: min(63%,650px); height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 62px clamp(42px,5vw,76px) 76px; }
.hero-meta { position: absolute; top: 32px; left: clamp(42px,5vw,76px); display: flex; gap: 22px; color: #8c98aa; font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.hero-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--green); }
.eyebrow { margin: 0 0 16px; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.hero h1 { max-width: 600px; margin: 0; font-size: clamp(42px,3.75vw,58px); line-height: 1.13; letter-spacing: 0; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-summary { margin: 20px 0 0; color: #697588; font-size: 11px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.primary-action { min-width: 142px; min-height: 46px; display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 16px; border-radius: 6px; background: var(--ink); color: white; box-shadow: 0 12px 24px rgba(16,24,40,.14); font-size: 11px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(16,24,40,.22); }
.primary-action span { color: #42c6a2; font-size: 15px; }
.quiet-action { padding-bottom: 6px; border-bottom: 1px solid #cdd5de; color: #536074; font-size: 10px; font-weight: 600; }
.quiet-action span { margin-left: 10px; color: var(--green); font-size: 14px; }
.feature-note { position: absolute; z-index: 3; top: 36px; right: 5%; display: grid; gap: 9px; text-align: right; color: rgba(255,255,255,.9); }
.feature-note span { color: #38c9a2; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.feature-note strong { font-size: 19px; letter-spacing: .08em; }
.feature-note small { color: rgba(255,255,255,.62); font-size: 7px; letter-spacing: .17em; }
.archive-stamp { position: absolute; z-index: 3; right: 5%; bottom: 38px; min-width: 80px; padding: 11px; border: 1px solid rgba(255,255,255,.46); border-radius: 7px; background: rgba(255,255,255,.64); backdrop-filter: blur(14px); text-align: center; }
.archive-stamp span { display: block; color: #405066; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.archive-stamp strong { color: var(--green); font-size: 25px; }
.scroll-cue { position: absolute; z-index: 3; left: clamp(42px,5vw,76px); bottom: 22px; display: flex; align-items: center; gap: 10px; color: #97a2b2; font-size: 7px; font-weight: 700; letter-spacing: .18em; }
.scroll-cue span { display: block; width: 30px; height: 1px; background: #c6ced8; }

.library { padding: 76px clamp(42px,5vw,76px) 88px; background: #f7f9fb; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid #dfe5ec; }
.section-heading p { margin: 0 0 12px; color: #98a4b5; font-size: 9px; font-weight: 800; letter-spacing: .24em; }
.section-heading h2 { margin: 0; font-size: clamp(34px,3.5vw,50px); letter-spacing: 0; }
.section-index { padding-bottom: 8px; color: #a0aaba; font-size: 8px; font-weight: 700; letter-spacing: .17em; }
.library-empty { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px 12px; text-align: center; }
.empty-kicker { margin: 0 0 10px !important; color: var(--green) !important; font-size: 8px !important; font-weight: 800; letter-spacing: .2em; }
.library-empty h3 { margin: 0; font-size: 24px; }
.library-empty > p { max-width: 470px; margin: 12px auto 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.empty-details { display: flex; margin-top: 28px; border: 1px solid #e1e6ed; border-radius: 8px; background: rgba(255,255,255,.72); }
.empty-details span { min-width: 150px; padding: 15px 22px; color: #7b8798; font-size: 9px; }
.empty-details span + span { border-left: 1px solid #e1e6ed; }
.empty-details b { margin-right: 5px; color: #263348; font-size: 12px; }

.method { display: grid; grid-template-columns: 130px minmax(270px,.85fr) 1.15fr; gap: clamp(32px,4vw,64px); padding: 92px clamp(42px,5vw,76px); background: white; }
.method-index { display: flex; flex-direction: column; gap: 9px; color: #9aa5b5; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.method-index strong { color: var(--green); font-size: 15px; }
.method-copy h2 { margin: 0; font-size: clamp(29px,2.7vw,42px); line-height: 1.25; letter-spacing: 0; }
.method-copy > p:last-child { max-width: 470px; margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.85; }
.method-principles { display: grid; border-top: 1px solid var(--line); }
.method-principles article { display: grid; grid-template-columns: 34px 110px 1fr; gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.method-principles span { color: var(--green); font-size: 8px; font-weight: 700; }
.method-principles h3 { margin: 0; font-size: 12px; }
.method-principles p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px clamp(48px,6vw,92px); border-top: 1px solid var(--line); background: #fbfcfd; color: #99a3b2; font-size: 8px; letter-spacing: .08em; }
footer a { color: #647184; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; transform: translate(-50%,18px); padding: 11px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(16,24,40,.94); color: white; box-shadow: 0 14px 30px rgba(16,24,40,.2); font-size: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

/* Keep isolated visual layers from invalidating the rest of the page during motion. */
.hero { contain: paint; }
.hero-media { contain: paint; }

/* Premium motion: one continuous easing language across depth, light, and controls. */
.hero {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  transition: box-shadow .9s cubic-bezier(.22,1,.36,1);
}
.hero::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--glow-x) var(--glow-y), rgba(255,255,255,.16), transparent 68%);
  opacity: .7;
  transition: background-position 1.1s cubic-bezier(.22,1,.36,1), opacity .8s ease;
}
.hero-media img {
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0) scale(1.055);
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.hero-content > * { transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .8s ease; }
.hero-content .hero-meta { transform: translate3d(calc(var(--pointer-x) * -.12), calc(var(--pointer-y) * -.12), 0); }
.hero-content .eyebrow, .hero-content h1, .hero-content .hero-summary, .hero-content .hero-actions { transform: translate3d(calc(var(--pointer-x) * -.2), calc(var(--pointer-y) * -.2), 0); }
.feature-note { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.feature-note:hover { transform: translate3d(-4px,-6px,0); }
.primary-action, .member-cta, .nav-link, .login-button, footer a {
  transition: transform .55s cubic-bezier(.16,1,.3,1), color .35s ease, background-color .45s ease, box-shadow .55s cubic-bezier(.16,1,.3,1);
}
.primary-action:hover, .member-cta:hover { transform: translateY(-3px); }
.nav-link:hover { transform: translateX(3px); }
.login-button:hover, footer a:hover { color: var(--green); }
.library {
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), box-shadow .8s ease;
}
.library.is-visible { box-shadow: 0 18px 48px rgba(24,44,68,.06); }
.library.is-visible .section-heading { animation: heading-settle .9s cubic-bezier(.16,1,.3,1) both; }
.library.is-visible .library-empty { animation: empty-settle 1.1s .1s cubic-bezier(.16,1,.3,1) both; }
@keyframes heading-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes empty-settle { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before { display: none; }
  .hero-media img, .hero-content > *, .feature-note { transform: none !important; }
}

/* Refined empty state: compact, intentional, and contained at every width. */
.library-empty {
  min-height: 224px;
  padding: 24px 24px 20px;
  justify-content: center;
}
.empty-kicker { display: block; margin: 0 0 8px !important; color: var(--green) !important; font-size: 9px !important; font-weight: 800; letter-spacing: .18em; }
.library-empty h3 { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.2; letter-spacing: .02em; }
.library-empty > p:not(.empty-kicker) { width: min(100%, 420px); margin: 9px auto 0; color: #7b8798; font-size: 12px; line-height: 1.6; }
.empty-actions { margin-top: 17px; }
.empty-actions .primary-action { width: auto; min-width: 124px; min-height: 38px; border-radius: 6px; font-size: 11px; box-shadow: 0 7px 16px rgba(18,154,121,.12); }
.empty-actions .primary-action span { font-size: 17px; color: #8ce0c9; }

@media (max-width: 560px) {
  .library-empty { min-height: 220px; padding: 22px 14px 16px; }
  .library-empty h3 { font-size: 20px; }
  .library-empty > p:not(.empty-kicker) { font-size: 11px; }
  .empty-actions { margin-top: 15px; }
  .empty-actions .primary-action { width: auto; }
}

/* Final visual pass: keep the supplied key art bright, legible and editorial. */
.hero-media { inset: 0 !important; }
.hero-media img {
  object-position: center center;
  filter: saturate(1.04) contrast(1.02) brightness(1.04);
  transform: scale(1.015);
}
.hero-wash {
  background:
    linear-gradient(90deg, rgba(248,251,250,.94) 0%, rgba(248,251,250,.82) 28%, rgba(248,251,250,.4) 49%, rgba(248,251,250,.06) 73%, rgba(9,30,42,.16) 100%),
    linear-gradient(0deg, rgba(238,247,245,.22), transparent 52%);
}
.hero-content { color: #132238; }
.hero-meta { color: #657487; }
.hero h1 { color: #132238; text-shadow: 0 2px 18px rgba(255,255,255,.46); }
.hero h1 em { color: #11876d; }
.hero-summary { color: #5d6b7b; }
.feature-note { color: #193247; text-shadow: 0 2px 15px rgba(255,255,255,.42); }
.feature-note span { color: #11876d; }
.feature-note small { color: rgba(25,50,71,.62); }
.archive-stamp { background: rgba(255,255,255,.74); }

/* A compact access frame: the form is the focus and the image is only a quiet signature. */
.auth-panel {
  grid-template-columns: 220px minmax(0, 1fr);
  width: min(720px, 100%);
  min-height: 520px;
  border-radius: 12px;
}
.auth-visual { min-height: 520px; background: #dfeeea; }
.auth-visual-image { background: url('assets/ludus-feature.webp') center/cover; filter: saturate(.72) brightness(.9); }
.auth-visual-wash { background: linear-gradient(180deg, rgba(8,42,48,.04), rgba(8,42,48,.72)); }
.auth-visual::after { inset: 14px; border-radius: 8px; border-color: rgba(255,255,255,.36); }
.auth-visual-content { inset: auto 22px 23px; }
.auth-visual-content strong, .auth-visual-content p { display: none; }
.auth-kicker { font-size: 8px; }
.auth-kicker::before { width: 5px; height: 5px; margin-right: 7px; box-shadow: 0 0 0 4px rgba(119,216,187,.13); }
.auth-visual-meta { display: grid; gap: 8px; margin-top: 18px; padding-top: 11px; font-size: 7px; }
.auth-form-wrap { padding: 48px 42px 34px; }
.auth-form-wrap > :not(.auth-close) { width: min(360px, 100%); margin-right: auto; margin-left: auto; }
.auth-close { top: 15px; right: 17px; width: 30px; height: 30px; border-radius: 8px; font-size: 22px; }
.auth-heading { gap: 11px; }
.auth-mark { width: 34px; height: 34px; border-radius: 8px; font-size: 14px; }
.auth-heading h2 { font-size: 23px; }
.auth-description { margin: 12px auto 22px; font-size: 11px; }
.auth-mode { margin-bottom: 22px; }
.auth-mode-button { min-height: 34px; padding-bottom: 10px; color: #a2acb6; font-size: 11px; }
.auth-mode-button:hover, .auth-mode-button.is-active { color: #375164; }
.auth-mode-indicator { height: 1px; background: #5bb598; }
.auth-field { gap: 7px; margin-bottom: 14px; }
.auth-input { min-height: 44px; border-radius: 7px; }
.auth-input > span { width: 36px; font-size: 13px; }
.auth-input input { height: 42px; font-size: 12px; }
.auth-submit { min-height: 46px; border-radius: 7px; }
.auth-footnote { margin-top: auto !important; padding-top: 17px; font-size: 8px; }

body.page-leaving .site-shell { opacity: 0; transform: translateY(10px); transition: opacity .26s ease, transform .26s ease; }
/* The three primary destinations share one shell, so navigation never reloads the page. */
.app-view { display: none; min-height: 1px; }
.app-view.is-active { display: block; animation: app-view-in .42s cubic-bezier(.16,1,.3,1) both; }
.app-view[aria-hidden="true"] { visibility: hidden; }
@keyframes app-view-in {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .app-view.is-active { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-leaving .site-shell { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .auth-panel { width: min(480px, 100%); border-radius: 10px; }
  .auth-form-wrap { padding: 48px 30px 30px; }
}
@media (max-width: 420px) {
  .auth-form-wrap { padding: 56px 21px 24px; }
}

/* Final membership palette override (kept last so it wins over legacy passes). */
.sidebar .membership-card { border-color:rgba(128,145,224,.3); background:radial-gradient(circle at 86% 108%,rgba(128,104,226,.2),transparent 42%),radial-gradient(circle at 8% -8%,rgba(104,176,255,.18),transparent 38%),linear-gradient(145deg,#f5f8ff 0%,#eef2ff 52%,#f3efff 100%); box-shadow:0 18px 38px rgba(56,66,129,.13),inset 0 1px rgba(255,255,255,.9),inset 0 0 0 1px rgba(111,127,216,.07); }
.sidebar .member-topline,.sidebar .membership-card .member-offer-kicker { color:#5969b8; }
.sidebar .membership-card .member-benefits-title { color:#5969b8 !important; }
.sidebar .membership-card li::before { background:#6a72d1; box-shadow:0 0 0 3px rgba(106,114,209,.1); }
.sidebar .membership-card .member-cta { background:linear-gradient(135deg,#172846 0%,#24386a 58%,#463a82 100%); box-shadow:0 12px 24px rgba(38,48,99,.22),inset 0 1px rgba(255,255,255,.14); }
.sidebar .membership-card .member-cta::after { display:block !important; background:linear-gradient(90deg,transparent,rgba(188,194,255,.55),transparent); animation:member-sweep 4.8s 1.2s ease-in-out infinite; }

/* Membership card: a restrained blue-violet system surface. */
.sidebar .membership-card {
  border: 1px solid rgba(128, 145, 224, .3);
  background:
    radial-gradient(circle at 86% 108%, rgba(128, 104, 226, .2), transparent 42%),
    radial-gradient(circle at 8% -8%, rgba(104, 176, 255, .18), transparent 38%),
    linear-gradient(145deg, #f5f8ff 0%, #eef2ff 52%, #f3efff 100%);
  box-shadow: 0 18px 38px rgba(56, 66, 129, .13), inset 0 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(111,127,216,.07);
  isolation: isolate;
  overflow: hidden;
  transition: transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease, border-color .3s ease;
}
.sidebar .membership-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(77, 92, 171, .035) 6px, transparent 7px);
  opacity: .7;
}
.sidebar .membership-card::after {
  right: -40px; bottom: -54px; width: 174px; height: 174px;
  border-color: rgba(88, 105, 198, .13);
  box-shadow: 0 0 0 22px rgba(88,105,198,.035), 0 0 0 48px rgba(129,103,219,.03);
}
.sidebar .membership-card:hover { transform: translateY(-4px); border-color: rgba(103,119,210,.48); box-shadow: 0 24px 46px rgba(56,66,129,.18), inset 0 1px rgba(255,255,255,.95); }
.sidebar .member-topline { color: #5365a7; }
.sidebar .membership-card .member-offer-kicker { color: #6674c4; }
.sidebar .membership-card h2 { color: #182744; }
.sidebar .membership-card .member-offer-note { color: #677795; }
.sidebar .member-rule { background: linear-gradient(90deg, rgba(93,116,213,.6), rgba(139,111,218,.35), transparent); }
.sidebar .member-benefits-title { color: #5969b8 !important; }
.sidebar .membership-card ul { color: #697894; }
.sidebar .membership-card li::before { background: #6a72d1; box-shadow: 0 0 0 3px rgba(106,114,209,.1); }
.sidebar .membership-card .member-cta {
  background: linear-gradient(135deg, #172846 0%, #24386a 58%, #463a82 100%);
  box-shadow: 0 12px 24px rgba(38,48,99,.22), inset 0 1px rgba(255,255,255,.14);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, filter .3s ease;
}
.sidebar .membership-card .member-cta span:last-child { color: #a9b1ff; }
.sidebar .membership-card .member-cta:hover { filter: brightness(1.08); box-shadow: 0 17px 30px rgba(38,48,99,.28), inset 0 1px rgba(255,255,255,.2); }
.sidebar .membership-card .member-cta::after { background: linear-gradient(90deg, transparent, rgba(188,194,255,.55), transparent); animation: member-sweep 4.8s 1.2s ease-in-out infinite; }
@keyframes member-sweep { 0%, 62% { transform: translateX(-150%) skewX(-18deg); } 82%, 100% { transform: translateX(430%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) {
  .sidebar .membership-card, .sidebar .membership-card .member-cta { transition: none !important; transform: none !important; }
  .sidebar .membership-card .member-cta::after { animation: none !important; }
}

/* The full centre hero belongs to the standalone archive page. On the app home,
   take users straight to the curated content while keeping the dedicated route intact. */
body:not(.game-center-page) .app-view.game-center-page .game-center-hero { display: none; }
body:not(.game-center-page) .app-view.game-center-page .game-center-library { padding-top: 48px; }

/* Quiet premium details for the remaining home surfaces. */
.overview-stat { position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .35s ease,background-color .3s ease; }
.overview-stat::after { content:""; position:absolute; inset:-40% -80%; background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%); transform:translateX(-70%) rotate(7deg); transition:transform .8s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.overview-stat:hover { transform:translateY(-3px); border-color:#b9d9cf; box-shadow:0 14px 28px rgba(28,57,65,.08); }
.overview-stat:hover::after { transform:translateX(70%) rotate(7deg); }
.overview-panel { transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease; }
.overview-panel:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(28,57,65,.08); border-color:#c5ded7; }
.nav-link .nav-glyph { transition:transform .35s cubic-bezier(.16,1,.3,1),color .25s ease; }
.nav-link:hover .nav-glyph,.nav-link.is-active .nav-glyph { transform:translateX(2px) scale(1.08); color:var(--green); }
@media (prefers-reduced-motion: reduce) {
  .overview-stat,.overview-panel,.nav-link .nav-glyph { transition:none !important; transform:none !important; }
  .overview-stat::after { display:none; }
}

/* Final shell contract: desktop columns share one document-height row; mobile keeps the drawer layout. */
@media (min-width: 761px) {
  :root { --sidebar: clamp(224px, 26vw, 264px) !important; }
  .site-shell { display: grid !important; grid-template-columns: var(--sidebar) minmax(0, 1fr) !important; gap: 18px; min-height: calc(100vh - 36px); padding: 18px; }
  .sidebar { position: relative !important; inset: auto !important; width: var(--sidebar) !important; height: auto !important; min-height: 0 !important; max-height: none !important; align-self: stretch !important; transform: none !important; }
  main { margin-left: 0 !important; min-width: 0; min-height: 100%; }
  .mobile-menu, .mobile-brand { display: none !important; }
  .breadcrumbs { display: flex !important; }
}

/* Mobile app shell: keep the page airy and readable on narrow screens. */
@media (max-width: 760px) {
  :root { --sidebar: 0px; }
  .site-shell { display: block; min-height: 100vh; padding: 0; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(84vw, 320px); max-height: none; padding: 22px 18px;
    transform: translateX(-102%); transition: transform .25s ease; box-shadow: 14px 0 30px rgba(16,24,40,.12);
  }
  .sidebar.is-open { transform: translateX(0); }
  .brand { margin: 2px 8px 30px; }
  .membership-card { margin-top: auto; }
  main { margin-left: 0; width: 100%; }
  .topbar { position: sticky; top: 0; z-index: 15; height: 58px; padding: 0 16px; }
  .mobile-menu { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #f1f5f6; color: #22364a; font-size: 18px; }
  .mobile-brand { display: inline-flex; margin-left: 10px; margin-right: auto; color: #142239; font-size: 15px; font-weight: 800; letter-spacing: .1em; }
  .mobile-brand span { color: var(--green); }
  .breadcrumbs { display: none; }
  .login-button { font-size: 10px; }
  .hero { min-height: 470px; height: auto; margin: 12px 12px 0; border-radius: 12px; }
  .hero-media { inset: 0; }
  .hero-media img { object-position: 58% center; filter: saturate(.94) contrast(1) brightness(.82); }
  .hero-wash { background: linear-gradient(180deg, rgba(248,251,250,.18) 0%, rgba(248,251,250,.42) 34%, rgba(248,251,250,.9) 71%, #f8fbfa 100%); }
  .hero-content { width: 100%; min-height: 470px; justify-content: flex-end; padding: 30px 22px 46px; }
  .hero-meta { top: 20px; left: 22px; font-size: 7px; }
  .hero .eyebrow { margin-bottom: 10px; font-size: 8px; }
  .hero h1 { max-width: 100%; font-size: clamp(30px, 9vw, 42px); line-height: 1.16; }
  .hero-summary { max-width: 270px; margin-top: 12px; font-size: 11px; line-height: 1.65; }
  .hero-actions { margin-top: 18px; gap: 14px; }
  .primary-action { min-width: 132px; min-height: 42px; font-size: 11px; }
  .feature-note { top: 21px; right: 20px; gap: 5px; }
  .feature-note strong { font-size: 16px; }
  .archive-stamp { right: 18px; bottom: 20px; min-width: 62px; padding: 8px; }
  .archive-stamp strong { font-size: 20px; }
  .scroll-cue { display: none; }
  .overview-dashboard, .library, .game-center { padding-left: 16px; padding-right: 16px; }
  .overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .overview-stat { min-height: 86px; padding: 12px; }
  .overview-stat strong { font-size: 22px; }
  .overview-panels { grid-template-columns: 1fr; gap: 12px; }
  .overview-panel { min-height: 0; padding: 18px 16px; }
  .path-steps { gap: 5px; }
  .path-step { font-size: 9px; }
  .path-step i { width: 22px; height: 22px; }
  .update-list { gap: 0; }
  .update-item { grid-template-columns: 1fr auto; gap: 8px; padding: 13px 0; }
  .update-item p { grid-column: 1 / -1; }
  .section-heading { align-items: flex-start; gap: 12px; }
  .section-heading h2 { font-size: 30px; }
  .section-index { display: none; }
  .empty-details { width: 100%; overflow-x: auto; }
  .empty-details span { min-width: 120px; padding: 12px 14px; }
  .method { grid-template-columns: 1fr; gap: 26px; padding: 56px 16px; }
  .method-principles article { grid-template-columns: 30px 1fr; gap: 8px 12px; }
  .method-principles p { grid-column: 2; }
  footer { flex-direction: column; align-items: flex-start; margin: 0 16px 14px; padding: 18px 0; gap: 8px; }
  footer span:last-child { display: block; }
  footer span:last-child::before { display: none; }
}

@media (max-width: 380px) {
  .hero { min-height: 445px; }
  .hero-content { min-height: 445px; padding-inline: 18px; }
  .overview-dashboard, .library, .game-center { padding-left: 12px; padding-right: 12px; }
  .overview-stat { padding: 10px; }
  .overview-stat small { font-size: 9px; }
}

/* Membership card detail pass: keep the offer readable in the narrow sidebar. */
.membership-card {
  padding: 22px 18px 18px;
}
.membership-card > p:first-of-type {
  margin: 27px 0 5px;
  font-size: 12px;
}
.membership-card h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: 0;
}
.membership-card h2 small {
  flex: 0 0 auto;
  font-size: 8px;
  letter-spacing: .13em;
}
.membership-card h2 b {
  min-width: 0;
  font-size: clamp(24px, 2vw, 29px);
  letter-spacing: 0;
}
.membership-card .member-benefits-title {
  margin: 0 0 8px !important;
  font-size: 10px !important;
  line-height: 1.3;
}
.membership-card ul {
  gap: 8px;
  margin-bottom: 17px;
  font-size: 10px;
  line-height: 1.45;
}
.membership-card li {
  white-space: normal;
  overflow-wrap: anywhere;
}
.membership-card li::before {
  vertical-align: .08em;
}
.membership-card .member-cta {
  min-height: 42px;
  padding-inline: 14px;
  font-size: 11px;
}

/* Keep the offer readable at browser zoom levels: content grows with the sidebar instead of being clipped. */
.sidebar { min-height: calc(100vh - 36px); }
.sidebar .membership-card { flex: 0 0 auto; }
.sidebar .membership-card h2 { white-space: normal; }
.sidebar .membership-card h2 b { overflow: visible; text-overflow: clip; }
.sidebar .membership-card .member-offer-kicker { margin: 0 0 5px; color: #278e79; font-size: 11px; font-weight: 800; }
.sidebar .membership-card .member-offer-note { margin: 9px 0 0; color: #60758b; font-size: 10px; line-height: 1.5; }
.overview-panels { align-items: stretch; }
.overview-panels .overview-panel { height: 100%; }

/* Browser zoom can reduce CSS width into legacy tablet breakpoints. Keep the full desktop shell until the true mobile cutoff. */
@media (min-width: 761px) {
  .site-shell {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    min-height: calc(100vh - 36px);
    padding: 18px;
  }
  main { margin-left: 0; width: auto; min-height: calc(100vh - 36px); }
  .sidebar {
    position: relative;
    inset: auto;
    width: auto;
    height: 100%;
    min-height: calc(100vh - 36px);
    max-height: none;
    transform: none !important;
  }
  .mobile-menu { display: none !important; }
  .mobile-brand { display: none !important; }
  .breadcrumbs { display: flex; }
}

@media (max-width: 760px) {
  .membership-card h2 b { font-size: 27px; }
}

/* Last-pass overflow guard. This intentionally comes after legacy theme overrides. */
.sidebar .membership-card { overflow: hidden; }
.sidebar .membership-card h2 { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.sidebar .membership-card h2 small { flex: 0 0 auto; }
.sidebar .membership-card h2 b { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: clamp(24px, 1.8vw, 30px); letter-spacing: 0; }
.sidebar .membership-card ul { min-width: 0; }
.sidebar .membership-card li { min-width: 0; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
.sidebar .membership-card li::before { margin-right: 7px; }
.sidebar .membership-card .member-cta { width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .sidebar .membership-card h2 b { font-size: 26px; }
}

/* Overview dashboard: give the landing view a useful information rhythm below the hero. */
.overview-dashboard {
  margin: 0 34px;
  padding: 18px 0 48px;
  border-top: 1px solid #e6ebef;
  background: #fff;
}
.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #e1e8eb;
  border-radius: 12px;
  background: #fbfdfd;
  overflow: hidden;
}
.overview-stat {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 15px 20px;
  border-right: 1px solid #e5ebed;
}
.overview-stat:last-child { border-right: 0; }
.overview-stat-accent { background: #f1faf6; }
.stat-mark { align-self: start; color: #94a2ad; font: 800 8px/1 "DM Sans", sans-serif; letter-spacing: .1em; }
.overview-stat strong { display: block; color: #152b40; font-size: 25px; line-height: 1; letter-spacing: -.03em; }
.overview-stat small { display: block; margin-top: 7px; color: #7f8d99; font-size: 10px; white-space: nowrap; }
.overview-stat > b { align-self: start; color: #72b8a4; font-size: 16px; font-weight: 400; }
.overview-panels { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 14px; margin-top: 14px; }
.overview-panel { min-height: 246px; padding: 24px 26px 22px; border: 1px solid #e1e8eb; border-radius: 12px; background: #fff; }
.overview-panel-primary { background: linear-gradient(135deg, #f6fbfa 0%, #f9fbfd 100%); }
.overview-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.overview-panel-head p { margin: 0 0 9px; color: #8a9aa6; font: 800 8px/1 "DM Sans", sans-serif; letter-spacing: .18em; }
.overview-panel-head h2 { margin: 0; color: #152b40; font-size: 20px; letter-spacing: -.01em; }
.panel-arrow { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #b9ddd1; border-radius: 8px; color: #269b7d; font-size: 17px; }
.overview-panel-copy { max-width: 470px; margin: 16px 0 20px; color: #71818d; font-size: 11px; line-height: 1.75; }
.overview-panel-primary .overview-panel-head h2 { max-width: 440px; font-size: 22px; line-height: 1.35; }
.overview-panel-primary .overview-panel-copy { max-width: 560px; margin-top: 14px; line-height: 1.85; }
.path-steps { display: flex; align-items: center; max-width: 470px; }
.path-step { display: inline-flex; align-items: center; gap: 7px; color: #8b99a4; font-size: 10px; white-space: nowrap; }
.path-step i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #d3dde1; border-radius: 50%; color: #91a0aa; font-style: normal; font-size: 9px; }
.path-step.is-done { color: #275c4e; font-weight: 700; }
.path-step.is-done i { border-color: #5ab89d; background: #e7f7f1; color: #18866e; }
.path-line { flex: 1; min-width: 18px; height: 1px; margin: 0 9px; background: #dce6e7; }
.text-action { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: #258c73; font-size: 10px; font-weight: 700; }
.text-action span { font-size: 15px; transition: transform .2s ease; }
.text-action:hover span { transform: translateX(4px); }
.panel-link { margin-top: 3px; color: #4f8d7b; font-size: 10px; font-weight: 700; }
.update-list { display: grid; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; }
.update-list li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid #edf0f2; }
.update-dot { width: 7px; height: 7px; border-radius: 50%; background: #8ecbb9; box-shadow: 0 0 0 4px rgba(142,203,185,.12); }
.update-dot.blue { background: #8eafcf; box-shadow: 0 0 0 4px rgba(142,175,207,.13); }
.update-dot.amber { background: #d6b67a; box-shadow: 0 0 0 4px rgba(214,182,122,.13); }
.update-list b, .update-list small { display: block; }
.update-list b { color: #25394b; font-size: 11px; }
.update-list small { margin-top: 4px; color: #8a97a1; font-size: 9px; }
.update-list time { color: #9ba6af; font-size: 9px; }
.updates-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 162px;
  margin-top: 20px;
  border-top: 1px solid #edf0f2;
  color: #9aa7af;
}
.updates-empty strong { color: #536970; font-size: 12px; font-weight: 700; }
.updates-empty small { margin-top: 5px; color: #a0adb1; font-size: 9px; }

@media (max-width: 980px) {
  .overview-stats { grid-template-columns: repeat(2, 1fr); }
  .overview-stat:nth-child(2) { border-right: 0; }
  .overview-stat:nth-child(-n+2) { border-bottom: 1px solid #e5ebed; }
  .overview-panels { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .overview-dashboard { margin: 0 20px; padding-bottom: 36px; }
}
@media (max-width: 560px) {
  .overview-dashboard { margin: 0 12px; padding-top: 14px; }
  .overview-stats { grid-template-columns: 1fr 1fr; }
  .overview-stat { min-height: 82px; padding: 13px 14px; gap: 8px; }
  .overview-stat strong { font-size: 22px; }
  .overview-stat small { font-size: 9px; }
  .overview-panel { min-height: 0; padding: 20px 18px; }
  .overview-panel-head h2 { font-size: 18px; }
  .overview-panel-primary .overview-panel-head h2 { max-width: 260px; font-size: 19px; line-height: 1.4; }
  .overview-panel-primary .overview-panel-copy { margin-top: 12px; line-height: 1.8; }
  .path-step { gap: 5px; font-size: 9px; }
  .path-step i { width: 20px; height: 20px; }
  .path-line { margin: 0 5px; }
}

/* Library workspace redesign: replace the oversized empty state with a guided archive desk. */
#library.library {
  padding: 30px 28px 28px;
  background: #f4f7f7;
  border-color: #dfe7e7;
}
#library .section-heading { padding: 0 4px 24px; border-bottom: 1px solid #dce5e5; }
#library .section-icon { background: #dff3ec; }
#library .section-heading p { color: #4d8d7b; font-size: 9px; letter-spacing: .17em; }
#library .section-heading h2 { font-size: clamp(28px, 3vw, 38px); }
#library .section-heading small { color: #84969a; }
.library-workspace { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto; gap: 14px; min-height: 0; padding: 22px 0 0; text-align: left; }
.library-status-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 25px 26px 20px; overflow: hidden; border-radius: 13px; background: #13243b; color: #fff; box-shadow: 0 14px 28px rgba(18,36,59,.15); isolation: isolate; }
.library-status-panel::after { content: ""; position: absolute; right: -85px; bottom: -110px; z-index: -1; width: 260px; height: 260px; border: 1px solid rgba(141,226,202,.19); border-radius: 50%; box-shadow: 0 0 0 25px rgba(141,226,202,.04), 0 0 0 56px rgba(141,226,202,.025); }
.status-panel-top, .status-panel-foot { display: flex; justify-content: space-between; color: rgba(216,235,235,.6); font: 800 8px/1 "DM Sans", sans-serif; letter-spacing: .17em; }
.status-panel-top b { color: #82d9be; font-weight: 700; }
.status-panel-body { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 22px; margin: 28px 0; }
.status-orbit { position: relative; display: grid; place-items: center; width: 110px; height: 110px; border: 1px solid rgba(141,226,202,.4); border-radius: 50%; background: radial-gradient(circle, rgba(141,226,202,.15) 0 45%, transparent 46%); }
.status-orbit::before, .status-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.status-orbit::before { inset: 10px; border: 1px dashed rgba(141,226,202,.3); }
.status-orbit::after { top: 3px; right: 20px; width: 7px; height: 7px; background: #83ddc2; box-shadow: 0 0 0 5px rgba(131,221,194,.12); }
.status-orbit span { margin-top: -1px; font-size: 34px; font-weight: 700; line-height: 1; }
.status-orbit small { margin-top: -25px; color: #83ddc2; font: 800 7px/1 "DM Sans", sans-serif; letter-spacing: .18em; }
.status-panel-body p { margin: 0; color: rgba(234,246,244,.68); font-size: 11px; line-height: 1.65; }
.status-panel-body p strong { color: #fff; font-size: 22px; font-weight: 700; }
.status-panel-body > div:last-child > small { display: block; max-width: 210px; margin-top: 12px; color: rgba(216,235,235,.55); font-size: 10px; line-height: 1.65; }
.status-progress > div { display: flex; justify-content: space-between; margin-bottom: 9px; color: rgba(216,235,235,.63); font-size: 9px; }
.status-progress > div b { color: #83ddc2; }
.status-progress i { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.13); }
.status-progress i em { display: block; width: 7%; height: 100%; border-radius: inherit; background: #83ddc2; }
.status-panel-foot { margin-top: 21px; padding-top: 16px; border-top: 1px solid rgba(216,235,235,.14); font-size: 7px; }
.library-start-panel { display: grid; grid-template-columns: 1fr 170px; grid-template-rows: 1fr auto; align-items: center; min-height: 300px; padding: 25px 27px 22px; border: 1px solid #dce6e5; border-radius: 13px; background: #fff; }
.start-panel-copy { align-self: start; }
.start-panel-copy .empty-kicker { margin: 0 0 10px !important; color: #239579 !important; font-size: 8px !important; letter-spacing: .16em; }
.start-panel-copy h3 { margin: 0; color: #142940; font-size: 25px; letter-spacing: -.02em; }
.start-panel-copy p { max-width: 330px; margin: 12px 0 0; color: #778892; font-size: 11px; line-height: 1.75; }
.library-start-panel .empty-library-art { grid-column: 2; grid-row: 1; align-self: center; margin: 0 auto; transform: scale(.9); }
.library-start-panel .empty-actions { grid-column: 1 / -1; grid-row: 2; margin-top: 25px; }
.library-start-panel .empty-actions .primary-action { min-width: 178px; min-height: 47px; border-radius: 9px; font-size: 12px; }
.library-start-panel .secondary-action { min-height: 47px; padding: 0 16px; border-color: #d7e3e1; border-radius: 9px; font-size: 11px; white-space: nowrap; }
.library-quick-links { grid-column: 1 / -1; display: grid; grid-template-columns: 135px repeat(3, 1fr); align-items: center; min-height: 58px; padding: 0 18px; border: 1px solid #dce6e5; border-radius: 11px; background: #fbfdfd; }
.library-quick-links > span { color: #91a1a5; font: 800 8px/1 "DM Sans", sans-serif; letter-spacing: .16em; }
.library-quick-links a { display: flex; align-items: center; gap: 9px; min-height: 27px; padding: 0 18px; border-left: 1px solid #e6eeee; color: #53666d; font-size: 10px; font-weight: 700; }
.library-quick-links a i { color: #24987d; font-size: 15px; font-style: normal; }
.library-quick-links a b { margin-left: auto; color: #83bcae; font-size: 14px; font-weight: 400; transition: transform .2s ease; }
.library-quick-links a:hover { color: #16846a; }
.library-quick-links a:hover b { transform: translateX(4px); }

@media (max-width: 980px) {
  .library-workspace { grid-template-columns: 1fr; }
  .library-status-panel, .library-start-panel { min-height: 260px; }
}
@media (max-width: 560px) {
  #library.library { margin: 14px 12px; padding: 20px 15px 16px; }
  #library .section-heading { padding-inline: 0; }
  .library-workspace { gap: 11px; padding-top: 16px; }
  .library-status-panel { min-height: 255px; padding: 20px; }
  .status-panel-body { grid-template-columns: 90px 1fr; gap: 14px; margin: 21px 0; }
  .status-orbit { width: 88px; height: 88px; }
  .status-orbit span { font-size: 28px; }
  .status-panel-body p strong { font-size: 19px; }
  .library-start-panel { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 20px; }
  .library-start-panel .empty-library-art { order: 2; align-self: center; margin: 14px auto 2px; transform: scale(.78); }
  .library-start-panel .empty-actions { order: 3; flex-direction: column; align-items: stretch; margin-top: 8px; }
  .library-start-panel .empty-actions > * { width: 100%; justify-content: center; }
  .library-quick-links { grid-template-columns: 1fr 1fr; gap: 0; padding: 9px 10px; }
  .library-quick-links > span { grid-column: 1 / -1; padding: 5px 8px 10px; }
  .library-quick-links a { padding: 8px; border-top: 1px solid #e6eeee; border-left: 0; }
  .library-quick-links a:nth-of-type(2) { border-left: 1px solid #e6eeee; }
}

/* Library refinement: one calm workspace, no dominant status card. */
#library.library {
  padding: 28px 30px 30px;
  border: 0;
  border-radius: 0;
  background: #f7faf9;
  box-shadow: none;
}
#library .section-heading { padding-bottom: 22px; }
.library-workspace { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
.library-start-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-rows: 1fr auto auto;
  min-height: 360px;
  padding: 38px 42px 24px;
  overflow: hidden;
  border: 1px solid #dce7e4;
  border-radius: 8px;
  background: linear-gradient(110deg, #fff 0%, #fff 61%, #f0f8f5 100%);
  box-shadow: 0 12px 32px rgba(33,65,57,.055);
}
.library-start-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: #54b69b;
}
.start-panel-copy { align-self: start; }
.start-panel-copy .empty-kicker { margin-bottom: 14px !important; color: #278d74 !important; }
.start-panel-copy h3 { max-width: 520px; font-size: clamp(27px, 3vw, 38px); line-height: 1.15; }
.start-panel-copy p { max-width: 510px; margin-top: 15px; color: #6e8182; font-size: 12px; line-height: 1.8; }
.archive-features { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); max-width: 560px; margin-top: 28px; border-top: 1px solid #dfe8e6; border-bottom: 1px solid #dfe8e6; }
.archive-features span { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; min-height: 66px; align-content: center; padding: 8px 18px 8px 0; }
.archive-features span + span { padding-left: 18px; border-left: 1px solid #dfe8e6; }
.archive-features i { grid-row: 1 / span 2; align-self: center; color: #42a58a; font: 800 8px/1 "DM Sans", sans-serif; font-style: normal; }
.archive-features b { color: #30474a; font-size: 11px; }
.archive-features small { color: #91a09f; font-size: 9px; }
.library-start-panel .empty-library-art { grid-column: 2; grid-row: 1 / span 2; width: 170px; height: 114px; transform: scale(1.12); filter: drop-shadow(0 18px 20px rgba(47,91,79,.08)); }
.library-start-panel .empty-actions { grid-column: 1; grid-row: 2; gap: 10px; margin-top: 28px; }
.library-start-panel .empty-actions .primary-action { min-width: 188px; min-height: 49px; border-radius: 7px; background: #14263d; box-shadow: 0 9px 20px rgba(20,38,61,.14); }
.library-start-panel .empty-actions .primary-action:hover { transform: translateY(-2px); box-shadow: 0 13px 26px rgba(20,38,61,.19); }
.library-start-panel .secondary-action { min-height: 49px; border-radius: 7px; background: rgba(255,255,255,.76); transition: color .3s ease, border-color .3s ease, background-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.library-start-panel .secondary-action:hover { border-color: #a8cfc3; background: #fff; color: #15836a; transform: translateY(-2px); }
.archive-state { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 24px; margin-top: 23px; padding-top: 16px; border-top: 1px solid #e3ebe9; color: #81918f; font-size: 9px; }
.archive-state span { display: inline-flex; align-items: center; gap: 7px; }
.archive-state span + span::before { content: ""; width: 3px; height: 3px; margin-right: 16px; border-radius: 50%; background: #afbfbc; }
.archive-state i { width: 7px; height: 7px; border-radius: 50%; background: #3eb090; box-shadow: 0 0 0 4px rgba(62,176,144,.12); }
.library-quick-links { margin-top: 12px; border-right: 0; border-left: 0; border-radius: 0; background: transparent; }
.library-workspace.library-empty { align-items: stretch; }
.library.is-visible .library-start-panel { animation: library-panel-in .65s cubic-bezier(.16,1,.3,1) both; }
.library.is-visible .library-quick-links { animation: library-panel-in .65s .08s cubic-bezier(.16,1,.3,1) both; }
@keyframes library-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .library-start-panel { grid-template-columns: minmax(0, 1fr) 180px; padding-inline: 30px; }
  .library-start-panel .empty-library-art { transform: scale(.92); }
}
@media (max-width: 680px) {
  #library.library { padding: 22px 18px; }
  .library-start-panel { display: flex; flex-direction: column; min-height: 0; padding: 28px 24px 20px; }
  .library-start-panel .empty-library-art { order: 2; align-self: center; margin: 24px auto 10px; transform: scale(.9); }
  .archive-features { grid-template-columns: 1fr; width: 100%; }
  .archive-features span { min-height: 54px; padding-left: 0; }
  .archive-features span + span { padding-left: 0; border-top: 1px solid #e4ecea; border-left: 0; }
  .library-start-panel .empty-actions { order: 3; width: 100%; margin-top: 12px; }
  .archive-state { order: 4; flex-wrap: wrap; gap: 9px 15px; width: 100%; }
  .archive-state span + span::before { margin-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .library.is-visible .library-start-panel, .library.is-visible .library-quick-links { animation: none !important; }
}

/* Overview statement: balanced as a two-line brand declaration. */
[data-app-view="overview"] .hero-content { width: 68%; }
[data-app-view="overview"] .hero h1 {
  position: relative;
  max-width: 720px;
  padding-top: 17px;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}
[data-app-view="overview"] .hero h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: #159472;
  box-shadow: 51px 0 0 rgba(21,148,114,.24);
}
[data-app-view="overview"] .hero h1 em {
  display: inline-block;
  margin-top: 5px;
  font-style: normal;
  font-weight: 800;
}
[data-app-view="overview"] .hero-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 460px;
  margin-top: 20px;
  color: #536678;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}
[data-app-view="overview"] .hero-summary > span {
  flex: 0 0 auto;
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, #159472, rgba(21,148,114,.3));
}
[data-app-view="overview"] .hero-actions { margin-top: 22px; }
[data-app-view="overview"] .hero-content {
  justify-content: center;
  padding-top: 42px;
  padding-bottom: 34px;
}
@media (max-width: 980px) {
  [data-app-view="overview"] .hero-content { width: 72%; }
  [data-app-view="overview"] .hero h1 { font-size: clamp(34px, 4.5vw, 46px); }
}
@media (max-width: 820px) {
  [data-app-view="overview"] .hero-content { width: 100%; }
  [data-app-view="overview"] .hero h1 { max-width: 590px; }
}
@media (max-width: 560px) {
  [data-app-view="overview"] .hero h1 { padding-top: 14px; font-size: clamp(32px, 10vw, 42px); line-height: 1.14; }
  [data-app-view="overview"] .hero h1::before { width: 34px; box-shadow: 40px 0 0 rgba(21,148,114,.24); }
  [data-app-view="overview"] .hero h1 em { margin-top: 4px; }
  [data-app-view="overview"] .hero-summary { gap: 10px; margin-top: 17px; font-size: 11px; }
  [data-app-view="overview"] .hero-summary > span { width: 20px; }
  [data-app-view="overview"] .hero-actions { margin-top: 18px; }
}

footer > span:nth-child(2) {
  max-width: 520px;
  color: #667991;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 560px) {
  footer > span:nth-child(2) { width: 100%; max-width: 100%; font-size: 11px; text-align: left; }
}

/* Shared tablet breakpoint: both pages collapse to the same mobile shell. */
@media (max-width: 900px) and (min-width: 821px) {
  .site-shell { display: block; width: 100%; margin: 0; padding: 0; }
  main { border: 0; border-radius: 0; box-shadow: none; }
  .sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(300px, 88vw); min-height: 100vh; border-radius: 0 15px 15px 0; transform: translateX(-102%); transition: transform .25s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-menu { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; background: transparent; color: var(--ink); font-size: 20px; }
  .mobile-brand { display: block; font-size: 16px; }
  .topbar { justify-content: flex-start; padding: 0 20px; border-bottom: 1px solid var(--line); }
  .breadcrumbs { display: none; }
  .login-button { margin-left: auto; }
  .hero { margin: 18px 20px 0; min-height: 420px; height: 420px; }
  .hero-media { inset: 0; }
  .hero-content { width: 100%; justify-content: flex-end; padding: 34px 26px 35px; }
  .hero-meta { top: 26px; left: 26px; }
  .feature-note { top: 26px; right: 26px; }
  .library { margin: 22px 20px; padding-inline: 15px; }
  .method, footer { margin-inline: 20px; }
}

/* Definitive add-game action: match the archive's primary control language. */
#library .library-empty .empty-actions .add-game-action {
  position: relative;
  width: auto;
  min-width: 172px;
  min-height: 46px;
  justify-content: space-between;
  gap: 18px;
  padding: 0 9px 0 18px;
  border: 1px solid #142239;
  border-radius: 7px;
  background: #142239;
  color: #fff;
  box-shadow: 0 11px 22px rgba(20,34,57,.16);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .32s cubic-bezier(.16,1,.3,1), background-color .26s ease, border-color .26s ease, box-shadow .32s ease;
}
#library .library-empty .empty-actions .add-game-action::before { display: none; }
#library .library-empty .empty-actions .add-game-action .add-game-label {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  transform: none;
}
#library .library-empty .empty-actions .add-game-action .add-game-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: #72d5b7;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .38s cubic-bezier(.16,1,.3,1), background-color .26s ease, color .26s ease;
}
#library .library-empty .empty-actions .add-game-action:hover,
#library .library-empty .empty-actions .add-game-action:focus-visible {
  border-color: #1a2d48;
  background: #1a2d48;
  box-shadow: 0 16px 29px rgba(20,34,57,.22);
  outline: none;
  transform: translateY(-2px);
}
#library .library-empty .empty-actions .add-game-action:hover .add-game-label,
#library .library-empty .empty-actions .add-game-action:focus-visible .add-game-label { transform: none; background: transparent; color: inherit; }
#library .library-empty .empty-actions .add-game-action:hover .add-game-icon,
#library .library-empty .empty-actions .add-game-action:focus-visible .add-game-icon { background: rgba(255,255,255,.13); color: #91e2ca; transform: rotate(90deg); }
#library .library-empty .empty-actions .add-game-action:active { box-shadow: 0 8px 17px rgba(20,34,57,.16); transform: translateY(0) scale(.99); }
@media (max-width: 560px) {
  #library .library-empty .empty-actions .add-game-action { width: min(100%,190px); min-width: 0; min-height: 46px; border-radius: 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #library .library-empty .empty-actions .add-game-action,
  #library .library-empty .empty-actions .add-game-action .add-game-icon { transition: none !important; }
}

/* Empty-library action: a compact archive control with a clear icon affordance. */
.library-empty .empty-actions .primary-action {
  min-width: 206px;
  min-height: 56px;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 12px 0 20px;
  border: 1px solid #c8e4db;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  color: #183247;
  box-shadow: 0 12px 28px rgba(33,72,81,.09), inset 0 1px rgba(255,255,255,.95);
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .24s cubic-bezier(.16,1,.3,1), border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
}
.library-empty .empty-actions .primary-action::before {
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #49b99a;
  opacity: .9;
}
.library-empty .empty-actions .primary-action span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid #b8e3d5;
  border-radius: 11px;
  background: #eefaf6;
  color: #149776;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transition: transform .24s cubic-bezier(.16,1,.3,1), background-color .24s ease, color .24s ease;
}
.library-empty .empty-actions .primary-action:hover,
.library-empty .empty-actions .primary-action:focus-visible {
  border-color: #94cdbd;
  background: #fbfffd;
  box-shadow: 0 16px 32px rgba(33,72,81,.14), inset 0 1px rgba(255,255,255,.95);
  outline: none;
  transform: translateY(-2px);
}
.library-empty .empty-actions .primary-action:hover span,
.library-empty .empty-actions .primary-action:focus-visible span {
  transform: rotate(90deg);
  background: #def5ed;
  color: #087c61;
}
.library-empty .empty-actions .primary-action:active { transform: translateY(0) scale(.99); }
@media (max-width: 560px) {
  .library-empty .empty-actions .primary-action { min-width: 192px; min-height: 53px; border-radius: 12px; font-size: 13px; }
  .library-empty .empty-actions .primary-action span { width: 35px; height: 35px; font-size: 24px; border-radius: 10px; }
}

@media (max-width: 1060px) {
  :root { --sidebar: 224px; } .sidebar { padding-inline: 18px; }
  .hero-content { width: 68%; padding-inline: 48px; } .hero-meta, .scroll-cue { left: 48px; }
  .method { grid-template-columns: 100px 1fr; } .method-principles { grid-column: 2; }
}
@media (max-width: 820px) {
  :root { --sidebar: 0px; } .sidebar { display: none; } main { margin-left: 0; }
  .topbar { position: relative; z-index: 10; height: 60px; padding: 0 20px; }
  .mobile-brand { display: block; font-size: 16px; font-weight: 800; letter-spacing: .08em; } .mobile-brand span { color: var(--green); } .breadcrumbs { display: none; }
  .hero { min-height: 680px; height: calc(100svh - 60px); } .hero-media { inset: 0; } .hero-media img { object-position: 62% center; }
  .hero-wash { background: linear-gradient(0deg, #f9fbfc 0%, rgba(249,251,252,.96) 48%, rgba(249,251,252,.16) 100%); }
  .hero-content { width: 100%; justify-content: flex-end; padding: 80px 28px; } .hero-meta { top: 32px; left: 28px; }
  .feature-note { top: 30px; right: 28px; } .archive-stamp { display: none; } .scroll-cue { left: 28px; bottom: 24px; }
  .library, .method { padding-inline: 28px; } .method { grid-template-columns: 1fr; } .method-index, .method-principles { grid-column: 1; }
  .method-principles article { grid-template-columns: 30px 100px 1fr; } footer { padding-inline: 28px; }
}
@media (max-width: 560px) {
  .login-button { font-size: 0; } .hero { min-height: 650px; } .hero::after { inset: 9px; }
  .hero-content { padding-inline: 20px; } .hero-meta { left: 20px; gap: 14px; } .hero-meta span:last-child { display: none; }
  .feature-note { right: 20px; } .feature-note strong { font-size: 18px; } .hero h1 { font-size: clamp(44px,13vw,62px); }
  .hero-summary { font-size: 12px; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; } .primary-action { width: min(100%,260px); }
  .scroll-cue { left: 20px; } .library { padding: 74px 20px 90px; } .section-index { display: none; }
  .library-empty { min-height: 420px; padding-inline: 0; } .empty-details { width: 100%; flex-direction: column; }
  .empty-details span { min-width: 0; } .empty-details span + span { border-top: 1px solid #e1e6ed; border-left: 0; }
  .method { gap: 32px; padding: 90px 20px; } .method-principles article { grid-template-columns: 28px 1fr; } .method-principles p { grid-column: 2; }
  footer { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
}

/* 20-step LUDUS visual rebuild: 01 canvas, 02 shell, 03 rail, 04 wordmark,
   05 nav, 06 active state, 07 membership, 08 footer, 09 topbar, 10 crumbs,
   11 hero frame, 12 hero media, 13 hero type, 14 hero actions, 15 library frame,
   16 library heading, 17 empty state, 18 controls, 19 mobile layout, 20 motion. */
:root {
  --canvas: #f3f4f5;
  --panel: #ffffff;
  --ink: #132238;
  --body: #687487;
  --faint: #97a2b2;
  --line: #e4e8ed;
  --green: #129a79;
  --green-soft: #e9f7f2;
  --navy: #111f36;
  --shadow: 0 10px 28px rgba(24, 44, 68, .06);
}
html { background: var(--canvas); }
body { background: var(--canvas); color: var(--ink); }
.site-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  width: min(1680px, calc(100% - 24px));
  margin: 12px auto;
  padding-bottom: 16px;
  align-items: start;
}
.sidebar {
  position: sticky; top: 12px; inset: auto; width: auto; min-height: calc(100vh - 24px);
  padding: 42px 18px 24px; border: 1px solid var(--line); border-radius: 15px;
  background: rgba(255,255,255,.96); box-shadow: var(--shadow); backdrop-filter: none;
}
.brand { margin: 4px 28px 42px; flex-wrap: wrap; row-gap: 4px; }
.brand-word { font-size: 25px; letter-spacing: .05em; }
.brand-dot { font-size: 29px; }
.brand small { flex-basis: 100%; margin-left: 2px; font-size: 12px; letter-spacing: .21em; color: #9ba7b7; }
.primary-nav { gap: 7px; }
.nav-link { min-height: 70px; grid-template-columns: 39px 1fr; padding: 0 18px; border-radius: 14px; color: #5e6b7f; }
.nav-link::before { display: none; }
.nav-glyph { color: #53647b; font-size: 24px; line-height: 1; }
.nav-link span:last-child { display: grid; gap: 2px; }
.nav-link b { color: inherit; font-size: 15px; }
.nav-link small { color: #9aa5b5; font-size: 11px; font-weight: 400; }
.nav-link:hover { background: #f3faf7; }
.nav-link.is-active { background: var(--green-soft); color: var(--ink); }
.nav-link.is-active .nav-glyph { color: var(--green); }
.nav-link.is-active b { color: var(--ink); }
.sidebar-rule { height: 1px; margin: 30px 16px 28px; background: var(--line); }
.membership-card { margin: 0 4px; min-height: 338px; padding: 27px 24px 23px; border-radius: 13px; background: linear-gradient(145deg,#edf9f5 0%,#f2f7ff 58%,#eef0fb 100%); box-shadow: 0 12px 22px rgba(44,68,91,.08); }
.membership-card::after { right: -24px; bottom: -32px; width: 132px; height: 132px; border-color: rgba(20,154,121,.12); box-shadow: 0 0 0 20px rgba(20,154,121,.04), 0 0 0 42px rgba(71,118,200,.035); }
.member-topline { color: #278975; font-size: 11px; letter-spacing: .12em; }
.membership-card > p { margin-top: 42px; color: #3f4f64; font-size: 14px; }
.membership-card h2 { font-size: 29px; }
.member-rule { margin: 22px 0 18px; background: linear-gradient(90deg, rgba(18,154,121,.4), rgba(89,133,214,.22), transparent); }
.membership-card ul { gap: 10px; margin-bottom: 24px; color: #657387; font-size: 11px; }
.membership-card li::before { width: 5px; height: 5px; margin-right: 9px; }
.member-cta { min-height: 51px; border-radius: 9px; font-size: 14px; }
.member-cta span:last-child { color: #fff; font-size: 20px; }
.sidebar-footer { margin-top: 22px; padding: 20px 8px 0; }
.sidebar-footer b { font-size: 12px; }
.sidebar-footer small { font-size: 10px; }
.sidebar-footer button { font-size: 11px; }
main { margin-left: 0; min-width: 0; padding-bottom: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.topbar { height: 76px; padding: 0 42px; border-bottom: 0; background: var(--panel); }
.breadcrumbs { align-items: center; gap: 14px; color: #98a4b4; font-size: 13px; letter-spacing: 0; }
.breadcrumbs span:first-child { color: #52637a; font-size: 18px; }
.breadcrumbs strong { color: #17243a; font-size: 13px; }
.login-button { gap: 12px; font-size: 13px; color: #46566c; }
.avatar.mini { width: 40px; height: 40px; font-size: 13px; background: #f0f3f6; color: #26364b; }
.mobile-menu { display: none; }
.hero { min-height: 390px; height: 390px; margin: 0 34px; border: 1px solid var(--line); border-radius: 15px; background: #f6f8f9; box-shadow: 0 4px 15px rgba(30,48,70,.035); }
.hero::after { inset: 0; border: 0; border-radius: 15px; }
.hero-media { inset: 0 0 0 47%; }
.hero-media img { object-position: 55% center; filter: saturate(.48) contrast(.88) brightness(.94); }
.hero-wash { background: linear-gradient(90deg, #fbfcfd 0%, #fbfcfd 38%, rgba(251,252,253,.98) 47%, rgba(251,252,253,.54) 67%, rgba(16,30,42,.18) 100%), linear-gradient(0deg, rgba(13,28,42,.18), transparent 46%); }
.hero-content { width: 62%; padding: 66px 50px 45px; }
.hero-meta { top: 30px; left: 50px; font-size: 10px; letter-spacing: .11em; }
.hero-meta span + span::before { width: 7px; height: 7px; margin-right: 11px; }
.hero .eyebrow { margin-bottom: 22px; font-size: 12px; letter-spacing: 0; }
.hero h1 { font-size: clamp(35px,3.7vw,53px); line-height: 1.14; letter-spacing: -.02em; }
.hero-summary { margin-top: 20px; color: #6f7d8f; font-size: 14px; line-height: 1.75; }
.hero-actions { margin-top: 25px; gap: 27px; }
.primary-action { min-width: 166px; min-height: 50px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
.primary-action span { font-size: 21px; }
.quiet-action { padding-bottom: 8px; border-color: #9fd6c5; font-size: 13px; }
.quiet-action span { margin-left: 13px; font-size: 18px; }
.feature-note { top: 31px; right: 32px; gap: 8px; }
.feature-note span { font-size: 11px; }
.feature-note strong { font-size: 23px; }
.feature-note small { font-size: 10px; }
.archive-stamp { right: 32px; bottom: 28px; min-width: 96px; padding: 13px; border-radius: 13px; }
.archive-stamp span { font-size: 10px; }
.archive-stamp strong { font-size: 29px; }
.library { margin: 34px; padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: 0 4px 15px rgba(30,48,70,.035); }
.section-heading { padding: 0 0 15px; border-bottom: 0; align-items: center; }
.heading-with-icon { display: flex; align-items: center; gap: 15px; }
.section-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 25px; }
.section-heading p { margin: 0 0 3px; color: #6d7b8e; font-size: 10px; letter-spacing: 0; }
.section-heading h2 { font-size: 23px; }
.section-heading small { display: block; margin-top: 3px; color: #9aa5b5; font-size: 11px; }
.section-index { padding-bottom: 0; color: var(--green); font-size: 11px; letter-spacing: .08em; }
.library-empty { min-height: 300px; padding: 32px 24px 0; }
.empty-kicker { display: none; }
.library-empty h3 { font-size: 23px; }
.library-empty > p { max-width: 450px; margin-top: 10px; font-size: 13px; }
.empty-actions { display: flex; align-items: center; gap: 12px; margin-top: 27px; }
.empty-actions .primary-action { min-width: 164px; min-height: 47px; justify-content: center; gap: 22px; background: var(--green); box-shadow: 0 10px 20px rgba(18,154,121,.18); }
.secondary-action { min-height: 47px; display: inline-flex; align-items: center; gap: 12px; padding: 0 21px; border: 1px solid var(--line); border-radius: 10px; color: #3a495d; font-size: 13px; font-weight: 700; }
.secondary-action span { font-size: 17px; }
.method { margin: 0 34px; padding: 55px 0 65px; border-top: 1px solid var(--line); }
footer { margin: 0 34px; padding-inline: 0; }

@media (max-width: 980px) {
  .site-shell { grid-template-columns: 238px minmax(0,1fr); gap: 14px; }
  .hero, .library, .method, footer { margin-inline: 22px; }
  .hero-content { padding-inline: 34px; } .hero-meta { left: 34px; }
  .hero h1 { font-size: 38px; }
}
@media (max-width: 820px) {
  .site-shell { display: block; width: 100%; margin: 0; padding: 0; }
  main { border: 0; border-radius: 0; box-shadow: none; }
  .sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(300px, 88vw); min-height: 100vh; border-radius: 0 15px 15px 0; transform: translateX(-102%); transition: transform .25s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-menu { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; background: transparent; color: var(--ink); font-size: 20px; }
  .mobile-brand { display: block; font-size: 16px; }
  .topbar { justify-content: flex-start; padding: 0 20px; border-bottom: 1px solid var(--line); }
  .breadcrumbs { display: none; } .login-button { margin-left: auto; }
  .hero { margin: 18px 20px 0; min-height: 420px; height: 420px; }
  .hero-media { inset: 0; } .hero-wash { background: linear-gradient(0deg,#fbfcfd 0%,rgba(251,252,253,.96) 49%,rgba(251,252,253,.2) 100%); }
  .hero-content { width: 100%; justify-content: flex-end; padding: 34px 26px 35px; }
  .hero-meta { top: 26px; left: 26px; } .feature-note { top: 26px; right: 26px; }
  .library { margin: 22px 20px; padding-inline: 15px; }
  .method, footer { margin-inline: 20px; }
}
@media (max-width: 560px) {
  .hero { min-height: 450px; height: 450px; margin-inline: 12px; }
  .hero-content { padding: 34px 20px 28px; } .hero-meta { left: 20px; }
  .hero h1 { font-size: 34px; } .hero-summary { font-size: 12px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 13px; }
  .primary-action { min-width: 145px; min-height: 45px; font-size: 12px; }
  .quiet-action { font-size: 11px; } .feature-note { display: none; }
  .library { margin: 14px 12px; padding: 18px 12px 10px; }
  .section-heading { align-items: flex-start; } .section-index { display: none; }
  .section-icon { width: 43px; height: 43px; } .section-heading h2 { font-size: 21px; }
  .library-empty { min-height: 350px; padding-inline: 0; }
  .empty-actions { width: 100%; flex-direction: column; } .empty-actions > * { width: min(100%, 240px); justify-content: center; }
  .method, footer { margin-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Library-first pass: overview is context, not the destination. */
.hero { min-height: 330px; height: 330px; }
.hero-media { inset: 0 0 0 48%; }
.hero-wash { background: linear-gradient(90deg, #f9fbfc 0%, #f9fbfc 46%, rgba(249,251,252,.88) 60%, rgba(249,251,252,.14) 86%, rgba(12,27,40,.12) 100%); }
.hero::after { inset: 12px; }
.hero-content { width: 60%; padding: 38px clamp(42px,5vw,76px) 42px; }
.hero-meta { top: 22px; }
.hero .eyebrow { margin-bottom: 10px; font-size: 8px; }
.hero h1 { font-size: clamp(30px,2.8vw,42px); line-height: 1.15; }
.hero-summary { margin-top: 12px; font-size: 10px; }
.hero-actions { margin-top: 17px; gap: 18px; }
.primary-action { min-width: 132px; min-height: 40px; font-size: 10px; }
.quiet-action { font-size: 9px; }
.feature-note { top: 24px; gap: 6px; }
.feature-note strong { font-size: 16px; }
.archive-stamp { bottom: 22px; min-width: 66px; padding: 8px; }
.archive-stamp strong { font-size: 20px; }
.scroll-cue { display: none; }
.library { padding-top: 54px; }
.section-heading h2 { font-size: clamp(30px,3vw,42px); }
.library-empty { min-height: 340px; padding-top: 42px; }

@media (max-width: 820px) {
  .hero { min-height: 390px; height: 390px; }
  .hero-media { inset: 0; }
  .hero-content { width: 100%; justify-content: center; padding: 60px 28px 36px; }
  .hero .hero-meta { top: 22px; left: 28px; }
  .feature-note { top: 22px; right: 28px; }
  .archive-stamp { display: none; }
  .library { padding-top: 48px; }
}

@media (max-width: 560px) {
  .hero { min-height: 360px; height: 360px; }
  .hero-content { padding: 58px 20px 30px; }
  .hero h1 { font-size: 32px; }
  .hero-summary { font-size: 10px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 14px; }
  .primary-action { width: auto; min-width: 126px; }
  .feature-note { display: none; }
}

/* Final cascade lock: keep the reference proportions after historical passes. */
.hero { min-height: 390px; height: 390px; margin: 0 34px; border: 1px solid var(--line); border-radius: 15px; }
.hero::after { inset: 0; border: 0; border-radius: 15px; }
.hero-media { inset: 0 0 0 47%; }
.hero-content { width: 62%; padding: 66px 50px 45px; }
.hero-meta { top: 30px; left: 50px; font-size: 10px; }
.hero .eyebrow { margin-bottom: 22px; font-size: 12px; }
.hero h1 { font-size: clamp(35px,3.7vw,53px); }
.hero-summary { margin-top: 20px; font-size: 14px; }
.hero-actions { margin-top: 25px; gap: 27px; }
.primary-action { min-width: 166px; min-height: 50px; font-size: 14px; }
.library { margin: 34px; padding-top: 22px; }
.library-empty { min-height: 300px; padding-top: 32px; }
.section-heading h2 { font-size: 23px; }
.empty-kicker { display: none; }
.empty-actions { display: flex; }

@media (max-width: 820px) {
  .hero { min-height: 420px; height: 420px; margin: 18px 20px 0; }
  .hero-media { inset: 0; }
  .hero-content { width: 100%; justify-content: flex-end; padding: 34px 26px 35px; }
  .hero-meta { top: 26px; left: 26px; }
  .library { margin: 22px 20px; padding-top: 22px; }
}
@media (max-width: 560px) {
  .hero { min-height: 450px; height: 450px; margin: 18px 12px 0; }
  .hero-content { padding: 34px 20px 28px; }
  .hero-meta { left: 20px; }
  .hero h1 { font-size: 34px; }
  .hero-summary { font-size: 12px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 13px; }
  .primary-action { min-width: 145px; min-height: 45px; font-size: 12px; }
  .library { margin: 14px 12px; padding: 18px 12px 10px; }
  .section-heading h2 { font-size: 21px; }
  .library-empty { min-height: 350px; }
  .empty-actions { flex-direction: column; width: 100%; }
  .empty-actions > * { width: min(100%, 240px); justify-content: center; }
}

/* Compact editorial footer pass: a shorter, framed bottom section. */
.method {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) 1.18fr;
  gap: clamp(28px, 4vw, 58px);
  margin: 42px 34px 0;
  padding: 46px 32px 34px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  background: #fff;
}
.method-index { padding-top: 4px; gap: 17px; color: #647389; font-size: 11px; letter-spacing: .13em; }
.method-index::before { content: ''; width: 7px; height: 7px; margin-bottom: -8px; border-radius: 50%; background: var(--green); }
.method-index strong { color: var(--green); font-size: 31px; letter-spacing: 0; }
.method-index::after { content: ''; width: 34px; height: 2px; margin-top: 2px; background: var(--green); }
.method-copy { padding-top: 26px; }
.method-copy .eyebrow { margin-bottom: 22px; font-size: 11px; letter-spacing: .17em; }
.method-copy h2 { max-width: 440px; font-size: clamp(29px, 3vw, 43px); line-height: 1.3; }
.method-copy h2::first-line { letter-spacing: -.02em; }
.method-copy > p:last-child { max-width: 470px; margin-top: 24px; color: #68778b; font-size: 13px; line-height: 1.9; }
.method-principles { align-self: center; border-top: 0; }
.method-principles article { position: relative; grid-template-columns: 48px 1fr 22px; gap: 14px; align-items: start; min-height: 106px; padding: 7px 0 20px 0; border-bottom: 1px solid var(--line); }
.method-principles article + article { padding-top: 22px; }
.method-principles article::before { content: ''; position: absolute; left: 0; top: 0; width: 81px; height: 81px; border-radius: 50%; background: linear-gradient(145deg, #f0faf6, #f8fbfa); z-index: 0; }
.method-principles article > * { position: relative; z-index: 1; }
.method-principles span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--green); font-size: 0; }
.method-principles span::before { content: '⌕'; font-size: 35px; font-weight: 300; }
.method-principles article:nth-child(2) span::before { content: '≋'; }
.method-principles article:nth-child(3) span::before { content: '✓'; font-size: 27px; }
.method-principles h3 { padding-top: 5px; font-size: 16px; }
.method-principles p { grid-column: 2; margin-top: -2px; color: #68778b; font-size: 12px; line-height: 1.65; }
.method-principles article::after { content: '→'; grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--green); font-size: 26px; }
footer {
  margin: 0 34px 34px;
  padding: 27px 32px 30px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 0 0 15px 15px;
  background: #fff;
  color: #647389;
  font-size: 12px;
  letter-spacing: 0;
}
footer span:last-child { display: inline-flex; align-items: center; gap: 24px; }
footer span:last-child::before { content: ''; width: 1px; height: 17px; background: var(--line); }
footer a { color: #647389; }

@media (max-width: 980px) {
  .method { grid-template-columns: minmax(230px, .9fr) 1.1fr; gap: 24px; padding-inline: 24px; }
  .method-copy h2 { font-size: 32px; }
  .method-principles h3 { font-size: 14px; }
}
@media (max-width: 820px) {
  .method { grid-template-columns: 1fr; gap: 28px; margin: 34px 20px 0; padding: 34px 24px 28px; }
  .method-copy { padding-top: 14px; }
  .method-principles { grid-column: 1; }
  footer { margin: 0 20px 22px; padding-inline: 24px; }
}
@media (max-width: 560px) {
  .method { display: block; margin: 30px 12px 0; padding: 28px 20px 24px; }
  .method-index { margin-bottom: 24px; }
  .method-copy { padding-top: 0; }
  .method-copy .eyebrow { font-size: 9px; }
  .method-copy h2 { font-size: 28px; }
  .method-copy > p:last-child { font-size: 12px; }
  .method-principles { margin-top: 30px; }
  .method-principles article { min-height: 92px; }
  .method-principles h3 { font-size: 14px; }
  .method-principles p { font-size: 11px; }
  footer { margin: 0 12px 16px; padding: 20px; align-items: flex-start; gap: 13px; }
  footer span:last-child { gap: 12px; }
}

/* Footer density: keep the bottom as a quiet sign-off rather than a full panel. */
footer {
  padding: 8px 24px;
  line-height: 1.2;
}

@media (max-width: 820px) {
  footer { padding: 9px 20px; }
}

@media (max-width: 560px) {
  footer { padding: 10px 16px; gap: 6px; }
  footer span:last-child { gap: 6px; }
}

/* Quiet motion layer: editorial timing, soft depth, and restrained interaction feedback. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes image-breathe {
  from { transform: translate3d(var(--pointer-x), var(--pointer-y), 0) scale(1.055); }
  to { transform: translate3d(var(--pointer-x), var(--pointer-y), 0) scale(1.08); }
}
@keyframes note-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes border-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
  50% { box-shadow: inset 0 0 0 1px rgba(21,148,114,.3); }
}
@keyframes shine-sweep {
  from { transform: translateX(-130%) skewX(-18deg); }
  to { transform: translateX(180%) skewX(-18deg); }
}

.hero { animation: border-glow 6s ease-in-out infinite; }
.hero-media img { animation: image-breathe 14s ease-in-out alternate infinite; transform-origin: 62% 48%; }
.hero-content > * { opacity: 0; animation: hero-rise .72s cubic-bezier(.22,.8,.26,1) forwards; }
.hero-content .hero-meta { animation-delay: .08s; }
.hero-content .eyebrow { animation-delay: .18s; }
.hero-content h1 { animation-delay: .28s; }
.hero-content .hero-summary { animation-delay: .4s; }
.hero-content .hero-actions { animation-delay: .52s; }
.feature-note { animation: note-drift 7s ease-in-out .8s infinite; }
.archive-stamp { transition: transform .35s cubic-bezier(.22,.8,.26,1), box-shadow .35s ease; }
.archive-stamp:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 14px 28px rgba(16,24,40,.12); }
.library, footer { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.8,.26,1); }
.library.is-visible, footer.is-visible { opacity: 1; transform: translateY(0); }
.library.is-visible .section-icon { animation: note-drift 5s ease-in-out 1s infinite; }
.hero.is-out-of-view,
.hero.is-out-of-view .hero-media img,
.hero.is-out-of-view .feature-note,
.library:not(.is-visible) .section-icon { animation-play-state: paused; }
.primary-action, .member-cta { position: relative; overflow: hidden; isolation: isolate; }
.primary-action::after, .member-cta::after { content: ''; position: absolute; inset: -30% auto -30% -35%; width: 28%; background: rgba(255,255,255,.26); transform: translateX(-130%) skewX(-18deg); pointer-events: none; }
.primary-action:hover::after, .member-cta:hover::after { animation: shine-sweep .8s ease forwards; }
.primary-action span, .member-cta span:last-child { transition: transform .25s ease; }
.primary-action:hover span, .member-cta:hover span:last-child { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .hero, .hero-media img, .feature-note, .hero-content > *, .library, footer,
  .library.is-visible .section-icon { animation: none !important; transition: none !important; }
  .hero-content > *, .library, footer { opacity: 1; transform: none; }
}

/* Focused access frame: a quiet, complete login/register shell for the local-first product. */
body.auth-open { overflow: hidden; }
.auth-layer[hidden] { display: none; }
.auth-layer {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease;
}
.auth-layer.is-visible { opacity: 1; visibility: visible; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(12,22,38,.62); backdrop-filter: blur(15px) saturate(.82); }
.auth-panel {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px,.92fr) minmax(390px,1.08fr);
  width: min(940px, 100%); min-height: 594px; overflow: hidden; border: 1px solid rgba(255,255,255,.5);
  border-radius: 18px; background: #fbfcfd; box-shadow: 0 32px 90px rgba(2,12,28,.28), 0 8px 24px rgba(2,12,28,.12);
  transform: translateY(18px) scale(.985); transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.auth-layer.is-visible .auth-panel { transform: translateY(0) scale(1); }
.auth-visual { position: relative; overflow: hidden; min-height: 594px; color: #fff; background: #14243a; }
.auth-visual-image, .auth-visual-wash { position: absolute; inset: 0; }
.auth-visual-image { background: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1100&q=84') center/cover; filter: saturate(.66) contrast(1.02) brightness(.62); transform: scale(1.03); }
.auth-visual-wash { background: linear-gradient(160deg, rgba(12,28,47,.12) 0%, rgba(12,28,47,.34) 42%, rgba(7,17,31,.94) 100%); }
.auth-visual::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; pointer-events: none; }
.auth-visual-content { position: absolute; inset: auto 44px 42px; z-index: 1; }
.auth-kicker, .auth-visual-meta { display: flex; align-items: center; color: #77d8bb; font: 700 9px/1 "DM Sans", sans-serif; letter-spacing: .17em; }
.auth-kicker::before { content: ''; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #77d8bb; box-shadow: 0 0 0 5px rgba(119,216,187,.13); }
.auth-visual-content strong { display: block; margin-top: 20px; font-size: clamp(30px,3.2vw,45px); line-height: 1.13; letter-spacing: -.02em; }
.auth-visual-content strong em { color: #8de4c8; font-style: normal; }
.auth-visual-content p { max-width: 330px; margin: 20px 0 0; color: rgba(241,247,250,.7); font-size: 12px; line-height: 1.8; }
.auth-visual-meta { justify-content: space-between; margin-top: 38px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.55); font-size: 8px; }
.auth-form-wrap { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(36px,5vw,68px) 44px; background: #fbfcfd; }
.auth-close { position: absolute; top: 20px; right: 22px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #8a96a6; font-size: 25px; font-weight: 300; line-height: 1; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.auth-close:hover, .auth-close:focus-visible { border-color: #dce4ea; background: #f1f6f5; color: #1a2a3f; outline: none; }
.auth-heading { display: flex; align-items: center; gap: 14px; }
.auth-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #c9e7de; border-radius: 12px; background: #eaf8f3; color: var(--green); font: 800 17px/1 "DM Sans", sans-serif; }
.auth-eyebrow { margin: 0 0 5px; color: var(--green); font: 800 9px/1 "DM Sans", sans-serif; letter-spacing: .18em; }
.auth-heading h2 { margin: 0; color: #142239; font-size: 27px; line-height: 1.2; letter-spacing: -.02em; }
.auth-description { max-width: 360px; margin: 15px 0 27px; color: #718093; font-size: 12px; line-height: 1.7; }
.auth-mode { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 27px; border-bottom: 1px solid #dfe7eb; }
.auth-mode-button { position: relative; min-height: 37px; padding: 0 8px 13px; background: transparent; color: #9aa5b1; font-size: 12px; font-weight: 700; cursor: pointer; transition: color .2s ease; }
.auth-mode-button:hover, .auth-mode-button.is-active { color: #192a40; }
.auth-mode-indicator { position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--green); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.auth-mode-button[data-auth-mode="register"].is-active ~ .auth-mode-indicator { transform: translateX(100%); }
.auth-field { display: grid; gap: 8px; margin-bottom: 17px; }
.auth-field[hidden] { display: none; }
.auth-field label, .auth-label-row { color: #4d5d70; font-size: 11px; font-weight: 700; }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; }
.auth-inline-action { padding: 0; background: transparent; color: var(--green); font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-inline-action:hover { color: #0d765b; text-decoration: underline; }
.auth-input { display: flex; align-items: center; min-height: 46px; border: 1px solid #dce5ea; border-radius: 9px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.auth-input:focus-within { border-color: #68bea5; background: #fcfffe; box-shadow: 0 0 0 4px rgba(21,148,114,.1); }
.auth-input > span { width: 40px; color: #9aa8b5; text-align: center; font: 600 15px/1 "DM Sans", sans-serif; }
.auth-input input { min-width: 0; flex: 1; height: 44px; padding: 0 10px 0 0; border: 0; outline: 0; background: transparent; color: #142239; font-size: 12px; }
.auth-input input::placeholder { color: #aeb8c2; }
.auth-password-toggle { margin-right: 12px; padding: 4px 0; border: 0; background: transparent; color: #799187; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-password-toggle:hover { color: var(--green); }
.auth-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 22px; color: #798695 !important; font-size: 10px !important; font-weight: 500 !important; cursor: pointer; }
.auth-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--green); }
.auth-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 49px; padding: 0 17px 0 19px; border-radius: 8px; background: #142239; color: #fff; box-shadow: 0 12px 22px rgba(20,34,57,.14); font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.auth-submit span:last-child { color: #6fd4b4; font-size: 19px; transition: transform .25s ease; }
.auth-submit:hover, .auth-submit:focus-visible { background: #1b2e48; box-shadow: 0 17px 28px rgba(20,34,57,.2); outline: none; transform: translateY(-2px); }
.auth-submit:hover span:last-child, .auth-submit:focus-visible span:last-child { transform: translateX(4px); }
.auth-status { min-height: 17px; margin: 12px 0 0; color: var(--green); font-size: 10px; line-height: 1.6; }
.auth-footnote { margin: auto 0 0; padding-top: 22px; border-top: 1px solid #e4eaee; color: #a0aab4; font-size: 9px; line-height: 1.6; }

@media (max-width: 760px) {
  .auth-layer { padding: 14px; }
  .auth-panel { display: block; width: min(520px, 100%); min-height: 0; border-radius: 15px; }
  .auth-visual { display: none; }
  .auth-form-wrap { min-height: 640px; padding: 56px 28px 30px; }
}
@media (max-width: 420px) {
  .auth-layer { padding: 8px; }
  .auth-form-wrap { min-height: 640px; padding: 64px 22px 24px; }
  .auth-close { top: 17px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-layer, .auth-panel, .auth-mode-indicator, .auth-input, .auth-submit, .auth-submit span:last-child { transition: none !important; }
}

/* Refined add action: quiet paper surface with a clear archive-control affordance. */
.library-empty .empty-actions .primary-action {
  position: relative; min-width: 190px; min-height: 50px; padding: 0 10px 0 20px; gap: 16px;
  border: 1px solid #cfe4dc; border-radius: 11px; background: #fff;
  box-shadow: 0 8px 20px rgba(32,67,77,.08), inset 0 1px rgba(255,255,255,.95);
  color: #1b3345; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.library-empty .empty-actions .primary-action::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); opacity: .72; pointer-events: none;
}
.library-empty .empty-actions .primary-action span {
  position: relative; display: grid; place-items: center; width: 31px; height: 31px; margin-left: auto;
  border: 1px solid #b9dfd2; border-radius: 8px; background: #effaf6;
  color: var(--green); font-size: 21px; font-weight: 400; line-height: 1;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .25s ease, color .25s ease;
}
.library-empty .empty-actions .primary-action:hover,
.library-empty .empty-actions .primary-action:focus-visible {
  border-color: #9ccfbd; background: #fbfefd; box-shadow: 0 13px 25px rgba(32,67,77,.13), inset 0 1px rgba(255,255,255,.95); outline: none; transform: translateY(-2px);
}
.library-empty .empty-actions .primary-action:hover span,
.library-empty .empty-actions .primary-action:focus-visible span { transform: rotate(90deg); background: #dff5ed; color: #0c7f63; }
.library-empty .empty-actions .primary-action:active { transform: translateY(0) scale(.99); }
@media (max-width: 560px) {
  .library-empty .empty-actions .primary-action { min-width: 178px; min-height: 48px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .library-empty .empty-actions .primary-action, .library-empty .empty-actions .primary-action span { transition: none !important; }
}

/* Archive stack empty state: a concrete library metaphor instead of a loading-like orbit. */
.library-empty .empty-library-art {
  position: relative; width: 148px; height: 98px; margin: 0 0 18px; isolation: isolate;
}
.empty-card {
  position: absolute; display: block; width: 96px; height: 68px; border: 1px solid #dbe5e8;
  border-radius: 10px; box-shadow: 0 12px 22px rgba(38,66,79,.08); transform-origin: 50% 100%;
}
.empty-card-back { left: 21px; top: 21px; background: #eff5f5; transform: rotate(-10deg); }
.empty-card-mid { left: 32px; top: 13px; background: #eaf7f3; border-color: #cce8dd; transform: rotate(-4deg); }
.empty-card-front { left: 44px; top: 7px; overflow: hidden; background: #fff; border-color: #d6e2e5; transform: rotate(4deg); }
.empty-card-front::before { content: ''; position: absolute; left: 14px; right: 14px; top: 16px; height: 7px; border-radius: 2px; background: #dcefeb; }
.empty-card-front::after { content: ''; position: absolute; left: 14px; right: 29px; top: 31px; height: 4px; border-radius: 2px; background: #e7edf0; box-shadow: 0 10px 0 #e7edf0; }
.empty-card-front i { position: absolute; left: 14px; bottom: 13px; width: 18px; height: 4px; border-radius: 2px; background: var(--green); }
.empty-card-front b { position: absolute; right: 14px; bottom: 11px; width: 8px; height: 8px; border: 1px solid #a9daca; border-radius: 2px; background: #e5f7f0; }
.empty-library-art > em { position: absolute; z-index: 2; right: 5px; top: 0; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #b8e2d2; border-radius: 8px; background: #f0fbf7; color: var(--green); font-style: normal; font-size: 19px; line-height: 1; box-shadow: 0 8px 16px rgba(21,148,114,.12); }
.library.is-visible .empty-library-art { animation: empty-art-settle .8s .12s cubic-bezier(.16,1,.3,1) both; }
@keyframes empty-art-settle { from { opacity: 0; transform: translateY(12px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
.library-empty .empty-kicker { display: block; margin: 0 0 8px !important; color: var(--green) !important; font-size: 9px !important; font-weight: 800; letter-spacing: .15em; }
@media (max-width: 560px) {
  .library-empty .empty-library-art { width: 132px; height: 88px; margin-bottom: 15px; transform: scale(.92); }
  .library.is-visible .empty-library-art { animation-name: empty-art-settle-mobile; }
  .library-empty .empty-kicker { font-size: 8px !important; letter-spacing: .11em; }
}
@keyframes empty-art-settle-mobile { from { opacity: 0; transform: translateY(12px) scale(.86) rotate(-2deg); } to { opacity: 1; transform: translateY(0) scale(.92) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .library.is-visible .empty-library-art { animation: none !important; } }

/* P1-P4 refinement: supplied key art, a curated game centre, premium trial card, and quieter motion. */
.hero-media img { object-position: 52% 53%; filter: saturate(.84) contrast(.96) brightness(.84); }
.hero-media { inset: 0 !important; }
.hero-media img { object-position: center center; filter: saturate(.88) contrast(1.01) brightness(.68); }
.hero-wash { background: linear-gradient(90deg, rgba(5,18,28,.82) 0%, rgba(5,18,28,.56) 35%, rgba(5,18,28,.2) 69%, rgba(5,18,28,.42) 100%), linear-gradient(0deg, rgba(3,14,23,.68), transparent 58%); }
.hero-content { color: #f2f8f8; }
.hero h1 { color: #f3f9f8; text-shadow: 0 3px 22px rgba(0,0,0,.24); }
.hero h1 em { color: #8de1c8; }
.hero-summary { color: rgba(235,245,245,.75); }
.hero-meta { color: rgba(225,240,240,.68); }
.archive-stamp span { color: #294353; }
.feature-note { top: 33px; right: 4.8%; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.feature-note span { color: #a8ead7; }
.archive-stamp { background: rgba(248,252,252,.78); box-shadow: 0 12px 25px rgba(3,19,32,.14); }

.membership-card {
  min-height: 318px; padding: 22px 20px 18px; border-radius: 13px;
  border-color: rgba(80,126,143,.19); background: linear-gradient(145deg, #eaf9f4 0%, #f1f7ff 56%, #f0effc 100%);
  box-shadow: 0 20px 40px rgba(50,67,93,.12), inset 0 1px rgba(255,255,255,.9);
}
.membership-card > p { margin-top: 29px; color: #40546a; font-size: 12px; }
.membership-card h2 { display: flex; align-items: baseline; gap: 6px; color: #11233a; font-size: 38px; line-height: 1; letter-spacing: -.04em; }
.membership-card h2 small { color: #278e79; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.membership-card h2 span { color: #60758b; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.membership-card h2 b { font-variant-numeric: tabular-nums; }
.membership-card h2 b:only-child { font-size: .78em; }
.membership-card ul { gap: 8px; margin-bottom: 18px; }
.membership-card li { white-space: nowrap; }
.membership-card li::before { width: 5px; height: 5px; margin-right: 8px; }
.member-cta { min-height: 47px; border-radius: 10px; background: #13243b; box-shadow: 0 11px 22px rgba(20,34,57,.16); }
.member-cta span:last-child { color: #72d5b7; }

.game-center {
  margin: 0 34px; padding: 38px 0 42px; border-top: 1px solid #e3e9ec; background: #fff;
  opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
.game-center.is-visible { opacity: 1; transform: none; }
.center-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.section-kicker, .mini-kicker { margin: 0 0 8px; color: #8999a7; font: 800 9px/1 "DM Sans", sans-serif; letter-spacing: .2em; }
.center-heading h2 { margin: 0; color: #132238; font-size: 28px; letter-spacing: -.02em; }
.center-heading h2 + span { display: block; margin-top: 7px; color: #8492a0; font-size: 11px; }
.center-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid #b9d9ce; color: #397d6c; font-size: 11px; font-weight: 700; }
.center-link b { color: var(--green); font-size: 17px; font-weight: 400; transition: transform .25s ease; }
.center-link:hover b { transform: translateX(4px); }
.center-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .78fr); grid-template-rows: repeat(2, minmax(92px,1fr)); gap: 12px; }
.center-feature { position: relative; grid-row: 1 / span 2; min-height: 230px; overflow: hidden; border: 1px solid #dce7e6; border-radius: 13px; background: #12304a; isolation: isolate; }
.center-feature-media, .center-feature-wash { position: absolute; inset: 0; }
.center-feature-media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 55%; filter: saturate(.78) contrast(.98) brightness(.62); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.center-feature-wash { background: linear-gradient(90deg, rgba(8,26,42,.9) 0%, rgba(8,26,42,.53) 46%, rgba(8,26,42,.12) 100%), linear-gradient(0deg, rgba(8,26,42,.72), transparent 55%); }
.center-feature-copy { position: absolute; z-index: 1; left: 27px; right: 72px; bottom: 24px; color: #fff; }
.center-feature-copy > span { color: #9fe3cf; font: 800 8px/1 "DM Sans", sans-serif; letter-spacing: .17em; }
.center-feature-copy h3 { margin: 10px 0 6px; font-size: 26px; letter-spacing: -.02em; }
.center-feature-copy p { margin: 0; color: rgba(242,248,249,.72); font-size: 11px; line-height: 1.6; }
.center-action { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 11px 8px 13px; border: 1px solid rgba(180,237,219,.36); border-radius: 7px; background: rgba(255,255,255,.1); color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; backdrop-filter: blur(8px); transition: background-color .25s ease, transform .25s ease; }
.center-action b { color: #9fe3cf; font-size: 14px; font-weight: 400; }
.center-action:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.center-index { position: absolute; z-index: 1; top: 21px; right: 22px; color: rgba(255,255,255,.65); font: 800 24px/1 "DM Sans", sans-serif; }
.center-mini { display: grid; grid-template-columns: 31px 1fr 18px; align-items: center; gap: 11px; padding: 18px 20px; border: 1px solid #e1e8eb; border-radius: 11px; background: #fbfdfd; transition: border-color .25s ease, background-color .25s ease, transform .25s ease; }
.center-mini:hover { border-color: #b9d9cf; background: #f8fcfa; transform: translateX(3px); }
.mini-number { color: #209a7e; font: 800 16px/1 "DM Sans", sans-serif; }
.center-mini .mini-kicker { margin-bottom: 5px; font-size: 7px; letter-spacing: .16em; }
.center-mini h3 { margin: 0; color: #1a2d42; font-size: 14px; }
.center-mini p { margin: 5px 0 0; color: #82909d; font-size: 10px; line-height: 1.5; }
.center-mini > b { color: #5eb69e; font-size: 19px; font-weight: 400; }
.game-center.is-visible .center-feature-media img { transform: scale(1.01); }

/* Keep the Delta Force key art fully visible inside its card. */
.game-center-card-feature .game-center-card-media { background: #0b1c2a; }
.game-center-card-feature .game-center-card-media img { object-fit: contain; object-position: center; padding: 18px; }

/* Replace the old demonstrative shine/breathe loops with a single clean entrance language. */
.hero { animation: none !important; }
.hero-media img { animation: none !important; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.feature-note, .library.is-visible .section-icon { animation: none !important; }
.primary-action::after, .member-cta::after { display: none !important; }
.sidebar .membership-card .member-cta::after { display: block !important; }
.hero-content > * { animation-duration: .52s; }
.hero-content .hero-meta { animation-delay: .02s; }
.hero-content .eyebrow { animation-delay: .06s; }
.hero-content h1 { animation-delay: .1s; }
.hero-content .hero-summary { animation-delay: .14s; }
.hero-content .hero-actions { animation-delay: .18s; }
.hero h1 { color: #132238; text-shadow: 0 2px 18px rgba(255,255,255,.36); }
.hero h1 em { color: #138f75; }
.archive-stamp:hover { transform: translateY(-3px); }

@media (max-width: 820px) {
  .game-center { margin: 0 20px; padding: 34px 0 36px; }
  .center-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .center-feature { grid-row: auto; min-height: 260px; }
  .center-mini { min-height: 91px; }
}
@media (max-width: 560px) {
  .game-center { margin: 0 12px; padding: 30px 0 34px; }
  .center-heading { align-items: flex-start; }
  .center-heading h2 { font-size: 24px; }
  .center-heading h2 + span { max-width: 210px; line-height: 1.6; }
  .center-link { margin-top: 4px; }
  .center-feature { min-height: 242px; }
  .center-feature-copy { left: 20px; right: 38px; bottom: 20px; }
  .center-feature-copy h3 { font-size: 23px; }
  .membership-card h2 { font-size: 33px; }
  .membership-card li { white-space: normal; }
}

/* Final visual pass: keep the supplied key art bright, legible and editorial. */
.hero-media { inset: 0 !important; }
.hero-media img {
  object-position: center center;
  filter: saturate(1.04) contrast(1.02) brightness(1.04);
  transform: scale(1.015);
}
.hero-wash {
  background:
    linear-gradient(90deg, rgba(248,251,250,.94) 0%, rgba(248,251,250,.82) 28%, rgba(248,251,250,.4) 49%, rgba(248,251,250,.06) 73%, rgba(9,30,42,.16) 100%),
    linear-gradient(0deg, rgba(238,247,245,.22), transparent 52%);
}
.hero-content { color: #132238; }
.hero-meta { color: #657487; }
.hero h1 { color: #132238; text-shadow: 0 2px 18px rgba(255,255,255,.46); }
.hero h1 em { color: #11876d; }
.hero-summary { color: #5d6b7b; }
.feature-note { color: #193247; text-shadow: 0 2px 15px rgba(255,255,255,.42); }
.feature-note span { color: #11876d; }
.feature-note small { color: rgba(25,50,71,.62); }
.archive-stamp { background: rgba(255,255,255,.74); }

/* A compact access frame: the form is the focus and the image is only a quiet signature. */
.auth-panel {
  grid-template-columns: 220px minmax(0, 1fr);
  width: min(720px, 100%);
  min-height: 520px;
  border-radius: 12px;
}
.auth-visual { min-height: 520px; background: #dfeeea; }
.auth-visual-image { background: url('assets/ludus-feature.webp') center/cover; filter: saturate(.72) brightness(.9); }
.auth-visual-wash { background: linear-gradient(180deg, rgba(8,42,48,.04), rgba(8,42,48,.72)); }
.auth-visual::after { inset: 14px; border-radius: 8px; border-color: rgba(255,255,255,.36); }
.auth-visual-content { inset: auto 22px 23px; }
.auth-visual-content strong, .auth-visual-content p { display: none; }
.auth-kicker { font-size: 8px; }
.auth-kicker::before { width: 5px; height: 5px; margin-right: 7px; box-shadow: 0 0 0 4px rgba(119,216,187,.13); }
.auth-visual-meta { display: grid; gap: 8px; margin-top: 18px; padding-top: 11px; font-size: 7px; }
.auth-form-wrap { padding: 48px 42px 34px; }
.auth-form-wrap > :not(.auth-close) { width: min(360px, 100%); margin-right: auto; margin-left: auto; }
.auth-close { top: 15px; right: 17px; width: 30px; height: 30px; border-radius: 8px; font-size: 22px; }
.auth-heading { gap: 11px; }
.auth-mark { width: 34px; height: 34px; border-radius: 8px; font-size: 14px; }
.auth-heading h2 { font-size: 23px; }
.auth-description { margin: 12px auto 22px; font-size: 11px; }
.auth-mode { margin-bottom: 22px; }
.auth-mode-button { min-height: 34px; padding-bottom: 10px; color: #a2acb6; font-size: 11px; }
.auth-mode-button:hover, .auth-mode-button.is-active { color: #375164; }
.auth-mode-indicator { height: 1px; background: #5bb598; }
.auth-field { gap: 7px; margin-bottom: 14px; }
.auth-input { min-height: 44px; border-radius: 7px; }
.auth-input > span { width: 36px; font-size: 13px; }
.auth-input input { height: 42px; font-size: 12px; }
.auth-submit { min-height: 46px; border-radius: 7px; }
.auth-footnote { margin-top: auto !important; padding-top: 17px; font-size: 8px; }

body.page-leaving .site-shell { opacity: 0; transform: translateY(10px); transition: opacity .26s ease, transform .26s ease; }
@media (prefers-reduced-motion: reduce) {
  body.page-leaving .site-shell { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .auth-panel { width: min(480px, 100%); border-radius: 10px; }
  .auth-form-wrap { padding: 48px 30px 30px; }
}
@media (max-width: 420px) {
  .auth-form-wrap { padding: 56px 21px 24px; }
}