/* ============ SKIN 1 · OBSIDIAN — graphite neumorphic (base ui.css) ============ */
.skin1 .glass{background:linear-gradient(180deg,rgba(24,25,30,.82),rgba(14,15,18,.82))}

/* ============ SKIN 2 · MAQUETA — light frosted, architectural ============ */
.skin2{--ink:#0e1014;--muted:#5b616c;--dim:#8a909b;--line:rgba(10,12,16,.08)}
.skin2 #vignette{background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 60%,rgba(120,128,140,.35) 100%),linear-gradient(180deg,rgba(235,238,242,.5),rgba(0,0,0,0) 16%,rgba(0,0,0,0) 66%,rgba(235,238,242,.75))}
.skin2 .glass{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 60px rgba(40,50,70,.18),inset 0 1px 0 #fff;backdrop-filter:blur(26px) saturate(160%)}
.skin2 .glow-hot::after,.skin2 .glow-cool::after{display:none}
.skin2 .glow-hot,.skin2 .glow-cool{box-shadow:0 20px 60px rgba(40,50,70,.18),inset 0 1px 0 #fff}
.skin2 .glow-hot{border-top:3px solid #ff6a2b}.skin2 .glow-cool{border-top:3px solid #16c7a8}
.skin2 .chip.on,.skin2 .lang .on{background:#0e1014;color:#fff}
.skin2 .layer.on{background:rgba(10,12,16,.04)}
.skin2 .layer .ic{background:#cfd3d9}.skin2 .layer .st{color:#b0b5bd}
.skin2 .rc-grid div,.skin2 .sol{background:rgba(10,12,16,.035);box-shadow:none}
.skin2 .sol.on{background:rgba(22,199,168,.1);box-shadow:inset 0 0 0 1px rgba(22,199,168,.4)}
.skin2 .sol em{color:#0ea58a}
.skin2 #capText{color:#0e1014;text-shadow:0 2px 30px rgba(255,255,255,.6)}
.skin2 #capText .cool{background:linear-gradient(90deg,#0fb596,#1f7fe0);-webkit-background-clip:text;background-clip:text}
.skin2 .lbl .tag{background:rgba(255,255,255,.9);color:#0e1014;border-color:rgba(0,0,0,.06);box-shadow:0 10px 30px rgba(40,50,70,.2)}
.skin2 .lbl .stem{background:linear-gradient(rgba(14,16,20,.6),rgba(14,16,20,0))}

/* ============ SKIN 3 · EDITORIAL — no cards, hairlines, huge type ============ */
.skin3 .glass{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.skin3 .glow-hot::after,.skin3 .glow-cool::after{display:none}
.skin3 .glow-hot,.skin3 .glow-cool{box-shadow:none}
.skin3 .topbar{border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;left:60px;right:60px;padding:0}
.skin3 .panel{padding:0}
.skin3 .left{left:60px;top:150px;width:300px;border-left:1px solid rgba(255,255,255,.2);padding-left:22px}
.skin3 .layer{padding:9px 0;background:none!important;box-shadow:none!important}
.skin3 .right{right:60px;top:140px;width:420px;text-align:right}
.skin3 .bignum{font-size:190px;font-weight:100;letter-spacing:-.06em}
.skin3 .bignum small{font-size:44px}
.skin3 .rc-row{justify-content:flex-end;gap:18px}
.skin3 .rc-grid div{background:none;box-shadow:none;border-top:1px solid rgba(255,255,255,.2);border-radius:0;padding:10px 0 0;text-align:right}
.skin3 .solutions{right:60px;top:520px;width:440px}
.skin3 .sol{background:none;box-shadow:none;border-radius:0;border-top:1px solid rgba(255,255,255,.14);padding:14px 0}
.skin3 .sol.on{background:none;box-shadow:none;border-top-color:#2ee6c5}
.skin3 .sol-total b{font-size:64px;font-weight:100}
.skin3 #caption{justify-content:flex-start;left:60px;bottom:70px}
.skin3 #capText{text-align:left;font-size:92px;font-weight:600;max-width:1500px;line-height:1}
.skin3 #vignette{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.55)),linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 55%,rgba(0,0,0,.9))}
.skin3 .lbl .tag{background:none;border:0;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.6);border-radius:0;padding:4px 0;font-size:17px}

/* ============ SKIN 4 · THERMAL HUD — mono, brackets, instrument ============ */
.skin4{--line:rgba(255,106,43,.28)}
.skin4 .glass{background:rgba(6,6,6,.72);border:1px solid rgba(255,255,255,.08);border-radius:2px;box-shadow:none;backdrop-filter:blur(8px)}
.skin4 .glow-hot::after,.skin4 .glow-cool::after{display:none}
.skin4 .glow-hot,.skin4 .glow-cool{box-shadow:none}
.skin4 .panel::before{content:'';position:absolute;inset:-6px;pointer-events:none;
  background:
   linear-gradient(#ff6a2b,#ff6a2b) top left/18px 2px no-repeat,linear-gradient(#ff6a2b,#ff6a2b) top left/2px 18px no-repeat,
   linear-gradient(#ff6a2b,#ff6a2b) top right/18px 2px no-repeat,linear-gradient(#ff6a2b,#ff6a2b) top right/2px 18px no-repeat,
   linear-gradient(#ff6a2b,#ff6a2b) bottom left/18px 2px no-repeat,linear-gradient(#ff6a2b,#ff6a2b) bottom left/2px 18px no-repeat,
   linear-gradient(#ff6a2b,#ff6a2b) bottom right/18px 2px no-repeat,linear-gradient(#ff6a2b,#ff6a2b) bottom right/2px 18px no-repeat}
.skin4 .solutions::before{filter:hue-rotate(140deg)}
.skin4 .topbar{border-radius:2px;background:rgba(6,6,6,.6)}
.skin4 .chip,.skin4 .layer,.skin4 .hot,.skin4 .rc-row,.skin4 .sol b,.skin4 .p-title{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em}
.skin4 .p-title{font-size:18px;font-weight:500}
.skin4 .layer{font-size:13px;border-radius:0}
.skin4 .layer.on .ic{background:#ff6a2b;box-shadow:0 0 10px #ff6a2b;border-radius:0}
.skin4 .bignum{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:100px;letter-spacing:-.04em;color:#ff7a3a;text-shadow:0 0 30px rgba(255,106,43,.5)}
.skin4 .rc-grid div,.skin4 .sol{border-radius:0;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.skin4 .sol b{font-size:13px}
.skin4 .sol .sw{border-radius:0;width:10px;height:36px}
.skin4 #caption{justify-content:flex-start;left:60px;bottom:70px}
.skin4 #capText{text-align:left;font-size:84px}
.skin4 #capText::before{content:'▍ UC-OS / TORREVIEJA / 37.978N';display:block;font-family:'JetBrains Mono';font-size:14px;letter-spacing:.2em;color:#ff6a2b;font-weight:500;margin-bottom:16px}
.skin4 #vignette{background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
.skin4 .lbl .tag{border-radius:0;font-family:'JetBrains Mono';text-transform:uppercase;font-size:13px;letter-spacing:.06em;background:rgba(0,0,0,.8)}

/* ============ SKIN 5 · GLASS DOCK — bento tiles at the bottom, caption on top ============ */
.skin5 .glass{background:linear-gradient(180deg,rgba(40,70,120,.28),rgba(10,20,40,.5));border:1px solid rgba(140,190,255,.16);border-radius:34px;box-shadow:inset 0 1px 0 rgba(200,230,255,.18),0 30px 80px rgba(0,0,0,.5)}
.skin5 .topbar{left:370px;right:370px;border-radius:40px}
.skin5 .left{top:auto;bottom:40px;left:40px;width:360px}
.skin5 .hotlist{display:none}
.skin5 .right{top:auto;bottom:40px;left:420px;right:auto;width:380px}
.skin5 .solutions{top:auto;bottom:40px;right:40px}
.skin5 .chart{bottom:40px}
.skin5 .bignum{font-size:96px}
.skin5 #caption{top:150px;bottom:auto}
.skin5 #capText{font-size:76px}
.skin5 #vignette{background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 45%,rgba(2,5,12,.85) 100%),linear-gradient(180deg,rgba(2,5,12,.8),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(2,5,12,.8))}
.skin5 .layer.on .ic{background:#3fb8ff;box-shadow:0 0 10px #3fb8ff}

/* ================= GRAPHIC (no glow) shared: skins 6–9 ================= */
.skin6 #vignette,.skin7 #vignette,.skin8 #vignette,.skin9 #vignette{display:none}
.skin6 .glow-hot::after,.skin6 .glow-cool::after,.skin7 .glow-hot::after,.skin7 .glow-cool::after,.skin8 .glow-hot::after,.skin8 .glow-cool::after,.skin9 .glow-hot::after,.skin9 .glow-cool::after{display:none}
.skin6 .glass,.skin7 .glass,.skin8 .glass,.skin9 .glass{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none!important}
.skin6 #capText,.skin7 #capText,.skin8 #capText,.skin9 #capText{text-shadow:none}
.skin6 .pulse,.skin7 .pulse,.skin8 .pulse,.skin9 .pulse,.skin6 .layer.on .ic,.skin7 .layer.on .ic,.skin8 .layer.on .ic,.skin9 .layer.on .ic{box-shadow:none}
.skin6 .bar-fill,.skin7 .bar-fill,.skin8 .bar-fill,.skin9 .bar-fill{box-shadow:none}
.skin6 .lbl .tag,.skin7 .lbl .tag,.skin8 .lbl .tag,.skin9 .lbl .tag{box-shadow:none!important}
.skin6 .pin,.skin7 .pin,.skin8 .pin,.skin9 .pin{box-shadow:none;border:3px solid currentColor}

/* ===== SKIN 6 · SWISS — paper, black blocks, red accent ===== */
.skin6{--ink:#111;--muted:#555;--dim:#8a8680;--line:rgba(0,0,0,.14);--heat:#ff4a1c;--cool:#0fb39a}
.skin6 .glass{background:#fff;border:0;border-radius:0}
.skin6 .topbar{background:#111;color:#fff;left:0;right:0;top:0;height:72px;border-radius:0;padding:0 40px}
.skin6 .topbar .brand .os,.skin6 .topbar .chip,.skin6 .topbar .clock{color:#aaa}
.skin6 .topbar .chip.on,.skin6 .lang .on{background:#ff4a1c;color:#fff;border-radius:0}
.skin6 .lang{background:none}
.skin6 .left{top:112px;left:40px;border-top:8px solid #111}
.skin6 .right{top:112px;background:#111;color:#fff;border-top:8px solid #ff4a1c}
.skin6 .right .bignum small,.skin6 .right .rc-row{color:#aaa}.skin6 .right .rc-row b{color:#fff}
.skin6 .right .rc-grid div{background:#222;border-radius:0}.skin6 .right .rc-grid b{color:#fff}
.skin6 .bignum{font-weight:700;letter-spacing:-.06em}
.skin6 .bar{border-radius:0;background:#333}.skin6 .bar-fill{border-radius:0;background:#ff4a1c}
.skin6 .layer,.skin6 .sol,.skin6 .rc-grid div{border-radius:0}
.skin6 .layer.on{background:#f1efeb}.skin6 .layer.on .ic{background:#ff4a1c;border-radius:0}
.skin6 .solutions{top:470px;border-top:8px solid #0fb39a}
.skin6 .sol{background:#f4f2ee;box-shadow:none}.skin6 .sol.on{background:#0fb39a;box-shadow:none}.skin6 .sol.on b,.skin6 .sol.on em,.skin6 .sol.on span,.skin6 .sol.on i{color:#fff}
.skin6 .sol .sw{border-radius:0;box-shadow:none}
.skin6 .sol-total b{font-weight:700}
.skin6 #caption{justify-content:flex-start;left:40px;bottom:40px}
.skin6 #capText{background:#111;color:#fff;padding:18px 30px 24px;font-size:72px;font-weight:700;text-align:left;max-width:1500px}
.skin6 #capText .accent,.skin6 #capText .cool{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ff4a1c}
.skin6 #capText .cool{color:#2ee6c5}
.skin6 .lbl .tag{background:#111;color:#fff;border:0;border-radius:0;font-weight:600}
.skin6 .lbl .tag b{color:#ff4a1c}.skin6 .lbl.cool .tag b{color:#2ee6c5}
.skin6 .lbl .stem{background:#111;width:2px}
.skin6 .pin{background:#ff4a1c;color:#111}

/* ===== SKIN 7 · INK — solid dark cards, hairline borders, flat orange ===== */
.skin7{--heat:#ff6a1f;--line:rgba(255,255,255,.1)}
.skin7 .glass{background:#141416;border:1px solid #26262a;border-radius:20px}
.skin7 .bignum{font-weight:300}
.skin7 .bar-fill{background:#ff6a1f}
.skin7 .rc-grid div,.skin7 .sol{background:#1b1b1e;box-shadow:none}
.skin7 .sol.on{background:#1b1b1e;box-shadow:inset 0 0 0 1.5px #2ee6c5}
.skin7 .sol .sw{box-shadow:none}.skin7 .sw.green{background:#2ee6c5}.skin7 .sw.light{background:#e8e8e8}.skin7 .sw.blue{background:#3a8bff}
.skin7 .right{border-top:4px solid #ff6a1f}.skin7 .solutions{border-top:4px solid #2ee6c5}
.skin7 #capText .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#ff6a1f}
.skin7 #capText .cool{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#2ee6c5}
.skin7 .lbl .tag{background:#141416;border-color:#2a2a2e}
.skin7 .pin{background:#ff6a1f;color:#0c0c0d}
.skin7 .brand svg rect{stroke:#ff6a1f}

/* ===== SKIN 8 · DUOTONE — navy + orange blocks ===== */
.skin8{--ink:#fff;--muted:#9fb0dc;--dim:#6f82b8;--line:rgba(255,255,255,.12);--heat:#ff7a3a;--cool:#8ff0ff}
.skin8 .glass{background:#13244f;border:0;border-radius:24px}
.skin8 .topbar{background:#0a1430}
.skin8 .right{background:#ff6a2b;color:#0e1a3a}
.skin8 .right .p-kicker,.skin8 .right .bignum small,.skin8 .right .rc-row,.skin8 .right .rc-grid span{color:rgba(14,26,58,.7)}
.skin8 .right .rc-row b,.skin8 .right .rc-grid b{color:#0e1a3a}
.skin8 .right .rc-grid div{background:rgba(14,26,58,.12)}
.skin8 .right .bar{background:rgba(14,26,58,.2)}.skin8 .right .bar-fill{background:#0e1a3a}
.skin8 .bignum{font-weight:600;letter-spacing:-.06em}
.skin8 .rc-grid div,.skin8 .sol{background:#1a2e60;box-shadow:none}
.skin8 .sol.on{background:#8ff0ff;box-shadow:none}.skin8 .sol.on b,.skin8 .sol.on em,.skin8 .sol.on span,.skin8 .sol.on i{color:#0e1a3a}
.skin8 .sol .sw{box-shadow:none}
.skin8 .layer.on{background:#1a2e60}.skin8 .layer.on .ic{background:#ff7a3a}
.skin8 #capText{font-weight:700}
.skin8 #capText .accent{background:#ff6a2b;-webkit-background-clip:border-box;background-clip:border-box;color:#0e1a3a;padding:0 .12em;margin:0 -.04em}
.skin8 #capText .cool{background:#8ff0ff;-webkit-background-clip:border-box;background-clip:border-box;color:#0e1a3a;padding:0 .12em;margin:0 -.04em}
.skin8 .lbl .tag{background:#ff6a2b;color:#0e1a3a;border:0;font-weight:600}.skin8 .lbl .tag b{color:#0e1a3a}
.skin8 .lbl.cool .tag{background:#8ff0ff}.skin8 .lbl.cool .tag b{color:#0e1a3a}
.skin8 .lbl .stem{background:#ff6a2b;width:2px}
.skin8 .pin{background:#fff;color:#ff6a2b}

/* ===== SKIN 9 · CONTOUR — black, hairlines, mono data ===== */
.skin9 .glass{background:#000;border:1px solid #fff;border-radius:0}
.skin9 .topbar{border:0;border-bottom:1px solid #fff;left:40px;right:40px}
.skin9 .bignum{font-family:'JetBrains Mono',monospace;font-weight:300;font-size:104px;letter-spacing:-.06em}
.skin9 .layer,.skin9 .sol,.skin9 .rc-grid div{border-radius:0;background:none!important;box-shadow:none!important;border-bottom:1px solid #333}
.skin9 .sol.on{border-bottom-color:#2ee6c5}
.skin9 .sol .sw{border-radius:50%;width:14px;height:14px;box-shadow:none}
.skin9 .bar{border-radius:0;height:2px}.skin9 .bar-fill{border-radius:0;background:#fff}
.skin9 .layer.on .ic{background:#fff}
.skin9 #capText .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;text-decoration:underline;text-decoration-color:#ff7a2b;text-decoration-thickness:6px;text-underline-offset:10px}
.skin9 #capText .cool{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;text-decoration:underline;text-decoration-color:#2ee6c5;text-decoration-thickness:6px;text-underline-offset:10px}
.skin9 .lbl .tag{background:#000;border:1px solid #fff;border-radius:0;font-family:'JetBrains Mono';font-size:13px}
.skin9 .pin{background:#000;color:#fff}
/* graphic caption blocks */
.skin7 #caption,.skin8 #caption,.skin9 #caption{justify-content:flex-start;left:40px;bottom:40px}
.skin7 #capText,.skin8 #capText,.skin9 #capText{text-align:left;font-size:72px;padding:18px 30px 24px;max-width:1500px}
.skin7 #capText{background:#0c0c0d;font-weight:600}
.skin8 #capText{background:#0e1a3a}
.skin9 #capText{background:#000;border:1px solid #fff}

/* ================= SOFT family (skins 11–15, body.soft) ================= */
.skin11,.skin15{--card:#2b313d;--s1:#ffd36a;--s2:#ff7f50;--c1:#6fd6c8;--c2:#5b8dff;--ink:#eef1f6;--muted:#8f98a8;--dim:#6b7383;--line:rgba(255,255,255,.07);--heat:#ff9a5a;--cool:#6fd6c8}
.skin12{--card:rgba(40,37,35,.72);--s1:#ffb37a;--s2:#ff6a3d;--c1:#9ad8e0;--c2:#9ad8e0;--ink:#f3efe9;--muted:#9c958d;--dim:#766f68;--line:rgba(255,255,255,.08);--heat:#ff6a3d;--cool:#9ad8e0}
.skin13{--card:rgba(248,250,252,.86);--s1:#ffcf8a;--s2:#ff8f7a;--c1:#4fb8ac;--c2:#6f9cff;--ink:#27303e;--muted:#667082;--dim:#8e97a6;--line:rgba(20,30,50,.08);--heat:#f07a66;--cool:#2fa597}
.skin14{--card:#252c3a;--s1:#b04fff;--s2:#ff4f9a;--c1:#4fd1ff;--c2:#6f7bff;--ink:#eef0f7;--muted:#8e96ab;--dim:#687088;--line:rgba(255,255,255,.07);--heat:#ff5aa0;--cool:#4fd1ff}

.soft #vignette{background:linear-gradient(180deg,rgba(20,24,32,.25),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 62%,rgba(20,24,32,.45))}
.skin13#x,.skin13 #vignette{background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 62%,rgba(230,235,242,.55))}
.soft .glass{background:var(--card);border:0;border-radius:4px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 18px 44px rgba(10,14,22,.22)}
.skin13 .glass{box-shadow:0 18px 44px rgba(40,50,70,.14)}
.soft .glow-hot,.soft .glow-cool{box-shadow:0 18px 44px rgba(10,14,22,.22)}
.soft .glow-hot::after,.soft .glow-cool::after{inset:auto 0 0 0;height:4px;padding:0;border-radius:0 0 4px 4px;-webkit-mask:none;mask:none}
.soft .glow-hot::after{background:linear-gradient(90deg,var(--s1),var(--s2))}
.soft .glow-cool::after{background:linear-gradient(90deg,var(--c1),var(--c2))}
.soft .topbar{background:none;box-shadow:none;border-radius:0;border-bottom:1px solid var(--line);left:60px;right:60px;padding:0}
.soft .chip.on,.soft .lang .on{background:none;box-shadow:none;color:var(--ink);border-bottom:2px solid var(--s2);border-radius:0}
.soft .lang{background:none}
.soft .pulse,.soft .layer.on .ic{box-shadow:none}
.soft .layer.on .ic{background:var(--s2)}
.soft .layer.on{background:none;box-shadow:none}
.soft .layer{border-radius:0;border-bottom:1px solid var(--line);margin:0}
.soft .bignum{font-weight:200}
.soft .bar{height:3px;border-radius:0}.soft .bar-fill{border-radius:0;background:linear-gradient(90deg,var(--s1),var(--s2));box-shadow:none}
.soft .rc-grid div,.soft .sol{background:rgba(255,255,255,.035);border-radius:3px;box-shadow:none}
.skin13 .rc-grid div,.skin13 .sol{background:rgba(20,30,50,.04)}
.soft .sol.on{background:rgba(255,255,255,.05);box-shadow:inset 3px 0 0 var(--c1)}
.skin13 .sol.on{background:rgba(20,30,50,.06)}
.soft .sol .sw{border-radius:50%;width:12px;height:12px;box-shadow:none}
.soft .sw.green{background:var(--c1)}.soft .sw.light{background:#dfe3ea}.soft .sw.blue{background:var(--c2)}
.soft .sol em{color:var(--cool)}
.soft .sol-total b{font-weight:200}
.soft .hot b{color:var(--heat)}
/* caption: index + thin line, left */
.soft #caption{justify-content:flex-start;left:80px;bottom:72px}
.soft #capText{display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:0;text-align:left;font-size:72px;font-weight:500;letter-spacing:-.03em;text-shadow:0 2px 24px rgba(10,14,22,.25);max-width:1500px}
.soft #capText::before{content:attr(data-idx);font-size:72px;font-weight:200;color:var(--muted);margin-right:34px;padding-top:14px;border-top:4px solid;border-image:linear-gradient(90deg,var(--s1),var(--s2)) 1;letter-spacing:-.02em}
.soft #capText .w{margin-right:.24em}
.soft #capText .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--heat)}
.soft #capText .cool{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--cool)}
.skin13 #capText{text-shadow:none}
/* callouts */
#callouts{position:absolute;inset:0;pointer-events:none}
#coSvg{position:absolute;inset:0}
.co-ln{stroke:rgba(255,255,255,.75);stroke-width:1.5}
.co-ln.key{stroke:var(--s2);stroke-width:2}
.skin13 .co-ln{stroke:rgba(39,48,62,.55)}
.co{position:absolute;padding-left:18px;white-space:nowrap;color:var(--ink)}
.co-big{font-size:56px;font-weight:200;letter-spacing:-.03em;line-height:1}
.co-big small{font-size:20px;color:var(--muted);margin-left:8px;font-weight:400;letter-spacing:0}
.co.key .co-big{color:var(--ink)}
.co-lbl{font-size:17px;font-weight:600;margin-top:14px}
.co-sub{font-size:13px;color:var(--muted);margin-top:4px;font-weight:400}
.co.key .co-lbl::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--s2);margin-right:8px;vertical-align:middle}
/* skin12 dusk: cards dissolve, pill chips */
.skin12 .glass{box-shadow:none}
.skin12 .left{background:none}
.skin12 .chip.on{border:1.5px solid var(--s2);border-radius:20px;padding:6px 16px}
/* skin15 board: cards live in 3D */
.skin15 .board-wrap{width:420px}
.skin15 .board-wrap .panel{position:relative;left:auto;right:auto;top:auto}
.skin15 .glass{background:rgba(43,49,61,.92)}
.co-ln{fill:none}
.soft #capText{display:block}
.soft #capText::before{display:inline-block;vertical-align:bottom;margin-bottom:6px}
.soft #capText .w{margin-right:0}
.skin15 .topbar.glass{background:none}
/* soft: chart + eco in palette */
.cnode{fill:#fff;stroke-width:2.5}
.cnode.lineBefore{stroke:#ff6a2b}.cnode.lineAfter{stroke:#2ee6c5}
.soft #lineBefore{stroke:var(--heat)}.soft #lineAfter{stroke:var(--cool)}
.soft .cnode{fill:var(--card)}.soft .cnode.lineBefore{stroke:var(--heat)}.soft .cnode.lineAfter{stroke:var(--cool)}
.soft .eco-l{stroke:var(--s2)}
.soft .eco-n circle{fill:var(--card);stroke:rgba(255,255,255,.18)}
.soft .eco-c circle{fill:rgba(255,90,160,.08);stroke:var(--s2)}
.soft .eco-c text:last-child{fill:var(--s2)}
.soft #endcard{background:radial-gradient(ellipse at center,rgba(30,36,48,.55),rgba(24,29,40,.96))}
.soft .end-line{font-weight:400}
.soft #endcard .end-brand svg{filter:none}
.soft #capText::before{opacity:var(--idxA,0)}
/* demo mode */
body.demo #disclaimer{left:50%;right:auto;top:112px;bottom:auto;transform:translateX(-50%);font-size:13px;letter-spacing:.22em;color:#ff8ab8;background:rgba(255,90,160,.08);border:1px solid rgba(255,90,160,.35);padding:8px 16px;border-radius:30px}
body.demo #demoHint{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);font:500 15px Inter,sans-serif;color:var(--muted);letter-spacing:.02em}
body.demo .layer:hover,body.demo .sol:hover,body.demo .hot:hover,body.demo .chip:hover{background:rgba(255,255,255,.05)}
body.demo #gl{cursor:grab}
body.demo .layer:not(.on) span:nth-child(2){text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
body.clean #caption,body.clean #disclaimer{display:none!important}