.transaction-story { --tx-ink: #14392f; --tx-paper: #f4f3ed; --tx-lime: #d4ed8a; --tx-soft: #acc1b0; --tx-line: #436355; background: #14392f; color: var(--tx-paper); padding-block: 108px; overflow: clip; }
.transaction-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 70px; margin-bottom: 45px; }
.transaction-heading .eyebrow { color: var(--tx-lime); font-size: 9px; margin-bottom: 24px; }
.transaction-heading h2 { font-size: clamp(34px, 4vw, 57px); line-height: 1.12; }
.transaction-heading h2 > span { color: #b3c5ac; }
.transaction-heading-copy { padding-bottom: 4px; max-width: 440px; }
.transaction-heading-copy > p { color: #c0d0c2; font-size: 14px; line-height: 1.9; }
.transaction-model-label { display: block; color: var(--tx-lime); font: 8px var(--mono, monospace); letter-spacing: .05em; margin-top: 23px; line-height: 1.8; }
.transaction-console { border: 1px solid #56715e; background: #102e26; box-shadow: 0 28px 65px #08241b40; }
.transaction-console-bar { padding: 17px 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--tx-line); }
.transaction-console-name { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; color: #c6d2be; font: 9px var(--mono, monospace); letter-spacing: .035em; }
.transaction-console-divider { color: #688975; }
.transaction-indicator, .transaction-position-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tx-lime); flex: 0 0 6px; }
.transaction-controls { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.transaction-controls button { border: 1px solid #668471; min-height: 36px; color: #ebf2df; background: #1b3f32; transition: background .18s; }
.transaction-controls button:hover { background: #315640; }
.transaction-controls button:focus-visible, .transaction-steps button:focus-visible { outline: 3px solid var(--tx-lime); outline-offset: 3px; }
.transaction-arrow { width: 36px; font-size: 17px; }
.transaction-play { min-width: 131px; padding: 8px 12px; font: 10px var(--mono, monospace); }
.transaction-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; border-bottom: 1px solid var(--tx-line); }
.transaction-steps li { min-width: 0; border-right: 1px solid var(--tx-line); border-bottom: 1px solid var(--tx-line); }
.transaction-step-static { display: flex; align-items: center; gap: 9px; padding: 20px 22px 5px; color: #edf3e2; font-size: 12px; }
.transaction-step-static > span { color: var(--tx-lime); font: 9px var(--mono, monospace); }
.transaction-step-fallback { margin: 8px 22px 22px; font-size: 12px; line-height: 1.8; color: #b8cbbb; }
.transaction-steps button { width: 100%; padding: 22px 10px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; position: relative; color: #b7cbb8; }
.transaction-steps button > span:first-child { font: 9px var(--mono, monospace); color: #97b697; }
.transaction-steps button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.transaction-steps button:hover { background: #244737; color: #fff; }
.transaction-story.is-enhanced .transaction-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.transaction-story.is-enhanced .transaction-steps li { border-bottom: 0; }
.transaction-story.is-enhanced .transaction-steps li:last-child { border-right: 0; }
.transaction-story.is-enhanced .transaction-step-static, .transaction-story.is-enhanced .transaction-step-fallback { display: none; }
.transaction-steps button[aria-current="step"] { background: #294a32; color: var(--tx-lime); }
.transaction-steps button[aria-current="step"] > span:first-child { color: var(--tx-lime); }
.transaction-steps button[aria-current="step"]::after { background: var(--tx-lime); }
.transaction-story.is-playing .transaction-steps button[aria-current="step"]::after { transform-origin: left; animation: transaction-step-progress 4.6s linear both; }
.transaction-stage { padding: 35px 34px 29px; display: grid; grid-template-columns: 77px minmax(0, 1fr) auto; gap: 25px; align-items: center; }
.transaction-stage-counter { align-self: start; font-family: var(--mono, monospace); display: flex; flex-direction: column; padding-top: 10px; }
.transaction-stage-counter > span:first-child { font-size: 43px; line-height: 1; letter-spacing: -.07em; color: var(--tx-lime); }
.transaction-stage-counter > span:last-child { color: #7b9c87; font-size: 10px; margin-top: 10px; }
.transaction-stage-kicker { font: 8px var(--mono, monospace); color: #a4b99e; letter-spacing: .08em; }
.transaction-stage-copy h3 { font-size: clamp(23px, 2.7vw, 34px); margin-top: 10px; line-height: 1.2; }
.transaction-stage-copy p { color: #bfd0bf; font-size: 12px; line-height: 1.85; margin-top: 14px; max-width: 570px; min-height: 67px; }
.transaction-stage-position { align-self: start; display: flex; align-items: center; gap: 7px; margin-top: 7px; padding: 7px 9px; border: 1px solid #5e785c; color: #bdd8a7; font: 7px var(--mono, monospace); letter-spacing: .03em; max-width: 175px; line-height: 1.8; }
.transaction-position-dot { width: 4px; height: 4px; flex-basis: 4px; }
.transaction-worlds { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 31px; padding: 18px 34px 33px; position: relative; background-image: radial-gradient(#4b69503a .7px, transparent .7px); background-size: 16px 16px; }
.transaction-connectors { position: absolute; width: calc(100% - 68px); left: 34px; top: 18px; height: calc(100% - 51px); stroke: #65865c; stroke-width: 1; fill: none; pointer-events: none; }
.transaction-wire-base { opacity: .6; }
.transaction-wire-flow { stroke: var(--tx-lime); stroke-dasharray: 5 10; opacity: 0; }
.transaction-story.is-playing .transaction-wire-flow { opacity: .8; animation: transaction-flow 1.6s linear infinite; }
.transaction-wire-branch { stroke-dasharray: 3 7; opacity: .45; }
.transaction-world { border: 1px solid #53705b; background: #183b2e; position: relative; min-width: 0; display: flex; flex-direction: column; transition: border-color .35s, background .35s, box-shadow .35s; }
.transaction-world-header { display: flex; gap: 7px; align-items: center; padding: 16px 15px; border-bottom: 1px solid #436451; font: 7px var(--mono, monospace); letter-spacing: .04em; color: #c1d2b8; min-height: 54px; }
.transaction-orbit { width: 6px; height: 6px; border: 1px solid #a2bc86; border-radius: 50%; flex: 0 0 6px; }
.transaction-root-id { margin-left: auto; color: var(--tx-lime); font-size: 19px; line-height: 1; white-space: nowrap; }
.transaction-record { padding: 20px 18px; }
.transaction-record-kind { font: 7px var(--mono, monospace); color: #8aa689; letter-spacing: .08em; }
.transaction-record > strong { display: block; font-weight: 500; font-size: 27px; letter-spacing: -.04em; line-height: 1.2; margin-top: 6px; }
.transaction-record-value { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; border-top: 1px solid #436451; padding-top: 11px; font-size: 10px; color: #a6bea5; }
.transaction-record-value code { font: 11px var(--mono, monospace); color: #e2ebd3; }
.transaction-world-foot { font-size: 9px; color: #a9c3a2; line-height: 1.65; padding: 14px 15px; display: flex; align-items: center; gap: 7px; margin-top: auto; border-top: 1px solid #436451; min-height: 47px; }
.transaction-lock { font-size: 15px; color: #c0d2a7; }
.transaction-world-retained { border-color: #688563; }
.transaction-world-candidate { background: #20422e; }
.transaction-change { display: flex; align-items: center; gap: 9px; padding: 15px 15px; border-bottom: 1px solid #436451; }
.transaction-change:nth-last-child(2) { border-bottom: 0; }
.transaction-change-symbol { flex: 0 0 19px; color: var(--tx-lime); font-size: 20px; }
.transaction-change > div { min-width: 0; }
.transaction-change strong { display: block; font-size: 11px; font-weight: 500; color: #e5efdb; line-height: 1.5; }
.transaction-change > div > span { display: block; font-size: 9px; line-height: 1.6; color: #aac7a0; margin-top: 2px; }
.transaction-change code { font: 8px var(--mono, monospace); overflow-wrap: anywhere; }
.transaction-change-check { margin-left: auto; color: var(--tx-lime); opacity: 0; font-size: 12px; }
.transaction-story:not([data-transaction-phase="0"]) .transaction-change-check { opacity: 1; }
.transaction-story[data-transaction-phase="1"] .transaction-world-candidate { border-color: var(--tx-lime); box-shadow: 0 0 28px #d4ed8a0b; }
.transaction-visible-event { display: flex; gap: 7px; align-items: center; padding: 0 18px 15px; font: 8px var(--mono, monospace); color: #9dbd91; line-height: 1.6; }
.transaction-visible-event > span:last-child { overflow-wrap: anywhere; }
.transaction-new-reader { color: var(--tx-lime); font-size: 15px; }
.transaction-story[data-transaction-phase="3"] .transaction-world-current, .transaction-story[data-transaction-phase="4"] .transaction-world-current, .transaction-story[data-transaction-phase="5"] .transaction-world-current { background: #d4ed8a; color: #183b2e; border-color: #d4ed8a; }
.transaction-story:is([data-transaction-phase="3"], [data-transaction-phase="4"], [data-transaction-phase="5"]) .transaction-world-current :is(.transaction-world-header, .transaction-world-foot, .transaction-record-value) { border-color: #a2bd72; color: #426039; }
.transaction-story:is([data-transaction-phase="3"], [data-transaction-phase="4"], [data-transaction-phase="5"]) .transaction-world-current :is(.transaction-root-id, .transaction-record-value code, .transaction-record-kind, .transaction-visible-event, .transaction-new-reader) { color: #365632; }
.transaction-story:is([data-transaction-phase="3"], [data-transaction-phase="4"], [data-transaction-phase="5"]) .transaction-world-current .transaction-orbit { border-color: #45663d; background: #45663d; }
.transaction-story.is-playing[data-transaction-phase="3"] .transaction-world-current { animation: transaction-publish .8s ease-out both; }
.transaction-boundaries { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 34px 30px; }
.transaction-boundary { display: flex; align-items: center; gap: 13px; border: 1px solid #46654f; background: #1b3b2a; padding: 17px 19px; }
.transaction-boundary-icon { font-size: 22px; color: #99b881; }
.transaction-boundary > div { min-width: 0; }
.transaction-boundary > div > span { display: block; font: 7px var(--mono, monospace); color: #9fb994; letter-spacing: .04em; }
.transaction-boundary strong { display: block; margin-top: 5px; font-size: 10px; font-weight: 500; color: #e2ecd6; }
.transaction-boundary-check { margin-left: auto; color: var(--tx-lime); opacity: 0; }
.transaction-story:is([data-transaction-phase="2"], [data-transaction-phase="3"], [data-transaction-phase="4"], [data-transaction-phase="5"]) .transaction-boundary-journal .transaction-boundary-check, .transaction-story[data-transaction-phase="5"] .transaction-boundary-receipt .transaction-boundary-check { opacity: 1; }
.transaction-story[data-transaction-phase="2"] .transaction-boundary-journal, .transaction-story[data-transaction-phase="5"] .transaction-boundary-receipt { border-color: #9fbd75; background: #294c30; }
.transaction-console-footer { border-top: 1px solid var(--tx-line); padding: 15px 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 20px; font: 7px var(--mono, monospace); line-height: 1.6; letter-spacing: .025em; color: #9fb795; }
.transaction-outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 39px; }
.transaction-outcomes > div { border-top: 1px solid #5c785d; padding-top: 21px; }
.transaction-outcomes > div > span { font: 8px var(--mono, monospace); color: #b5ce9c; letter-spacing: .03em; }
.transaction-outcomes h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.025em; margin: 12px 0; }
.transaction-outcomes p { font-size: 11px; line-height: 1.85; color: #b4c9b6; }
.transaction-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 35px; padding-top: 29px; margin-top: 36px; border-top: 1px solid #436451; }
.transaction-notes p { font-size: 10px; line-height: 1.85; color: #a7bea9; }
.transaction-notes strong { color: #d2e1c6; font-weight: 500; }
.transaction-notes .text-link { color: var(--tx-lime); font-size: 11px; grid-column: 1 / -1; justify-self: start; }
@keyframes transaction-step-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes transaction-flow { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes transaction-publish { from { box-shadow: 0 0 0 8px #d4ed8a35; } to { box-shadow: 0 0 0 0 #d4ed8a00; } }
@media (max-width: 1100px) { .transaction-heading { gap: 35px; } .transaction-stage { grid-template-columns: 60px minmax(0, 1fr); } .transaction-stage-position { grid-column: 2; margin-top: -12px; max-width: none; justify-self: start; } .transaction-worlds { gap: 18px; } .transaction-world-header { font-size: 6px; gap: 5px; padding-inline: 12px; } .transaction-change { padding-inline: 12px; } .transaction-outcomes { gap: 20px; } }
@media (max-width: 800px) { .transaction-story { padding-block: 72px; } .transaction-heading { grid-template-columns: 1fr; gap: 25px; } .transaction-heading-copy { max-width: 580px; } .transaction-console-bar { flex-wrap: wrap; padding: 18px 20px; } .transaction-story.is-enhanced .transaction-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .transaction-story.is-enhanced .transaction-steps li:nth-child(-n+3) { border-bottom: 1px solid var(--tx-line); } .transaction-steps button { padding-block: 16px; } .transaction-stage { padding: 28px 22px 21px; gap: 18px; grid-template-columns: 46px minmax(0, 1fr); } .transaction-stage-counter > span:first-child { font-size: 34px; } .transaction-stage-copy p { min-height: 90px; } .transaction-worlds { padding: 16px 22px 23px; grid-template-columns: 1fr 1fr; } .transaction-world-candidate { grid-column: 1 / -1; grid-row: 1; } .transaction-world-candidate .transaction-world-header { font-size: 8px; } .transaction-world-candidate .transaction-change { display: inline-flex; padding: 13px 16px; } .transaction-world-candidate .transaction-world-foot { min-height: 38px; } .transaction-world-header { font-size: 7px; } .transaction-connectors { display: none; } .transaction-boundaries { padding: 0 22px 23px; gap: 12px; } .transaction-boundary { padding: 14px 12px; gap: 8px; } .transaction-outcomes { grid-template-columns: 1fr 1fr; gap: 27px; } }
@media (max-width: 480px) { .transaction-heading h2 { font-size: 36px; } .transaction-heading .eyebrow { font-size: 8px; line-height: 1.8; } .transaction-heading-copy > p { font-size: 13px; } .transaction-console-bar { padding: 15px; gap: 15px; } .transaction-console-name { font-size: 7px; gap: 7px; } .transaction-controls { width: 100%; justify-content: space-between; } .transaction-play { flex: 1; } .transaction-steps { grid-template-columns: 1fr; } .transaction-steps button { font-size: 9px; gap: 6px; padding-inline: 5px; } .transaction-steps button > span:first-child { font-size: 7px; } .transaction-stage { padding: 24px 16px 21px; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; } .transaction-stage-counter > span:first-child { font-size: 29px; } .transaction-stage-kicker { font-size: 6px; } .transaction-stage-copy h3 { font-size: 22px; } .transaction-stage-copy p { font-size: 11px; min-height: 143px; } .transaction-stage-position { margin-top: -8px; font-size: 6px; } .transaction-worlds { padding: 12px 15px 20px; gap: 12px; } .transaction-world-header { padding: 13px 10px; font-size: 6px; min-height: 53px; flex-wrap: wrap; } .transaction-world-header .transaction-root-id { font-size: 16px; } .transaction-world-header .transaction-orbit { display: none; } .transaction-record { padding: 15px 11px; } .transaction-record > strong { font-size: 23px; } .transaction-record-kind { font-size: 6px; } .transaction-record-value { font-size: 8px; margin-top: 15px; } .transaction-record-value code { font-size: 9px; } .transaction-visible-event { padding: 0 11px 13px; font-size: 6px; } .transaction-world-foot { padding: 11px 10px; font-size: 8px; min-height: 52px; } .transaction-boundaries { grid-template-columns: 1fr; padding: 0 15px 20px; } .transaction-console-footer { padding: 14px 15px; font-size: 6px; } .transaction-outcomes { gap: 25px 18px; } .transaction-outcomes > div > span { font-size: 7px; } .transaction-outcomes h3 { font-size: 17px; } .transaction-outcomes p { font-size: 10px; } .transaction-notes { grid-template-columns: 1fr; gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .transaction-story *, .transaction-story *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .transaction-story { padding-block: 24px; background: white; color: #15392f; } .transaction-controls { display: none !important; } .transaction-story.is-enhanced .transaction-steps { grid-template-columns: repeat(3, 1fr); } .transaction-story.is-enhanced .transaction-step-static, .transaction-story.is-enhanced .transaction-step-fallback { display: block; } .transaction-story.is-enhanced .transaction-steps button { display: none !important; } .transaction-step-static, .transaction-step-static > span, .transaction-step-fallback, .transaction-heading-copy > p, .transaction-model-label, .transaction-notes p, .transaction-notes strong { color: #15392f; } .transaction-console { box-shadow: none; } .transaction-worlds, .transaction-boundaries, .transaction-stage { break-inside: avoid; } }