/* Seoha's study: distinct portrait cuts and framed, concealed story reveals. */
@media screen {
 .branch-wheel-wrap {position:relative;margin:0 0 20px;}
 .branch-wheel {height:280px;padding-block:112px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;outline:none;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);touch-action:pan-y;}
 .branch-wheel::-webkit-scrollbar {display:none}
 .branch-option {height:56px;min-height:56px;display:grid;grid-template-columns:40px 62px 1fr;align-items:center;gap:8px;padding:0 18px;scroll-snap-align:center;cursor:pointer;color:#88a298;}
 .branch-option b {font:400 26px var(--serif)}
 .branch-option span {font:400 22px var(--serif)}
 .branch-option small {font:12px var(--sans);text-align:right;font-variant-numeric:tabular-nums}
 .branch-option[aria-selected=true] {color:#eff4dd;}
 .branch-selection {position:absolute;top:112px;left:0;right:0;height:56px;background:#63978026;border-block:1px solid #a0c7a966;pointer-events:none;}
 .branch-wheel:focus-visible {outline:1px solid #badfc1;border-radius:6px}
 .answer-screen[data-step="3"] .answer-content h1 {margin-bottom:17px}
 .reaction-panel {height:auto;aspect-ratio:3/4;margin:34px 0 0;border:0;isolation:isolate;}
 .reaction-panel img {height:100%;width:100%;object-fit:cover;object-position:50% 0;transform:none;}
 .reaction-panel:after {content:'';position:absolute;inset:0;background:linear-gradient(transparent 62%,#08191ba8);z-index:1}
 .reaction-panel .speech-bubble {left:auto;right:18px;bottom:20px;max-width:78%;font-size:19px;padding:21px 29px;}
 .first-words {padding-top:38px;}
 .first-words h2 {font-size:25px;margin-bottom:20px;}
 .first-words p {font-size:18px;}
 .story-turn {padding-top:35px;}
 .tea-dialogue {height:430px;}
 .tea-dialogue img {object-position:43% 30%;}
 .writing-dialogue {height:420px;}
 .writing-dialogue img {object-position:44% 50%;}
 .writing-dialogue .speech-bubble {bottom:18px;right:16px;font-size:18px;}
 .wealth-dialogue {height:auto;aspect-ratio:2/3;}
 .wealth-dialogue img {height:100%;object-position:50% 0;}
 .wealth-dialogue .speech-bubble {bottom:18px;left:18px;font-size:19px;padding:23px 28px;}
 .love-dialogue {height:auto;aspect-ratio:2/3;}
 .love-dialogue img {height:100%;object-position:50% 0;transform:none;}
 .love-dialogue .speech-bubble {right:16px;bottom:18px;font-size:18px;padding:24px 26px;}
 .last-dialogue {height:445px;}
 .last-dialogue img {object-position:46% 30%;}
 .last-dialogue .speech-bubble {left:18px;bottom:18px;font-size:18px;}
 .chapter-gate {padding:54px 25px 37px;}
 .chapter-gate > span {font-size:76px;color:#b7d1b4;opacity:1;text-shadow:0 0 35px #b9d79a30;}
 .chapter-gate:before,.chapter-gate:after {top:92px;}
 .chapter-gate h2 {font-weight:500;font-size:27px;}
 .chapter-gate h2 em {color:#e3dcaf;}
 .wealth-graph {position:relative;background:linear-gradient(160deg,#203c30,#0e231d);padding:25px 18px 10px;border:1px solid #9ab885;box-shadow:inset 0 0 0 5px #0b2019,0 10px 35px #0004;}
 .wealth-graph:before {content:'';position:absolute;inset:9px;border:1px solid #a9be7b40;pointer-events:none;}
 .graph-caption {display:flex;align-items:center;justify-content:space-between;padding:0 3px;font:17px var(--serif);color:#d8e4c1;}
 .graph-caption small {font:10px var(--sans);color:#b2c3aa;}
 .wealth-graph svg {width:100%;height:auto;display:block;margin-top:10px;}
 .graph-years {display:grid;grid-template-columns:repeat(5,1fr);font:11px var(--sans);color:#b3caab;margin:0 0 26px;}
 .wealth-graph .wealth-pair {gap:9px;}
 .wealth-graph .wealth-pair>div {padding:15px 6px;background:#52765035;}
 .wealth-graph .wealth-pair>div:first-child {background:#98715c30;border-color:#b09073;}
 .wealth-graph .wealth-pair span {font-size:12px;color:#e1e5cd;}
 .affinity-card {padding:31px 22px 12px;border-color:#a3b98b;background:radial-gradient(ellipse at 50% 20%,#42614a,#10271e 65%);box-shadow:inset 0 0 0 5px #0b2019,0 10px 35px #0004;}
 .affinity-kicker {font:11px var(--sans);letter-spacing:.12em;color:#baceb2;margin:0 0 14px;}
 .affinity-card h3 {font:400 21px/1.6 var(--serif);margin:0 0 24px;overflow-wrap:anywhere;}
 .affinity-card h3 strong {font-size:27px;font-weight:600;color:#e8e6c7;}
 .affinity-portrait {width:82%;height:auto;aspect-ratio:4/5;border-radius:2px;border:1px solid #b8bc8d80;margin:0 auto 22px;background:#234235;}
 .affinity-portrait img {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px);transform:scale(1.06);opacity:.85;}
 .affinity-portrait:after {content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,#10271e85);}
 .affinity-portrait .portrait-lock {position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:48px;height:48px;display:grid;place-items:center;border:1px solid #d7e4be80;border-radius:50%;color:#eff1d8;background:#173a2d99;filter:none;font:25px var(--serif);z-index:2;}
 .affinity-portrait small {position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#dae0cd;font:10px var(--sans);z-index:2;}
 .affinity-card .sealed-preview {padding-inline:0;}
 .affinity-card .sealed-lines>div {min-height:48px;gap:16px;}
 .affinity-card .sealed-lines span {font-size:12px;color:#d5e3c5;}
 .affinity-card .mosaic {height:20px;}
 .story-contents {padding:30px 22px;}
 .story-contents>h2 {font-size:29px;line-height:1.6;margin:0 0 42px;}
 .story-contents>h2 em {font-style:normal;color:#d6dfab;}
 .story-toc {position:relative;margin:0 0 24px;padding:30px 22px 28px;border:1px solid #9fb484;background:radial-gradient(ellipse at 50% 0,#31543d,#142c21 65%);box-shadow:inset 0 0 0 5px #0c2119;}
 .story-toc:before {content:'';position:absolute;inset:10px;border:1px solid #93af713d;pointer-events:none;}
 .story-toc:after {inset:auto 15px 15px auto;width:23px;height:23px;border-color:#a5bd7b;}
 .toc-ornament {text-align:center;color:#d5d9ab;font-size:28px;line-height:1;margin-bottom:12px;}
 .toc-heading {display:block;text-align:center;margin-bottom:25px;}
 .toc-heading>span {display:inline-block;font:600 12px var(--sans);color:#163629;background:#c6d6a7;padding:6px 15px;letter-spacing:.12em;margin-bottom:18px;}
 .toc-heading small {display:block;color:#b4c8a3;font-size:11px;margin-bottom:10px;}
 .toc-heading h3 {font:600 26px/1.55 var(--serif);color:#ecedcf;letter-spacing:-.045em;margin:0;}
 .story-toc ul {padding:0;list-style:none;margin:0;}
 .story-toc li {position:relative;padding:12px 0 12px 15px;font:13px/1.75 var(--sans);color:#b8cdb2;border-bottom:1px solid #66895e30;word-break:keep-all;}
 .story-toc li:before {content:'·';position:absolute;left:0;color:#d5dfae;}
 .story-toc li strong {font-weight:600;color:#f0ebc7;font-size:15px;}
 .story-toc li:last-child {border:0;}
 @media(max-width:350px) {.branch-option{grid-template-columns:30px 53px 1fr;padding-inline:10px;gap:5px}.branch-option small{font-size:11px}.toc-heading h3{font-size:23px}.story-toc{padding-inline:18px}.reaction-panel .speech-bubble{font-size:17px;padding:20px 24px}.wealth-dialogue .speech-bubble{font-size:17px}.love-dialogue .speech-bubble{font-size:16px}.affinity-card{padding-inline:18px}.affinity-card h3 strong{font-size:24px}.chapter-gate h2{font-size:24px}}
}

/* Explicit confirmation remains reachable with the mobile keyboard open. */
@media screen {
 .answer-name-row {display:flex;align-items:center;gap:12px;}
 .answer-name-row #answer-name {flex:1;min-width:0;width:0;}
 .answer-confirm {flex-shrink:0;min-width:60px;min-height:48px;padding:12px 19px;border:1px solid #b3e9d865;border-radius:28px;background:#b3e9d8;color:#102f2b;font:600 15px/1.4 var(--sans);cursor:pointer;touch-action:manipulation;}
 .answer-confirm:hover {background:#cdf5e8;}
 .answer-confirm:active {transform:translateY(1px);}
 .answer-actions {display:flex;justify-content:flex-end;margin-top:22px;}
 .answer-actions .answer-confirm {min-width:92px;}
 .answer-screen {min-height:100dvh;padding-bottom:max(28px,env(safe-area-inset-bottom));}
 .answer-screen[data-step="3"] {min-height:max(100dvh,760px);}
 .answer-error {margin-bottom:0;}
 @media(max-height:550px) {
  .answer-screen:not([data-step="3"]) {padding-top:100px;}
  .answer-content h1 {font-size:25px;margin-bottom:20px;}
 }
}