/* Approved connected-card composition; card appearance is handled in cards.css. */
.flow-canvas{--node-text:clamp(12px,1.1vw,18px);--illustration-heading:clamp(18px,1.75vw,27px);--illustration-caption:clamp(15px,1.4vw,22px);height:600px;font-size:var(--node-text)}
.flow-canvas .node-caption{color:var(--ice);font-size:var(--illustration-caption);line-height:1.2;top:auto;bottom:calc(100% + var(--gap-sm));max-width:100%;white-space:normal}
.flow-canvas .source-doc .paper,.flow-canvas .attachment .paper{min-height:200px}
.flow-canvas .result .paper{min-height:320px}
.flow-canvas .source-doc{left:1%;top:4%;width:20%;transform:rotate(-4deg)}
.flow-canvas .attachment{left:10%;top:auto;bottom:3%;width:20%;transform:rotate(3deg)}
.flow-canvas .engine{left:36%;top:14%;width:29%;height:70%}
.flow-canvas .result{left:76%;top:6%;width:24%;transform:rotate(2deg)}
.flow-canvas .team-node{right:3%;bottom:2%;width:20%;min-height:78px}
.flow-canvas .team-node .port{top:45%}
.flow-canvas .result .port.out{top:auto;bottom:-5px;left:50%;right:auto}
.flow-canvas .team-node .port{top:-5px;left:50%;right:auto}
.flow-canvas .connections{display:block;overflow:visible;pointer-events:none}
.flow-canvas .connections path{animation:none;stroke-dasharray:none;stroke-dashoffset:0;stroke:var(--line);stroke-width:1.4}
.flow-canvas:before{display:none}
.flow-canvas .paper-language{font-size:11px}
.flow-canvas .paper strong{font-size:var(--illustration-heading);letter-spacing:-.035em}
.flow-canvas .result li{font-size:clamp(11px,1vw,15px);padding:10px 0}
.flow-canvas .engine-steps{font-size:clamp(10px,.9vw,14px)}

/* The isolated view lets the Pult compare compositions without scrolling the web. */
[data-view="illustration"] .site-header,[data-view="illustration"] .skip,[data-view="illustration"] .hero-text,[data-view="illustration"] .next-section,[data-view="illustration"] main>.section{display:none}
[data-view="illustration"] .hero{padding:calc(var(--frame-top) + var(--gap-xl)) 0 calc(var(--frame-bottom) + var(--gap-xl));min-height:100svh;display:flex;align-items:center}
[data-view="illustration"] .flow-canvas{margin-top:var(--gap-md);margin-bottom:var(--gap-md)}

@media(min-width:701px) and (max-width:1000px){
 .flow-canvas{height:550px}.flow-canvas .engine-steps{flex-wrap:wrap;justify-content:flex-start;gap:var(--gap-xs)}
 .flow-canvas .result .paper{padding:var(--gap-sm)}
}
@media(max-width:700px){
 .flow-canvas{--engine-input-position:90%;height:1150px;font-size:14px}
 .flow-canvas .source-doc{left:0;top:2%;width:46%;transform:rotate(-4deg)}
 .flow-canvas .attachment{left:auto;right:0;top:5%;bottom:auto;width:43%;transform:rotate(4deg)}
 .flow-canvas .source-doc .paper,.flow-canvas .attachment .paper{min-height:200px;padding:var(--gap-sm)}
 .flow-canvas .source-doc .paper strong,.flow-canvas .attachment .paper strong{font-size:18px}
 .flow-canvas .engine{left:12%;top:32%;width:76%;height:24%}
 .flow-canvas .engine-logo{width:65%}
 .flow-canvas .engine-orbit{width:46%;left:34%;top:25%}
 .flow-canvas .engine-steps{font-size:11px}
 .flow-canvas .result{left:5%;top:61%;width:77%;transform:rotate(-3deg)}
 .flow-canvas .result .paper{min-height:0;padding:var(--gap-md)}
 .flow-canvas .result .paper strong{font-size:25px;margin:var(--gap-sm) 0}
 .flow-canvas .result li{font-size:12px;padding:9px 0}
 .flow-canvas .team-node{right:0;bottom:0;top:auto;width:46%;min-height:58px;display:flex;font-size:12px;transform:rotate(2deg)}
 .flow-canvas .team-symbol{margin:0;flex:none}
 .flow-canvas .node-caption{font-size:var(--illustration-caption)}
}

html:not(.js) .connections{display:none}
@media(max-width:700px){
 .flow-canvas .source-doc .port,.flow-canvas .attachment .port{top:auto;bottom:-5px;left:50%;right:auto}
 .flow-canvas .engine .port.left,.flow-canvas .result .port.left{top:-5px;left:50%;right:auto}
 /* Keep incoming connections beside the larger caption. */
 .flow-canvas .engine .port.left{left:var(--engine-input-position)}
 .flow-canvas .engine .port.right{top:auto;bottom:-5px;left:50%;right:auto}
}

/* Optional foreign-language samples retain the original documents for comparison. */
.document-native,.document-caption{display:none}
[data-source="native"] .document-original{display:none}
[data-source="native"] .document-native,[data-source="native"] .document-caption{display:block}
[data-source="native"] .flow-canvas{--document-text:clamp(12px,1.1vw,16px);--document-heading:clamp(16px,1.5vw,23px);margin-top:calc(var(--gap-xl) + var(--gap-lg) + var(--gap-sm))}
[data-source="native"] .document-native strong{font-size:var(--document-heading);overflow-wrap:anywhere;letter-spacing:normal;margin:var(--gap-sm) 0}
.document-excerpt{font-size:var(--document-text);line-height:1.5;overflow-wrap:anywhere}
[data-source="native"] .document-native:lang(ja){font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
[data-source="native"] .document-native .paper-language{overflow-wrap:anywhere}
@media(max-width:700px){
 [data-source="native"] .flow-canvas{--document-text:12px;--document-heading:16px}
 [data-source="native"] .flow-canvas .source-doc .paper strong,[data-source="native"] .flow-canvas .attachment .paper strong{font-size:var(--document-heading)}
}

/* Monitoring alternatives use schematic documents, never product screenshots. */
.world{--monitor-stroke:1.3;--monitor-stage:580px;--monitor-grid:color-mix(in srgb,var(--ice) 44%,transparent);--monitor-route:var(--accent);--monitor-sheet:var(--paper);--monitor-sheet-line:color-mix(in srgb,var(--ink) 35%,var(--paper))}
.monitor-orbit,.monitor-atlas{display:none;width:100%;height:auto;overflow:visible}
[data-monitor="orbit"] .world,[data-monitor="atlas"] .world{min-height:0;aspect-ratio:600/580;margin-left:0}
[data-monitor="orbit"] .monitor-orbit{display:block;position:relative;z-index:1}
[data-monitor="orbit"] .globe{inset:22% auto auto 22%;width:56%;opacity:.6}
[data-monitor="orbit"] .location,[data-monitor="atlas"] .location,[data-monitor="atlas"] .globe{display:none}
.orbit-wire{fill:none;stroke:var(--monitor-grid);stroke-width:var(--monitor-stroke)}
.orbit-sheet rect,.atlas-sheet rect{fill:var(--monitor-sheet)}
.orbit-sheet path,.atlas-sheet path{fill:none;stroke:var(--monitor-sheet-line);stroke-width:3}
.orbit-sheet:nth-of-type(3) rect{fill:var(--ice)}
.orbit-point,.atlas-point{fill:var(--monitor-route)}
[data-monitor="atlas"] .monitor-atlas{display:block}
[data-monitor="atlas"] .world{aspect-ratio:600/480}
.atlas-grid{fill:none;stroke:var(--monitor-grid);stroke-width:var(--monitor-stroke)}
.atlas-routes{fill:none;stroke:var(--monitor-route);stroke-width:2}
.atlas-point circle{stroke:var(--dark);stroke-width:4}

/* Three further monitoring compositions: a conveyor of notices, a radar over sources, sources funnelled into one board. */
.world{--monitor-label:var(--small);--monitor-board-title:clamp(20px,1.8vw,27px);--monitor-frame:color-mix(in srgb,var(--ice) 70%,transparent);--monitor-sweep:var(--accent);--monitor-board-rule:color-mix(in srgb,var(--ink) 15%,var(--paper));--monitor-board-dot:color-mix(in srgb,var(--ink) 25%,var(--paper))}
.monitor-option{display:none;position:relative;width:100%}
.monitor-stream svg,.monitor-radar svg{display:block;width:100%;height:auto;overflow:visible}
[data-monitor="stream"] .world,[data-monitor="radar"] .world,[data-monitor="sources"] .world{min-height:0;aspect-ratio:600/580;margin-left:0}
[data-monitor="stream"] .globe,[data-monitor="stream"] .location,[data-monitor="radar"] .globe,[data-monitor="radar"] .location,[data-monitor="sources"] .globe,[data-monitor="sources"] .location{display:none}
[data-monitor="stream"] .monitor-stream,[data-monitor="radar"] .monitor-radar,[data-monitor="sources"] .monitor-sources{display:block}
.monitor-label{position:absolute;color:var(--ice);font-size:var(--monitor-label);letter-spacing:var(--label-track);white-space:nowrap}
/* Stream: identical sheets ride a chute through one gate; the loop advances by exactly one sheet spacing. Both ends dissolve under fog in the surface colour, so no SVG mask is needed. */
.monitor-stream svg{overflow:hidden}
.fog-solid{stop-color:var(--dark)}
.fog-clear{stop-color:var(--dark);stop-opacity:0}
.stream-guide{fill:none;stroke:var(--monitor-grid);stroke-width:var(--monitor-stroke)}
.stream-sheet rect{fill:var(--monitor-sheet)}
.stream-sheet path{fill:none;stroke:var(--monitor-sheet-line);stroke-width:3}
.stream-gate{fill:none;stroke:var(--monitor-route);stroke-width:2}
.stream-post{fill:var(--monitor-route)}
.stream-pile .stream-sheet rect{fill:none;stroke:var(--monitor-grid);stroke-width:var(--monitor-stroke)}
.stream-pile .stream-sheet path{display:none}
.stream-pile .stream-sheet:last-child rect{fill:var(--ice);stroke:none}
.stream-pile .stream-sheet:last-child path{display:block}
@media(prefers-reduced-motion:no-preference){.stream-sheets{animation:monitor-stream 6s linear infinite}}
@keyframes monitor-stream{to{transform:translate(-69.6px,102.6px)}}
/* Radar: the sweep turns about the dial centre; blips mark watched sources, two of them with a found notice. */
.radar-grid{fill:none;stroke:var(--monitor-grid);stroke-width:var(--monitor-stroke)}
.radar-sweep{transform-box:view-box;transform-origin:300px 292px}
.radar-sweep path{fill:var(--monitor-sweep);opacity:.16}
.radar-sweep path+path{opacity:.06}
.radar-sweep line{stroke:var(--monitor-route);stroke-width:2}
.radar-core,.radar-point{fill:var(--monitor-route)}
.radar-point circle{stroke:var(--dark);stroke-width:4}
.radar-ping{fill:none;stroke:var(--monitor-route);stroke-width:var(--monitor-stroke);opacity:.55}
.radar-sheet rect{fill:var(--monitor-sheet)}
.radar-sheet path{fill:none;stroke:var(--monitor-sheet-line);stroke-width:3}
.radar-label-1{left:58%;top:26%}.radar-label-2{left:13%;top:46%}.radar-label-3{left:60%;top:66%}.radar-label-4{left:34%;top:73%}
@media(prefers-reduced-motion:no-preference){.radar-sweep{animation:monitor-radar 12s linear infinite}}
@keyframes monitor-radar{to{transform:rotate(360deg)}}
/* Sources: four watched portals feed one trunk that ends in a single board of notices. */
.monitor-sources{aspect-ratio:600/580}
.source-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;fill:none;stroke:var(--monitor-grid);stroke-width:var(--monitor-stroke)}
.source-node circle{fill:var(--monitor-sheet);stroke:none}
.source-port{fill:var(--monitor-route);stroke:var(--dark);stroke-width:4}
.source-tile{position:absolute;left:0;width:30%;height:15%;display:flex;flex-direction:column;justify-content:center;gap:var(--gap-xs);padding:var(--gap-xs) var(--gap-sm);border:var(--hairline) solid var(--monitor-frame);border-radius:var(--radius);color:var(--ice);font-size:var(--monitor-label);letter-spacing:var(--label-track)}
.source-tile:nth-of-type(1){top:6%}.source-tile:nth-of-type(2){top:29%}.source-tile:nth-of-type(3){top:52%}.source-tile:nth-of-type(4){top:75%}
.source-dots{display:flex;gap:calc(var(--gap-xs)*.5)}
.source-dots i{width:calc(var(--gap-xs)*.5);height:calc(var(--gap-xs)*.5);border-radius:50%;background:var(--ice)}
.source-lines{display:flex;flex-direction:column;gap:calc(var(--gap-xs)*.5)}
.source-lines i{display:block;height:var(--hairline);background:var(--monitor-grid);width:80%}
.source-lines i+i{width:55%}
.source-board{position:absolute;left:62%;top:6%;right:0;bottom:6%;z-index:0;background:var(--monitor-sheet);color:var(--ink);border-radius:var(--radius);padding:var(--gap-xs) var(--gap-sm);display:flex;flex-direction:column;justify-content:space-evenly}
.source-board strong{display:block;font-weight:400;font-size:var(--monitor-board-title);letter-spacing:var(--display-track);line-height:1.05;padding-bottom:var(--gap-xs)}
.source-row{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--gap-xs) 0;border-top:var(--hairline) solid var(--monitor-board-rule)}
.source-row:first-child{border-top:0}
.source-row:before{content:"";flex:none;width:var(--gap-xs);height:var(--gap-xs);border-radius:50%;background:var(--monitor-board-dot)}
.source-row-new:before{background:var(--accent);box-shadow:0 0 0 calc(var(--gap-xs)*.5) color-mix(in srgb,var(--accent) 30%,transparent)}
.source-row span{flex:1;display:flex;flex-direction:column;gap:calc(var(--gap-xs)*.5)}
.source-row i{display:block;height:calc(var(--hairline)*3);background:var(--monitor-sheet-line);width:90%}
.source-row i+i{width:60%}
@media(max-width:700px){
 .source-tile{padding:var(--gap-xs);gap:calc(var(--gap-xs)*.5)}
 .source-lines{display:none}
 .source-board{padding:var(--gap-xs)}
 .source-row{gap:var(--gap-xs);padding:calc(var(--gap-xs)*.5) 0}
}

/* Reuse the same document content in two genuinely different compositions. */
.research-art{--research-page-title:clamp(25px,2.5vw,38px);--research-caption:clamp(11px,1vw,14px);--research-rule:var(--line);--research-sheet-tint:var(--ice)}
.research-links{display:none}
[data-research="spread"] .research-art{display:grid;grid-template-columns:1fr 1fr;gap:var(--hairline);align-content:center;padding:var(--gap-sm);background:var(--ink);overflow:visible}
[data-research="spread"] .research-art .paper{position:relative;top:auto;left:auto;width:auto;min-width:0;min-height:360px;transform:none;border-radius:var(--radius) 0 0 var(--radius);box-shadow:none}
[data-research="spread"] .research-art .paper-back{background:var(--research-sheet-tint);transform:perspective(1000px) rotateY(-8deg);transform-origin:right}
[data-research="spread"] .research-art .paper-front{border-radius:0 var(--radius) var(--radius) 0;transform:perspective(1000px) rotateY(8deg);transform-origin:left}
[data-research="spread"] .paper-front strong,[data-research="extract"] .paper-front strong{font-size:var(--research-page-title)}
[data-research="spread"] .highlight-line,[data-research="extract"] .highlight-line{font-size:var(--research-caption);padding:var(--gap-xs)}
[data-research="spread"] .translate-mark{left:50%;bottom:0;transform:translateX(-50%);background:var(--accent);color:var(--ink);font-size:var(--profile-label,26px);white-space:nowrap}
[data-research="extract"] .research-art{background:none;overflow:visible}
[data-research="extract"] .research-art .paper-back{left:3%;top:5%;width:39%;min-height:380px;transform:rotate(-5deg);background:var(--research-sheet-tint)}
[data-research="extract"] .research-art .paper-back:before{content:"";position:absolute;inset:0;transform:rotate(-5deg) translate(-4%,2%);border:var(--hairline) solid var(--research-rule);border-radius:var(--radius);z-index:-1}
[data-research="extract"] .research-art .paper-front{left:auto;right:0;top:18%;width:52%;min-height:0;transform:none;border-top:var(--gap-xs) solid var(--accent)}
[data-research="extract"] .paper-front .paper-lines{gap:var(--gap-xs)}
[data-research="extract"] .paper-front .paper-lines i:nth-child(n+4){display:none}
[data-research="extract"] .research-links{display:block;position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--accent);stroke-width:1.5;pointer-events:none}
[data-research="extract"] .research-links circle{fill:var(--accent);stroke:var(--ink)}
[data-research="extract"] .translate-mark{left:8%;bottom:0;transform:none;background:none;color:var(--ice);font-size:var(--profile-label,26px)}
@media(min-width:701px) and (max-width:1000px){
 [data-research="spread"] .research-layout,[data-research="extract"] .research-layout{grid-template-columns:1fr}
 [data-research="spread"] .research-art,[data-research="extract"] .research-art{max-width:620px;width:100%;margin:auto}
 [data-research="spread"] .research-copy,[data-research="extract"] .research-copy{max-width:none}
}
@media(max-width:700px){
 .research-art{--research-page-title:clamp(24px,7vw,32px);--research-caption:11px}
 [data-research="spread"] .research-art{padding:0;height:430px}
 [data-research="spread"] .research-art .paper{padding:var(--gap-sm);min-height:340px}
 [data-research="spread"] .translate-mark{bottom:0}
 [data-research="extract"] .research-art{height:430px}
 [data-research="extract"] .research-art .paper-back{min-height:330px}
 [data-research="extract"] .research-art .paper-front{width:54%;padding:var(--gap-sm)}
}
/* Extraction connectors enter the papers from behind; labels stay unobscured. */
[data-research="extract"] .research-art .paper{z-index:1}
[data-research="extract"] .research-links{z-index:0}

/* Reading and translation: the source is read line by line, then the Czech sheet arrives and is written out. Every animation starts paused at its first frame; script.js releases them once the illustration is in view. The base styles are the finished state, so reduced motion shows everything read and written, and the Pult reloads the page on each axis change. */
[data-research="reading"] .research-art{--research-read-step:.22s;--research-read-line:.45s;--research-read-end:calc(11 * var(--research-read-step) + var(--research-read-line));--research-mark:.4s;--research-sheet-delay:calc(var(--research-read-end) + .25s);--research-sheet:.5s;--research-write-start:calc(var(--research-sheet-delay) + var(--research-sheet));--research-write-title:.5s;--research-write-step:.16s;--research-write-line:.35s;--research-write-block:calc(var(--research-write-title) + 5 * var(--research-write-step) + var(--research-write-line));--research-reading:var(--accent);--research-read:color-mix(in srgb,var(--accent) 60%,transparent);--research-block:0;--research-line:0}
[data-research="reading"] .research-art .paper-lines~.paper-lines,[data-research="reading"] .research-art .highlight-line~.highlight-line{--research-block:1}
[data-research="reading"] .research-art .paper-lines i:nth-child(2){--research-line:1}
[data-research="reading"] .research-art .paper-lines i:nth-child(3){--research-line:2}
[data-research="reading"] .research-art .paper-lines i:nth-child(4){--research-line:3}
[data-research="reading"] .research-art .paper-lines i:nth-child(5){--research-line:4}
[data-research="reading"] .research-art .paper-lines i:nth-child(6){--research-line:5}
[data-research="reading"] .research-art .paper-lines i{position:relative;transform-origin:left}
[data-research="reading"] .paper-back .paper-lines i:after{content:"";position:absolute;inset:-2px 0;background:var(--research-read);transform-origin:left;animation:research-read var(--research-read-line) var(--ease) both paused;animation-delay:calc((var(--research-block) * 6 + var(--research-line)) * var(--research-read-step))}
[data-research="reading"] .translate-mark{animation:research-mark var(--research-mark) var(--ease) both paused;animation-delay:var(--research-read-end)}
[data-research="reading"] .research-art .paper-front{animation:research-sheet var(--research-sheet) var(--ease) both paused;animation-delay:var(--research-sheet-delay)}
[data-research="reading"] .paper-front .highlight-line{animation:research-write-title var(--research-write-title) linear both paused;animation-delay:calc(var(--research-write-start) + var(--research-block) * var(--research-write-block))}
[data-research="reading"] .paper-front .paper-lines i{animation:research-write-line var(--research-write-line) var(--ease) both paused;animation-delay:calc(var(--research-write-start) + var(--research-block) * var(--research-write-block) + var(--research-write-title) + var(--research-line) * var(--research-write-step))}
[data-research-motion="running"] .research-art :is(.paper-front,.highlight-line,.paper-lines i,.translate-mark),[data-research-motion="running"] .paper-back .paper-lines i:after{animation-play-state:running}
@keyframes research-read{0%{transform:scaleX(0);background:var(--research-reading)}60%{transform:scaleX(1);background:var(--research-reading)}100%{transform:scaleX(1);background:var(--research-read)}}
@keyframes research-mark{from{opacity:0;transform:rotate(-6deg) scale(.7)}}
@keyframes research-sheet{from{opacity:0;transform:rotate(7deg) translate(6%,4%)}}
@keyframes research-write-title{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes research-write-line{from{transform:scaleX(0)}}

/* Relevance alternatives keep the six concepts; none encodes a measured score. */
.relevance-visual{--match-title:clamp(24px,3vw,42px);--match-label:clamp(16px,1.7vw,24px);--match-border:color-mix(in srgb,var(--ink) 22%,transparent);--match-guide:color-mix(in srgb,var(--ice) 60%,transparent);--match-symbol:clamp(44px,6vw,76px);--match-lens-height:450px;--match-profile-tint:color-mix(in srgb,var(--accent) 15%,var(--surface-relevance));--match-brief-tint:color-mix(in srgb,var(--ice) 13%,var(--surface-relevance))}
.relevance-option{display:none;max-width:1050px;margin:auto;text-align:left}
[data-relevance="bridge"] .relevance-card,[data-relevance="lens"] .relevance-card{display:none}
.match-title{font-size:var(--match-title);line-height:1.15;letter-spacing:var(--display-track);display:block}
.relevance-option ul{list-style:none;margin:var(--gap-lg) 0 0;padding:0;font-size:var(--match-label)}
.relevance-option li{padding:var(--gap-sm) 0;border-top:var(--hairline) solid var(--match-border)}
.match-meaning{font-size:var(--match-label);display:block}
[data-relevance="bridge"] .match-bridge{display:grid;grid-template-columns:1fr var(--match-symbol) 1fr;gap:var(--gap-md);align-items:center}
.match-sheet{padding:var(--gap-lg);border-radius:var(--radius);color:var(--ink);align-self:stretch}
.match-profile{background:var(--accent);transform:rotate(-2deg)}
.match-brief{background:var(--paper);transform:rotate(2deg)}
.match-brief .paper-lines{margin:var(--gap-md) 0}
.match-junction{position:relative;color:var(--ice)}
.match-junction svg{width:100%;fill:currentColor;padding:var(--gap-xs)}
.match-junction:before{content:"";position:absolute;left:calc(-1 * var(--gap-md));right:calc(-1 * var(--gap-md));top:50%;height:var(--hairline);background:var(--match-guide);z-index:-1}
.match-outcome{grid-column:1/-1;justify-self:center;position:relative;display:flex;align-items:center;gap:var(--gap-lg);margin-top:var(--gap-md);border:var(--hairline) solid var(--match-guide);border-radius:var(--radius);padding:var(--gap-sm) var(--gap-md);font-size:var(--match-label);color:var(--ice)}
.match-outcome:before{content:"";position:absolute;left:50%;bottom:100%;height:var(--gap-md);border-left:var(--hairline) solid var(--match-guide)}
.match-outcome svg{width:var(--match-symbol);fill:none;stroke:var(--accent);stroke-width:1.5}
[data-relevance="lens"] .match-lens{display:grid;grid-template-columns:1fr 1fr;position:relative;isolation:isolate;min-height:var(--match-lens-height);padding-bottom:var(--gap-xl);align-items:center}
.match-lens:before,.match-lens:after{content:"";position:absolute;top:0;bottom:var(--gap-xl);width:60%;border:var(--hairline) solid var(--match-guide);border-radius:50%;z-index:-1}
.match-lens:before{left:0;background:var(--match-profile-tint)}
.match-lens:after{right:0;background:var(--match-brief-tint)}
.lens-profile,.lens-brief{padding:var(--gap-xl) 18%;position:relative}
.lens-profile{padding-right:23%}
.lens-brief{padding-left:23%}
.match-lens .match-title{font-size:clamp(24px,2.5vw,36px)}
.match-lens ul{margin-top:var(--gap-md);color:var(--accent)}
.match-lens li{border-color:var(--match-guide);font-size:var(--match-label);padding:var(--gap-xs) 0}
.lens-document{background:var(--paper);border-radius:var(--radius);padding:var(--gap-sm);max-width:150px;margin:var(--gap-md) 0;transform:rotate(5deg)}
.lens-intersection{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:var(--match-symbol);height:calc(var(--match-symbol)*1.6);display:grid;place-items:center;background:var(--accent);color:var(--ink);border-radius:50%;padding:var(--gap-sm)}
.lens-intersection svg{width:100%;fill:currentColor}
.lens-outcome{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:var(--match-label);color:var(--accent);white-space:nowrap}
.lens-outcome:before{content:"";position:absolute;bottom:calc(100% + var(--gap-xs));left:50%;height:var(--gap-lg);border-left:var(--hairline) solid var(--accent)}
@media(max-width:700px){
 .relevance-visual{--match-title:27px;--match-label:18px;--match-symbol:48px;--match-lens-height:650px}
 [data-relevance="bridge"] .match-bridge{grid-template-columns:1fr;gap:var(--gap-md);max-width:460px}
 .match-sheet{padding:var(--gap-md);transform:none}
 .match-junction{width:var(--match-symbol);justify-self:center}
 .match-junction:before{left:50%;top:calc(-1 * var(--gap-md));bottom:calc(-1 * var(--gap-md));right:auto;width:var(--hairline);height:auto}
 .match-outcome{margin-top:0}
 [data-relevance="lens"] .match-lens{grid-template-columns:1fr;padding:var(--gap-md) 0 var(--gap-xl);gap:var(--gap-xl);max-width:460px}
 .match-lens:before,.match-lens:after{width:100%;height:54%;left:0;right:0;bottom:auto}
 .match-lens:before{top:0}
 .match-lens:after{top:auto;bottom:var(--gap-xl)}
 .lens-profile,.lens-brief{padding:var(--gap-md) var(--gap-lg);text-align:center}
 .match-lens ul{margin-top:var(--gap-sm)}
 .match-lens .match-title{font-size:var(--match-title)}
 .lens-document{width:40%;margin:var(--gap-sm) auto}
 .lens-intersection{top:46%;height:var(--match-symbol);width:calc(var(--match-symbol)*1.6)}
 .lens-outcome:before{height:var(--gap-sm)}
}
.match-junction{isolation:isolate}
.match-junction svg{background:var(--surface-relevance)}

/* Collaboration alternatives share the content switch, but use independent layouts. */
.collab-visual{--collab-stage:440px;--collab-label:clamp(14px,1.15vw,18px);--collab-title:clamp(25px,2.2vw,34px);--collab-symbol:64px;--collab-sheet-width:36%;--collab-route:var(--ice);--collab-sheet-line:color-mix(in srgb,var(--ink) 22%,var(--paper))}
.connection-option{display:none}
[data-collab="document"] .connection-network:not(.collab-document),[data-collab="branches"] .connection-network:not(.collab-branches){display:none}
[data-collab="document"] .collab-document,[data-collab="branches"] .collab-branches{display:block;height:var(--collab-stage);margin-top:var(--gap-md)}
.connection-option .collab-wire{stroke:var(--collab-route);stroke-width:1.3}
.collab-source{position:absolute;background:var(--accent);padding:var(--gap-sm);border-radius:var(--radius);width:28%;left:36%;top:0}
.collab-source img{display:block;width:100%}
.collab-sheet{position:absolute;top:27%;left:32%;width:var(--collab-sheet-width);padding:var(--gap-md);background:var(--paper);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);transform:rotate(-3deg)}
.collab-sheet strong{font-size:var(--collab-title);font-weight:400;letter-spacing:var(--display-track);line-height:1.05;display:block}
.collab-sheet .paper-lines{gap:var(--gap-xs)}
.collab-sheet .paper-lines i{height:var(--hairline);background:var(--collab-sheet-line)}
.collab-sheet-rule{display:block;background:var(--accent);height:var(--gap-sm);margin:var(--gap-md) 0}
.collab-peer{position:absolute;top:39%;width:28%;display:flex;flex-direction:column;align-items:center;gap:var(--gap-sm);text-align:center;font-size:var(--collab-label);color:var(--paper)}
.collab-peer-left{left:0}.collab-peer-right{right:0}
.collab-symbol{width:var(--collab-symbol);height:var(--collab-symbol);border-radius:50%;background:var(--ice);color:var(--ink);display:block}
.connection-option .collab-symbol svg{position:static;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.connection-option[data-view="team"] .collab-system,.connection-option[data-view="systems"] .collab-person{display:none}
.collab-export{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:var(--ice);color:var(--ink);border-radius:var(--radius);font-size:var(--collab-label);padding:var(--gap-sm);white-space:nowrap}
.connection-option[data-view="team"] .collab-export{display:none}
.collab-document[data-view="team"] .collab-wire path{d:path("M300 50V100M95 235H220M380 235H505")}
.collab-branches .collab-source{left:0;top:9%;width:30%}
.collab-branches .collab-sheet{left:5%;top:35%;width:39%;transform:rotate(-6deg)}
.collab-destinations{position:absolute;right:0;top:6%;bottom:0;width:39%;display:flex;flex-direction:column;justify-content:space-around;gap:var(--gap-md)}
.collab-destinations .collab-peer,.collab-destinations .collab-export{position:static;transform:none;width:100%;text-align:left;flex-direction:row;padding:var(--gap-sm);border-radius:var(--radius);background:var(--paper);color:var(--ink);gap:var(--gap-sm);white-space:normal;display:flex;align-items:center;min-height:20%}
.collab-destinations .collab-symbol{width:calc(var(--collab-symbol)*.6);height:calc(var(--collab-symbol)*.6);flex:none;background:var(--accent)}
.collab-file-symbol{font-size:var(--collab-label);border-bottom:var(--hairline) solid var(--ink);padding:var(--gap-xs) 0}
.collab-branches[data-view="team"] .collab-destinations{top:6%;bottom:29%}
.collab-branches[data-view="team"] .collab-wire path{d:path("M80 90H200V220H320M320 90V220M320 90H390M320 220H390")}
@media(max-width:700px){
 .collab-visual{--collab-stage:420px;--collab-label:13px;--collab-title:25px;--collab-symbol:52px}
 .collab-sheet{padding:var(--gap-sm)}
 .collab-document .collab-sheet{left:27%;width:46%;top:28%}
 .collab-document .collab-source{left:28%;width:44%}
 .collab-document .collab-peer{top:10%;width:26%;font-size:12px;gap:var(--gap-xs)}
 .collab-document .collab-peer-left{left:0}.collab-document .collab-peer-right{right:0}
 .collab-document .collab-wire path{d:path("M300 50V150M75 100V225H220M525 100V225H380M300 330V405")}
 .collab-document[data-view="team"] .collab-wire path{d:path("M300 50V150M75 100V225H220M525 100V225H380")}
 .collab-branches .collab-source{width:43%;top:10%}
 .collab-branches .collab-sheet{left:0;width:46%;top:36%;transform:rotate(-3deg)}
 .collab-destinations{width:42%}
 .collab-destinations .collab-peer,.collab-destinations .collab-export{padding:var(--gap-xs);flex-direction:column;align-items:flex-start;gap:var(--gap-xs)}
}

/* Mobile web access: schematic devices, with two compositions beyond the overlap. */
.mobile{--access-stage:550px;--access-title:clamp(23px,2.3vw,34px);--access-label:clamp(13px,1.1vw,17px);--access-frame:5px;--access-stroke:var(--ice);--access-rule:color-mix(in srgb,var(--ink) 24%,var(--paper));--access-phone-radius:24px;--access-speaker:36px}
.mobile-option{display:none}
[data-mobile="parallel"] .mobile-original,[data-mobile="shared"] .mobile-original{display:none}
[data-mobile="parallel"] .access-parallel,[data-mobile="shared"] .access-shared{display:block;height:var(--access-stage)}
.access-format{position:absolute;display:block;color:var(--ice);font-size:var(--access-label);letter-spacing:var(--label-track)}
.access-format-desktop{top:9%;left:0}.access-format-phone{top:9%;right:0}
.access-monitor{position:absolute;left:0;top:20%;width:63%;height:50%}
.access-screen{position:relative;height:100%;padding:var(--gap-xs);border:var(--access-frame) solid var(--access-stroke);border-radius:var(--radius);background:var(--ink);overflow:hidden}
.access-browser{display:flex;gap:calc(var(--gap-xs)*.5);padding:0 0 var(--gap-xs)}
.access-browser i{display:block;width:calc(var(--gap-xs)*.5);height:calc(var(--gap-xs)*.5);border-radius:50%;background:var(--ice)}
.access-page{background:var(--paper);color:var(--ink);padding:var(--gap-sm);min-height:100%;border-radius:calc(var(--radius)*.5)}
.access-page strong,.access-master strong{display:block;font-weight:400;font-size:var(--access-title);line-height:1.05;letter-spacing:var(--display-track)}
.mobile-option .paper-lines i{height:var(--hairline);background:var(--access-rule)}
.access-highlight{display:block;background:var(--accent);padding:var(--gap-xs);font-size:var(--access-label);line-height:1.2;min-height:var(--gap-sm)}
.access-stand{position:absolute;top:100%;left:35%;height:var(--gap-lg);width:30%;border-bottom:var(--access-frame) solid var(--access-stroke)}
.access-stand:before{content:"";position:absolute;left:45%;top:0;bottom:0;border-left:var(--access-frame) solid var(--access-stroke)}
.access-handset{position:absolute;right:0;top:14%;width:28%;height:64%;border:var(--access-frame) solid var(--access-stroke);border-radius:var(--access-phone-radius);background:var(--paper);padding:var(--gap-md) var(--gap-xs) var(--gap-xs);overflow:hidden}
.access-handset .access-page{padding:var(--gap-xs)}
.access-handset .access-highlight{padding:var(--gap-xs) 0}
.access-speaker{position:absolute;left:50%;top:var(--gap-xs);transform:translateX(-50%);width:var(--access-speaker);height:calc(var(--access-frame)*.7);border-radius:var(--radius);background:var(--ink)}
.access-link{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--access-stroke);stroke-width:1.3;z-index:0;pointer-events:none}
.access-link circle{fill:var(--accent);stroke:var(--ink)}
.access-monitor,.access-handset{z-index:1}
.access-shared .access-link{stroke:var(--accent)}
.access-master{position:absolute;left:22%;top:2%;width:56%;padding:var(--gap-md);background:var(--paper);color:var(--ink);border-radius:var(--radius);transform:rotate(-3deg);box-shadow:var(--shadow);z-index:1}
.access-rule{display:block;font-size:var(--access-label);padding:var(--gap-sm) var(--gap-xs) 0}
.access-shared .access-monitor{left:0;top:62%;width:60%;height:29%}
.access-shared .access-handset{right:3%;top:59%;width:23%;height:32%;border-width:calc(var(--access-frame)*.8);overflow:visible;padding-top:var(--gap-md)}
.access-shared .access-handset .access-page{padding:var(--gap-xs);min-height:0;overflow:hidden;height:100%}
.access-shared .access-handset .paper-lines{gap:calc(var(--gap-xs)*.5);margin:var(--gap-xs) 0}
.access-shared .access-monitor .access-page{padding:var(--gap-xs) var(--gap-sm)}
.access-shared .access-monitor .paper-lines{gap:calc(var(--gap-xs)*.5);margin:var(--gap-xs) 0}
.access-shared .access-stand{height:var(--gap-sm)}
.access-shared .access-format{top:calc(100% + var(--gap-md));left:50%;transform:translateX(-50%);white-space:nowrap}
@media(min-width:701px) and (max-width:1000px){
 [data-mobile="parallel"] .mobile,[data-mobile="shared"] .mobile{grid-template-columns:1fr}
 .mobile-option{width:100%;max-width:620px;margin:auto}
}
@media(max-width:700px){
 .mobile{--access-stage:440px;--access-title:23px;--access-label:12px;--access-frame:3px;--access-phone-radius:17px;--access-speaker:24px}
 .access-parallel .access-monitor{width:62%;height:45%;top:26%}
 .access-parallel .access-handset{width:32%;height:62%;top:16%;padding-left:0;padding-right:0}
 .access-parallel .access-page{padding:var(--gap-xs)}
 .access-parallel .access-screen{padding:calc(var(--gap-xs)*.5)}
 .access-parallel .access-page strong{font-size:20px}
 .access-parallel .access-highlight{font-size:11px;padding:var(--gap-xs) 0}
 .access-format-desktop{top:18%}.access-format-phone{top:8%}
 .access-master{width:72%;left:14%;padding:var(--gap-sm)}
 .access-shared .access-monitor{top:64%;height:27%}
 .access-shared .access-handset{width:26%;top:60%;height:30%;right:0;padding-left:calc(var(--gap-xs)*.5);padding-right:calc(var(--gap-xs)*.5)}
 .access-shared .access-monitor .access-page{padding:var(--gap-xs)}
}

/* Two further access compositions: the list flowing from the computer into the phone, and a list on the computer opened as a detail on the phone. */
.mobile{--access-ribbon:64;--access-ribbon-mark:22}
[data-mobile="flow"] .mobile-original,[data-mobile="list"] .mobile-original{display:none}
[data-mobile="flow"] .access-flow,[data-mobile="list"] .access-list{display:block;height:auto;aspect-ratio:600/550}
.access-ribbon{position:absolute;inset:0;width:100%;height:100%;fill:none;z-index:0;pointer-events:none}
.ribbon-band{stroke:var(--paper);stroke-width:var(--access-ribbon)}
.ribbon-rule{stroke:var(--access-rule);stroke-width:1.2}
.ribbon-mark{stroke:var(--accent);stroke-width:var(--access-ribbon-mark);stroke-dasharray:56 419;stroke-dashoffset:-270}
@media(prefers-reduced-motion:no-preference){.ribbon-mark{animation:access-flow 6s linear infinite}}
@keyframes access-flow{to{stroke-dashoffset:-745}}
.access-flow .access-monitor{top:0;width:58%;height:40%}
.access-flow .access-handset{top:56%;width:28%;height:44%}
.access-list .access-monitor{top:12%;width:62%;height:58%}
.access-list .access-handset{top:6%;width:27%;height:88%}
.access-list .access-link{stroke:var(--accent);z-index:2}
.access-rows{display:flex;flex-direction:column;margin-top:var(--gap-sm)}
.access-row{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--gap-xs);border-top:var(--hairline) solid var(--access-rule)}
.access-row:before{content:"";flex:none;width:var(--gap-xs);height:var(--gap-xs);border-radius:50%;background:var(--access-rule)}
.access-row span{flex:1;display:flex;flex-direction:column;gap:calc(var(--gap-xs)*.5)}
.access-row i{display:block;height:calc(var(--hairline)*3);background:var(--access-rule);width:85%}
.access-row i+i{width:55%}
.access-row-active{background:var(--accent);border-radius:calc(var(--radius)*.5);border-top-color:transparent}
.access-row-active:before{background:var(--ink)}
.access-row-active i{background:color-mix(in srgb,var(--ink) 35%,var(--accent))}
.access-row-active+.access-row{border-top-color:transparent}
@media(min-width:701px) and (max-width:1000px){
 [data-mobile="flow"] .mobile,[data-mobile="list"] .mobile{grid-template-columns:1fr}
}
@media(max-width:700px){
 .mobile{--access-ribbon:44;--access-ribbon-mark:16}
 .access-flow .access-page,.access-list .access-page{padding:var(--gap-xs)}
 .access-flow .access-screen,.access-list .access-screen{padding:calc(var(--gap-xs)*.5)}
 .access-flow .paper-lines,.access-list .paper-lines{gap:calc(var(--gap-xs)*.5);margin:var(--gap-xs) 0}
 .access-flow .access-highlight,.access-list .access-highlight{padding:calc(var(--gap-xs)*.5) 0}
 .access-flow .access-handset,.access-list .access-handset{padding-left:0;padding-right:0}
 .access-rows{margin-top:var(--gap-xs)}
 .access-row{gap:var(--gap-xs);padding:calc(var(--gap-xs)*.5)}
}

/* English strings: "Conditions for participation" is 2 px too wide for the front paper of the original and reading research compositions on a phone, so the paper grows from 53 % to 58 % there; everything else fits the Czech layout. */
@media(max-width:700px){
 [data-lang="en"][data-research="original"] .research-art .paper-front,[data-lang="en"][data-research="reading"] .research-art .paper-front{width:58%}
}