:root{
    --nx20-carbon:#101116;
    --nx20-graphite:#171820;
    --nx20-graphite-2:#21222B;
    --nx20-purple:#6F4BFF;
    --nx20-purple-strong:#5638DB;
    --nx20-purple-soft:#E9E4FF;
    --nx20-porcelain:#F4F3EF;
    --nx20-porcelain-2:#FAFAF8;
    --nx20-paper:#FFFFFF;
    --nx20-titanium:#A9ABB4;
    --nx20-titanium-soft:#D8D9DE;
    --nx20-ink:#1C1D24;
    --nx20-muted:#777983;
    --nx20-line:#DDDEE3;
    --nx20-danger:#B5535D;
    --nx20-warning:#A97035;
    --nx20-success:#477E68;
    /* compatibility aliases while UI20 is rolled out page-by-page */
    --nx20-obsidian:var(--nx20-carbon);
    --nx20-obsidian-2:var(--nx20-graphite);
    --nx20-obsidian-3:var(--nx20-graphite-2);
    --nx20-jade:var(--nx20-purple);
    --nx20-jade-strong:var(--nx20-purple-strong);
    --nx20-jade-soft:var(--nx20-purple-soft);
    --nx20-ivory:var(--nx20-porcelain);
    --nx20-ivory-2:var(--nx20-porcelain-2);
    --nx20-copper:var(--nx20-titanium);
    --nx20-copper-soft:var(--nx20-titanium-soft);
    --nx20-radius-xs:10px;
    --nx20-radius-sm:14px;
    --nx20-radius-md:18px;
    --nx20-radius-lg:24px;
    --nx20-radius-xl:32px;
    --nx20-control-h:54px;
    --nx20-ease:cubic-bezier(.22,1,.36,1);
    --nx20-font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --nx20-shadow-soft:0 18px 60px rgba(16,17,22,.10);
    --nx20-shadow-strong:0 32px 90px rgba(5,5,8,.28);
}
*{box-sizing:border-box}
html,body{min-width:320px;min-height:100%;margin:0}
html{background:var(--nx20-carbon)}
body{font-family:var(--nx20-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
::selection{background:rgba(111,75,255,.18);color:var(--nx20-ink)}

.nx20-brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.nx20-brandmark{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:linear-gradient(180deg,#1D1E26,#111218);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),0 14px 30px rgba(0,0,0,.18)}
.nx20-brandmark span{font-size:1rem;font-weight:900;letter-spacing:-.07em;transform:translateX(-3px)}
.nx20-brandmark b{position:absolute;right:6px;bottom:5px;color:#A797FF;font-size:.48rem;font-weight:900;letter-spacing:-.04em}
.nx20-brandcopy{display:grid;gap:2px;min-width:0}
.nx20-brandcopy strong{font-size:.86rem;font-weight:900;letter-spacing:.08em;line-height:1;color:var(--nx20-ink);white-space:nowrap}
.nx20-brandcopy small{color:var(--nx20-muted);font-size:.58rem;font-weight:700;letter-spacing:.035em;white-space:nowrap}
.nx20-brand--inverse .nx20-brandmark{background:rgba(255,255,255,.065);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 14px 34px rgba(0,0,0,.16)}
.nx20-brand--inverse .nx20-brandcopy strong{color:#fff}
.nx20-brand--inverse .nx20-brandcopy small{color:rgba(255,255,255,.46)}

/* v2.0.2 — N20 mark polish */
.nx20-brandmark{
    isolation:isolate;
    overflow:visible;
    width:46px;
    height:46px;
    flex-basis:46px;
    border-radius:15px;
    background:
        radial-gradient(circle at 28% 18%,rgba(255,255,255,.11),transparent 34%),
        linear-gradient(145deg,#242632 0%,#15161D 54%,#0D0E13 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 15px 34px rgba(0,0,0,.23);
}
.nx20-brandmark:before,.nx20-brandmark:after{content:"";position:absolute;pointer-events:none}
.nx20-brandmark:before{inset:6px;border:1px solid rgba(166,145,255,.15);border-radius:11px;transform:rotate(-2deg)}
.nx20-brandmark:after{left:12px;top:11px;width:21px;height:23px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(209,204,255,.76));clip-path:polygon(0 0,30% 0,70% 63%,70% 0,100% 0,100% 100%,69% 100%,30% 38%,30% 100%,0 100%);filter:drop-shadow(0 0 10px rgba(122,91,255,.16));opacity:.98}
.nx20-brandmark>span{position:relative;z-index:2;color:transparent;font-size:0;transform:none}
.nx20-brandmark>b{z-index:3;right:-5px;bottom:-5px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:8px;background:linear-gradient(145deg,#8D71FF,#6047D9);box-shadow:0 7px 16px rgba(83,57,190,.34),inset 0 0 0 1px rgba(255,255,255,.15);color:#fff;font-size:.48rem;font-weight:950;letter-spacing:-.04em}
.nx20-brand--inverse .nx20-brandmark{background:radial-gradient(circle at 28% 18%,rgba(255,255,255,.12),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 14px 34px rgba(0,0,0,.22)}
.nx20-brand--inverse .nx20-brandmark:before{border-color:rgba(189,175,255,.18)}
.nx20-brand--inverse .nx20-brandmark:after{background:linear-gradient(135deg,#FFFFFF,#D9D2FF)}
