.ref-panel{margin-block:18px;padding:24px}.ref-hero{margin-block:20px}.ref-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.ref-columns>.ref-panel{margin:0}.ref-panel h2{font-size:1.25rem;margin-bottom:16px}.ref-wallet-form{display:grid;gap:12px}.ref-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.ref-actions h2{margin-right:auto}.ref-wallet{overflow-wrap:anywhere}.ref-panel label{display:block;margin-block:10px}.ref-panel input:not([type=color]),.ref-panel select{max-width:100%}.ref-color-row{display:grid!important;grid-template-columns:1fr 46px 115px;gap:10px;align-items:center}.ref-color-row input[type=color]{width:44px;height:38px;border:0;background:none}.ref-preview{display:block;margin:8px auto}.ref-panel .input-group{flex-wrap:nowrap}.ref-panel .input-group input{min-width:0}#ref-tree{display:block;width:100%;height:500px;touch-action:none;border-radius:16px;cursor:grab}#ref-tree:active{cursor:grabbing}.ref-panel .table{font-size:.9rem}@media(max-width:760px){.ref-columns{grid-template-columns:1fr}.ref-panel{padding:18px}#ref-tree{height:400px}.ref-color-row{grid-template-columns:1fr 44px 105px}}

.ref-panel canvas[data-ref-qr]{display:block;width:280px!important;max-width:100%;height:auto!important;margin:16px 0;image-rendering:pixelated}

.ref-graph-stage{background:radial-gradient(ellipse at center,#e1f1f3,#f4f9fa 75%);border:1px solid #d7e8eb;border-radius:16px;overflow:hidden}.ref-graph-stage #ref-tree{width:100%;height:auto;aspect-ratio:1320/780;min-height:360px;border-radius:0;touch-action:none}.ref-graph-modes,.ref-graph-layout-bar{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.ref-graph-modes{padding:4px;border:1px solid #d7e8eb;border-radius:10px;background:#f5fafb}.ref-graph-modes button,.ref-graph-layout-bar button{border:1px solid transparent;border-radius:7px;padding:7px 12px;background:transparent;color:#365761;font:600 12px system-ui;cursor:pointer}.ref-graph-modes button.is-active,.ref-graph-layout-bar button.is-active{background:#d7eef0;border-color:#83bfc6;color:#123f49}.ref-graph-layout-bar{justify-content:center;padding:12px;margin-top:10px;border:1px solid #d7e8eb;border-radius:10px}.ref-graph-layout-bar>span{font:600 11px system-ui;text-transform:uppercase;letter-spacing:.08em;color:#617b84;margin-inline-end:8px}.ref-graph-edges path{stroke:#3a9094;stroke-opacity:.35;stroke-width:1.1}.ref-graph-edges path.is-root-path{stroke:#227c85;stroke-opacity:.7;stroke-width:1.6}.ref-graph-node text{fill:#173d49;font:600 11px system-ui;paint-order:stroke;stroke:#f2f9fa;stroke-width:2.8;stroke-linejoin:round}.ref-graph-node-link{cursor:pointer}.ref-graph-node-hit{fill:transparent;stroke:none;pointer-events:all}.ref-planet-ocean{stroke-width:1.6;filter:url(#refNodeGlow)}.ref-planet-atmosphere{opacity:.55;stroke-width:1.2}.ref-planet-land{pointer-events:none}.ref-planet-shine{opacity:.3;pointer-events:none}.ref-graph-node.is-selected .ref-planet-ocean{stroke-width:3}.ref-graph-node-link:focus{outline:none}.ref-graph-node-link:focus .ref-planet-atmosphere{stroke:#007c90;stroke-width:4}.ref-graph-node-link:hover text{text-decoration:underline}.has-node-focus .ref-graph-node:not(.is-branch-focus):not(.is-branch-neighbor){opacity:.25}.has-node-focus .ref-graph-edges path:not(.is-branch-focus):not(.is-branch-neighbor){opacity:.15}.ref-graph-edges .is-branch-focus,.ref-graph-edges .is-branch-neighbor{stroke:#087a8a;stroke-opacity:1;stroke-width:2}@media(max-width:760px){.ref-graph-card .ref-actions{gap:8px}.ref-graph-card .ref-actions h2{width:100%;margin-bottom:0}.ref-graph-stage #ref-tree{min-height:320px}.ref-graph-layout-bar{gap:3px}.ref-graph-layout-bar>span{display:none}.ref-graph-layout-bar button{padding:8px}.ref-graph-modes button{padding:7px 10px}}

.ref-graph-node-link{text-decoration:none}

.ref-planet-clouds,.ref-planet-shading{pointer-events:none}.ref-planet-land path{stroke:none}.ref-planet-clouds path{fill:none}

.ref-graph-node text{pointer-events:none}

.ref-wallet-card{padding:18px 24px}.ref-wallet-card .ref-wallet-lookup{gap:6px}.ref-wallet-card .ref-wallet-lookup label{margin:0}.ref-wallet-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}.ref-wallet-controls .btn{white-space:nowrap}.ref-wallet-identity{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:12px}.ref-wallet-identity>strong{font-size:1.05rem}.ref-wallet-identity>code{color:#335967;font-size:.8rem}.ref-wallet-identity>span{font-size:.85rem}.ref-wallet-link{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;margin-top:10px}.ref-wallet-card .ref-wallet-link label{margin:0;font-size:.85rem}.ref-wallet-card .ref-wallet-note{margin:8px 0 0;font-size:.75rem}@media(max-width:760px){.ref-wallet-card{padding:16px}.ref-wallet-controls{grid-template-columns:1fr 1fr}.ref-wallet-controls>input{grid-column:1/-1}.ref-wallet-controls .btn{white-space:normal;font-size:.8rem;padding-inline:8px}.ref-wallet-link{grid-template-columns:1fr;gap:5px}.ref-wallet-identity{gap:5px 12px}.ref-wallet-identity>code{width:100%;font-size:.72rem}}

.ref-page-title{font-size:1.5rem;font-weight:700;margin:18px 0 12px}.ref-wallet-card .ref-wallet-identity>code{overflow-wrap:anywhere;min-width:0}

/* Pearl-blue sky: decorative layers stay behind the interactive graph. */
.ref-graph-stage{position:relative;isolation:isolate;background:radial-gradient(ellipse at 18% 12%,#ffffffbd 0,transparent 48%),radial-gradient(ellipse at 80% 72%,#d9e9f5a6 0,transparent 55%),linear-gradient(155deg,#a8cce9 0%,#c6dfef 38%,#e6eef7 72%,#b9d7e9 100%);border-color:#a9c8dc;box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -24px 70px #6c9cb21a,0 12px 32px #3f698b12}
.ref-graph-stage::before,.ref-graph-stage::after{content:"";position:absolute;inset:-15%;z-index:0;pointer-events:none}
.ref-graph-stage::before{background:radial-gradient(ellipse at 25% 35%,#ffffff6b,transparent 36%),radial-gradient(ellipse at 78% 65%,#ffffff47,transparent 40%);animation:ref-sky-drift 32s ease-in-out infinite alternate;opacity:.7}
.ref-graph-stage::after{background:radial-gradient(circle at 18% 20%,#ffffffbd 0 1px,transparent 2px),radial-gradient(circle at 77% 30%,#ffffff9c 0 1px,transparent 2px),radial-gradient(circle at 61% 76%,#ffffff9c 0 1px,transparent 2px),radial-gradient(ellipse at 50% 0%,#ffffff66,transparent 55%);opacity:.65}
.ref-graph-stage #ref-tree{position:relative;z-index:1;background:transparent}
.ref-graph-node text{fill:#14384b;stroke:#edf6fc;stroke-width:3.2px}
.ref-graph-edges path{stroke:#367c9b;stroke-opacity:.48}
.ref-graph-edges path.is-root-path{stroke:#266782;stroke-opacity:.8}
.ref-graph-node-link:hover .ref-planet-atmosphere{opacity:.95;stroke-width:2.3}
@keyframes ref-sky-drift{from{transform:translate3d(-1.5%,-1%,0)}to{transform:translate3d(2%,1.5%,0)}}
@media(prefers-reduced-motion:reduce){.ref-graph-stage::before{animation:none}}

/* More pronounced open sky, with soft high-altitude light. */
.ref-graph-stage{background:radial-gradient(ellipse at 22% 18%,#e8f7ffb3 0,transparent 38%),radial-gradient(ellipse at 82% 72%,#edf0ff9c 0,transparent 45%),linear-gradient(165deg,#558fbd 0%,#83b8dd 32%,#b8dced 64%,#d1e5f1 100%);border-color:#80accd;box-shadow:inset 0 2px 0 #ffffff9c,inset 0 -28px 80px #326e9b24,0 14px 36px #3f698b1a}
.ref-graph-stage::before{background:radial-gradient(ellipse at 15% 32%,#ffffff94,transparent 30%),radial-gradient(ellipse at 76% 58%,#ffffff70,transparent 35%);opacity:.85}
.ref-planet-clouds{transform-origin:0 0;animation:ref-weather-drift 47s ease-in-out infinite alternate;pointer-events:none}
@keyframes ref-weather-drift{from{transform:rotate(-12deg) translateX(-1px)}to{transform:rotate(14deg) translateX(1px)}}
@media(prefers-reduced-motion:reduce){.ref-planet-clouds{animation:none}}