/* Writing, requested hints, self-review. Existing approved art and type are preserved. */
.letter-howto{margin:28px 0 36px;padding:24px;border:1px solid #fbf7f028;border-radius:18px;background:linear-gradient(135deg,#fbf7f00b,#fbf7f003);box-shadow:inset 0 1px #fbf7f012}
.letter-howto h2{font-size:18px;font-weight:600}.letter-howto ol{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.letter-howto li{display:flex;align-items:flex-start;gap:12px;min-width:0}.howto-number{flex-shrink:0;white-space:nowrap;color:var(--synk-stitch);font-size:13px;line-height:1.8;font-variant-numeric:tabular-nums}.letter-howto h3{font-size:15px;line-height:1.6}.letter-howto li p{font-size:13px;line-height:1.75;color:var(--synk-stone);margin-top:6px}.letter-howto .howto-note{border-top:1px solid #fbf7f020;padding-top:16px;font-size:13px;line-height:1.75;color:var(--synk-stone)}
@media(max-width:650px){.letter-howto{padding:20px;margin:24px 0}.letter-howto ol{grid-template-columns:1fr;gap:18px}.letter-howto li p{font-size:14px}.letter-howto h3{font-size:16px}}
.start-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:20px 24px;background:var(--synk-ink);border-radius:18px}
.start-panel .friend-line,.start-panel .actions{margin:0}.start-panel .actions{flex-shrink:0;flex-direction:column;align-items:flex-end;gap:8px}
.tone-rule{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--synk-stitch);padding-top:20px}.tone-rule>span{border:1px solid currentColor;border-radius:6px;flex-shrink:0;padding:0 6px;font-size:11px}
.writing-card textarea{min-height:320px}.writing-card label{margin-top:18px}
.companion-guide,.review-guide{min-width:0}.companion-top>.scene-image{max-height:235px;object-fit:cover}.companion-top .friend-line{font-size:14px;margin-top:18px}
.hints-panel{margin-top:24px;padding-top:22px;border-top:1px solid #fbf7f02b}.hint-heading h3{font-size:19px}.hint-heading p{color:var(--synk-stone);font-size:13px;margin:6px 0 14px}
.hint-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:14px;background:var(--synk-ink);border-color:#fbf7f026}
.hint-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}.hint-option{padding:6px;display:flex;flex-direction:column;gap:8px;border-radius:12px;font-size:12px;line-height:1.55;word-break:keep-all}.hint-option .scene-image{border-radius:7px}.hint-option span{padding:0 2px 4px}.hint-option[aria-pressed=true]{border-color:var(--synk-stitch);background:var(--synk-ink)}
.hint-answer{border-left:2px solid var(--synk-stitch);padding:3px 0 3px 16px;margin-top:20px}.hint-answer p{font-size:14px;margin-top:8px}.hint-answer .quiet{font-size:12px;margin-top:8px;padding-left:0}.hint-answer .second-hint{padding-top:14px;margin-top:14px;border-top:1px solid #fbf7f026;color:var(--synk-stitch)}
.review-intro>.scene-image{max-height:190px;object-fit:cover;margin-bottom:18px}.review-intro>p{font-size:14px;margin-top:6px}.review-guide>h2{font-size:23px;margin-top:26px}.review-description{font-size:14px;color:var(--synk-stone);margin-top:10px}
.self-checks{border:0;padding:0;margin:18px 0}.self-check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:18px 0;border-block-start:1px solid #fbf7f02b}.self-check input{accent-color:var(--synk-stitch);margin:4px 0 0;width:18px;height:18px;flex-shrink:0}.self-check strong{display:block;font-size:14px;font-weight:500}.self-check span>span{display:block;font-size:12px;color:var(--synk-stone);margin-top:7px}.self-check:has(:checked) strong{color:var(--synk-stitch)}
.first-draft{border-top:1px solid #fbf7f02b;padding-top:12px;margin-top:22px}.first-draft pre{font-size:14px;padding:18px;background:var(--synk-ink);border-radius:12px;margin-top:12px}
.done-heading{margin:0 0 30px}.done-heading h2{font-size:clamp(23px,2vw,29px)}.done-heading p{color:var(--synk-stone);margin-top:10px;font-size:15px;max-width:640px}.done-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px}.done-art>p{font-size:12px;color:var(--synk-stone);margin-top:14px}.done-art .scene-image{aspect-ratio:1672/941;object-fit:contain}
.draft-comparison{border:1px solid #fbf7f02b;border-radius:18px;padding:14px 22px;margin-top:26px}.draft-comparison summary{font-size:15px}.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:20px 0}.compare-grid h3{font-size:16px;color:var(--synk-stitch);margin-bottom:16px}.compare-grid .letter-original{font-size:15px}.unchanged-note{font-size:13px;color:var(--synk-stone);margin-top:24px}
[hidden]{display:none!important}.self-check input:focus-visible{outline:2px solid var(--synk-stitch);outline-offset:4px}
@media(hover:hover){.hint-option:hover{border-color:var(--synk-stitch)}.self-check:hover strong{color:var(--synk-stitch)}}
@media(max-width:820px){.start-panel{align-items:flex-start}.draft-layout .companion-guide{grid-row:1}.companion-top{display:none}.hints-panel{margin:0;padding:0;border:0}.hint-heading{display:none}.hint-options{max-width:540px}.hint-answer{max-width:580px}.review-layout .review-guide{grid-row:1}.review-intro{display:none}.review-guide>h2{margin-top:0}.first-draft{margin-top:16px}.self-check{padding:13px 0}.self-check span>span{font-size:13px}.review-guide .action-note{margin-bottom:4px}.done-layout{grid-template-columns:1fr}.done-art{max-width:600px}}
@media(max-width:560px){.start-panel{padding:18px;display:block}.start-panel .actions{align-items:stretch;margin-top:18px}.start-panel .action-note{text-align:center}.start-panel .friend-line{font-size:14px}.writing-layout{gap:22px}.hint-options{gap:10px}.hint-option{font-size:12px}.hint-answer{padding-left:14px}.tone-rule{font-size:13px}.writing-card textarea{font-size:16px;min-height:290px}.compare-grid{grid-template-columns:1fr;gap:24px}.compare-grid>section+section{border-top:1px solid #fbf7f02b;padding-top:20px}.draft-comparison{padding:12px 17px}.done-heading p{font-size:14px}.self-check{gap:10px}.self-check strong{font-size:14px}}
@media(prefers-reduced-motion:no-preference){.hint-answer{animation:hint-in 180ms ease-out}@keyframes hint-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}}

.task-reminder{margin-bottom:22px;padding:10px 0;border-block:1px solid #fbf7f020}.task-reminder summary{font-size:14px;color:var(--synk-stone);padding-block:4px;min-height:36px}.task-reminder .clues{margin:12px 0 6px}
@media(max-width:820px){.hints-panel .hint-heading{display:block}.hints-panel .hint-heading h3{font-size:16px}.hints-panel .hint-heading p{font-size:14px;line-height:1.65}}
@media(forced-colors:active){.letter-howto{background:Canvas;border-color:CanvasText;box-shadow:none}.letter-howto .howto-note{border-color:CanvasText}}

/* Inline LAB placement reuses the same game, assets and draft session. */
.lab-embedded{scroll-padding-top:12px;overflow:hidden}
.lab-embedded body{min-height:0;background-image:none}
.lab-embedded .header,.lab-embedded .footer,.lab-embedded .experience-label,.lab-embedded .skip{display:none}
.lab-embedded #experience{width:100%;padding:28px;max-width:none}
.lab-embedded body[data-page='letter'] .intro{padding:0 0 20px}
.lab-embedded body[data-page='letter'] .intro h1{font-size:clamp(1.5rem,3.6vw,2rem);margin-block:6px 10px}
.lab-embedded .intro .subtitle{font-size:14px}
.lab-embedded .intro .eyebrow{display:none}
.lab-embedded .steps{margin-bottom:24px}
.lab-embedded .professor-row{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px}
.lab-embedded .story-brief .situation-copy h2{font-size:1.25rem}
.lab-embedded .story-brief .situation-copy>p{font-size:.9375rem}
.lab-embedded .guide-section{margin-bottom:0!important}
.lab-embedded .section-heading p{font-size:.875rem}
.lab-embedded #experience>.actions a{display:none}
.lab-embedded body[data-page='letter'] .writing-card{padding:22px}
.lab-embedded .writing-card textarea{min-height:260px}
.lab-embedded .done-art{display:none}
.lab-embedded .done-layout{grid-template-columns:1fr}
.lab-embedded .letter-original{max-height:30rem;overflow:auto}
@media(max-width:560px){
 .lab-embedded #experience{padding:20px 16px}
 .lab-embedded .professor-row{grid-template-columns:1fr;gap:20px}
 .lab-embedded .professor-row .room{max-width:420px;margin-inline:auto}
 .lab-embedded .guides{gap:6px}
 .lab-embedded .guide{padding:10px 4px;min-height:132px}
 .lab-embedded .guide img{width:58px;height:58px}
 .lab-embedded .guide .guide-note{font-size:11px}
 .lab-embedded body[data-page='letter'] .writing-card{padding:16px}
 .lab-embedded .writing-card textarea{font-size:16px}
}