.activity-nav { display: flex; gap: 7px; }
.activity-nav .library-link { white-space: nowrap; }
@media (hover: hover) { .hero-action-secondary:hover { background: white; } }

.writer-shell { width: min(1010px, calc(100% - 64px)); margin: 24px auto 0; }
.writer-heading { margin-bottom: 16px; }
.writer-heading .eyebrow { color: var(--purple-dark); }
.writer-heading h1 { margin: 4px 0; font: 620 clamp(2.35rem, 5vw, 3.7rem)/1 var(--heading); }
.writer-heading h1:focus { outline: none; }
.writing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .47fr); align-items: start; gap: 18px; }
.writing-workspace {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e2d4ef;
  border-radius: 23px;
  background: white;
  box-shadow: var(--shadow);
}
.writing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 11px; }
.case-switch { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: #f1e8fc; }
.case-switch button {
  min-height: 41px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--purple-dark);
  font: 620 1.05rem/1 var(--heading);
  white-space: nowrap;
}
.case-switch button span { margin-left: 2px; font: 750 .69rem/1.2 var(--body); }
.case-switch [aria-pressed="true"] { border-color: #673bad; background: #673bad; color: white; box-shadow: 0 2px 3px #49278038; }
.letter-picker { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .73rem; font-weight: 800; }
.letter-picker select {
  min-width: 56px;
  min-height: 40px;
  padding: 5px;
  border: 1px solid #d8c4f3;
  border-radius: 10px;
  background: #fcf7ff;
  color: var(--purple-dark);
  font: 600 1.04rem/1 var(--heading);
}
.writing-lesson {
  padding: 11px;
  border: 1px solid #eed8c6;
  border-radius: 18px;
  background: #fff1e2;
}
.lesson-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 auto 8px; }
.lesson-heading .eyebrow { color: #795142; }
.lesson-heading h2 { margin: 2px 0 0; font: 620 1.64rem/1 var(--heading); }
.writing-action, .writing-navigation button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 10px;
  color: var(--purple-dark);
  font-size: .79rem;
  font-weight: 850;
  white-space: nowrap;
}
.writing-action { border: 1px solid #dfc9e9; background: #fffaff; }
.writing-action svg, .writing-navigation svg { width: 16px; height: 16px; }
.writing-paper {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e7cbaf;
  border-radius: 13px;
  background:
    radial-gradient(#d9c1b044 1px, transparent 1.4px) 0 0 / 16px 16px,
    #fffdfa;
}
#trace-board { width: min(100%, 392px); height: auto; aspect-ratio: 1; touch-action: none; user-select: none; cursor: crosshair; }
.trace-rules { stroke: #e6cdbb; stroke-width: 1; }
.trace-middle { stroke-dasharray: 4 5; }
.trace-lower { stroke: #ead8c9; }
.trace-guide, .trace-ink, .trace-example { stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.trace-guide { stroke: #e4d6ef; }
.trace-ink { stroke: #8a54c6; }
.trace-ink.finished { stroke: #239171; }
.trace-example { stroke: #f5ac5d; }
#trace-marker circle { fill: #5f36a4; stroke: white; stroke-width: 2; }
#trace-marker text { fill: white; stroke: none; font: 600 12px/1 var(--heading); }
.trace-arrow { stroke: #5f36a4; stroke-width: 2.6; }
#demo-dot { fill: #6a3ca6; stroke: white; stroke-width: 2.5; }
.trace-celebration {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid #edbe76;
  border-radius: 12px;
  background: #ffdfa6;
  color: #4b2a5e;
  font: 650 clamp(.92rem, 3.5vw, 1.3rem)/1 var(--heading);
  white-space: nowrap;
  box-shadow: 0 3px 0 #eac696;
  pointer-events: none;
  animation: trace-celebrate .38s ease-out both;
}
.trace-celebration span { color: #8d5018; }
@keyframes trace-celebrate {
  0% { opacity: 0; transform: translate(-50%, 5px) scale(.86); }
  70% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .trace-celebration { animation: none; } }
.writing-status { min-height: 2.5em; display: grid; align-content: center; margin: 7px 0 2px; color: #4b385a; font-size: .83rem; font-weight: 750; text-align: center; }
.lesson-tools { display: flex; justify-content: center; gap: 8px; }
.writing-navigation { display: grid; grid-template-columns: 1fr 1.48fr; gap: 8px; margin-top: 11px; }
.writing-navigation button { min-height: 45px; }
.writing-navigation .listen { color: white; }
.writing-companion { grid-area: auto; }
.writing-companion .companion-copy p:last-child { max-width: 240px; }

@media (max-width: 850px) {
  .writer-shell { width: calc(100% - 36px); }
}
@media (max-width: 650px) {
  .brand { gap: 7px; min-width: 0; }
  .brand img { width: 34px; height: 34px; flex: none; }
  .brand strong { font-size: 1.1rem; }
  .activity-nav { gap: 4px; }
  .activity-nav .library-link { padding-inline: 7px; font-size: .7rem; }
  .activity-nav svg { width: 14px; height: 14px; }
  .writer-shell { margin-top: 16px; }
  .writing-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .writing-companion img { width: 112px; }
}
@media (max-width: 480px) {
  .writer-shell { width: calc(100% - 26px); }
  .writing-workspace { padding: 8px; border-radius: 18px; }
  .writing-lesson { padding: 7px; }
  .case-switch button { padding-inline: 6px; font-size: .95rem; }
  .case-switch button span { font-size: .65rem; }
  .letter-picker > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 355px) {
  .brand strong { font-size: .97rem; }
  .activity-nav svg { display: none; }
}

body[data-activity="write"] {
  background:
    radial-gradient(ellipse at 15% 23%, #e2f5d8, transparent 29rem),
    radial-gradient(#84ac9369 1px, transparent 1.3px) 0 0 / 24px 24px,
    #f3faf3;
}
.writer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 13px clamp(13px, 3vw, 26px);
  border: 1px solid #afd6bb;
  border-radius: 20px;
  background: linear-gradient(120deg, #f3ffef, #d1efd9);
  color: #204c36;
}
.writer-heading .eyebrow { color: #296148; }
.writer-heading div > p:last-child { margin: 5px 0 0; color: #416452; font-size: .9rem; }
.writer-badge {
  display: grid;
  width: clamp(45px, 8vw, 69px);
  aspect-ratio: 1;
  flex: none;
  place-items: center;
  border: 1px solid #a6ceb4;
  border-radius: 15px;
  background: #fffaf0;
  box-shadow: 0 4px 0 #afd1b8;
  font: 650 clamp(1.5rem, 4vw, 2.5rem)/1 var(--heading);
  transform: rotate(7deg);
}
.writing-workspace { border-color: #c1daca; box-shadow: 0 6px 0 #d4e9d8, 0 12px 24px #214a3513; }
.case-switch { background: #ebf7ec; }
.case-switch button, .letter-picker select { color: #26503b; }
.case-switch [aria-pressed="true"], .writing-navigation .listen { border-color: #225e46; background: #2c694e; }
.writing-navigation .listen { box-shadow: 0 3px 0 #214c39; }
.writing-companion {
  border-color: #bddbc3;
  background:
    radial-gradient(#81aa8350 1px, transparent 1px) 0 0 / 17px 17px,
    radial-gradient(ellipse at 48% 78%, #ffe6c1, #e2f2dd 62%, #e9f5e8);
}