/* Choice systems harvested from the retired Collection studies and Card Modes Lab. */
.choice-system{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;min-height:min(42rem,calc(100dvh - 8rem));overflow:hidden;border:1px solid rgba(200,164,90,.2);background:#10110f;color:#eee7dc}.system-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid rgba(238,231,220,.12);background:rgba(5,6,6,.7)}.system-head .eyebrow{color:#d4a06a;font:600 .55rem/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase}.system-head h2{margin-top:.22rem;font-size:1.1rem;line-height:1}.system-head p{max-width:32rem;color:rgba(238,231,220,.55);font-size:.72rem;line-height:1.35}.system-status{min-height:2.35rem;padding:.62rem 1rem;border-top:1px solid rgba(238,231,220,.12);color:#74d8e8;font:500 .62rem/1.35 "IBM Plex Mono",monospace}.system-button{min-height:2.55rem;border:1px solid rgba(238,231,220,.2);background:#151714;color:#eee7dc;padding:.48rem .7rem;font:600 .66rem/1.2 "IBM Plex Mono",monospace}.system-button:hover{border-color:#d4a06a}.system-button:focus-visible,.fork-option:focus-visible,.hex-node:focus-visible,.spatial-choice:focus-visible{outline:2px solid #74d8e8;outline-offset:2px}
.counterfactual{background:linear-gradient(rgba(233,238,230,.94),rgba(215,224,217,.96)),#dfe7e0;color:#202722}.counterfactual .system-head{background:rgba(242,246,241,.9);border-color:rgba(28,38,30,.18)}.counterfactual .system-head .eyebrow{color:#5a675e}.counterfactual .system-head h2{color:#172019}.counterfactual .system-head p{color:#647068}.counterfactual .system-status{border-color:rgba(28,38,30,.18);color:#374a3d}.counter-body{position:relative;min-height:0;overflow:auto;display:grid;grid-template-rows:repeat(3,minmax(8rem,1fr)) auto;padding:.55rem 1rem .8rem}.fork{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 6.5rem minmax(0,1fr);align-items:center;border-bottom:1px solid rgba(28,38,30,.14);padding:.4rem 0}.fork:last-of-type{border-bottom:0}.fork legend{position:absolute;left:50%;top:.45rem;translate:-50% 0;z-index:2;padding:.14rem .4rem;background:#dfe7e0;color:#5b665e;font:600 .55rem "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.fork::before,.fork::after{content:"";position:absolute;top:50%;height:1px;background:rgba(50,68,56,.22);width:calc(50% - 3.25rem)}.fork::before{left:3.25rem;transform:rotate(18deg);transform-origin:left}.fork::after{right:3.25rem;transform:rotate(-18deg);transform-origin:right}.fork-option{position:relative;z-index:3;display:grid;gap:.2rem;min-height:4.4rem;border:0;background:transparent;color:#1b241d;text-align:left;padding:.65rem}.fork-option:last-child{text-align:right}.fork-option strong{font-size:1rem}.fork-option span{color:#657068;font:600 .55rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.04em;text-transform:uppercase}.fork-option::before{content:attr(data-letter);position:absolute;top:50%;right:-1.7rem;translate:0 -50%;display:grid;place-items:center;width:2rem;height:2rem;border:1px solid #748078;border-radius:50%;background:#e8eee9;font:600 .62rem "IBM Plex Mono",monospace}.fork-option:last-child::before{right:auto;left:-1.7rem}.fork-option[aria-checked="true"]{color:#0f412b}.fork-option[aria-checked="true"]::before{background:#173e2e;color:white;border-color:#173e2e}.fork-option.is-rejected{opacity:.38;text-decoration:line-through}.fork-option.is-provisional{opacity:.64}.fork-option:disabled{cursor:not-allowed;opacity:.3}.fork-state{position:relative;z-index:3;justify-self:center;color:#607067;font:600 .5rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.outcome{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;padding:.65rem;border:1px solid rgba(28,38,30,.16);background:rgba(248,250,247,.56)}.meter{display:grid;grid-template-columns:auto 1fr auto;gap:.45rem;align-items:center;color:#536158;font:600 .52rem "IBM Plex Mono",monospace;text-transform:uppercase}.meter i{display:block;height:.24rem;background:rgba(44,64,51,.16);overflow:hidden}.meter i::after{content:"";display:block;width:var(--value);height:100%;background:#254c39;transition:width .35s}.meter output{min-width:1.2rem;text-align:right;color:#1c2b21}
.hex-system{background:#e8eef3;color:#101927}.hex-system.dark{background:#07101d;color:#edf5ff}.hex-system .system-head{background:rgba(244,248,251,.72);border-color:rgba(21,39,59,.14)}.hex-system.dark .system-head{background:rgba(5,11,20,.72)}.hex-system .system-head h2{color:inherit}.hex-system .system-head p{color:color-mix(in srgb,currentColor 58%,transparent)}.hex-system .system-head .eyebrow{color:#5f7086}.hex-toolbar{display:flex;gap:.35rem}.hex-system .system-button{background:rgba(255,255,255,.65);color:#152236;border-color:rgba(21,39,59,.2)}.hex-system.dark .system-button{background:#101a2a;color:#edf5ff;border-color:rgba(237,245,255,.2)}.hex-field{position:relative;min-height:25rem;overflow:hidden}.hex-node{--size:clamp(5rem,13cqw,8rem);position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));translate:-50% -50%;display:grid;place-items:center;align-content:center;gap:.32rem;width:var(--size);height:calc(var(--size)*.866);border:0;color:white;background:var(--swatch,#2674e8);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transition:left .35s,top .35s,transform .25s,opacity .25s}.hex-node:hover{transform:scale(1.04)}.hex-node span{font-size:1.25rem}.hex-node strong{max-width:80%;font:700 .58rem/1.2 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.07em}.hex-node.is-current{--size:clamp(5.7rem,15cqw,9.2rem);z-index:3;background:#111a2a}.hex-node.is-branch{z-index:2}.hex-trail{position:absolute;left:.7rem;bottom:.65rem;right:.7rem;display:flex;gap:.3rem;overflow:auto}.hex-trail button{flex:0 0 auto;min-height:2.25rem;border:1px solid rgba(21,39,59,.2);background:rgba(255,255,255,.72);color:#1a2635;padding:.4rem .55rem;font:600 .55rem "IBM Plex Mono",monospace}.dark .hex-trail button{background:#111c2b;color:#edf5ff;border-color:rgba(237,245,255,.2)}.hex-system .system-status{color:#284a6b;border-color:rgba(21,39,59,.14)}.hex-system.dark .system-status{color:#7bdcf2;border-color:rgba(237,245,255,.14)}
.spatial-system{background:radial-gradient(circle at 50% 50%,#202735,#080b11 70%)}.spatial-field{position:relative;min-height:25rem;overflow:hidden}.spatial-center{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:7rem;aspect-ratio:1;border:1px solid rgba(212,160,106,.5);border-radius:50%;background:#121720;color:#e9cf99;font:600 .62rem "IBM Plex Mono",monospace;text-align:center}.spatial-choice{position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));translate:-50% -50%;width:clamp(6rem,15cqw,8rem);min-height:5.5rem;border:1px solid rgba(238,231,220,.24);background:#171c25;color:#eee7dc;padding:.65rem;text-align:left}.spatial-choice strong{display:block}.spatial-choice span{display:block;margin-top:.3rem;color:rgba(238,231,220,.55);font-size:.68rem}.spatial-choice[aria-pressed="true"]{border-color:#d4a06a;box-shadow:0 0 0 2px rgba(212,160,106,.2);transform:translateY(-.35rem)}.horizon-field{display:grid;align-content:center;gap:.6rem;min-height:25rem;padding:1rem 8%}.horizon-row{position:relative;display:grid;grid-template-columns:7rem 1fr;gap:.7rem;align-items:center;padding-top:.55rem;border-top:1px solid rgba(238,231,220,var(--fade))}.horizon-row>span{color:rgba(238,231,220,var(--fade));font:600 .55rem "IBM Plex Mono",monospace;text-transform:uppercase}.horizon-row .spatial-choice{position:static;translate:0;width:100%;min-height:3.5rem;opacity:var(--fade)}
.fork-option:last-child{grid-column:3}.fork-state{position:absolute;z-index:4;left:50%;top:calc(50% + 1.35rem);translate:-50% 0;padding:.12rem .3rem;background:#dfe7e0;color:#607067;white-space:nowrap}
@media(max-width:640px){.choice-system{min-height:calc(100dvh - 7rem)}.system-head{padding:.65rem}.system-head p{display:none}.fork{grid-template-columns:minmax(0,1fr) 3.2rem minmax(0,1fr)}.fork::before,.fork::after{width:calc(50% - 1.6rem)}.fork-option{padding:.4rem;font-size:.8rem}.fork-option::before{right:-.75rem;width:1.5rem;height:1.5rem}.fork-option:last-child::before{left:-.75rem}.outcome{grid-template-columns:1fr}.hex-node{--size:clamp(4.3rem,21vw,6rem)}.hex-node.is-current{--size:clamp(4.8rem,23vw,6.6rem)}.hex-node strong{font-size:.48rem}.spatial-choice{width:5.6rem;min-height:4.8rem;padding:.45rem}.spatial-choice span{font-size:.58rem}.horizon-field{padding-inline:.6rem}.horizon-row{grid-template-columns:4.5rem 1fr}}
@media(max-height:500px) and (min-width:700px){.choice-system{min-height:calc(100dvh - 6.2rem)}.system-head{padding:.45rem .7rem}.counter-body{grid-template-rows:repeat(3,minmax(4.6rem,1fr)) auto}.fork-option{min-height:3.2rem;padding:.3rem}.hex-field,.spatial-field,.horizon-field{min-height:16rem}.hex-node{--size:4.4rem}.hex-node.is-current{--size:5rem}.spatial-choice{min-height:3.7rem}.spatial-center{width:5rem}}
@media(prefers-reduced-motion:reduce){.meter i::after,.hex-node,.spatial-choice{transition:none!important}}