:root {
       --bg: #060606;
       --surface1: #0d0d0e;
       --surface2: #101012;
       --surface3: #0a0a0b;

       --text: #e9e6da;
       --muted: rgba(233, 230, 218, 0.74);
       --stroke: rgba(233, 230, 218, 0.14);
       --stroke2: rgba(233, 230, 218, 0.08);

       --accent: #39c6ff;
       --accent2: #7fe2ff;
       --ok: #2ed3a1;
       --warn: #f6c177;

       --shadow: 0 18px 54px rgba(0, 0, 0, 0.46);
       --radius: 16px;
       --radius2: 12px;

       --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
       --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

       --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1);
   }

   * {
       box-sizing: border-box;
   }

   html,
   body {
       height: 100%;
   }

   body {
       margin: 0;
       background: var(--bg);
       color: var(--text);
       font-family: var(--sans);
       overflow-x: hidden;
   }

   a {
       color: inherit;
       text-decoration: none;
   }

   a:hover {
       opacity: 0.96;
   }

   body::after {
       content: "";
       position: fixed;
       inset: 0;
       z-index: 0;
       pointer-events: none;
       box-shadow:
           inset 0 0 0 1px rgba(233, 230, 218, 0.03),
           inset 0 0 160px rgba(0, 0, 0, 0.60);
   }

   :focus-visible {
       outline: 2px solid rgba(57, 198, 255, 0.65);
       outline-offset: 3px;
       border-radius: 10px;
   }

   .route {
       position: fixed;
       inset: 0 auto auto 0;
       width: 1px;
       height: 1px;
       opacity: 0;
       pointer-events: none;
   }

   .authPage {
       position: relative;
       z-index: 1;
       min-height: 100vh;
       display: grid;
       place-items: center;
       padding: 28px 18px;
   }

   .authShell {
       width: min(980px, 100%);
       display: grid;
       grid-template-columns: 1fr;
       gap: 16px;
       align-items: start;
   }

   .topbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
   }

   .brand {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       min-width: 180px;
   }

   .brand img {
       width: 34px;
       height: 34px;
       border-radius: 10px;
       border: 1px solid var(--stroke);
       background: var(--surface1);
   }

   .brand span {
       font-weight: 850;
       letter-spacing: 0.2px;
       font-size: 22px;
   }

   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       padding: 10px 14px;
       border-radius: 999px;
       border: 1px solid var(--stroke2);
       background: var(--surface1);
       color: var(--text);
       font-weight: 800;
       font-size: 13px;
       letter-spacing: 0.15px;
       line-height: 1;
       transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
       user-select: none;
   }

   .btn:hover {
       transform: translateY(-1px);
       border-color: var(--stroke);
       background: var(--surface2);
   }

   .btn:active {
       transform: translateY(0);
   }

   .btn.primary {
       border-color: rgba(57, 198, 255, 0.48);
       background: rgba(57, 198, 255, 0.10);
   }

   .btn.primary:hover {
       border-color: rgba(57, 198, 255, 0.72);
       background: rgba(57, 198, 255, 0.14);
   }

   .authGrid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 16px;
       align-items: stretch;
   }

   .heroPanel {
       border: 1px solid var(--stroke2);
       border-radius: calc(var(--radius) + 6px);
       background: radial-gradient(1200px 520px at 24% 10%, rgba(0, 0, 0, 0.16), transparent 55%), radial-gradient(900px 440px at 84% 70%, rgba(31, 53, 59, 0.1), transparent 58%), linear-gradient(180deg, rgba(16, 16, 18, 0.70), rgba(13, 13, 14, 0.70));
       box-shadow: 0 18px 54px rgba(0, 0, 0, 0.30);
       overflow: hidden;
       position: relative;
       padding: 22px;
       display: flex;
       flex-direction: column;
       gap: 14px;
   }

   .heroPanel::after {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       border-top: 1px solid rgba(233, 230, 218, 0.05);
       opacity: 0.8;
   }

   .kicker {
       margin: 2px 0 0;
       color: rgba(233, 230, 218, 0.75);
       letter-spacing: 0.22em;
       text-transform: uppercase;
       font-size: 12px;
   }

   .heroPanel h1 {
       margin: 0;
       font-size: clamp(24px, 2.6vw, 34px);
       line-height: 1.1;
       letter-spacing: 0.06px;
   }

   .heroPanel p {
       margin: 0;
       color: rgba(233, 230, 218, 0.74);
       line-height: 1.65;
       font-size: 14px;
       max-width: 58ch;
   }

   .heroCopy {
       margin: 0;
       color: rgba(233, 230, 218, 0.74);
       line-height: 1.65;
       font-size: 14px;
       max-width: 60ch;
   }

   .heroPoints {
       margin-top: auto;
       display: grid;
       gap: 10px;
   }

   .heroPoint {
       border-radius: 14px;
       border: 1px solid var(--stroke2);
       background: rgba(10, 10, 11, 0.55);
       padding: 12px 12px;
       display: grid;
       gap: 4px;
   }

   .heroPoint strong {
       font-size: 13px;
       letter-spacing: 0.08px;
       color: rgba(233, 230, 218, 0.94);
   }

   .heroPoint span {
       font-size: 13px;
       line-height: 1.55;
       color: rgba(233, 230, 218, 0.72);
   }

   .MuiPaperRoot.MuiCardRoot.loginboxFeRoot1l6jey6 {
       border: 1px solid var(--stroke2);
       border-radius: calc(var(--radius) + 6px);
       background: rgba(13, 13, 14, 0.82);
       box-shadow: var(--shadow);
       overflow: hidden;
       position: relative;
   }

   .MuiPaperRoot.MuiCardRoot.loginboxFeRoot1l6jey6::before {
       content: "";
       position: absolute;
       inset: -1px;
       background: radial-gradient(800px 360px at 24% -10%, rgba(57, 198, 255, 0.11), transparent 55%), radial-gradient(820px 420px at 90% 120%, rgba(127, 226, 255, 0.06), transparent 60%);
       pointer-events: none;
       opacity: 0.95;
   }

   .MuiPaperRoot.MuiCardRoot.loginboxFeRoot1l6jey6::after {
       content: "";
       position: absolute;
       inset: 0;
       border-top: 1px solid rgba(233, 230, 218, 0.05);
       pointer-events: none;
       opacity: 0.8;
   }

   .authCardInner {
       position: relative;
       z-index: 1;
       padding: 22px;
       display: grid;
       gap: 14px;
   }

   .loginboxFeRoot1kwa1lw {
       display: flex;
       justify-content: center;
       margin-bottom: 2px;
   }

   .MuiCompanyLogoImg {
       width: 160px;
       height: auto;
       display: block;
       filter: saturate(0.96) contrast(1.05);
   }

   .feTitle {
       font-weight: 850;
       letter-spacing: 0.08px;
       font-size: 22px;
       line-height: 1.15;
       text-align: center;
   }

   .subline {
       margin: -6px 0 0;
       color: rgba(233, 230, 218, 0.76);
       font-size: 13px;
       line-height: 1.6;
       text-align: center;
       margin-bottom: 10px;
   }

   .subline a {
       color: rgba(57, 198, 255, 0.94);
       text-decoration: underline;
       text-underline-offset: 3px;
   }

   .field {
       display: grid;
       gap: 8px;
   }

   label {
       display: flex;
       align-items: baseline;
       justify-content: space-between;
       gap: 12px;
       font-size: 12px;
       letter-spacing: 0.16em;
       text-transform: uppercase;
       color: rgba(233, 230, 218, 0.78);
   }

   label a {
       font-family: var(--sans);
       font-size: 12px;
       letter-spacing: 0.08em;
       text-transform: none;
       color: rgba(57, 198, 255, 0.92);
       opacity: 0.92;
       text-decoration: underline;
       text-underline-offset: 3px;
   }

   .input {
       width: 100%;
       padding: 12px 12px;
       border-radius: 14px;
       border: 1px solid rgba(233, 230, 218, 0.14);
       background: rgba(10, 10, 11, 0.72);
       color: rgba(233, 230, 218, 0.96);
       font-family: var(--sans);
       font-size: 14px;
       line-height: 1.2;
       transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
   }

   .input::placeholder {
       color: rgba(233, 230, 218, 0.46);
   }

   .input:focus {
       outline: none;
       border-color: rgba(57, 198, 255, 0.45);
       background: rgba(16, 16, 18, 0.60);
   }

   .primaryBtn {
       width: 100%;
       padding: 12px 14px;
       border-radius: 14px;
       border: 1px solid rgba(160, 154, 154, 0.59);
       background: rgb(10, 10, 11);
       color: rgba(233, 230, 218, 0.96);
       font-weight: 850;
       letter-spacing: 0.10px;
       font-size: 14px;
       cursor: pointer;
       transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out);
   }

   .primaryBtn:hover {
       background: rgba(52, 55, 56, 0.16);
       border-color: rgba(54, 52, 52, 0.72);
   }

   .primaryBtn:active {
       transform: translateY(0);
   }

   .socialDivider {
       display: grid;
       grid-template-columns: 1fr auto 1fr;
       align-items: center;
       gap: 12px;
       margin-top: 6px;
       color: rgba(233, 230, 218, 0.62);
       font-size: 12px;
       letter-spacing: 0.08em;
       text-transform: lowercase;
   }

   .socialDivider::before,
   .socialDivider::after {
       content: "";
       height: 1px;
       background: rgba(233, 230, 218, 0.10);
   }

   .socialRow {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 10px;
   }

   .socialBtn {
       width: 100%;
       padding: 12px 14px;
       border-radius: 14px;
       border: 1px solid rgba(233, 230, 218, 0.14);
       background: rgba(10, 10, 11, 0.55);
       color: rgba(233, 230, 218, 0.92);
       font-weight: 800;
       letter-spacing: 0.08px;
       font-size: 14px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       cursor: pointer;
       transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
   }

   .socialBtn:hover {
       transform: translateY(-1px);
       border-color: rgba(233, 230, 218, 0.22);
       background: rgba(16, 16, 18, 0.55);
   }

   .socialBtn svg {
       width: 18px;
       height: 18px;
       flex: 0 0 auto;
   }

   .socialBtn:disabled {
       opacity: 0.42;
       cursor: not-allowed;
       transform: none;
   }

   .socialBtn:disabled:hover {
       transform: none;
       background: rgba(10, 10, 11, 0.55);
       border-color: rgba(233, 230, 218, 0.14);
   }

   .disclaimer {
       margin-top: 8px;
       color: rgba(233, 230, 218, 0.66);
       font-size: 12px;
       line-height: 1.6;
       text-align: center;
   }

   .disclaimer a {
       color: rgba(57, 198, 255, 0.94);
       text-decoration: underline;
       text-underline-offset: 3px;
   }

   .view {
       display: none;
   }

   .viewSignin {
       display: block;
   }

   #signup:target~.authPage .viewSignin {
       display: none;
   }

   #signup:target~.authPage .viewSignup {
       display: block;
   }

   #signin:target~.authPage .viewSignin {
       display: block;
   }

   #signin:target~.authPage .viewSignup {
       display: none;
   }

   @media (max-width: 980px) {
       .authGrid {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 720px) {
       .socialRow {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (max-width: 520px) {
       .socialRow {
           grid-template-columns: 1fr;
       }
   }

   @media (prefers-reduced-motion: reduce) {

       .btn,
       .primaryBtn,
       .socialBtn {
           transition: none !important;
       }
   }

   .siteFooter {
       border-top: 1px solid var(--stroke2);
       padding: 18px 0 0;
       margin-top: 22px;
       color: rgba(233, 230, 218, 0.70);
       font-size: 12px;
       line-height: 1.6;
   }

   .siteFooter a {
       text-decoration: underline;
       text-underline-offset: 3px;
       opacity: 0.9;
   }

   .siteFooter a:hover {
       opacity: 1;
   }

   .siteFooterInner {
       display: grid;
       grid-template-columns: minmax(220px, 1fr) 2fr;
       gap: 16px;
       align-items: start;
   }

   .footerCols {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 14px;
   }

   .footerCol {
       display: grid;
       gap: 8px;
       align-content: start;
   }

   .footerTitle {
       color: rgba(233, 230, 218, 0.86);
       font-size: 11px;
       letter-spacing: 0.16em;
       text-transform: uppercase;
   }

   .footerBottom {
       display: flex;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap;
       justify-content: flex-start;
       opacity: 0.92;
       position: absolute;
       bottom: 10px;
   }

   .footerSep {
       opacity: 0.55;
   }

   .footlock {
       display: inline-flex;
       align-items: center;
       gap: 12px;
   }

   .footlogo {
       width: 34px;
       height: 34px;
       border-radius: 10px;
       border: 1px solid var(--stroke);
       background: var(--surface1);
   }

   .footbrand {
       color: rgba(233, 230, 218, 0.92);
       letter-spacing: 0.12px;
   }

   .footdesc {
       opacity: 0.9;
   }

   @media (max-width: 900px) {
       .siteFooterInner {
           grid-template-columns: 1fr;
       }

       .footerCols {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   }

   @media (max-width: 520px) {
       .footerCols {
           grid-template-columns: 1fr;
       }
   }