:root{--ink:#20364d;--plum:#704b68;--green:#45694f;--line:#d5dfd9;--wash:#f3f6f4;--warning:#805316}*{box-sizing:border-box}body{margin:0;background:var(--wash);color:var(--ink);font:18px/1.55 Arial,sans-serif}main{max-width:1040px;margin:auto;padding:30px 24px 50px}h1{font-size:clamp(28px,4vw,38px);line-height:1.22;color:var(--plum);margin:8px 0 16px}h2{font-size:25px;line-height:1.3;color:var(--plum);margin:0 0 14px}h3{font-size:20px;margin:0 0 12px}p{margin:0 0 12px}.meta{font-weight:bold;color:var(--green)}section{background:white;border:1px solid var(--line);border-radius:10px;padding:24px;margin:24px 0}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}button{font:inherit;min-height:44px;padding:9px 14px;background:white;color:var(--green);border:1px solid var(--green);border-radius:6px;cursor:pointer}button.primary{background:var(--green);color:white}button[aria-pressed=true]{background:var(--plum);color:white;border-color:var(--plum)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid var(--plum);outline-offset:3px}button.token{position:relative;display:inline;vertical-align:baseline;font:inherit;line-height:inherit;color:inherit;background:transparent;border:0;border-radius:0;min-height:0;margin:0;padding:0;cursor:pointer;overflow:visible}button.token:hover{background:#e9eeeb}button.token.pending{background:#dce8df}button.token.noun::before{content:'×';position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:21px;line-height:1;color:var(--plum);font-weight:bold}.wave{text-decoration:underline wavy var(--plum);text-underline-offset:6px;text-decoration-thickness:1.5px}
    #text-stage{position:relative;padding:34px 30px 8px;margin-top:16px}#text{font-size:21px;line-height:3.3;overflow-wrap:anywhere;position:relative;z-index:1}#text p{margin:0 0 26px}#arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}#arrows path{fill:none;stroke:var(--green);stroke-width:1.6}#arrows text{fill:var(--green);font:15px Arial,sans-serif;paint-order:stroke;stroke:white;stroke-width:4px;stroke-linejoin:round}#arrows text.cross{fill:var(--plum);font-size:22px;font-weight:bold}#arrows polygon{fill:var(--green)}button.token.noun::before{content:none}
    .small{font-size:16px;color:#536675}.status{color:var(--green);margin:12px 0 0}.error{color:var(--warning)}.toolbar{margin-bottom:8px}.legend{margin-top:16px}.connection{border-top:1px solid var(--line);padding:20px 0}.connection:first-child{border-top:0;padding-top:0}.forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.field{display:block;font-weight:bold;margin:12px 0 5px}input[type=text],select,textarea{display:block;width:100%;font:inherit;color:var(--ink);background:white;border:1px solid #a9b9b1;border-radius:6px;padding:10px 12px;min-width:0}select{min-height:48px}textarea{min-height:100px;resize:vertical}.connection .row{justify-content:space-between}.connection .remove{font-size:16px}.feedback{font-weight:bold;margin-top:12px;color:var(--warning)}.feedback.good{color:var(--green)}#results ul{padding-left:24px;margin:0}.task-list{padding-left:24px;margin:0 0 20px}.task-list li{margin:8px 0}footer{font-size:16px;color:#536675;margin-top:20px}[hidden]{display:none!important}.teacherbox{border-left:4px solid var(--plum)}#print-report{display:none}.pill{padding:3px 8px;border-radius:4px;background:white;color:var(--plum);font-size:16px}#teacher-message{white-space:pre-line}
    @media(max-width:620px){main{padding:20px 12px 36px}section{padding:20px 14px}#text-stage{padding:30px 12px 0}#text{font-size:19px;line-height:3.5}.forms{grid-template-columns:1fr}.row button{flex:1 1 155px}.connection .row button{flex:0 1 auto}.toolbar button{font-size:16px}h2{font-size:23px}}
    @page{size:A4;margin:18mm}@media print{body{background:white}main{display:none}#print-report{display:block;white-space:pre-wrap;overflow-wrap:anywhere;font:12pt/1.5 Arial,sans-serif}}
    #arrows .question-label{pointer-events:all;cursor:text}#arrows .question-label:focus-visible{outline:none}#arrows .question-label:focus-visible rect{stroke:var(--plum);stroke-width:2}#arrows path{pointer-events:stroke;cursor:pointer}.inline-question{position:absolute;z-index:4;display:flex;align-items:center;width:210px;max-width:calc(100% - 16px);padding:3px;background:white;border:2px solid var(--plum);border-radius:7px;box-shadow:0 3px 12px #20364d20}.inline-question input{min-width:0;padding:5px 8px;border:0;font-size:18px}.inline-question button{flex:0 0 34px;padding:4px;border:0;font-size:22px}.inline-question input,.inline-question button{height:34px;min-height:34px;line-height:1.15}.inline-question input:focus-visible{outline:none}.inline-question button:focus-visible{outline:2px solid var(--plum);outline-offset:0}

    main{max-width:1120px}.hero{padding:28px 0 18px}.hero h1{max-width:850px}.goal{max-width:750px;font-size:20px}.eyebrow{letter-spacing:.05em;font-size:14px;text-transform:uppercase;color:var(--green)}.hero-actions{margin:18px 0}.progress-strip{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;font-size:16px;display:flex;gap:14px;flex-wrap:wrap}
    #lesson-nav{position:sticky;top:0;z-index:5;background:var(--wash);padding:10px 0 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#lesson-nav button{text-align:left;color:var(--ink);border-color:var(--line);font-weight:bold}#lesson-nav button[aria-selected=true]{color:white;background:var(--plum);border-color:var(--plum)}.panel-actions{justify-content:space-between;margin:22px 0 0}#step-caption{font-size:16px;color:var(--green);margin:12px 0 0}.edit-card{padding:24px 0;border-top:1px solid var(--line)}.edit-card:first-child{padding-top:0;border:0}.edit-card>p:not(.small):not(.feedback){font-size:21px}.edit-card select{max-width:450px}.edit-card textarea{min-height:104px}.score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}.score-grid>div{padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--wash)}.score-grid strong{font-size:30px;color:var(--plum)}.score-grid p{font-size:16px;margin:8px 0 0}.summary-lead{font-size:22px;color:var(--plum)}#summary-result ul{padding-left:24px}.flow-note{font-size:16px;color:#536675}#results p{font-weight:bold}.hero-actions button{font-size:16px}
    @media(max-width:620px){.hero{padding:12px 0}.goal{font-size:18px}#lesson-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#lesson-nav button{font-size:16px;min-height:44px;padding:9px 10px}.score-grid{grid-template-columns:1fr}.progress-strip{display:block}.progress-strip p{margin:7px 0}.edit-card>p:not(.small):not(.feedback){font-size:19px}.panel-actions button{flex:1 1 130px}}

/* Use the site's shared tokens in both themes; keep the approved marking geometry. */
:root{--ink:var(--ks-text);--plum:var(--ks-primary);--green:var(--ks-primary);--line:var(--ks-border);--wash:var(--ks-bg-soft);--warning:#8c5000}
[data-theme=dark]{--warning:var(--ks-gold)}
html,body{height:auto;min-height:100%}
body{font:18px/1.55 var(--ks-font-sans);background:radial-gradient(circle at top left,color-mix(in srgb,var(--ks-accent) 12%,transparent),transparent 32rem),var(--ks-bg);color:var(--ink)}
.site-topbar{position:relative}.site-topbar-inner{max-width:1180px}
main{max-width:1180px}h1{font-family:var(--ks-font-serif);font-size:clamp(30px,4vw,46px);line-height:1.18;letter-spacing:-.025em}
h2{font-family:var(--ks-font-serif);font-size:28px;line-height:1.25}h3{line-height:1.4}
p{line-height:inherit;color:inherit}section{background:var(--ks-surface);border-radius:var(--ks-radius-lg);box-shadow:var(--ks-shadow-sm)}
button{background:var(--ks-surface);color:var(--ks-text);border-color:var(--ks-border);border-radius:12px;transition:border-color var(--ks-transition),background var(--ks-transition)}
button:hover{background:var(--ks-surface-2);border-color:var(--ks-primary)}
button.primary,button[aria-pressed=true],#lesson-nav button[aria-selected=true]{background:var(--ks-primary);color:var(--ks-bg);border-color:var(--ks-primary)}
html:not([data-theme=dark]) button.primary,html:not([data-theme=dark]) button[aria-pressed=true],html:not([data-theme=dark]) #lesson-nav button[aria-selected=true]{color:white}
button.token:hover{background:var(--ks-primary-soft)}button.token.pending{background:var(--ks-accent-soft)}
.small,.flow-note,footer{color:var(--ks-text-soft)}.pill{display:inline-block;border-radius:999px;background:var(--ks-primary-soft);color:var(--ks-primary);padding:6px 12px;font-size:15px}
input[type=text],select,textarea{color:var(--ink);background:var(--ks-bg);border-color:var(--ks-border);border-radius:12px}
textarea{line-height:1.65}.inline-question{background:var(--ks-surface);border-radius:10px;box-shadow:var(--ks-shadow-sm)}.inline-question input{background:var(--ks-surface)}
#arrows text{stroke:var(--ks-surface);font-family:var(--ks-font-sans)}
#lesson-nav{background:var(--ks-bg);border-bottom:1px solid var(--line)}#lesson-nav button{color:var(--ks-text);font-size:16px}
.score-grid>div{background:var(--ks-surface-2);border-radius:var(--ks-radius)}
.hero .back-link{font-size:15px;display:inline-block;margin-bottom:16px;color:var(--ks-primary)}
.hero .back-link:hover,footer a:hover{text-decoration:underline}#answers-title~h3{margin-top:28px}
.boot-note{max-width:1180px;margin:30px auto;padding:0 24px}.skip-link{position:fixed;left:12px;top:-100px;z-index:100;padding:10px 16px;background:var(--ks-surface);color:var(--ks-primary)}.skip-link:focus{top:12px}
.theme-toggle input{position:absolute;opacity:0;display:block;width:1px;height:1px;min-height:0}.theme-toggle input:focus-visible+.theme-switch{outline:3px solid var(--ks-gold);outline-offset:4px}
/* Keep all marking tools available while reading the text below the stage tabs. */
:root{--lesson-nav-height:72px;--marking-tools-height:160px}
#lesson-nav{z-index:8}
.marking-tools{position:sticky;top:var(--lesson-nav-height);z-index:6;background:var(--ks-surface);padding:10px 0;border-bottom:1px solid var(--line);box-shadow:0 8px 10px -10px rgba(0,0,0,.3);margin-bottom:14px}
.marking-tools .toolbar{margin:0}.marking-tools #tool-message{margin:8px 0 0;font-size:16px;line-height:1.45}
.tool-short{display:none}
.token,.inline-question,#text-stage{scroll-margin-top:calc(var(--lesson-nav-height) + var(--marking-tools-height) + 20px)}
@media(max-width:620px){.marking-tools .toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.marking-tools .toolbar button{min-width:0;min-height:44px;padding:8px 6px;font-size:15px}.marking-tools #undo{grid-column:span 2}.tool-long{display:none}.tool-short{display:inline}.marking-tools #tool-message{font-size:14px}.marking-tools{padding:8px 0}}
@media(max-width:620px){main{padding:18px 12px 36px}.student-profile{padding:0 12px}.hero h1{font-size:30px}#lesson-nav button{font-size:15px}section{padding:20px 14px}#text-stage{padding-left:12px;padding-right:12px}.theme-toggle{gap:6px}}
@media print{.site-topbar,.student-profile,.boot-note,.skip-link{display:none!important}body{background:white}}

/* Syntactic conventions for the gerund lesson. */
button.token.subject{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
button.token.predicate{text-decoration:underline double;text-underline-offset:6px;text-decoration-thickness:1.5px}
button.token.adverbial,.separator.adverbial{background-image:repeating-linear-gradient(to right,var(--plum) 0,var(--plum) 9px,transparent 9px,transparent 12px,var(--plum) 12px,var(--plum) 14px,transparent 14px,transparent 18px);background-size:18px 1.5px;background-position:0 100%;background-repeat:repeat-x}
#own-text{min-height:230px}.optional-task{margin-top:22px}.optional-task summary{cursor:pointer;color:var(--plum);font-weight:700}.optional-task p{margin-top:18px}.forms{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:620px){.forms{grid-template-columns:1fr}.marking-tools #undo{grid-column:auto}.marking-tools .toolbar button{font-size:14px}}

/* Keep full syntactic labels legible on narrow screens. */
@media(max-width:620px){.marking-tools .toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.marking-tools [data-tool=turn]{grid-column:1/-1}.marking-tools .tool-long{display:inline}.marking-tools .tool-short{display:none}.marking-tools .toolbar button{font-size:14px;line-height:1.3;min-height:48px}.marking-tools #undo{grid-column:auto}}

.score-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.score-grid{grid-template-columns:1fr}}