/* Drafting is confined to the illustration: reading and decision surfaces stay quiet. */
.story-drawing {display:block;width:100%;height:auto;overflow:visible;color:hsl(var(--text));}
.story-drawing :is(path,rect,circle) {fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;}
.story-drawing .drawing-line {stroke:hsl(var(--text-muted));}
.story-drawing .drawing-thread {stroke:hsl(var(--primary) / .65);}
.story-drawing .drawing-mesh {stroke:hsl(var(--text-muted) / .32);stroke-width:.7;}
.story-drawing .drawing-register {stroke:hsl(var(--text-muted) / .6);}
.story-drawing .drawing-boundary {stroke:hsl(var(--primary) / .8);fill:hsl(var(--primary) / .035);}
.story-drawing .drawing-dashed {stroke:hsl(var(--reference) / .75);stroke-dasharray:3 4;}
.story-drawing .drawing-point {fill:hsl(var(--text-strong));stroke:none;}
.story-drawing :is(.drawing-trace,.drawing-accent) {stroke:hsl(var(--primary));stroke-width:1.5;}
.story-drawing .drawing-selection {fill:hsl(var(--primary) / .12);stroke:hsl(var(--primary));}
.story-drawing text {fill:hsl(var(--text-muted));font:500 10px var(--mono-font,monospace);letter-spacing:.04em;}
.story-drawing .drawing-title {font-size:8px;letter-spacing:.045em;}
#scene :is(.guided-diagram,.lifecycle-object):has(.story-drawing) {background:linear-gradient(135deg,hsl(var(--surface) / .5),hsl(var(--canvas) / .3));border-color:hsl(var(--border-default));}
#scene .guided-diagram:has(.story-drawing) .story-record {display:flex;gap:9px;padding:7px 0;border:0;border-radius:0;background:none;font-size:12px;line-height:1.35;}
#scene .guided-diagram:has(.story-drawing) .story-record::before {position:static;content:attr(data-diagram-number);height:auto;border:0;color:hsl(var(--text-muted));font:500 10px/1.6 var(--mono-font,monospace);}
#scene .guided-diagram:has(.story-drawing) .story-record[data-selected="true"] {color:hsl(var(--primary));}
#scene .guided-diagram:has(.story-drawing) .story-record[data-selected="true"]::before {color:hsl(var(--primary));}
@media(min-width:901px){
 #scene .guided-page .guided-body {grid-template-columns:minmax(0,1.35fr) minmax(290px,.85fr);gap:40px;}
 #scene .guided-page .guided-diagram {padding:16px;}
 #scene .guided-page .guided-primary-answer {font-size:20px;line-height:1.5;max-width:43ch;margin-top:22px;}
 #scene .guided-page .guided-diagram figcaption {margin-bottom:8px;}
 #scene .guided-page .lifecycle-boundary {padding:10px 14px;}
 #scene .lifecycle-page {padding:30px;gap:12px;}
 #scene .lifecycle-page h1 {max-width:35ch;font-size:42px;}
 #scene .lifecycle-page .lifecycle-trail-item {flex-direction:row;align-items:center;padding:10px 12px;}
 #scene .lifecycle-page .lifecycle-object {padding:12px;}
 #scene .lifecycle-page .lifecycle-object figcaption {margin-bottom:8px;}
 #scene .lifecycle-page .lifecycle-object .story-snapshot {display:none;}
 #scene .lifecycle-page .lifecycle-object .story-record {padding:6px 8px;margin-top:5px;font-size:12px;}
 #scene .lifecycle-page .lifecycle-object .story-record::before {height:6px;top:-7px;}
 #scene .task-page .learning-list {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
 #scene .task-page .learning-list .story-topic {min-height:260px;}
 #scene .task-page .learning-list .learning-entry-copy {display:flex;flex-direction:column;gap:12px;}
 #scene .task-page .learning-list .learning-entry-copy h2 {font-size:22px;}
 #scene .task-page.lab-page .lab-note {margin-top:12px;}
 #scene .task-page.lab-page .section-heading h1 {font-size:38px;}
 #scene .task-page.lab-page .model-canonical {margin-block:8px;}
}

@media(min-width:901px){
 #scene .task-page .learning-list .learning-entry {display:flex;flex-direction:column;align-items:start;gap:12px;}
 #scene .task-page .learning-list .learning-entry h2 {font-size:24px;margin:0;}
 #scene .task-page .learning-list .learning-arrow {display:none;}
 #scene .task-page .learning-list .story-topic-purpose {order:2;font-size:14px;line-height:1.5;}
 #scene .task-page.lab-page .lab-toolbar {padding-inline:16px;}
 #scene .task-page.lab-page .study-tabs button {padding-block:12px;}
 #scene .task-page.lab-page .lab-bottom {padding:12px 16px;}
 #scene .task-page.lab-page .control input {margin-block:8px;}
}

@media(min-width:901px){
 #scene .guided-diagram:has(.story-drawing) {display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;}
 #scene .guided-diagram:has(.story-drawing) > :is(figcaption,.story-drawing) {grid-column:1/-1;}
 #scene .guided-diagram .story-drawing {max-height:170px;margin-bottom:4px;}
 #scene .guided-diagram:has(.story-drawing) .story-record {margin:0;padding:5px 0;min-height:44px;align-items:center;text-align:left;}
 #scene .guided-diagram:has(.story-drawing) button.story-record {cursor:pointer;font-family:var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));}
 #scene .guided-diagram:has(.story-drawing) button.story-record:hover {color:hsl(var(--text-strong));}
 #scene .guided-diagram:has(.story-drawing) button.story-record[aria-pressed="true"] {color:hsl(var(--primary));}
 #scene .lifecycle-page .lifecycle-object .story-drawing {max-height:155px;}
}

@media(min-width:901px){
 #scene .guided-page .guided-left {display:flex;flex-direction:column;gap:24px;min-width:0;}
 #scene .guided-page .guided-left .lifecycle-boundary {margin:0;}
 #scene .guided-page .guided-left .lifecycle-boundary p {font-size:14px;}
}
@media(min-width:901px) and (max-height:780px){
 #scene .guided-page {padding:26px;gap:10px;}
 #scene .guided-page .guided-primary-answer {font-size:18px;}
 #scene .guided-page .guided-diagram .story-drawing {max-height:125px;}
}