.experiment-page.section-inner { width: min(100% - 48px, 1280px); max-width: 1280px; }
.experiment-back { display: inline-block; margin-bottom: 2rem; color: var(--color-text-secondary); font-size: .9rem; text-decoration: none; }
.experiment-back:hover { color: var(--color-accent); text-decoration: underline; }
.experiment-intro { max-width: 960px; margin-bottom: 2.5rem; }
.experiment-eyebrow { color: var(--color-accent); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.experiment-intro h1 { margin: .55rem 0 1rem; font-size: clamp(2.3rem, 5vw, 3.7rem); font-weight: 500; line-height: 1.1; }
.experiment-intro p { margin: 0 0 1rem; color: var(--color-text-secondary); font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; }
.experiment-steps { display: grid; gap: .55rem; max-width: 850px; margin: .25rem 0 1.6rem; padding-left: 1.5rem; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.55; }
.experiment-steps strong { color: var(--color-text); }
.experiment-intro .experiment-source { margin-top: 1.25rem; font-family: var(--font-sans); font-size: .88rem; line-height: 1.55; }
.distribution-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.35rem; }
.distribution-switch button { padding: .68rem 1rem; border: 1px solid var(--color-control-border); border-radius: 4px; background: var(--color-surface); font-size: .9rem; font-weight: 600; }
.distribution-switch button:hover, .distribution-switch button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.distribution-switch button[aria-pressed="true"] { background: #e7ede4; }
.experiment-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr); align-items: start; gap: 2rem; }
.beach-panel { min-width: 0; padding: .5rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.beach-panel svg { display: block; width: 100%; height: auto; }
.beach-water { fill: #dce9e8; }
.beach-shoreline { fill: #eef2eb; }
.beach-sand { fill: #ead7ad; stroke: #c8b58d; stroke-width: 2; }
.beach-inner { fill: #efdfbd; opacity: .68; }
.crowd-highlight { fill: none; stroke: #c68c4e; stroke-opacity: .33; stroke-width: 46; }
.crowd-highlight[hidden] { display: none; }
.beach-slots[hidden] { display: none; }
.slot-dot { fill: #849489; stroke: #fffcf7; stroke-width: 1.5; opacity: .85; }
.previous-marker { fill: none; stroke-width: 2.5; stroke-dasharray: 4 4; opacity: .8; }
.previous-marker--1 { stroke: #a75d43; }
.previous-marker--2 { stroke: #52698e; }
.beach-center-label { fill: #796b52; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .15em; }
.beach-center-subtitle { fill: #796b52; font-family: var(--font-serif); font-size: 17px; }
.customer { stroke: #fffcf7; stroke-width: 1; }
.customer--0 { fill: #4d6c5d; }
.customer--1 { fill: #bb7459; }
.customer--2 { fill: #667a9b; }
.customer--tie { fill: #766d62; }
.customer--switched { stroke: #dfaa42; stroke-width: 3; }
.vendor-marker { cursor: grab; touch-action: none; }
.vendor-marker:active { cursor: grabbing; }
.vendor-marker--locked, .vendor-marker--locked:active { cursor: default; }
.vendor-hit-area { fill: transparent; }
.vendor-disc { stroke: #fffcf7; stroke-width: 3; }
.vendor-marker--0 .vendor-disc { fill: #4d6c5d; }
.vendor-marker--1 .vendor-disc { fill: #bb7459; }
.vendor-marker--2 .vendor-disc { fill: #667a9b; }
.vendor-marker text { fill: white; font-family: var(--font-sans); font-size: 18px; font-weight: 700; pointer-events: none; }
.beach-hint { margin: .1rem 1rem .7rem; color: var(--color-text-secondary); font-size: .85rem; line-height: 1.5; }
.experiment-view-note { margin: 1.15rem .65rem .5rem; padding: 1.15rem 1.25rem; border-top: 2px solid var(--color-accent); background: #f6f4ee; }
.experiment-view-note h3 { margin: 0 0 .45rem; font-family: var(--font-sans); font-size: .95rem; font-weight: 700; }
.experiment-view-note p { margin: 0; color: var(--color-text-secondary); font-size: .9rem; line-height: 1.6; }
.results-panel { padding: 1.7rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.results-panel h2 { margin: 0 0 .55rem; font-size: 1.55rem; font-weight: 500; }
.results-note { margin: 0 0 1.5rem; color: var(--color-text-secondary); font-size: .94rem; line-height: 1.55; }
.results-comparison { margin: -1rem 0 1.5rem; color: var(--color-accent); font-size: .82rem; font-weight: 600; line-height: 1.5; }
.round-status { margin: -.4rem 0 1.6rem; padding: .8rem 1rem; border-left: 2px solid var(--color-accent); background: #edf1e9; }
.round-status strong { display: block; font-size: .9rem; }
.round-status p { margin: .2rem 0 0; color: var(--color-text-secondary); font-size: .84rem; line-height: 1.45; }
.vendor-control { margin: 0 0 1.65rem; }
.vendor-control__heading { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: .65rem; font-size: .95rem; }
.vendor-control__heading label { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.vendor-control output { font-variant-numeric: tabular-nums; font-weight: 700; }
.vendor-swatch { display: inline-grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; color: white; font-size: .76rem; }
.vendor-control--0 .vendor-swatch, .vendor-control--0 .share-track span { background: #4d6c5d; }
.vendor-control--1 .vendor-swatch, .vendor-control--1 .share-track span { background: #bb7459; }
.vendor-control--2 .vendor-swatch, .vendor-control--2 .share-track span { background: #667a9b; }
.share-track { height: 7px; overflow: hidden; border-radius: 10px; background: #e9e7df; }
.share-track span { display: block; height: 100%; transition: width .12s ease; }
.vendor-control input { display: block; width: 100%; margin: .75rem 0 0; accent-color: var(--color-accent); }
.round-mode .vendor-control--1 input, .round-mode .vendor-control--2 input { display: none; }
.round-mode.round-choose-phase .vendor-control--1, .round-mode.round-choose-phase .vendor-control--2 { display: none; }
.round-mode.round-choose-phase .vendor-control--0 output, .round-mode.round-choose-phase .vendor-control--0 .share-track { display: none; }
.round-mode.round-revealed-phase .vendor-control input { display: none; }
.share-delta { display: block; margin-top: .35rem; color: var(--color-text-secondary); font-size: .78rem; font-variant-numeric: tabular-nums; }
.share-delta[hidden] { display: none; }
.setup-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.setup-actions[hidden] { display: none; }
.setup-actions button { padding: .65rem 1rem; border: 1px solid var(--color-control-border); border-radius: 4px; background: transparent; font-size: .9rem; font-weight: 600; }
.setup-actions button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.setup-actions [data-randomize] { border-color: var(--color-accent); background: var(--color-accent); color: white; }
.setup-actions [data-randomize]:hover { background: var(--color-accent-hover); color: white; }
.setup-note { margin: .8rem 0 0; color: var(--color-text-secondary); font-size: .82rem; line-height: 1.45; }
.round-preview { margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: 4px; background: #edf1e9; font-size: .92rem; line-height: 1.45; }
.round-preview strong { color: #325447; }
.round-prediction { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.round-prediction legend { margin-bottom: .8rem; font-size: .93rem; font-weight: 600; line-height: 1.45; }
.round-prediction__choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.round-prediction__choices button { padding: .48rem .7rem; border: 1px solid var(--color-control-border); border-radius: 4px; background: transparent; font-size: .82rem; }
.round-prediction__choices button:hover, .round-prediction__choices button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.round-prediction__choices button[aria-pressed="true"] { background: #e7ede4; font-weight: 700; }
.round-primary { padding: .7rem 1.05rem; border: 1px solid var(--color-accent); border-radius: 4px; background: var(--color-accent); color: white; font-size: .9rem; font-weight: 600; }
.round-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.round-primary:disabled { cursor: not-allowed; opacity: .5; }
.round-prompt { margin: .5rem 0 0; color: var(--color-text-secondary); font-size: .8rem; }
.round-reveal { margin-bottom: 1.5rem; }
.round-reveal:focus { outline: none; }
.round-reveal h3 { margin: 0 0 .65rem; font-family: var(--font-sans); font-size: 1rem; }
.round-result { margin: 0 0 .75rem; padding: .8rem 1rem; border-left: 3px solid var(--color-accent); background: #edf1e9; font-size: .93rem; font-weight: 600; line-height: 1.5; }
.round-explanation { margin: 0; color: var(--color-text-secondary); font-size: .86rem; line-height: 1.55; }
.round-rule { margin: 1.1rem 0 0; color: var(--color-text-secondary); font-size: .82rem; line-height: 1.5; }
.round-rule summary { cursor: pointer; font-weight: 600; }
.round-rule p { margin: .55rem 0 0; }
.round-start-over { margin-top: .9rem; padding: 0; border: 0; background: none; color: var(--color-text-secondary); font-size: .82rem; text-decoration: underline; text-underline-offset: .16em; }
.round-start-over:hover { color: var(--color-accent); }
.round-history { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.round-history h3 { margin: 0 0 .6rem; font-family: var(--font-sans); font-size: .88rem; letter-spacing: .03em; }
.round-history ol { margin: 0 0 0 1.2rem; padding: 0; }
.round-history li { margin-bottom: .35rem; color: var(--color-text-secondary); font-size: .82rem; font-variant-numeric: tabular-nums; }
.experiment-conclusion { max-width: 960px; margin: 3.2rem 0 0; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.experiment-conclusion h2 { margin: 0 0 1rem; font-size: 1.65rem; font-weight: 500; }
.experiment-conclusion p { margin: 0 0 1.2rem; font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.65; }
@media (max-width: 760px) {
  .experiment-page.section-inner { width: min(100% - 32px, 1280px); }
  .experiment-layout { grid-template-columns: 1fr; gap: 1rem; }
  .results-panel { padding: 1.4rem; }
}