:root {
  --ink: #202744;
  --muted: #606781;
  --paper: #fffaf2;
  --white: #fff;
  --violet: #5646b8;
  --violet-dark: #40338f;
  --violet-pale: #efedff;
  --coral: #f2604b;
  --coral-pale: #fff0e8;
  --mint: #daf2e9;
  --mint-deep: #28736a;
  --yellow: #ffda67;
  --line: #dcd8cd;
  --shadow: 0 18px 55px rgba(32, 39, 68, .11);
}

* { box-sizing: border-box; }
html { background: #ecebf2; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: #ecebf2;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
h1, h2, h3, p { margin-top: 0; line-break: strict; }
h1, h2, h3 { line-height: 1.38; overflow-wrap: break-word; text-wrap: balance; word-break: auto-phrase; }
h1:focus, h2:focus { outline: none; }
h1 { margin-bottom: 18px; font-size: clamp(2rem, 6vw, 3.35rem); letter-spacing: -.055em; }
h2 { margin-bottom: 14px; font-size: clamp(1.55rem, 4vw, 2.15rem); letter-spacing: -.035em; }
h3 { margin-bottom: 8px; font-size: 1.15rem; }
img { max-width: 100%; }

.app-frame {
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.topbar {
  min-height: 66px;
  padding: 12px clamp(18px, 4vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 250, 242, .94);
  border-bottom: 1px solid rgba(32, 39, 68, .1);
  backdrop-filter: blur(12px);
}
.brand { padding: 0; border: 0; background: transparent; cursor: pointer; font-weight: 950; letter-spacing: .08em; }
.brand small { margin-left: 7px; color: var(--violet); font-size: .75rem; letter-spacing: .15em; }
.world-nav { display: flex; gap: 18px; align-items: center; }
.topbar > *, .world-nav > *, .screen > * { min-width: 0; }
.screen { width: 100%; max-width: 760px; min-width: 0; min-height: calc(100vh - 66px); margin: auto; padding: 34px clamp(18px, 4vw, 36px) 64px; animation: enter .25s ease both; }
.home-screen, .world-screen { max-width: none; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eyebrow, .section-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  color: var(--violet-dark);
  font-size: .875rem;
  font-weight: 950;
  letter-spacing: .1em;
}
.eyebrow { padding: 5px 10px; background: var(--violet-pale); border-radius: 999px; }
.lead, .tiny, .demo-caption, .share-caption { color: var(--muted); }
.lead { font-weight: 650; }
.tiny, .demo-caption, .share-caption { font-size: .82rem; line-height: 1.75; }

.primary, .secondary, .text-button, .choice, .world-card, .world-pair-link, .near-type, .mood-choice, .month-pill {
  border: 0;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.primary, .secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border-radius: 15px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
.primary { color: #fff; background: var(--violet); box-shadow: 0 7px 0 var(--violet-dark); }
.primary:hover { background: #49399f; transform: translateY(-1px); }
.primary:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--violet-dark); }
.primary:disabled { color: #7b7e8e; background: #e2e0db; box-shadow: none; cursor: default; transform: none; }
.secondary { color: var(--violet-dark); background: #fff; border: 2px solid var(--violet); }
.secondary:hover { background: var(--violet-pale); transform: translateY(-1px); }
.text-button, .inline-link { min-height: 42px; padding: 7px 0; color: var(--violet-dark); background: transparent; border: 0; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.back-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 28px; }

/* TOP: character diagnosis first, monthly content second. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  min-height: 670px;
  padding: clamp(34px, 6vw, 78px) clamp(20px, 6vw, 72px);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 218, 103, .75) 0 76px, transparent 77px),
    linear-gradient(135deg, #fffaf2 0%, #fffaf2 54%, #e9f6f1 54%, #e9f6f1 100%);
  border-bottom: 1px solid var(--line);
}
.home-copy h1 { font-size: clamp(2.1rem, 3.2vw, 2.35rem); }
.home-title-row { display: block; white-space: nowrap; }
.home-title-accent { color: var(--coral); }
.home-intro { max-width: 560px; margin-bottom: 24px; font-size: 1.03rem; line-height: 1.95; }
.home-entry { max-width: 500px; }
.entry-meta { margin: 0 0 10px; font-size: .875rem; font-weight: 850; letter-spacing: .04em; }
.home-entry .primary { display: flex; align-items: center; justify-content: center; gap: 24px; }
.entry-note { margin: 16px 8px 0; text-align: center; }
.resume-diagnosis { display: block; margin: 10px auto 0; }
.demo-caption { margin: 14px 0 0; text-align: center; }
.home-visual { position: relative; min-width: 0; }
.hero-ticket {
  width: min(82%, 360px);
  margin: 0 0 -38px auto;
  padding: 18px 20px 46px;
  position: relative;
  z-index: 0;
  color: #fff;
  background: var(--ink);
  border-radius: 22px 22px 0 0;
  transform: rotate(2deg);
}
.hero-ticket span, .hero-ticket small { display: block; color: var(--yellow); font-size: .75rem; font-weight: 900; letter-spacing: .12em; }
.hero-ticket strong { display: block; margin: 7px 0; font-size: 1.25rem; line-height: 1.5; }
.lineup-wrap { position: relative; z-index: 1; padding: 16px; background: #fff; border: 2px solid var(--ink); border-radius: 28px; box-shadow: 10px 11px 0 var(--coral); transform: rotate(-1deg); }
.hero-lineup { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.hero-lineup-art.normalized-art { width: 100%; border: 1px solid rgba(32,39,68,.08); border-radius: 13px; }

.diagnosis-promise, .signal-concept, .world-discovery, .monthly-return, .home-after {
  margin: 0;
  padding: clamp(38px, 6vw, 70px) clamp(22px, 7vw, 80px);
}
.diagnosis-promise { color: #fff; background: var(--ink); }
.diagnosis-promise .eyebrow { color: var(--ink); background: var(--yellow); }
.promise-heading { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; gap: 32px; margin-bottom: 28px; }
.promise-heading h2 { margin: 0; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.promise-grid article { padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: rgba(255,255,255,.07); }
.promise-grid article > span { display: block; margin-bottom: 20px; color: var(--yellow); font-size: .75rem; font-weight: 950; letter-spacing: .14em; }
.promise-grid strong { display: block; font-size: 1.08rem; }
.promise-grid p { margin: 8px 0 0; color: #e5e7ef; font-size: .9rem; line-height: 1.75; }
.signal-concept { background: var(--violet-pale); }
.signal-concept > p:not(.eyebrow) { max-width: 760px; }
.signal-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.signal-layers article { display: grid; grid-template-columns: 48px 1fr; gap: 0 16px; padding: 24px; background: #fff; border: 1px solid #d2ccef; border-radius: 22px; }
.signal-layers article > small { grid-column: 1 / -1; color: var(--violet); font-weight: 850; }
.signal-layers article > span { display: grid; place-items: center; width: 42px; height: 42px; margin-top: 12px; color: #fff; background: var(--violet); border-radius: 50%; font-weight: 900; }
.signal-layers article > div { margin-top: 10px; }
.signal-layers h3 { font-size: 1.35rem; }
.signal-layers p { margin-bottom: 10px; }
.signal-layers strong { color: var(--violet-dark); }
.home-after { background: #fff; border-top: 1px solid var(--line); }
.home-after p { max-width: 760px; }

/* Character catalogue and relationships. */
.world-discovery { background: #fffdf8; border-top: 1px solid var(--line); }
.world-featured, .world-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0; }
.world-grid[data-count="12"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.world-card { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 22px; text-align: center; }
.world-card > *, .world-pair-link > *, .near-type > * { min-width: 0; }
.world-card:hover { border-color: var(--coral); box-shadow: 0 10px 25px rgba(32,39,68,.09); transform: translateY(-2px); }
.world-art { display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 18px; }
.world-card strong { margin: 12px 0 4px; }
.world-type-label { min-height: 3.1em; font-size: .9rem; font-weight: 750; line-height: 1.55; }
.world-tags, .type-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.world-tags { margin: 10px 0 0; }
.world-tags small, .type-tags span { padding: 5px 8px; color: var(--violet-dark); background: var(--violet-pale); border-radius: 999px; font-size: .875rem; font-weight: 850; }
.world-more { margin-top: auto; padding-top: 14px; color: var(--violet); font-size: .82rem; font-weight: 850; }
.world-discovery .secondary { max-width: 440px; }
.world-invitation { margin-top: 34px; padding: 26px; background: var(--mint); border-radius: 22px; }
.world-relations { margin: 38px 0; }
.relation-group { margin: 24px 0; }
.relation-group > h3 { padding-bottom: 9px; border-bottom: 2px solid var(--violet-pale); }
.all-relations { border-top: 1px solid var(--line); }
.all-relations > summary { padding: 18px 0; cursor: pointer; font-weight: 850; }
.all-relations > div { display: grid; gap: 10px; }
.world-pair-link { display: grid; grid-template-columns: 70px 1fr 18px; align-items: center; gap: 14px; width: 100%; padding: 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 17px; text-align: left; }
.world-pair-link:hover { border-color: var(--violet); }
.world-pair-link small, .world-pair-link strong { display: block; }
.world-pair-link small { color: var(--violet); font-size: .76rem; font-weight: 850; }
.pair-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
.pair-portraits button { padding: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; }
.pair-portraits small { display: block; color: var(--muted); }
.pair-portraits strong, .pair-portraits small { overflow-wrap: anywhere; }
.pair-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.pair-score > span { padding: 16px; background: var(--violet-pale); border-radius: 18px; text-align: center; }
.pair-score strong, .pair-score small { display: block; }
.pair-score strong { color: var(--violet); font-size: 1.8rem; }
.pair-good, .pair-friction, .pair-common, .pair-contributions, .pair-needs { margin: 20px 0; padding: 24px; border-radius: 22px; }
.pair-good { background: var(--mint); }
.pair-friction { background: var(--coral-pale); }
.pair-common { background: #fff; border: 1px solid var(--line); }
.pair-contributions { background: #fff; border: 1px solid var(--line); }
.pair-contributions article { display: grid; grid-template-columns: 70px 1fr; gap: 15px; align-items: center; padding: 15px 0; }
.pair-contributions article + article { border-top: 1px solid var(--line); }
.pair-contributions h2 { margin: 0 0 4px; font-size: 1rem; }
.pair-contributions p { margin: 0; }
.pair-contribution-art { display: block; width: 70px; height: 70px; }
.pair-needs { color: #fff; background: #373052; }
.pair-needs > p { display: grid; grid-template-columns: minmax(85px,.34fr) 1fr; gap: 14px; align-items: start; padding: 13px 0; margin: 0; }
.pair-needs > p + p { border-top: 1px solid rgba(255,255,255,.18); }
.pair-needs span { color: #f1eef8; }
.pair-conversation p { display: flex; flex-direction: column; gap: 7px; }
.pair-conversation span { padding: 17px; background: var(--violet-pale); border-radius: 18px 18px 18px 3px; }

/* Normalised transparent character art. */
.normalized-art { position: relative !important; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; flex: none; background: var(--art-bg, #fff8ea); border-radius: 18px; }
.normalized-art .art-window { position: absolute; display: block; overflow: hidden; }
.normalized-art .art-window img { display: block; position: absolute !important; max-width: none !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; }
.world-art .normalized-art { width: 100%; }
.near-type-art.normalized-art, .world-mini.normalized-art, .guide-mini-art.normalized-art { width: 64px; height: 64px; }
.pair-character.normalized-art { width: min(100%, 210px); margin: 0 auto 12px; }
.profile-character.normalized-art { width: min(100%, 350px); margin: 20px auto; }
.reading-cast-art.normalized-art { width: 110px; height: 110px; }

/* Diagnosis. */
.progress-wrap { margin-bottom: 28px; }
.progress-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; color: var(--muted); font-size: .8rem; font-weight: 850; }
.progress { height: 8px; overflow: hidden; background: #e4e2dc; border-radius: 999px; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--violet)); border-radius: inherit; }
.question-kicker { margin: 28px 0 10px; color: var(--coral); font-size: .82rem; font-weight: 900; }
.question-screen h1 { font-size: clamp(1.75rem, 5vw, 2.35rem); }
.question-scene { margin-bottom: 8px; font-size: 1.04rem; line-height: 1.9; }
.question-hint { margin-bottom: 22px; color: var(--muted); font-size: .875rem; }
.choices { display: grid; gap: 12px; }
.choice { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 13px; width: 100%; min-height: 82px; padding: 15px 16px; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 17px; text-align: left; font-weight: 750; }
.choice > span:last-child, .primary, .secondary { min-width: 0; overflow-wrap: anywhere; }
.choice:hover, .choice.selected { border-color: var(--violet); background: var(--violet-pale); box-shadow: 0 7px 18px rgba(86,70,184,.1); }
.choice-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--violet); background: #fff; border-radius: 50%; font-weight: 950; }
.choice.selected .choice-mark { color: #fff; background: var(--violet); }
.question-next { margin-top: 24px; }

/* Type result: identity, evidence, daily life and share. */
.result-screen { max-width: 900px; }
.result-hero { margin-bottom: 16px; }
.type-result { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 28px; padding: clamp(24px, 5vw, 48px); background: linear-gradient(135deg, #e5f6f0 0%, #f0edff 100%); border: 1px solid #cfc8e9; border-radius: 30px; }
.result-type-label { margin-bottom: 0; color: var(--muted); font-weight: 800; }
.type-result h1 { margin: 2px 0 0; color: var(--mint-deep); font-size: clamp(2.65rem, 8vw, 4.4rem); }
.type-nickname { font-size: clamp(1.08rem, 3vw, 1.45rem); font-weight: 900; }
.type-result .type-tags { justify-content: flex-start; margin: 16px 0; }
.type-result .type-tags span { background: #fff; border: 1px solid #c8c1e7; }
.type-essence { margin-bottom: 20px; line-height: 1.95; }
.type-catchphrase { margin: 18px 0 10px; color: var(--violet-dark); font-size: 1.08rem; font-weight: 900; line-height: 1.65; }
.result-share { max-width: 460px; }
.type-result .share-caption { margin: 16px 0 0; }
.result-art-card { padding: 14px 14px 18px; background: #fff; border: 2px solid var(--ink); border-radius: 24px; box-shadow: 8px 9px 0 var(--yellow); text-align: center; transform: rotate(1.2deg); }
.result-card-no { display: block; color: var(--coral); font-size: .75rem; font-weight: 950; letter-spacing: .14em; text-align: left; }
.result-art-card .result-character { width: 100%; margin: 4px auto; background: transparent; border-radius: 14px; }
.result-art-card > small { display: block; font-size: .75rem; font-weight: 850; letter-spacing: .13em; }
.result-art-name { display: none; }
.result-contents { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 38px; }
.result-contents span { padding: 7px 11px; color: var(--violet-dark); background: #fff; border: 1px solid #d1cbed; border-radius: 999px; font-size: .82rem; font-weight: 850; }
.character-moments, .signal-map, .type-balance, .seen-as, .life-areas, .recovery-card, .result-story, .share-card, .result-section { margin: 30px 0; }
.character-moments { padding: 30px; color: #fff; background: var(--ink); border-radius: 26px; }
.character-moments .eyebrow { color: var(--ink); background: var(--yellow); }
.character-moments ul { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.character-moments li { padding: 15px 16px 15px 42px; position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; }
.character-moments li::before { content: "✓"; position: absolute; left: 16px; color: var(--yellow); font-weight: 950; }
.signal-map { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 14px 34px rgba(32,39,68,.07); }
.signal-map-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.signal-map-head > span { flex: none; padding: 6px 10px; color: var(--violet); background: var(--violet-pale); border-radius: 999px; font-size: .75rem; font-weight: 900; }
.signal-axis-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.signal-axis { padding: 17px; background: #f7f6f2; border-radius: 18px; }
.signal-axis-title, .axis-labels { display: flex; justify-content: space-between; gap: 10px; }
.signal-axis-title small { color: var(--muted); font-weight: 800; }
.signal-axis-title strong { font-size: .95rem; }
.axis-labels { margin-top: 13px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.axis-track { height: 8px; margin: 6px 4px 0; position: relative; background: linear-gradient(90deg, #ffd3c8, #dedde2 50%, #c8d1ff); border-radius: 999px; }
.axis-track i { width: 1px; height: 14px; position: absolute; top: -3px; left: 50%; background: #999ba5; }
.axis-track span { width: 17px; height: 17px; position: absolute; top: 50%; background: var(--violet); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(50,40,120,.25); transform: translate(-50%, -50%); }
.signal-axis p { margin: 10px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.7; }
.signal-map > .tiny { margin: 18px 0 0; }
.type-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.type-balance > div { padding: 26px; border-radius: 24px; }
.type-balance > div:first-child { background: var(--mint); }
.type-balance > div:last-child { background: var(--coral-pale); }
.type-balance h2, .type-balance p:last-child { margin-bottom: 0; }
.type-balance h2 { font-size: 1.35rem; line-height: 1.7; }
.seen-as { padding: 22px 24px; background: var(--violet-pale); border-left: 5px solid var(--violet); border-radius: 0 18px 18px 0; }
.seen-as p:last-child { margin: 0; }
.life-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.life-areas > .eyebrow, .life-areas > h2 { grid-column: 1 / -1; }
.life-areas article { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 21px; }
.life-areas article > span { color: var(--coral); font-size: .75rem; font-weight: 950; letter-spacing: .11em; }
.life-areas h3 { margin-top: 8px; }
.life-areas p { margin: 0; }
.recovery-card { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; color: #fff; background: var(--ink); border-radius: 25px; }
.recovery-card > div { padding: 27px; }
.recovery-card > div + div { background: var(--violet); }
.recovery-card .section-label { color: var(--yellow); }
.recovery-card p:last-child, .recovery-card h2:last-child { margin: 0; }
.recovery-card h2 { font-size: 1.32rem; }
.result-story, .result-section { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.result-story p { line-height: 1.95; }
.story-speech { padding: 16px 18px; background: #fff0c5; border-radius: 18px 18px 18px 3px; font-weight: 800; }
.near-type { display: grid; grid-template-columns: 64px 1fr 18px; align-items: center; gap: 13px; width: 100%; padding: 11px 0; background: transparent; border-bottom: 1px solid var(--line); text-align: left; }
.near-type strong, .near-type small { display: block; }
.near-type small { color: var(--muted); }
.character-extra { margin: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.character-extra > summary { padding: 18px 0; cursor: pointer; font-weight: 850; }
.result-action { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; margin: 0 0 52px; padding: 30px; color: #fff; background: var(--ink); border-radius: 20px; }
.result-action h2 { margin-bottom: 12px; font-size: 1.55rem; }
.result-action p:last-child { margin: 0; color: #e2e4ec; }
.result-action .eyebrow { color: var(--yellow); }
.result-action blockquote { margin: 0; padding: 22px; color: var(--ink); background: #fff0c5; border-radius: 15px; }
.result-action blockquote small, .result-action blockquote strong { display: block; }
.result-action blockquote small { margin-bottom: 8px; color: var(--violet-dark); font-size: .82rem; font-weight: 850; }
.result-action blockquote strong { line-height: 1.75; }
.share-card { padding: 30px; color: #fff; background: var(--ink); border-radius: 26px; text-align: center; }
.share-card .eyebrow { color: var(--ink); background: var(--yellow); }
.share-card .primary { max-width: 480px; }
.share-card .share-caption, .share-card .tiny { color: #d9dce7; }
.share-preview { margin-top: 18px; }
.share-preview summary { cursor: pointer; font-weight: 800; }
.reading-copy-manual textarea { width: 100%; padding: 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; line-height: 1.7; resize: vertical; }
.profile-hero { padding: 30px; background: linear-gradient(135deg, var(--mint), var(--violet-pale)); border-radius: 28px; text-align: center; }
.profile-hero .type-tags { margin: 14px 0; }
.profile-hero .profile-share-button { width: min(100%, 420px); margin: 24px auto 0; }
.profile-hero .share-caption { max-width: 520px; margin: 12px auto 0; }

/* Monthly: deliberately private and visually distinct from shareable type results. */
.monthly-return { background: var(--mint); border-top: 1px solid #b8dacf; border-bottom: 1px solid #b8dacf; }
.monthly-return-head { display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.monthly-return-head > div > small { display: block; color: var(--muted); font-weight: 800; }
.monthly-entry-art.normalized-art { width: 116px; height: 116px; background: #fff; }
.monthly-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.monthly-benefits span { padding: 7px 11px; background: #fff; border: 1px solid #a9d3c6; border-radius: 999px; font-size: .82rem; font-weight: 750; }
.monthly-return .secondary { max-width: 480px; }
.monthly-preview-controls, .method-note { margin: 22px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.monthly-preview-controls summary, .method-note summary { cursor: pointer; font-weight: 800; }
.birthday-screen { max-width: 640px; margin: auto; }
.birthday-orbit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; margin: 18px 0 26px; }
.birthday-orbit span { padding: 8px 12px; color: var(--violet-dark); background: var(--violet-pale); border-radius: 999px; font-size: .82rem; font-weight: 850; }
.birthday-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 18px; }
.birthday-fields label { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 13px 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; font-size: .8rem; font-weight: 800; }
.birthday-fields input { width: 100%; min-width: 0; padding: 7px 2px; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--violet); font-size: 1.5rem; }
.birthday-fields label > span { grid-column: 2; grid-row: 1 / 3; align-self: end; padding-bottom: 8px; }
.birthday-error { padding: 12px 14px; color: #963821; background: var(--coral-pale); border-radius: 12px; }
.cycle-method-list { padding-left: 22px; }
.cycle-method-list li { margin: 8px 0; }
.cycle-method-list strong, .cycle-method-list span { display: block; }
.mood-questions { display: grid; gap: 18px; margin: 28px 0; }
.mood-questions fieldset { margin: 0; padding: 22px; background: #fff; border: 1px solid #d6d0ed; border-radius: 22px; }
.mood-questions legend { display: flex; align-items: center; gap: 9px; padding: 0 8px; font-weight: 850; }
.mood-questions legend span { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--violet); border-radius: 50%; font-size: .75rem; }
.mood-questions fieldset > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mood-choice { min-height: 66px; padding: 11px; color: var(--ink); background: var(--paper); border: 1.5px solid #d6d0ed; border-radius: 14px; font-weight: 750; }
.mood-choice:hover, .mood-choice.selected { color: #fff; background: var(--violet); border-color: var(--violet); }
.private-result-note { padding: 10px 14px; background: #efeee9; border-radius: 12px; font-size: .82rem; }
.month-cover { overflow: hidden; margin: 22px 0 34px; padding: 26px; color: #fff; background: linear-gradient(150deg, #272144, #5848a8 62%, #7b67c0); border-radius: 30px; box-shadow: 0 18px 48px rgba(39,33,68,.2); }
.month-cover-top { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.2); }
.month-cover-top strong { font-size: 2.2rem; line-height: 1; }
.month-cover-top small { margin-left: auto; color: #eeeafd; font-weight: 800; }
.month-cover-character { display: grid; grid-template-columns: 138px 1fr; align-items: center; gap: 20px; margin: 23px 0; }
.month-cover-art.normalized-art { width: 138px; height: 138px; background: #fff; border-radius: 24px; }
.month-cover-mark { display: grid; place-items: center; width: 118px; height: 118px; color: var(--violet-dark); background: #fff0c5; border-radius: 28px; font-size: 2.8rem; font-weight: 900; }
.month-cover-character p { margin: 0 0 5px; color: var(--yellow); font-size: .82rem; font-weight: 850; }
.month-cover-character h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.5rem); }
.month-one-line, .month-scene, .month-action, .signal-overlap { margin: 16px 0; padding: 20px; border-radius: 19px; }
.month-one-line { color: var(--ink); background: #fff0c5; }
.month-one-line small, .month-scene small, .month-action small, .signal-overlap > small { display: block; margin-bottom: 6px; color: var(--yellow); font-weight: 850; }
.month-one-line small, .month-action small { color: var(--violet-dark); }
.month-one-line h2 { margin: 0; font-size: 1.45rem; }
.month-pulses { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.month-pulses article, .month-scene, .signal-overlap { padding: 17px; background: rgba(16,12,50,.22); border: 1px solid rgba(255,255,255,.16); border-radius: 17px; }
.month-pulses small { color: var(--yellow); font-weight: 850; }
.month-pulses p { margin: 7px 0 0; font-size: .88rem; }
.month-action { color: var(--ink); background: #fff; }
.month-action strong { display: block; }
.month-more { border-top: 1px solid rgba(255,255,255,.2); }
.month-more > summary { padding: 18px 0 4px; color: var(--yellow); cursor: pointer; font-weight: 850; }
.month-strengths, .lucky-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.month-strengths > div, .lucky-grid > div { padding: 15px; background: rgba(255,255,255,.1); border-radius: 15px; }
.month-strengths small, .month-strengths strong, .lucky-grid small, .lucky-grid strong { display: block; }
.month-strengths small, .lucky-grid small { color: var(--yellow); }
.lucky-grid > div:last-child { grid-column: 1 / -1; }
.key-dates > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.current-signal, .mood-invitation, .month-section, .reading-sample, .reading-offer { margin: 28px 0; padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: 23px; }
.current-signal-grid { display: grid; gap: 9px; margin: 20px 0; }
.current-signal-grid > div { padding: 15px; background: var(--violet-pale); border-radius: 14px; }
.current-signal-grid small, .current-signal-grid strong { display: block; }
.current-signal-grid small { color: var(--violet); font-weight: 800; }
.month-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.month-comparison h3 { grid-column: 1 / -1; }
.month-comparison p { padding: 12px; background: var(--violet-pale); border-radius: 12px; }
.month-comparison small { display: block; color: var(--muted); }
.weekly-album, .weekly-signal { margin: 34px 0; padding: 26px; background: linear-gradient(145deg, #e5f6ef, #f0edff); border: 1px solid #b7d9ce; border-radius: 28px; }
.weekly-album-head { display: flex; justify-content: space-between; gap: 16px; }
.weekly-album-head > strong { flex: 0 0 auto; min-width: 72px; color: var(--violet); font-size: 2rem; line-height: 1; text-align: right; white-space: nowrap; }
.weekly-album-head > strong small { font-size: .55em; }
.weekly-album-progress { height: 8px; margin: 18px 0; overflow: hidden; background: #d5d2df; border-radius: 999px; }
.weekly-album-progress span { display: block; height: 100%; background: var(--violet); }
.weekly-album-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.weekly-album-slot { display: flex; min-height: 106px; flex-direction: column; align-items: flex-start; padding: 11px; color: var(--ink); background: #fff; border: 1px solid #c8c1e3; border-radius: 15px; font: inherit; text-align: left; }
.weekly-album-slot b { color: var(--violet); }
.weekly-album-slot small { color: var(--muted); font-size: .75rem; }
.weekly-album-slot > span { margin-top: auto; font-size: .75rem; font-weight: 750; }
.weekly-album-slot.is-current { color: #fff; background: var(--violet); }
.weekly-album-slot.is-current b, .weekly-album-slot.is-current small { color: #fff; }
.weekly-album-slot.is-locked { color: #8b8797; background: rgba(255,255,255,.45); border-style: dashed; }
.weekly-album-card { margin-top: 16px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 21px; }
.weekly-card-cover, .weekly-card-top, .weekly-next { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.weekly-now-message, .weekly-now-grid > div { padding: 16px; background: #fff; border-radius: 16px; }
.weekly-now-message { margin: 14px 0; }
.weekly-now-message small, .weekly-now-message strong, .weekly-now-grid small, .weekly-now-grid strong { display: block; }
.weekly-now-message small, .weekly-now-grid small { color: var(--violet); font-weight: 800; }
.weekly-now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.weekly-answer-note { margin-top: 10px; padding: 14px 16px; border: 1px solid #d8d2ea; border-radius: 14px; background: #fbfaff; }
.weekly-answer-note small { display: block; margin-bottom: 5px; color: var(--violet); font-weight: 800; }
.weekly-answer-note p { margin: 0; line-height: 1.75; }
.weekly-now-art.normalized-art { width: 92px; height: 92px; }
.weekly-tune { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.weekly-tune summary { cursor: pointer; font-weight: 850; }
.weekly-tune-note { margin: 12px 0; padding: 11px 13px; color: var(--muted); background: #f4f1fb; border-radius: 10px; font-size: .875rem; line-height: 1.7; }
.weekly-tune > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.weekly-tune button, .weekly-choices button { padding: 12px; color: var(--ink); background: #fff; border: 1px solid #c8c1e3; border-radius: 13px; cursor: pointer; }
.weekly-tune button.selected { color: #fff; background: var(--violet); }
.weekly-next { margin-top: 16px; padding: 14px; background: #fff; border-radius: 15px; }
.weekly-next small, .weekly-next strong { display: block; }
.weekly-next .secondary { width: auto; min-height: 44px; }
.weekly-cards { display: grid; gap: 12px; }
.weekly-card { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 19px; }
.weekly-card.is-locked { color: #777282; background: rgba(255,255,255,.45); border-style: dashed; }
.weekly-card-top span { padding: 5px 9px; color: #fff; background: var(--violet); border-radius: 999px; font-size: .75rem; font-weight: 850; }
.weekly-choices { display: grid; gap: 9px; }
.weekly-choices button { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; text-align: left; }
.weekly-character { padding: 15px; background: #fff0c5; border-radius: 15px; }
.monthly-premium-offer, .month-book { margin: 36px 0; padding: 28px; color: #fff; background: #272144; border-radius: 28px; }
.monthly-premium-offer .eyebrow, .month-book .eyebrow { color: var(--ink); background: var(--yellow); }
.monthly-premium-offer .tiny, .month-book .tiny { color: #d9d6e8; }
.monthly-premium-offer .secondary { color: #fff; background: transparent; border-color: #fff; }
.premium-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 20px 0; }
.premium-compare > div { padding: 17px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); border-radius: 17px; }
.premium-compare small, .premium-compare strong, .premium-compare span { display: block; }
.premium-compare small { color: var(--yellow); font-weight: 850; }
.premium-compare strong { margin: 7px 0; }
.manual-format { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0 22px; }
.manual-format span { padding: 12px 14px; color: #373052; background: var(--violet-pale); border-radius: 14px; font-size: .86rem; font-weight: 800; }
.offer-current, .offer-preparing { padding: 16px; background: var(--violet-pale); border-radius: 15px; }
.offer-difference { padding-top: 16px; border-top: 1px solid var(--line); }
.membership-price { font-size: 1.35rem; font-weight: 900; }
.purchase-summary { margin: 16px 0; padding: 18px; background: var(--violet-pale); border-radius: 15px; }
.purchase-summary p { margin-bottom: 8px; }
.purchase-summary ul { margin: 0; padding-left: 22px; }
.purchase-summary li { margin: 4px 0; }
.billing-consent { display: flex; align-items: flex-start; gap: 11px; margin: 18px 0; line-height: 1.75; }
.billing-consent input { width: 20px; height: 20px; margin: 4px 0 0; flex: none; accent-color: var(--violet); }
.billing-consent a { color: var(--violet-dark); font-weight: 850; text-underline-offset: 3px; }
.test-billing { padding: 12px; background: var(--coral-pale); border-radius: 12px; }
.month-toc { display: grid; gap: 8px; margin: 24px 0; }
.month-toc a { padding: 12px; color: var(--violet-dark); background: var(--violet-pale); border-radius: 12px; font-weight: 800; text-decoration: none; }
.month-chapter { scroll-margin-top: 82px; margin: 30px 0; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.reading-cast { display: flex; justify-content: center; gap: 26px; margin: 22px 0; }
.reading-cast > div { display: flex; flex-direction: column; align-items: center; max-width: 46%; font-size: .8rem; }
.reading-contents { padding-left: 24px; }
.reading-contents li { padding: 7px 0; }
.reading-phrase { padding: 18px; background: var(--mint); border-radius: 17px; }
.reading-phrase blockquote { margin: 0; }
.sample-end { color: var(--violet); font-weight: 850; }
.preview-hero { max-width: 680px; padding: 24px 0 10px; }
.preview-hero > p:not(.eyebrow) { max-width: 640px; color: var(--muted); font-size: 1.02rem; }
.preview-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.preview-formula span { padding: 7px 11px; color: var(--violet-dark); background: var(--violet-pale); border-radius: 999px; font-size: .85rem; font-weight: 850; }
.preview-formula b { color: var(--coral); }
.preview-decision { margin: 28px 0 42px; padding: 30px; background: var(--mint); border-radius: 22px; }
.preview-decision-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.preview-decision-head span { color: var(--mint-deep); font-weight: 900; }
.preview-decision-head small { color: var(--muted); }
.preview-decision h2 { max-width: 590px; }
.preview-decision > p { max-width: 620px; margin-bottom: 24px; font-size: 1.03rem; }
.preview-free-paid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(40,115,106,.25); }
.preview-free-paid > div { padding: 14px; background: rgba(255,255,255,.68); border-radius: 14px; }
.preview-free-paid small, .preview-free-paid strong { display: block; }
.preview-free-paid small { color: var(--muted); }
.preview-free-paid > span { color: var(--violet); font-size: 1.4rem; font-weight: 900; }
.preview-guide { margin: 42px 0; }
.preview-answer-format { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 24px; }
.preview-answer-format span { padding: 7px 11px; color: var(--violet-dark); background: var(--violet-pale); border-radius: 999px; font-size: .82rem; font-weight: 850; }
.preview-scenes { border-top: 1px solid var(--line); }
.preview-scenes article { display: grid; grid-template-columns: 36px 118px 1fr; align-items: center; gap: 12px; min-width: 0; padding: 17px 4px; border-bottom: 1px solid var(--line); }
.preview-scenes article b { color: var(--coral); font-size: .78rem; }
.preview-scenes article strong { font-size: 1.05rem; }
.preview-scenes article span { color: var(--muted); }
.preview-extras { margin: 42px 0; padding: 24px; background: #f6f4ff; border-radius: 18px; }
.preview-extras > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
.preview-extras span { display: grid; gap: 3px; padding: 4px 18px; }
.preview-extras span + span { border-left: 1px solid #d8d2ef; }
.preview-extras b, .preview-extras small { display: block; }
.preview-extras small { color: var(--muted); }
.preview-story { margin: 42px 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.preview-story > summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; }
.preview-story > summary::-webkit-details-marker { display: none; }
.preview-story summary span { display: grid; gap: 2px; }
.preview-story summary small { color: var(--muted); }
.preview-story summary b { color: var(--violet); font-size: 1.35rem; transition: transform .2s ease; }
.preview-story[open] summary b { transform: rotate(45deg); }
.preview-story > div { padding: 24px 22px; border-top: 1px solid var(--line); }
.preview-story-cast { margin-bottom: 4px; color: var(--violet); font-size: .85rem; font-weight: 900; text-align: center; }
.preview-coming { margin: 18px 0 10px; padding: 14px 16px; color: #272144; background: var(--yellow); border-radius: 13px; font-weight: 900; text-align: center; }
.month-actions { display: grid; gap: 8px; }
.character-result-link { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: -14px 0 26px; }
.character-result-link span { color: var(--muted); font-size: .78rem; }
.month-section-marker { display: flex; align-items: center; gap: 14px; margin: 48px 0 16px; padding-top: 30px; border-top: 1px solid var(--line); }
.month-section-marker span { color: var(--violet); font-size: .78rem; font-weight: 900; letter-spacing: .12em; }
.month-section-marker strong { font-size: 1.05rem; }

/* Share preview and notifications. */
.character-share-image { display: block; width: min(100%, 600px); height: auto; margin: 24px auto; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.share-heading { max-width: 650px; margin: 18px auto 12px; text-align: center; }
.share-heading > p:last-child { color: var(--violet-dark); font-weight: 850; }
.share-primary-action { width: min(100%, 600px); margin: 20px auto 0; text-align: center; }
.share-primary-action .tiny { margin: 12px 0 0; }
.share-privacy { width: min(100%, 600px); margin: 28px auto 0; padding-top: 22px; color: var(--muted); border-top: 1px solid var(--line); font-size: .875rem; }
.share-error { width: min(100%, 600px); margin: 28px auto; padding: 22px; background: #fff3ee; border: 1px solid #edcfc3; border-radius: 16px; text-align: center; }
.share-error p { margin-bottom: 14px; }
.share-loading { margin: 40px 0; padding: 24px; background: var(--violet-pale); border-radius: 14px; text-align: center; }
.account-label { margin: 0 0 12px; color: var(--violet); font-size: .875rem; font-weight: 900; letter-spacing: .1em; }
.account-snapshot { display: grid; grid-template-columns: 1fr 190px; gap: 30px; align-items: center; padding: 34px; background: #f2efff; border-radius: 20px; }
.account-snapshot h1 { font-size: clamp(2rem,6vw,3rem); }
.account-snapshot .primary { max-width: 420px; }
.account-snapshot-copy > small { display: block; margin-top: 14px; color: var(--muted); }
.account-character { text-align: center; }
.account-character strong, .account-character span { display: block; }
.account-character span { margin-top: 4px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.account-character-art.normalized-art { width: 150px; height: 150px; margin: 0 auto 10px; background: #fff; }
.account-history, .account-membership { margin: 44px 0; padding-top: 34px; border-top: 1px solid var(--line); }
.account-history-list { margin: 22px 0; border-top: 1px solid var(--line); }
.account-history-entry { display: grid; width: 100%; grid-template-columns: 90px 1fr; gap: 18px; padding: 16px 0; color: inherit; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.account-history-entry:hover { color: var(--violet-dark); background: linear-gradient(90deg,transparent,var(--violet-pale)); }
.account-history-entry time { color: var(--violet); font-weight: 900; }
.account-history-entry strong, .account-history-entry small { display: block; }
.account-history-entry small { margin-top: 4px; color: var(--muted); font-size: .875rem; }
.offer-difference { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-top: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.offer-difference > div { padding: 20px 20px 20px 0; }
.offer-difference > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.account-membership { margin-bottom: 24px; }
.account-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding-top: 24px; border-top: 1px solid var(--line); }
.toast { width: min(calc(100% - 36px), 430px); padding: 13px 16px; position: fixed; bottom: 24px; left: 50%; z-index: 60; color: #fff; background: var(--ink); border-radius: 13px; text-align: center; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: .22s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.site-footer { padding: 30px clamp(18px, 4vw, 38px) 34px; color: var(--muted); background: #f4f1e9; border-top: 1px solid var(--line); text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.site-footer a { color: var(--ink); font-size: .875rem; font-weight: 800; text-underline-offset: 4px; }
.site-footer p { margin: 18px 0 0; font-size: .875rem; }
.site-footer small { display: block; margin-top: 2px; font-size: .75rem; letter-spacing: .06em; }

@media (max-width: 820px) {
  .home-hero { grid-template-columns: 1fr; min-height: auto; background: linear-gradient(180deg, #fffaf2 0 54%, #e9f6f1 54%); }
  .home-copy { text-align: center; }
  .home-intro, .home-entry { margin-left: auto; margin-right: auto; }
  .home-visual { width: 100%; max-width: 620px; margin: 10px auto 0; }
  .promise-heading { grid-template-columns: 1fr; gap: 4px; }
  .world-grid[data-count="12"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .type-result { grid-template-columns: 1fr; }
  .result-art-card { width: min(86%, 390px); grid-row: 1; margin: auto; }
  .result-art-name { display: block; margin-top: 6px; font-size: 1.15rem; }
  .result-identity { text-align: center; }
  .type-result .type-tags { justify-content: center; }
  .result-share { margin: auto; }
  .life-areas { grid-template-columns: 1fr; }
  .result-action { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 620px) {
  .topbar { min-height: 58px; padding: 8px 14px; gap: 10px; }
  .brand { flex: 0 1 auto; font-size: .96rem; letter-spacing: .04em; white-space: nowrap; }
  .brand small { display: none; }
  .world-nav { flex: 0 0 auto; }
  .world-nav { gap: 10px; }
  .world-nav .text-button { font-size: .82rem; }
  .screen { min-height: calc(100vh - 58px); padding: 24px 17px 48px; }
  .home-screen, .world-screen { padding-left: 0; padding-right: 0; }
  .home-hero, .diagnosis-promise, .signal-concept, .world-discovery, .monthly-return, .home-after { padding: 38px 18px; }
  .home-hero { padding-top: 32px; }
  .home-copy h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .home-title-row { white-space: normal; }
  .home-title-row > span { display: block; }
  .hero-ticket { width: 78%; margin-bottom: -30px; padding-bottom: 38px; }
  .lineup-wrap { padding: 10px; border-radius: 21px; box-shadow: 7px 8px 0 var(--coral); }
  .hero-lineup { gap: 5px; }
  .hero-lineup-art.normalized-art { border-radius: 9px; }
  .promise-grid, .signal-layers, .signal-axis-list, .type-balance, .recovery-card, .premium-compare, .manual-format { grid-template-columns: 1fr; }
  .promise-grid article { padding: 19px; }
  .signal-layers article { grid-template-columns: 42px 1fr; padding: 19px; }
  .world-featured { gap: 8px; }
  .world-featured .world-card { padding: 9px 6px; }
  .world-featured .world-type-label, .world-featured .world-tags { display: none; }
  .world-featured .world-card strong { font-size: .85rem; }
  .world-grid[data-count="12"] { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .world-grid .world-card { padding: 11px; }
  .world-grid .world-tags { display: none; }
  .type-result { padding: 20px 17px 28px; }
  .result-art-card { width: min(82%, 300px); }
  .result-contents { margin-bottom: 28px; }
  .character-moments, .signal-map, .share-card { padding: 22px 17px; }
  .signal-map-head { display: block; }
  .signal-map-head > span { display: inline-block; margin-top: 8px; }
  .type-balance > div, .recovery-card > div { padding: 22px 19px; }
  .recovery-card > div + div { border-top: 1px solid rgba(255,255,255,.16); }
  .pair-portraits { gap: 9px; }
  .pair-portraits button { padding: 11px 8px; }
  .pair-needs > p { grid-template-columns: 1fr; gap: 4px; }
  .monthly-return-head { align-items: flex-start; }
  .monthly-entry-art.normalized-art { width: 88px; height: 88px; }
  .birthday-fields, .mood-questions fieldset > div, .month-strengths, .lucky-grid, .weekly-now-grid, .weekly-tune > div { grid-template-columns: 1fr; }
  .lucky-grid > div:last-child { grid-column: auto; }
  .month-cover { padding: 21px 16px; }
  .month-cover-character { grid-template-columns: 98px 1fr; gap: 13px; }
  .month-cover-art.normalized-art { width: 98px; height: 98px; }
  .month-cover-mark { width: 92px; height: 92px; }
  .month-pulses { grid-template-columns: 1fr; }
  .weekly-album, .weekly-signal { padding: 21px 15px; }
  .weekly-album-slots { grid-template-columns: 1fr 1fr; }
  .weekly-next { align-items: stretch; flex-direction: column; }
  .weekly-next .secondary { width: 100%; }
  .character-result-link { align-items: flex-start; flex-direction: column; }
  .account-snapshot { grid-template-columns: 1fr; padding: 24px 20px; }
  .account-character { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; text-align: left; }
  .account-character-art.normalized-art { width: 78px; height: 78px; grid-row: 1 / 3; margin: 0; }
  .offer-difference { grid-template-columns: 1fr; }
  .offer-difference > div { padding: 18px 0; }
  .offer-difference > div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .result-action { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v39: calm hierarchy — fewer competing cards, colours and labels. */
:root {
  --line: #e5e2da;
  --shadow: 0 14px 42px rgba(32, 39, 68, .08);
}
body { background: #f1f0f5; line-height: 1.75; }
.app-frame { background: #fffdf8; box-shadow: 0 0 0 1px rgba(32,39,68,.05); }
.topbar { min-height: 64px; background: rgba(255,253,248,.97); backdrop-filter: blur(10px); }
.screen { max-width: 820px; padding-top: 46px; }
.home-screen, .world-screen { max-width: none; padding-top: 0; }
.eyebrow { padding: 0; color: var(--violet); background: transparent; border-radius: 0; }
.primary, .secondary { min-height: 56px; border-radius: 12px; }
.primary { box-shadow: none; }
.primary:hover { box-shadow: 0 8px 22px rgba(86,70,184,.18); }
.primary:active { transform: translateY(1px); box-shadow: none; }
.secondary { border-width: 1px; }

.home-hero {
  min-height: 590px;
  grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr);
  gap: clamp(36px,5vw,64px);
  padding: clamp(50px,7vw,78px) clamp(28px,7vw,78px);
  background: #fffdf8;
  border-bottom: 0;
}
.home-copy h1 { max-width: 510px; font-size: clamp(2.1rem,3vw,2.2rem); }
.home-intro { max-width: 500px; margin-bottom: 26px; font-size: 1.05rem; line-height: 1.85; }
.home-entry { max-width: 440px; }
.home-visual { padding: 24px; background: #f2efff; border-radius: 24px; }
.hero-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.hero-label strong { font-size: 1.05rem; }
.hero-label span { color: var(--muted); font-size: .875rem; }
.lineup-wrap { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.hero-lineup { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.hero-lineup-art.normalized-art { border: 0; border-radius: 12px; }
.hero-character-link { display: block; margin: 14px auto -4px; }
.home-proof { display: flex; justify-content: center; align-items: center; gap: 26px; padding: 20px 32px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .88rem; }
.home-proof strong { color: var(--ink); }
.home-proof span::before { content: "・"; margin-right: 26px; color: #c5c0b5; }
.signal-concept { display: block; padding: 64px 80px; background: #f6f4ff; }
.signal-concept-intro { max-width: 650px; }
.signal-concept-intro h2 { margin: 0 0 12px; font-size: clamp(1.9rem,4vw,2.45rem); }
.signal-concept-intro p:last-child { max-width: 620px; margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.85; }
.signal-layers { max-width: 920px; margin: 30px 0 0; gap: 12px; }
.signal-layers article { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 22px; background: #fff; border: 1px solid #ded9f0; border-radius: 16px; }
.signal-layers article > span { display: grid; width: 38px; height: 38px; margin: 0; place-items: center; color: #fff; background: var(--violet); border-radius: 50%; font-size: .75rem; font-weight: 900; }
.signal-layers article > div { margin: 0; }
.signal-layers article small { display: block; margin-bottom: 3px; color: var(--violet); font-weight: 850; }
.signal-layers article h3 { margin: 0 0 4px; font-size: 1.25rem; }
.signal-layers article p { margin: 0; color: var(--muted); }
.signal-promise { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); gap: 28px; align-items: start; margin: 8px 0 0; padding: 22px 0 0; border-top: 1px solid #cfc9e8; }
.signal-promise strong { font-size: 1.12rem; line-height: 1.65; }
.signal-promise small { color: var(--muted); font-size: .875rem; line-height: 1.75; }
.monthly-return { padding: 58px 80px; background: #f1f8f5; border-color: #d8e8e2; }
.monthly-return-head { max-width: 720px; }
.monthly-return > p { max-width: 660px; }
.monthly-return .secondary { max-width: 400px; }
.home-principles { background: #fff; border-bottom: 1px solid var(--line); }
.home-principles > summary { padding: 24px 80px; color: var(--muted); cursor: pointer; font-weight: 800; }
.home-principles > div { max-width: 820px; padding: 8px 80px 48px; }
.home-principles h2 { font-size: 1.35rem; }

.result-screen { max-width: 900px; padding-top: 48px; }
.type-result { gap: 42px; padding: 42px; background: #f6f4ff; border: 0; border-radius: 22px; }
.type-result h1 { color: var(--ink); font-size: clamp(2.8rem,7vw,4.1rem); }
.type-result .type-tags { margin: 14px 0 18px; }
.type-result .type-tags span { padding: 4px 9px; background: transparent; border-color: #c9c3df; }
.type-essence { margin-bottom: 24px; }
.result-art-card { padding: 12px; border: 0; border-radius: 18px; box-shadow: none; transform: none; }
.result-summary-line { margin: 18px 4px 48px; color: var(--muted); font-size: .875rem; text-align: center; }
.character-moments { margin: 0 0 52px; padding: 0 0 42px; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; }
.character-moments .eyebrow { color: var(--violet); background: transparent; }
.character-moments ul { gap: 0; }
.character-moments li { padding: 13px 10px 13px 34px; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.character-moments li::before { left: 7px; color: var(--coral); }
.signal-map { margin: 0 0 52px; padding: 0 0 44px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.signal-map-head { margin-bottom: 12px; }
.signal-map-head > span { display: none; }
.signal-axis-list { grid-template-columns: 1fr; gap: 0; }
.signal-axis { padding: 18px 0; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.signal-axis p { margin-bottom: 0; }
.result-guide { margin: 0 0 48px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.result-guide-head { padding: 28px 30px 24px; }
.result-guide-head h2 { margin: 0; }
.result-guide-pair, .result-guide-scenes, .result-guide-recovery { display: grid; }
.result-guide-pair, .result-guide-recovery { grid-template-columns: 1fr 1fr; }
.result-guide-scenes { grid-template-columns: repeat(3,1fr); }
.result-guide article { padding: 24px 26px; border-top: 1px solid var(--line); }
.result-guide-pair article + article, .result-guide-scenes article + article, .result-guide-recovery article + article { border-left: 1px solid var(--line); }
.result-guide article > span { display: block; margin-bottom: 8px; color: var(--violet); font-size: .875rem; font-weight: 900; letter-spacing: .04em; }
.result-guide article h3, .result-guide article p { margin: 0; }
.result-guide-pair article:first-child { background: #f1f8f5; }
.result-guide-recovery article:last-child { background: #f6f4ff; }
.result-disclosure, .character-extra { margin: 0; border: 0; border-top: 1px solid var(--line); }
.result-disclosure:last-of-type { border-bottom: 1px solid var(--line); }
.result-disclosure > summary, .character-extra > summary { padding: 22px 4px; cursor: pointer; font-weight: 850; }
.result-disclosure[open] > summary, .character-extra[open] > summary { color: var(--violet); }
.result-story, .result-section { margin: 0 0 24px; padding: 24px; border-radius: 14px; }
.result-disclosure .world-relations { margin: 4px 0 30px; }
.result-screen .monthly-return { margin: 50px 0 0; padding: 32px; border: 0; border-radius: 18px; }
.result-share-reminder { display: grid; grid-template-columns: 1fr 260px; align-items: center; gap: 28px; margin: 40px 0 0; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-share-reminder .section-label { margin-bottom: 4px; }
.result-share-reminder h2 { margin: 0; font-size: 1.45rem; }

.world-screen { padding: 56px 48px 72px; }
.world-screen > h1, .world-screen > p { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.world-screen > .eyebrow { display: flex; margin-left: auto; margin-right: auto; }
.world-grid[data-count="12"] { gap: 12px; margin-top: 38px; }
.world-card { padding: 12px 12px 18px; border-color: #ebe8e0; border-radius: 16px; }
.world-card:hover { box-shadow: 0 8px 22px rgba(32,39,68,.07); }
.world-card strong { margin-top: 10px; }
.world-type-label { min-height: 0; color: var(--muted); }
.world-invitation { max-width: 700px; margin: 48px auto 0; padding: 28px; background: #f1f8f5; border-radius: 16px; text-align: center; }
.world-invitation .profile-share-button { width: min(100%, 420px); margin: 14px auto 0; }

.pair-screen { max-width: 820px; }
.pair-hero > h1 { max-width: 760px; margin-bottom: 12px; }
.pair-scene { color: var(--muted); }
.pair-portraits { max-width: 620px; margin: 30px auto 16px; }
.pair-portraits button { padding: 8px; background: transparent; border: 0; border-radius: 0; }
.pair-character.normalized-art { width: min(100%,170px); }
.pair-score { max-width: 420px; margin: 18px auto 42px; }
.pair-score > span { padding: 10px; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
.pair-reading { border-top: 1px solid var(--line); }
.pair-common, .pair-good, .pair-friction, .pair-needs { margin: 0; padding: 28px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.pair-contrast { display: grid; grid-template-columns: 1fr 1fr; }
.pair-contrast > article { padding-right: 26px; }
.pair-contrast > article + article { padding-right: 0; padding-left: 26px; border-left: 1px solid var(--line); }
.pair-needs { color: var(--ink); }
.pair-needs span { color: var(--muted); }
.pair-needs > p + p { border-color: var(--line); }
.pair-details { border-bottom: 1px solid var(--line); }
.pair-details > summary { padding: 22px 0; cursor: pointer; font-weight: 850; }
.pair-contributions { margin: 0; padding: 0 0 22px; background: transparent; border: 0; }
.pair-conversation { padding-bottom: 18px; }

.month-purpose { max-width: 700px; margin: 0 0 24px; }
.month-purpose h1 { margin-bottom: 10px; font-size: clamp(2.15rem,7vw,3.35rem); }
.month-purpose > p:last-of-type { max-width: 650px; color: var(--muted); font-size: 1.02rem; }
.month-purpose-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.month-purpose-points span { padding: 7px 11px; color: var(--violet-dark); background: #f1effb; border-radius: 999px; font-size: .875rem; font-weight: 850; }
.private-result-note { margin-bottom: 22px; color: var(--muted); background: #f4f2ed; }
.weekly-album { margin-top: 0; padding: 24px; background: #eef8f4; }
.weekly-album-head h2 { margin-bottom: 4px; }
.weekly-album-head p { margin: 0; color: var(--muted); }
.weekly-album-slot { min-height: 82px; }
.weekly-album-card { background: #fffdf8; }
.month-cover { padding: 30px; border-radius: 20px; box-shadow: none; }
.month-pulses { gap: 0; }
.month-pulses article { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.2); border-radius: 0; }
.month-pulses article:nth-child(even) { border-left: 1px solid rgba(255,255,255,.2); }
.month-scene { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.2); border-radius: 0; }
.current-signal, .mood-invitation, .month-section, .reading-sample { padding: 30px 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.weekly-album, .weekly-signal { border: 0; border-radius: 18px; }
.monthly-premium-offer, .month-book { border-radius: 18px; }
.monthly-premium-offer { margin: 28px 0; }
.premium-compare ul { margin: 12px 0 0; padding-left: 20px; }
.premium-compare li { margin: 6px 0; color: #ece9f7; }
.premium-compare .is-paid { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.month-overview, .monthly-personalize, .monthly-settings, .account-settings { margin: 18px 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.month-overview > summary, .monthly-personalize > summary, .monthly-settings > summary, .account-settings > summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; }
.month-overview > summary::-webkit-details-marker, .monthly-personalize > summary::-webkit-details-marker, .monthly-settings > summary::-webkit-details-marker, .account-settings > summary::-webkit-details-marker { display: none; }
.month-overview summary span, .monthly-personalize summary span, .monthly-settings summary span, .account-settings summary span { display: grid; gap: 2px; }
.month-overview summary small, .monthly-personalize summary small, .monthly-settings summary small, .account-settings summary small { color: var(--muted); }
.month-overview summary strong, .monthly-personalize summary strong, .monthly-settings summary strong, .account-settings summary strong { font-size: 1.05rem; }
.month-overview summary b, .monthly-personalize summary b, .monthly-settings summary b, .account-settings summary b { color: var(--violet); font-size: 1.35rem; transition: transform .2s ease; }
.month-overview[open] > summary b, .monthly-personalize[open] > summary b, .monthly-settings[open] > summary b, .account-settings[open] > summary b { transform: rotate(45deg); }
.month-overview-body, .monthly-personalize-body, .monthly-settings-body, .account-settings-body { padding: 0 22px 24px; border-top: 1px solid var(--line); }
.month-overview-body .month-cover { margin-bottom: 0; }
.monthly-personalize-body .current-signal, .monthly-personalize-body .mood-invitation, .monthly-personalize-body .month-section { margin: 0; }
.mood-effect-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 24px; }
.mood-effect-guide > div { padding: 16px; background: #f5f3fb; border: 1px solid #ddd7ee; border-radius: 13px; }
.mood-effect-guide strong, .mood-effect-guide span { display: block; }
.mood-effect-guide strong { margin-bottom: 6px; color: var(--violet-dark); font-size: .9rem; }
.mood-effect-guide span { color: var(--muted); font-size: .875rem; line-height: 1.7; }
.mood-update-confirmation { display: grid; gap: 4px; margin-bottom: 24px; padding: 16px 18px; color: #205f4c; background: #e8f6ef; border: 1px solid #b7daca; border-radius: 13px; }
.mood-update-confirmation span { font-size: .875rem; line-height: 1.65; }
.monthly-record-action { margin-top: 24px; padding: 22px; background: #f7f5ff; border: 1px solid #d8d1f2; border-radius: 15px; }
.monthly-record-action.is-saved { background: #eef8f4; border-color: #b9d9cb; }
.monthly-record-action.is-changed { background: #fff9ec; border-color: #e5d5ad; }
.monthly-record-action h3 { margin: 4px 0 7px; font-size: 1.15rem; }
.monthly-record-action p:not(.monthly-record-badge) { margin: 0 0 17px; color: var(--muted); }
.monthly-record-action > small { display: block; margin-top: 11px; color: var(--muted); line-height: 1.6; }
.monthly-record-action > .primary, .monthly-record-action > .secondary { width: auto; }
.monthly-record-badge { margin: 0; color: var(--violet); font-size: .78rem; font-weight: 900; letter-spacing: .05em; }
.monthly-record-action.is-saved .monthly-record-badge { color: #247153; }
.monthly-record-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.monthly-record-actions .secondary { width: auto; }
.monthly-settings-body .character-result-link { margin: 22px 0; }
.month-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }

.account-intro { max-width: 680px; margin-bottom: 34px; }
.account-intro h1 { margin-bottom: 10px; font-size: clamp(2rem,6vw,3rem); }
.account-intro > p:last-child { color: var(--muted); }
.account-status { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 14px; margin: 0 0 28px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.account-status > span { width: 10px; height: 10px; background: #a7a3ae; border-radius: 50%; box-shadow: 0 0 0 5px #f0eef3; }
.account-status.is-signed-in { background: #f0f8f4; border-color: #b9d9cb; }
.account-status.is-signed-in > span { background: #2f8c69; box-shadow: 0 0 0 5px #d9eee5; }
.account-status.is-signed-out { background: #fff9ec; border-color: #e5d5ad; }
.account-status.is-signed-out > span { background: #be7a21; box-shadow: 0 0 0 5px #f7e9c8; }
.account-status small, .account-status strong { display: block; }
.account-status small { color: var(--muted); font-size: .75rem; font-weight: 800; }
.account-status strong { margin-top: 2px; font-size: 1.08rem; }
.account-status p { margin: 3px 0 0; color: var(--muted); font-size: .875rem; }
.account-status .primary { width: auto; min-width: 130px; }
.account-status .text-button { text-align: right; }
.account-now { display: grid; grid-template-columns: minmax(0,1fr) 230px; align-items: center; gap: 28px; margin: 0 0 14px; padding: 28px; background: linear-gradient(135deg,#e9f7f1,#f1efff); border: 1px solid #c9dcd5; border-radius: 18px; }
.account-now h2 { margin: 4px 0 8px; }
.account-now p { max-width: 610px; margin-bottom: 7px; color: var(--muted); }
.account-now small { color: var(--muted); }
.account-now .primary { width: 100%; }
.account-library { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-library > article { display: flex; min-width: 0; flex-direction: column; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.account-library > article:last-child { background: #f7f5ff; }
.account-card-label { margin: 0; color: var(--violet); font-size: .82rem; font-weight: 900; letter-spacing: .04em; }
.account-library h2 { margin: 16px 0 8px; font-size: 1.25rem; }
.account-library > article > p:not(.account-card-label) { color: var(--muted); }
.account-library .text-button, .account-library .account-saved, .account-library .account-unsaved { align-self: flex-start; margin-top: auto; }
.account-unsaved { color: #8a6730; font-size: .875rem; font-weight: 850; }
.owner-entry, .analytics-guide { display: grid; grid-template-columns: minmax(0,1fr) 210px; align-items: center; gap: 24px; margin: 0 0 28px; padding: 22px; background: #f1efff; border: 1px solid #d7d0f4; border-radius: 16px; }
.owner-entry h2, .analytics-guide h2 { margin-bottom: 6px; font-size: 1.35rem; }
.owner-entry p, .analytics-guide p { margin-bottom: 0; color: var(--muted); }
.owner-entry .secondary, .analytics-guide .secondary { width: 100%; }
.account-shelves { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.account-shelves > article { display: flex; min-width: 0; flex-direction: column; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.account-shelves > article:nth-child(2) { background: #f1f8f5; }
.account-shelves > article:nth-child(3) { background: #f6f4ff; }
.account-shelves h2 { margin: 16px 0 7px; font-size: 1.15rem; }
.account-shelves p { color: var(--muted); font-size: .9rem; }
.account-shelves .text-button { margin-top: auto; align-self: flex-start; text-align: left; }
.account-shelf-label { display: flex; align-items: center; gap: 8px; }
.account-shelf-label span { color: var(--violet); font-size: .78rem; font-weight: 900; }
.account-shelf-label small { color: var(--muted); font-weight: 850; }
.account-shelves .account-character { margin: 12px 0 0; text-align: left; }
.account-shelves .account-character-art.normalized-art { width: 76px; height: 76px; margin: 0 0 10px; }
.account-next { display: block; margin-top: 14px; color: var(--muted); }
.account-saved { margin-top: auto; color: var(--violet); font-size: .875rem; font-weight: 850; }
.account-history { margin: 34px 0; padding-top: 30px; }
.reading-offer { margin: 34px 0; padding: 28px; border-radius: 16px; }
.reading-offer.is-active { background: #eef8f4; border-color: #b9d9cb; }
.reading-offer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.reading-offer-head > div { max-width: 650px; }
.reading-offer-head > span { padding: 7px 11px; color: #1f664f; background: #d6eee4; border-radius: 999px; font-size: .8rem; font-weight: 900; white-space: nowrap; }
.premium-value-list { margin: 24px 0 18px; border-top: 1px solid var(--line); }
.premium-value-list article { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.premium-value-list small { color: var(--coral); font-size: .78rem; font-weight: 900; }
.premium-value-list h3, .premium-value-list p { margin: 0; }
.premium-value-list h3 { font-size: 1.02rem; }
.premium-value-list p { margin-top: 3px; color: var(--muted); font-size: .9rem; }
.premium-scenes { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.premium-scenes span { padding: 7px 11px; color: var(--violet-dark); background: var(--violet-pale); border-radius: 999px; font-size: .82rem; font-weight: 850; }
.offer-difference small { color: var(--violet); font-weight: 900; }
.offer-difference h3 { margin: 4px 0 7px; font-size: 1.05rem; }
.offer-difference p { margin: 0; color: var(--muted); }
.account-settings { margin-top: 34px; }
.account-settings-body { padding-top: 22px; }
.account-settings-body > * { max-width: 100%; }
.account-settings-body > p { margin-bottom: 16px; }
.account-settings-body > .primary, .account-settings-body > .secondary { margin: 16px 0 20px; }
.account-settings-body > .text-button { display: inline-flex; margin-top: 16px; }
.account-settings-body > :last-child { margin-bottom: 0; }
.account-login-intro { font-size: 1rem; line-height: 1.8; }
.account-login-button { white-space: nowrap; }
.account-footer { margin-top: 28px; }

@media (max-width: 820px) {
  .home-hero { grid-template-columns: 1fr; min-height: auto; background: #fffdf8; }
  .home-copy h1 { margin-left: auto; margin-right: auto; }
  .home-visual { max-width: 600px; }
  .signal-concept { padding-left: 44px; padding-right: 44px; }
  .account-shelves { grid-template-columns: 1fr 1fr; }
  .account-shelves > article:last-child { grid-column: 1 / -1; }
  .account-now { grid-template-columns: 1fr 190px; }
  .result-guide-scenes { grid-template-columns: 1fr; }
  .result-guide-scenes article + article { border-left: 0; }
  .preview-extras > div { grid-template-columns: 1fr; }
  .preview-extras span { padding: 12px 4px; }
  .preview-extras span + span { border-top: 1px solid #d8d2ef; border-left: 0; }
}

@media (max-width: 620px) {
  .mood-effect-guide { grid-template-columns: 1fr; }
  .monthly-record-action > .primary, .monthly-record-action > .secondary, .monthly-record-actions .secondary { width: 100%; }
  .monthly-record-actions { align-items: stretch; flex-direction: column; }
  .screen { padding-top: 30px; }
  .home-screen, .world-screen { padding-top: 0; }
  .home-hero { padding: 42px 18px 36px; }
  .home-copy h1 { font-size: 1.75rem; }
  .signal-concept-intro h2 { white-space: normal; }
  .home-intro { font-size: 1rem; }
  .home-visual { padding: 16px; border-radius: 18px; }
  .hero-label { align-items: flex-start; flex-direction: column; gap: 2px; }
  .hero-lineup { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
  .home-proof { flex-wrap: wrap; gap: 7px 14px; padding: 18px; text-align: center; }
  .home-proof strong { width: 100%; }
  .home-proof span::before { margin-right: 14px; }
  .home-proof span:nth-of-type(1)::before { content: ""; margin: 0; }
  .signal-concept { gap: 26px; padding: 46px 20px; }
  .signal-layers article { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .signal-promise { margin: 8px 0 0; }
  .signal-layers { grid-template-columns: 1fr; }
  .signal-layers article { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .signal-layers article { padding: 18px; border: 1px solid #ded9f0; }
  .signal-promise { grid-template-columns: 1fr; gap: 8px; }
  .monthly-return { padding: 42px 20px; }
  .monthly-return-head { gap: 14px; }
  .monthly-entry-art.normalized-art { width: 72px; height: 72px; }
  .home-principles > summary { padding: 22px 20px; }
  .home-principles > div { padding: 4px 20px 38px; }
  .type-result { padding: 24px 20px 30px; gap: 24px; }
  .result-summary-line { margin-bottom: 38px; line-height: 1.9; }
  .character-moments { margin-bottom: 42px; }
  .signal-map { margin-bottom: 42px; }
  .result-guide-pair, .result-guide-recovery { grid-template-columns: 1fr; }
  .result-guide article { padding: 20px; }
  .result-guide-pair article + article, .result-guide-recovery article + article { border-left: 0; }
  .result-share-reminder { grid-template-columns: 1fr; gap: 18px; }
  .result-screen .monthly-return { padding: 26px 20px; }
  .world-screen { padding: 38px 16px 56px; }
  .world-grid[data-count="12"] { gap: 9px; }
  .world-card { padding: 8px 8px 14px; }
  .world-type-label { font-size: .875rem; }
  .pair-contrast { grid-template-columns: 1fr; }
  .pair-contrast > article { padding: 24px 0; }
  .pair-contrast > article + article { padding-left: 0; border-left: 0; }
  .pair-needs > p { grid-template-columns: 1fr; }
  .month-cover { padding: 22px 16px; }
  .month-pulses article:nth-child(even) { border-left: 0; }
  .month-purpose h1 { font-size: 2.2rem; }
  .weekly-album { padding: 20px 15px; }
  .weekly-album-head > strong { min-width: 54px; font-size: 1.65rem; }
  .month-overview > summary, .monthly-personalize > summary, .monthly-settings > summary, .account-settings > summary { padding: 18px 16px; }
  .month-overview-body, .monthly-personalize-body, .monthly-settings-body, .account-settings-body { padding: 0 16px 20px; }
  .account-intro { margin-bottom: 24px; }
  .account-intro h1 { margin-bottom: 8px; font-size: 1.8rem; line-height: 1.45; letter-spacing: -.03em; text-wrap: pretty; }
  .account-intro h1 br { display: none; }
  .account-intro > p:last-child { font-size: .95rem; line-height: 1.75; }
  .account-settings { margin-top: 26px; border-radius: 14px; }
  .account-settings > summary { align-items: flex-start; gap: 12px; }
  .account-settings summary strong { font-size: 1rem; line-height: 1.5; }
  .account-settings summary b { flex: 0 0 auto; line-height: 1.25; }
  .account-settings-body { padding-top: 18px; }
  .account-login-button { min-height: 52px; }
  .account-status { grid-template-columns: 12px minmax(0,1fr); gap: 12px; padding: 17px 16px; }
  .account-status .primary, .account-status .text-button { width: 100%; grid-column: 1 / -1; text-align: center; }
  .account-now { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  .account-library { grid-template-columns: 1fr; gap: 10px; }
  .account-library > article { padding: 20px 18px; }
  .reading-offer-head { display: grid; gap: 12px; }
  .reading-offer-head > span { justify-self: start; }
  .account-footer { gap: 18px; margin-top: 22px; }
  .premium-compare { grid-template-columns: 1fr; }
  .account-shelves { grid-template-columns: 1fr; }
  .account-shelves > article:last-child { grid-column: auto; }
  .reading-offer { padding: 24px 18px; }
  .signal-promise strong, .monthly-return-head small, .month-purpose h1, .preview-screen strong { word-break: auto-phrase; text-wrap: pretty; }
  .preview-hero { padding-top: 10px; }
  .preview-hero h1 { font-size: 2rem; }
  .preview-hero > p:not(.eyebrow) { font-size: .98rem; }
  .preview-decision { margin: 24px 0 38px; padding: 22px 18px; border-radius: 18px; }
  .preview-decision-head { display: grid; gap: 0; }
  .preview-free-paid { grid-template-columns: 1fr; gap: 8px; }
  .preview-free-paid > span { line-height: 1; text-align: center; transform: rotate(90deg); }
  .preview-guide { margin: 38px 0; }
  .preview-scenes article { grid-template-columns: 30px 86px 1fr; gap: 8px; padding: 15px 0; }
  .preview-scenes article span { font-size: .88rem; line-height: 1.6; }
  .preview-extras { margin: 38px 0; padding: 20px 18px; }
  .preview-story { margin: 38px 0; }
  .preview-story > summary { padding: 18px 16px; }
  .preview-story > div { padding: 20px 16px; }
  .preview-story .reading-cast-art.normalized-art { width: 88px; height: 88px; }
  .preview-screen .month-book { padding: 24px 18px; }
}

/* v55: final responsive readability and content-completeness pass. */
h1, h2, h3 { max-width: 100%; word-break: normal; text-wrap: pretty; }
p, li, small, strong, button, a, summary { overflow-wrap: break-word; }
.primary, .secondary { text-wrap: balance; }
.text-button, .inline-link { min-height: 44px; }
.world-card, .signal-axis, .result-guide article, .account-shelves > article,
.month-cover-character > *, .weekly-album-head > *, .preview-scenes article > * { min-width: 0; }

.result-summary { margin: 18px 0 44px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.result-summary .section-label { margin: 0 0 10px; }
.result-summary ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.result-summary li { padding: 9px 12px 9px 24px; position: relative; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 800; }
.result-summary li::before { content: "✓"; position: absolute; left: 4px; color: var(--coral); font-weight: 950; }
.profile-screen .profile-signal-map { margin-top: 42px; }
.profile-signal-map + .result-guide { margin-top: 0; }

.account-screen > [role="status"] { margin: -8px 0 20px; padding: 12px 14px; color: #514d60; background: #f4f2ed; border-radius: 10px; font-size: .875rem; }
.account-settings-body .primary, .account-settings-body .secondary { height: auto; }
.account-shelves h2, .offer-difference h3 { text-wrap: pretty; }
.reading-offer > p:not(.eyebrow) { max-width: 650px; }
.owner-analytics { margin: 34px 0; padding: 28px; color: #f9f7ff; background: #24213b; border-radius: 18px; }
.owner-analytics h2, .owner-analytics p { color: inherit; }
.owner-analytics .eyebrow { color: #c8bdff; }
.owner-analytics-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.owner-analytics-head h2 { margin: 4px 0 0; }
.owner-analytics-head > small { color: #c9c5d8; text-align: right; }
.owner-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 22px 0; }
.owner-metrics article { min-width: 0; padding: 16px; background: rgba(255,255,255,.085); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; }
.owner-metrics small, .owner-metrics strong, .owner-metrics span { display: block; }
.owner-metrics small { color: #d6d2e4; font-size: .78rem; }
.owner-metrics strong { margin: 7px 0 3px; font-size: 1.6rem; line-height: 1.1; }
.owner-metrics span { color: #c8bdff; font-size: .75rem; }
.owner-version { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 16px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.owner-version > strong { margin-right: auto; }
.owner-version span { color: #d6d2e4; font-size: .82rem; }
.owner-version b { margin-right: 7px; color: #fff; }
.owner-analytics .tiny { margin: 18px 0 0; color: #bbb6cb; }
.owner-dashboard-screen { max-width: 900px; }
.owner-dashboard-intro { margin-bottom: 26px; }
.analytics-guide { background: #fff; }
.diagnosis-review-plan { margin: 34px 0; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.diagnosis-review-plan > div > p:last-child { color: var(--muted); }
.diagnosis-review-plan dl { margin: 22px 0 0; border-top: 1px solid var(--line); }
.diagnosis-review-plan dl div { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.diagnosis-review-plan dt { font-weight: 900; }
.diagnosis-review-plan dd { margin: 0; color: var(--muted); }
.premium-compare > div, .preview-free-paid > div { min-width: 0; }
.month-cover-character h1, .month-one-line h2, .weekly-now-grid strong { overflow-wrap: break-word; }
.reading-cast { flex-wrap: wrap; }
.reading-cast > div { min-width: 0; }

@media (max-width: 820px) {
  .result-summary ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-screen .profile-signal-map { margin-top: 34px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; line-height: 1.75; }
  .app-frame { width: 100%; }
  .topbar { gap: 10px; }
  .brand { min-width: 0; font-size: .95rem; letter-spacing: .045em; white-space: nowrap; }
  .world-nav { gap: 10px; }
  .world-nav .text-button { min-height: 44px; padding: 8px 0; font-size: .82rem; white-space: nowrap; }
  .screen { padding: 28px 18px 52px; }
  h1 { font-size: clamp(1.9rem,9.5vw,2.35rem); line-height: 1.38; letter-spacing: -.04em; }
  h2 { font-size: clamp(1.4rem,7vw,1.75rem); line-height: 1.45; }
  h3 { font-size: 1.05rem; line-height: 1.55; }
  .home-screen, .world-screen { padding-left: 0; padding-right: 0; }
  .home-copy h1 { font-size: clamp(1.7rem,7.2vw,1.9rem); line-height: 1.42; letter-spacing: -.055em; }
  .home-intro { line-height: 1.8; }
  .home-entry .primary { gap: 12px; }
  .home-proof { align-items: stretch; flex-direction: column; gap: 0; text-align: left; }
  .home-proof strong { margin-bottom: 7px; }
  .home-proof span { padding: 5px 0 5px 20px; position: relative; }
  .home-proof span::before, .home-proof span:nth-of-type(1)::before { content: "✓"; margin: 0; position: absolute; left: 0; color: var(--coral); font-weight: 950; }
  .monthly-return-head { display: grid; grid-template-columns: minmax(0,1fr) 72px; }
  .monthly-return-head h2 { margin-bottom: 8px; }
  .monthly-entry-art.normalized-art { align-self: start; }
  .type-result h1 { font-size: clamp(2rem,11vw,2.65rem); line-height: 1.25; overflow-wrap: anywhere; }
  .type-nickname { font-size: 1.05rem; line-height: 1.6; }
  .type-tags span { font-size: .8rem; }
  .result-summary { margin: 14px 0 36px; padding: 16px; }
  .result-summary ul { grid-template-columns: 1fr; }
  .result-summary li { padding-top: 8px; padding-bottom: 8px; }
  .character-moments, .signal-map { padding-left: 0; padding-right: 0; }
  .character-moments { padding-bottom: 34px; }
  .signal-map-head h2 br { display: none; }
  .result-guide { border-radius: 14px; }
  .result-guide-head { padding: 22px 20px 18px; }
  .result-action { padding: 22px 18px; }
  .world-grid .world-card strong { font-size: .95rem; line-height: 1.5; }
  .world-type-label { line-height: 1.6; }
  .month-purpose h1 { font-size: clamp(1.95rem,9vw,2.25rem); }
  .month-purpose > p:last-of-type { font-size: .98rem; }
  .weekly-album-head { align-items: flex-start; }
  .weekly-album-head > strong { font-size: 1.5rem; }
  .weekly-album-slots { gap: 7px; }
  .weekly-album-slot { min-height: 98px; padding: 10px; }
  .monthly-premium-offer, .month-book { padding: 24px 18px; }
  .premium-compare strong { line-height: 1.55; }
  .preview-scenes article { grid-template-columns: 28px minmax(72px,84px) minmax(0,1fr); }
  .account-shelves { gap: 10px; }
  .account-shelves > article { padding: 20px 18px; }
  .account-shelves h2 { margin-top: 13px; }
  .account-shelves p { font-size: .95rem; line-height: 1.75; }
  .reading-offer h2 br { display: none; }
  .owner-analytics { padding: 22px 18px; }
  .owner-entry, .analytics-guide { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; }
  .owner-entry .secondary, .analytics-guide .secondary { min-height: 52px; }
  .owner-analytics-head { display: grid; gap: 8px; }
  .owner-analytics-head > small { text-align: left; }
  .owner-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .owner-metrics article { padding: 14px; }
  .owner-metrics strong { font-size: 1.4rem; }
  .owner-version { display: grid; }
  .diagnosis-review-plan { padding: 22px 18px; }
  .diagnosis-review-plan dl div { grid-template-columns: 1fr; gap: 4px; }
  .offer-difference > div { padding: 16px 0; }
  .account-settings > summary { min-height: 72px; }
  .account-login-button { white-space: normal; }
  .site-footer { padding: 28px 18px 32px; }
  .site-footer nav { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .site-footer a { min-height: 30px; font-size: .9rem; }
}

@media (max-width: 360px) {
  .topbar { padding: 7px 10px; gap: 8px; }
  .brand { font-size: .86rem; }
  .world-nav { gap: 8px; }
  .world-nav .text-button { font-size: .76rem; }
  .home-copy h1 { font-size: 1.55rem; letter-spacing: -.06em; }
}

/* v64: a shorter monthly path, richer reading pages, and final mobile safeguards. */
.month-next { margin: 42px 0 30px; padding-top: 34px; border-top: 1px solid var(--line); }
.month-next-heading { max-width: 620px; margin-bottom: 20px; }
.month-next-heading h2 { margin-bottom: 6px; }
.month-next-heading > p:last-child { margin: 0; color: var(--muted); }
.month-next-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.month-next-card { display: flex; min-width: 0; flex-direction: column; padding: 22px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.month-next-card.is-free { background: #f1f8f5; border-color: #c9ddd5; }
.month-next-card.is-personal { background: #f6f4ff; border-color: #d9d3ed; }
.month-next-card.is-paid { color: #fff; background: #272144; border-color: #272144; }
.month-next-card > small { color: var(--violet); font-size: .76rem; font-weight: 900; letter-spacing: .04em; }
.month-next-card.is-paid > small { color: var(--yellow); }
.month-next-card h3 { margin: 10px 0 8px; font-size: 1.08rem; }
.month-next-card p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; line-height: 1.75; }
.month-next-card.is-paid p { color: #ddd9ed; }
.month-next-card .primary, .month-next-card .secondary { min-height: 52px; margin-top: auto; padding: 12px 13px; font-size: .9rem; }
.month-next-card.is-paid .primary { color: #272144; background: var(--yellow); box-shadow: none; }
.month-back { display: inline-flex; align-items: center; margin-bottom: 22px; }
.month-detail-intro { max-width: 650px; margin-bottom: 28px; }
.month-detail-intro h1 { margin-bottom: 12px; }
.month-detail-intro > p:last-child { color: var(--muted); font-size: 1.02rem; }
.month-detail-return { margin-top: 30px; }
.month-overview-screen .month-cover { margin-top: 0; }
.month-personalized-screen .current-signal { padding-top: 26px; }
.month-personalized-screen .month-section { margin-top: 28px; }
.month-personalized-screen .monthly-record-action { margin-bottom: 30px; }
.month-chapter p { max-width: 66ch; line-height: 1.9; }
.month-chapter h3 { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.month-toc a, .account-history-entry, .mood-choice, .weekly-album-slot { min-width: 0; max-width: 100%; }
.primary, .secondary, .text-button, .inline-link { max-width: 100%; white-space: normal; }
.screen { overflow-wrap: break-word; animation: none; }

@media (max-width: 820px) {
  .month-next-grid { grid-template-columns: 1fr; }
  .month-next-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(170px,220px); column-gap: 22px; }
  .month-next-card > small, .month-next-card h3, .month-next-card p { grid-column: 1; }
  .month-next-card .primary, .month-next-card .secondary { grid-column: 2; grid-row: 1 / 5; align-self: center; }
}

@media (max-width: 620px) {
  .screen { padding-right: 16px; padding-left: 16px; overflow-x: clip; }
  .month-next { margin-top: 34px; padding-top: 28px; }
  .month-next-heading { margin-bottom: 16px; }
  .month-next-grid { gap: 10px; }
  .month-next-card { display: flex; padding: 20px 17px; }
  .month-next-card h3 { font-size: 1.04rem; }
  .month-next-card p { font-size: .92rem; }
  .month-detail-intro h1 br { display: none; }
  .month-detail-intro > p:last-child { font-size: .96rem; line-height: 1.75; }
  .month-cover-character { grid-template-columns: 84px minmax(0,1fr); }
  .month-cover-art.normalized-art { width: 84px; height: 84px; }
  .month-cover-character h1 { font-size: 1.65rem; line-height: 1.35; }
  .month-one-line h2 { font-size: 1.35rem; }
  .month-pulses { grid-template-columns: 1fr; }
  .month-chapter { margin: 22px 0; padding: 22px 17px; border-radius: 16px; }
  .month-chapter h2 { font-size: 1.45rem; }
  .month-chapter h3 { font-size: 1.03rem; }
  .month-toc a { padding: 12px 13px; line-height: 1.55; }
  .weekly-card-cover { align-items: flex-start; }
  .weekly-now-art.normalized-art { width: 70px; height: 70px; flex: 0 0 70px; }
  .account-history-entry { grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
  .account-history-entry strong { line-height: 1.5; }
}

@media (max-width: 360px) {
  .brand small { display: none; }
  .month-cover-character { grid-template-columns: 72px minmax(0,1fr); }
  .month-cover-art.normalized-art { width: 72px; height: 72px; }
  .weekly-album-head { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .weekly-album-slots { grid-template-columns: 1fr; }
  .weekly-album-slot { min-height: 76px; }
}