:root{

  --c-void:#04070E; --c-bg:#060B16; --c-elev:#0A1220; --c-surf:#101A2E;

  --c-line:rgba(120,190,235,.17); --c-line-2:rgba(120,190,235,.32);

  --c-ink:#EAF2FC; --c-ink-2:#B4C7DE; --c-ink-3:#8097B1;

  --c-cyan:#00E5FF; --c-mint:#2BE8B0; --c-red:#FF3D70;
  --c-violet:#9B7CFF; --c-gold:#FFB020; --c-blue:#4D9FFF; --c-orange:#FF8C42;
  --c-cyan-s:rgba(0,229,255,.13); --c-mint-s:rgba(43,232,176,.13);
  --c-red-s:rgba(255,61,112,.13); --c-violet-s:rgba(155,124,255,.14);
  --c-gold-s:rgba(255,176,32,.13);

  --c-glow:0 0 34px rgba(0,229,255,.22);
  --c-shadow:0 26px 64px rgba(0,0,0,.66);
  --c-shadow-sm:0 10px 26px rgba(0,0,0,.34);
  --c-grid-c:rgba(130,195,245,.055);
  --c-scan:rgba(190,230,255,.020);

  --f-brand:'Orbitron','Space Grotesk',system-ui,sans-serif;
  --f-disp:'Space Grotesk','IBM Plex Sans Thai',system-ui,sans-serif;
  --f-body:'IBM Plex Sans Thai','Space Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;

  --c-cut:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);
  --c-cut-lg:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  --c-r:3px; --c-ease:cubic-bezier(.22,.68,.32,1);
  --c-raise:rgba(190,225,255,.07);
  --c-edge:rgba(190,225,255,.14);
  --c-on-accent:#04121A;

  --c-cyan-t:#7DD3FC; --c-mint-t:#6EE7C4; --c-red-t:#FF8CA6;
  --c-violet-t:#C4B0FF; --c-gold-t:#FDE047;

  --c-scrim:linear-gradient(180deg,rgba(6,11,22,.55) 0%,rgba(6,11,22,.90) 100%);
}

html[data-theme="light"]{
  --c-void:#C9D6E8; --c-bg:#EDF2F9; --c-elev:#FFFFFF; --c-surf:#FFFFFF;
  --c-line:rgba(16,48,90,.17); --c-line-2:rgba(16,48,90,.30);
  --c-ink:#08121F; --c-ink-2:#334A69; --c-ink-3:#4F6480;
  --c-cyan:#006E93; --c-mint:#00704F; --c-red:#C6154A;
  --c-violet:#5231D2; --c-gold:#8A5000; --c-blue:#0B5FBF; --c-orange:#B04300;
  --c-cyan-s:rgba(0,110,147,.10); --c-mint-s:rgba(0,112,79,.10);
  --c-red-s:rgba(198,21,74,.09); --c-violet-s:rgba(82,49,210,.09);
  --c-gold-s:rgba(138,80,0,.11);
  --c-glow:0 0 0 1px rgba(0,110,147,.20);
  --c-shadow:0 20px 48px rgba(15,40,80,.14);
  --c-shadow-sm:0 8px 20px rgba(15,40,80,.08);
  --c-grid-c:rgba(16,60,120,.07);
  --c-scan:rgba(20,50,90,.014);
  --c-raise:rgba(10,30,60,.05);
  --c-edge:rgba(16,48,90,.16);
  --c-on-accent:#FFFFFF;

  --c-cyan-t:#005068; --c-mint-t:#005C41; --c-red-t:#A8113E;
  --c-violet-t:#3F27A6; --c-gold-t:#6B3D00;
  --c-scrim:linear-gradient(180deg,rgba(237,242,249,.87) 0%,rgba(237,242,249,.96) 100%);
  color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark}

html[data-theme="light"] .cx-glow{
  background:
    radial-gradient(1100px 620px at 86% -10%,rgba(0,110,147,.10),transparent 66%),
    radial-gradient(900px 540px at -4% 6%,rgba(82,49,210,.09),transparent 64%),
    radial-gradient(760px 460px at 50% 104%,rgba(0,112,79,.07),transparent 70%);
}
html[data-theme="light"] .cx-beam{display:none}
html[data-theme="light"] .cx-vig{box-shadow:inset 0 0 160px rgba(20,45,80,.10), inset 0 1px 0 rgba(0,110,147,.22)}
html[data-theme="light"] .cx-card{
  background:
    linear-gradient(90deg,var(--c-cyan),var(--c-violet)) top left/100% 1px no-repeat,
    linear-gradient(158deg,rgba(0,110,147,.045),rgba(255,255,255,.92));
}

.cx-theme{
  display:inline-flex;flex:none;align-items:stretch;
  border:1px solid var(--c-line-2);border-radius:2px;overflow:hidden;
  background:var(--c-elev);
}
.cx-theme button{
  -webkit-appearance:none;appearance:none;background:transparent;border:0;margin:0;
  cursor:pointer;color:var(--c-ink-3);font:inherit;line-height:0;
  padding:6px 9px;min-width:34px;min-height:30px;display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.cx-theme button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.cx-theme button:hover{color:var(--c-ink)}
.cx-theme button[aria-pressed="true"]{background:var(--c-cyan);color:var(--c-on-accent)}
.cx-theme button:focus-visible{outline:2px solid var(--c-cyan);outline-offset:-2px}
.cx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.cx-theme button{transition:none}}

.cx-glow,.cx-grid,.cx-beam,.cx-vig{position:fixed;pointer-events:none}
.cx-glow{
  inset:0; z-index:-3;
  background:
    radial-gradient(1100px 620px at 86% -10%,rgba(0,229,255,.16),transparent 66%),
    radial-gradient(900px 540px at -4% 6%,rgba(155,124,255,.18),transparent 64%),
    radial-gradient(760px 460px at 50% 104%,rgba(43,232,176,.10),transparent 70%);
}
.cx-glow.solid{background-color:var(--c-bg)}
.cx-grid{
  inset:-1px; z-index:-2;
  background:
    linear-gradient(var(--c-grid-c) 1px,transparent 1px),
    linear-gradient(90deg,var(--c-grid-c) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(135% 105% at 50% 0%,#000 28%,transparent 88%);
          mask-image:radial-gradient(135% 105% at 50% 0%,#000 28%,transparent 88%);
}
.cx-grid::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,var(--c-scan) 0 1px,transparent 1px 3px);
}
.cx-beam{
  left:0; right:0; top:0; height:34vh; z-index:-2; will-change:transform;
  background:linear-gradient(180deg,transparent,rgba(0,229,255,.05) 52%,rgba(0,229,255,.095) 74%,transparent);
  animation:cx-sweep 16s linear infinite;
}
@keyframes cx-sweep{from{transform:translate3d(0,-36vh,0)}to{transform:translate3d(0,102vh,0)}}
.cx-vig{
  inset:0; z-index:-1;
  box-shadow:inset 0 0 180px rgba(0,0,0,.52), inset 0 1px 0 rgba(0,229,255,.24);
}

.cx-card{
  position:relative;
  clip-path:var(--c-cut);
  background:
    linear-gradient(90deg,var(--c-cyan),var(--c-violet)) top left/100% 1px no-repeat,
    linear-gradient(158deg,rgba(0,229,255,.055),rgba(6,11,22,.74));
  border-left:2px solid var(--c-cyan);
  box-shadow:var(--c-shadow-sm);
  transition:transform .26s var(--c-ease),box-shadow .26s var(--c-ease);
}
.cx-card:hover{transform:translateY(-3px);box-shadow:var(--c-shadow-sm),0 0 30px rgba(0,229,255,.22)}

.cx-tag{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--c-cyan);
  border:1px solid rgba(0,229,255,.42); background:var(--c-cyan-s);
  padding:.12rem .42rem; border-radius:2px;
}

@keyframes cx-flow{from{background-position:0% 0}to{background-position:300% 0}}
.cx-rail{
  background:linear-gradient(90deg,var(--c-cyan),var(--c-violet),var(--c-red),var(--c-violet),var(--c-cyan));
  background-size:300% 100%;
  animation:cx-flow 9s linear infinite;
}

.cx-glitch{position:relative;display:inline-block}
.cx-glitch::before,.cx-glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  opacity:0; pointer-events:none; transition:opacity .12s linear;
}
.cx-glitch::before{color:var(--c-red); transform:translateX(-2px)}
.cx-glitch::after {color:var(--c-cyan);transform:translateX(2px)}
.cx-glitch:hover::before,.cx-glitch:focus-visible::before{opacity:.8;animation:cx-g1 .5s steps(2,end) infinite}
.cx-glitch:hover::after, .cx-glitch:focus-visible::after {opacity:.8;animation:cx-g2 .5s steps(2,end) infinite}
@keyframes cx-g1{0%{clip-path:inset(4% 0 72% 0)}50%{clip-path:inset(58% 0 22% 0)}100%{clip-path:inset(28% 0 48% 0)}}
@keyframes cx-g2{0%{clip-path:inset(66% 0 12% 0)}50%{clip-path:inset(16% 0 64% 0)}100%{clip-path:inset(44% 0 34% 0)}}

@media (prefers-reduced-motion:reduce){
  .cx-beam{display:none}
  .cx-rail{animation:none}
  .cx-glitch::before,.cx-glitch::after{display:none}
  .cx-card{transition:none}
  .cx-card:hover{transform:none}
}
@media (prefers-contrast:more){
  :root{--c-line:rgba(170,215,250,.45);--c-ink-3:#A8BCD2;--c-scan:transparent}
}
@media print{
  .cx-glow,.cx-grid,.cx-beam,.cx-vig{display:none!important}
}

.cx-btn{
  --b:var(--c-cyan);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; vertical-align:middle;
  font-family:var(--f-disp); font-size:.88rem; font-weight:600; letter-spacing:.03em;
  line-height:1.3; text-decoration:none; text-align:center; white-space:nowrap;
  padding:.68rem 1.25rem; min-height:44px;
  color:var(--b); cursor:pointer;
  border:1px solid color-mix(in srgb,var(--b) 62%,transparent);
  border-radius:0; clip-path:var(--c-cut);
  background:
    linear-gradient(158deg, color-mix(in srgb,var(--b) 13%,transparent), rgba(6,11,22,.68));
  transition:transform .2s var(--c-ease), box-shadow .2s var(--c-ease),
             border-color .2s var(--c-ease), color .2s var(--c-ease);
  overflow:hidden;
}
html[data-theme="light"] .cx-btn{
  background:linear-gradient(158deg, color-mix(in srgb,var(--b) 10%,transparent), rgba(255,255,255,.88));
}
.cx-btn:hover{
  transform:translateY(-2px);
  border-color:var(--b);
  box-shadow:0 0 26px color-mix(in srgb,var(--b) 32%,transparent);
}
.cx-btn:active{transform:translateY(0)}
.cx-btn:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.cx-btn[disabled],.cx-btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
}

.cx-btn--solid{
  background:var(--b); color:var(--c-on-accent);
  border-color:var(--b); font-weight:700;
}
html[data-theme="light"] .cx-btn--solid{background:var(--b);color:#fff}

.cx-btn--solid{
  background-image:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  background-size:280% 100%; background-position:120% 0; background-repeat:no-repeat;
  transition:transform .2s var(--c-ease), box-shadow .2s var(--c-ease),
             background-position .55s var(--c-ease);
}
.cx-btn--solid:hover{background-position:-40% 0}

.cx-btn--ghost{
  background:transparent; border-color:var(--c-line-2); color:var(--c-ink-2);
}
.cx-btn--ghost:hover{color:var(--c-ink);border-color:var(--c-ink-3)}

.cx-btn--sm{font-size:.78rem;padding:.42rem .8rem;min-height:34px}

.cx-btn--mint{--b:var(--c-mint)}
.cx-btn--red{--b:var(--c-red)}
.cx-btn--violet{--b:var(--c-violet)}
.cx-btn--gold{--b:var(--c-gold)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-cyan);
  outline-offset:2px;
  border-radius:1px;
}

:where(::selection){background:var(--c-cyan);color:var(--c-on-accent)}

:where(html){scrollbar-color:var(--c-cyan) var(--c-elev);scrollbar-width:thin}
:where(::-webkit-scrollbar){width:10px;height:10px}
:where(::-webkit-scrollbar-track){background:var(--c-elev)}
:where(::-webkit-scrollbar-thumb){
  background:color-mix(in srgb,var(--c-cyan) 70%,transparent);
  border-radius:0;
}
:where(::-webkit-scrollbar-thumb:hover){background:var(--c-cyan)}

:where(html){scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){:where(html){scroll-behavior:auto}}

:where(img,svg,video){max-width:100%}

.cx-sheen{position:relative;overflow:hidden}
.cx-sheen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(0,229,255,.10) 50%,transparent 58%);
  background-size:260% 100%;background-position:130% 0;background-repeat:no-repeat;
  transition:background-position .6s var(--c-ease);
}
.cx-sheen:hover::after{background-position:-50% 0}

.cx-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--c-mint);box-shadow:0 0 8px var(--c-mint);
  animation:cx-pulse 2.4s ease-in-out infinite;
}
@keyframes cx-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.cx-rule{
  height:1px;border:0;margin:1.6rem 0;
  background:linear-gradient(90deg,transparent,var(--c-line-2) 18%,var(--c-line-2) 82%,transparent);
}

@media (prefers-reduced-motion:reduce){
  .cx-btn,.cx-btn--solid{transition:none}
  .cx-btn:hover{transform:none}
  .cx-btn--solid:hover{background-position:120% 0}
  .cx-sheen::after{display:none}
  .cx-dot{animation:none}
}

.cx-loading{
  padding:2.5rem 1rem;text-align:center;color:var(--c-ink-3);
  font-family:var(--f-mono);font-size:.85rem;letter-spacing:.04em;
}
.cx-loading::after{content:'';display:inline-block;width:1.1em;text-align:left;animation:cx-dots 1.2s steps(4) infinite}
@keyframes cx-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.cx-loadfail{
  margin:1.5rem auto;max-width:46rem;padding:1.1rem 1.25rem;
  clip-path:var(--c-cut);border-left:3px solid var(--c-red);
  background:linear-gradient(158deg,rgba(255,61,112,.10),rgba(6,11,22,.6));
}
html[data-theme="light"] .cx-loadfail{background:linear-gradient(158deg,rgba(198,21,74,.08),rgba(255,255,255,.9))}
.cx-loadfail strong{display:block;color:var(--c-red);font-family:var(--f-disp);margin-bottom:.35rem}
.cx-loadfail p{color:var(--c-ink-2);font-size:.88rem;margin:.3rem 0}
.cx-loadfail-why{font-family:var(--f-mono);font-size:.74rem;color:var(--c-ink-3);overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.cx-loading::after{animation:none;content:'...'}}

@property --cx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}

.cx-edge{position:relative;isolation:isolate}
.cx-edge::before{
  content:'';position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  border-radius:inherit;clip-path:inherit;
  background:conic-gradient(from var(--cx-ang),
    transparent 0deg, var(--c-cyan) 42deg, var(--c-violet) 76deg,
    transparent 120deg, transparent 240deg, var(--c-mint) 292deg, transparent 340deg);

  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.8;
}
.cx-edge:hover::before{opacity:1}
@keyframes cx-spin{to{--cx-ang:360deg}}

.cx-lamp{position:relative;overflow:hidden}
.cx-lamp::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--c-cyan) 16%,transparent), transparent 62%);
  opacity:0;transition:opacity .28s var(--c-ease);
}
.cx-lamp:hover::before{opacity:1}

.cx-reveal{opacity:0;transform:translateY(16px)}
.cx-reveal.cx-in{
  opacity:1;transform:none;
  transition:opacity .62s var(--c-ease), transform .62s var(--c-ease);
  transition-delay:var(--cx-d,0ms);
}

html:not(.cx-js) .cx-reveal{opacity:1;transform:none}

.cx-scramble{font-variant-ligatures:none}

.cx-theme{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;flex:none;
  padding:0;border:0;background:none;cursor:pointer;
  line-height:0;
}
.cx-theme-track{
  position:relative;display:block;
  width:58px;height:30px;border-radius:999px;
  border:1px solid var(--c-line-2);
  background:linear-gradient(145deg,rgba(0,229,255,.10),rgba(6,11,22,.86));
  transition:border-color .3s var(--c-ease), background .3s var(--c-ease);
  overflow:hidden;
}
html[data-theme="light"] .cx-theme-track{
  background:linear-gradient(145deg,rgba(0,110,147,.12),rgba(255,255,255,.9));
}

.cx-theme-thumb{
  position:absolute;top:50%;left:3px;width:22px;height:22px;
  margin-top:-11px;border-radius:50%;
  background:linear-gradient(145deg,var(--c-cyan),var(--c-violet));
  box-shadow:0 0 14px color-mix(in srgb,var(--c-cyan) 65%,transparent);
  transition:transform .42s cubic-bezier(.34,1.56,.64,1), background .3s var(--c-ease);
}
.cx-theme[aria-checked="true"] .cx-theme-thumb{
  transform:translateX(28px);
  background:linear-gradient(145deg,var(--c-gold),var(--c-red));
  box-shadow:0 0 14px color-mix(in srgb,var(--c-gold) 65%,transparent);
}

.cx-theme-ico{
  position:absolute;top:50%;margin-top:-7px;width:14px;height:14px;
  display:block;pointer-events:none;
  transition:opacity .3s var(--c-ease), transform .42s var(--c-ease);
}
.cx-theme-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.cx-theme-moon{right:7px;color:var(--c-ink-2);opacity:1}
.cx-theme-sun{left:7px;color:var(--c-gold);opacity:0;transform:rotate(-90deg) scale(.6)}
.cx-theme[aria-checked="true"] .cx-theme-moon{opacity:0;transform:rotate(90deg) scale(.6)}
.cx-theme[aria-checked="true"] .cx-theme-sun{opacity:1;transform:none}
.cx-theme:hover .cx-theme-track{border-color:var(--c-cyan)}
.cx-theme:focus-visible{outline:none}
.cx-theme:focus-visible .cx-theme-track{outline:2px solid var(--c-cyan);outline-offset:3px}
.cx-theme:active .cx-theme-thumb{width:26px;border-radius:999px}

@media (prefers-reduced-motion:reduce){
  .cx-edge::before{animation:none;opacity:.7}
  .cx-lamp::before{transition:none}
  .cx-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .cx-theme-thumb,.cx-theme-ico,.cx-theme-track{transition:none}
}