/* A numeric field, not an image or a decorative connection diagram. */
.compute-fabric { position: relative; isolation: isolate; overflow: hidden; margin: 0; background: #101c1b; color: #f3f7f4; border-radius: 6px; }
.homepage-field.compute-fabric { height: 390px; margin-top: 32px; background: #101c1b; }
.compute-fabric::before, .compute-fabric::after { content: none; }
.compute-fabric canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.compute-fabric .field-toolbar { inset: 22px 26px auto; font-size: 12px; color: #e1ece6; align-items: start; z-index: 1; }
.compute-fabric .field-toolbar small { display: block; color: #aebfba; margin-top: 7px; font-size: 11px; }
.compute-fabric .field-modes { border-color: #65847a; border-radius: 4px; }
.compute-fabric .field-modes button { min-height: 38px; font-size: 13px; color: #d3dfda; }
.compute-fabric .field-modes button[aria-pressed="true"] { background: #d9eee3; color: #19372c; }
.fabric-equation { position: absolute; top: 90px; left: 26px; right: 26px; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; font: 14px Consolas, monospace; color: #e7f2ed; }
.fabric-equation small { font-size: 11px; color: #b6c8be; }
.compute-fabric figcaption { position: absolute; inset: auto 26px 23px; display: flex; justify-content: space-between; align-items: start; gap: 20px; color: #ceded4; font: 12px/1.6 Consolas, monospace; pointer-events: none; }
.compute-fabric figcaption span:nth-child(2) { display: block; color: #b8c9c1; }
.fabric-pause { position: absolute; right: 22px; bottom: 62px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; background: #162623; border: 1px solid #78968a; border-radius: 4px; color: #fff; }
.fabric-pause img { filter: invert(1); }
.fabric-pause:hover { background: #334d43; }
.fabric-pause:focus-visible, .enterprise-fabric-modes button:focus-visible { outline: 2px solid #f0d49c; outline-offset: 4px; }
.quantum-word { display: inline; color: #1a4737; background: #d8ebdb; padding: .04em .13em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.math-spec .quantum-word { background: transparent; color: inherit; padding: 0; text-decoration: underline; text-decoration-color: #719482; text-underline-offset: 4px; }
.math-spec:hover .quantum-word { text-decoration-color: currentColor; }
.minimal-page:not(.argonath-page) .mathematics-feature:first-child { border-color: #9cb3a5; }
.minimal-page:not(.argonath-page) .mathematics-feature:first-child .math-spec { border-color: #789584; }
.mapping-modes button[aria-pressed="true"], .blueprint-layer.is-active { transition: background-color .25s, border-color .25s, box-shadow .25s; }
.mapping-modes button[aria-pressed="true"] { box-shadow: 0 1px 5px #253c3529; }
.argonath-page .argonath-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 42px; background: #101817; }
.argonath-page .argonath-hero .hero-copy { max-width: none; }
.argonath-page .argonath-hero h1 { font-size: 64px; }
.enterprise-fabric { height: 488px; width: 100%; background: transparent; border-radius: 0; }
.enterprise-fabric .field-toolbar { inset: 0 0 auto; }
.enterprise-fabric .fabric-equation { top: 72px; left: 0; right: 0; display: block; }
.enterprise-fabric .fabric-equation > span { display: block; font-size: 20px; }
.enterprise-fabric .fabric-equation small { display: block; margin-top: 10px; }
.enterprise-fabric-modes { position: absolute; left: 0; right: 50px; bottom: 57px; display: flex; border-bottom: 1px solid #547363; }
.enterprise-fabric-modes button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #a8c1b1; padding: 12px 8px; flex: 1; font-size: 13px; }
.enterprise-fabric-modes button[aria-pressed="true"] { border-bottom-color: #e0c898; color: #f7e5c5; }
.enterprise-fabric figcaption { inset: auto 0 0; font-size: 11px; }
.enterprise-fabric .fabric-pause { right: 0; bottom: 63px; }
.argonath-hero-register { grid-column: 1 / -1; width: 100%; }
@media (max-width: 1100px) {
    .argonath-page .argonath-hero { gap: 28px; }
    .argonath-page .argonath-hero h1 { font-size: 54px; }
    .enterprise-fabric { height: 465px; }
    .enterprise-fabric figcaption { flex-direction: column; gap: 3px; }
}
@media (max-width: 760px) {
    .argonath-page .argonath-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .enterprise-fabric { height: 450px; }
    .enterprise-fabric figcaption { flex-direction: row; }
    .homepage-field.compute-fabric { height: 405px; }
    .fabric-equation { display: block; }
    .fabric-equation small { display: block; margin-top: 8px; }
    .compute-fabric figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .compute-fabric figcaption span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; max-width: 100%; }
    .compute-fabric figcaption span:last-child { text-align: right; }
    .fabric-pause { bottom: 93px; }
    .enterprise-fabric figcaption { display: flex; }
    .enterprise-fabric figcaption span:nth-child(2) { grid-column: auto; }
}
@media (max-width: 420px) {
    .compute-fabric .field-toolbar { inset: 20px 16px auto; font-size: 11px; }
    .compute-fabric .field-toolbar > span { max-width: 134px; line-height: 1.5; }
    .compute-fabric .field-modes button { min-width: 48px; padding: 6px 8px; font-size: 12px; }
    .fabric-equation { left: 16px; right: 16px; top: 102px; font-size: 13px; }
    .compute-fabric figcaption { left: 16px; right: 16px; bottom: 19px; font-size: 11px; }
    .fabric-pause { right: 16px; bottom: 96px; }
    .enterprise-fabric .field-toolbar { inset: 0; }
    .enterprise-fabric .field-toolbar > span { max-width: none; }
    .enterprise-fabric .fabric-equation { top: 68px; }
    .enterprise-fabric .fabric-equation > span { font-size: 18px; }
    .enterprise-fabric figcaption { left: 0; right: 0; bottom: 0; }
    .enterprise-fabric-modes button { font-size: 12px; padding: 12px 5px; }
    .argonath-page .argonath-hero h1 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .mapping-modes button[aria-pressed="true"], .blueprint-layer.is-active { transition: none; }
}