/* Compact, scroll-owned phone stories. Their parent scene owns visibility. */
.capability-scene { container-type: inline-size; }
.capability-content { position: absolute; top: 12%; left: 8%; right: 8%; height: 76%; color: #eceeed; }
.capability-content h3, .capability-content h4, .capability-content p { margin: 0; }
.capability-heading { font-size: clamp(23px,7.2cqw,31px); line-height: 1.12; font-weight: 400; letter-spacing: -.055em; }
.capability-content svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.cap-app-pages { position: absolute; inset: 0; overflow: hidden; }
.cap-app-prompt, .cap-tokyo-app { position: absolute; inset: 0; transform-origin: 50% 50%; }
.cap-app-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px,5cqw,21px); padding-bottom: 5%; }
.cap-app-orb { display: block; width: clamp(120px,49cqw,185px); height: auto; aspect-ratio: 1; flex-shrink: 0; object-fit: contain; }
.cap-app-request { max-width: 250px; color: #e4e9ec; font-size: clamp(17px,5.6cqw,21px); line-height: 1.35; text-align: center; letter-spacing: -.03em; }
.cap-app-building { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 62%; }
.cap-app-build-status { color: #8799a6; text-align: center; font-size: clamp(11px,3.6cqw,13px); }
.cap-app-progress { width: 100%; height: 2px; border-radius: 2px; overflow: hidden; background: #20282e; }
.cap-app-progress-fill { width: 100%; height: 100%; background: #bed4e3; transform-origin: left; transform: scaleX(0); }
.cap-tokyo-app { display: flex; flex-direction: column; gap: clamp(13px,5cqw,20px); }
.cap-tokyo-header { display: flex; align-items: center; justify-content: space-between; }
.cap-tokyo-header h3 { font-size: clamp(24px,7.2cqw,31px); font-weight: 400; line-height: 1.2; letter-spacing: -.04em; }
.cap-tokyo-header > span { font-size: 10px; color: #89959d; }
.cap-tokyo-greeting { color: #aeb9c0; font-size: clamp(12px,4cqw,15px); }
.cap-vocabulary { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 115px; padding: 14px 10px; border: 1px solid #ffffff1c; border-radius: 21px; background: radial-gradient(ellipse at 50% 0,#1b242a 0,transparent 70%),#090c0e; }
.cap-vocabulary > span { color: #8998a2; font-size: clamp(9px,2.9cqw,11px); }
.cap-vocabulary .cap-japanese-word { margin-top: 18px; color: #e4e9eb; font-size: clamp(22px,8.4cqw,34px); line-height: 1.3; letter-spacing: -.065em; }
.cap-vocabulary .cap-pronunciation { margin-top: 8px; color: #82939e; font-size: clamp(11px,3.6cqw,13px); }
.cap-vocabulary .cap-word-meaning { margin-top: 12px; color: #dce2e5; font-size: clamp(13px,4.5cqw,17px); }
.cap-tokyo-example { flex-shrink: 0; padding: 0 2px; }
.cap-tokyo-example p { color: #a9b8c2; font-size: clamp(12px,4cqw,15px); line-height: 1.5; }
.cap-tokyo-example span { display: block; margin-top: 3px; font-size: clamp(10px,3.3cqw,12px); color: #70828f; }
.cap-tokyo-progress { display: flex; justify-content: center; gap: 5px; flex-shrink: 0; }
.cap-tokyo-progress i { width: 18px; height: 3px; border-radius: 3px; background: #1c252a; }
.cap-tokyo-progress i:first-child { background: #bacbd5; }

.cap-day-content { --cap-day-step: clamp(82px,29cqw,112px); }
.cap-day-subtitle { margin-top: 9px !important; color: #818e97; font-size: clamp(11px,3.6cqw,13px); }
.cap-day-viewport { position: absolute; top: clamp(62px,19cqw,78px); bottom: 0; left: 0; right: 0; overflow: hidden; mask-image: none; }
.cap-day-track { margin: 0; padding: 24px 0 0; list-style: none; }
.cap-day-item { position: relative; display: grid; grid-template-columns: 31px 1fr; gap: 12px; min-height: var(--cap-day-step); opacity: .56; }
.cap-day-item::before { content: ''; position: absolute; left: 10px; top: 25px; bottom: -1px; width: 1px; background: #77838a5c; }
.cap-day-item:last-child::before { display: none; }
.cap-day-dot { position: relative; display: grid; place-items: center; width: 21px; height: 21px; margin-top: 1px; border-radius: 50%; border: 1px solid #a8b4bc69; color: #e2e8eb; }
.cap-day-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #e2e8eb; opacity: var(--day-emphasis,0); }
.cap-day-time { color: #b5c0c7; font-size: clamp(10px,3.3cqw,12px); line-height: 1.4; }
.cap-day-item h4 { margin-top: 5px; color: #edf0f1; font-size: clamp(17px,5.8cqw,23px); font-weight: 400; line-height: 1.15; letter-spacing: -.04em; }
.cap-day-detail { display: flex; gap: 6px; align-items: center; margin-top: 8px !important; color: #c0cbd3; font-size: clamp(10px,3.2cqw,12px); line-height: 1.35; }
.cap-day-detail img { width: 12px; height: 12px; object-fit: contain; }
.capability-reader { max-width: 390px; margin-top: 30px; color: #c2cbd1; }
.capability-reader p { font-size: 16px; line-height: 1.65; }
.capability-reader p + p { margin-top: 14px; }
.capability-reader ul, .capability-reader ol { margin: 20px 0 0; padding-left: 22px; }
.capability-reader li { margin-top: 14px; line-height: 1.55; }
.capability-reader strong { font-weight: 400; color: #eceeed; }
.cap-reader-word { margin: 25px 0; padding: 24px; border: 1px solid #ffffff1c; border-radius: 21px; background: #090c0e; }
.cap-reader-word [lang="ja"] { font-size: 32px; line-height: 1.4; }
.cap-reader-word .cap-pronunciation { font-size: 14px; color: #82939e; }
.capability-scene.is-loading .cap-app-orb { animation: cap-breathe 2s ease-in-out infinite; }
@keyframes cap-breathe { 50% { opacity: .82; transform: scale(.97); } }
@container (max-width: 280px) {
  .cap-app-prompt { gap: 14px; padding-bottom: 0; }
  .cap-tokyo-app { gap: 12px; }
  .cap-vocabulary .cap-japanese-word { margin-top: 10px; }
  .cap-vocabulary .cap-word-meaning { margin-top: 9px; }
  .cap-day-item { grid-template-columns: 23px 1fr; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .capability-scene.is-loading .cap-app-orb { animation: none; }
  .cap-day-viewport { mask-image: none; }
}

@media (max-width: 760px) {
  .side-narrative .capability-copy > p:first-child { font-size: clamp(28px,8.2vw,34px); line-height: 1.1; }
  .is-compact .side-narrative .capability-copy > p:first-child { font-size: 28px; }
}
/* Short portrait screens keep the complete scene above the lower bezel fade. */
.is-compact .capability-content { top: 11%; height: 68%; }
.is-compact .cap-day-content { --cap-day-step: clamp(72px,24cqw,77px); }