/* Hallmark · macrostructure: continuous task journey · genre: modern-minimal · theme: existing Coral dark
   Audience: investors and engineering leaders. Native-scroll choreography requested by the user.
   Scope: Coral Code only. Diagram content, not imitation IDE chrome.
   Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4. See CORAL_CODE_JOURNEY.md for reviewed states and limits. */
:root[data-theme=dark]{--color-surface:oklch(24% .012 175);--color-raised:oklch(28% .014 175);--color-rule:oklch(38% .018 175);--color-success:oklch(78% .085 175);--color-warning:oklch(80% .12 68);--color-dim:oklch(65% .018 175);--font-code:var(--body);--space-scene:clamp(1rem,2vw,2rem);--ease-in:cubic-bezier(.7,0,.84,0);--ease-in-out:cubic-bezier(.65,0,.35,1);--dur-short:220ms}
.task-film{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);padding-right:var(--gutter)}
.task-film .code-stage{height:100svh;min-height:660px;margin:0}
.task-film .code-beat{min-height:110svh;padding-right:var(--space-xl)}
.task-film .code-copy{gap:var(--space-lg);max-width:34rem}
.task-film .code-copy h1{font-size:clamp(2.8rem,4.65vw,5.25rem)}
.task-film .code-copy h2{font-size:clamp(2.5rem,3.65vw,4.3rem)}
.task-film .code-copy>p:not(.intro-label,.scroll-cue,.mechanism-note,.scene-description){font-size:clamp(1rem,1.3vw,1.1875rem);max-width:33ch}
.scene-description{display:none;font-size:.875rem!important;color:var(--muted);max-width:37ch}
.task-heading{position:absolute;inset:5% 0 auto;display:flex;justify-content:space-between;gap:var(--space-4);font-size:.8125rem;color:var(--muted)}
.task-heading>span:last-child{color:var(--accent-ink)}
.task-request{position:absolute;top:13%;inset-inline:3%;display:flex;align-items:center;gap:var(--space-4);font-size:clamp(1rem,1.6vw,1.3rem);padding:var(--space-4) var(--space-5);background:var(--color-surface);border-radius:4px}
.request-author{font-size:.875rem;color:var(--accent-ink);border-right:1px solid var(--color-rule);padding-right:var(--space-4)}
.task-map{position:absolute;inset:27% 0 24%}
.task-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.task-connections path{fill:none;stroke:var(--color-rule);stroke-width:1.5;vector-effect:non-scaling-stroke}
.task-connections .peer-edge{stroke:var(--accent);stroke-width:2}
.finding-packet{fill:var(--accent-ink)}
.lead-agent{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);font-size:.875rem;white-space:nowrap;color:var(--accent-ink)}
.lead-agent>img{height:96px;width:96px}
.file-node{position:absolute;top:49%;width:29%;min-height:114px;padding:var(--space-4) var(--space-3);background:var(--color-surface);border-radius:4px;display:flex;flex-direction:column;gap:var(--space-2)}
.node-test{left:2%}.node-total{left:35.5%}.node-discount{left:69%}
.node-role{font:500 1.25rem/1.2 var(--display)}
.file-node>strong{font-size:.8125rem;font-weight:400;color:var(--muted);white-space:nowrap}
.node-state{font-size:.8125rem;line-height:1.4;color:var(--muted)}
.file-agent{position:absolute;top:-45px;left:calc(50% - 18px)}
.observed-path{position:absolute;inset:86% 0 auto;text-align:center;display:flex;align-items:center;flex-direction:column;gap:var(--space-2);font-size:.8125rem;color:var(--muted)}
.observed-path strong{font-size:1rem;font-weight:400;color:var(--color-success)}
.observed-path b{font-weight:400;margin-inline:var(--space-2)}
.discovery-note{position:absolute;inset:85% 3% auto;padding:var(--space-4) var(--space-5);background:var(--color-raised);border-radius:4px;display:flex;flex-direction:column;gap:var(--space-2)}
.discovery-note>span{font-size:.8125rem;color:var(--accent-ink)}
.discovery-note strong{font-weight:500;font-size:1rem;line-height:1.4}
.discovery-note p{font-size:.875rem;color:var(--color-success)}
.edit-evidence{position:absolute;inset:38% 3% auto;padding:var(--space-5);background:var(--color-surface);border-radius:4px}
.edit-label{display:flex;justify-content:space-between;gap:var(--space-4);font-size:.875rem;color:var(--muted)}
.diff-content{margin-block:var(--space-6);font-family:var(--font-code);font-size:clamp(.9rem,1.2vw,1.15rem);line-height:1.8;white-space:nowrap}
.diff-content p{display:flex;gap:var(--space-3)}.diff-before{color:var(--muted)}.diff-before span{color:var(--color-warning)}.diff-after{color:var(--color-success)}
.edit-check{display:flex;gap:var(--space-3);align-items:center;background:var(--paper);padding:var(--space-4);border-radius:3px}
.check-symbol{font:500 1.5rem/1 var(--display);color:var(--color-warning)}.edit-check>div{display:flex;flex-direction:column;gap:var(--space-1)}
.edit-check strong{font-size:.875rem;font-weight:500}.edit-check div>span{font-size:.8125rem;color:var(--muted)}
.review-comment{padding-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.review-comment>span{color:var(--accent-ink);font-size:.8125rem}.review-comment strong{font-size:1rem;font-weight:500;line-height:1.5}.review-comment p{font-size:.875rem;color:var(--color-success)}.review-comment b{font-weight:400;padding-inline:var(--space-2)}
.task-stage-bottom{position:absolute;inset:auto 0 5%;display:flex;align-items:center;flex-direction:column;gap:var(--space-3);text-align:center;font-size:.875rem}
.task-stage-bottom>span{color:var(--muted);font-size:.75rem}.task-step-track{display:flex;gap:var(--space-2)}.task-step-track i{width:24px;height:2px;background:var(--color-rule)}.task-step-track i.is-active{background:var(--accent)}
.task-film #code-canvas{inset:26% 0 24%;opacity:0}.code-webgl .task-film #code-canvas{opacity:1}.code-webgl .lead-agent>img,.code-webgl .file-agent{visibility:hidden}
.task-film[data-step="0"] .file-node,.task-film[data-step="0"] .context-edge,.task-film[data-step="0"] .observed-path,.task-film[data-step="0"] .peer-edge,.task-film[data-step="0"] .finding-packet,.task-film[data-step="0"] .file-agent,.task-film[data-step="0"] .discovery-note,.task-film[data-step="0"] .edit-evidence{opacity:0}
.task-film[data-step="1"] .peer-edge,.task-film[data-step="1"] .finding-packet,.task-film[data-step="1"] .file-agent,.task-film[data-step="1"] .discovery-note,.task-film[data-step="1"] .edit-evidence{opacity:0}
.task-film[data-step="2"] .peer-edge,.task-film[data-step="2"] .finding-packet,.task-film[data-step="2"] .discovery-note,.task-film[data-step="2"] .edit-evidence{opacity:0}
.task-film[data-step="3"] .observed-path,.task-film[data-step="3"] .edit-evidence{opacity:0}
.task-film[data-step="4"] .task-map,.task-film[data-step="5"] .task-map{opacity:0}
.task-film[data-step="4"] .review-comment{opacity:0}
.research-bridge{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-2xl);background:var(--paper);padding-block:var(--space-3xl)}
.research-bridge h2{font-size:clamp(2rem,3.3vw,3.5rem);margin-top:var(--space-lg)}
.bridge-flow{display:flex;flex-direction:column;gap:var(--space-3)}.bridge-flow>div{display:flex;flex-direction:column;gap:var(--space-2)}.bridge-flow strong{font:500 1.3rem/1.3 var(--display)}.bridge-flow>span{color:var(--accent-ink)}.bridge-flow div>span{color:var(--muted);font-size:1rem}
.bridge-closing{grid-column:1/-1;color:var(--muted);max-width:none;font-size:1rem}
.edit-check[data-fresh=true] .check-symbol{color:var(--color-success)}
.code-page .code-proof,.code-page .code-detail,.code-page .code-next{padding-block:var(--space-3xl)}
.code-page .code-source>a{white-space:nowrap}.code-page .small-note{font-size:.875rem}.code-page .footer a{white-space:nowrap}
@media(max-width:59.999rem){
 .task-film{padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
 .task-film .code-stage{height:52svh;min-height:335px;background:var(--paper);margin-inline:var(--gutter)}
 .task-film .code-beat{min-height:105svh;align-items:center;padding:calc(52svh + 2rem) var(--gutter) 2rem}
 .task-film .code-copy{gap:var(--space-4);max-width:42rem}
 .task-film .code-copy h1{font-size:clamp(2rem,5.8vw,3.4rem)}.task-film .code-copy h1 br{display:none}
 .task-film .code-copy h2{font-size:clamp(2rem,5vw,3rem)}
 .task-film .scene-description{display:none}
 .task-heading{top:3%;font-size:.75rem}.task-heading>span:first-child{max-width:60%}
 .task-request{top:13%;padding:var(--space-3);font-size:1rem;gap:var(--space-3);inset-inline:0}
 .request-author{font-size:.8125rem;padding-right:var(--space-3)}
 .task-map{inset:30% 0 17%}.lead-agent>img{width:46px;height:46px}.lead-agent{font-size:.75rem;gap:var(--space-1)}
 .file-node{top:46%;min-height:78px;padding:var(--space-3) var(--space-2);gap:var(--space-1)}.node-role{font-size:1rem}.file-node>strong{font-size:.75rem}.node-state{display:none}.file-agent{top:-28px;width:24px;height:26px;left:calc(50% - 12px)}
 .observed-path{top:88%;gap:0;font-size:.75rem}.observed-path strong{font-size:.875rem}
 .task-stage-bottom{bottom:2%;gap:var(--space-2);font-size:.75rem}.task-stage-bottom>span{display:none}
 .discovery-note{inset:82% 0 auto;padding:var(--space-3);gap:var(--space-1)}.discovery-note>span{font-size:.75rem}.discovery-note strong{font-size:.875rem}.discovery-note p{font-size:.8125rem}
 .task-film[data-step="3"] .task-stage-bottom>p,.task-film[data-step="4"] .task-stage-bottom>p,.task-film[data-step="5"] .task-stage-bottom>p{visibility:hidden}
 .edit-evidence{inset:31% 0 auto;padding:var(--space-3)}.edit-label{font-size:.75rem}.diff-content{margin-block:var(--space-3);font-size:.875rem}.edit-check{padding:var(--space-3)}.edit-check strong{font-size:.8125rem}.edit-check div>span{font-size:.75rem}.review-comment{padding-top:var(--space-3);gap:var(--space-1)}.review-comment strong{font-size:.875rem}.review-comment p{font-size:.8125rem}
 .task-film #code-canvas{inset:29% 0 17%}
 .research-bridge{gap:var(--space-xl)}
}
@media(max-width:39.999rem){
 .task-film .code-stage{height:42svh;min-height:280px;margin-inline:20px}.task-film .code-beat{padding-top:calc(42svh + 1.5rem);min-height:100svh;align-items:flex-start}
 .task-film .code-copy>p:not(.intro-label,.scroll-cue,.mechanism-note,.scene-description){font-size:1rem}.task-film .mechanism-note{font-size:.875rem}
 .task-heading>span:first-child{font-size:.75rem}.task-request{font-size:.9rem}.file-node>strong{font-size:.75rem}.node-role{font-size:1rem}
 .research-bridge{grid-template-columns:minmax(0,1fr)}.bridge-closing{grid-column:auto}.code-page .code-source>a{font-size:.8125rem}
 .task-film[data-step="4"] .task-request,.task-film[data-step="5"] .task-request,.task-film[data-step="4"] .task-stage-bottom,.task-film[data-step="5"] .task-stage-bottom{visibility:hidden}
 .edit-evidence{top:15%}.diff-content{margin-block:var(--space-2)}.edit-check{padding:var(--space-2)}.review-comment{padding-top:var(--space-2)}
}
@media(max-width:24.999rem){.file-node>strong{display:none}.file-node{min-height:54px;justify-content:center}.task-map{inset:30% 0 22%}.discovery-note{top:78%}.observed-path{top:80%}}
html[data-motion=reduce] .task-film{display:block;padding:0}html[data-motion=reduce] .task-film .code-stage{display:none}html[data-motion=reduce] .task-film .code-track{display:block}html[data-motion=reduce] .task-film .code-beat{min-height:0;padding:var(--space-2xl) var(--gutter)}html[data-motion=reduce] .task-film .scene-description{display:block}
@media(prefers-reduced-motion:reduce){.task-film{display:block;padding:0}.task-film .code-stage{display:none}.task-film .code-beat{min-height:0;padding:var(--space-2xl) var(--gutter)}.task-film .scene-description{display:block}}
@media print{.task-film .code-stage{display:none}.task-film,.research-bridge{display:block}.task-film .code-beat{min-height:0;padding:2rem 0}.task-film .scene-description{display:block}}

/* The network is spatial content, not a dashboard: projected labels, explicit states,
   directed traffic and one current exchange. Existing page typography is retained. */
:root[data-theme=dark]{--network-active:#82dfbe;--network-sleep:#a5b3af}
.network-film .code-stage{height:calc(100svh - 72px);min-height:560px}
.scene-caption{position:absolute;inset:7% 4% auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-height:56px}
.scene-caption #task-phase{font:400 .8125rem/1.4 var(--body);color:var(--muted)}
.network-film[data-intro=true] .scene-caption>strong{max-width:26ch;font-size:clamp(1.3rem,2.15vw,1.85rem);color:var(--ink)}
.request-path{position:absolute;top:calc(100% + 15px);left:50%;height:32px;border-left:1px solid var(--accent-ink)}
.request-path:after{content:'';position:absolute;bottom:0;left:-4px;width:7px;height:7px;border-right:1px solid var(--accent-ink);border-bottom:1px solid var(--accent-ink);transform:rotate(45deg)}
.scene-caption>strong{font:500 clamp(1rem,1.6vw,1.375rem)/1.3 var(--display);color:var(--accent-ink)}
.scene-caption>span{font-size:.8125rem;line-height:1.4;color:var(--muted)}
.scene-caption>span:empty{display:none}
.network-film .network-illustration{position:absolute;inset:0}
.network-film .task-heading{align-items:center;z-index:3;min-height:44px}
.network-film #activity-control{pointer-events:auto;min-height:44px;padding:8px 0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:none;border:0;color:var(--muted);font:400 .8125rem/1.4 var(--body);cursor:pointer}
.network-film #activity-control[hidden]{display:none}
.scene-playback{display:flex;align-items:center;justify-content:center;gap:32px;min-height:44px}
.scene-playback .task-step-track i{width:16px}
.network-film #activity-control:hover{color:var(--ink)}
.network-film #activity-control:active{color:var(--accent-ink)}
.network-film #activity-control:disabled{opacity:.55;cursor:not-allowed;color:var(--muted)}
.network-film #activity-control:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}
.network-film .task-request{top:14%;background:none;padding:0;justify-content:center}
.network-viewport{position:absolute;inset:26% 0 23%;overflow:visible}
.network-film #code-canvas{inset:0;opacity:1}
.network-key{position:absolute;top:22%;inset-inline:0;display:flex;justify-content:center;gap:24px;font-size:.8125rem;color:var(--muted)}
.network-key>span{display:flex;align-items:center;gap:8px}
.network-key i{display:inline-block;width:8px;height:8px;border-radius:50%}
.network-key .key-active{background:var(--network-active)}
.network-key .key-sleep{border:1px dashed var(--network-sleep);width:10px;height:10px}
.network-key .key-message{width:15px;height:0;border-radius:0;border-top:2px solid var(--accent-ink);position:relative}
.network-key .key-message:after{content:'';position:absolute;right:0;top:-4px;width:5px;height:5px;border-top:2px solid var(--accent-ink);border-right:2px solid var(--accent-ink);transform:rotate(45deg)}
#network-labels{position:absolute;inset:0}
.code-area-labels{position:absolute;inset:0;display:none;pointer-events:none}
.code-webgl .code-area-labels{display:block}
.code-area-labels>span{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;font:500 .875rem/1.3 var(--body);color:var(--accent-ink);padding:3px 6px;background:var(--paper);border-radius:2px}
@media(max-width:39.999rem){.code-area-labels>span{font-size:.75rem;padding:2px 4px}}
.network-agent-label{position:absolute;left:50%;top:30%;transform:translate(-50%,0);display:flex;align-items:center;flex-direction:column;gap:4px;white-space:nowrap;text-align:center;line-height:1.2}
.network-agent-label strong{font:500 .9375rem/1.3 var(--display);color:var(--ink)}
.network-agent-label>span{font-size:.75rem;color:var(--muted)}
.network-agent-label[data-state=active]>span{color:var(--network-active)}
.network-agent-label[data-network-agent=lead] strong{color:var(--accent-ink)}
.network-agent-label[data-state=sleeping] strong{color:var(--network-sleep)}
.network-agent-label[data-network-agent=lead]{left:50%;top:12%}
.network-agent-label[data-network-agent=test]{left:20%;top:55%}
.network-agent-label[data-network-agent=total]{left:52%;top:70%}
.network-agent-label[data-network-agent=discount]{left:82%;top:48%}
.network-agent-label[data-network-agent=cart]{left:15%;top:14%}
.network-agent-label[data-network-agent=receipt]{left:83%;top:12%}
.network-agent-label>img{margin-bottom:8px}
.network-agent-label:not([data-network-agent=lead]){opacity:0}
html:not(.code-webgl) .network-agent-label>img{width:32px;height:auto;margin-bottom:4px}
html:not(.code-webgl) .network-agent-label[data-network-agent=lead]>img{width:48px}
.network-agent-label[data-state=sleeping]>img{filter:grayscale(1);opacity:.5}
.code-webgl .network-agent-label>img{display:none}
.code-webgl .network-agent-label[data-network-agent]{left:0;top:0;will-change:transform}
.network-event{position:absolute;inset:77% 5% auto;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center}
.network-event>div{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8125rem}
.event-direction{font-size:1.1rem;color:var(--accent-ink)}
.network-event>p{font:400 clamp(1rem,1.5vw,1.35rem)/1.5 var(--display);max-width:34ch;color:var(--ink)}
.network-event[data-kind=discovery] .event-direction,.network-event[data-kind=reply] .event-direction,.network-event[data-kind=handoff] .event-direction{color:var(--network-active)}
.network-film .task-stage-bottom{bottom:2%;gap:2px;z-index:3;pointer-events:auto}
.answer-evidence,.case-result{position:absolute;inset:18% 4% auto;opacity:0;text-align:center;display:flex;align-items:center;flex-direction:column;gap:24px}
.answer-eyebrow{font:.8125rem/1.4 var(--body);color:var(--muted)}
.answer-evidence h3{font:500 clamp(1.7rem,2.7vw,2.7rem)/1.2 var(--display);color:var(--ink)}
.finding-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:16px 0;width:100%}
.finding-path li{position:relative;display:flex;flex-direction:column;gap:8px}
.finding-path li+li:before{content:'→';position:absolute;left:-24px;top:0;color:var(--accent-ink)}
.finding-path strong{font:500 1.2rem/1.3 var(--display);color:var(--accent-ink)}
.finding-path span,.path-takeaway{font:.875rem/1.5 var(--body);color:var(--muted)}
.path-takeaway{max-width:39ch}
.case-result{top:24%;gap:32px}
.case-scores{display:flex;align-items:flex-start;justify-content:center;gap:clamp(20px,3vw,48px);font-variant-numeric:tabular-nums}
.case-scores>div{display:flex;flex-direction:column;gap:16px}
.case-scores strong{font:500 clamp(3.5rem,5vw,5.5rem)/1 var(--display)}
.case-scores strong>span{font-size:.38em;color:var(--muted)}
.case-scores>div:last-child strong{color:var(--accent-ink)}
.case-scores>div>span{font-size:.875rem;line-height:1.5;color:var(--muted)}
.score-direction{font:400 1.7rem/1 var(--body);color:var(--muted);margin-top:1rem}
.case-result>p{font:500 clamp(1.15rem,1.5vw,1.5rem)/1.4 var(--display)}
.case-result-note{font:.75rem/1.5 var(--body);color:var(--muted)}
.task-film .code-copy>p.case-source-note{font:.875rem/1.55 var(--body);color:var(--muted);max-width:44ch}
.network-film .task-stage-bottom>p{display:none}
.network-film[data-step="0"] .network-key,.network-film[data-step="0"] .network-event{visibility:hidden}
.network-film[data-step="4"] .network-key,.network-film[data-step="5"] .network-key{visibility:hidden}
@media(max-width:59.999rem){
 .network-film .code-stage{height:58svh;min-height:400px;margin-inline:var(--gutter)}
 .network-film .code-beat{padding-top:calc(58svh + 2rem);min-height:110svh;align-items:flex-start}
 .network-film .task-heading{top:0;font-size:.75rem}
 .network-viewport{inset:27% 5% 23%}
 .network-key{top:22%;font-size:.75rem;gap:24px}
 .network-agent-label strong{font-size:.8125rem}
 .network-agent-label>span{font-size:.6875rem}
 .network-event{top:80%;gap:6px;inset-inline:2%}
 .network-event>p{font-size:1rem;max-width:44ch}
 .network-event>div{font-size:.75rem}
 .network-film .task-stage-bottom{bottom:1%}
 .network-film .task-request{top:14%}
 .network-film .edit-evidence{top:20%}
}
@media(max-width:39.999rem){
 .network-film .code-stage{min-height:390px;margin-inline:20px}
 .network-film .code-beat{padding-top:max(calc(58svh + 1.5rem),414px);min-height:112svh}
 .network-viewport{inset:27% -4% 23%}
 .network-film[data-intro=false] .network-viewport{inset:25% -4% 32%}
 .scene-caption{inset:4% 0 auto;gap:5px}
 .scene-caption #task-phase{font-size:.75rem}
 .network-film[data-intro=true] .scene-caption>strong{font-size:1.125rem;max-width:25ch}
 .request-path{height:20px;top:calc(100% + 10px)}
 .scene-playback{gap:20px}
 .scene-playback .task-step-track{gap:6px}
 .scene-playback .task-step-track i{width:10px}
 .network-film #activity-control{font-size:.75rem}
 .network-film .task-stage-bottom>span{display:block;font-size:.75rem}
 .network-film .task-stage-bottom{bottom:0;gap:0}
 .answer-evidence{inset:9% 0 auto;gap:16px}
 .answer-evidence h3{font-size:1.6rem}
 .finding-path{gap:24px;margin-block:8px}
 .finding-path li{gap:6px}
 .finding-path li+li:before{left:-18px}
 .finding-path strong{font-size:1rem}
 .finding-path span,.path-takeaway{font-size:.8125rem}
 .case-result{inset:17% 0 auto;gap:24px}
 .case-scores strong{font-size:3.4rem}
 .case-scores>div>span{font-size:.8125rem}
 .case-result>p{font-size:1.125rem}
 .scene-caption>strong{font-size:1rem}
 .scene-caption>span{font-size:.75rem}
 .network-key{gap:20px}
 .network-agent-label strong{font-size:.75rem}
 .network-agent-label>span{font-size:.6875rem}
 .network-agent-label{gap:3px}
 .network-agent-label[data-network-agent=lead] strong{font-size:.6875rem}
 .network-event{top:73%;inset-inline:0;gap:6px}
 .network-event>p{font-size:.875rem;max-width:34ch}
 .network-event>div{gap:8px;font-size:.6875rem}
 .network-film .task-stage-bottom{bottom:0}
}