*{box-sizing:border-box} :root{font-family:"Archivo",-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;color:#201b2b;background:#faf9fc;--purple:#581bd1}body{margin:0}main{max-width:1160px;margin:auto;padding:34px 48px 24px}button,input{font:inherit}button{cursor:pointer}header{display:flex;justify-content:space-between;align-items:center}.wordmark{font-size:12px;font-weight:750;letter-spacing:1.5px;color:inherit;text-decoration:none}.dot{display:inline-block;width:7px;height:7px;background:var(--purple);border-radius:50%;margin-left:10px}.edition,.eyebrow,.sheet-top,.canvas-caption,footer{font-size:9px;letter-spacing:1.1px;color:#8c8698}.intro{display:flex;justify-content:space-between;align-items:end;margin:50px 0 25px}.eyebrow{font-size:8px;letter-spacing:1.4px}h1{font-size:39px;font-weight:400;letter-spacing:-1.7px;margin:12px 0 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--purple)}.instruction{font-size:12px;line-height:1.7;color:#8b8494;margin:0 0 3px}#canvas{position:relative;width:min(100%,740px);aspect-ratio:1;margin:auto;background:#fdfcfe;overflow:hidden;border:1px solid #eee9f4;border-radius:3px}svg{width:100%;height:100%;display:block;touch-action:none;user-select:none}#edges line{transition:opacity .25s;pointer-events:none}.node{cursor:grab;outline:none}.node:focus-visible .ring{stroke:#c4a4ff;stroke-width:9}.node .hit{fill:transparent}.ring{fill:#fff;stroke:var(--purple);stroke-width:15}.node text{fill:#1b1721;text-anchor:middle;pointer-events:none}.label-value{font-size:38px;letter-spacing:-1.4px}.label-symbol{font-size:20px}.label-qty{font-size:12px;fill:#71677d!important}.canvas-caption{position:absolute;bottom:20px;left:24px;right:24px;display:flex;justify-content:space-between;font-size:7px;pointer-events:none}.canvas-caption i{display:inline-block;width:4px;height:4px;background:#8a61cf;border-radius:50%;vertical-align:middle;margin-left:5px}footer{display:flex;justify-content:space-between;align-items:center;margin:20px auto 0;max-width:740px;font-size:7px;letter-spacing:.6px}footer>div{display:flex;gap:7px;align-items:center}.legend-line{width:20px;border-top:1.5px solid var(--purple)}.legend-line.dashed{border-top:1px dashed #aaa;margin-left:13px}footer button{border:0;background:none;color:#8b8494;font-size:9px}#overlay{position:absolute;inset:0;display:flex;align-items:end;justify-content:center;padding:16px;background:#faf9fc18;backdrop-filter:blur(2px)}#overlay[hidden]{display:none}#sheet{width:100%;max-width:430px;border:1px solid #ffffffeb;border-radius:30px;background:#fcfbffdc;backdrop-filter:blur(24px);box-shadow:0 14px 65px #35214b21,0 2px 8px #fff inset;padding:10px 26px 20px;overflow:hidden;transition:height .38s cubic-bezier(.22,.9,.25,1);animation:rise .4s cubic-bezier(.2,.9,.2,1)}@keyframes rise{from{transform:translateY(105%);opacity:.3}to{transform:translateY(0);opacity:1}}#sheet.closing{transform:translateY(110%);opacity:0;transition:transform .25s,opacity .2s}#handle{height:4px;width:32px;border-radius:5px;background:#d9d3e1;margin:0 auto 18px;touch-action:none}.sheet-top{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px}h2{font-size:28px;letter-spacing:-1px;font-weight:500;margin:16px 0 20px}h2 span{color:#a28abf;padding:0 8px}#sheet-body{animation:content .25s ease}@keyframes content{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.available{font-size:11px;color:#81758f}.amount-row{display:flex;align-items:center;gap:10px;margin-top:8px}.amount-row input{width:100%;min-width:0;border:0;outline:none;background:transparent;font-size:44px;letter-spacing:-2px;color:#241b32;padding:0}.amount-row span{font-size:14px;color:#8d7ba1}.usd{font-size:12px;color:#9a8ca9;margin:4px 0 15px}.shortcuts{display:flex;gap:7px;margin-bottom:16px}.shortcuts button{flex:1;border:1px solid #e8e0f2;background:#f2edf8;border-radius:9px;color:#74538f;padding:8px;font-size:10px}.estimate{background:#f0eaf780;border:1px solid #ece3f5;border-radius:15px;padding:14px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#8c7b9e}.estimate strong{font-size:19px;font-weight:500;color:#4d3267}.details{margin:15px 0;font-size:10px;color:#92849e}.row{display:flex;justify-content:space-between;gap:12px;margin:10px 0}.row span:last-child{color:#4a3b5b;text-align:right}.primary{width:100%;border:0;border-radius:13px;padding:15px;background:var(--purple);color:white;font-size:12px;font-weight:500}.primary:disabled{opacity:.35;cursor:default}.secondary{display:block;width:100%;padding:13px 0 0;border:0;background:none;color:#9686a4;font-size:11px}.error{font-size:10px;min-height:13px;color:#a83c70;margin:8px 0}.preview-card{padding:16px 0;border-bottom:1px solid #e9e1f1}.preview-card small{display:block;color:#93829e;font-size:11px;margin-bottom:8px}.preview-card strong{font-size:29px;letter-spacing:-.8px;font-weight:400}.success{text-align:center;padding:15px 0 20px}.check{width:62px;height:62px;border-radius:50%;background:#eee5fa;color:var(--purple);display:grid;place-items:center;margin:auto;font-size:28px}.success h3{font-size:25px;font-weight:400;letter-spacing:-.8px}.success p{font-size:12px;color:#93839e;line-height:1.7}button:focus-visible,input:focus-visible{outline:2px solid #9c6bea;outline-offset:3px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#tuning{max-width:740px;margin:20px auto;padding:20px;background:#f0eaf7;font-size:12px;border-radius:15px}#sliders label{display:flex;justify-content:space-between;margin:12px 0}#sliders input{width:50%}@media(min-width:1000px){#canvas{width:min(66vh,740px);min-width:540px}}@media(max-width:600px){main{padding:23px 14px}header .edition{font-size:7px}.intro{margin:38px 8px 25px}.eyebrow{font-size:6px;letter-spacing:1px}h1{font-size:30px}.instruction{display:none}#canvas{overflow:visible}#network{border-radius:3px}#overlay{inset:0 -4px;padding:8px;align-items:end;z-index:5;backdrop-filter:none}#sheet{padding:9px 21px 14px;max-height:min(640px,85dvh);overflow:auto;border-radius:25px;box-shadow:0 15px 55px #35214b30}h2{margin:12px 0 15px}footer{font-size:6px;gap:8px}footer>span{display:none}.canvas-caption{font-size:5px;bottom:12px;left:14px;right:14px}.amount-row input{font-size:37px}.sheet-top{font-size:7px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media(max-width:600px){#sheet{max-height:100%}#overlay{overflow:hidden;inset:0;padding:8px}#handle{cursor:ns-resize}}

header{margin-bottom:38px}.node text{font-variant-numeric:tabular-nums}#canvas{width:min(100%,740px)}
@media(min-width:1000px){#canvas{width:min(78vh,740px)}}
@media(max-width:600px){header{margin-bottom:30px}}

:root[data-font="sf"]{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif}
.font-preview{display:flex;gap:4px}.font-preview a{font-size:10px;letter-spacing:.1px;text-decoration:none;color:#91859e;padding:7px 10px;border-radius:8px}.font-preview a[aria-current="true"]{background:#eee7f7;color:#581bd1}.node .label-hit{fill:transparent;pointer-events:all}.node text{pointer-events:none}
@media(max-width:600px){.wordmark{font-size:10px;letter-spacing:1px}.font-preview a{font-size:9px;padding:7px}}

:root{font-synthesis:none}.label-value{font-size:35px;letter-spacing:-1.2px}.label-symbol{font-size:18px}.amount-row input{font-size:39px}@media(max-width:600px){.amount-row input{font-size:32px}}

/* Editorial surround: keep the interactive artwork light and square. */
:root{background:#18171b;color:#f5f1f8}body{background:#18171b}main{max-width:1340px;min-height:100svh;padding:64px 48px 28px;display:grid;grid-template-columns:minmax(280px,360px) minmax(0,740px);column-gap:64px;align-content:center;align-items:center}.experiment-intro{grid-column:1;grid-row:1;padding:0 0 16px}.experiment-eyebrow{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:9px;letter-spacing:2.1px;font-weight:500;color:#a899bd;margin:0 0 26px}.experiment-intro h1{font-size:34px;font-weight:400;letter-spacing:-1.1px;line-height:1.16;margin:0;color:#f2edf6}.experiment-description{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:14px;font-weight:400;line-height:1.8;color:#a6a0ae;margin:25px 0 30px;max-width:340px}.experiment-cta{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;display:flex;gap:15px;align-items:center;text-decoration:none;font-size:12px;line-height:1.7;color:#d5c5ec;max-width:290px;padding:0 0 12px;border-bottom:1px solid #4b3c5b}.experiment-cta span{font-size:20px;color:#ab83df}#canvas{grid-column:2;grid-row:1;width:100%;min-width:0;max-width:740px;border-color:#37313f;border-radius:3px;box-shadow:0 24px 80px #0003;color:#201b2b}footer{grid-column:2;grid-row:2;width:100%;max-width:none;margin:18px 0 0;color:#a39aaE;gap:14px;min-height:30px}.font-preview{margin-left:auto;flex-shrink:0}.font-preview a{color:#8e849b;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:10px}.font-preview a[aria-current="true"]{color:#ddc8f5;background:#302739}.legend-line{border-color:#ac7de9}.legend-line.dashed{border-color:#8b8292}#sheet{color:#201b2b}.canvas-caption{color:#8c8698}:root[data-font="sf"] .experiment-intro h1{font-weight:450;font-size:38px;letter-spacing:-1.3px}
@media(min-width:1000px){#canvas{width:100%;min-width:0}}
@media(max-width:1000px){main{display:block;max-width:800px;padding:44px 30px 25px}.experiment-intro{max-width:580px;margin:0 auto 35px;padding:0}.experiment-intro h1{font-size:32px}.experiment-description{max-width:520px;margin:20px 0}.experiment-cta{max-width:370px}#canvas{width:100%}footer{margin-top:14px}}
@media(max-width:600px){main{padding:35px 16px 22px}.experiment-intro{margin:0 5px 28px}.experiment-eyebrow{font-size:8px;margin-bottom:18px}.experiment-intro h1{font-size:27px;line-height:1.2;letter-spacing:-.8px}:root[data-font="sf"] .experiment-intro h1{font-size:31px}.experiment-description{font-size:12px;line-height:1.8;margin:18px 0 20px}.experiment-cta{font-size:11px;max-width:310px}footer{gap:8px;font-size:6px}.font-preview{gap:0}.font-preview a{font-size:8px;padding:7px 6px}.legend-line{width:13px}.legend-line.dashed{margin-left:6px}}

.node-shadow{fill:#4d1aa0;opacity:0;filter:blur(4px);pointer-events:none}.ring{transform-origin:0 0}

/* Quiet hierarchy: regular UI, medium actions, bold editorial headline. */
:root{font-weight:400}.experiment-intro h1,:root[data-font="sf"] .experiment-intro h1{font-weight:700;color:#bcb7c4}.label-value{font-weight:400}.label-symbol{font-weight:500}.sheet-top,.canvas-caption{font-weight:400}.primary{font-weight:500}.font-preview a{font-weight:400}.estimate strong{font-weight:500}

.font-preview{align-items:center}.typography-label{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:10px;letter-spacing:0;color:#8e849b;margin-right:4px}@media(max-width:600px){.typography-label{font-size:8px;margin-right:3px}}

#route-actions{position:absolute;bottom:38px;left:12px;right:12px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;z-index:2}#route-actions[hidden]{display:none}#route-actions button{font:500 11px "Archivo",system-ui,sans-serif;background:#f5efffee;color:#581bd1;border:1px solid #ded0f2;border-radius:20px;padding:10px 13px;min-height:40px;box-shadow:0 2px 10px #35214b0a}#overlay{z-index:4;isolation:isolate}#sheet{position:relative;flex-shrink:0}@media(max-width:600px){#route-actions{bottom:26px;gap:4px}#route-actions button{font-size:10px;padding:8px;min-height:38px}}

@media(max-width:600px){#handle{margin-bottom:9px}#sheet{padding:8px 18px 10px}#sheet h2{font-size:23px;margin:9px 0 10px}.amount-row input{font-size:29px}.amount-row{margin-top:5px}.usd{margin:3px 0 9px}.shortcuts{margin-bottom:9px}.shortcuts button{padding:6px}.estimate{padding:9px}.estimate strong{font-size:16px}.details{margin:8px 0}.row{margin:6px 0}.error{margin:4px 0;min-height:10px}.primary{padding:11px}.secondary{padding-top:9px}.available{font-size:10px}}

.node.is-grabbed{cursor:grabbing}.node:hover .ring{filter:drop-shadow(0 2px 4px #581bd130)}.node.is-grabbed .ring{filter:drop-shadow(0 3px 6px #581bd140)}

/* Phone layout reserves a portrait interaction stage for the complete sheet. */
@media(max-width:600px){main{padding:20px 12px 16px}.experiment-intro{margin:0 5px 18px}.experiment-eyebrow{font-size:7px;letter-spacing:1.6px;margin:0 0 10px}.experiment-intro h1,:root[data-font="sf"] .experiment-intro h1{font-size:22px;line-height:1.12;letter-spacing:-.65px}.experiment-description{font-size:11px;line-height:1.5;margin:12px 0}.experiment-cta{font-size:10px;line-height:1.4;padding-bottom:7px;max-width:100%}#canvas{aspect-ratio:auto;height:clamp(440px,calc(100svh - 250px),600px);overflow:hidden}#network{height:100%;width:100%}#overlay{padding:10px;align-items:end}#sheet{max-height:100%;overflow:auto}footer{margin-top:9px}.canvas-caption{bottom:12px}}
@media(max-width:360px){.experiment-intro h1,:root[data-font="sf"] .experiment-intro h1{font-size:20px}.experiment-description{font-size:10px}#sheet{padding-left:14px;padding-right:14px}}

.node{transition:filter .22s ease}.node.is-unavailable{filter:none}@media(prefers-reduced-motion:reduce){.node{transition:none}}

.node .ring{transition:fill .16s ease}.node.is-selected .ring{fill:#581bd1}@media(prefers-reduced-motion:reduce){.node .ring{transition:none}}

.node.is-unavailable .ring{fill:#b29acb;stroke:#9c7acb}.node .ring,.node .label{transition:fill .16s ease,filter .2s ease}