.bridge-layout {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
gap: clamp(1.4rem, 3vw, 3rem);
align-items: start;
padding-top: 2rem;
}
.bridge-controls {
min-width: 0;
}
.bridge-preset-copy {
max-width: 62ch;
margin-top: 0.35rem;
color: var(--ink-soft);
font-size: 0.8rem;
}
.bridge-live-summary {
display: none;
}
.bridge-group {
min-width: 0;
margin: 0;
padding: 1.15rem 0 1.3rem;
border: 0;
border-top: 1px solid var(--line);
}
.bridge-group legend {
width: 100%;
padding: 0;
font-family: var(--serif);
font-size: 1.28rem;
line-height: 1.15;
}
.bridge-group p {
max-width: 58ch;
margin-top: 0.3rem;
color: var(--muted);
font-size: 0.74rem;
line-height: 1.4;
}
.bridge-options {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.8rem;
}
.bridge-option {
min-height: 42px;
padding: 0.45rem 0.68rem;
border: 1px solid var(--line-strong);
background: transparent;
cursor: pointer;
font-size: 0.73rem;
line-height: 1.18;
text-align: left;
}
.bridge-option:hover {
border-color: var(--accent);
background: rgba(184, 82, 56, 0.06);
}
.bridge-option[aria-pressed="true"] {
border-color: var(--dark);
background: var(--dark);
color: var(--light);
}
.bridge-reset {
margin-top: 1.1rem;
padding: 0;
border: 0;
border-bottom: 1px solid currentColor;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
font-size: 0.72rem;
}
.bridge-result {
position: sticky;
top: 104px;
overflow: hidden;
border-top: 3px solid var(--accent);
background: var(--surface);
box-shadow: var(--shadow);
}
.bridge-result-head {
padding: clamp(1.25rem, 2.6vw, 2.1rem);
background: var(--dark);
color: var(--light);
}
.bridge-night-eyebrow {
color: #e8ad95;
font-family: var(--mono);
font-size: 0.61rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.bridge-result-head h2 {
margin-top: 0.45rem;
font-size: clamp(2.3rem, 4vw, 3.8rem);
}
.bridge-fit-state {
display: inline-flex;
margin-top: 0.75rem;
padding: 0.25rem 0.48rem;
border: 1px solid rgba(255, 255, 255, 0.34);
color: #dce5e1;
font-family: var(--mono);
font-size: 0.56rem;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.bridge-fit-summary {
max-width: 58ch;
margin-top: 0.85rem;
color: #d2ddd8;
font-family: var(--serif);
font-size: 1.04rem;
line-height: 1.45;
}
.bridge-result-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
border-block: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.14);
}
.bridge-meta-item {
min-height: 76px;
padding: 0.7rem clamp(1.25rem, 2.6vw, 2.1rem);
background: var(--dark);
color: var(--light);
}
.bridge-meta-item span {
display: block;
color: #9eacA6;
color: #9eaca6;
font-family: var(--mono);
font-size: 0.55rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.bridge-meta-item strong {
display: block;
margin-top: 0.35rem;
font-family: var(--serif);
font-size: 1.1rem;
font-weight: 400;
line-height: 1.15;
}
.bridge-diagram {
padding: 0.75rem 1.2rem;
border-bottom: 1px solid var(--line);
background: var(--paper);
}
.bridge-diagram .structure-svg {
max-height: 195px;
}
.bridge-links {
padding: 1.1rem clamp(1.25rem, 2.6vw, 2.1rem);
}
.bridge-section-label {
color: var(--accent-deep);
font-family: var(--mono);
font-size: 0.58rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.bridge-link-list {
margin-top: 0.55rem;
border-top: 1px solid var(--line);
}
.bridge-link-row {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
gap: 0.8rem;
padding-block: 0.58rem;
border-bottom: 1px solid var(--line);
}
.bridge-link-row dt {
color: var(--muted);
font-family: var(--mono);
font-size: 0.55rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bridge-link-row dd {
margin: 0;
color: var(--ink-soft);
font-size: 0.74rem;
line-height: 1.4;
}
.bridge-link-row dd strong {
display: block;
margin-bottom: 0.1rem;
color: var(--ink);
font-family: var(--serif);
font-size: 0.95rem;
font-weight: 400;
}
.bridge-tensions {
padding: 1rem clamp(1.25rem, 2.6vw, 2.1rem) 1.2rem;
border-top: 1px solid var(--line);
background: rgba(233, 226, 213, 0.52);
}
.bridge-tension-list {
display: grid;
gap: 0.8rem;
margin-top: 0.7rem;
}
.bridge-tension {
padding-top: 0.7rem;
border-top: 1px solid var(--line-strong);
}
.bridge-tension:first-child {
padding-top: 0;
border-top: 0;
}
.bridge-tension h3 {
font-family: var(--serif);
font-size: 1.08rem;
line-height: 1.15;
}
.bridge-tension p {
margin-top: 0.35rem;
color: var(--ink-soft);
font-size: 0.75rem;
line-height: 1.45;
}
.bridge-tension .response {
color: var(--teal);
}
.bridge-experiment {
padding: 1rem clamp(1.25rem, 2.6vw, 2.1rem);
border-top: 1px solid var(--line);
background: rgba(50, 108, 99, 0.07);
}
.bridge-experiment p {
max-width: 54ch;
margin-top: 0.42rem;
color: var(--ink-soft);
font-family: var(--serif);
font-size: 0.98rem;
line-height: 1.4;
}
.bridge-whatif {
padding: 1.1rem clamp(1.25rem, 2.6vw, 2.1rem) 1.3rem;
border-top: 1px solid var(--line);
background: var(--dark);
color: var(--light);
}
.bridge-whatif p {
max-width: 42ch;
margin-top: 0.5rem;
font-family: var(--serif);
font-size: clamp(1.15rem, 2vw, 1.55rem);
line-height: 1.28;
}
.model-mirror {
margin-top: 1.4rem;
padding-top: 1.15rem;
border-top: 3px solid var(--ink);
}
.model-mirror-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
}
.model-mirror-head h3 {
font-size: clamp(1.7rem, 3vw, 2.55rem);
}
.model-mirror-head p {
max-width: 44ch;
color: var(--ink-soft);
font-size: 0.78rem;
line-height: 1.45;
}
.model-fields {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: 1rem;
border-block: 1px solid var(--line-strong);
}
.model-field {
min-height: 138px;
padding: 0.8rem;
border-right: 1px solid var(--line);
}
.model-field:last-child {
border-right: 0;
}
.model-field span {
display: block;
color: var(--muted);
font-family: var(--mono);
font-size: 0.54rem;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.model-field p {
margin-top: 0.45rem;
color: var(--ink-soft);
font-size: 0.76rem;
line-height: 1.45;
}
.model-tension {
display: grid;
grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
padding-block: 1rem;
border-bottom: 1px solid var(--line-strong);
}
.model-tension > span {
color: var(--accent-deep);
font-family: var(--mono);
font-size: 0.56rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.model-tension p {
color: var(--ink-soft);
font-family: var(--serif);
font-size: 0.96rem;
line-height: 1.4;
}
.bridge-explore {
min-height: 42px;
padding: 0.45rem 0.65rem;
border: 1px solid var(--ink);
background: transparent;
cursor: pointer;
font-size: 0.7rem;
white-space: nowrap;
}
.bridge-explore:hover {
background: var(--dark);
color: var(--light);
}