.home-content{padding-bottom:80px}.home-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;padding:65px 0 110px;min-height:680px}.home-hero h1{font-size:clamp(56px,6vw,84px);white-space:normal}.home-tagline{font:400 clamp(27px,3vw,43px)/1.2 var(--ar-display);letter-spacing:0;margin-top:24px}.home-hero .hero-install{margin-top:36px}.home-hero code{line-height:1.85}.home-hero .actions{flex-direction:row}.archive-panel{position:relative;min-width:0;background:var(--surface);box-shadow:5px 5px 0 var(--neon-cyan),10px 10px 0 var(--neon-pink)}.hero-stack{padding:38px 32px 42px 20px;min-height:480px;display:flex;align-items:center}.hero-stack [data-home-figure]{width:100%;--hairline-stroke:1.2}.home-content [data-home-figure]{--hairline-plate:var(--surface);--hairline-edge:var(--stroke);--hairline-mid:var(--stroke);--hairline-lo:var(--archive-line);--hairline-hi:var(--accent)}.home-content [data-hairline-live]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.home-content section>h2{font-size:clamp(43px,5vw,68px);margin-bottom:38px}.home-features,.home-layers,.home-extend{padding-top:65px;padding-bottom:70px}.task-box{position:absolute;border:2px solid var(--neon-pink);pointer-events:none}.task-box.range{border-style:dashed;border-color:var(--neon-cyan)}.home-layer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.layer-card{position:relative;background:var(--surface);padding:24px 22px 35px;display:flex;flex-direction:column;box-shadow:3px 3px 0 var(--neon-cyan),6px 6px 0 var(--neon-pink);min-width:0}.layer-card:before{content:'';position:absolute;left:0;top:0;width:28px;height:2px;background:var(--accent)}.layer-card:after{content:'';position:absolute;bottom:15px;right:14px;width:24px;height:1px;background:var(--neon-pink)}.layer-card [data-home-figure]{margin-bottom:23px}.layer-card h3{font:500 30px/1.1 var(--ar-display);letter-spacing:0;margin-bottom:16px}.layer-card p{font-size:14px;line-height:1.75;margin-bottom:24px}.layer-card a{margin-top:auto;font-size:13px;color:var(--accent);display:flex;justify-content:space-between;gap:20px}.home-content .hero-copy{padding:0}.home-content pre{font-family:var(--ar-mono)}#cyberspace{opacity:.55}.pearl #cyberspace{opacity:.34}
@media(max-width:1100px){.home-hero{gap:6%;padding-top:45px;min-height:590px}.hero-stack{min-height:380px;padding:28px 20px 32px 12px}.home-layer-grid{grid-template-columns:repeat(2,1fr);gap:34px}.layer-card{padding:26px 30px 35px}.layer-card [data-home-figure]{width:80%;align-self:center}}
@media(max-width:800px){.home-hero{grid-template-columns:1fr;gap:48px;min-height:0;padding:35px 0 55px}.home-hero h1{font-size:clamp(44px,14vw,84px)}.home-tagline{font-size:33px;line-height:1.2}.hero-stack{min-height:0;padding:35px 22px 40px 15px;margin-right:10px}.home-hero .hero-install{margin-top:28px}.home-content section>h2{font-size:45px;margin-bottom:28px}.home-features,.home-layers,.home-extend{padding-top:42px;padding-bottom:35px}.home-layer-grid{gap:28px}.layer-card{padding:18px 20px 30px}.layer-card h3{font-size:27px}.layer-card p{font-size:13px}.layer-card [data-home-figure]{width:100%}.home-content{padding-bottom:40px}}
@media(max-width:520px){.home-layer-grid{grid-template-columns:1fr}.layer-card [data-home-figure]{max-width:250px}.home-tagline{font-size:31px}.hero-stack{margin-top:0}.home-layer-grid{gap:30px}.layer-card h3{font-size:30px}.layer-card p{font-size:15px}}
.hero-stack [data-home-figure]{transform:scale(1.25)}.home-content .hero-stack{overflow:hidden}
/* Responsive layout with a shared content-width ceiling. */
.wrap{max-width:1120px}

.install-switcher{margin-top:36px;max-width:410px}
.install-tabs{display:flex;gap:24px;margin-bottom:12px}
.install-tabs button{padding:5px 0 9px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:500 14px var(--ar-mono);cursor:pointer}
.install-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--pink)}
.install-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.home-hero .install-switcher .hero-install{margin-top:0;max-width:none}
.hero-install button:disabled{cursor:default}.hero-install button:disabled .copy-icon{visibility:hidden}
@media(max-width:1100px){.install-switcher{max-width:350px}}
@media(max-width:800px){.install-switcher{margin-top:28px;max-width:410px}}

/* Recorded demo figures. */

.extend-copy h3{font:500 clamp(28px,3vw,38px)/1.1 var(--ar-display);letter-spacing:0;margin-bottom:20px}

.extend-copy .text-link{margin-top:26px;color:var(--accent)}

.demo-figure{margin:0;padding:26px 24px 18px}
.demo-figure svg{display:block;width:100%;height:auto;overflow:visible}
.d-label,.d-tick,.d-name{font-family:var(--ar-mono)}
.d-label{font-size:14px;fill:var(--muted)}
.d-tick{font-size:13px;fill:var(--muted);text-anchor:middle}
.d-rule{stroke:var(--archive-line);stroke-dasharray:2 5}
.d-axis{stroke:var(--stroke)}
.d-model{fill:var(--pink)}
.d-prog{fill:var(--accent)}
.d-prog.alt{fill:none;stroke:var(--accent);stroke-width:1.6}
.d-reflex{stroke:var(--stroke);stroke-width:1.4}
.d-link{fill:none;stroke:var(--stroke);stroke-width:1.4}
.d-head{fill:var(--stroke)}
.d-box{fill:var(--bg);stroke:var(--stroke)}
.d-title{font:500 26px var(--ar-display);fill:var(--fg)}
.d-name{font-size:16px;fill:var(--fg)}
.d-stack path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.d-stack path.fill{fill:var(--accent)}
.d-playhead{stroke:var(--fg);stroke-width:1.5;opacity:.9}


/* How it works */
.section-lead{max-width:760px;font-size:17px;margin:-16px 0 44px}
.layer-when{display:block;margin-bottom:10px;font:500 12px var(--ar-mono);color:var(--pink)}

/* Integrations: six cards side by side, each a framed figure of what The Harness
   connects to (logos in the text colour, the arrow saying who calls whom), then its
   copy, a folded setup snippet and the guide. */
.extend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px}
.extend-card{display:flex;flex-direction:column;min-width:0}
.logo-figure{padding:26px 34px 46px 22px;margin:0 6px 28px 0}
.logo-figure .archive-overlay{inset:10px 22px 10px 10px}
.extend-flow{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-bottom:18px;font:500 13px var(--ar-mono);color:var(--muted)}
.extend-hub{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--stroke);background:var(--bg);color:var(--fg);font:500 16px var(--ar-display);white-space:nowrap}
.extend-hub svg{width:20px;height:20px}
.extend-hub .d-stack path{stroke-width:3}
.extend-arrow{position:relative;flex:1;min-width:24px;height:9px}
.extend-arrow i{position:absolute;left:0;right:0;top:4px;height:1px;background:var(--stroke)}
.extend-arrow:before,.extend-arrow:after{content:'';position:absolute;top:0;width:0;height:0;border:4.5px solid transparent;display:none}
.extend-arrow.out:after,.extend-arrow.both:after{display:block;right:-4px;border-left-color:var(--stroke)}
.extend-arrow.in:before,.extend-arrow.both:before{display:block;left:-4px;border-right-color:var(--stroke)}
.extend-kind{white-space:nowrap;color:var(--accent)}
.logo-grid{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;min-height:262px;align-content:center}
.logo-grid li{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.logo-grid .logo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg);border:1px solid var(--archive-line);color:var(--fg)}
.logo-grid .logo svg{width:24px;height:24px;display:block}
.logo-grid .more a{display:flex;flex-direction:column;align-items:center;gap:7px;color:inherit}
.logo-grid .more .logo{border-style:dashed;border-color:var(--stroke);color:var(--accent);font:400 22px/1 var(--ar-mono)}
.logo-grid .more a:hover .logo{border-style:solid;border-color:var(--accent)}
.logo-grid .logo-name{max-width:100%;font:10.5px/1.25 var(--ar-mono);color:var(--muted);text-align:center;overflow-wrap:normal}
.extend-copy h3{font:500 clamp(24px,2.2vw,30px)/1.15 var(--ar-display);letter-spacing:0;margin-bottom:12px}
.extend-copy h3 span{color:var(--pink)}
.extend-copy p{font-size:14px;line-height:1.7}
.extend-setup{margin-top:16px}
.extend-setup summary{cursor:pointer;width:max-content;font:500 13px var(--ar-mono);color:var(--muted)}
.extend-setup summary:hover,.extend-setup[open] summary{color:var(--accent)}
.extend-copy pre{margin:12px 0 0;padding:16px 18px 30px;background:var(--surface);overflow:auto;font-size:12px;line-height:1.8}
.extend-copy pre code{font-size:12px;white-space:pre}
.extend-copy code span{color:var(--muted)}
.extend-copy .text-link{margin-top:18px}
@media(max-width:1100px){.extend-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.extend-grid{grid-template-columns:1fr;gap:48px}.logo-figure{margin-right:10px}}
@media(max-width:520px){.logo-grid .logo-name{font-size:9.5px}}
@media(max-width:800px){.section-lead{font-size:16px;margin:-8px 0 32px}.demo-figure{padding:16px 14px 10px;margin-right:10px}}

/* Phones: the header row is the logo, the theme switch and a menu button; the
   nav, language, log in and sign up fold into the menu under it. The install
   command stays on one line, and the Chinese tagline is sized so its second line
   does not leave one character behind. */
@media(max-width:800px){
.hero-install button{padding:16px 16px;gap:12px}
.hero-install code{font-size:min(14px,3.5vw);white-space:nowrap}
html[lang^=zh] .home-tagline{font-size:min(33px,6.4vw)}
}

/* Archive marks on the sections below the hero: the same registration frame as the
   hero on every drawn figure, capture brackets on screenshots, register bars and
   barcodes on code, an end rule under each block of copy, and an index rail that
   shows which of the three sections this is. */
.home-features,.home-layers,.home-extend{position:relative}
.section-index{position:absolute;right:0;top:78px;display:flex;align-items:center;gap:7px}
.section-index:before{content:'';width:90px;height:1px;margin-right:6px;background:var(--archive-line)}
.section-index i{width:7px;height:7px;border:1px solid var(--archive-line)}
.section-index i.on{background:var(--archive-bright);border-color:var(--archive-bright)}
.section-index i:last-child:not(.on){border-color:var(--neon-pink)}
.demo-figure{padding:34px 42px 50px 28px}
.demo-figure svg{position:relative;z-index:1}
.demo-figure .archive-overlay{z-index:2}
.demo-figure .archive-barcode{bottom:14px;right:46px}
.capture-marks{position:absolute;inset:10px;pointer-events:none;z-index:2}
.capture-marks i{position:absolute;width:16px;height:16px;border:0 solid var(--archive-bright)}
.capture-marks i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}
.capture-marks i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}
.capture-marks i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}
.capture-marks i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0;border-color:var(--neon-pink)}
.extend-copy{position:relative}
.extend-copy:before{content:'';display:block;width:28px;height:2px;margin-bottom:22px;background:var(--accent)}
.archive-end{display:block;position:relative;max-width:360px;height:1px;margin-top:30px}
.archive-end:before,.archive-end:after{content:'';position:absolute;top:0;height:1px}
.archive-end:before{left:0;width:10px;background:var(--archive-line)}
.archive-end:after{right:0;width:30px;background:var(--neon-pink)}
.extend-copy pre,.demo-program pre{position:relative;padding-bottom:30px}

.extend-copy pre:after,.demo-program pre:after{content:'';position:absolute;left:20px;bottom:10px;width:40px;height:5px;background:repeating-linear-gradient(90deg,var(--archive-bright) 0 1px,transparent 1px 3px,var(--archive-bright) 3px 5px,transparent 5px 8px)}
@media(max-width:800px){.section-index{top:48px}.section-index:before{width:40px}.demo-figure{padding:26px 32px 40px 20px}.demo-figure .archive-overlay{inset:10px 22px 10px 10px}}
@media(max-width:520px){.section-index{display:none}}

/* Learning figure: tested entries in the library, links to the programs that use them. */
.d-check{fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.d-entry{fill:none;stroke:var(--accent);stroke-width:1.6}
.d-entry.second{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.d-link.dashed{stroke-dasharray:3 4}

/* Night: the point cloud is drawn deeper and dimmer (cyberspace.js) and the body copy a
   step lighter, so text keeps clear of the background. */
.midnight{--muted:#c3d2d9}
.midnight #cyberspace{opacity:.55}

/* Feature demos share one template: the recording on top, its timeline underneath on
   the same time axis. Until a recording exists, a flat drawing of the screen holds its
   place. The program behind "one call" folds away under the figure. */
.demo-video{display:flex;flex-direction:column}
.demo-screen{position:relative;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.demo-figure .demo-screen>svg,.demo-screen>img{display:block;width:100%;height:100%;object-fit:cover}
.demo-screen .capture-marks{inset:8px}
.demo-figure.demo-video{padding:0;gap:0}
.demo-track{position:relative;padding:22px 42px 30px 28px}
.demo-track .archive-barcode{display:none}
.demo-screen .screen-code{right:32px;bottom:12px;z-index:2}

.demo-program{margin-top:30px}
.demo-program summary{cursor:pointer;width:max-content;font:500 13px var(--ar-mono);color:var(--muted)}
.demo-program summary:hover,.demo-program[open] summary{color:var(--accent)}
.demo-program p{margin-top:14px;font-size:15px;color:var(--fg)}
.demo-program pre{margin:12px 0 0;padding:16px 18px 30px;background:var(--surface);overflow:auto;color:var(--accent);font-size:12px;line-height:1.8}
.demo-program pre code{font-size:12px;white-space:pre}
.demo-program code span{color:var(--muted)}
.v-bg{fill:var(--bg)}
.v-bar{fill:var(--surface)}
.v-panel{fill:color-mix(in srgb,var(--surface) 65%,var(--bg))}
.v-dim{fill:var(--archive-line);opacity:.65}
.v-accent{fill:var(--accent)}
.v-field{fill:var(--bg);stroke:var(--archive-line)}
.v-field.done{stroke:var(--accent)}
.v-field.fresh{stroke:var(--neon-pink);stroke-width:1.6}
.v-msg{fill:var(--bg)}
.v-msg.you{fill:var(--pink)}
.v-on-pink{fill:#fff;opacity:.85}
.v-cursor{fill:var(--fg);stroke:var(--bg);stroke-width:1.2;stroke-linejoin:round}
.v-check{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.think-dot{animation:think-dot 1.2s ease-in-out infinite}
@keyframes think-dot{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.think-dot{animation:none}}
@media(max-width:800px){.demo-program{margin-top:22px}}
/* On a phone the timeline is drawn at under half size: larger lane and axis text keep it readable. */
@media(max-width:800px){.demo-track{padding:18px 32px 24px 20px}.demo-screen .screen-code{right:26px;bottom:10px}}

/* Folded code (a program, a setup snippet) opens as a floating panel under its summary
   instead of pushing the page down. */
.pop{position:relative}
.pop summary{list-style-position:inside}
.pop-body{position:absolute;left:0;width:max-content;min-width:100%;max-width:min(600px,calc(100vw - 32px));top:calc(100% + 12px);z-index:30;padding:18px 20px 16px;background:var(--surface);box-shadow:3px 3px 0 var(--neon-cyan),6px 6px 0 var(--neon-pink)}
.pop-body:before{content:'';position:absolute;left:0;top:0;width:28px;height:2px;background:var(--accent)}
.pop-body p{margin:0 0 12px}
.extend-copy .pop-body pre,.demo-program .pop-body pre{margin:0;padding:0 0 26px;background:none;max-height:60vh}
.extend-copy .pop-body pre:after,.demo-program .pop-body pre:after{left:0;bottom:6px}
.demo-program .pop-body p{margin-top:0}

/* Multimodal first: the same stage as the claims below it, mirrored: the screen on the
   left, the three inputs on the right. */
.home-modal{position:relative;padding-top:20px;padding-bottom:70px}
.section-lead a{color:var(--accent);white-space:nowrap}
.v-rule{fill:none;stroke:var(--archive-line)}
.v-arm{fill:none;stroke:var(--stroke);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.v-grip{fill:none;stroke:var(--fg);stroke-width:3;stroke-linecap:round}
.v-box{fill:none;stroke:var(--neon-pink);stroke-width:2.5}

/* The demo stage: the claims as a list, one open at a time, beside the single screen
   they all play on. Panels share one grid cell, so the stage never changes height. */
.stage{display:grid;grid-template-columns:.7fr 1.3fr;gap:5%;align-items:start}
.stage-list{min-width:0}
.stage-item{position:relative;border-top:1px solid var(--archive-line)}
.stage-item:last-child{border-bottom:1px solid var(--archive-line)}
.stage-item h3 button{display:block;width:100%;padding:17px 0;border:0;background:none;text-align:left;color:var(--muted);font:500 clamp(22px,2.2vw,28px)/1.1 var(--ar-display);letter-spacing:0}
.stage-item h3 button:hover{color:var(--fg)}
.stage-item.on h3 button{color:var(--fg);padding-bottom:10px}
.stage-progress{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--accent)}
.stage-detail{display:none;box-sizing:border-box;padding-bottom:22px}
.stage-item.on .stage-detail{display:block;min-height:var(--stage-detail,0)}
.stage-measure .stage-detail{display:block;min-height:0}
.stage-detail p{font-size:15px;line-height:1.7}
.stage-detail .text-link{margin-top:16px;color:var(--accent)}
.stage-detail .demo-program{margin-top:12px}
.stage-screen{display:grid;min-width:0;margin-right:10px}
.stage-panel{grid-area:1/1;min-width:0}
.stage-panel:not(.on){visibility:hidden}
.stage.reverse{grid-template-columns:1.3fr .7fr}
.stage.reverse .stage-screen{order:-1}
.stage-item h3 button span{margin-left:10px;font:400 13px var(--ar-mono);color:var(--muted)}

@media(max-width:800px){
.home-modal{padding-top:10px;padding-bottom:35px}
.stage,.stage.reverse{grid-template-columns:1fr;gap:30px}.stage-screen{order:-1}
}

/* The native range shares the SVG's 110..630 plot area, including its thumb radius. */
.demo-screen>video{display:block;width:100%;height:100%;object-fit:contain}
.demo-timeline-control{position:relative;min-width:0}
.demo-timeline-control>svg{display:block;width:100%;height:auto}
.demo-seek{position:absolute;z-index:3;left:calc(var(--plot-left) * 100% - 8px);top:0;width:calc(var(--plot-width) * 100% + 16px);height:100%;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y;border:0;border-radius:0}
.demo-seek::-webkit-slider-runnable-track{height:100%;background:transparent}
.demo-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:100%;background:transparent;border:0}
.demo-seek::-moz-range-track{height:100%;background:transparent;border:0}
.demo-seek::-moz-range-thumb{width:16px;height:100%;background:transparent;border:0}
.demo-seek:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.demo-cursor-cap{fill:var(--fg)}
.d-event-tick{stroke-width:1;stroke:var(--accent)}
.d-event-tick.d-model{stroke:var(--neon-pink)}
.d-library{fill:var(--fg);stroke:var(--fg)}





@media(max-width:520px){.demo-track{padding-right:20px}}

.d-tick.d-tick-start{text-anchor:start}.d-tick.d-tick-end{text-anchor:end}
rect.d-reflex{fill:var(--stroke);stroke:none;opacity:.6}

@media(max-width:520px){.demo-timeline .d-label{font-size:20px}.demo-timeline .d-tick{font-size:18px}}
/* The reflex layer is the one that sets this design apart: its card takes the pink of the reflex ring. */
.home-layer-grid{--reflex-surface:color-mix(in srgb,var(--surface) 88%,var(--neon-pink))}
.layer-reflex{--accent:var(--pink);background:var(--reflex-surface);box-shadow:3px 3px 0 var(--neon-pink),6px 6px 0 var(--neon-cyan)}
.layer-reflex [data-home-figure]{--hairline-plate:var(--reflex-surface)}
.layer-reflex .layer-when{color:var(--ar-accent)}
.layer-reflex:after{background:var(--neon-cyan)}