/* Theme variables. Default = IRIS CYAN; the other themes are at the end of this file (html[data-theme=...]). */
:root{
  --c:#3ee0ff; --c-rgb:62,224,255; --c2:#1a7dff; --text:#d8f6ff; --dim:#6aa9c9;
  --pos:#5dffb0; --pos-rgb:93,255,176; --neg:#ff8f8f; --neg-rgb:255,143,143; --warn:#ffd36a; --warn-rgb:255,211,106;
  --bg1:#0b3f98; --bg2:#07204f; --bg3:#030a22; --p-rgb:8,30,72; --p2-rgb:5,20,52; --d-rgb:3,10,34;
  --navy2:#06173c; --navy3:#0d2b66; --navy4:#0a2150; --c3:var(--c); --c3-rgb:var(--c-rgb);
  --panel:rgba(var(--p-rgb),.5); --line:rgba(var(--c-rgb),.28); --amp:0;
}
body.thinking{--c:#a395ff; --c-rgb:163,149,255; --c2:#5a49ff}
body.alert{--c:#ffd36a; --c-rgb:255,211,106; --c2:#ff8a3d}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%}
body{
  font-family:Rajdhani,"Segoe UI",system-ui,sans-serif; font-size:16px; color:var(--text);
  background:radial-gradient(ellipse at 50% 45%,var(--bg1) 0%,var(--bg2) 42%,var(--bg3) 100%);
  min-height:100vh; background-attachment:fixed; overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(var(--c-rgb),.035) 0 1px,transparent 1px 4px)}
.app{min-height:100vh;display:flex;flex-direction:column;gap:16px;padding:14px 24px 0}
[hidden]{display:none!important}
code{font-family:Consolas,monospace;font-size:.92em;color:#fff}

/* header */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;order:-3}
.brand{font-family:Orbitron,sans-serif;font-weight:700;letter-spacing:.45em;font-size:18px;text-shadow:0 0 14px var(--c)}
.hexes{display:flex;gap:14px}
.hex{position:relative;width:20px;height:22px;background:var(--c);opacity:.45;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex::after{content:"";position:absolute;inset:2px;background:var(--bg2);clip-path:inherit}
body.thinking .hex{animation:hexw 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*.1s)}
@keyframes hexw{0%,100%{opacity:.25}50%{opacity:1}}
.hbtns{display:flex;gap:8px}
.hbtns button{font-size:10px;letter-spacing:.16em;padding:6px 12px;border-radius:3px}
#connBtn{border-color:var(--c3);color:#fff}
.hlink{display:inline-flex;align-items:center;font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.16em;padding:6px 12px;border-radius:3px;border:1px solid var(--line);background:rgba(var(--p-rgb),.65);color:var(--text);text-decoration:none}
.hlink:hover{border-color:var(--c);box-shadow:0 0 10px rgba(var(--c-rgb),.35)}
.meta{font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:.25em;color:var(--dim);text-align:right;min-width:150px}
#status{color:var(--c);display:block}
.banner{order:-2;text-align:center;font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:.2em;color:#fff;background:#c4262e;border-radius:4px;padding:7px 12px}
.banner .mini{color:#fff;border-color:#fff;background:transparent;margin-left:12px}
.banner .mini:hover:not(:disabled){background:rgba(255,255,255,.18);border-color:#fff;box-shadow:none}
.welcome{order:-2;max-width:760px;margin:0 auto;width:100%}
.welcome p{margin:4px 0 10px;font-size:17px}
.welcome ol{margin:0 0 14px 22px;line-height:1.5;font-size:16px}
.wbtns{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.wbtns button:first-child{border-color:var(--c);color:#fff}

/* layout */
main{display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.2fr) minmax(260px,1fr);gap:20px;min-height:0;align-items:start}
.col{display:flex;flex-direction:column;gap:14px}
.center{display:flex;flex-direction:column;align-items:center;gap:14px;min-height:0;width:100%;align-self:center}
.wide{display:flex;flex-direction:column;gap:16px}
body.cfirst .wide{order:-1}
body:not(.cfirst) .wide{order:1}
.panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 15px;backdrop-filter:blur(3px)}
.panel::before,.panel::after{content:"";position:absolute;width:11px;height:11px;border:2px solid var(--c3)}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.ptitle{font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:.25em;color:var(--dim);margin-bottom:8px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.phead .ptitle{margin-bottom:6px}
.big{font-family:Orbitron,sans-serif;font-weight:700;font-size:30px;color:#fff;text-shadow:0 0 12px var(--c);margin-bottom:6px;font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed rgba(var(--c-rgb),.14);font-variant-numeric:tabular-nums}
.row span:first-child{color:var(--dim)}
.err{color:var(--neg);font-size:14px;line-height:1.25}
.sub{font-size:13px;line-height:1.3;color:var(--dim);padding:2px 0 6px}
.pos{color:var(--pos)}.neg{color:var(--neg)}.warnc{color:var(--warn)}
.sp{flex:1}

/* portfolio section */
.shead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.shead .ptitle{margin:0;font-size:15px;letter-spacing:.35em;color:var(--text);text-shadow:0 0 12px var(--c)}
.shead .live{font-size:11px;letter-spacing:.2em;color:var(--dim)}
.shead .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 8px var(--pos);margin-right:7px;animation:blink 1.6s infinite}
#socinfo::before{display:none}
@keyframes blink{50%{opacity:.3}}
.stabs{display:flex;gap:4px;align-items:center}
.stab{font-size:10px;letter-spacing:.18em;padding:5px 10px;border-radius:3px;background:transparent}
.stab.active{border-color:var(--c3);color:#fff;box-shadow:0 0 10px rgba(var(--c3-rgb),.35);background:rgba(var(--c3-rgb),.14)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:12px}
.tile{border:1px solid var(--line);border-radius:5px;padding:9px 12px;background:rgba(var(--p-rgb),.4);min-width:0}
.tile small{display:block;font-size:10px;letter-spacing:.22em;color:var(--dim);margin-bottom:3px}
.tile b{display:block;font-family:Orbitron,sans-serif;font-size:19px;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile b.pos{color:var(--pos)}.tile b.neg{color:var(--neg)}
.tile span{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.smain{display:grid;grid-template-columns:minmax(0,3fr) minmax(340px,2fr);gap:16px;align-items:stretch;min-height:560px}
.sright{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0}
.chartbox{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line);border-radius:5px;background:rgba(var(--p2-rgb),.5);overflow:hidden}
.chead{display:flex;align-items:center;gap:10px;padding:8px 12px 0}
.chead .ctitle{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.22em;color:var(--dim)}
.chead .stab{font-size:11px;padding:6px 12px}
.cwrap{position:relative;flex:1;min-height:360px}
#chart{position:absolute;inset:0}
#chart svg{display:block;width:100%;height:100%}
.ctip{position:absolute;pointer-events:none;background:rgba(var(--d-rgb),.95);border:1px solid var(--c);border-radius:4px;padding:5px 9px;font-size:13px;line-height:1.3;white-space:nowrap;display:none;z-index:2;font-variant-numeric:tabular-nums}
.cempty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--dim);font-size:15px;padding:20px}
.sbox{border:1px solid var(--line);border-radius:5px;background:rgba(var(--p2-rgb),.5);padding:10px 12px;min-width:0}
.sbox .ptitle{margin-bottom:6px}
.posbox{display:flex;flex-direction:column;flex:none;height:170px}
.posbox #pos{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(var(--c-rgb),.3) transparent}
.calbox{display:flex;flex-direction:column;flex:1 1 auto;min-height:340px}
.calbox #cal{flex:1;min-height:0;display:flex;flex-direction:column}
.calbox .cgrid{flex:1;min-height:0;grid-auto-rows:minmax(40px,1fr)}
.tr{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 2px;border-bottom:1px dashed rgba(var(--c-rgb),.14);font-variant-numeric:tabular-nums}
.tr .sd{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.1em;text-align:center;border-radius:3px;padding:2px 0}
.tr.long .sd{color:var(--pos);background:rgba(var(--pos-rgb),.13);border:1px solid rgba(var(--pos-rgb),.4)}
.tr.short .sd{color:var(--neg);background:rgba(var(--neg-rgb),.13);border:1px solid rgba(var(--neg-rgb),.4)}
.tr .mid{min-width:0;font-weight:600}
.tr .mid small{display:block;color:var(--dim);font-weight:400;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .am{text-align:right;font-weight:700;font-size:14px}
.cnav{display:flex;align-items:center;gap:8px}
.cnav b{font-family:Orbitron,sans-serif;font-size:12px;letter-spacing:.14em;color:#fff;min-width:118px;text-align:center}
.cnav button:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.cwk,.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cwk{margin:2px 0 4px;font-size:10px;letter-spacing:.16em;color:var(--dim);text-align:center}
.cd{position:relative;min-height:0;border-radius:4px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;line-height:1.1;background:rgba(150,170,190,.1);color:#7f94a8}
.cd i{position:absolute;top:3px;left:5px;font-style:normal;font-size:10px;opacity:.75}
.cd b{font-size:12px;font-weight:600}
.cd.pad{background:transparent}
.cd.profit{background:rgba(var(--pos-rgb),.2);border-color:rgba(var(--pos-rgb),.55);color:var(--text)}
.cd.loss{background:rgba(var(--neg-rgb),.2);border-color:rgba(var(--neg-rgb),.6);color:var(--text)}
@supports (background:color-mix(in srgb,red 10%,blue)){
  .cd.profit{background:linear-gradient(160deg,color-mix(in srgb,var(--pos) 34%,var(--bg3)),color-mix(in srgb,var(--pos) 20%,var(--bg3)));border-color:color-mix(in srgb,var(--pos) 75%,transparent);color:color-mix(in srgb,var(--pos) 30%,#fff)}
  .cd.loss{background:linear-gradient(160deg,color-mix(in srgb,var(--neg) 34%,var(--bg3)),color-mix(in srgb,var(--neg) 20%,var(--bg3)));border-color:color-mix(in srgb,var(--neg) 75%,transparent);color:color-mix(in srgb,var(--neg) 30%,#fff)}
}
.cd.future{background:transparent;border:1px dashed rgba(var(--c-rgb),.14);color:var(--dim);opacity:.7}
.cd.today{box-shadow:0 0 0 1px var(--c),0 0 10px rgba(var(--c-rgb),.5)}
.calbox .ptitle em{font-style:normal;font-family:Rajdhani,sans-serif;letter-spacing:.04em;font-size:14px;margin-left:10px;color:var(--dim)}
.calbox .ptitle em.pos{color:var(--pos)}.calbox .ptitle em.neg{color:var(--neg)}

/* left / right column widgets */
.pl{display:grid;grid-template-columns:auto 1fr auto;gap:3px 10px;align-items:baseline;font-variant-numeric:tabular-nums;margin-top:6px}
.pl small{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.pl b{font-family:Orbitron,sans-serif;font-size:13px;text-align:right}
.pl span{font-size:13px;text-align:right;min-width:56px}
.ac{padding:6px 0;border-bottom:1px dashed rgba(var(--c-rgb),.14)}
.ac .t{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-variant-numeric:tabular-nums}
.ac .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:600}
.ac .n i{font-style:normal;font-size:10px;letter-spacing:.12em;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:0 5px;margin-left:7px;font-weight:400}
.ac .bar2{height:4px;border-radius:2px;background:rgba(var(--c-rgb),.1);margin:4px 0 2px;overflow:hidden}
.ac .bar2 i{display:block;height:100%;background:linear-gradient(90deg,var(--c),var(--c3))}
.ac .s{font-size:12px;color:var(--dim)}
.ac .e{font-size:13px;color:var(--neg);line-height:1.25}
.ac .w{font-size:12px;color:var(--warn);line-height:1.25}
.don{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.don svg{width:120px;height:120px;display:block}
.al{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:7px;align-items:center;font-size:14px;padding:2px 0;font-variant-numeric:tabular-nums}
.al u{display:block;width:10px;height:10px;border-radius:2px}
.al .p{color:var(--dim);min-width:44px;text-align:right}
.mk{display:grid;grid-template-columns:52px 1fr 74px auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dashed rgba(var(--c-rgb),.14);font-variant-numeric:tabular-nums}
.mk b{font-family:Orbitron,sans-serif;font-size:12px;color:#fff}
.mk svg{width:100%;height:24px;display:block}
.mk .px{text-align:right;font-size:14px}
.mk .ch{text-align:right;font-size:13px;min-width:56px}

/* holdings */
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th{font-family:Orbitron,sans-serif;font-weight:500;font-size:10px;letter-spacing:.2em;color:var(--dim);text-align:right;padding:4px 8px;border-bottom:1px solid var(--line)}
.tbl td{text-align:right;padding:5px 8px;border-bottom:1px dashed rgba(var(--c-rgb),.14);font-size:15px}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td:first-child{color:#fff;font-weight:600}
.tbl td.where{text-align:left;color:var(--dim);font-size:13px}
.tbl th.where{text-align:left}
.pbar{display:inline-block;vertical-align:middle;width:60px;height:5px;background:rgba(var(--c-rgb),.1);border-radius:3px;margin-right:8px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--c)}

/* socials */
.soc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.soc{border:1px solid var(--line);border-radius:5px;background:rgba(var(--p2-rgb),.5);padding:11px 13px;min-width:0;display:flex;flex-direction:column;gap:6px}
.soc .h{display:flex;align-items:center;gap:8px;min-width:0}
.soc .h b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-weight:600;flex:1}
.soc .h a{color:var(--dim);text-decoration:none;font-size:13px}
.soc .h a:hover{color:#fff}
.plat{font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.14em;padding:2px 6px;border-radius:3px;border:1px solid currentColor;flex:none}
.plat-youtube{color:#ff7a7a}.plat-instagram{color:#ff7bd0}.plat-x{color:#e8f1f7}.plat-telegram{color:#5cc8ff}.plat-discord{color:#9aa4ff}
.soc .n{font-family:Orbitron,sans-serif;font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.soc .n small{font-size:10px;letter-spacing:.2em;color:var(--dim);margin-left:8px;font-family:Rajdhani,sans-serif}
.soc .g{display:flex;gap:12px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--dim);flex-wrap:wrap}
.soc svg{width:100%;height:34px;display:block}
.soc .st{font-size:13px;color:var(--dim)}
.soc .ps{border-top:1px dashed rgba(var(--c-rgb),.18);padding-top:5px;display:flex;flex-direction:column;gap:3px}
.soc .p{display:flex;flex-direction:column;font-size:13px;font-variant-numeric:tabular-nums;padding:2px 0}
.soc .p span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc .p span:last-child{color:var(--dim);font-size:12px}
.soc .p a{color:inherit;text-decoration:none}
.soc .p a:hover{color:#fff}
.soc .e{font-size:13px;color:var(--neg);line-height:1.25}
.soc.empty{align-items:flex-start;color:var(--dim);font-size:14px}

/* stage: orb */
.income{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.stage{position:relative;width:min(100%,40vh);aspect-ratio:1;margin:0 auto;perspective:900px;--amp:0}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eq,.mer{position:absolute;inset:7%;border-radius:50%;border:2px solid var(--c);box-shadow:0 0 18px var(--c),inset 0 0 18px var(--c)}
.eq{transform:rotateX(76deg);opacity:.85}
.mer{opacity:.5;animation:mer 26s linear infinite}
@keyframes mer{from{transform:rotateY(70deg)}to{transform:rotateY(430deg)}}
.orb{
  position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;margin:-18% 0 0 -18%;border-radius:50%;
  background:radial-gradient(circle closest-side at 50% 50%,#fff 0,#fffefc 24%,#fff9ee 44%,#fff1dc 60%,rgba(255,240,222,.8) 76%,rgba(255,240,215,.3) 89%,rgba(255,235,205,0) 100%);
  transform:translate(var(--ox,0px),var(--oy,0px)) scale(calc(1 + var(--amp)*.34));
  filter:brightness(calc(1 + var(--amp)*.4)) drop-shadow(0 0 calc(18px + var(--amp)*40px) rgba(255,250,238,.8));will-change:transform,filter}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rp{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;margin:-17% 0 0 -17%;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
body.thinking .rp,body.speaking .rp,body.alert .rp{animation:rp 1.9s ease-out infinite}
.rp:nth-of-type(2){animation-delay:.63s!important}
.rp:nth-of-type(3){animation-delay:1.26s!important}
@keyframes rp{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.7);opacity:0}}

/* footer */
footer{display:grid;gap:8px;justify-items:center;position:sticky;bottom:0;z-index:4;margin-top:auto;padding:14px 0;background:rgba(var(--d-rgb),.97);order:5}
footer::before{content:"";position:absolute;left:0;right:0;top:-56px;height:56px;background:linear-gradient(to top,rgba(var(--d-rgb),.97),rgba(var(--d-rgb),0));pointer-events:none}
.caption{min-height:3.2em;max-height:28vh;overflow-y:auto;max-width:820px;text-align:center;font-size:19px;line-height:1.3;white-space:pre-wrap}
#you{color:var(--dim);font-size:15px;min-height:1.3em}
#note{font-size:13px;color:var(--dim);margin-top:4px;font-style:italic}
#reply{text-shadow:0 0 10px rgba(var(--c-rgb),.35)}
#reply .ghost{visibility:hidden}
.sugg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(960px,100%);padding:0 18px;margin-bottom:14px}
.sugg:empty{display:none}
.bub{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:40px;font-family:system-ui,"Segoe UI",sans-serif;font-size:13px;line-height:1.3;color:var(--text);background:var(--navy4);border:1px solid rgba(var(--c-rgb),.34);border-radius:14px;padding:8px 16px;cursor:pointer;box-shadow:0 0 14px rgba(var(--c-rgb),.08);animation:bubIn .5s cubic-bezier(.2,.9,.3,1.1) both;transition:transform .2s,border-color .15s,box-shadow .15s,color .15s,background .15s}
.bub:hover{border-color:var(--c);color:#fff;background:var(--navy3);box-shadow:0 0 18px rgba(var(--c-rgb),.3);transform:translateY(-2px)}
@keyframes bubIn{from{opacity:0;transform:translateY(9px) scale(.95)}to{opacity:1;transform:none}}
.sponsors{font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.16em;color:var(--dim);text-align:center;line-height:1.8}
.sponsors a{color:var(--c);text-decoration:none;letter-spacing:.1em;margin:0 3px}
.sponsors a:hover{text-decoration:underline;color:#fff}
.bar{display:flex;gap:8px;width:min(720px,100%);position:relative}
input,select,button{font:inherit;color:var(--text);background:rgba(var(--p-rgb),.65);border:1px solid var(--line);border-radius:4px;padding:10px 12px}
select option{background:var(--bg2)}
input{flex:1;outline:none;font-size:17px;min-width:0}
input:focus,select:focus{border-color:var(--c);box-shadow:0 0 12px rgba(var(--c-rgb),.35);outline:none}
input:disabled,select:disabled{opacity:.6;cursor:not-allowed}
button{cursor:pointer;font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:.2em}
button:hover:not(:disabled){border-color:var(--c);box-shadow:0 0 10px rgba(var(--c-rgb),.35)}
button:disabled{opacity:.5;cursor:not-allowed}
button.mini{font-size:9px;letter-spacing:.16em;padding:3px 8px;border-radius:3px}
button.mini.sure,button.sure{border-color:var(--neg);color:var(--neg)}
#gear,#mute{padding:0 12px;font-size:19px;line-height:1;letter-spacing:0;min-width:46px}
#mute{display:grid;place-items:center}
body.speaking #mute{border-color:var(--c);color:#fff;animation:blink 1.2s infinite}
.pop{position:absolute;left:0;bottom:calc(100% + 10px);display:flex;flex-direction:column;gap:10px;padding:12px;background:rgba(var(--d-rgb),.97);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:6;max-width:min(520px,92vw)}
.poprow{display:flex;gap:8px;align-items:center}
.poprow.wrap{flex-wrap:wrap}
.poptitle{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.22em;color:var(--dim)}
.pop select{max-width:260px;font-size:14px;padding:8px}
.chk{display:flex;gap:6px;align-items:center;font-size:14px;cursor:pointer;padding:4px 8px;border:1px solid var(--line);border-radius:4px}
.chk input{flex:none;width:auto;font-size:14px;accent-color:var(--c)}

/* connections modal */
.modal{position:fixed;inset:0;z-index:20;background:rgba(var(--d-rgb),.82);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:28px 14px}
.mbox{width:min(860px,100%);background:var(--navy2);border:1px solid var(--line);border-radius:8px;padding:18px 20px 24px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.mhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.mhead .ptitle{margin:0;font-size:15px;letter-spacing:.35em;color:#fff}
.safety{font-size:14px;line-height:1.4;border:1px solid rgba(var(--warn-rgb),.45);background:rgba(var(--warn-rgb),.07);border-radius:5px;padding:8px 12px;margin-bottom:6px}
.mgroup{margin-top:18px}
.mgroup>.ptitle{border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:10px}
.card{border:1px solid var(--line);border-radius:6px;background:rgba(var(--p-rgb),.45);padding:11px 14px;margin-bottom:10px}
.card .ch{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.card .ch b{font-size:17px;color:#fff;font-weight:600}
.pill{font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.16em;padding:2px 8px;border-radius:10px;border:1px solid var(--line);color:var(--dim)}
.pill.on{color:var(--pos);border-color:rgba(var(--pos-rgb),.5)}
.pill.lock{color:var(--c);border-color:var(--c)}
.card .bl{font-size:14px;color:var(--dim);line-height:1.35;margin-bottom:8px}
.card .bl a{color:var(--c)}
.frow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;margin-bottom:6px}
.frow label{font-size:14px;color:var(--dim)}
.frow input,.frow select{font-size:15px;padding:7px 10px;width:100%}
.frow .hint{grid-column:2;font-size:12px;color:var(--dim);margin-top:-2px}
.cbtn{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cbtn button{padding:7px 12px}
.cbtn .primary{border-color:var(--c3);color:#fff}
.res{margin-top:8px;font-size:14px;line-height:1.35}
.res .l{padding:2px 0}
.res .danger{color:var(--neg);font-weight:600}.res .warn{color:var(--warn)}.res .info{color:var(--dim)}
.wrow,.srow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed rgba(var(--c-rgb),.16)}
.wrow .n,.srow .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrow .n small,.srow .n small{display:block;color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.addform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 4px}
.addform .full{grid-column:1/-1}
.addform input,.addform select,.addform textarea,.krow textarea{font-size:15px;padding:8px 10px;width:100%;font-family:inherit;background:rgba(var(--d-rgb),.5);color:var(--text);border:1px solid var(--line);border-radius:4px;resize:vertical}
.addform .hint{font-size:13px;color:var(--dim);line-height:1.4}
.krow{padding:6px 0;border-bottom:1px dashed rgba(var(--c-rgb),.16)}.khead{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.krow .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.krow .n small{display:block;color:var(--dim);font-size:12px}.krow textarea{margin:8px 0 6px}
.probox{border:1px solid var(--line);border-radius:6px;background:rgba(var(--p-rgb),.45);padding:10px 14px;margin-bottom:10px}.probox.on{border-color:rgba(var(--pos-rgb),.5)}
.probox .prow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}.probox .hint{font-size:13px;color:var(--dim);line-height:1.4}.probox .hint.neg{color:var(--neg)}.probox a{color:var(--c)}
.allowbar{height:6px;border-radius:3px;background:rgba(var(--c-rgb),.14);margin:6px 0;overflow:hidden}.allowbar i{display:block;height:100%;background:var(--c)}
.nets{display:flex;gap:6px;flex-wrap:wrap}
.msg{font-size:14px;margin-top:6px}
.msg.err{color:var(--neg)}

@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .smain{grid-template-columns:1fr}.chartbox{height:360px}.posbox{height:240px}.calbox .cgrid{grid-auto-rows:44px}
}
@media (max-width:980px){
  main{grid-template-columns:1fr}.center{order:-1}.stage{width:min(100%,70vw)}.hexes{display:none}
  .app{padding:12px 12px 0}.sugg{grid-template-columns:1fr;gap:10px}
  .frow{grid-template-columns:1fr}.frow .hint{grid-column:1}
  header{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.mer,.hex,.rp{animation:none!important}}

/* (i) info windows */
button.ibtn{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border-radius:50%;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:13px;letter-spacing:0;line-height:1;color:var(--c);border-color:var(--c);background:rgba(var(--c-rgb),.08);flex:none;vertical-align:middle;margin-left:6px}
button.ibtn:hover:not(:disabled){background:var(--c);color:var(--bg3)}
.ptitle button.ibtn{margin-left:10px}
.infomodal{z-index:40;background:rgba(var(--d-rgb),.7)}
.ibox{width:min(640px,100%)}
.ibox h4{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:.22em;color:var(--dim);margin:14px 0 6px;font-weight:500}
.ibox p{line-height:1.4;font-size:16px}
.ibox ol{padding-left:22px;line-height:1.4;font-size:16px}
.ibox li{margin:4px 0}
.ibox .perm{border:1px solid rgba(var(--warn-rgb),.45);border-radius:6px;padding:8px 12px;color:var(--warn);font-size:15px;line-height:1.35}
.ibox .gotolink{display:inline-block;margin-top:14px;color:var(--c)}

/* live bubbles + alerts */
.bub.hot{border-color:var(--warn);color:#fff;box-shadow:0 0 16px rgba(var(--warn-rgb),.22)}
.bub .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:9px;box-shadow:0 0 8px var(--warn);animation:blink 1.2s infinite}
.bub.swapping{opacity:0;transform:scale(.94);transition:opacity .28s,transform .28s}

/* ---------- colour themes ---------- */
html[data-theme=matrix]{--c:#2bff88;--c-rgb:43,255,136;--c2:#00b35a;--c3:#ffb000;--c3-rgb:255,176,0;--text:#d2ffe4;--dim:#5fa883;--pos:#5dff7a;--pos-rgb:93,255,122;--neg:#ff5c5c;--neg-rgb:255,92,92;--warn:#ffe066;--warn-rgb:255,224,102;--bg1:#072718;--bg2:#05150f;--bg3:#010805;--p-rgb:7,28,21;--p2-rgb:5,19,14;--d-rgb:1,8,5;--navy2:#04110b;--navy3:#0c3b25;--navy4:#071c15}
html[data-theme=solana]{--c:#14f195;--c-rgb:20,241,149;--c2:#9945ff;--c3:#00c2ff;--c3-rgb:0,194,255;--text:#e6ecff;--dim:#8a93b8;--pos:#3dffb0;--pos-rgb:61,255,176;--neg:#ff6b8b;--neg-rgb:255,107,139;--warn:#ffd36a;--warn-rgb:255,211,106;--bg1:#240f47;--bg2:#110b25;--bg3:#05030d;--p-rgb:23,14,47;--p2-rgb:15,9,32;--d-rgb:5,3,13;--navy2:#0d081d;--navy3:#172e3d;--navy4:#170e2f}
html[data-theme=tokyo]{--c:#7aa2f7;--c-rgb:122,162,247;--c2:#bb9af7;--c3:#ff9e64;--c3-rgb:255,158,100;--text:#c0caf5;--dim:#7f8bb8;--pos:#9ece6a;--pos-rgb:158,206,106;--neg:#f7768e;--neg-rgb:247,118,142;--warn:#e0af68;--warn-rgb:224,175,104;--bg1:#24283f;--bg2:#181923;--bg3:#0d0e16;--p-rgb:29,32,48;--p2-rgb:22,24,37;--d-rgb:13,14,22;--navy2:#14151e;--navy3:#2a324c;--navy4:#1d2030}
html[data-theme=violet]{--c:#b388ff;--c-rgb:179,136,255;--c2:#7c4dff;--c3:#5eead4;--c3-rgb:94,234,212;--text:#efe6ff;--dim:#9a86c9;--pos:#6bffc1;--pos-rgb:107,255,193;--neg:#ff6f9c;--neg-rgb:255,111,156;--warn:#ffd36a;--warn-rgb:255,211,106;--bg1:#301169;--bg2:#180c35;--bg3:#07031a;--p-rgb:31,17,66;--p2-rgb:20,11,48;--d-rgb:7,3,26;--navy2:#12092c;--navy3:#34225c;--navy4:#1f1142}
html[data-theme=synth]{--c:#ff4fd8;--c-rgb:255,79,216;--c2:#00e5ff;--c3:#ffe45e;--c3-rgb:255,228,94;--text:#ffe6fa;--dim:#bb86b6;--pos:#3dffd0;--pos-rgb:61,255,208;--neg:#ff5a7a;--neg-rgb:255,90,122;--warn:#ffd36a;--warn-rgb:255,211,106;--bg1:#3d0f49;--bg2:#1d0829;--bg3:#0a0212;--p-rgb:40,13,54;--p2-rgb:27,8,38;--d-rgb:10,2,18;--navy2:#160621;--navy3:#46164c;--navy4:#280d36}
html[data-theme=bitcoin]{--c:#f7931a;--c-rgb:247,147,26;--c2:#ffcf5a;--c3:#4da3ff;--c3-rgb:77,163,255;--text:#fff1de;--dim:#c79a6b;--pos:#6dffa0;--pos-rgb:109,255,160;--neg:#ff4f6d;--neg-rgb:255,79,109;--warn:#ffe08a;--warn-rgb:255,224,138;--bg1:#3d2209;--bg2:#1c1108;--bg3:#0a0502;--p-rgb:39,24,11;--p2-rgb:26,15,7;--d-rgb:10,5,2;--navy2:#150d06;--navy3:#44290d;--navy4:#27180b}
html[data-theme=red]{--c:#ff3b4e;--c-rgb:255,59,78;--c2:#ff7a45;--c3:#59d0ff;--c3-rgb:89,208,255;--text:#ffe3e6;--dim:#c98d94;--pos:#4dffa6;--pos-rgb:77,255,166;--neg:#ff5470;--neg-rgb:255,84,112;--warn:#ffd36a;--warn-rgb:255,211,106;--bg1:#3d0b14;--bg2:#1c070c;--bg3:#090204;--p-rgb:42,12,22;--p2-rgb:27,7,14;--d-rgb:9,2,4;--navy2:#150509;--navy3:#48121e;--navy4:#2a0c16}
html[data-theme=carbon]{--c:#e4e4e7;--c-rgb:228,228,231;--c2:#a1a1aa;--c3:#7aa2ff;--c3-rgb:122,162,255;--text:#f4f4f5;--dim:#8b8b94;--pos:#6ee7a0;--pos-rgb:110,231,160;--neg:#ff8f8f;--neg-rgb:255,143,143;--warn:#ffd36a;--warn-rgb:255,211,106;--bg1:#19191e;--bg2:#101014;--bg3:#050506;--p-rgb:25,25,31;--p2-rgb:16,16,20;--d-rgb:5,5,6;--navy2:#0c0c0f;--navy3:#35353b;--navy4:#19191f}

/* theme picker (gear menu) */
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button.sw{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.18);letter-spacing:0}
button.sw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(var(--c-rgb),.5)}
#themeName{font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.2em;color:var(--dim);margin-left:4px}

/* mild highlights: explanatory text, and the part of the app being explained */
.welcome{transition:box-shadow .3s,border-color .3s}
.welcome:hover{border-color:rgba(var(--c3-rgb),.6);box-shadow:0 0 0 1px rgba(var(--c3-rgb),.22),0 0 26px rgba(var(--c3-rgb),.14)}
.caption.explain{background:rgba(var(--c3-rgb),.07);border:1px solid rgba(var(--c3-rgb),.28);border-radius:10px;padding:8px 18px;box-shadow:0 0 26px rgba(var(--c3-rgb),.12)}
.spot{box-shadow:0 0 0 1px rgba(var(--c3-rgb),.75),0 0 0 5px rgba(var(--c3-rgb),.12),0 0 30px rgba(var(--c3-rgb),.32)!important;border-color:rgba(var(--c3-rgb),.85)!important;transition:box-shadow .45s,border-color .45s;animation:spotp 2.2s ease-in-out infinite}
@keyframes spotp{50%{box-shadow:0 0 0 1px rgba(var(--c3-rgb),.9),0 0 0 8px rgba(var(--c3-rgb),.06),0 0 38px rgba(var(--c3-rgb),.4)}}
@media (prefers-reduced-motion:reduce){.spot{animation:none}}

/* the call-to-action on the welcome panel: TRY DEMO DATA pulses until it is pressed */
.wbtns button{transition:box-shadow .2s,border-color .2s,transform .2s,background .2s}
.wbtns button:hover:not(:disabled){border-color:var(--c3);background:rgba(var(--c3-rgb),.16);box-shadow:0 0 18px rgba(var(--c3-rgb),.45);transform:translateY(-1px)}
.wbtns #wDemo{position:relative;overflow:visible;color:var(--bg3);font-weight:700;border-color:transparent;background:linear-gradient(135deg,var(--c3),var(--c));animation:ctaBeat 1.5s ease-in-out infinite}
.wbtns #wDemo:hover:not(:disabled){background:linear-gradient(135deg,var(--c3),var(--c));filter:brightness(1.15);transform:translateY(-1px) scale(1.04)}
.wbtns #wDemo::after{content:"";position:absolute;inset:-3px;border-radius:6px;border:2px solid var(--c3);pointer-events:none;animation:ctaRing 1.5s ease-out infinite}
@keyframes ctaBeat{0%,100%{box-shadow:0 0 10px rgba(var(--c3-rgb),.45)}50%{box-shadow:0 0 30px rgba(var(--c3-rgb),.95),0 0 60px rgba(var(--c3-rgb),.35)}}
@keyframes ctaRing{0%{transform:scale(1);opacity:.95}100%{transform:scale(1.28,1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.wbtns #wDemo{animation:none}.wbtns #wDemo::after{animation:none;opacity:.6}}
.bub.spot{transform:translateY(-3px) scale(1.05);background:rgba(var(--c3-rgb),.2);color:#fff}

/* in demo mode CONNECTIONS gets the same call-to-action look as TRY DEMO DATA, until the demo is switched off */
.hbtns #connBtn.cta{position:relative;overflow:visible;color:var(--bg3);font-weight:700;border-color:transparent;background:linear-gradient(135deg,var(--c3),var(--c));animation:ctaBeat 1.5s ease-in-out infinite}
.hbtns #connBtn.cta:hover:not(:disabled){background:linear-gradient(135deg,var(--c3),var(--c));filter:brightness(1.15);transform:translateY(-1px) scale(1.04)}
.hbtns #connBtn.cta::after{content:"";position:absolute;inset:-3px;border-radius:6px;border:2px solid var(--c3);pointer-events:none;animation:ctaRing 1.5s ease-out infinite}
@media (prefers-reduced-motion:reduce){.hbtns #connBtn.cta{animation:none}.hbtns #connBtn.cta::after{animation:none;opacity:.6}}

/* donation (optional, shown after something is connected) */
.donbtn{font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:.16em;margin-left:10px;padding:3px 9px;border-radius:3px;border:1px solid rgba(var(--c-rgb),.35);background:transparent;color:var(--c);cursor:pointer}
.donbtn:hover{border-color:var(--c);box-shadow:0 0 10px rgba(var(--c-rgb),.3);color:#fff}
#donate{z-index:45}
.donrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.donrow input{flex:1 1 150px;min-width:120px}
.donrow .chip{padding:6px 12px}
.donrow .cta{flex:1;padding:12px 16px;font-size:12px;letter-spacing:.2em;border-color:var(--c2);background:linear-gradient(90deg,rgba(var(--c-rgb),.22),rgba(153,69,255,.28));color:#fff}
.donrow .cta:disabled{opacity:.55;cursor:wait}
.donmsg{min-height:20px;font-size:15px;line-height:1.35;margin:4px 0}
.donmsg.err{color:var(--neg)} .donmsg.ok{color:var(--pos)}
.donaddr{display:flex;gap:8px;align-items:center;margin:6px 0}
.donaddr code{flex:1;overflow-wrap:anywhere;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:rgba(var(--d-rgb),.5)}
.ibox .small{font-size:14px;color:var(--dim)}
#donate a{color:var(--c)} #donate a:hover{color:#fff}

/* COSMIC orb (orb3d.js): two canvases a little larger than the stage so glow and lightning can reach past its edge */
.stage.cosmic .orb,.stage.cosmic .mer,.stage.cosmic .eq,.stage.cosmic .rp{display:none}
#fxg,#fx2{position:absolute;left:-20%;top:-20%;width:140%;height:140%;pointer-events:none;-webkit-mask-image:radial-gradient(circle closest-side,#000 62%,rgba(0,0,0,.5) 82%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 62%,rgba(0,0,0,.5) 82%,transparent 100%)}

/* inner circle window and header button */
.innerbtn{border-color:var(--warn)!important;color:#fff!important;background:linear-gradient(90deg,rgba(var(--warn-rgb),.16),rgba(var(--c-rgb),.1))!important}
.innerbtn:hover{box-shadow:0 0 12px rgba(var(--warn-rgb),.45)!important}
#inner{z-index:45}
#inner a{color:var(--c)} #inner a:hover{color:#fff}
.inlist{margin:6px 0 8px 20px;line-height:1.5}
.inprice{font-size:18px;margin:6px 0 10px;color:#fff}
#inner .cta,#inOpen{display:block;text-align:center;text-decoration:none;color:#fff!important;padding:12px 16px;font-family:Orbitron,sans-serif;font-size:12px;letter-spacing:.2em;border:1px solid var(--c2);border-radius:4px;background:linear-gradient(90deg,rgba(var(--c-rgb),.22),rgba(var(--c2-rgb,var(--c-rgb)),.12))}
#inner .cta:disabled{opacity:.55;cursor:not-allowed}
.pill.pro{background:rgba(255,200,70,.14);color:#ffc846;border-color:rgba(255,200,70,.45)}
.locked-card{opacity:.82;border-style:dashed}
.locked-card .bl{opacity:.8}