:root {
--ink:#48494a;
--muted:#8b8c8e;
--cream:#f7f5f3;
--glass:rgba(255,255,255,.46);
--shadow:0 18px 42px rgba(110,103,99,.09),inset 0 1px 0 rgba(255,255,255,.9);
--ease-out:cubic-bezier(.23,1,.32,1);
--ease-in-out:cubic-bezier(.77,0,.175,1);
--serif:'Noto Serif SC','Songti SC','STSong',serif}
* {
box-sizing:border-box}
html,body {
margin:0;
min-height:100%;
background:var(--cream);
color:var(--ink);
font-family:var(--serif)}
body {
overflow-x:hidden}
button,input,textarea {
font:inherit;
color:inherit}
button {
border:0;
background:none;
cursor:pointer}
.app-shell {
min-height:100svh;
position:relative;
overflow:hidden;
background:radial-gradient(circle at 16% 27%,rgba(229,238,241,.76),transparent 32%),radial-gradient(circle at 87% 53%,rgba(248,231,223,.8),transparent 38%),linear-gradient(135deg,#f5f5f3 0%,#faf3ee 100%)}
.app-shell:before {
content:"";
position:fixed;
inset:-18%;
pointer-events:none;
opacity:.23;
background:radial-gradient(ellipse at 48% 48%,transparent 35%,rgba(255,255,255,.8) 100%);
filter:blur(25px)}
.topbar {
position:fixed;
z-index:20;
top:max(20px,env(safe-area-inset-top));
left:22px;
right:22px;
height:58px;
border-radius:40px;
background:rgba(255,255,255,.4);
box-shadow:var(--shadow);
backdrop-filter:blur(20px);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 17px}
.topbar .tools {
display:flex;
gap:10px}
.icon-btn {
width:34px;
height:38px;
display:grid;
place-items:center;
opacity:.85}
.icon-btn svg {
width:24px;
height:24px;
stroke:currentColor;
stroke-width:1.6;
fill:none;
stroke-linecap:round;
stroke-linejoin:round}
.back svg {
width:29px;
height:29px}
.page {
position:relative;
z-index:1;
max-width:720px;
margin:0 auto;
padding:108px 24px 40px;
min-height:100svh;
animation:pageIn 220ms var(--ease-out) both}
.page.no-page-enter {
animation:none}
.page.center {
display:flex;
flex-direction:column;
align-items:center}
.page-title {
font-size:clamp(32px,8vw,52px);
font-weight:400;
letter-spacing:.16em;
text-align:center;
margin:30px 0 42px}
.page-subtitle {
font-size:24px;
letter-spacing:.08em;
text-align:center;
margin:0 0 42px}
.eyebrow {
font-size:15px;
color:var(--muted);
letter-spacing:.18em;
text-align:center}
.hint {
text-align:center;
color:#858585;
font-size:14px;
letter-spacing:.08em}
.glass {
background:var(--glass);
border:1px solid rgba(255,255,255,.43);
box-shadow:var(--shadow);
backdrop-filter:blur(22px)}
.bubble {
--size:150px;
--bubble-tint:rgba(226,237,242,.32);
--bubble-warm:rgba(247,225,214,.24);
--bubble-shadow:rgba(123,139,147,.11);
position:relative;
width:var(--size);
height:calc(var(--size)*.86);
border-radius:49% 51% 54% 46% / 52% 47% 53% 48%;
display:grid;
place-items:center;
text-align:center;
isolation:isolate;
background:radial-gradient(ellipse at 40% 34%,rgba(255,255,255,.66) 0%,rgba(255,255,255,.42) 29%,rgba(255,255,255,.18) 62%,rgba(255,255,255,.04) 100%),radial-gradient(circle at 72% 70%,var(--bubble-tint),transparent 58%),radial-gradient(circle at 24% 76%,var(--bubble-warm),transparent 54%);
box-shadow:0 24px 52px var(--bubble-shadow),0 8px 25px rgba(115,119,121,.05),inset 8px 7px 24px rgba(255,255,255,.25),inset -10px -8px 28px rgba(217,230,236,.12);
backdrop-filter:blur(10px) saturate(.88);
-webkit-backdrop-filter:blur(10px) saturate(.88);
transition:transform 160ms var(--ease-out),opacity 200ms var(--ease-out);
animation:float var(--dur,8s) ease-in-out var(--delay,0s) infinite alternate}
.bubble:active {
transform:scale(.97)}
.bubble.selected {
filter:none;
box-shadow:0 28px 58px var(--bubble-shadow),0 12px 28px rgba(111,116,120,.09),inset 10px 9px 28px rgba(255,255,255,.4),inset -11px -9px 30px var(--bubble-tint)}
.bubble span {
position:relative;
z-index:2;
font-size:20px;
letter-spacing:.08em}
.bubble:before {
content:"";
position:absolute;
z-index:0;
inset:11%;
border-radius:inherit;
background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.5),transparent 47%),radial-gradient(circle at 67% 70%,var(--bubble-tint),transparent 66%);
filter:blur(13px);
opacity:.54;
transition:opacity 200ms var(--ease-out)}
.bubble.selected:before {
opacity:.94}
.bubble.hero {
--size:310px;
animation:breath 7s ease-in-out infinite}
.bubble.hero span {
font-size:54px;
letter-spacing:.18em}
.bubble.big {
--size:330px}
.bubble.big span {
font-size:31px}
.bubble:after {
content:"";
position:absolute;
z-index:1;
width:38%;
height:22%;
top:8%;
left:13%;
border-radius:50%;
background:radial-gradient(ellipse,rgba(255,255,255,.38),rgba(255,255,255,0) 72%);
filter:blur(10px);
opacity:.62;
transform:rotate(-16deg)}
.bubble-float {
width:100%;
height:100%;
display:grid;
place-items:center;
animation:float var(--dur,8s) var(--ease-in-out) var(--delay,0s) infinite alternate}
.bubble-float>.bubble {
animation:none}
.bubble-float:nth-child(4n+1)>.bubble {
--bubble-tint:rgba(221,236,245,.4);
--bubble-warm:rgba(247,231,220,.18);
--bubble-shadow:rgba(106,137,153,.13);
border-radius:47% 53% 49% 51% / 54% 46% 55% 45%}
.bubble-float:nth-child(4n+2)>.bubble {
--bubble-tint:rgba(231,238,242,.28);
--bubble-warm:rgba(249,219,201,.35);
--bubble-shadow:rgba(156,124,108,.11);
border-radius:53% 47% 55% 45% / 47% 53% 46% 54%}
.bubble-float:nth-child(4n+3)>.bubble {
--bubble-tint:rgba(215,232,242,.44);
--bubble-warm:rgba(244,232,224,.2);
--bubble-shadow:rgba(102,134,151,.14);
border-radius:50% 50% 45% 55% / 52% 48% 56% 44%}
.bubble-float:nth-child(4n)>.bubble {
--bubble-tint:rgba(232,226,239,.28);
--bubble-warm:rgba(248,224,207,.3);
--bubble-shadow:rgba(133,124,146,.1);
border-radius:55% 45% 50% 50% / 46% 54% 48% 52%}
.home .hero-wrap {
margin:70px auto 22px;
position:relative}
.home .hero-wrap:before {
content:"";
position:absolute;
inset:12% -8%;
border-radius:50%;
background:rgba(247,225,214,.32);
filter:blur(30px)}
.home .page-subtitle {
margin-bottom:64px}
.entry-list {
width:min(100%,430px);
display:grid;
gap:18px}
.pill {
min-height:72px;
padding:12px 28px;
border-radius:44px;
background:rgba(255,255,255,.42);
box-shadow:var(--shadow);
backdrop-filter:blur(20px);
font-size:24px;
letter-spacing:.1em;
transition:transform 160ms var(--ease-out),background-color 200ms ease}
.pill:active {
transform:scale(.97)}
.pill.primary {
background:rgba(255,255,255,.58)}
.floaters {
position:absolute;
inset:110px 0 0;
pointer-events:none;
overflow:hidden}
.floater {
position:absolute;
width:42px;
height:36px;
border-radius:50%;
background:rgba(255,255,255,.34);
box-shadow:inset 4px 3px 7px rgba(255,255,255,.6),0 10px 20px rgba(160,150,146,.08);
animation:float var(--dur) ease-in-out infinite alternate}
.f1 {
left:12%;
top:18%;
--dur:7s}
.f2 {
right:7%;
top:43%;
width:64px;
height:56px;
--dur:9s}
.f3 {
left:8%;
top:64%;
width:28px;
height:24px;
--dur:6s}
.f4 {
right:18%;
top:72%;
width:34px;
height:30px;
--dur:8s}
.section-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:26px 14px;
margin:20px 0 34px}
.section-grid .bubble:nth-child(even) {
margin-top:40px}
.core .bubble,.methods .bubble {
--size:180px;
width:100%;
height:150px}
.methods .bubble {
--size:168px;
height:140px}
.bubble-field {
position:relative;
min-height:600px}
.core .bubble-field,.methods .bubble-field {
display:grid;
grid-template-columns:1fr 1fr;
gap:25px 14px}
.detail-bubble {
margin:18px auto 44px}
.reading-card {
padding:28px 25px;
border-radius:32px;
font-size:19px;
line-height:2.05;
letter-spacing:.05em;
white-space:pre-line}
.reading-card p {
margin:0}
.reading-card p+p {
margin-top:20px;
padding-top:19px;
border-top:1px solid rgba(80,80,80,.09)}
.section-entry {
display:grid;
gap:18px;
margin:40px auto;
max-width:430px;
width:100%}
.section-entry .pill {
text-align:left;
padding-left:34px}
.entry-note {
text-align:center;
color:var(--muted);
font-size:15px;
line-height:1.9;
margin-top:auto;
padding-top:30px}
.input-wrap {
width:100%;
margin:44px 0 26px;
position:relative}
.input-wrap:before {
content:'我想，';
position:absolute;
left:26px;
top:23px;
color:var(--ink);
font-size:21px}
.target-input {
width:100%;
min-height:155px;
padding:25px 25px 25px 92px;
resize:none;
border:0;
outline:0;
border-radius:30px;
background:rgba(255,255,255,.43);
box-shadow:var(--shadow);
backdrop-filter:blur(20px);
font-size:21px;
line-height:1.8}
.target-input::placeholder {
color:#a6a4a1}
.confirm {
width:100%;
margin-top:14px}
.disabled {
opacity:.4;
pointer-events:none}
.explore .page-title {
margin-bottom:22px}
.explore-lead {
text-align:center;
font-size:23px;
line-height:1.8;
margin:0}
.explore-sub {
text-align:center;
color:#8c8b8a;
font-size:15px;
margin:5px 0 40px}
.feeling-group {
margin:28px 0}
.group-title {
font-size:18px;
letter-spacing:.08em;
margin-bottom:18px}
.feeling-row {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px}
.feeling-row .bubble {
--size:110px;
width:100%;
height:92px}
.feeling-row .bubble span {
font-size:16px}
.selection-footer {
position:sticky;
bottom:18px;
margin-top:36px}
.selection-footer .pill {
width:100%}
.desire-list {
display:grid;
gap:22px;
width:100%;
margin:50px 0}
.desire-list .bubble {
--size:205px;
width:100%;
height:148px}
.desire-list .bubble span {
font-size:22px}
.method-list {
display:grid;
gap:19px;
width:100%;
margin:30px 0}
.method-item {
display:flex;
align-items:center;
gap:23px;
min-height:106px;
padding:14px;
border-radius:62px;
background:rgba(255,255,255,.35);
box-shadow:var(--shadow);
text-align:left}
.method-item .bubble {
--size:90px;
flex:0 0 90px;
height:78px}
.method-copy {
font-size:21px;
letter-spacing:.08em}
.method-copy small {
display:block;
color:var(--muted);
font-size:13px;
letter-spacing:.04em;
margin-top:8px}
.practice .page-title {
margin-bottom:15px}
.practice-visual {
margin:45px auto 50px;
position:relative;
display:grid;
place-items:center}
.practice-visual .bubble.hero {
--size:350px}
.practice-visual .bubble.hero span {
font-size:28px;
letter-spacing:.08em}
.timer {
position:absolute;
text-align:center;
top:53%;
transform:translateY(-50%)}
.timer .phase {
font-size:23px;
margin-bottom:10px}
.timer .digits {
font-family:Georgia,serif;
font-size:60px;
letter-spacing:.08em}
.practice-guide {
text-align:center;
color:#6e6d6c;
font-size:17px;
margin:0 auto 36px}
.finish {
width:min(100%,360px);
margin:auto}
.feedback-options {
display:grid;
gap:16px;
width:100%;
margin-top:40px}
.feedback-options .pill {
font-size:21px}
.diary .page-title {
margin-bottom:36px}
.stats {
display:grid;
grid-template-columns:1fr 1fr;
gap:14px}
.stat {
border-radius:27px;
padding:20px 10px;
text-align:center}
.stat label {
display:block;
font-size:16px;
margin-bottom:8px}
.stat strong {
font-family:Georgia,serif;
font-size:48px;
font-weight:400}
.stat em {
font-style:normal;
font-size:15px}
.diary-heading {
font-size:23px;
margin:45px 0 20px}
.goal-card {
padding:22px 18px;
border-radius:30px;
margin-bottom:18px}
.goal-title {
font-size:21px;
line-height:1.6;
margin-bottom:18px}
.progress {
height:45px;
padding:4px;
display:flex;
border-radius:30px;
background:rgba(244,240,237,.55);
box-shadow:inset 0 3px 7px rgba(120,110,104,.06)}
.progress button {
flex:1;
border-radius:24px;
font-size:14px;
color:#777}
.progress button.active {
background:rgba(255,255,255,.76);
box-shadow:0 5px 15px rgba(130,117,110,.08);
color:var(--ink)}
.goal-meta {
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
color:#757574;
font-size:14px;
margin-top:20px}
.goal-actions {
display:flex;
gap:14px;
align-items:center}
.text-button {
padding:0;
text-decoration:underline;
text-underline-offset:5px;
font-size:14px;
min-height:auto;
box-shadow:none;
background:none}
.modal {
position:fixed;
inset:0;
z-index:40;
display:grid;
place-items:center;
padding:25px;
background:rgba(232,229,226,.3);
backdrop-filter:blur(12px)}
.modal-card {
width:min(100%,430px);
padding:28px;
border-radius:32px;
text-align:center;
background:rgba(255,255,255,.7);
box-shadow:0 22px 60px rgba(100,96,92,.14)}
.explain-card {
position:absolute;
z-index:5;
width:min(72vw,300px);
padding:19px 20px;
border-radius:24px;
background:rgba(255,255,255,.62);
box-shadow:var(--shadow);
backdrop-filter:blur(20px);
font-size:15px;
line-height:1.9;
opacity:0;
transform:translateY(8px) scale(.97);
transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.explain-card.is-visible {
opacity:1;
transform:translateY(0) scale(1)}
.toast {
position:fixed;
z-index:50;
bottom:26px;
left:50%;
transform:translate(-50%,20px);
opacity:0;
pointer-events:none;
padding:12px 20px;
border-radius:25px;
background:rgba(76,75,75,.83);
color:#fff;
font-size:14px;
transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.toast.show {
opacity:1;
transform:translate(-50%,0)}
.burst {
position:fixed;
z-index:2;
width:9px;
height:9px;
border-radius:50%;
background:rgba(255,255,255,.75);
pointer-events:none;
animation:burst 560ms var(--ease-out) forwards}
@keyframes float {
to {
transform:translate(9px,-14px) rotate(3deg)}
}
@keyframes breath {
0%,100% {
transform:scale(1) rotate(-1deg)}
50% {
transform:scale(1.035) rotate(2deg)}
}
@keyframes pageIn {
from {
opacity:0;
transform:translateY(8px);
}
to {
opacity:1;
transform:none}
}
@keyframes fadeUp {
from {
opacity:0;
transform:translateY(8px)}
to {
opacity:1;
transform:none}
}
@keyframes burst {
to {
transform:translate(var(--dx),var(--dy)) scale(.1);
opacity:0}
}
@media (min-width:700px) {
.page {
padding-left:60px;
padding-right:60px}
.topbar {
left:32px;
right:32px}
.core .bubble,.methods .bubble {
height:180px}
.core .bubble-field,.methods .bubble-field {
gap:34px}
}
/* Mobile composition: keep the full interaction within the viewport. */
@media (max-width: 699px) {
  .app-shell {
    min-height: 100svh;
    height: 100svh;
  }

  .page {
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    padding: 96px 22px max(24px, env(safe-area-inset-bottom));
  }

  .page-title {
    margin: 16px 0 26px;
    font-size: clamp(28px, 7.5vw, 34px);
    letter-spacing: .1em;
  }

  .pill {
    min-height: 58px;
    font-size: 20px;
  }

  .bubble.hero {
    --size: min(74vw, 292px);
  }

  .bubble.hero span {
    font-size: 46px;
  }

  .reading-card {
    font-size: 17px;
    line-height: 1.88;
  }

  .explore .page-title {
    margin-bottom: 12px;
  }

  .explore-lead {
    font-size: 20px;
    line-height: 1.55;
  }

  .explore-sub {
    margin-bottom: 24px;
    font-size: 13px;
  }

  .feeling-group {
    margin: 18px 0;
  }

  .group-title {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .feeling-row {
    gap: 9px;
  }

  .feeling-row .bubble {
    --size: 96px;
    height: 82px;
  }

  .feeling-row .bubble span {
    font-size: 14px;
  }

  .explore > .hint {
    margin: 14px 0 0;
    font-size: 12px;
  }

  .selection-footer {
    bottom: 10px;
    margin-top: 18px;
  }

  .practice-guide {
    max-width: 320px;
    font-size: 15px;
    line-height: 1.65;
  }

  .practice-visual {
    margin: 26px auto 30px;
  }

  .practice-visual .bubble.hero {
    --size: min(76vw, 310px);
  }

  .timer .phase {
    font-size: 19px;
  }

  .timer .digits {
    font-size: 48px;
  }
}

/* Swipeable reading cards for release principles and methods. */
.detail-carousel-page {
  max-width: none;
  height: 100dvh;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.detail-carousel-page .page-title {
  padding: 0 var(--page-gutter);
  margin: 16px 0 18px;
}

.detail-carousel {
  width: 100%;
  overflow: hidden;
}

.detail-track {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 0 clamp(24px, 8vw, 64px) 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(24px, 8vw, 64px);
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.detail-track::-webkit-scrollbar {
  display: none;
}

.detail-slide {
  flex: 0 0 min(84vw, 520px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: .52;
  transform: scale(.975);
  outline: 0;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.detail-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

.detail-slide-title {
  min-height: 42px;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(24px, 6.5vw, 34px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .09em;
  text-align: center;
  text-wrap: balance;
}

.detail-card {
  height: clamp(430px, calc(100dvh - 255px), 650px);
  padding: 34px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 38px;
  background: rgba(255,255,255,.4);
  box-shadow: 0 24px 54px rgba(105,104,102,.09), inset 0 1px 0 rgba(255,255,255,.78);
  scrollbar-width: none;
}

.detail-card::-webkit-scrollbar {
  display: none;
}

.detail-card-copy {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #5d5e5f;
  font-size: clamp(16px, 4.4vw, 19px);
  line-height: 2;
  letter-spacing: .035em;
  text-align: center;
}

.detail-card-copy p {
  margin: 0;
}

.detail-card-copy p + p {
  margin-top: 25px;
}

.detail-pagination {
  height: 30px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: .08em;
}

.detail-pagination i {
  width: 24px;
  height: 1px;
  background: rgba(72,73,74,.24);
}

@media (max-width: 699px) {
  .detail-carousel-page .page-title {
    margin-top: 12px;
    margin-bottom: 14px;
  }

  .detail-track {
    gap: 12px;
  }

  .detail-slide {
    flex-basis: 84vw;
  }

  .detail-slide-title {
    min-height: 38px;
    margin-bottom: 11px;
  }

  .detail-card {
    height: clamp(420px, calc(100dvh - 238px), 610px);
    padding: 30px 22px;
    border-radius: 34px;
  }

  .detail-pagination {
    margin-top: 7px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .detail-slide:not(.is-current):hover {
    opacity: .72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-slide {
    transform: none;
    transition: opacity 160ms var(--ease-out);
  }
}

@media (hover: hover) and (pointer: fine) {
  .bubble:hover {
    filter: brightness(1.04);
    transform: scale(1.04) rotate(1deg);
  }

  .pill:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.64);
  }
}

@media (max-width: 699px) {
  .diary,
  .method-detail,
  .core-detail {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Final mobile pass: stable geometry, quieter type scale, and restrained motion. */
@media (max-width: 699px) {
  :root {
    --serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  }

  .page {
    padding-top: 92px;
    padding-left: 20px;
    padding-right: 20px;
    animation: pageIn 220ms var(--ease-out) both;
  }

  .page-title {
    margin: 14px 0 22px;
    font-size: clamp(28px, 7.8vw, 34px);
    line-height: 1.25;
    letter-spacing: .1em;
  }

  .page-subtitle {
    margin-bottom: 42px;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: .08em;
  }

  .hint,
  .eyebrow {
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .06em;
  }

  .bubble,
  .pill {
    -webkit-tap-highlight-color: transparent;
  }

  .bubble {
    transition: transform 160ms var(--ease-out), opacity 200ms var(--ease-out);
  }

  .bubble:active,
  .pill:active {
    transform: scale(.975);
  }

  .bubble.selected {
    transform: translateY(-2px) scale(1.025);
    filter: none;
    box-shadow: 0 28px 58px var(--bubble-shadow), 0 12px 28px rgba(111,116,120,.09), inset 10px 9px 28px rgba(255,255,255,.42), inset -11px -9px 30px var(--bubble-tint);
  }

  .bubble span {
    font-size: 18px;
    line-height: 1.25;
  }

  .pill {
    min-height: 58px;
    padding: 10px 24px;
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: .08em;
  }

  .home .hero-wrap {
    margin-top: 48px;
    margin-bottom: 18px;
  }

  .home .bubble.hero {
    --size: min(62vw, 244px);
  }

  .home .bubble.hero span {
    font-size: 43px;
  }

  .entry-list {
    gap: 12px;
    width: min(100%, 330px);
  }

  .explore .page-title {
    margin-bottom: 10px;
  }

  .explore-lead {
    font-size: 18px;
    line-height: 1.55;
  }

  .explore-sub {
    margin: 3px 0 20px;
    font-size: 12px;
  }

  .feeling-group {
    margin: 15px 0;
  }

  .group-title {
    margin-bottom: 9px;
    font-size: 15px;
    line-height: 1.4;
  }

  .feeling-row {
    gap: 7px;
  }

  .feeling-row .bubble {
    --size: 92px;
    width: min(100%, 92px);
    height: 86px;
  }

  .feeling-row .bubble span {
    font-size: 13px;
  }

  .explore > .hint {
    margin: 9px 0 0;
    font-size: 11px;
  }

  .selection-footer {
    bottom: 8px;
    margin-top: 13px;
  }

  .selection-footer .pill {
    min-height: 52px;
  }

  .desire-list {
    gap: 13px;
    margin: 29px 0 25px;
  }

  .desire-list .bubble {
    --size: min(58vw, 200px);
    height: 124px;
  }

  .desire-list .bubble span {
    font-size: 19px;
  }

  .practice .page-title {
    margin-bottom: 8px;
  }

  .practice-guide {
    max-width: 318px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.62;
  }

  .practice-visual {
    margin: 18px auto 24px;
  }

  .practice-visual .bubble.hero {
    --size: min(70vw, 278px);
  }

  .practice-visual .bubble.hero span {
    font-size: 24px;
  }

  .timer .phase {
    margin-bottom: 6px;
    font-size: 17px;
  }

  .timer .digits {
    font-size: 44px;
  }

  .reading-card {
    padding: 25px 21px;
    border-radius: 26px;
    font-size: 16px;
    line-height: 1.82;
    letter-spacing: .035em;
  }

  .reading-card p + p {
    margin-top: 15px;
    padding-top: 14px;
  }

  .core-detail .page-title,
  .method-detail .page-title {
    margin-bottom: 18px;
  }

  .core-detail .reading-card,
  .method-detail .reading-card {
    min-height: 0;
  }

  .diary .page-title {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-float,
  .floater,
  .bubble.hero {
    animation: none !important;
  }

  .page {
    animation: fadeOnly 160ms var(--ease-out) both !important;
  }

  .page.no-page-enter {
    animation: none !important;
  }

  .bubble,
  .pill,
  .toast,
  .explain-card {
    transition: opacity 160ms ease, background-color 160ms ease !important;
  }

  .burst {
    display: none;
  }
}

/* Focused detail composition based on the approved mobile reference. */
.core-detail,
.method-detail {
  max-width: 620px;
}

.core-detail .page-title,
.method-detail .page-title {
  margin-bottom: 12px;
}

.core-detail .detail-stage,
.method-detail .detail-stage {
  width: 100%;
  min-height: 360px;
  margin: 0 auto 12px;
}

.core-detail .detail-stage::before,
.method-detail .detail-stage::before {
  inset: 20% 23% 12%;
  background: rgba(219, 233, 240, .22);
  filter: blur(42px);
}

.core-detail .detail-focus,
.method-detail .detail-focus {
  top: 48%;
  width: min(47vw, 230px);
  height: min(43vw, 210px);
  z-index: 3;
}

.core-detail .detail-focus span,
.method-detail .detail-focus span {
  max-width: 80%;
  font-size: clamp(23px, 6vw, 32px);
  line-height: 1.35;
}

.core-detail .detail-side,
.method-detail .detail-side {
  inset: 0;
  width: 100%;
  display: block;
  pointer-events: none;
}

.core-detail .detail-side .bubble-float,
.method-detail .detail-side .bubble-float {
  position: absolute !important;
  width: 92px !important;
  height: 82px !important;
  margin: 0 !important;
  pointer-events: auto;
}

.core-detail .detail-side .bubble,
.method-detail .detail-side .bubble {
  width: 92px !important;
  height: 82px !important;
  opacity: .76;
}

.core-detail .detail-side .bubble span,
.method-detail .detail-side .bubble span {
  max-width: 74px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .04em;
}

.detail-side-left .bubble-float:nth-child(1) { left: 0; top: 16%; }
.detail-side-left .bubble-float:nth-child(2) { left: 3%; bottom: 7%; }
.detail-side-right .bubble-float:nth-child(1) { right: 0; top: 3%; }
.detail-side-right .bubble-float:nth-child(2) { right: -1%; top: 38%; }
.detail-side-right .bubble-float:nth-child(3) { right: 1%; bottom: 1%; }

.method-detail .detail-side-right .bubble-float:nth-child(2) {
  top: auto;
  bottom: 9%;
}

.core-detail .reading-card,
.method-detail .reading-card {
  width: 100%;
  margin: 0 auto;
  padding: 38px 30px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 40px;
  background: rgba(255,255,255,.38);
  text-align: center;
  box-shadow: 0 24px 48px rgba(109,108,106,.08), inset 0 1px 0 rgba(255,255,255,.72);
}

.core-detail .reading-card p + p,
.method-detail .reading-card p + p {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 699px) {
  .core-detail,
  .method-detail {
    padding-left: 16px;
    padding-right: 16px;
  }

  .core-detail .page-title,
  .method-detail .page-title {
    margin-top: 13px;
    margin-bottom: 4px;
  }

  .core-detail .detail-stage,
  .method-detail .detail-stage {
    width: calc(100% + 4px);
    min-height: 324px;
    margin-left: -2px;
    margin-bottom: 8px;
  }

  .core-detail .detail-focus,
  .method-detail .detail-focus {
    top: 47%;
    width: min(51vw, 194px);
    height: min(47vw, 180px);
  }

  .core-detail .detail-side .bubble-float,
  .method-detail .detail-side .bubble-float,
  .core-detail .detail-side .bubble,
  .method-detail .detail-side .bubble {
    width: 78px !important;
    height: 70px !important;
  }

  .core-detail .detail-side .bubble span,
  .method-detail .detail-side .bubble span {
    max-width: 62px;
    font-size: 12px;
    line-height: 1.4;
  }

  .detail-side-left .bubble-float:nth-child(1) { left: -3px; top: 17%; }
  .detail-side-left .bubble-float:nth-child(2) { left: 2px; bottom: 8%; }
  .detail-side-right .bubble-float:nth-child(1) { right: -3px; top: 4%; }
  .detail-side-right .bubble-float:nth-child(2) { right: -6px; top: 39%; }
  .detail-side-right .bubble-float:nth-child(3) { right: -1px; bottom: 2%; }

  .method-detail .detail-side-right .bubble-float:nth-child(2) {
    top: auto;
    bottom: 10%;
  }

  .core-detail .reading-card,
  .method-detail .reading-card {
    padding: 34px 23px;
    border-radius: 34px;
    font-size: 16px;
    line-height: 2;
  }
}

/* The carousel replaces the legacy bubble detail composition. */
section.detail-carousel-page.core-detail,
section.detail-carousel-page.method-detail {
  max-width: none;
  height: 100dvh;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.detail-carousel-page.core-detail .page-title,
.detail-carousel-page.method-detail .page-title {
  margin: 16px 0 18px;
  padding: 0 var(--page-gutter);
}

@media (max-width: 699px) {
  .detail-carousel-page.core-detail .page-title,
  .detail-carousel-page.method-detail .page-title {
    margin-top: 12px;
    margin-bottom: 14px;
  }
}

/* Final detail-carousel state: centered card is prominent, side cards stay visible. */
.detail-carousel-page.core-detail .detail-slide,
.detail-carousel-page.method-detail .detail-slide {
  height: 100%;
}

.detail-carousel-page.core-detail .detail-slide:not(.is-current),
.detail-carousel-page.method-detail .detail-slide:not(.is-current) {
  opacity: .52;
  transform: scale(.94);
}

.detail-carousel-page.core-detail .detail-slide.is-current,
.detail-carousel-page.method-detail .detail-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

/* Let the carousel, not the reading card, own horizontal touch gestures. */
.detail-carousel-page.core-detail .detail-track,
.detail-carousel-page.method-detail .detail-track {
  touch-action: pan-x;
  cursor: grab;
}

.detail-carousel-page.core-detail .detail-track:active,
.detail-carousel-page.method-detail .detail-track:active {
  cursor: grabbing;
}

.detail-carousel-page.core-detail .detail-card,
.detail-carousel-page.method-detail .detail-card {
  pointer-events: none;
}

@media (max-width: 699px) {
  .detail-carousel-page.core-detail .detail-carousel,
  .detail-carousel-page.method-detail .detail-carousel {
    inset: 164px 0 40px;
  }
}

/* Let the carousel, not the reading card, own horizontal touch gestures. */
.detail-carousel-page.core-detail .detail-track,
.detail-carousel-page.method-detail .detail-track {
  touch-action: pan-x;
  cursor: grab;
}

.detail-carousel-page.core-detail .detail-track:active,
.detail-carousel-page.method-detail .detail-track:active {
  cursor: grabbing;
}

.detail-carousel-page.core-detail .detail-card,
.detail-carousel-page.method-detail .detail-card {
  pointer-events: none;
}

@media (max-width: 699px) {
  .detail-carousel-page.core-detail .detail-carousel,
  .detail-carousel-page.method-detail .detail-carousel {
    inset: 164px 0 40px;
  }
}

/* Keep the direct card carousel as the final detail-page composition. */
.detail-carousel-page.core-detail .detail-slide,
.detail-carousel-page.method-detail .detail-slide {
  height: 100%;
}

.detail-carousel-page.core-detail .detail-slide:not(.is-current),
.detail-carousel-page.method-detail .detail-slide:not(.is-current) {
  opacity: .52;
  transform: scale(.94);
}

.detail-carousel-page.core-detail .detail-slide.is-current,
.detail-carousel-page.method-detail .detail-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

/* Final carousel tuning: larger side peeks and whole-content swipe area. */
.detail-carousel-page.core-detail .detail-swipe-hint,
.detail-carousel-page.method-detail .detail-swipe-hint {
  position: absolute;
  z-index: 2;
  top: 96px;
  left: 0;
  right: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .16em;
  text-align: center;
  pointer-events: none;
}

.detail-carousel-page.core-detail .detail-carousel,
.detail-carousel-page.method-detail .detail-carousel {
  position: absolute;
  inset: 130px 0 44px;
  height: auto;
}

.detail-carousel-page.core-detail .detail-track,
.detail-carousel-page.method-detail .detail-track {
  height: 100%;
  gap: 14px;
  padding-inline: clamp(28px, 10vw, 76px);
  scroll-padding-inline: clamp(28px, 10vw, 76px);
}

.detail-carousel-page.core-detail .detail-slide,
.detail-carousel-page.method-detail .detail-slide {
  flex-basis: min(76vw, 520px);
}

.detail-carousel-page.core-detail .detail-slide-title,
.detail-carousel-page.method-detail .detail-slide-title {
  min-height: 0;
  margin: 0 0 24px;
  font-size: clamp(24px, 6.5vw, 34px);
}

.detail-carousel-page.core-detail .detail-card,
.detail-carousel-page.method-detail .detail-card {
  height: calc(100% - 58px);
  min-height: 0;
  padding: 28px 25px;
}

.detail-carousel-page.core-detail .detail-card-copy,
.detail-carousel-page.method-detail .detail-card-copy {
  min-height: 0;
  display: block;
  color: var(--ink);
  font-size: 19px;
  line-height: 2.05;
  letter-spacing: .05em;
}

.detail-carousel-page.core-detail .detail-card-copy p + p,
.detail-carousel-page.method-detail .detail-card-copy p + p {
  margin-top: 20px;
  padding-top: 19px;
  border-top: 1px solid rgba(80,80,80,.09);
}

.detail-carousel-page.core-detail .detail-pagination,
.detail-carousel-page.method-detail .detail-pagination {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 0;
  margin: 0;
}

@media (max-width: 699px) {
  .detail-carousel-page.core-detail .detail-swipe-hint,
  .detail-carousel-page.method-detail .detail-swipe-hint {
    top: 88px;
  }

  .detail-carousel-page.core-detail .detail-carousel,
  .detail-carousel-page.method-detail .detail-carousel {
    inset: 122px 0 40px;
  }

  .detail-carousel-page.core-detail .detail-track,
  .detail-carousel-page.method-detail .detail-track {
    gap: 12px;
    padding-inline: 30px;
    scroll-padding-inline: 30px;
  }

  .detail-carousel-page.core-detail .detail-slide,
  .detail-carousel-page.method-detail .detail-slide {
    flex-basis: 76vw;
  }

  .detail-carousel-page.core-detail .detail-slide-title,
  .detail-carousel-page.method-detail .detail-slide-title {
    margin-bottom: 16px;
    font-size: clamp(23px, 6.2vw, 30px);
  }

  .detail-carousel-page.core-detail .detail-card,
  .detail-carousel-page.method-detail .detail-card {
    height: calc(100% - 50px);
    padding: 28px 20px;
    border-radius: 34px;
  }

  .detail-carousel-page.core-detail .detail-card-copy,
  .detail-carousel-page.method-detail .detail-card-copy {
    font-size: 17px;
    line-height: 1.88;
  }

  .detail-carousel-page.core-detail .detail-card-copy p + p,
  .detail-carousel-page.method-detail .detail-card-copy p + p {
    margin-top: 20px;
    padding-top: 19px;
  }
}

/* Final mobile polish: quiet material, stable composition, and interruptible detail motion. */
:root {
  --page-gutter: clamp(18px, 5vw, 34px);
  --soft-ease: cubic-bezier(.23, 1, .32, 1);
}

body {
  font-family: 'Songti SC', 'STSong', 'Noto Serif SC', serif;
}

.app-shell {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 18% 34%, rgba(226, 237, 243, .42), transparent 39%),
    radial-gradient(ellipse at 84% 61%, rgba(248, 228, 217, .44), transparent 42%),
    linear-gradient(145deg, #f8f7f5 0%, #fbf5f1 52%, #f7f8f8 100%);
}

.page {
  min-height: 100dvh;
  padding: 96px var(--page-gutter) 28px;
}

.page-title {
  margin: 24px 0 30px;
  font-size: clamp(28px, 7.8vw, 48px);
  line-height: 1.25;
  letter-spacing: .12em;
}

.bubble {
  border: 0;
  color: var(--ink);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 35% 29%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.4) 25%, transparent 58%),
    radial-gradient(ellipse at 72% 72%, var(--bubble-tint), transparent 62%),
    radial-gradient(ellipse at 22% 78%, var(--bubble-warm), transparent 58%),
    rgba(255,255,255,.16);
  box-shadow:
    0 24px 56px var(--bubble-shadow),
    0 5px 24px rgba(255,255,255,.28),
    inset 10px 8px 26px rgba(255,255,255,.28),
    inset -12px -10px 32px rgba(203,218,224,.1);
  backdrop-filter: blur(14px) saturate(.86);
  -webkit-backdrop-filter: blur(14px) saturate(.86);
  transition: transform 180ms var(--soft-ease), opacity 180ms var(--soft-ease), filter 180ms ease;
}

.bubble::before {
  inset: 7%;
  background:
    radial-gradient(ellipse at 28% 26%, rgba(255,255,255,.38), transparent 38%),
    radial-gradient(ellipse at 76% 68%, rgba(255,255,255,.12), transparent 52%);
  filter: blur(16px);
  opacity: .7;
}

.bubble::after {
  width: 34%;
  height: 18%;
  top: 10%;
  left: 15%;
  background: radial-gradient(ellipse, rgba(255,255,255,.5), transparent 72%);
  filter: blur(11px);
  opacity: .55;
}

.bubble span {
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(255,255,255,.22);
}

.detail-stage {
  min-height: 300px;
  margin: 4px auto 24px;
}

.detail-stage.is-transitioning + .reading-card {
  animation: detailCopyIn 260ms var(--soft-ease) both;
}

.detail-stage .detail-focus {
  z-index: 2;
  width: min(48vw, 238px);
  height: min(48vw, 238px);
}

.detail-stage .detail-side .bubble-float {
  z-index: 1;
  will-change: transform;
}

.detail-stage .detail-side .bubble {
  opacity: .72;
  filter: saturate(.82);
}

.detail-stage .detail-side .bubble:active {
  opacity: .96;
}

.reading-card {
  line-height: 1.92;
  letter-spacing: .035em;
}

@keyframes detailCopyIn {
  from { opacity: .45; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}

@media (max-width: 699px) {
  .page {
    padding-top: 86px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }

  .page-title {
    margin-top: 18px;
    margin-bottom: 24px;
    letter-spacing: .1em;
  }

  .detail-stage {
    min-height: 252px;
    margin-bottom: 16px;
  }

  .detail-stage .detail-focus {
    width: min(47vw, 178px);
    height: min(47vw, 178px);
  }

  .detail-stage .detail-side .bubble {
    opacity: .68;
  }

  .reading-card {
    padding: 22px 20px;
    font-size: 17px;
    line-height: 1.84;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-stage.is-transitioning + .reading-card {
    animation: fadeOnly 160ms var(--soft-ease) both;
  }

  .bubble-float {
    animation: none !important;
  }
}

@keyframes fadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Navigation and content states. These rules keep the interaction layer stable. */
.section-nav {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
}

.section-link {
  min-width: 58px;
  min-height: 40px;
  padding: 5px 7px;
  color: rgba(72,73,74,.48);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

.section-link.active {
  color: var(--ink);
  font-weight: 600;
}

.learn-page {
  isolation: isolate;
}

.learn-page::before,
.learn-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(48vw, 230px);
  height: min(42vw, 190px);
  border-radius: 51% 49% 45% 55% / 48% 54% 46% 52%;
  background: radial-gradient(ellipse at 38% 32%, rgba(255,255,255,.5), rgba(255,255,255,.1) 58%, transparent 78%), radial-gradient(circle at 70% 68%, rgba(222,235,242,.28), transparent 68%);
  filter: blur(8px);
  box-shadow: 0 28px 55px rgba(120,132,138,.08);
  animation: float 10s var(--ease-in-out) infinite alternate;
}

.learn-page::before { left: -16%; top: 29%; }
.learn-page::after { right: -18%; bottom: 17%; animation-delay: -3s; }

.input-wrap::before {
  content: none;
}

.input-prefix {
  position: absolute;
  z-index: 1;
  top: 25px;
  left: 26px;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.8;
  pointer-events: none;
}

.detail-stage {
  position: relative;
  min-height: 315px;
  margin: 4px auto 28px;
  isolation: isolate;
}

.detail-stage::before {
  content: "";
  position: absolute;
  inset: 20% 17%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(235,226,220,.16);
  filter: blur(30px);
}

.detail-focus {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(48vw, 250px);
  height: min(48vw, 250px);
  transform: translate(-50%, -50%);
  animation: breath 7s ease-in-out infinite;
}

.detail-focus span {
  font-size: clamp(20px, 5vw, 30px);
}

.detail-orbit {
  position: absolute;
  inset: 0;
}

.detail-orbit .bubble-float {
  position: absolute;
  width: 88px;
  height: 76px;
}

.detail-orbit .bubble {
  width: 88px;
  height: 76px;
}

.detail-orbit .bubble span {
  font-size: 12px;
}

.detail-orbit .bubble-float:nth-child(1) { left: 0; top: 37%; }
.detail-orbit .bubble-float:nth-child(2) { left: 14%; top: 0; }
.detail-orbit .bubble-float:nth-child(3) { right: 14%; top: 0; }
.detail-orbit .bubble-float:nth-child(4) { right: 0; top: 37%; }
.detail-orbit .bubble-float:nth-child(5) { left: 14%; bottom: 0; }
.detail-orbit .bubble-float:nth-child(6) { right: 14%; bottom: 0; }

.desire-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

.desire-list .bubble {
  height: 150px;
}

.explore .bubble:not(.selected),
.desire-list .bubble:not(.selected) {
  opacity: .7;
}

.explore .bubble.selected,
.desire-list .bubble.selected {
  opacity: 1;
  transform: translateY(-2px) scale(1.04);
}

.question-count {
  margin-top: 32px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .14em;
}

.release-question .page-title {
  max-width: 330px;
  margin-top: 54px;
  margin-bottom: 24px;
  text-wrap: balance;
}

.question-note {
  max-width: 310px;
  margin: 0 auto;
  color: #777675;
  font-size: 16px;
  line-height: 1.9;
  text-align: center;
}

.question-options,
.inspiration-actions {
  display: grid;
  gap: 13px;
  width: min(100%, 330px);
  margin-top: 46px;
}

.inspiration-page .input-wrap {
  margin-top: 38px;
}

.inspiration-input {
  min-height: 220px;
  padding-left: 25px;
}

@media (max-width: 699px) {
  .topbar {
    left: 13px;
    right: 13px;
    padding: 0 7px;
  }

  .icon-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .section-nav {
    gap: 1px;
  }

  .section-link {
    min-width: 54px;
    padding: 4px 3px;
    font-size: 11px;
  }

  .learn-page::before,
  .learn-page::after {
    width: 170px;
    height: 140px;
  }

  .input-prefix {
    top: 22px;
    left: 24px;
    font-size: 18px;
  }

  .target-input {
    padding-top: 22px;
    padding-left: 80px;
    font-size: 18px;
    line-height: 1.8;
  }

  .detail-stage {
    min-height: 270px;
    margin-bottom: 19px;
  }

  .detail-focus {
    width: min(49vw, 190px);
    height: min(49vw, 190px);
  }

  .detail-orbit .bubble-float,
  .detail-orbit .bubble {
    width: 70px;
    height: 62px;
  }

  .detail-orbit .bubble span {
    font-size: 10px;
  }

  .desire-list {
    width: 100%;
    gap: 7px;
    margin: 28px 0 24px;
  }

  .desire-list .bubble {
    height: 104px;
  }

  .desire-list .bubble span {
    font-size: 14px;
    letter-spacing: .03em;
  }

  .question-count {
    margin-top: 20px;
  }

  .release-question .page-title {
    margin-top: 45px;
    margin-bottom: 19px;
    font-size: clamp(26px, 7.2vw, 32px);
  }

  .question-note {
    max-width: 300px;
    font-size: 14px;
    line-height: 1.8;
  }

  .question-options {
    margin-top: 36px;
  }

  .inspiration-page .input-wrap {
    margin-top: 27px;
  }
}

/* Detail choices sit beside the focused bubble, like a quiet selector rail. */
.detail-side {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 25%;
}

.detail-side-left {
  left: 0;
  align-items: flex-start;
}

.detail-side-right {
  right: 0;
  align-items: flex-end;
}

.detail-stage .detail-side .bubble-float {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 76px;
  width: 88px !important;
  height: 76px !important;
}

.detail-stage .detail-side .bubble {
  width: 88px !important;
  height: 76px !important;
}

.detail-side-left .bubble-float:nth-child(2) { margin-left: 10px; }
.detail-side-right .bubble-float:nth-child(2) { margin-right: 12px; }
.detail-side-left .bubble-float:nth-child(3) { margin-left: 4px; }
.detail-side-right .bubble-float:nth-child(3) { margin-right: 5px; }

.inspiration-section {
  margin-top: 34px;
}

.inspiration-section .diary-heading {
  margin-bottom: 14px;
}

.inspiration-list {
  display: grid;
  gap: 12px;
}

.inspiration-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 22px;
}

.inspiration-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.inspiration-page {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inspiration-empty {
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.inspiration-index {
  padding-top: 3px;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: .08em;
}

.inspiration-actions-inline {
  grid-column: 2;
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.inspiration-actions-inline button {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .05em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inspiration-actions-inline button:last-child {
  color: #9c7770;
}

@media (max-width: 699px) {
  .detail-stage {
    min-height: 238px;
  }

  .detail-stage .detail-focus {
    left: 50%;
    width: min(48vw, 180px);
    height: min(48vw, 180px);
  }

  .detail-side {
    width: 24%;
  }

  .detail-stage .detail-side .bubble-float {
    flex-basis: 62px;
    width: 68px !important;
    height: 60px !important;
  }

  .detail-stage .detail-side .bubble {
    width: 68px !important;
    height: 60px !important;
  }

  .inspiration-section {
    margin-top: 26px;
  }

  .inspiration-item {
    padding: 14px 15px;
    border-radius: 19px;
  }

  .inspiration-item p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-page::before,
  .learn-page::after,
  .detail-focus {
    animation: none !important;
  }
}

/* Reference detail layout: this final block intentionally wins over legacy rails. */
.core-detail .page-title,
.method-detail .page-title {
  margin-bottom: 4px;
}

.core-detail .detail-stage,
.method-detail .detail-stage {
  width: 100%;
  min-height: 360px;
  margin: 0 auto 10px;
}

.core-detail .detail-focus,
.method-detail .detail-focus {
  top: 47%;
  left: 50%;
  width: min(47vw, 230px);
  height: min(43vw, 210px);
  z-index: 3;
}

.core-detail .detail-side,
.method-detail .detail-side {
  position: absolute;
  inset: 0;
  width: 100%;
  display: block;
  pointer-events: none;
}

.core-detail .detail-side .bubble-float,
.method-detail .detail-side .bubble-float {
  position: absolute !important;
  inset: auto !important;
  width: 92px !important;
  height: 82px !important;
  margin: 0 !important;
  pointer-events: auto;
}

.core-detail .detail-side .bubble,
.method-detail .detail-side .bubble {
  width: 92px !important;
  height: 82px !important;
  opacity: .76;
}

.core-detail .detail-side-left .bubble-float:nth-child(1),
.method-detail .detail-side-left .bubble-float:nth-child(1) { left: 0 !important; top: 16% !important; }
.core-detail .detail-side-left .bubble-float:nth-child(2),
.method-detail .detail-side-left .bubble-float:nth-child(2) { left: 3% !important; top: auto !important; bottom: 7% !important; }
.core-detail .detail-side-right .bubble-float:nth-child(1),
.method-detail .detail-side-right .bubble-float:nth-child(1) { right: 0 !important; top: 3% !important; }
.core-detail .detail-side-right .bubble-float:nth-child(2) { right: -1% !important; top: 38% !important; }
.core-detail .detail-side-right .bubble-float:nth-child(3) { right: 1% !important; top: auto !important; bottom: 1% !important; }
.method-detail .detail-side-right .bubble-float:nth-child(2) { right: 1% !important; top: auto !important; bottom: 9% !important; }

.core-detail .reading-card,
.method-detail .reading-card {
  width: 100%;
  margin: 0 auto;
  padding: 38px 30px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 40px;
  background: rgba(255,255,255,.38);
  text-align: center;
}

.core-detail .reading-card p + p,
.method-detail .reading-card p + p {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 699px) {
  .core-detail,
  .method-detail {
    padding-left: 16px;
    padding-right: 16px;
  }

  .core-detail .detail-stage,
  .method-detail .detail-stage {
    width: calc(100% + 4px);
    min-height: 324px;
    margin-left: -2px;
    margin-bottom: 8px;
  }

  .core-detail .detail-focus,
  .method-detail .detail-focus {
    width: min(51vw, 194px);
    height: min(47vw, 180px);
  }

  .core-detail .detail-side .bubble-float,
  .method-detail .detail-side .bubble-float,
  .core-detail .detail-side .bubble,
  .method-detail .detail-side .bubble {
    width: 78px !important;
    height: 70px !important;
  }

  .core-detail .detail-side .bubble span,
  .method-detail .detail-side .bubble span {
    max-width: 62px;
    font-size: 12px;
    line-height: 1.4;
  }

  .core-detail .detail-side-left .bubble-float:nth-child(1),
  .method-detail .detail-side-left .bubble-float:nth-child(1) { left: -3px !important; top: 17% !important; }
  .core-detail .detail-side-left .bubble-float:nth-child(2),
  .method-detail .detail-side-left .bubble-float:nth-child(2) { left: 2px !important; bottom: 8% !important; }
  .core-detail .detail-side-right .bubble-float:nth-child(1),
  .method-detail .detail-side-right .bubble-float:nth-child(1) { right: -3px !important; top: 4% !important; }
  .core-detail .detail-side-right .bubble-float:nth-child(2) { right: -6px !important; top: 39% !important; }
  .core-detail .detail-side-right .bubble-float:nth-child(3) { right: -1px !important; bottom: 2% !important; }
  .method-detail .detail-side-right .bubble-float:nth-child(2) { right: 1px !important; bottom: 10% !important; }

  .core-detail .reading-card,
  .method-detail .reading-card {
    padding: 34px 23px;
    border-radius: 34px;
    font-size: 16px;
    line-height: 2;
  }
}

/* Carousel page sizing must stay after every legacy detail override. */
section.detail-carousel-page.core-detail,
section.detail-carousel-page.method-detail {
  max-width: none;
  height: 100dvh;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.detail-carousel-page.core-detail .page-title,
.detail-carousel-page.method-detail .page-title {
  margin: 16px 0 18px;
  padding: 0 var(--page-gutter);
}

@media (max-width: 699px) {
  .detail-carousel-page.core-detail .page-title,
  .detail-carousel-page.method-detail .page-title {
    margin-top: 12px;
    margin-bottom: 14px;
  }
}

/* Final detail-carousel state (EOF): centered card is prominent, side cards stay visible. */
.detail-carousel-page.core-detail .detail-slide,
.detail-carousel-page.method-detail .detail-slide {
  height: 100%;
}

.detail-carousel-page.core-detail .detail-slide:not(.is-current),
.detail-carousel-page.method-detail .detail-slide:not(.is-current) {
  opacity: .52;
  transform: scale(.94);
}

.detail-carousel-page.core-detail .detail-slide.is-current,
.detail-carousel-page.method-detail .detail-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

/* Let the carousel, not the reading card, own horizontal touch gestures. */
.detail-carousel-page.core-detail .detail-track,
.detail-carousel-page.method-detail .detail-track {
  touch-action: pan-x;
  cursor: grab;
}

.detail-carousel-page.core-detail .detail-track:active,
.detail-carousel-page.method-detail .detail-track:active {
  cursor: grabbing;
}

.detail-carousel-page.core-detail .detail-card,
.detail-carousel-page.method-detail .detail-card {
  pointer-events: none;
}

@media (max-width: 699px) {
  .detail-carousel-page.core-detail .detail-carousel,
  .detail-carousel-page.method-detail .detail-carousel {
    inset: 164px 0 40px;
  }
}

/* Final mobile composition pass. */
.floaters {
  display: none !important;
}

.detail-carousel-page.core-detail .detail-swipe-hint,
.detail-carousel-page.method-detail .detail-swipe-hint {
  position: static;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .16em;
  text-align: center;
}

.detail-carousel-page.core-detail .detail-pagination,
.detail-carousel-page.method-detail .detail-pagination {
  position: static;
  height: auto;
  margin-top: 7px;
}

.detail-carousel-page.core-detail .detail-carousel,
.detail-carousel-page.method-detail .detail-carousel {
  position: absolute;
  top: 154px;
  right: 0;
  bottom: 82px;
  left: 0;
}

.choose-page {
  padding-top: 94px;
  padding-bottom: 22px;
}

.choose-page .page-title {
  margin: 18px 0 10px;
}

.choose-page > .hint {
  margin: 0;
  font-size: 13px;
}

.choose-page .method-list {
  gap: 10px;
  margin: 20px 0 0;
}

.choose-page .method-item {
  min-height: 80px;
  padding: 10px 14px;
  gap: 15px;
  border-radius: 42px;
}

.choose-page .method-item .bubble {
  --size: 62px;
  flex-basis: 62px;
  height: 54px;
}

.choose-page .method-item .bubble span {
  font-size: 14px;
}

.choose-page .method-copy {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: .06em;
}

.choose-page .method-copy small {
  margin-top: 3px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-question {
  justify-content: center;
  padding-top: 92px;
  padding-bottom: 54px;
}

.release-question .question-count {
  position: absolute;
  top: 96px;
  margin-top: 0;
}

.release-question .question-focus {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(100%, 340px);
  min-height: 190px;
}

.release-question .question-focus::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(224, 234, 237, .42), rgba(246, 226, 216, .16) 47%, transparent 74%);
  filter: blur(18px);
  animation: questionBreathe 4.2s ease-in-out infinite;
}

.release-question .page-title {
  position: relative;
  z-index: 1;
  max-width: 310px;
  margin: 0;
  font-size: clamp(27px, 7.2vw, 38px);
  line-height: 1.45;
}

.release-question .question-note {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.release-question .question-options {
  position: relative;
  z-index: 1;
  margin-top: 28px;
}

@keyframes questionBreathe {
  0%, 100% { opacity: .56; transform: scale(.96); }
  50% { opacity: .9; transform: scale(1.04); }
}

.diary .page-title {
  margin-bottom: 24px;
}

.diary .stats {
  gap: 10px;
}

.diary .stat {
  padding: 16px 8px;
  border-radius: 23px;
}

.diary .stat label {
  margin-bottom: 5px;
  font-size: 13px;
}

.diary .stat strong {
  font-size: 38px;
}

.diary .stat em {
  font-size: 13px;
}

.diary .diary-heading {
  margin: 30px 0 14px;
  font-size: 20px;
  letter-spacing: .06em;
}

.diary .goal-card {
  padding: 17px 15px;
  margin-bottom: 12px;
  border-radius: 25px;
}

.diary .goal-title {
  margin-bottom: 13px;
  font-size: 18px;
  line-height: 1.45;
}

.diary .progress {
  height: 39px;
}

.diary .goal-meta {
  margin-top: 14px;
  font-size: 12px;
}

.diary .goal-actions {
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .release-question .question-focus::before {
    animation: none;
    opacity: .7;
  }
}

/* Keep the swipe affordance below the card, not in the card's overlay area. */
.detail-carousel-page.core-detail .detail-swipe-hint,
.detail-carousel-page.method-detail .detail-swipe-hint {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 47px;
  left: 0;
  margin: 0;
}

.detail-carousel-page.core-detail .detail-pagination,
.detail-carousel-page.method-detail .detail-pagination {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 18px;
  left: 0;
  height: auto;
  margin: 0;
}

/* Final balance pass for the mobile reading flow. */
.home {
  justify-content: center;
  padding-top: 88px;
  padding-bottom: 38px;
}

.home .hero-wrap {
  margin: 0 auto 18px;
}

.home .page-subtitle {
  margin: 0 0 34px;
  font-size: 20px;
}

.home .entry-list {
  width: min(100%, 300px);
  gap: 10px;
}

.home .entry-list .pill {
  min-height: 52px;
  font-size: 18px;
}

.detail-carousel-page.core-detail .detail-carousel,
.detail-carousel-page.method-detail .detail-carousel {
  top: 146px;
  bottom: 96px;
}

.detail-carousel-page.core-detail .detail-card,
.detail-carousel-page.method-detail .detail-card {
  height: calc(100% - 42px);
}

.target-page {
  justify-content: center;
  padding-top: 90px;
  padding-bottom: 54px;
}

.target-page .page-title {
  max-width: none;
  margin: 0 0 18px;
  font-size: clamp(21px, 5.8vw, 30px);
  line-height: 1.35;
  letter-spacing: .08em;
  white-space: nowrap;
}

.target-page > .hint {
  max-width: 320px;
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.7;
}

.explore,
.page.center:not(.home):not(.practice):not(.release-question):not(.feedback-page):not(.target-page) {
  align-items: center;
}

.explore .feeling-group {
  width: min(100%, 360px);
}

.explore > .hint {
  margin-top: 14px;
}

.explore > .hint {
  font-size: 12px;
}

.desire-list {
  width: min(100%, 390px);
}

.release-question .question-note {
  max-width: 330px;
  font-size: 14px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: normal;
}

.release-question .page-title {
  font-size: clamp(24px, 6.5vw, 34px);
}

.practice {
  justify-content: center;
}

.practice .page-title {
  margin-bottom: 18px;
  font-size: clamp(22px, 6vw, 30px);
}

.practice-guide {
  max-width: 310px;
  margin-top: 0;
  font-size: 15px;
  line-height: 1.8;
}

.feedback-page {
  justify-content: center;
}

.feedback-page .page-title {
  max-width: 320px;
  margin-bottom: 18px;
  font-size: clamp(24px, 6.5vw, 34px);
  line-height: 1.4;
}

.feedback-page > .hint {
  max-width: 300px;
  font-size: 13px;
}

.feedback-page .feedback-options {
  gap: 10px;
  margin-top: 28px;
}

.feedback-page .feedback-options .pill {
  min-height: 52px;
  font-size: 18px;
}

.feedback-dialog {
  position: fixed;
  z-index: 45;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(247, 245, 243, .2);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.feedback-dialog.is-visible {
  opacity: 1;
}

.feedback-dialog-card {
  width: min(100%, 340px);
  padding: 26px 22px 22px;
  border-radius: 30px;
  text-align: center;
  transform: translateY(8px) scale(.97);
  transition: transform 180ms var(--ease-out);
}

.feedback-dialog.is-visible .feedback-dialog-card {
  transform: translateY(0) scale(1);
}

.feedback-dialog-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

.feedback-dialog-card p + p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

.feedback-dialog-actions {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.feedback-dialog-actions .pill {
  min-height: 50px;
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .feedback-dialog,
  .feedback-dialog-card {
    transition: opacity 160ms ease;
  }

  .feedback-dialog-card {
    transform: none;
  }
}

.hold-hint {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-align: center;
}

.explore .hold-hint,
.desire .hold-hint {
  margin-top: 10px;
}

.explain-card {
  z-index: 8;
  max-height: min(42vh, 260px);
  overflow: auto;
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 22px 54px rgba(102, 112, 118, .13), inset 0 1px 0 rgba(255,255,255,.72);
}

.explain-card p {
  margin: 0;
}

.explain-card p + p {
  margin-top: 12px;
}

/* Cohesive UI quality pass: one material, one type scale, one spacing rhythm. */
:root {
  --ink: #465052;
  --muted: #81898a;
  --quiet: #a4aaab;
  --surface: rgba(255, 255, 255, .48);
  --surface-strong: rgba(255, 255, 255, .66);
  --hairline: rgba(255, 255, 255, .62);
  --soft-line: rgba(78, 91, 94, .08);
  --shadow-soft: 0 18px 44px rgba(82, 94, 98, .075), inset 0 1px 0 rgba(255, 255, 255, .78);
  --shadow-raised: 0 24px 62px rgba(82, 94, 98, .11), inset 0 1px 0 rgba(255, 255, 255, .86);
}

html,
body {
  min-height: 100%;
  background: #f7f5f2;
}

body {
  color: var(--ink);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-shell {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 25%, rgba(221, 235, 240, .48), transparent 39%),
    radial-gradient(ellipse at 84% 68%, rgba(248, 226, 214, .44), transparent 43%),
    linear-gradient(145deg, #f9f8f5 0%, #faf5f1 52%, #f6f8f8 100%);
}

.topbar {
  top: max(14px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  height: 54px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .46);
  box-shadow: 0 12px 36px rgba(83, 94, 98, .07), inset 0 1px 0 rgba(255, 255, 255, .76);
  backdrop-filter: blur(24px) saturate(.92);
  -webkit-backdrop-filter: blur(24px) saturate(.92);
}

.icon-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: .76;
  transition: transform 140ms var(--ease-out), opacity 140ms ease, background-color 140ms ease;
}

.icon-btn:active {
  transform: scale(.94);
  opacity: 1;
  background: rgba(255, 255, 255, .55);
}

.section-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 18px;
  background: rgba(235, 234, 231, .28);
}

.section-link {
  min-width: 56px;
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 15px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  opacity: .62;
  transition: color 160ms ease, opacity 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.section-link.active {
  color: var(--ink);
  opacity: 1;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 4px 14px rgba(80, 91, 94, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.page {
  width: 100%;
  max-width: 680px;
  padding-top: 92px;
  padding-right: clamp(18px, 5vw, 30px);
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: clamp(18px, 5vw, 30px);
}

.page-title {
  color: var(--ink);
  font-size: clamp(27px, 7.3vw, 42px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: .1em;
}

.hint,
.entry-note,
.explore-sub,
.practice-guide,
.question-note {
  color: var(--muted);
}

.hint {
  line-height: 1.75;
  letter-spacing: .045em;
}

.glass,
.pill,
.method-item,
.input-wrap {
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(.9);
  -webkit-backdrop-filter: blur(20px) saturate(.9);
}

.pill {
  min-height: 54px;
  padding: 10px 22px;
  border-radius: 28px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: .075em;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.pill.primary {
  background: var(--surface-strong);
  box-shadow: var(--shadow-raised);
}

.pill:active,
.method-item:active,
.goal-card button:active,
.inspiration-item button:active {
  transform: scale(.97);
}

button:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(88, 128, 140, .34);
  outline-offset: 3px;
}

.bubble {
  color: var(--ink);
  border: 0;
  background:
    radial-gradient(ellipse at 34% 28%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .3) 28%, transparent 60%),
    radial-gradient(ellipse at 74% 72%, var(--bubble-tint), transparent 62%),
    radial-gradient(ellipse at 22% 78%, var(--bubble-warm), transparent 58%),
    rgba(255, 255, 255, .13);
  box-shadow: 0 22px 52px var(--bubble-shadow), inset 9px 8px 24px rgba(255, 255, 255, .3), inset -10px -9px 28px rgba(206, 220, 226, .1);
}

.bubble span {
  color: var(--ink);
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58);
}

.explore .bubble:not(.selected),
.desire-list .bubble:not(.selected) {
  opacity: .64;
  filter: saturate(.72);
}

.explore .bubble.selected,
.desire-list .bubble.selected {
  opacity: 1;
  filter: saturate(1);
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 26px 58px rgba(91, 116, 125, .13), inset 10px 9px 28px rgba(255, 255, 255, .44), inset -11px -9px 30px var(--bubble-tint);
}

.home .page-subtitle {
  color: var(--muted);
  font-size: 18px;
  letter-spacing: .12em;
}

.home .entry-list {
  width: min(100%, 312px);
  gap: 11px;
}

.learn-page .page-title {
  margin-bottom: 14px;
}

.entry-note {
  max-width: 300px;
  margin: 0 auto 30px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .06em;
  text-align: center;
}

.section-entry {
  width: min(100%, 330px);
  gap: 12px;
}

.reading-card,
.detail-card {
  border-radius: 34px;
  background: rgba(255, 255, 255, .43);
  box-shadow: var(--shadow-soft);
}

.reading-card {
  padding: clamp(26px, 7vw, 42px) clamp(22px, 6vw, 36px);
  color: #5c6566;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.95;
}

.reading-card p + p {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--soft-line);
}

.input-wrap {
  border-radius: 28px;
  overflow: hidden;
}

.target-input {
  color: var(--ink);
  caret-color: #728f96;
}

.target-input::placeholder {
  color: var(--quiet);
}

.feeling-group {
  padding: 0;
}

.group-title {
  color: #727b7d;
  font-size: 14px;
  letter-spacing: .09em;
}

.selection-footer .pill,
.desire-action {
  width: min(100%, 330px);
}

.choose-page .method-item {
  border-radius: 28px;
  background: rgba(255, 255, 255, .4);
  box-shadow: 0 12px 34px rgba(82, 94, 98, .065), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform 140ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}

.method-copy {
  color: var(--ink);
}

.method-copy small {
  color: var(--muted);
}

.question-count,
.detail-swipe-hint,
.detail-pagination {
  color: var(--quiet);
  font-size: 11px;
  letter-spacing: .14em;
}

.question-options,
.feedback-options,
.feedback-dialog-actions {
  width: min(100%, 328px);
}

.practice-visual .bubble.hero {
  box-shadow: 0 30px 76px rgba(92, 113, 121, .12), inset 12px 10px 34px rgba(255, 255, 255, .35), inset -12px -10px 34px rgba(210, 224, 229, .12);
}

.timer .digits {
  color: #4f595b;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.stats {
  gap: 10px;
}

.stat,
.goal-card,
.inspiration-item {
  border-radius: 24px;
  background: rgba(255, 255, 255, .43);
}

.stat label,
.goal-meta,
.inspiration-note,
.inspiration-index {
  color: var(--muted);
}

.goal-actions .text-button,
.inspiration-actions-inline button {
  color: #687779;
  text-decoration: none;
  border-bottom: 1px solid rgba(87, 105, 109, .22);
}

.goal-actions .text-button:last-child,
.inspiration-actions-inline button:last-child {
  color: #9a6f68;
  border-bottom-color: rgba(154, 111, 104, .22);
}

.feedback-dialog-card {
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .66);
  box-shadow: var(--shadow-raised);
}

.toast {
  border: 1px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 16px 38px rgba(82, 94, 98, .11);
}

@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .48);
  }

  .pill:hover,
  .method-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .6);
    box-shadow: var(--shadow-raised);
  }
}

@media (max-width: 699px) {
  .page {
    padding-top: 86px;
  }

  .page-title {
    font-size: clamp(25px, 7vw, 32px);
  }

  .home {
    padding-top: 80px;
  }

  .home .bubble.hero {
    --size: min(59vw, 228px);
  }

  .home .bubble.hero span {
    font-size: 39px;
  }

  .detail-carousel-page.core-detail .detail-carousel,
  .detail-carousel-page.method-detail .detail-carousel {
    top: 138px;
  }

  .detail-carousel-page.core-detail .detail-card-copy,
  .detail-carousel-page.method-detail .detail-card-copy {
    color: #5a6465;
    font-size: 16px;
    line-height: 1.82;
  }

  .diary .goal-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .diary .goal-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-float,
  .bubble.hero,
  .question-focus::before {
    animation: none !important;
  }

  .page {
    animation: fadeOnly 160ms ease both !important;
  }
}

/* Mobile composition correction: stable centers, clearer bubbles, quieter type. */
.home {
  justify-content: center;
  padding-top: max(76px, env(safe-area-inset-top));
  padding-bottom: max(96px, env(safe-area-inset-bottom));
}

.home .bubble.hero {
  opacity: .82;
  animation: ambientBubbleBreath 8s var(--ease-in-out) infinite;
}

.home .page-subtitle {
  margin-bottom: 32px;
  font-size: 16px;
  letter-spacing: .09em;
}

.learn-page {
  justify-content: center;
  min-height: 100svh;
  padding-top: max(78px, env(safe-area-inset-top));
  padding-bottom: max(72px, env(safe-area-inset-bottom));
}

.learn-page .page-title {
  margin-top: 0;
}

.learn-page .section-entry {
  margin-top: 0;
  margin-bottom: 0;
}

.detail-carousel-page.core-detail .detail-carousel,
.detail-carousel-page.method-detail .detail-carousel {
  top: 156px;
  bottom: 82px;
}

.detail-carousel-page.core-detail .detail-track,
.detail-carousel-page.method-detail .detail-track {
  align-items: center;
  height: 100%;
  gap: 10px;
  padding-inline: 12vw;
  scroll-padding-inline: 12vw;
}

.detail-carousel-page.core-detail .detail-slide,
.detail-carousel-page.method-detail .detail-slide {
  flex: 0 0 min(76vw, 460px);
  height: 100%;
  opacity: .46;
  transform: scale(.88);
  transition: transform 260ms var(--ease-in-out), opacity 220ms ease;
}

.detail-carousel-page.core-detail .detail-slide.is-current,
.detail-carousel-page.method-detail .detail-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

.detail-carousel-page.core-detail .detail-card,
.detail-carousel-page.method-detail .detail-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100% - 34px);
  padding-top: 28px;
  padding-bottom: 28px;
}

.detail-carousel-page.core-detail .detail-slide-title,
.detail-carousel-page.method-detail .detail-slide-title {
  flex: 0 0 auto;
}

.detail-carousel-page.core-detail .detail-card-copy,
.detail-carousel-page.method-detail .detail-card-copy {
  min-height: 0;
}

.target-page > .hint {
  display: grid;
  gap: 2px;
}

.target-page > .hint span {
  white-space: nowrap;
}

.target-page .input-wrap {
  border: 1px solid rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
  backdrop-filter: blur(24px) saturate(.88);
  -webkit-backdrop-filter: blur(24px) saturate(.88);
}

.target-page .target-input {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.explore {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-top: max(82px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.explore .page-title {
  margin: 0 0 10px;
}

.explore-lead {
  margin-bottom: 2px;
}

.explore-sub {
  margin-bottom: 14px;
}

.explore .feeling-group {
  width: min(100%, 360px);
  margin: 7px auto;
}

.explore .group-title {
  margin-bottom: 8px;
}

.explore .selection-footer {
  position: static;
  display: grid;
  width: 100%;
  margin-top: 14px;
  place-items: center;
}

.desire {
  justify-content: center;
  min-height: 100svh;
  padding-top: max(82px, env(safe-area-inset-top));
  padding-bottom: max(42px, env(safe-area-inset-bottom));
}

.desire .page-title {
  margin-top: 0;
  margin-bottom: 18px;
}

.desire-list {
  margin: 26px 0 30px;
}

.explore .bubble:not(.selected),
.desire-list .bubble:not(.selected) {
  opacity: .8;
  filter: saturate(.88);
  box-shadow: 0 18px 42px rgba(91, 116, 125, .1), inset 8px 7px 22px rgba(255, 255, 255, .38), inset -9px -8px 26px rgba(207, 222, 228, .12);
}

.explore .bubble.selected,
.desire-list .bubble.selected {
  opacity: 1;
  box-shadow: 0 24px 54px rgba(91, 116, 125, .16), inset 9px 8px 26px rgba(255, 255, 255, .52), inset -10px -9px 28px var(--bubble-tint);
}

.release-question .question-focus::before {
  width: min(82vw, 318px);
  height: min(56vw, 218px);
  background: radial-gradient(ellipse, rgba(225, 239, 243, .56) 0%, rgba(247, 226, 215, .28) 43%, rgba(255, 255, 255, .08) 65%, transparent 76%);
  box-shadow: 0 0 52px rgba(210, 229, 234, .18);
  animation: questionBreathe 5.8s var(--ease-in-out) infinite;
}

.choose-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-top: max(78px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.choose-page .page-title {
  margin-top: 0;
}

.choose-page .method-list {
  width: min(100%, 370px);
}

.practice {
  padding-top: max(80px, env(safe-area-inset-top));
  padding-bottom: max(42px, env(safe-area-inset-bottom));
}

.practice-visual .bubble.hero {
  opacity: .88;
  animation: practiceBubbleBreath 7s var(--ease-in-out) infinite;
}

.diary .page-title {
  font-size: clamp(26px, 6.8vw, 34px);
}

.diary-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 12px;
}

.diary .diary-heading-row .diary-heading {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: .045em;
  white-space: nowrap;
}

.diary-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.diary-tools .small-pill {
  min-height: 36px;
  padding: 6px 11px;
  border-radius: 18px;
  font-size: 13px;
  letter-spacing: .035em;
  white-space: nowrap;
}

.diary .inspiration-note {
  margin-top: 0;
  font-size: 12px;
}

@keyframes ambientBubbleBreath {
  0%, 100% { transform: scale(.985) rotate(-.6deg); }
  50% { transform: scale(1.025) rotate(.8deg); }
}

@keyframes practiceBubbleBreath {
  0%, 100% { transform: scale(.98); opacity: .82; }
  50% { transform: scale(1.025); opacity: .94; }
}

@keyframes questionBreathe {
  0%, 100% { opacity: .48; transform: scale(.96); }
  50% { opacity: .92; transform: scale(1.045); }
}

@media (max-width: 359px) {
  .target-page > .hint {
    font-size: 12px;
  }

  .diary-heading-row {
    gap: 7px;
  }

  .diary-tools .small-pill {
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .bubble.hero,
  .practice-visual .bubble.hero,
  .release-question .question-focus::before {
    animation: none !important;
    transform: none !important;
  }

  .detail-carousel-page.core-detail .detail-slide,
  .detail-carousel-page.method-detail .detail-slide {
    transition: opacity 160ms ease !important;
  }
}

/* Follow-up balance pass: stronger breathing, visible halo, stable form focus. */
.ambient-toggle.is-on {
  opacity: 1;
  color: #536d72;
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84), 0 5px 16px rgba(79, 102, 108, .08);
}

.input-wrap:focus-within {
  border-color: rgba(112, 143, 149, .3);
  background: rgba(255, 255, 255, .52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.input-wrap .target-input,
.input-wrap .target-input:focus,
.input-wrap .target-input:focus-visible {
  border: 0;
  border-bottom: 0;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.home .bubble.hero {
  animation-duration: 7.2s;
}

.home .bubble.hero::before,
.practice-visual .bubble.hero::before,
.explore .bubble::before,
.desire-list .bubble::before {
  animation: bubbleMistBreath 6.4s var(--ease-in-out) infinite;
}

.explore .bubble-float:nth-child(2n) .bubble::before,
.desire-list .bubble-float:nth-child(2n) .bubble::before {
  animation-delay: -2.1s;
}

.explore .bubble-float:nth-child(3n) .bubble::before,
.desire-list .bubble-float:nth-child(3n) .bubble::before {
  animation-delay: -4.2s;
}

.explore {
  justify-content: flex-start;
  padding-top: max(86px, calc(env(safe-area-inset-top) + 72px));
}

.desire {
  justify-content: flex-start;
  padding-top: max(102px, calc(env(safe-area-inset-top) + 84px));
}

.release-question .question-focus {
  isolation: isolate;
}

.release-question .question-focus::before {
  z-index: 0;
  width: min(88vw, 340px);
  height: min(61vw, 232px);
  background:
    radial-gradient(ellipse at 46% 44%, rgba(255, 255, 255, .16) 0 24%, transparent 46%),
    radial-gradient(ellipse, rgba(210, 235, 241, .66) 0%, rgba(245, 218, 202, .42) 45%, rgba(232, 239, 237, .22) 61%, transparent 76%);
  filter: blur(11px);
  box-shadow: 0 0 58px rgba(178, 216, 225, .24);
  animation: visibleQuestionBreath 5.8s var(--ease-in-out) infinite;
  pointer-events: none;
}

.release-question .question-focus .page-title {
  position: relative;
  z-index: 2;
}

.practice {
  justify-content: flex-start;
  padding-top: max(96px, calc(env(safe-area-inset-top) + 78px));
}

.practice .page-title {
  margin-top: 0;
}

.practice-guide {
  margin-bottom: 22px;
}

.practice-visual {
  margin-top: 24px;
  margin-bottom: 34px;
}

.practice-visual .bubble.hero {
  animation-duration: 6.8s;
}

@keyframes ambientBubbleBreath {
  0%, 100% { transform: scale(.94) rotate(-1deg); }
  50% { transform: scale(1.07) rotate(1.2deg); }
}

@keyframes practiceBubbleBreath {
  0%, 100% { transform: scale(.93); opacity: .76; }
  50% { transform: scale(1.07); opacity: .96; }
}

@keyframes bubbleMistBreath {
  0%, 100% { opacity: .38; transform: scale(.96); }
  50% { opacity: .88; transform: scale(1.035); }
}

@keyframes visibleQuestionBreath {
  0%, 100% { opacity: .58; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .home .bubble.hero::before,
  .practice-visual .bubble.hero::before,
  .explore .bubble::before,
  .desire-list .bubble::before,
  .release-question .question-focus::before {
    animation: none !important;
    transform: none !important;
  }

  .release-question .question-focus::before {
    opacity: .78;
  }
}

/* Slow ambience and compact guided-practice viewport. */
.home .bubble.hero {
  animation-duration: 10.8s;
}

.home .bubble.hero::before,
.practice-visual .bubble.hero::before,
.explore .bubble::before,
.desire-list .bubble::before {
  animation-duration: 9.8s;
}

.explore {
  padding-top: max(80px, calc(env(safe-area-inset-top) + 66px));
}

.explore .page-title {
  margin-bottom: 16px;
}

.explore-sub {
  margin-bottom: 24px;
}

.release-question .question-focus::before {
  width: min(94vw, 364px);
  height: min(68vw, 258px);
  filter: blur(9px);
  animation-duration: 7.8s;
}

.practice {
  justify-content: flex-start;
  width: 100%;
  height: 100svh;
  min-height: 0;
  padding-top: max(76px, calc(env(safe-area-inset-top) + 62px));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.practice .page-title {
  flex: 0 0 auto;
  margin: 0 0 10px;
}

.practice-guide {
  flex: 0 0 auto;
  max-width: 340px;
  margin: 0 auto 6px;
  font-size: 13px;
  line-height: 1.58;
}

.practice-visual {
  flex: 1 1 230px;
  min-height: 210px;
  max-height: 300px;
  margin: 0 auto 8px;
}

.practice-visual .bubble.hero {
  --size: min(68vw, 31svh, 280px);
  animation-duration: 10.2s;
}

.practice .finish {
  flex: 0 0 auto;
  min-height: 50px;
  margin-top: 0;
}

@keyframes ambientBubbleBreath {
  0%, 100% { transform: scale(.95) rotate(-.8deg); }
  50% { transform: scale(1.065) rotate(1deg); }
}

@keyframes practiceBubbleBreath {
  0%, 100% { transform: scale(.94); opacity: .78; }
  50% { transform: scale(1.065); opacity: .96; }
}

@keyframes bubbleMistBreath {
  0%, 100% { opacity: .4; transform: scale(.95); }
  50% { opacity: .9; transform: scale(1.04); }
}

@keyframes visibleQuestionBreath {
  0%, 100% { opacity: .38; transform: scale(.84); }
  50% { opacity: 1; transform: scale(1.16); }
}

@media (max-height: 700px) {
  .practice-guide {
    max-width: 350px;
    font-size: 12px;
    line-height: 1.48;
  }

  .practice-visual {
    min-height: 180px;
    max-height: 240px;
  }

  .practice-visual .bubble.hero {
    --size: min(61vw, 27svh, 238px);
  }
}

/* Mini-tool container compatibility: dual safe areas and page-local editor. */
:root {
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

html {
  touch-action: manipulation;
}

body {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  min-height: var(--visual-viewport-height, 100svh);
}

.topbar {
  top: max(14px, var(--safe-top));
  right: max(12px, var(--safe-right));
  left: max(12px, var(--safe-left));
}

.page {
  padding-bottom: max(24px, var(--safe-bottom));
}

.home {
  padding-top: max(76px, var(--safe-top));
  padding-bottom: max(96px, var(--safe-bottom));
}

.learn-page {
  padding-top: max(78px, var(--safe-top));
  padding-bottom: max(72px, var(--safe-bottom));
}

.explore {
  padding-top: max(80px, calc(var(--safe-top) + 66px));
  padding-bottom: max(24px, var(--safe-bottom));
}

.desire {
  padding-top: max(102px, calc(var(--safe-top) + 84px));
  padding-bottom: max(42px, var(--safe-bottom));
}

.choose-page {
  padding-top: max(78px, var(--safe-top));
  padding-bottom: max(24px, var(--safe-bottom));
}

.practice {
  height: var(--visual-viewport-height, 100svh);
  padding-top: max(76px, calc(var(--safe-top) + 62px));
  padding-bottom: max(16px, var(--safe-bottom));
}

.editor-dialog-card h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .08em;
}

.editor-input {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 16px 17px;
  resize: none;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px;
  outline: none;
  color: var(--ink);
  background: rgba(255, 255, 255, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 15px;
  line-height: 1.7;
  -webkit-appearance: none;
  appearance: none;
}

.editor-input:focus {
  border-color: rgba(104, 137, 144, .34);
  background: rgba(255, 255, 255, .58);
}

/* Reserve the native XiaoHongShu title/share row above the custom navigation. */
.xhs-mini-tool .topbar {
  top: calc(var(--safe-top) + 48px);
}

.xhs-mini-tool .page {
  padding-top: max(112px, calc(var(--safe-top) + 108px));
}

.xhs-mini-tool .detail-carousel-page.core-detail .detail-carousel,
.xhs-mini-tool .detail-carousel-page.method-detail .detail-carousel {
  top: max(166px, calc(var(--safe-top) + 158px));
}

.xhs-mini-tool .release-question .question-count {
  top: max(112px, calc(var(--safe-top) + 108px));
}

@media (max-height: 700px) {
  .xhs-mini-tool .page {
    padding-top: max(104px, calc(var(--safe-top) + 100px));
  }

  .xhs-mini-tool .topbar {
    top: calc(var(--safe-top) + 42px);
  }
}

/* Keep the nine-emotion layout balanced between navigation and the bottom action. */
.page.explore {
  justify-content: flex-start;
  padding-top: max(76px, calc(var(--safe-top) + 62px));
  padding-bottom: max(40px, calc(var(--safe-bottom) + 22px));
}

.page.explore .page-title {
  margin-bottom: 8px;
}

.page.explore .explore-sub {
  margin-bottom: 6px;
}

.page.explore .feeling-group {
  margin-block: 4px;
}

.page.explore .selection-footer {
  margin-top: 8px;
}

.xhs-mini-tool .page.explore {
  padding-top: max(106px, calc(var(--safe-top) + 100px));
  padding-bottom: max(40px, calc(var(--safe-bottom) + 22px));
}

@media (max-height: 700px) {
  .page.explore {
    padding-top: max(72px, calc(var(--safe-top) + 58px));
    padding-bottom: max(26px, calc(var(--safe-bottom) + 16px));
  }

  .page.explore .page-title {
    margin-bottom: 5px;
  }

  .page.explore .explore-sub {
    margin-bottom: 6px;
  }

  .page.explore .feeling-group {
    margin-block: 3px;
  }

  .page.explore .group-title {
    margin-bottom: 5px;
  }

  .page.explore .feeling-row .bubble {
    height: 72px;
  }

  .page.explore .selection-footer {
    margin-top: 8px;
  }

  .xhs-mini-tool .page.explore {
    padding-top: max(98px, calc(var(--safe-top) + 92px));
  }
}