/*
 * Seven Letters V8 — The Tactile Correspondence System
 * Warm paper, quiet light, rounded touch and a single letter at a time.
 * Loaded after V7 so product logic and state classes remain untouched.
 */

:root {
  --v8-ivory: #fff9f0;
  --v8-paper: #f6ebdd;
  --v8-paper-soft: #fbf4e9;
  --v8-paper-deep: #e8d8c6;
  --v8-cocoa: #3a2d28;
  --v8-cocoa-soft: #57443c;
  --v8-muted: #74645a;
  --v8-wine: #8c4a58;
  --v8-wax: #a75863;
  --v8-gold: #b98e59;
  --v8-sage: #718273;
  --v8-sage-deep: #40584d;
  --v8-night: #30292b;
  --v8-line: rgba(78, 55, 36, 0.12);
  --v8-line-soft: rgba(78, 55, 36, 0.075);
  --v8-radius-xs: 12px;
  --v8-radius-sm: 18px;
  --v8-radius-md: 26px;
  --v8-radius-lg: 38px;
  --v8-radius-xl: 48px;
  --v8-pill: 999px;
  --v8-shadow-soft: 0 2px 8px rgba(62, 43, 31, 0.055), 0 20px 52px rgba(62, 43, 31, 0.095);
  --v8-shadow-touch: 0 3px 10px rgba(62, 43, 31, 0.075), 0 26px 68px rgba(62, 43, 31, 0.13);
  --v8-shadow-deep: 0 5px 16px rgba(62, 43, 31, 0.11), 0 34px 90px rgba(62, 43, 31, 0.17);
  --v8-serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --v8-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { background: var(--v8-paper); }
img { height: auto; }

:where(.v6-home, .v6-course, .v5-library, .reading-index) {
  color: var(--v8-cocoa);
  background:
    radial-gradient(circle at 9% 2%, rgba(255, 255, 255, 0.8), transparent 28rem),
    radial-gradient(circle at 92% 14%, rgba(167, 88, 99, 0.075), transparent 34rem),
    var(--v8-paper);
}
body.v6-home,
body.v6-course { background: var(--v8-paper); }

/* A restrained fibre veil keeps the warm surfaces from feeling digitally flat. */
body.v6-home::before,
body.v6-course::before,
body[data-v5-unit]::before,
body[data-v5-resource]::before,
body.v5-library::before,
body.reading-index::before {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  background: url("/study/assets/v8-paper-grain.svg") 0 0 / 220px 220px repeat;
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.16;
}

:where(.v6-home, .v6-course, .v5-library, .reading-index) ::selection,
body[data-v5-unit] ::selection,
body[data-v5-resource] ::selection { color: #fffaf1; background: var(--v8-wine); }

.v4-button,
.v5-response-box button,
.v4-response-box button,
.copy-button,
.v6-mobile-dock a {
  border-radius: var(--v8-pill);
  box-shadow: 0 9px 22px rgba(62, 43, 31, 0.12), inset 0 1px rgba(255, 255, 255, 0.24);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}

.v4-button { min-height: 56px; padding-inline: 27px; }
.v4-button.dark { color: #fffaf2; background: var(--v8-cocoa); }
.v4-button.dark span,
.v4-button.light-button span { border-radius: 50%; }
.v4-text-link { text-underline-offset: 0.38em; }

.v6-header,
.v6-portal-header,
.v5-library > .v4-header,
.reading-index > .v4-header {
  position: sticky;
  z-index: 80;
  top: 0;
  min-height: 76px;
  border-color: var(--v8-line-soft);
  color: var(--v8-cocoa);
  background: rgba(246, 235, 221, 0.86);
  box-shadow: 0 8px 30px rgba(62, 43, 31, 0.045);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}

.v6-header nav a,
.v6-portal-header nav a { color: var(--v8-muted); }
.v6-header .v4-mark,
.v6-portal-header .v4-mark { color: var(--v8-cocoa); }
.v6-portal-header .v4-mark b { color: var(--v8-cocoa); }
.v6-header .v4-mark span,
.v6-portal-header .v4-mark span { color: rgba(58, 45, 40, 0.48); }
.v6-header .header-enter {
  min-height: 42px;
  padding-inline: 20px;
  border-color: rgba(58, 45, 40, 0.22);
  border-radius: var(--v8-pill);
  background: rgba(255, 249, 240, 0.58);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.78);
}

/* Home — a letter resting in warm light. */
.v6-hero {
  min-height: calc(100svh - 76px);
  padding: clamp(78px, 8vw, 126px) clamp(24px, 6.5vw, 106px);
  gap: clamp(56px, 7vw, 110px);
  grid-template-columns: minmax(0, 0.93fr) minmax(480px, 1.07fr);
  background:
    radial-gradient(ellipse at 77% 45%, rgba(255, 255, 255, 0.8) 0 12%, rgba(255, 255, 255, 0.18) 44%, transparent 68%),
    radial-gradient(circle at 9% 17%, rgba(167, 88, 99, 0.105), transparent 28rem),
    linear-gradient(135deg, #fffaf2 0%, #f5eadc 62%, #ead9c7 100%);
}
.v6-hero::after { display: none; }
.v6-hero-copy .v4-kicker { margin-bottom: 29px; color: var(--v8-wine); }
.v6-hero h1 { color: var(--v8-wine); font-size: clamp(5rem, 9.2vw, 9.8rem); letter-spacing: -0.075em; line-height: 0.88; }
.v6-hero-title > span { color: var(--v8-gold); }
.v6-hero-promise { margin-top: clamp(32px, 4.5vw, 56px); color: var(--v8-cocoa); font-size: clamp(2.25rem, 3.05vw, 3.8rem); line-height: 1.23; }
.v6-hero-lead { margin-top: 24px; color: var(--v8-cocoa-soft); line-height: 2.05; }
.v6-hero-actions { margin-top: 31px; gap: 22px; }

.v7-home-status {
  position: relative;
  max-width: 590px;
  margin-top: 28px;
  padding: 19px 22px 18px;
  overflow: hidden;
  border: 1px solid rgba(112, 78, 50, 0.13);
  border-left-width: 1px !important;
  border-radius: 22px 22px 28px 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 249, 240, 0.38)),
    var(--v8-ivory);
  box-shadow: var(--v8-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.82);
}
.v7-home-status::after {
  position: absolute;
  right: -34px;
  bottom: -48px;
  width: 150px;
  height: 105px;
  border: 1px solid rgba(140, 74, 88, 0.1);
  border-radius: 50%;
  content: "";
  transform: rotate(-18deg);
}
.v7-home-status > span { color: var(--v8-wine); }
.v7-home-status > small { color: var(--v8-muted); }
.v7-home-status > i { border-radius: var(--v8-pill); background: rgba(58, 45, 40, 0.09); }
.v7-home-status > i b { border-radius: inherit; background: linear-gradient(90deg, var(--v8-wine), var(--v8-gold)); }
.v7-home-status[data-state="arrived"] { border-color: rgba(140, 74, 88, 0.23); background: rgba(255, 249, 240, 0.92); }
.v6-sequence { display: none; }

.v6-letter-portrait { width: min(100%, 720px); }
.v6-letter-matte {
  min-height: 0;
  aspect-ratio: 1.12 / 1;
  padding: clamp(46px, 5.2vw, 74px);
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: var(--v8-radius-lg);
  background:
    radial-gradient(circle at 23% 12%, rgba(255, 255, 255, 0.9), transparent 35%),
    linear-gradient(145deg, #ecdaca, #f7ecdf 58%, #dfc5ae);
  box-shadow: var(--v8-shadow-deep), inset 0 1px rgba(255, 255, 255, 0.88);
}
.v6-letter-matte::before {
  z-index: 0;
  inset: 19px;
  border-color: rgba(116, 79, 49, 0.11);
  border-radius: 27px;
}
.v6-letter-matte::after {
  position: absolute;
  z-index: 0;
  right: 7%;
  bottom: 7%;
  left: 7%;
  height: 42%;
  border: 1px solid rgba(112, 78, 50, 0.1);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  background:
    linear-gradient(34deg, transparent 49.5%, rgba(112, 78, 50, 0.08) 50%, transparent 50.6%) left / 50% 100% no-repeat,
    linear-gradient(-34deg, transparent 49.5%, rgba(112, 78, 50, 0.08) 50%, transparent 50.6%) right / 50% 100% no-repeat;
  content: "";
}
.v6-letter-shadow {
  top: 34%;
  right: 7%;
  left: 7%;
  aspect-ratio: 1800 / 771;
  border: 0;
  border-radius: 18px;
  background: rgba(111, 76, 52, 0.24);
  box-shadow: 0 28px 45px rgba(70, 44, 26, 0.16);
  transform: rotate(2.4deg) translateY(10px);
  filter: blur(0.3px);
}
.v6-letter-sheet {
  width: 100%;
  padding: clamp(11px, 1.45vw, 19px);
  border: 1px solid rgba(73, 52, 38, 0.13);
  border-radius: 17px 20px 16px 19px;
  background: #fbf7ef;
  box-shadow: 0 2px 6px rgba(62, 43, 31, 0.1), 0 27px 52px rgba(62, 43, 31, 0.18), inset 0 1px rgba(255, 255, 255, 0.84);
  transform: rotate(-1.15deg);
}
.v6-letter-sheet img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1800 / 771;
  border-radius: 10px 13px 9px 12px;
  object-fit: contain;
  filter: saturate(0.76) sepia(0.07) contrast(1.06) brightness(1.04);
}
.v6-postmark {
  right: 5.5%;
  bottom: 5.5%;
  width: 100px;
  height: 100px;
  border-color: rgba(255, 237, 214, 0.42);
  background: linear-gradient(145deg, #aa5964, #7f3e4b);
  box-shadow: 0 4px 9px rgba(73, 37, 43, 0.18), 0 18px 34px rgba(73, 37, 43, 0.2), inset 0 1px rgba(255, 255, 255, 0.18);
}
.v6-seal-rail { top: 30px; left: 31px; }
.v6-seal-rail li { color: var(--v8-wine); border-color: rgba(140, 74, 88, 0.24); background: rgba(255, 249, 240, 0.42); }
.v6-letter-portrait figcaption { color: var(--v8-muted); }

.v6-manifesto { padding-block: clamp(110px, 14vw, 190px); }
.v6-manifesto h2 { color: var(--v8-cocoa); }
.v6-manifesto-copy p { color: var(--v8-cocoa-soft); }

.v6-arrival {
  min-height: 0;
  padding: clamp(82px, 9vw, 132px) clamp(22px, 5.8vw, 92px);
  color: var(--v8-cocoa);
  background:
    radial-gradient(circle at 84% 12%, rgba(167, 88, 99, 0.1), transparent 26rem),
    linear-gradient(150deg, #ead9c8, #f5eadd 63%, #e8d8c6);
  gap: clamp(20px, 2.3vw, 34px);
}
.v6-arrival-object,
.v6-arrival-copy {
  min-height: 650px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 42px;
  box-shadow: var(--v8-shadow-touch), inset 0 1px rgba(255, 255, 255, 0.2);
}
.v6-arrival-object {
  padding: clamp(48px, 6vw, 88px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(circle at 55% 46%, rgba(167, 88, 99, 0.32), transparent 35%),
    linear-gradient(145deg, #59484a, var(--v8-night) 72%);
}
.v6-arrival-object::before { inset: 27px; border-color: rgba(255, 255, 255, 0.11); border-radius: 29px; }
.v6-arrival-object::after {
  position: absolute;
  right: 10%;
  bottom: 13%;
  display: grid;
  width: clamp(112px, 12vw, 164px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(246, 226, 205, 0.18);
  border-radius: 50%;
  color: rgba(246, 226, 205, 0.2);
  background: rgba(255, 255, 255, 0.012);
  box-shadow: inset 0 0 0 8px rgba(246, 226, 205, 0.025);
  content: "24H";
  font: 500 clamp(1.25rem, 2vw, 2rem)/1 Georgia, serif;
  letter-spacing: 0.08em;
  transform: rotate(-11deg);
}
.v6-arrival-number strong { color: #f1dcc6; text-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
.v6-arrival-number span { color: #d9b27e; }
.v6-arrival-track i { background: #3c3234; }
.v6-arrival-copy { padding: clamp(70px, 8vw, 125px) clamp(34px, 6.5vw, 96px); background: rgba(255, 250, 242, 0.79); }
.v6-arrival-copy .pale { color: var(--v8-wine); }
.v6-arrival-copy h2 { color: var(--v8-cocoa); }
.v6-arrival-copy li { border-color: var(--v8-line); }
.v6-arrival-copy li > span { color: var(--v8-gold); }
.v6-arrival-copy li p { color: var(--v8-muted); }
.v6-arrival-copy .v4-text-link.light { color: var(--v8-wine); }

.v6-journey { background: var(--v8-ivory); }
.v6-journey-heading > p { color: var(--v8-muted); }
.v6-journey-line {
  border: 0;
  gap: 18px;
  background: transparent;
  grid-template-columns: 0.78fr 1.12fr 1.42fr 1.05fr;
}
.v6-journey-line article,
.v6-journey-line article:last-child {
  overflow: hidden;
  min-height: 350px;
  padding: 34px 29px;
  border: 1px solid var(--v8-line-soft);
  border-radius: var(--v8-radius-md);
  background: rgba(248, 239, 226, 0.62);
  box-shadow: var(--v8-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.76);
}
.v6-journey-line article::after {
  position: absolute;
  right: -17%;
  bottom: -34%;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(140, 74, 88, 0.07);
  border-radius: 50%;
  content: "";
  transform: rotate(-12deg);
}
.v6-journey-line article::before { top: 28px; left: 29px; background: var(--v8-ivory); }
.v6-journey-line h3 { padding-top: 104px; }
.v6-journey-line .is-publishing {
  color: #fff9f0;
  border-color: rgba(255, 255, 255, 0.13);
  background: linear-gradient(150deg, #9d5563, #75404d);
  box-shadow: 0 24px 60px rgba(117, 64, 77, 0.22), inset 0 1px rgba(255, 255, 255, 0.16);
}
.v6-journey-line .is-publishing::after { border-color: rgba(255, 249, 240, 0.13); }
.v6-enter-course {
  min-height: 118px;
  margin-top: 34px;
  padding-inline: 30px;
  border: 1px solid var(--v8-line);
  border-radius: 28px;
  background: rgba(246, 235, 221, 0.6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.68);
}
.v6-enter-course:hover { padding-inline: 36px; border-color: rgba(58, 45, 40, 0.18); border-radius: 28px; background: var(--v8-cocoa); }
.v6-closing { background: radial-gradient(circle at 50% 42%, rgba(167, 88, 99, 0.12), transparent 25rem), var(--v8-paper); }
.v6-closing::before { border-color: var(--v8-line); border-radius: var(--v8-radius-xl); }
.v6-closing-seal { background: linear-gradient(145deg, var(--v8-wax), #7e3e49); box-shadow: 0 4px 10px rgba(105, 48, 59, 0.16), 0 18px 38px rgba(105, 48, 59, 0.18); }
.v6-footer { color: var(--v8-muted); background: var(--v8-paper); }

/* Course — today's letter, then the quiet map behind it. */
.v6-course-position {
  min-height: 56px;
  padding-inline: clamp(24px, 5vw, 78px);
  border-color: var(--v8-line-soft);
  color: var(--v8-muted);
  background: #f4eadc;
}
.v6-course-position > span { color: var(--v8-wine); }
.v6-course-position p i { background: rgba(140, 74, 88, 0.22); }

[data-learning-portal] .v6-current-stage {
  min-height: calc(100svh - 132px);
  padding: clamp(76px, 8vw, 122px) clamp(24px, 6.5vw, 106px);
  color: var(--v8-cocoa);
  background:
    radial-gradient(ellipse at 76% 40%, rgba(255, 255, 255, 0.76), transparent 40%),
    radial-gradient(circle at 9% 16%, color-mix(in srgb, var(--v7-unit-accent, var(--v8-wine)) 14%, transparent), transparent 29rem),
    linear-gradient(145deg, #f8efe4, #eadbc9);
}
.v6-current-copy { max-width: 720px; }
.v6-current-count { color: rgba(140, 74, 88, 0.07); }
.v6-current-copy .v4-kicker { color: var(--v8-wine); }
.v6-current-copy .current-stage { color: var(--v8-muted); }
.v6-current-copy h1 { color: var(--v8-cocoa); font-size: clamp(3.45rem, 5.9vw, 6.8rem); }
.v6-current-copy .current-subtitle { color: color-mix(in srgb, var(--v7-unit-accent, var(--v8-wine)) 72%, var(--v8-cocoa)); }
.v6-current-copy .current-summary { color: var(--v8-cocoa-soft); }
.v6-current-copy .light-button,
.v6-current-copy .arrival-button { color: #fffaf2; background: var(--v8-cocoa); }
.v6-current-copy .wait-message {
  max-width: 600px;
  margin-top: 34px;
  padding: 20px 22px;
  border: 1px solid rgba(140, 74, 88, 0.14);
  border-left-width: 1px;
  border-radius: 20px;
  color: var(--v8-cocoa);
  background: rgba(255, 249, 240, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}
.v6-current-copy .wait-message span { color: var(--v8-muted); }

.v6-current-art { width: min(100%, 720px); }
.v6-current-frame {
  min-height: 520px;
  padding: clamp(40px, 5vw, 70px);
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 42px;
  background:
    radial-gradient(circle at 22% 11%, rgba(255, 255, 255, 0.9), transparent 33%),
    linear-gradient(148deg, #ead6c4, #f5eadc 60%, #dcc0a9);
  box-shadow: var(--v8-shadow-deep), inset 0 1px rgba(255, 255, 255, 0.82);
}
.v6-current-frame::before { inset: 22px; border-color: rgba(94, 64, 44, 0.1); border-radius: 29px; }
.v6-current-sheet {
  display: grid;
  width: 100%;
  min-height: 245px;
  padding: clamp(12px, 1.7vw, 21px);
  place-items: center;
  border: 1px solid rgba(73, 52, 38, 0.13);
  border-radius: 20px 23px 19px 22px;
  background: #fbf7ef;
  box-shadow: 0 2px 7px rgba(62, 43, 31, 0.09), 0 28px 55px rgba(62, 43, 31, 0.17), inset 0 1px rgba(255, 255, 255, 0.86);
  transform: rotate(-0.85deg);
}
.v6-current-sheet::before { border-color: rgba(58, 45, 40, 0.08); border-radius: 14px; }
.v6-current-sheet img,
[data-learning-portal]:is([data-current-unit="principle-1"],[data-current-unit="principle-2"],[data-current-unit="principle-4"],[data-current-unit="publishing-plan"],[data-current-unit="letter-02"],[data-current-unit="letter-04"],[data-current-unit="letter-06"],[data-current-unit="letter-07"],[data-current-unit="principle-6"],[data-current-unit="principle-7"]) .v6-current-sheet img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto !important;
  max-height: 430px;
  border-radius: 12px 15px 11px 14px;
  object-fit: contain;
  background: transparent;
  filter: saturate(0.82) sepia(0.045) contrast(1.04) brightness(1.035);
}
.v6-current-stamp { background: linear-gradient(145deg, var(--v7-unit-accent, var(--v8-wax)), color-mix(in srgb, var(--v7-unit-accent, var(--v8-wax)) 72%, #4f2931)); box-shadow: 0 4px 10px rgba(74, 37, 44, 0.16), 0 18px 36px rgba(74, 37, 44, 0.2); }
.v6-current-art figcaption { color: var(--v8-muted); }
.v6-current-registration {
  top: 33px;
  left: 33px;
  width: 88px;
  height: 28px;
  padding-inline: 9px;
  align-items: center;
  border: 1px solid rgba(140, 74, 88, 0.24);
  border-radius: var(--v8-pill);
  color: rgba(140, 74, 88, 0.7);
  background: rgba(255, 249, 240, 0.44);
  transform: rotate(-4deg);
}
.v6-current-registration::before {
  content: "已抵达";
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.v6-current-registration::after {
  position: absolute;
  left: calc(100% + 8px);
  width: 34px;
  height: 12px;
  background: repeating-linear-gradient(to bottom, rgba(140, 74, 88, 0.2) 0 1px, transparent 1px 5px);
  content: "";
}
.v6-current-registration i { display: none; }

.v8-postal-details {
  max-width: 1320px;
  margin: clamp(58px, 7vw, 92px) auto 0;
  padding: 0;
  border: 1px solid var(--v8-line);
  border-radius: 28px;
  background: rgba(255, 249, 240, 0.6);
  box-shadow: var(--v8-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.74);
}
.v8-postal-details > summary {
  display: grid;
  min-height: 104px;
  padding: 23px 28px;
  align-items: center;
  cursor: pointer;
  gap: 24px;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 0.7fr) 38px;
  list-style: none;
}
.v8-postal-details > summary::-webkit-details-marker { display: none; }
.v8-postal-details > summary span { display: grid; gap: 4px; }
.v8-postal-details > summary small { color: var(--v8-wine); font-size: 0.62rem; font-style: normal; font-weight: 800; letter-spacing: 0.12em; }
.v8-postal-details > summary strong { font-family: var(--v8-serif); font-size: 1.15rem; font-weight: 500; }
.v8-postal-details > summary em { color: var(--v8-muted); font-size: 0.76rem; font-style: normal; line-height: 1.6; text-align: right; }
.v8-postal-details > summary > i { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--v8-line); border-radius: 50%; color: var(--v8-wine); font-style: normal; transition: transform 220ms ease, background 220ms ease; }
.v8-postal-details[open] > summary > i { color: #fff; background: var(--v8-wine); transform: rotate(45deg); }
.v8-postal-details[open] > summary { border-bottom: 1px solid var(--v8-line); }
.v6-course main[data-learning-portal] { padding-bottom: clamp(70px, 9vw, 120px); }
.v6-course .v8-postal-details { width: calc(100% - clamp(48px, 13vw, 212px)); }
.v8-postal-details .v7-postal-overview {
  padding: clamp(58px, 7vw, 92px) clamp(24px, 4vw, 58px) clamp(54px, 6vw, 82px);
  color: var(--v8-cocoa);
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(circle at 83% 4%, rgba(167, 88, 99, 0.09), transparent 24rem),
    rgba(246, 235, 221, 0.54);
}
.v8-postal-details .v7-postal-overview > header { margin-bottom: 48px; }
.v8-postal-details .v7-postal-overview h2 { color: var(--v8-cocoa); font-size: clamp(2.5rem, 4vw, 4rem); }
.v8-postal-details .v7-route-node { color: rgba(58, 45, 40, 0.48); }
.v8-postal-details .v7-route-node > i { border-color: rgba(58, 45, 40, 0.16); color: var(--v8-muted); background: var(--v8-paper-soft); }
.v8-postal-details .v7-postal-route::before { background: rgba(140, 74, 88, 0.18); }
.v8-postal-details .v7-route-node.is-current { color: var(--v8-wine); }
.v8-postal-details .v7-route-node.is-current > i { color: #fffaf2; border-color: var(--v8-wine); background: var(--v8-wine); box-shadow: 0 0 0 7px rgba(140, 74, 88, 0.09); }
.v8-postal-details .v7-route-node.is-complete { color: var(--v8-sage-deep); }
.v8-postal-details .v7-route-node.is-complete > i { color: #fff; border-color: var(--v8-sage); background: var(--v8-sage); }
.v8-postal-details .v7-route-node.is-locked > i { opacity: 0.62; }
.v8-postal-details .v7-route-legend { color: var(--v8-muted); }

.v6-roadmap {
  padding-top: clamp(100px, 12vw, 160px);
  padding-bottom: clamp(100px, 12vw, 160px);
  background:
    radial-gradient(circle at 92% 7%, rgba(167, 88, 99, 0.08), transparent 28rem),
    var(--v8-ivory);
}
.v6-roadmap-heading { margin-bottom: 58px; }
.v6-roadmap-heading h2 { color: var(--v8-cocoa); }
.v6-roadmap-heading > div:first-child > p:last-child { color: var(--v8-muted); }
.v6-roadmap .course-progress i { height: 4px; overflow: hidden; border-radius: var(--v8-pill); background: rgba(58, 45, 40, 0.09); }
.v6-roadmap .course-progress i b { border-radius: inherit; background: linear-gradient(90deg, var(--v8-wine), var(--v8-gold)); }
.v6-roadmap .phase-list { display: grid; gap: 17px; grid-template-columns: 1fr; }
.v6-roadmap .path-phase,
.v6-roadmap .path-phase:last-child {
  overflow: visible;
  border: 1px solid var(--v8-line-soft);
  border-radius: 30px;
  background: rgba(246, 235, 221, 0.54);
  box-shadow: var(--v8-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.76);
}
.v6-roadmap .path-phase > header { min-height: 196px; padding: 34px 36px; border-right: 1px solid var(--v8-line-soft); }
.v6-roadmap .path-phase > header::before { top: 41px; left: 18px; background: var(--v8-paper-soft); }
.v6-roadmap .path-phase.is-current > header::before { background: var(--v8-wine); }
.v6-roadmap .phase-description { margin: -70px 34px 34px 78px; }
.v6-phase-toggle { width: 42px; height: 42px; border-color: var(--v8-line); background: rgba(255, 249, 240, 0.5); }
.v6-phase-preview { padding: 26px 28px; gap: 10px; background: transparent; }
.v6-phase-preview span { min-height: 82px; border: 1px solid var(--v8-line-soft); border-radius: 15px; background: rgba(255, 249, 240, 0.7); }
.v6-phase-preview span.is-current { color: var(--v8-wine); border-color: rgba(140, 74, 88, 0.24); background: #fffaf2; box-shadow: 0 10px 28px rgba(62, 43, 31, 0.08), inset 4px 0 var(--v8-wax); }
.v6-roadmap .path-phase ol { padding: 24px 32px 32px; }
.v6-roadmap .path-phase li { border-color: var(--v8-line-soft); }
.v6-roadmap .path-phase li.is-current { margin: 0; padding-left: 18px; border-radius: 15px; background: #fffaf2; box-shadow: 0 9px 25px rgba(62, 43, 31, 0.07); }
.v6-roadmap .path-phase li.is-current::before { border-radius: var(--v8-pill); background: var(--v8-wine); }
.v6-epilogue-stop {
  margin-top: 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  background: radial-gradient(circle at 86% 12%, rgba(167, 88, 99, 0.3), transparent 30%), linear-gradient(145deg, #514348, var(--v8-night));
  box-shadow: 0 24px 64px rgba(48, 41, 43, 0.16);
}
.v6-supplements {
  margin: 0 clamp(24px, 6.5vw, 106px);
  padding: clamp(76px, 9vw, 120px) clamp(24px, 5vw, 72px);
  border-radius: 42px;
  color: var(--v8-cocoa);
  background:
    radial-gradient(circle at 13% 18%, rgba(167, 88, 99, 0.11), transparent 28rem),
    linear-gradient(145deg, #e9d9c8, #f6ebdd);
  box-shadow: var(--v8-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.7);
}
.v6-supplements .pale { color: var(--v8-wine); }
.v6-supplements h2 { color: var(--v8-cocoa); }
.v6-supplements .supplement-links { gap: 13px; }
.v6-supplements .supplement-links a {
  padding-inline: 22px;
  border: 1px solid var(--v8-line-soft);
  border-radius: 20px;
  color: var(--v8-cocoa);
  background: rgba(255, 249, 240, 0.58);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.75);
}
.v6-supplements .supplement-links a small,
.v6-supplements .supplement-links a span { color: var(--v8-muted); }
.portal-note { color: var(--v8-muted); background: transparent; }
.dark-footer { color: var(--v8-muted); border-color: var(--v8-line); background: var(--v8-paper); }
.dark-footer a { color: var(--v8-cocoa); }

/* Lessons — an opened letter, not a split-screen exhibit. */
body[data-v5-unit],
body[data-v5-resource] {
  color: var(--v8-cocoa);
  background:
    radial-gradient(circle at 8% 3%, rgba(255, 255, 255, 0.85), transparent 26rem),
    var(--v8-paper);
}
body[data-v5-unit] .topbar,
body[data-v5-resource] .topbar {
  position: sticky;
  z-index: 70;
  top: 0;
  min-height: 76px;
  border-color: var(--v8-line-soft);
  background: rgba(246, 235, 221, 0.88);
  box-shadow: 0 8px 30px rgba(62, 43, 31, 0.045);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  backdrop-filter: blur(22px) saturate(1.12);
}
body[data-v5-unit] .brand,
body[data-v5-resource] .brand { color: var(--v8-cocoa); }
body[data-v5-unit] .nav a,
body[data-v5-resource] .nav a { min-height: 40px; padding-inline: 13px; border-radius: var(--v8-pill); color: var(--v8-muted); }
body[data-v5-unit] .nav a.active,
body[data-v5-resource] .nav a.active { color: var(--v8-wine); background: rgba(255, 249, 240, 0.7); }

body[data-v5-unit] .document,
body[data-v5-resource] .document { background: var(--v8-ivory); }
body[data-v5-unit][data-v7-theme] .lesson-head,
body[data-v5-resource] .lesson-head,
body[data-v5-resource="epilogue"] .lesson-head {
  min-height: calc(100svh - 76px);
  padding: clamp(90px, 11vw, 158px) 53% clamp(82px, 10vw, 140px) max(32px, calc((100vw - 1360px) / 2));
  border-radius: 0 0 52px 52px;
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--v7-lesson-accent, var(--v8-wine)) 13%, transparent), transparent 27rem),
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.88), transparent 30rem),
    linear-gradient(140deg, #fff9f0, var(--v7-lesson-pale, #f6ebdd) 68%, #ead9c8);
}
body[data-v5-unit][data-v7-theme] .lesson-head::before,
body[data-v5-resource] .lesson-head::before,
body[data-v5-resource="epilogue"] .lesson-head::before {
  inset: 8% 5% 8% 58%;
  border: 16px solid rgba(255, 249, 240, 0.72);
  border-radius: 38px;
  outline: 1px solid rgba(75, 53, 37, 0.1);
  background-color: #e7dbca;
  background-position: var(--v4-art-position, center);
  background-size: var(--v4-art-size, contain) !important;
  box-shadow: var(--v8-shadow-deep), inset 0 1px rgba(255, 255, 255, 0.8);
  filter: saturate(0.82) contrast(0.96) brightness(1.02);
}
body[data-v5-unit][data-v7-theme][data-v4-resource="welcome"] .lesson-head::before,
body[data-v5-unit][data-v7-theme][data-v4-resource="magic"] .lesson-head::before { inset: 32% 5% 32% 58%; }
body[data-v5-unit][data-v7-theme] .lesson-head::after,
body[data-v5-resource] .lesson-head::after { color: color-mix(in srgb, var(--v7-lesson-accent, var(--v8-wine)) 8%, transparent); }
body[data-v5-unit][data-v7-theme] .lesson-head h1,
body[data-v5-resource] .lesson-head h1 { color: var(--v8-cocoa); font-size: clamp(3.25rem, 5.2vw, 5.85rem); }
body[data-v5-unit][data-v7-theme] .lesson-head .meta,
body[data-v5-resource] .lesson-head .meta { color: var(--v8-muted); }
.v6-lesson-marker { margin-bottom: 33px; }
.v6-lesson-marker span { color: var(--v7-lesson-accent, var(--v8-wine)); }
.v6-lesson-marker b { color: var(--v8-muted); }
.v6-lesson-marker i { height: 4px; border-radius: var(--v8-pill); background: rgba(58, 45, 40, 0.08); }
.v6-lesson-marker i u { border-radius: inherit; background: var(--v7-lesson-accent, var(--v8-wine)); }

.v7-lesson-index {
  top: 76px;
  padding: 8px max(22px, calc((100vw - 1280px) / 2));
  border: 0;
  background: rgba(246, 235, 221, 0.82);
  box-shadow: 0 9px 26px rgba(62, 43, 31, 0.055);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.v7-lesson-index a { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--v8-pill); }
.v7-lesson-index a:first-child { padding-left: 14px; }
.v7-lesson-index a.is-active { color: var(--v7-lesson-accent, var(--v8-wine)); border: 0; background: rgba(255, 249, 240, 0.82); box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }

body[data-v5-unit] .content,
body[data-v5-resource] .content {
  width: min(900px, calc(100% - 48px));
  padding: clamp(105px, 12vw, 165px) 0;
  color: var(--v8-cocoa-soft);
  font-size: 1.065rem;
  line-height: 2.04;
}
body[data-v5-unit] .content h2,
body[data-v5-resource] .content h2,
body[data-v5-unit] .content h3,
body[data-v5-resource] .content h3 { color: var(--v8-cocoa); }
body[data-v5-unit] .content h2::before,
body[data-v5-resource] .content h2::before { width: 58px; height: 5px; border-radius: var(--v8-pill); background: var(--v7-lesson-accent, var(--v8-wine)); }
body[data-v5-unit] .content img,
body[data-v5-resource] .content img {
  height: auto !important;
  border-radius: 18px 21px 17px 20px;
  box-shadow: var(--v8-shadow-touch);
}
body[data-v5-unit] .content blockquote,
body[data-v5-resource] .content blockquote {
  border: 1px solid var(--v8-line);
  border-left-width: 1px;
  border-radius: 22px;
  background: rgba(246, 235, 221, 0.7);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7);
}
body[data-v5-unit] :is(.note, .daily-task, .reference-reading, .lesson-toc, .toc-section, .reference-group, .reading-list, .reference-links, .edit-flow),
body[data-v5-resource] :is(.note, .daily-task, .reference-reading, .lesson-toc, .toc-section, .reference-group, .reading-list, .reference-links, .edit-flow) {
  border: 1px solid color-mix(in srgb, var(--v7-lesson-accent, var(--v8-wine)) 18%, var(--v8-line)) !important;
  border-left-width: 1px !important;
  border-radius: 24px !important;
  color: var(--v8-cocoa-soft) !important;
  background: color-mix(in srgb, var(--v7-lesson-pale, var(--v8-paper)) 76%, #fffaf2) !important;
  box-shadow: var(--v8-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.74) !important;
}
body[data-v5-unit] .note.deep,
body[data-v5-resource] .note.deep { border-color: rgba(255, 255, 255, 0.09) !important; color: #fff7ec !important; background: linear-gradient(145deg, #55464a, var(--v8-night)) !important; }
.download-card,
.file-link,
.url-box,
.copy-row,
.notice {
  border-color: var(--v8-line);
  border-radius: 20px;
  background: rgba(246, 235, 221, 0.7);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72);
}
.v4-manuscript > div { border-color: var(--v8-line); border-radius: 24px; background: #f2e9dc; box-shadow: var(--v8-shadow-touch); transform: rotate(-0.35deg); }
.v4-manuscript img { height: auto !important; border-radius: 14px; }

.v5-completion {
  width: calc(100% - clamp(40px, 8vw, 120px));
  min-height: 76svh;
  margin: 40px auto 0;
  padding: clamp(105px, 13vw, 170px) 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 48px 48px 0 0;
  color: #fff7ec;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--v7-lesson-accent, var(--v8-wine)) 32%, transparent), transparent 28rem),
    linear-gradient(150deg, #55464a, var(--v8-night));
  box-shadow: 0 -18px 60px rgba(62, 43, 31, 0.12);
}
.v5-completion::before { inset: 26px; border-color: rgba(255, 255, 255, 0.1); border-radius: 34px 34px 0 0; }
.v5-completion-kicker { color: #dfbb8c; }
.v5-completion h2 { color: #fffaf2; }
.v6-completion-seal { background: linear-gradient(145deg, var(--v7-lesson-accent, var(--v8-wax)), color-mix(in srgb, var(--v7-lesson-accent, var(--v8-wax)) 68%, #4f2931)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), 0 18px 35px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.16); }
.v5-response-box {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  color: #fff7ec;
  background: rgba(255, 249, 240, 0.075);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.v5-response-box input {
  display: grid;
  width: 24px;
  height: 24px;
  margin: 0;
  flex: 0 0 auto;
  appearance: none;
  place-items: center;
  border: 1px solid rgba(255, 249, 240, 0.42);
  border-radius: 8px;
  background: rgba(255, 249, 240, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.v5-response-box input::after {
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #fffaf2;
  border-left: 2px solid #fffaf2;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.7);
  transition: opacity 160ms ease, transform 180ms ease;
}
.v5-response-box input:checked {
  border-color: var(--v7-lesson-accent, var(--v8-wine));
  background: var(--v7-lesson-accent, var(--v8-wine));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v7-lesson-accent, var(--v8-wine)) 18%, transparent);
}
.v5-response-box input:checked::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.v5-response-box input:focus-visible { outline: 3px solid rgba(246, 226, 205, 0.55); outline-offset: 3px; }
.v5-response-box input:disabled { cursor: default; opacity: 0.78; }
.v5-response-box button { min-height: 56px; padding-inline: 25px; color: var(--v8-cocoa); background: #f7ead8; }
.v5-completion.is-done .v5-response-box { border-color: rgba(147, 188, 164, 0.4); }
.v5-completion.is-done .v5-response-box button { background: var(--v8-sage-deep); }
.v5-completion.is-arrived .v5-response-box button { color: var(--v8-cocoa); background: #eed3a9; }
.v5-arrival-copy { color: rgba(255, 249, 240, 0.7); }
.v5-completion-nav a { color: rgba(255, 249, 240, 0.64); }

/* Long-form final lesson uses the same tactile family. */
.longform-header { position: sticky; z-index: 70; top: 0; min-height: 76px; color: var(--v8-cocoa); border-color: var(--v8-line); background: rgba(246, 235, 221, 0.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.longform-mark span,
.longform-header nav a { color: var(--v8-muted); }
.longform-hero {
  min-height: calc(100svh - 76px);
  color: var(--v8-cocoa);
  border-radius: 0 0 52px 52px;
  background: radial-gradient(circle at 78% 18%, rgba(167, 88, 99, 0.12), transparent 28rem), linear-gradient(145deg, #fff9f0, #ead9c8);
}
.longform-title > p { color: var(--v8-wine); }
.longform-title h1 { color: var(--v8-cocoa); }
.longform-title h2 { color: var(--v8-muted); }
.longform-meta span { border-color: var(--v8-line); border-radius: var(--v8-pill); color: var(--v8-muted); background: rgba(255, 249, 240, 0.62); }
.longform-hero figure { padding: 15px; border-color: var(--v8-line); border-radius: 36px; background: rgba(255, 249, 240, 0.72); box-shadow: var(--v8-shadow-deep); }
.longform-hero img { height: auto !important; max-height: 70vh; border-radius: 24px; object-fit: contain; }
.longform-hero figcaption { color: var(--v8-muted); }
.longform-intro { background: var(--v8-paper); }
.longform-content { color: var(--v8-cocoa-soft); }
.longform-content blockquote,
.longform-content .notion-aside { border: 1px solid var(--v8-line); border-left-width: 1px; border-radius: 24px; background: var(--v8-paper); box-shadow: var(--v8-shadow-soft); }
.longform-return { margin: 40px clamp(20px, 4vw, 60px) 0; border-radius: 48px 48px 0 0; color: #fff7ec; background: linear-gradient(145deg, #55464a, var(--v8-night)); }
.longform-return a { border-radius: var(--v8-pill); background: var(--v8-paper); box-shadow: var(--v8-shadow-soft); }

/* Directory and reading room. */
.v5-library .library-hero,
.reading-index .library-hero {
  min-height: 68svh;
  border-radius: 0 0 52px 52px;
  background: radial-gradient(circle at 82% 17%, rgba(167, 88, 99, 0.1), transparent 29rem), radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.88), transparent 28rem), linear-gradient(140deg, #fff9f0, #eadac8);
}
.v5-library .library-hero h1,
.reading-index .library-hero h1 { color: var(--v8-wine); }
.library-section,
.reading-catalog > article { background: var(--v8-ivory); }
.library-grid { gap: 15px; }
.library-grid a,
.reading-links a {
  border: 1px solid var(--v8-line-soft);
  border-radius: 24px;
  background: rgba(246, 235, 221, 0.55);
  box-shadow: var(--v8-shadow-soft), inset 0 1px rgba(255, 255, 255, 0.72);
}
.library-grid a.featured-resource { background: linear-gradient(145deg, #f2dfdf, #f7ecdf); }
.library-seven {
  margin: 0 clamp(22px, 5vw, 80px);
  border-radius: 46px;
  background: linear-gradient(145deg, #55464a, var(--v8-night));
  box-shadow: 0 28px 75px rgba(48, 41, 43, 0.16);
}
.publishing-directory { gap: 9px; }
.publishing-directory a { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 17px; background: rgba(255, 255, 255, 0.045); }
.v5-library-reading,
.library-reading { background: var(--v8-paper); }
.library-reading-links a { border-radius: var(--v8-pill); }
.library-epilogue,
.materials-banner { margin-right: clamp(22px, 5vw, 80px); margin-left: clamp(22px, 5vw, 80px); border-radius: 46px; background: linear-gradient(145deg, #66515a, var(--v8-night)); box-shadow: 0 28px 75px rgba(48, 41, 43, 0.16); }
.reading-catalog { background: var(--v8-ivory); }
.reading-links { gap: 13px; }
.materials-banner .v4-button { box-shadow: none; }

@media (hover: hover) {
  .v4-button:hover,
  .v5-response-box button:not(:disabled):hover,
  .library-grid a:hover,
  .reading-links a:hover,
  .v6-supplements .supplement-links a:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(62, 43, 31, 0.08), 0 25px 56px rgba(62, 43, 31, 0.13); }
  .v6-letter-sheet:hover,
  .v6-current-sheet:hover { transform: rotate(-0.35deg) translateY(-3px); box-shadow: 0 4px 10px rgba(62, 43, 31, 0.1), 0 34px 66px rgba(62, 43, 31, 0.2); }
}

@media (max-width: 1160px) {
  .v6-letter-matte { min-height: 0; }
  .v6-current-frame { min-height: 480px; }
  .v8-postal-details .v7-route-node:not(:last-child)::after { background: rgba(140, 74, 88, 0.18); }
}

@media (max-width: 980px) {
  .v6-hero { grid-template-columns: 1fr; gap: 72px; }
  .v6-letter-portrait { width: min(88vw, 720px); }
  .v6-letter-matte { min-height: 0; aspect-ratio: 1.1 / 1; }
  .v6-arrival { gap: 22px; }
  .v6-arrival-object { min-height: 600px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  .v6-arrival-copy { min-height: auto; }
  .v6-journey-line { gap: 16px; }
  .v6-journey-line article:nth-child(3),
  .v6-journey-line article:nth-child(4) { border: 1px solid var(--v8-line-soft); }
  [data-learning-portal] .v6-current-stage { grid-template-columns: 1fr; gap: 76px; }
  .v6-current-art { width: min(88vw, 720px); }
  .v6-current-frame { min-height: 0; aspect-ratio: 1.08 / 1; }
  .v6-roadmap .path-phase { grid-template-columns: 1fr; }
  .v6-roadmap .path-phase > header { border-right: 0; border-bottom: 1px solid var(--v8-line-soft); }
  .v6-roadmap .phase-description { margin: -74px 34px 34px 78px; }
  .v6-roadmap .path-phase ol,
  .v6-phase-preview { grid-column: 1; grid-row: auto; padding: 24px 28px 30px; }
  body[data-v5-unit][data-v7-theme] .lesson-head,
  body[data-v5-resource] .lesson-head,
  body[data-v5-resource="epilogue"] .lesson-head { padding-right: 48%; }
}

@media (max-width: 760px) {
  .v6-header,
  .v6-portal-header { min-height: 66px; padding-inline: 18px; }
  .v6-header .v4-mark span,
  .v6-portal-header .v4-mark span { display: none; }
  .v6-hero { padding: 48px 20px 76px; gap: 28px; }
  .v6-hero-copy .v4-kicker { margin-bottom: 18px; }
  .v6-hero h1 { font-size: clamp(4.8rem, 25vw, 7rem); }
  .v6-hero-promise { margin-top: 22px; margin-left: 0; font-size: clamp(2.05rem, 9.5vw, 3rem); }
  .v6-hero-lead { margin-top: 15px; line-height: 1.72; }
  .v6-hero-lead,
  .v6-hero-actions,
  .v7-home-status { margin-left: 0; }
  .v6-hero-actions { margin-top: 22px; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .v6-hero-actions .v4-button { min-height: 50px; padding-inline: 22px; }
  .v7-home-status { width: 100%; margin-top: 18px; padding: 15px 17px 14px; border-radius: 20px 20px 25px 25px; }
  .v6-letter-portrait { width: 100%; }
  .v6-letter-matte { min-height: 0; aspect-ratio: 1.04 / 1; padding: 32px 20px; border-radius: 30px; overflow: visible; }
  .v6-letter-matte::before { inset: 13px; border-radius: 20px; }
  .v6-letter-sheet { width: 100%; padding: 9px; border-radius: 15px 17px 14px 16px; transform: rotate(-0.65deg); }
  .v6-letter-sheet img { height: auto !important; border-radius: 8px 10px 7px 9px; }
  .v6-letter-shadow { right: 6%; left: 6%; aspect-ratio: 1800 / 771; border-radius: 14px; }
  .v6-postmark { width: 76px; height: 76px; }
  .v6-postmark b { font-size: 1.3rem; }
  .v6-postmark span { font-size: 0.38rem; }
  .v6-seal-rail { top: 20px; left: 20px; }
  .v6-seal-rail li { width: 23px; height: 23px; }
  .v6-arrival { padding: 70px 18px; }
  .v6-arrival-object,
  .v6-arrival-copy { border-radius: 30px; }
  .v6-arrival-object { min-height: 520px; padding: 42px 26px; }
  .v6-arrival-object::before { inset: 17px; border-radius: 20px; }
  .v6-arrival-copy { padding: 66px 24px; }
  .v6-journey { padding: 90px 20px; }
  .v6-journey-line { grid-template-columns: 1fr; }
  .v6-journey-line article,
  .v6-journey-line article:last-child,
  .v6-journey-line article:nth-child(3),
  .v6-journey-line article:nth-child(4) { min-height: 220px; border: 1px solid var(--v8-line-soft); border-radius: 24px; }
  .v6-journey-line h3 { padding-top: 42px; }
  .v6-enter-course { grid-template-columns: 1fr 26px; border-radius: 24px; }
  .v6-enter-course > b { display: none; }
  .v6-closing::before { inset: 20px; border-radius: 32px; }

  .v6-course-position { display: none; }
  [data-learning-portal] .v6-current-stage { min-height: auto; padding: 72px 20px 84px; gap: 58px; }
  .v6-current-copy { padding-top: 18px; }
  .v6-current-copy h1 { font-size: clamp(3rem, 14vw, 4.8rem); }
  .v6-current-count { top: -20px; }
  .v6-current-count > span { font-size: 8rem; }
  .v6-current-art { width: 100%; }
  .v6-current-frame { min-height: 0; aspect-ratio: 1.04 / 1; padding: 32px 20px; border-radius: 30px; }
  .v6-current-frame::before { inset: 14px; border-radius: 20px; }
  .v6-current-sheet { min-height: 170px; padding: 10px; border-radius: 16px 18px 15px 17px; }
  .v6-current-sheet img { width: auto; max-width: 100%; height: auto !important; max-height: 300px; }
  .v6-current-stamp { width: 76px; height: 76px; }
  .v6-course .v8-postal-details { width: calc(100% - 40px); margin-top: 38px; border-radius: 24px; }
  .v8-postal-details > summary { min-height: 92px; padding: 20px; gap: 14px; grid-template-columns: 1fr 36px; }
  .v8-postal-details > summary em { display: none; }
  .v8-postal-details .v7-postal-overview { padding: 48px 20px; border-radius: 0 0 24px 24px; }
  .v8-postal-details .v7-postal-route { grid-template-columns: 1fr; overflow: visible; gap: 9px; }
  .v8-postal-details .v7-route-node { display: grid; min-height: 58px; padding: 8px 11px; align-items: center; justify-items: start; border: 1px solid var(--v8-line-soft); border-radius: 17px; grid-template-columns: 42px 1fr; background: rgba(255, 249, 240, 0.58); text-align: left; }
  .v8-postal-details .v7-route-node > i { width: 38px; height: 38px; max-width: none; }
  .v8-postal-details .v7-route-node > small { margin: 0 0 0 10px; }
  .v8-postal-details .v7-route-node::after { display: none !important; }
  .v8-postal-details .v7-route-legend { justify-content: flex-start; }
  .v6-roadmap { padding: 88px 20px; }
  .v6-roadmap .path-phase { border-radius: 24px; }
  .v6-roadmap .path-phase > header { min-height: 178px; padding: 28px 22px; grid-template-columns: 34px 1fr auto; }
  .v6-roadmap .phase-description { margin: -62px 22px 28px 56px; }
  .v6-phase-preview { padding: 18px 20px 22px; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v6-phase-preview span { min-height: 64px; padding: 11px 13px; border-style: dashed; border-radius: 14px; }
  .v6-roadmap .path-phase ol { padding: 20px; }
  .v6-supplements { margin-inline: 20px; padding: 66px 20px; border-radius: 30px; }

  body[data-v5-unit],
  body[data-v5-resource] { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  body[data-v5-unit] .topbar,
  body[data-v5-resource] .topbar { min-height: 64px; }
  body[data-v5-unit][data-v7-theme] .lesson-head,
  body[data-v5-resource] .lesson-head,
  body[data-v5-resource="epilogue"] .lesson-head {
    display: flex;
    min-height: auto;
    padding: min(64vh, 570px) 20px 72px;
    border-radius: 0 0 34px 34px;
    background: radial-gradient(circle at 80% 8%, color-mix(in srgb, var(--v7-lesson-accent, var(--v8-wine)) 12%, transparent), transparent 22rem), linear-gradient(150deg, #fff9f0, var(--v7-lesson-pale, #f6ebdd));
  }
  body[data-v5-unit][data-v7-theme] .lesson-head::before,
  body[data-v5-resource] .lesson-head::before,
  body[data-v5-resource="epilogue"] .lesson-head::before { inset: 24px 20px auto; height: min(50vh, 440px); border-width: 10px; border-radius: 27px; }
  body[data-v5-unit][data-v7-theme][data-v4-resource="welcome"] .lesson-head,
  body[data-v5-unit][data-v7-theme][data-v4-resource="magic"] .lesson-head { padding-top: min(37vh, 320px); }
  body[data-v5-unit][data-v7-theme][data-v4-resource="welcome"] .lesson-head::before,
  body[data-v5-unit][data-v7-theme][data-v4-resource="magic"] .lesson-head::before { inset: 24px 20px auto; height: min(25vh, 190px); }
  body[data-v5-unit][data-v7-theme] .lesson-head h1,
  body[data-v5-resource] .lesson-head h1 { font-size: clamp(2.7rem, 12.5vw, 4.1rem); }
  .v7-lesson-index { top: 64px; padding: 7px 28px 7px 20px; scroll-padding-inline: 20px 28px; gap: 3px; }
  .v7-lesson-index a { min-height: 38px; }
  body[data-v5-unit] .content,
  body[data-v5-resource] .content { width: calc(100% - 38px); padding: 92px 0; }
  body[data-v5-unit] :is(.note, .daily-task, .reference-reading, .lesson-toc, .toc-section, .reference-group, .reading-list, .reference-links, .edit-flow),
  body[data-v5-resource] :is(.note, .daily-task, .reference-reading, .lesson-toc, .toc-section, .reference-group, .reading-list, .reference-links, .edit-flow) { padding: 25px 20px !important; border-radius: 20px !important; }
  .v5-completion { width: calc(100% - 24px); min-height: 0; margin-top: 20px; padding: 95px 18px; border-radius: 34px 34px 0 0; }
  .v5-completion::before { inset: 14px; border-radius: 24px 24px 0 0; }
  .v5-response-box { padding: 23px 19px; border-radius: 23px; }
  .v6-mobile-dock {
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    min-height: 76px;
    padding: 11px 12px 11px 16px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 24px;
    color: #fff8ef;
    background: rgba(58, 45, 40, 0.94);
    box-shadow: 0 14px 40px rgba(46, 31, 24, 0.23), inset 0 1px rgba(255, 255, 255, 0.1);
    transition: opacity 220ms ease, transform 260ms ease, visibility 220ms ease;
  }
  .v6-mobile-dock.is-completion-visible { visibility: hidden; pointer-events: none; opacity: 0; transform: translateY(calc(100% + 28px)); }
  .v6-mobile-dock small { color: #dfbb8c; }
  .v6-mobile-dock a { min-height: 46px; padding-inline: 16px; color: var(--v8-cocoa); background: #f3e3cf; }
  .v6-mobile-dock[data-state="waiting"] a { color: #f0d7aa; border-color: rgba(240, 215, 170, 0.28); background: rgba(255, 255, 255, 0.04); }
  .longform-header { min-height: 64px; }
  .longform-hero { border-radius: 0 0 34px 34px; }
  .longform-hero figure { border-radius: 27px; }
  .longform-hero img { height: auto !important; }
  .longform-return { margin-inline: 12px; border-radius: 34px 34px 0 0; }
  .library-seven,
  .library-epilogue,
  .materials-banner { margin-inline: 14px; border-radius: 32px; }
  .library-grid a,
  .reading-links a { border-radius: 20px; }
}

@media (max-width: 390px) {
  .v6-header nav,
  .v6-portal-header nav { gap: 7px; }
  .v6-header nav a,
  .v6-portal-header nav a { font-size: 0.63rem; }
  .v6-header .header-enter { padding-inline: 10px; }
  .v6-letter-matte { padding-inline: 14px; }
  .v6-seal-rail { gap: 3px; }
  .v6-seal-rail li { width: 20px; height: 20px; font-size: 0.48rem; }
  .v6-current-frame { padding-inline: 14px; }
  .v6-mobile-dock { right: 8px; left: 8px; padding-left: 13px; }
  .v6-mobile-dock b { max-width: 180px; }
}

@media (max-width: 330px) {
  .v6-header nav a:not(.header-enter),
  .v6-portal-header nav a:first-child { display: none; }
  .v6-mobile-dock b { max-width: 140px; }
  .v6-mobile-dock a { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .v4-button,
  .v5-response-box button,
  .v6-letter-sheet,
  .v6-current-sheet,
  .v6-mobile-dock,
  .library-grid a,
  .reading-links a { transition: none !important; }
}