.contact-story {margin-top:46px;}
.contact-story > p {max-width:850px; margin:14px 0 24px;}
.contact-layout {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:36px; align-items:start;}
.contact-chart {min-width:0;}
.contact-chart svg {display:block; width:100%; height:300px; overflow:visible; font:400 var(--type-label)/1.3 var(--serif); color:var(--muted); stroke:none; fill:none;}
.contact-chart svg text {fill:currentColor; font:inherit;}
.contact-chart svg path,.contact-chart svg line {vector-effect:non-scaling-stroke;}
.contact-legend {display:flex; gap:16px 28px; flex-wrap:wrap; margin-bottom:10px; font-size:var(--type-label);}
.contact-legend span {display:inline-flex; align-items:center; gap:8px;}
.contact-legend i {display:block; width:24px; height:2px; background:#2d6654;}
.contact-legend span:last-child i {background:#b38954;}
.contact-status h4 {margin:0 0 16px;}
.contact-hand {display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; margin:8px 0; border-radius:0; background:#eeeae280; transition:background .2s;}
.contact-hand strong {font-weight:500;}
.contact-hand span {font-size:var(--type-label); color:var(--muted);}
.contact-hand[data-active="true"] {background:#dee9d9;}
.contact-hand[data-side="right"][data-active="true"] {background:#efe0c9;}
.contact-hand[data-active="true"] span {color:var(--green);}
.contact-status p {margin:18px 0 0; font-size:var(--type-label); color:var(--muted);}
.contact-clips-heading {display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-top:20px;}
.contact-clips-heading h4 {margin:0;}
.contact-clips-heading span {font-size:var(--type-label); color:var(--muted);}
.contact-clips {display:flex; gap:6px; margin-top:12px; min-height:52px;}
.contact-clip {position:relative; min-width:0; flex:var(--clip-length) 1 0; padding:12px 4px; text-align:center; color:var(--green); border:0; border-radius:0; background:#e9e4d9; font:inherit; font-size:var(--type-label); cursor:pointer; overflow:hidden;}
.contact-clip::before {content:''; position:absolute; inset:0; background:var(--clip-color); transform:scaleX(var(--clip-reveal,0)); transform-origin:left;}
.contact-clip span {position:relative;}
.contact-clip.is-current {box-shadow:inset 0 -2px var(--green);}
.contact-controls {display:flex; align-items:center; gap:24px; margin-top:20px;}
.contact-controls button {border:0; border-bottom:1px solid var(--green); background:none; padding:8px 0; min-height:44px; color:var(--green); cursor:pointer; font:inherit; font-size:var(--type-label); min-width:138px;}
.contact-controls label {display:flex; align-items:center; gap:14px; flex:1; color:var(--muted); font-size:var(--type-label);}
.contact-controls input {min-width:0; flex:1; accent-color:var(--green);}
.contact-controls output {white-space:nowrap; font-size:var(--type-label); color:var(--muted); min-width:110px; text-align:right;}
.contact-story .contact-source {font-size:var(--type-label); color:var(--muted); margin-top:14px; max-width:none;}
.contact-story :is(button,input):focus-visible {outline:2px solid var(--green); outline-offset:4px;}
@media(max-width:760px) {
 .contact-layout {grid-template-columns:1fr; gap:20px;}
 .contact-status {display:grid; grid-template-columns:1fr 1fr; gap:0 12px;}
 .contact-status h4,.contact-status p {grid-column:1/-1;}
 .contact-status h4 {margin-bottom:4px;}
 .contact-hand {flex-direction:column; align-items:flex-start; gap:2px;}
 .contact-status p {margin-top:8px;}
 .contact-clips-heading {flex-wrap:wrap; gap:6px;}
 .contact-controls {flex-wrap:wrap; gap:8px 16px;}
 .contact-controls label {flex-basis:100%; order:3;}
 .contact-controls output {margin-left:auto;}
 .contact-clip {flex:1;}
}
@media(prefers-reduced-motion:reduce) {.contact-hand {transition:none;}}

.contact-recording {margin:0; min-width:0;}
.contact-recording h4,.contact-analysis > h4 {margin:0 0 18px;}
.contact-recording video {display:block; width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:0; background:#edeae1;}
.contact-recording figcaption {margin-top:12px; color:var(--muted);}
.contact-status {display:grid; grid-template-columns:1fr 1fr; gap:0 12px;}
.contact-status p {grid-column:1/-1; margin-top:8px;}
.contact-hand {flex-wrap:wrap;}
.contact-analysis {min-width:0;}
@media(min-width:761px) and (max-width:1000px) {.contact-layout {gap:24px;} .contact-hand {flex-direction:column; align-items:flex-start; gap:2px;}}

/* Keep short measured intervals legible without altering their graph boundaries. */
@media(min-width:761px) {.contact-clip {min-width:80px;} .contact-clip:last-child {min-width:112px;}}

@media(max-width:760px) {.contact-clips {display:grid; grid-template-columns:repeat(3,minmax(0,1fr));}}

/* The recording carries annotation; the graph keeps its original position. */
.contact-stage-heading {display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:18px; min-height:44px;}
.contact-stage-heading h4 {margin:0;}
.contact-stage-actions {display:flex; gap:16px; align-items:baseline;}
.contact-stage-heading button {border:0; border-bottom:1px solid var(--green); background:none; color:var(--green); padding:5px 0; min-height:44px; font:inherit; font-size:var(--type-label); cursor:pointer; white-space:nowrap;}
.contact-stage-heading button:disabled {opacity:.4; cursor:default;}
.contact-stage-actions [hidden] {display:none;}
.contact-chart {position:relative; min-height:350px;}
.contact-video-stage {position:relative; aspect-ratio:4/3; isolation:isolate; overflow:hidden; border-radius:0;}
.contact-video-stage video {border-radius:0;}
.annotation-model {position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity 0.3665s ease,transform 0.4335s cubic-bezier(.22,1,.36,1),visibility 0s 0.3665s; background:#faf8f2f5; padding:8px 10px; border-radius:0; color:var(--green); z-index:3; max-width:calc(100% - 24px);}
.annotation-model img {width:24px; height:24px; flex:none;}
.annotation-model strong {display:block; font:600 var(--type-body)/1.15 var(--serif);}
.annotation-model span {display:block; font:400 var(--type-label)/1.25 var(--serif); color:var(--muted); margin-top:3px;}
.annotation-model .meta-symbol {width:37px; height:24px; overflow:hidden; flex-shrink:0;}
.annotation-model .meta-symbol img.meta-logo {display:block; width:119px; max-width:none; height:24px;}
.contact-grounding:is([data-step="qwen"],[data-step="instruction"]) .qwen-model,.contact-grounding:is([data-step="gemini"],[data-step="point"]) .gemini-model,.contact-grounding:is([data-step="sam"],[data-step="propagate"],[data-step="complete"]) .sam-model {opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;}
.annotation-clips {position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:6px; visibility:hidden; opacity:0; transform:translateY(8px); transition:opacity 0.3335s ease,transform 0.4335s cubic-bezier(.22,1,.36,1),visibility 0s 0.3335s; pointer-events:none; z-index:3;}
.annotation-clips figure {margin:0; width:calc((100% - 12px)/3); min-width:0; background:#faf8f2f5; padding:4px; border-radius:0;}
.annotation-clips img {display:block; width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:0;}
.annotation-clips figcaption {margin-top:4px; font:400 var(--type-label)/1.2 var(--serif); color:var(--muted);}
.contact-grounding:is([data-step="bounds"],[data-step="qwen"]) .annotation-clips {visibility:visible; opacity:1; transform:translateY(0); transition-delay:0s;}
.annotation-point {position:absolute; left:67.03%; top:66.25%; width:12px; height:12px; transform:translate(-50%,-50%) scale(0); border:2px solid white; border-radius:50%; background:#7448c7; box-shadow:0 0 0 6px #7448c735; z-index:2; transition:transform 0.4s cubic-bezier(.22,1,.36,1);}
.contact-grounding[data-point="true"]:is([data-step="point"],[data-step="sam"]) .annotation-point {transform:translate(-50%,-50%) scale(1);}
.annotation-mask-layer {position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:1; pointer-events:none; transition:opacity 0.4335s ease;}
.contact-grounding[data-mask="true"] .annotation-mask-layer {opacity:1;}
.annotation-propagation-direction {position:absolute; bottom:12px; left:12px; background:#faf8f2f5; color:var(--green); font:400 var(--type-label)/1.2 var(--serif); padding:8px 12px; border-radius:0; visibility:hidden; opacity:0; transform:translateY(6px); transition:opacity 0.3335s ease,transform 0.4s cubic-bezier(.22,1,.36,1),visibility 0s 0.3335s; z-index:3;}
.contact-grounding[data-step="propagate"] .annotation-propagation-direction {visibility:visible; opacity:1; transform:translateY(0); transition-delay:0s;}
.contact-grounding-progress {opacity:0; visibility:hidden; max-height:0; overflow:hidden; transition:opacity 0.3335s ease,max-height 0.4s ease,margin 0.4s ease,visibility 0s 0.3335s; margin:0; font-size:var(--type-label); color:var(--muted); line-height:1.35;}
.contact-recording:not([data-step="scan"]) .contact-grounding-progress {opacity:1; visibility:visible; max-height:120px; margin-top:10px; transition-delay:0s;}
.contact-recording .annotation-result {opacity:0; visibility:hidden; max-height:0; overflow:hidden; transform:translateY(5px); transition:opacity 0.3335s ease,transform 0.4s ease,max-height 0.4s ease,margin 0.4s ease,visibility 0s 0.3335s; margin:0; font-size:var(--type-body); line-height:1.3; color:var(--green);}
.contact-recording:is([data-step="instruction"],[data-step="complete"]) .annotation-result {opacity:1; visibility:visible; max-height:100px; margin-top:10px; transform:translateY(0); transition-delay:0s;}
.annotation-feed-clip {position:absolute; pointer-events:none; z-index:4; opacity:0; transform-origin:center; box-shadow:0 4px 14px #244c3b30; border-radius:0;}
.annotation-prompt-flight {position:absolute; width:12px; height:12px; border:2px solid white; border-radius:50%; background:#7448c7; box-shadow:0 0 0 5px #7448c735; opacity:0; z-index:4; pointer-events:none;}
.contact-plot-focus {opacity:0; transition:opacity 0.3335s;}
.contact-chart.is-annotating .contact-plot-focus {opacity:1;}
.contact-plot-seed {opacity:0; transition:opacity 0.4335s ease;}
.contact-plot-boundaries text {transition:opacity 0.4s ease;}
.contact-chart:is([data-step="contact"],[data-step="gemini"],[data-step="point"],[data-step="sam"],[data-step="propagate"],[data-step="complete"]) .contact-plot-seed {opacity:1;}
.contact-chart:is([data-step="contact"],[data-step="gemini"],[data-step="point"],[data-step="sam"],[data-step="propagate"],[data-step="complete"]) .contact-plot-boundaries text {opacity:0;}
@media(max-width:760px) {
 .contact-stage-heading {flex-wrap:wrap; gap:4px 12px;}
 .annotation-model {top:8px; left:8px; max-width:calc(100% - 16px); padding:8px 10px; gap:8px;}
 .annotation-model img {width:20px; height:20px;}
 .annotation-model .meta-symbol {width:31px; height:20px;}
 .annotation-model .meta-symbol img.meta-logo {width:99px; height:20px;}
 .annotation-clips {left:8px; right:8px; bottom:8px;}
 .annotation-point {width:10px; height:10px;}
}
@media(prefers-reduced-motion:reduce) {.contact-grounding *,.contact-grounding-progress,.annotation-result,.contact-plot-focus,.contact-plot-seed,.contact-plot-boundaries text {animation:none!important; transition:none!important;}}

/* A crossfade of genuine decoded frames, only for deliberate annotation seeks. */
.annotation-frame-transition {position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; z-index:1;}

/* Keep the generated instruction inside the video, without growing the chapter. */
.annotation-instruction {position:absolute; bottom:12px; left:12px; max-width:calc(100% - 24px); margin:0; padding:8px 12px; background:#faf8f2f5; color:var(--green); font:400 var(--type-label)/1.3 var(--serif); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity 0.3335s ease,transform 0.4s ease,visibility 0s 0.3335s; z-index:3;}
.contact-grounding[data-step="instruction"] .annotation-instruction {opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;}
.annotation-propagation-direction {max-width:calc(100% - 24px);}
@media(prefers-reduced-motion:reduce) {.annotation-instruction {transition:none;}}