:root{--paper:#f5f2e9;--blue:#243b4a;--amber:#806246;--line:#d8ccbb;--roman:Baskerville,'Palatino Linotype',Georgia,serif;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#eeedf2 0,transparent 58%),var(--paper);color:var(--blue);font-family:var(--serif)}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #8d7150;outline-offset:5px}header{max-width:1200px;padding:28px 5%;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-family:var(--roman);font-size:26px;letter-spacing:.13em;text-decoration:none;color:var(--blue)}.brand span{display:block;font-size:12px;letter-spacing:.09em;margin-top:5px}.private-label{font-size:13px;letter-spacing:.08em;color:#7a7064;border:1px solid var(--line);padding:7px 12px}.intro{text-align:center;padding:32px 24px 18px}.eyebrow{font-family:var(--roman);letter-spacing:.19em;font-size:13px;color:var(--amber);margin:0 0 18px}h1{font-family:var(--roman);font-size:clamp(30px,5vw,57px);font-weight:400;letter-spacing:.07em;margin:0 0 22px}.lead{font-size:23px;line-height:1.8;margin:0 0 12px}.description{font-size:15px;line-height:2;color:#6d716e;margin:0}.reading{text-align:center;max-width:1100px;margin:auto;padding:18px 0 34px}.mode-switch{display:inline-flex;border:1px solid #c8b69e;background:#faf8f3;padding:4px;gap:4px}.mode-switch button{min-height:44px;min-width:112px;padding:9px 24px;border:0;background:transparent;font-size:16px;color:var(--blue)}.mode-switch button[aria-pressed=true]{background:#ddd0ba}.mode-switch button:disabled{opacity:.72}.instruction{font-size:16px;line-height:2;margin:20px 20px 8px;min-height:32px}.fan-wrap{overflow:hidden;padding:14px 0 0}.fan{position:relative;height:380px;max-width:1000px;width:100%;margin:auto}.card{position:absolute;padding:0;background:#faf7f0;border:1px solid #d4c3a6;border-radius:7px;box-shadow:0 4px 14px #25344724;transform-origin:50% 100%;transition:transform .18s,box-shadow .18s;border-width:1px;overflow:visible}.card img{display:block;width:100%;height:100%;border-radius:6px;object-fit:contain;pointer-events:none}.card:hover:not(:disabled),.card.active:not(:disabled){box-shadow:0 0 0 2px #9f825a,0 8px 22px #263c4a38}.card.selected{box-shadow:0 0 0 3px #9b7951,0 8px 20px #263c4a30}.order{position:absolute;top:9px;left:50%;transform:translateX(-50%);border-radius:50%;min-width:28px;height:28px;display:grid;place-items:center;background:#f5efdf;color:#4f3d29;font-family:var(--roman);font-size:17px;box-shadow:0 1px 6px #0003}.browse{display:flex;justify-content:center;gap:10px;align-items:center;margin:0 20px}.browse button{min-height:46px;min-width:46px;padding:10px 18px;border:1px solid #cbb89e;color:var(--blue);background:#faf8f3;font-size:16px}.browse button:disabled{opacity:.4}.browse-hint{font-size:13px;color:#7a766d;line-height:1.8;margin:12px 20px}.reset{background:none;border:0;border-bottom:1px solid #b9a286;padding:12px 2px;color:var(--amber);font-size:14px;min-height:44px;margin-top:8px}.result{max-width:760px;margin:12px auto 0;padding:36px 28px;background:#faf8f3;border:1px solid var(--line)}.result h2{font-size:26px;font-weight:400;margin:0 0 25px}.picks{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}.picks li{padding:20px 18px;border-top:1px solid #c9b496;background:#f0ebe3}.picks span{font-family:var(--roman);font-size:14px;color:var(--amber);display:block;margin-bottom:10px}.picks strong{font-size:24px;font-weight:400;line-height:1.6}label{font-size:16px;display:block;line-height:1.9;margin-bottom:12px}textarea{width:100%;resize:vertical;background:#fffdf8;border:1px solid #cdbfae;padding:18px;font:15px/1.9 var(--serif);color:#34434a}.copy{min-height:48px;font-size:16px;padding:12px 24px;color:#f9f6ee;background:#2e4957;border:0;margin-top:18px}.handoff,#copy-status{font-size:14px;line-height:1.9;color:#706b60}#copy-status:empty{display:none}footer{text-align:center;padding:54px 22px 38px}footer p{font-size:18px;letter-spacing:.06em}footer small{font-size:13px;line-height:1.9;color:#7d786e}[hidden]{display:none!important}@media(max-width:600px){header{padding:20px 22px}.brand{font-size:22px}.private-label{font-size:12px;padding:6px 8px}.intro{padding-top:24px}.lead{font-size:20px}h1{letter-spacing:.035em}.fan{height:300px}.result{margin:12px 20px 0;padding:28px 20px}.picks{grid-template-columns:1fr}.picks li{display:flex;gap:18px;align-items:center;padding:16px}.picks span{margin:0}.picks strong{font-size:23px}.browse button{padding:10px 14px}.description{font-size:14px}.reading{padding-bottom:24px}}@media(prefers-reduced-motion:reduce){.card{transition:none}}

/* Reveal supplied original faces; preserve the complete printed card. */
.card.selected img{object-fit:contain;background:#fff}
.picks .result-face{display:block;width:auto;max-width:100%;height:auto;max-height:360px;object-fit:contain;margin:0 auto 20px}
.picks li:has(.result-face){display:block}
@media(max-width:600px){.picks .result-face{max-width:220px;max-height:390px}.picks li:has(.result-face){text-align:center}.picks li:has(.result-face) span{margin-bottom:10px}}
.card.selected img{animation:card-reveal .3s ease-out}@keyframes card-reveal{from{opacity:.25}to{opacity:1}}@media(prefers-reduced-motion:reduce){.card.selected img{animation:none}}

.handoff-actions{display:flex;flex-wrap:wrap;gap:12px}.handoff-actions .copy{margin-top:18px}.copy.secondary{background:transparent;color:var(--blue);border:1px solid #a9b1ae}.copy:disabled{opacity:.55}.open-ai{display:inline-block;color:var(--blue);font-size:15px;line-height:1.9;margin:8px 0;text-underline-offset:5px}@media(max-width:600px){.handoff-actions{flex-direction:column;gap:0}.handoff-actions .copy{width:100%;padding:14px 12px;font-size:15px}}

.review-link{display:inline-block;margin-top:18px;color:var(--amber);font-size:14px;text-underline-offset:5px}.card-review{max-width:1120px;margin:auto;padding:25px 24px 50px}.card-review h1{font-family:var(--serif);font-size:28px;line-height:1.7;letter-spacing:.04em}.card-review-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px;margin-top:32px}.card-review-grid figure{margin:0}.card-review-grid img{display:block;width:100%;height:auto;aspect-ratio:685/1051;object-fit:contain}.card-review-grid figcaption{font-size:15px;line-height:1.8;margin-top:10px}.card-review-grid figcaption small{display:block;color:#7d786e;font-size:12px}.card-review .review-back{grid-template-columns:1fr;max-width:220px;margin-top:40px}@media(max-width:800px){.card-review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.card-review-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}}

/* Author-approved fixed reading: prototype card 01 only. */
.prototype-shortcut{text-align:center;padding:0 20px 14px}.prototype-shortcut a,.prototype-back{color:var(--amber);font-size:14px;line-height:1.9;text-underline-offset:5px}
.prototype-note{font-size:13px;line-height:1.9;color:#7b7266;margin:0 0 34px}
.result{max-width:860px;padding:48px 42px;background:#faf8f2}
.picks{display:block;margin:0}.picks>.reading-card{display:block;padding:42px 0 0;background:transparent;border-top:1px solid var(--line);text-align:center}
.picks>.reading-card+.reading-card{margin-top:100px}
.reading-card-heading{margin-bottom:30px}.picks .pick-order{font:400 13px/1.8 var(--serif);letter-spacing:.12em;margin-bottom:12px;color:var(--amber)}
.reading-card-name{font:400 clamp(27px,4vw,36px)/1.7 var(--serif);letter-spacing:.08em;margin:0 0 7px}
.reading-card-english{font:400 20px/1.7 var(--roman);letter-spacing:.08em;color:#87745c;margin:0}
.picks .reading-card .result-face{display:block;width:min(100%,340px);height:auto;max-width:100%;max-height:none;object-fit:contain;margin:0 auto 42px;aspect-ratio:685/1051}
.picks .reading-subtitle{font:400 clamp(21px,3vw,27px)/1.95 var(--serif);letter-spacing:.045em;max-width:620px;margin:0 auto 52px;text-wrap:pretty}
.reading-copy{max-width:620px;margin:auto;text-align:left;font:400 17px/2.15 var(--serif);letter-spacing:.025em;overflow-wrap:anywhere}
.reading-section-label{font:400 14px/1.9 var(--serif);letter-spacing:.1em;color:var(--amber);margin:0 0 25px}
.reading-copy p{margin:0 0 22px}.reading-presence{margin-top:58px}.reading-presence p{margin-bottom:10px}
.reading-question{max-width:480px;margin:88px auto 0;text-align:left;padding:0 10px}
.reading-question p{font:400 clamp(20px,2.8vw,25px)/2.1 var(--serif);letter-spacing:.05em;margin:0;text-wrap:pretty}
.reading-course{margin:112px auto 20px;max-width:620px;padding-top:30px;border-top:1px solid #ded5c7;text-align:center}
.reading-course p{font-size:14px;line-height:2.05;margin:0 0 22px;color:#817664}.picks .reading-course .course-label{font:400 15px/2 var(--serif);letter-spacing:.03em;color:var(--amber);margin:0}
.prototype-page{max-width:980px;margin:auto;padding:20px 24px 60px}.prototype-page>.result{margin-top:30px}.prototype-page>h1{font:400 25px/1.9 var(--serif);letter-spacing:.05em;margin-top:22px}.prototype-page>p{line-height:2;font-size:14px;color:#786e60}
@media(max-width:600px){.result{margin:12px 16px 0;padding:30px 22px}.picks>.reading-card{padding-top:32px}.picks>.reading-card+.reading-card{margin-top:76px}.picks .reading-card .result-face{width:min(100%,280px);max-height:none;margin-bottom:34px}.reading-card-heading{margin-bottom:24px}.reading-card-name{font-size:28px}.reading-card-english{font-size:19px}.picks .reading-subtitle{font-size:22px;margin-bottom:42px}.reading-copy{font-size:16px;line-height:2.15;letter-spacing:.015em}.reading-copy p{margin-bottom:21px}.reading-presence{margin-top:46px}.reading-question{margin-top:72px;max-width:94%;padding:0 5px}.reading-question p{font-size:21px;line-height:2.05}.reading-course{margin-top:92px}.prototype-page{padding:14px 0 40px}.prototype-page>.prototype-back,.prototype-page>h1,.prototype-page>p{margin-left:24px;margin-right:24px}.prototype-note{font-size:12px}}

/* Quiet paper: the selected image and story share one open reading surface. */
.result{border:0;box-shadow:none;border-radius:0;background:linear-gradient(115deg,#faf7f0 0%,#f7f3e9 52%,#faf7f0 100%);max-width:920px;margin:32px auto 0;padding:54px clamp(28px,7vw,88px) 72px}
.result>.eyebrow{font-size:11px;letter-spacing:.16em;color:#8b7b66}.result>h2{font-size:23px;letter-spacing:.06em;margin-bottom:46px}
.picks>.reading-card{border:0;padding-top:0;background:transparent;min-width:0}
.reading-copy{max-width:600px;font-size:18px;line-height:2.15;line-break:strict;word-break:normal;overflow-wrap:break-word}
.reading-copy p{margin-bottom:24px}.reading-presence{margin-top:42px}.reading-presence p{margin-bottom:8px}
.reading-question{max-width:440px;margin-top:120px;padding:0 12px}.reading-question p{font-size:24px;line-height:2.15;word-break:normal;overflow-wrap:break-word}
.reading-course{border:0;max-width:600px;margin-top:156px;padding:0 0 18px}.reading-course p{font-size:14px;line-height:2.1;color:#8a7a66}.picks .reading-course .course-label{font-size:14px;line-height:2.1}
@media(max-width:600px){.result{margin:26px auto 0;padding:38px 26px 52px;width:100%;max-width:100%;border:0}.result>h2{font-size:22px;margin-bottom:36px}.reading-copy{font-size:17px;line-height:2.15;letter-spacing:.015em}.reading-copy p{margin-bottom:23px}.reading-presence{margin-top:36px}.reading-presence p{margin-bottom:8px}.reading-question{max-width:92%;margin-top:96px;padding:0 4px}.reading-question p{font-size:22px;line-height:2.1}.reading-course{margin-top:128px;padding-bottom:8px}.picks .reading-card .result-face{width:min(100%,290px);height:auto;max-height:none;object-fit:contain}.picks>.reading-card{padding-top:0}.reading-section-label{font-size:13px}.reading-course p{font-size:14px}}
@media(max-width:360px){.result{padding-left:22px;padding-right:22px}.reading-question{max-width:96%}.reading-question p{font-size:21px}}

/* Selection begins with the card itself, on the continuous page background. */
.result{background:transparent;border:0;box-shadow:none}
.reading-card-name{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.reading-card-name:focus{outline:none}
.reading-card-name:focus-visible{outline:none;text-decoration:underline;text-decoration-color:#b59a73;text-decoration-thickness:1px;text-underline-offset:.3em}

/* 01 refinements: full smaller face, unframed name, meaningful question lines. */
.picks .reading-card.has-approved-reading .result-face{width:min(100%,260px);height:auto;max-width:100%;max-height:none;object-fit:contain}
.picks .reading-question .question-line,.picks .reading-question .question-word,.picks .reading-question .question-rest,.picks .reading-question .question-phrase{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
.picks .reading-question .question-line{display:block}
.picks .reading-question .question-word{display:inline;white-space:nowrap}
.picks .reading-question .question-rest{display:inline}
@media(max-width:600px){.picks .reading-card.has-approved-reading .result-face{width:min(100%,240px)}}

.picks .reading-question .question-phrase{display:inline-block;white-space:nowrap}

/* The approved course is now reachable, with a quiet, generous tap area. */
.picks .reading-course a.course-label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:8px 6px;text-decoration:none;text-underline-offset:5px}.picks .reading-course a.course-label:hover{text-decoration:underline}

/* Three cards in view, one story at a time. Single-card reading remains unchanged. */
.three-overview{max-width:660px;margin:0 auto 56px}.three-hint{text-align:center;font:14px/2 var(--serif);letter-spacing:.035em;color:#8a7962;margin:0 0 24px}
.three-card-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.reading-tab{min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:14px 8px 16px;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--blue);font:inherit;cursor:pointer;border-radius:0}
.reading-tab img{display:block;width:min(100%,148px);height:auto;aspect-ratio:685/1051;object-fit:contain;box-shadow:0 3px 12px #6b59430d}.reading-tab-order{font:13px/1.8 var(--serif);color:#8c7a60;letter-spacing:.06em}.reading-tab-name{font:17px/1.9 var(--serif);letter-spacing:.025em;overflow-wrap:break-word;text-align:center;max-width:100%}
.reading-tab[aria-selected=true]{border-bottom-color:#b29672}.reading-tab[aria-selected=true] .reading-tab-name{color:#775a36}.reading-tab:hover{background:#fffaf426}.reading-tab:focus-visible{outline:1px solid #b29672;outline-offset:4px}
#three-panel[role=tabpanel]:focus{outline:none}#three-panel[role=tabpanel]:focus-visible{outline:1px solid #c6b397;outline-offset:8px}
.picks .three-card-copy .reading-card-heading{margin-bottom:34px}
@media(max-width:600px){.three-overview{margin-bottom:42px}.three-card-tabs{gap:12px}.reading-tab{padding:10px 2px 12px;gap:10px}.reading-tab img{width:min(100%,108px)}.reading-tab-name{font-size:15px;line-height:1.8}.reading-tab-order{font-size:12px}.three-hint{font-size:13px;margin-bottom:20px}.picks .three-card-copy .reading-card-heading{margin-bottom:30px}}
@media(max-width:360px){.three-card-tabs{gap:8px}.reading-tab-name{font-size:14px}.reading-tab-order{font-size:11px}}

/* A quiet introduction; perspective labels follow the order of selection. */
.reading-guide{max-width:660px;margin:36px auto 42px;padding:0 14px;text-align:left;font-family:var(--serif);color:var(--blue)}
.reading-guide h2{font:400 15px/1.9 var(--serif);letter-spacing:.08em;margin:0 0 20px;color:var(--amber)}
.reading-guide h2>span{display:inline-block;margin-left:14px;letter-spacing:.04em}
.reading-guide h3{font:400 15px/1.9 var(--serif);margin:28px 0 12px}
.guide-intro,.guide-steps{font:400 16px/2 var(--serif);letter-spacing:.02em}
.guide-steps{padding-left:1.65em;margin:0}.guide-steps li{padding-left:.25em;margin:6px 0}
.guide-roles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;margin:0 0 30px;text-align:center}
.guide-roles li{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;line-height:1.9}
.guide-roles strong{font-weight:400;font-size:16px;line-height:1.9}.guide-roles strong span{display:inline-block}
.guide-role-number{color:#806246;font-size:13px}.guide-note{font-size:13px;line-height:1.9;color:#716b60;margin:18px 0 0}
.reading-tab-role{font:400 14px/1.9 var(--serif);color:#806246;min-height:3.8em;display:flex;justify-content:center;align-content:center;flex-wrap:wrap;column-gap:0;max-width:100%}
.reading-tab-role>span{display:inline-block}
.reading-perspective{font:400 14px/2 var(--serif);color:#806246;margin:24px 0 0;letter-spacing:.04em}
@media(max-width:600px){.reading-guide{margin:28px auto 32px;padding:0 24px}.reading-guide h2{font-size:14px;letter-spacing:.04em}.reading-guide h2>span{margin-left:10px}.guide-intro,.guide-steps{font-size:15px;line-height:2}.guide-roles{gap:10px}.guide-roles strong{font-size:14px;min-height:3.8em;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}.guide-roles li{font-size:13px}.reading-tab-role{font-size:13px}.reading-perspective{font-size:13px;letter-spacing:0}}

/* Small paper cards for the three reading perspectives. */
.role-card,.reading-tab-role{position:relative;border:1px solid #cdbb9e;border-radius:3px;background:#faf7ef;box-shadow:0 2px 5px #80624608}
.role-card::before,.reading-tab-role::before{content:"";position:absolute;inset:5px;border:1px solid #ded3c2;border-radius:1px;pointer-events:none}
.role-card{width:112px;max-width:100%;aspect-ratio:5/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:15px 10px;margin-bottom:6px}
.role-card strong{font-size:15px;line-height:1.9;max-width:100%}.role-card strong span{display:inline-block}
.reading-tab-role{width:104px;max-width:100%;min-height:0;aspect-ratio:5/7;padding:14px 10px;align-content:center;font-size:14px;line-height:1.9}
@media(max-width:600px){.role-card{width:90px;padding:12px 9px;gap:8px}.role-card strong{font-size:14px;min-height:0}.reading-tab-role{width:82px;padding:12px 8px;font-size:13px}.guide-roles{gap:10px}}
@media(max-width:360px){.role-card{width:82px;padding:10px 8px}.role-card strong{font-size:13px}.reading-tab-role{font-size:12px;padding:10px 7px}.role-card::before,.reading-tab-role::before{inset:4px}}

.return-home{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:var(--amber);font:400 14px/1.9 var(--serif);text-decoration:none;border-bottom:1px solid #d8ccbb}.return-home:hover{color:var(--blue);border-bottom-color:var(--amber)}@media(max-width:600px){body>header{flex-wrap:wrap;gap:12px 20px}.return-home{font-size:13px}}