/* Feedback preview: retained lesson design */
:root{--tb:54px}
body{padding-bottom:50px}
.screen{height:calc(100dvh - var(--tb) - 50px)}
.preview-nav{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#162d35;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;font-size:13px;box-shadow:0 -2px 12px #0002}
.preview-nav a{color:#fff;background:#ffffff15;padding:5px 10px;border-radius:6px;text-decoration:none}.preview-nav a:hover{background:#ffffff35}.preview-nav b{color:#ffe070;margin-right:8px}
.review-wrap{gap:12px!important;justify-content:flex-start!important;padding-top:24px!important}.review-wrap h2{font-size:1.65rem}.review-wrap .lead{font-size:1rem}.review-grid{width:min(950px,100%)}.review-grid .card{padding:20px!important}.review-grid h3{font-size:1.25rem}.review-grid p{font-size:1.05rem}.method-sentence{line-height:2.1!important}.review-wrap>.card{padding:10px 16px!important}.review-wrap>.card .hint{margin-top:4px}
.keyword{font-size:1em;min-width:66px;padding:5px 10px!important;color:#143e3b;background:#e5f3f0;border:2px dashed #72a29b;cursor:pointer}.keyword.active-slot{outline:3px solid #e5a829;outline-offset:3px}.keyword.slot-correct{background:#dbf5e7;border-color:#168151}.keyword.slot-wrong{background:#ffe9e4;border-color:#cb5035}
.word-bank{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.word-bank button{border:1px solid #cfc6b3;border-radius:10px;background:#fff;padding:8px 22px;font-weight:800;cursor:pointer}.word-bank button:hover{background:#fff2ca}.bank-label{font-size:.9rem;font-weight:800;color:#55616c;margin-right:5px}.review-actions{display:flex;gap:10px}.review-wrap #reviewMsg{min-height:1.6em;max-width:950px;text-align:center}
.passage button.s{font:inherit;border:0;border-bottom:2px dashed #a6a099;color:inherit;text-align:left;display:inline;line-height:inherit;padding:0 2px}.passage .line{display:block;margin-bottom:16px}.passage-wrap{padding-top:58px}.passage{font-size:clamp(1.1rem,.7rem + 1vw,1.5rem);line-height:2.1}.cluecount i{font-size:.88rem}
.background-note{padding:16px 18px;border:1px solid #c5d6e3;border-left:5px solid #3775ad;border-radius:10px;background:#eef5fc;color:#243f57;font-size:1rem;line-height:1.7}.mini-label{display:block;font-size:.83rem;font-weight:800;letter-spacing:.04em;color:#397c76;margin-bottom:8px}.background-note .mini-label{color:#376693}.experience-prompt{background:#fff6e0;border-radius:10px;padding:16px;font-size:1rem}.experience-prompt .mini-label{color:#a06415}.experience-prompt .hint{margin-top:8px}.lt-body{font-size:clamp(1.1rem,.7rem + .8vw,1.5rem)!important}.letter{max-height:calc(100% - 60px);overflow:auto}.stage-tag{max-width:95%;font-size:.82rem}
.personal-card-area{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;flex:1;align-items:start;max-width:1100px;margin:0 auto;width:100%}.my-inference-card{background:#fff;border:2px solid #d8d3c5;border-top:7px solid #e2691f;border-radius:16px;padding:28px;box-shadow:0 8px 20px #00000008}.my-inference-card h2{font-size:1.5rem}.card-choice{margin-top:24px;font-size:1.25rem}.card-choice strong{color:#b94e21}.card-reason{margin-top:18px;white-space:pre-wrap;line-height:1.8}.basis{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-top:1px solid #e6dfd0;margin-top:28px;padding-top:16px;font-size:.92rem}.basis>b{background:#e5f2f0;border-radius:20px;padding:5px 12px}.share-steps{background:#eaf3f0;border-radius:16px;padding:24px}.share-steps h3{font-size:1.2rem}.share-steps li{margin:14px 0}.board-top{max-width:1100px;width:100%;margin:auto}.preview-nav~*{display:none}
@media(max-width:860px){.screen{height:auto;min-height:calc(100dvh - 110px)}body{padding-bottom:80px}.preview-nav{flex-wrap:wrap;font-size:11px}.preview-nav b{width:100%;text-align:center}.personal-card-area{grid-template-columns:1fr}.review-grid{grid-template-columns:1fr}.stage.light:has(#passage){height:auto;min-height:440px}.review-wrap{padding:20px 16px!important}}

/* Revision 2: clear text contrast and text-only phrase selection. */
:root{color-scheme:light}
.word-bank,.word-bank .bank-label{color:#111!important;opacity:1!important}
.word-bank button{color:#111!important;background:#fff!important;opacity:1!important;border:2px solid #5a676a;font-weight:800}
.word-bank button:hover,.word-bank button:focus-visible{background:#fff0b3!important;border-color:#3d4a50}
#passage{color:#18212b!important;background:transparent!important;user-select:none}
#passage .s{all:unset;font:inherit;color:#18212b;display:inline;cursor:pointer;background:transparent;border:0;border-radius:2px;padding:0;transition:box-shadow .15s}
#passage .s:hover{box-shadow:inset 0 -3px #d6b84b;background:transparent}
#passage .s.hl{background:linear-gradient(transparent 48%,#ffe070 48%);color:#18212b;box-shadow:none}
#passage .s:focus-visible{outline:2px solid #24557c;outline-offset:3px}
.my-inference-card,.my-inference-card *,.share-steps,.share-steps *{color:#111!important;opacity:1!important}
.my-inference-card{background:#fff!important}.share-steps{background:#eaf3f0!important}
.my-inference-card .basis b{background:#e5f2f0!important}

/* Revision 3: original passage and three-column card presentation. */
#m4 [data-step="clue"] .stage.light{background:linear-gradient(120deg,#273650,#1e252d);color:#f4f6fa}
#m4 [data-step="clue"] .stage-tag{color:#f4f6fa}
#m4 [data-step="clue"] #passage{color:#f4f6fa!important;background:transparent!important}
#m4 [data-step="clue"] .passage{font-size:clamp(1.1rem,.8rem + .75vw,1.65rem);line-height:2.1;font-weight:700}
#m4 [data-step="clue"] .passage .line{margin-bottom:12px}
#m4 [data-step="clue"] #passage .s{all:unset;display:inline;font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:5px;padding:1px 2px}
#m4 [data-step="clue"] #passage .s:hover{background:#ffffff12}
#m4 [data-step="clue"] #passage .s.hl{color:#111!important;background:#f3d963;box-shadow:0 0 0 2px #9f9250}
#m4 [data-step="clue"] #passage .s:focus-visible{outline:2px solid #f3d963;outline-offset:3px}
@media(max-width:860px){#m4 [data-step="clue"] .stage.light{height:auto;min-height:520px}}

/* Revision 4: distinguish hover/focus from confirmed highlighting. */
#m4 [data-step="clue"] #passage .s{transition:background-color .12s,box-shadow .12s,color .12s}
#m4 [data-step="clue"] #passage .s:not(.hl):hover,
#m4 [data-step="clue"] #passage .s:not(.hl):focus-visible{
 background:#4a4d39;color:#fff9d6!important;
 box-shadow:0 0 0 2px #ffe070;
 text-decoration:underline;text-decoration-color:#ffe070;text-decoration-thickness:3px;text-underline-offset:6px;
 outline:none;
}
#m4 [data-step="clue"] #passage .s.hl:hover,
#m4 [data-step="clue"] #passage .s.hl:focus-visible{
 background:#ffe26b;color:#111!important;box-shadow:0 0 0 3px #fff4b5;outline:none;
}
/* Revision 5: mission 3 keeps its dark illustrated theme; output is a personal card. */
#m6{color:#f5f6f8;background:#10151b}
#m6 .split{grid-template-columns:minmax(0,1.2fr) minmax(380px,1fr)}
#m6 [data-step="write"] .stage{background:#171c23;padding:16px 20px}
#m6 .stage-tag{color:#fff;background:#353a42;border:1px solid #646971;padding:5px 12px;border-radius:24px}
#m6 .panel{background:#12171d;color:#f5f6f8;border-color:#454950}
#m6 .panel .q,#m6 .panel p{color:#f5f6f8!important}
#m6 .say{background:#2b3035;color:#f5f6f8!important;border-left:5px solid #f2d661;border-radius:14px}
#m6 .say b{color:#f2d661}
#m6 .namefield{background:#24292f;border-color:#50565c;color:#f5f6f8!important}
#m6 .namefield span{color:#f5f6f8!important}
#m6 input,#m6 textarea{background:#30353c!important;color:#fff!important;border-color:#62676e}
#m6 input::placeholder,#m6 textarea::placeholder{color:#bac0c7!important;opacity:1}
#m6 .tag{background:#252a31!important;color:#f4f5f7!important;border-color:#555b64}
#m6 .tag.clue{color:#b6cff7!important}#m6 .tag.exp{color:#f6c6a6!important}#m6 .tag.know{color:#d6c2ff!important}
#m6 .tag[aria-pressed=true]{background:#4b4b35!important;border-color:#f2d661;color:#fff7d2!important}
#m6 .btn.white{background:#383e46;color:#fff;border-color:#60666e}
#m6 .who{position:relative;overflow:hidden;align-items:flex-end;padding:26px;border:2px solid #62666b;isolation:isolate;color:#fff!important;background-color:#252c35;background-size:cover;background-position:center}
#m6 .who.hooke{background-image:linear-gradient(0deg,#070a0ee8 0%,#0b10183d 75%),url(../images/hooke-book.webp)}
#m6 .who.leeu{background-image:linear-gradient(0deg,#070a0ee8 0%,#0b10183d 75%),url(../images/leeuwenhoek.webp)}
#m6 .who .nm2{font-size:clamp(1.8rem,3vw,3rem);color:#fff!important;line-height:1.3}
#m6 .who small{color:#fff!important;text-shadow:0 2px 5px #000;font-size:1rem}
#m6 .who .yr{background:#f2d661;color:#161a20!important;border-radius:20px;padding:3px 12px;font-size:.9rem;display:inline-block;margin-bottom:10px}
#m6 .who[aria-pressed=true]{border-color:#ffe070;box-shadow:0 0 0 3px #ffe070}
#m6 .who:hover{border-color:#ffe070}
#m6 [data-step="board"] .full{background:#141a21;color:#f5f6f8}
#m6 #connTx{background:#303b43;color:#fff}
#m6 #boardCols.personal-card-area{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;max-width:1100px;margin:0 auto;width:100%;align-items:start}
#m6 .my-inference-card,#m6 .my-inference-card *{color:#111!important}
#m6 .my-inference-card{background:#fff!important}
#m6 .share-steps,#m6 .share-steps *{color:#111!important}.share-steps{background:#eaf3f0!important}
#m6 .my-inference-card .basis>b{background:#e5f2f0!important}
@media(max-width:860px){#m6 .split{grid-template-columns:1fr}#m6 [data-step="write"] .stage{height:620px}#m6 #boardCols.personal-card-area{grid-template-columns:1fr}}

/* Revision 6: keep illustrated cards within their own column. */
#m6 [data-step="write"] .split{display:grid;position:relative;grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr);gap:20px;height:100%;padding:calc(var(--tb) + 12px) 20px 20px;overflow:hidden}
#m6 [data-step="write"] .stage{position:relative;inset:auto;min-width:0;min-height:0;width:auto;height:100%;padding:0;background:transparent;overflow:visible;container-type:normal}
#m6 [data-step="write"] .stage-tag{top:6px;left:8px;z-index:4;max-width:95%;font-size:.9rem}
#m6 [data-step="write"] .pick2{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:100%;min-height:0}
#m6 [data-step="write"] .who{width:100%;min-width:0;min-height:0;height:100%;background-size:cover;background-position:center;padding:22px 26px;align-items:flex-end;overflow:hidden}
#m6 [data-step="write"] .who .nm2{font-size:clamp(1.7rem,2.5vw,2.7rem);line-height:1.15}
#m6 [data-step="write"] .who small{font-size:clamp(.85rem,1.05vw,1.08rem);line-height:1.4}
#m6 [data-step="write"] .panel{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:100%;min-height:0;padding:22px;overflow:auto}
#map.screen{height:calc(100dvh - 50px);overflow:auto}
#map .mapgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none!important;grid-auto-rows:minmax(210px,auto);gap:18px;padding:calc(var(--tb) + 18px) 22px 28px;height:auto;min-height:100%;align-content:start;overflow:visible}
#map .mapgrid>.bomi{grid-column:1/-1;min-height:0;align-self:start}
#map .mapgrid>.mcard{grid-column:auto!important;grid-row:auto!important;position:relative;min-width:0;min-height:220px;height:auto;margin:0;padding:26px 28px;align-self:stretch;overflow:hidden}
#map .mapgrid>.mcard h3{font-size:clamp(1.5rem,2.5vw,2.4rem);max-width:85%}
@media(max-width:860px){
 #m6 [data-step="write"] .split{display:flex;height:auto;padding:calc(var(--tb) + 12px) 14px 20px;overflow:visible;gap:18px}
 #m6 [data-step="write"] .stage{position:relative;height:600px;min-height:600px;width:100%}
 #m6 [data-step="write"] .panel{position:relative;inset:auto;width:100%;height:auto;max-height:none;overflow:visible}
 #map .mapgrid{grid-auto-rows:minmax(180px,auto);padding-left:14px;padding-right:14px}
 #map .mapgrid>.mcard{min-height:200px}
}
@media(max-width:600px){#map .mapgrid{grid-template-columns:1fr}#map .mapgrid>.mcard{min-height:210px}}

body{padding-bottom:0}.screen{height:calc(100dvh - var(--tb))}#map.screen{height:100dvh}@media(max-width:860px){.screen{height:auto;min-height:calc(100dvh - var(--tb))}}