/* StomaVision: a specimen-green page around one bounded educational study.
   Type follows the brand tiers (docs/styles.md): labels at --text-label, readouts never below --text-floor,
   sentences and disclosures at --text-caption (.study-disclosure). The study keeps its content palette. */
/* The opening film's light: its three hero glows (main.css, "project-cinematic-hero"). */
.sv-cinematic-hero { --project-hero-accent-rgb: 69, 242, 178; --project-hero-accent-2-rgb: 95, 210, 255; --project-hero-accent-3-rgb: 122, 255, 207; }
.stoma-experience {
  --stoma-paper: #f0eddf;
  --stoma-muted: #a9b3a4;
  --stoma-accent: #d4c794;
  --stoma-line: #b8c5a926;
  --stoma-ground: #0c1410;
  --stoma-panel: #142017;
  --experience-accent: var(--stoma-accent);
  --experience-paper: var(--stoma-paper);
  --experience-muted: var(--stoma-muted);
  --experience-line: var(--stoma-line);
  --study-disclosure-ink: #a3ae98;
  --focus-ring-color: var(--stoma-accent);
  background: var(--stoma-ground);
  color: var(--stoma-paper);
}
.stoma-experience .project-chapters { background: #0c1410f0; }

/* Two cropped specimen margins echo the film. The shared atmosphere host owns
   loading and native-scroll poses; the existing educational study is separate. */
.stoma-experience .stoma-atmosphere-section { position: relative; isolation: isolate; }
.stoma-experience .stoma-atmosphere-section > .container { position: relative; z-index: 1; }
.stoma-experience .stoma-tissue-atmosphere {
  position: absolute;
  z-index: 0;
  width: min(660px, 62vw);
  aspect-ratio: 1;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
  opacity: .19;
}
.stoma-experience .stoma-tissue-atmosphere--analysis { top: 0; right: 0; }
.stoma-experience .stoma-tissue-atmosphere--leaf { bottom: 0; left: 0; opacity: .14; }
.stoma-experience .stoma-tissue-atmosphere--analysis > :is(img,canvas) { transform: translate(25%,-9%) rotate(-14deg); }
.stoma-experience .stoma-tissue-atmosphere--leaf > :is(img,canvas) { transform: translate(-32%,25%) rotate(18deg); }

/* Sections and their headings */
.stoma-experience .stoma-section { padding-block: clamp(80px, 9.8vw, 145px); }
.stoma-experience .stoma-section + .stoma-section { border-top: 1px solid var(--stoma-line); }
.stoma-experience .stoma-heading { display: grid; grid-template-columns: 1.25fr 1fr; gap: 35px 70px; align-items: end; margin-bottom: 56px; }
.stoma-experience .stoma-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; color: var(--stoma-accent); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.stoma-experience .stoma-eyebrow > span { color: #7f917d; font-variant-numeric: tabular-nums; }
.stoma-experience .stoma-heading h2, .stoma-experience .stoma-leaf-copy h2, .stoma-experience .stoma-closing h2 { margin: 0; color: var(--stoma-paper); font: var(--display-weight) clamp(38px, 5vw, 68px)/1.07 var(--font-display); letter-spacing: var(--track-title); text-wrap: balance; }
.stoma-experience .stoma-heading > p { margin: 0 0 4px; color: var(--stoma-muted); font-size: 16px; line-height: 1.85; max-width: 42ch; }

/* One bounded specimen. Native document scrolling changes its view, never its physiology. */
.stoma-experience .stoma-study-section { background: radial-gradient(ellipse at 55% 40%, #5b642614, transparent 65%); }
.stoma-experience .stoma-world-runway { position: relative; }
.stoma-experience .stoma-study { border: 1px solid #aebe8b32; border-radius: 15px; background: var(--stoma-panel); overflow: clip; isolation: isolate; box-shadow: inset 0 1px #e6ecc50d, 0 25px 90px #0000002b; }
.stoma-experience .stoma-study[data-stoma-navigation="scroll"] { position: sticky; }
.stoma-experience .stoma-study-topline { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 47px; padding: 12px 24px; color: #aebb9b; font-size: var(--text-floor); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; }
.stoma-experience .stoma-study-mark { display: inline-flex; align-items: center; gap: 9px; }
.stoma-experience .stoma-study-mark > span { width: 5px; height: 5px; border-radius: 50%; background: #cfcc95; box-shadow: 0 0 8px #cfcc9566; }

/* The four views: native radios, one row */
.stoma-experience .stoma-stages { min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border: 0; border-block: 1px solid #aebe8b24; padding: 0; margin: 0; }
.stoma-experience .stoma-stages label { display: block; position: relative; cursor: pointer; min-width: 0; }
.stoma-experience .stoma-stages input { position: absolute; width: 1px; height: 1px; opacity: 0; inset: 50%; margin: 0; }
.stoma-experience .stoma-stages label > span { display: flex; justify-content: center; align-items: center; gap: 11px; min-height: 47px; padding: 10px; color: #94a28a; font-size: var(--text-label); line-height: 1.25; text-align: center; box-shadow: inset 0 -1px transparent; transition: background-color var(--motion-quick) var(--ease-standard), color var(--motion-quick) var(--ease-standard), box-shadow var(--motion-medium) var(--ease-standard); }
.stoma-experience .stoma-stages b { font-weight: 400; font-size: var(--text-floor); color: #8b9a83; font-variant-numeric: tabular-nums; }
.stoma-experience .stoma-stages input:checked + span { background: #c9d29a0a; color: #e2e1c2; box-shadow: inset 0 -1px #c7c48a; }
.stoma-experience .stoma-stages input:checked + span b { color: #babf88; }
.stoma-experience .stoma-stages input:focus-visible + span { color: #e4e3c9; background: #b3c18809; outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: -4px; }
.stoma-experience .stoma-stages label:active > span { background: #c9d29a14; transition-duration: var(--motion-instant); }
.stoma-experience .stoma-stages input:disabled + span { cursor: default; }

/* The specimen. Wider than a phone its height is the room left under the navigation (--stoma-fit-height, written by
   the script), or a 2.3:1-at-most frame while the page scrolls past it. */
.stoma-experience .stoma-study-viewport { position: relative; height: var(--stoma-fit-height, clamp(300px, 44vw, 570px)); overflow: clip; contain: paint; isolation: isolate; background: #101b13; touch-action: pan-y pinch-zoom; }
.stoma-experience .stoma-static, .stoma-experience .stoma-canvas { position: absolute; width: 100%; height: 100%; inset: 0; display: block; }
.stoma-experience .stoma-canvas { display: none; }
.stoma-experience [data-stoma-renderer="webgl"] .stoma-canvas { display: block; }
.stoma-experience [data-stoma-renderer="webgl"] .stoma-static { visibility: hidden; }
/* The still diagram keeps clear of the view strip (and, on phones, of the legend across the top). */
.stoma-experience [data-stoma-renderer="svg"] .stoma-static { height: calc(100% - 62px); }
@media (scripting: none) { .stoma-experience [data-stoma-gesture] { visibility: hidden; } }
/* The drawing's ground is the frame's, so its words may run past it without showing an edge. */
.stoma-experience .stoma-svg-ground { fill: #101b13; }
/* Drawing units: the still diagram shrinks with its frame, so its words are set large enough to stay at or above the
   text floor at every frame size (26 units wide, 60 on phones, where the words may run past the drawing into the frame's spare width). */
.stoma-experience .stoma-svg-label { fill: #d3dac0; font: 26px var(--font-text); }
.stoma-experience .stoma-svg-mechanics { display: none; }
.stoma-experience [data-stoma-mechanics="true"] .stoma-svg-mechanics { display: block; }

/* World labels: a chip at the end of a leader whose dot sits on the named tissue. They fade with the camera
   (--stoma-label-alpha) and show only in a settled view. */
.stoma-experience .stoma-world-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: var(--stoma-label-alpha, 1); }
.stoma-experience .stoma-world-leaders path { fill: none; stroke: #d6ddb5a6; stroke-width: .9; }
.stoma-experience .stoma-world-leaders circle { fill: #eef0d4; stroke: #101b13; stroke-width: 1; }
.stoma-experience .stoma-world-label { position: absolute; inset: 0 auto auto 0; padding: 3px 8px 4px; border: 1px solid #c6d19d26; border-radius: 4px; background: #0e1911cc; color: #e0e4c8; font-size: var(--text-label); line-height: 1.3; letter-spacing: .01em; white-space: nowrap; pointer-events: none; opacity: var(--stoma-label-alpha, 1); }
.stoma-experience [data-stoma-renderer="svg"] :is(.stoma-world-label, .stoma-world-leaders) { display: none; }

/* The view strip rests on a floor shade; the legend on its own plate. */
.stoma-experience .stoma-world-view { position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 44px 24px 16px; pointer-events: none; color: #a3b393; font-size: var(--text-floor); line-height: 1.45; background: linear-gradient(to top, #0e1811eb 0, #0e1811b8 45%, #0e181100); }
.stoma-experience .stoma-world-view > span:first-child { display: grid; gap: 4px; color: #d2d8bb; font-size: var(--text-label); }
.stoma-experience .stoma-resistance { color: #a3b393; font-size: var(--text-floor); }
.stoma-experience .stoma-world-view > span:last-child { text-align: right; }
.stoma-experience .stoma-exchange-legend { position: absolute; top: 16px; right: 22px; display: grid; grid-template-columns: auto auto; gap: 8px 18px; padding: 11px 14px 12px; border: 1px solid #c6d19d1f; border-radius: 6px; background: #111e16e0; color: #c2cbb5; font-size: var(--text-caption); line-height: 1.3; pointer-events: none; box-shadow: 0 10px 30px #0000003d; }
.stoma-experience .stoma-exchange-legend > span { display: flex; align-items: center; gap: 8px; }
.stoma-experience .stoma-exchange-legend i { width: 14px; height: 2px; border-radius: 1px; background: #94cfca; }
.stoma-experience .stoma-exchange-legend span:nth-child(2) i { background: #e3c266; }
.stoma-experience .stoma-exchange-legend small { grid-column: 1 / -1; margin: 0; --study-disclosure-ink: #a9b59d; }

/* Controls */
.stoma-experience .stoma-study-controls { display: flex; align-items: center; gap: 26px; padding: 17px 24px 14px; border-top: 1px solid #abb58d2b; background: #152118; }
.stoma-experience .stoma-condition { flex: 0 1 190px; min-width: 150px; }
.stoma-experience .stoma-condition label { display: block; margin: 0 0 4px; color: #aebb9b; font-size: var(--text-label); }
/* macOS Safari's native popup otherwise ignores the requested control height. */
.stoma-experience .stoma-condition select {
  display: block; width: 100%; height: 44px; min-height: 44px; padding: 8px 30px 8px 11px;
  appearance: none; -webkit-appearance: none;
  border: 1px solid #83916a50; border-radius: 5px; color: #e0debd; font: var(--text-caption) var(--font-text);
  background-color: #101a13;
  background-image: linear-gradient(45deg, transparent 50%, #c9cba9 50%), linear-gradient(135deg, #c9cba9 50%, transparent 50%);
  background-position: calc(100% - 16px) 19px, calc(100% - 12px) 19px;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  transition: border-color var(--motion-quick) var(--ease-standard);
}
.stoma-experience .stoma-opening { flex: 1 1 250px; width: auto; min-width: 130px; max-width: 420px; padding: 0; }
.stoma-experience .stoma-opening > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #b3bea5; font-size: var(--text-caption); }
.stoma-experience .stoma-opening output { color: #d3ca9b; font-size: var(--text-label); }
.stoma-experience .stoma-opening input { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; accent-color: var(--stoma-accent); cursor: pointer; }
.stoma-experience .stoma-opening input::-webkit-slider-runnable-track { height: 2px; border-radius: 3px; background: #637451; }
.stoma-experience .stoma-opening input::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; margin-top: -8.5px; border: 1px solid #e5dcaa; border-radius: 50%; background: #cbc58e; box-shadow: 0 2px 5px #0005, inset 0 1px #f3ecc3; transition: box-shadow var(--motion-quick) var(--ease-standard); }
.stoma-experience .stoma-opening input::-moz-range-track { height: 2px; border-radius: 3px; background: #637451; }
.stoma-experience .stoma-opening input::-moz-range-thumb { width: 18px; height: 18px; border: 1px solid #e5dcaa; border-radius: 50%; background: #cbc58e; box-shadow: 0 2px 5px #0005; }
.stoma-experience .stoma-opening input:focus-visible { outline-offset: -2px; }
.stoma-experience .stoma-opening input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px #d4c79433, 0 2px 5px #0005, inset 0 1px #f3ecc3; }
.stoma-experience .stoma-opening .stoma-range-ends { margin-top: -4px; color: #8c9c81; font-size: var(--text-floor); }
.stoma-experience .stoma-world-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.stoma-experience .stoma-world-actions button {
  display: inline-flex; justify-content: center; align-items: center; min-height: 44px; margin: 0; padding: 10px 13px;
  border: 1px solid #a2b18d27; border-radius: 5px; background: transparent; color: #b7c1a5; font: 400 var(--text-label)/1.3 var(--font-text); cursor: pointer;
  transition: background-color var(--motion-quick) var(--ease-standard), color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard), scale var(--motion-instant) var(--ease-standard);
}
.stoma-experience .stoma-world-actions button[aria-pressed="true"] { color: #e8e2bb; background: #36432c; border-color: #9daf7566; }
.stoma-experience .stoma-world-actions button:disabled { opacity: .48; cursor: default; }
.stoma-experience .stoma-world-actions .stoma-reset { border-color: transparent; color: #a9b69b; }
.stoma-experience .stoma-world-actions button:focus-visible:not(:disabled) { background: #283721; color: #eee5bc; }
.stoma-experience .stoma-world-actions button:active:not(:disabled) { scale: .985; background: #31412a; transition-duration: var(--motion-instant); }

/* The reading */
.stoma-experience .stoma-study-reading { display: grid; grid-template-columns: .9fr 2fr; gap: 20px; min-height: 92px; padding: 18px 24px 20px; border-top: 1px solid #a5b8881d; color: #a9b39d; }
.stoma-experience .stoma-study-reading strong { color: #dcdfc7; font: var(--display-weight) 16px/1.45 var(--font-display); letter-spacing: var(--track-heading); }
.stoma-experience .stoma-study-reading p { margin: 0; max-width: 78ch; font-size: var(--text-caption); line-height: 1.75; }
.stoma-experience .stoma-study-footnote { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; padding-top: 22px; }
.stoma-experience .stoma-study-note { margin: 0; max-width: 800px; }
.stoma-experience .stoma-research { color: #9aa68f; font-size: var(--text-caption); line-height: 1.75; }
.stoma-experience .stoma-research summary { display: flex; align-items: center; min-height: 44px; margin-top: -12px; color: #cbcaa3; cursor: pointer; transition: color var(--motion-quick) var(--ease-standard); }
.stoma-experience .stoma-research summary:focus-visible { color: var(--stoma-paper); }
.stoma-experience .stoma-research p { margin: 0 0 12px; font-size: var(--text-caption); line-height: 1.75; }
.stoma-experience .stoma-research a { color: #cac99f; text-decoration-color: #cac99f66; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--motion-quick) var(--ease-standard), text-decoration-color var(--motion-quick) var(--ease-standard); }
.stoma-experience .stoma-research a:focus-visible { color: var(--stoma-paper); text-decoration-color: currentColor; }

/* Image to result */
.stoma-experience .stoma-workflow-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 35px 80px; }
.stoma-experience .stoma-workflow-steps { position: sticky; top: calc(var(--experience-sticky-top) + 55px); display: grid; gap: 35px; list-style: none; margin: 0; padding: 18px 0 0; }
.stoma-experience .stoma-workflow-steps li { position: relative; padding: 22px 0 0 40px; border-top: 1px solid var(--stoma-line); }
.stoma-experience .stoma-workflow-steps li > span { position: absolute; left: 0; top: 27px; color: #a6b283; font-size: var(--text-label); font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.stoma-experience .stoma-workflow-steps h3 { margin: 0 0 13px; color: #e2e3cd; font: var(--display-weight) 26px/1.2 var(--font-display); letter-spacing: var(--track-heading); }
.stoma-experience .stoma-workflow-steps p { max-width: 31ch; margin: 0; color: var(--stoma-muted); font-size: 14px; line-height: 1.8; }
.stoma-experience .stoma-app-gallery { width: 100%; max-width: 560px; min-width: 0; }
/* Portrait iPad captures: one card at most 388px wide (the width their sizes attribute promises). */
.stoma-experience .stoma-app-gallery .project-gallery-card { flex-basis: min(88%, 388px); }
.stoma-experience .stoma-app-gallery .gallery-story { --gallery-column: min(88%, 388px); }
.stoma-experience .stoma-app-gallery .project-gallery-card figcaption { gap: 14px; }
.stoma-experience .stoma-workflow-note { max-width: 710px; margin: 45px 0 0; padding-left: 18px; border-left: 1px solid #c7c58a68; color: #9fab94; font-size: var(--text-caption); line-height: 1.75; }

/* Leaf World */
.stoma-experience .stoma-leaf-section { background: linear-gradient(180deg, #0c1410, #0e1912 35%, #0e1912 65%, #0c1410); }
.stoma-experience .stoma-leaf-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 50px 100px; }
.stoma-experience .stoma-leaf-copy > p:not(.stoma-eyebrow):not(.stoma-scope-note) { margin: 27px 0; color: var(--stoma-muted); font-size: 15px; line-height: 1.85; }
.stoma-experience .stoma-leaf-copy h2 { font-size: clamp(38px, 4.4vw, 58px); }
.stoma-experience .stoma-leaf-details { margin: 35px 0; }
.stoma-experience .stoma-leaf-details > div { display: grid; grid-template-columns: 96px 1fr; gap: 15px; padding: 19px 0; border-top: 1px solid var(--stoma-line); }
.stoma-experience .stoma-leaf-details dt { color: #d0c997; font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; padding-top: 2px; }
.stoma-experience .stoma-leaf-details dd { margin: 0; color: var(--stoma-muted); font-size: 14px; line-height: 1.75; }
.stoma-experience .stoma-scope-note { margin: 0; --study-disclosure-ink: #9aa68f; }
.stoma-experience .stoma-leaf-image { width: 100%; max-width: 440px; margin: 0 auto; }
.stoma-experience .stoma-leaf-image > img { display: block; width: 100%; height: auto; border: 1px solid var(--stoma-line); border-radius: 12px; }
.stoma-experience .stoma-leaf-image .project-image-open { aspect-ratio: 3 / 4; }
.stoma-experience .stoma-leaf-image figcaption { margin-top: 20px; color: #d4dac9; font-size: 14px; }
.stoma-experience .stoma-leaf-image figcaption strong { font-weight: var(--display-weight); }
.stoma-experience .stoma-leaf-image figcaption p { margin: 7px 0 0; color: #8fa08a; font-size: var(--text-caption); line-height: 1.7; }

/* Your work */
.stoma-experience .stoma-export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 90px; }
.stoma-experience .stoma-export-grid article { border-top: 1px solid var(--stoma-line); padding-top: 34px; }
.stoma-experience .stoma-export-symbol { display: block; height: 44px; margin-bottom: 24px; color: var(--stoma-accent); font: 300 32px/1 var(--font-text); }
.stoma-experience svg.stoma-export-symbol { width: 35px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.stoma-experience .stoma-export-grid h3 { margin: 0 0 17px; color: #e0e3cf; font: var(--display-weight) 27px/1.15 var(--font-display); letter-spacing: var(--track-heading); }
.stoma-experience .stoma-export-grid p { max-width: 44ch; margin: 0; color: var(--stoma-muted); font-size: 14px; line-height: 1.85; }

/* Closing: icon, wordmark, line, badge and links on one centre line */
.stoma-experience .stoma-closing { padding-block: clamp(85px, 11vw, 150px) 60px; border-top: 1px solid var(--stoma-line); text-align: center; background: radial-gradient(ellipse at 50% 30%, #33432835, transparent 60%); }
.stoma-experience .stoma-closing-logo { display: block; width: 80px; height: 80px; margin: 0 auto 28px; border-radius: 21px; box-shadow: 0 0 0 1px #e6ecc514, 0 18px 42px #00000070, 0 2px 6px #0000004d; }
.stoma-experience .stoma-closing .stoma-eyebrow { justify-content: center; margin-bottom: 16px; }
.stoma-experience .stoma-closing h2 { font-size: clamp(49px, 8.4vw, 103px); letter-spacing: var(--track-display); }
.stoma-experience .stoma-closing p:not(.stoma-eyebrow) { margin: 24px 0 28px; color: var(--stoma-muted); font-size: 16px; }
.stoma-experience .stoma-closing-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 28px; margin-top: 60px; }
.stoma-experience .stoma-closing-links a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #a5b199; font-size: var(--text-caption);
  text-decoration: underline 1px transparent; text-underline-offset: 5px;
  transition: color var(--motion-quick) var(--ease-standard), text-decoration-color var(--motion-medium) var(--ease-standard);
}
.stoma-experience .stoma-closing-links a:focus-visible { color: var(--stoma-accent); text-decoration-color: currentColor; }

.stoma-experience [hidden] { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .stoma-experience .stoma-stages label:hover > span { color: #e4e3c9; background: #b3c18809; }
  .stoma-experience .stoma-world-actions button:hover:not(:disabled) { background: #283721; color: #eee5bc; }
  .stoma-experience .stoma-condition select:hover { border-color: #a9b88a80; }
  .stoma-experience .stoma-research summary:hover { color: var(--stoma-paper); }
  .stoma-experience .stoma-research a:hover { color: var(--stoma-paper); text-decoration-color: currentColor; }
  .stoma-experience .stoma-closing-links a:hover { color: var(--stoma-accent); text-decoration-color: currentColor; }
}

@media (max-width: 900px) {
  .stoma-experience .stoma-heading { gap: 25px 45px; }
  .stoma-experience .stoma-study-controls { gap: 18px; }
  /* Two rows of actions in every view, so changing views never changes the study's height. */
  .stoma-experience .stoma-world-actions { display: grid; grid-template-columns: repeat(2, auto); max-width: 280px; }
  .stoma-experience .stoma-condition { flex-basis: 150px; min-width: 125px; }
  .stoma-experience .stoma-workflow-layout { grid-template-columns: .85fr 1.15fr; gap: 30px; }
  .stoma-experience .stoma-leaf-layout { gap: 35px; }
  .stoma-experience .stoma-leaf-details > div { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 680px) {
  .stoma-experience .stoma-tissue-atmosphere { width: min(330px,85vw); opacity: .1; }
  .stoma-experience .stoma-tissue-atmosphere--leaf { opacity: .08; }
  .stoma-experience .stoma-section { padding-block: 75px; }
  .stoma-experience .stoma-heading { grid-template-columns: 1fr; margin-bottom: 35px; gap: 25px; }
  .stoma-experience .stoma-heading > p { font-size: 15px; }
  .stoma-experience .stoma-eyebrow { margin-bottom: 20px; }

  .stoma-experience .stoma-study { border-radius: 11px; }
  .stoma-experience .stoma-study-topline { min-height: 40px; padding: 10px 15px; gap: 8px; letter-spacing: .06em; }
  .stoma-experience .stoma-stages label > span { min-height: 46px; padding: 7px 3px; gap: 0; font-size: var(--text-floor); }
  .stoma-experience .stoma-stages b { display: none; }
  .stoma-experience .stoma-study-viewport { height: clamp(250px,36svh,340px); }
  .stoma-experience .stoma-svg-label { font-size: 60px; }
  .stoma-experience [data-stoma-renderer="svg"] .stoma-static { top: 50px; height: calc(100% - 50px - 76px); }
  .stoma-experience .stoma-world-label { padding: 2px 6px 3px; font-size: var(--text-floor); }
  .stoma-experience .stoma-world-view { gap: 10px; padding: 36px 14px 11px; }
  .stoma-experience .stoma-world-view > span:first-child { font-size: var(--text-floor); gap: 2px; }
  .stoma-experience .stoma-world-view > span:last-child { max-width: 118px; }
  .stoma-experience .stoma-exchange-legend { top: 9px; left: 9px; right: auto; max-width: calc(100% - 18px); display: flex; flex-wrap: wrap; gap: 3px 14px; padding: 7px 10px 8px; font-size: var(--text-floor); }
  .stoma-experience .stoma-exchange-legend small { flex-basis: 100%; font-size: var(--text-floor); line-height: 1.35; }

  .stoma-experience .stoma-study-controls { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; padding: 13px 15px 12px; }
  .stoma-experience .stoma-opening { width: 100%; max-width: none; min-width: 0; }
  .stoma-experience .stoma-condition { min-width: 0; }
  .stoma-experience :is(.stoma-condition label, .stoma-opening > div) { font-size: var(--text-label); line-height: 1.4; }
  /* One row of actions from 381px, so a 390px phone still holds the whole study (and its scroll-driven camera). */
  .stoma-experience .stoma-world-actions { display: flex; flex-wrap: nowrap; justify-content: stretch; margin: 0; max-width: none; gap: 4px; }
  .stoma-experience .stoma-world-actions button { flex: 1 1 auto; min-width: 44px; padding: 8px 4px; font-size: var(--text-floor); white-space: nowrap; }
  .stoma-experience .stoma-study[data-stoma-view="environment"] .stoma-study-controls { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: 12px; }
  .stoma-experience .stoma-study[data-stoma-view="environment"] .stoma-world-actions { grid-column: 1 / -1; max-width: none; }
  /* Room for the longest reading (four lines), so changing views never changes the study's height. */
  .stoma-experience .stoma-study-reading { grid-template-columns: 1fr; min-height: 136px; gap: 6px; padding: 14px 15px 16px; }
  .stoma-experience .stoma-study-reading strong { font-size: 15px; }
  .stoma-experience .stoma-study-reading p { font-size: var(--text-label); line-height: 1.6; }
  .stoma-experience .stoma-study-footnote { grid-template-columns: 1fr; gap: 15px; }

  .stoma-experience .stoma-workflow-layout { grid-template-columns: 1fr; gap: 45px; }
  .stoma-experience .stoma-workflow-steps { position: static; padding: 0; gap: 25px; }
  .stoma-experience .stoma-workflow-steps p { max-width: 46ch; }
  .stoma-experience .stoma-app-gallery { max-width: 560px; margin-inline: auto; }
  .stoma-experience .stoma-workflow-note { margin-top: 30px; }
  .stoma-experience .stoma-leaf-layout { grid-template-columns: 1fr; gap: 45px; }
  .stoma-experience .stoma-leaf-details > div { grid-template-columns: 96px 1fr; }
  .stoma-experience .stoma-export-grid { grid-template-columns: 1fr; gap: 40px; }
  .stoma-experience .stoma-closing-links { margin-top: 44px; }
}

@media (max-width: 380px) {
  .stoma-experience .stoma-study-topline { letter-spacing: .02em; }
  .stoma-experience .stoma-world-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .stoma-experience .stoma-study[data-stoma-view="environment"] .stoma-world-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stoma-experience .stoma-study[data-stoma-view="environment"] .stoma-world-actions button { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .stoma-experience *, .stoma-experience *::before, .stoma-experience *::after { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .stoma-experience { --stoma-paper: CanvasText; --stoma-muted: CanvasText; --stoma-accent: Highlight; --stoma-line: CanvasText; --study-disclosure-ink: CanvasText; background: Canvas; color: CanvasText; }
  .stoma-experience :is(.stoma-study, .stoma-study-topline, .stoma-stages, .stoma-study-viewport, .stoma-study-controls, .stoma-study-reading, .stoma-condition select, .stoma-world-actions button, .stoma-leaf-section, .stoma-closing) { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  .stoma-experience .stoma-svg-ground { fill: Canvas; }
  .stoma-experience :is(.stoma-svg-tissue, .stoma-svg-cell) { fill: Canvas; stroke: CanvasText; }
  .stoma-experience .stoma-svg-label { fill: CanvasText; }
  .stoma-experience :is(.stoma-svg-flow path, .stoma-svg-walls) { stroke: CanvasText; stroke-opacity: 1; }
  .stoma-experience .stoma-svg-mechanics { stroke: Highlight; }
  .stoma-experience .stoma-stages input:checked + span { color: Highlight; box-shadow: inset 0 -2px Highlight; }
  .stoma-experience .stoma-opening input { appearance: auto; }
  .stoma-experience .stoma-condition select { appearance: auto; -webkit-appearance: auto; background-image: none; }
  .stoma-experience .stoma-world-actions button[aria-pressed="true"] { color: Highlight; border-color: Highlight; }
  .stoma-experience .stoma-world-view { background: none; color: CanvasText; }
  .stoma-experience .stoma-exchange-legend { background: Canvas; color: CanvasText; }
  .stoma-experience .stoma-exchange-legend i { height: 0; border-top: 2px solid CanvasText; }
}