@charset "utf-8";
/* Qlynic design system · 01 · Tokens */

:root {

  /* 1 · Brand — the four colours of the Q
     The eight stops of the Qlynic mark, verbatim. Each quadrant of the Q is
     one gradient: top-right emerald > cyan, top-left sky > periwinkle,
     bottom-right violet > indigo, bottom-left rose > orange. */

  --ql-q-emerald:    #10B981;
  --ql-q-cyan:       #06B6D4;
  --ql-q-sky:        #38BDF8;
  --ql-q-periwinkle: #818CF8;
  --ql-q-violet:     #A78BFA;
  --ql-q-indigo:     #6366F1;
  --ql-q-rose:       #F43F5E;
  --ql-q-orange:     #F97316;

  /* The spectrum — the cool arc of the Q, emerald to violet. Odd stops are
     the midpoints of a quadrant's own gradient. */

  --ql-spec-0: #10B981;
  --ql-spec-1: #0BB8AB;
  --ql-spec-2: #06B6D4;
  --ql-spec-3: #38BDF8;
  --ql-spec-4: #5DA5F8;
  --ql-spec-5: #818CF8;
  --ql-spec-6: #6366F1;
  --ql-spec-7: #8579F6;
  --ql-spec-8: #A78BFA;

  --ql-spec-0-rgb: 16 185 129;
  --ql-spec-1-rgb: 11 184 171;
  --ql-spec-2-rgb: 6 182 212;
  --ql-spec-3-rgb: 56 189 248;
  --ql-spec-4-rgb: 93 165 248;
  --ql-spec-5-rgb: 129 140 248;
  --ql-spec-6-rgb: 99 102 241;
  --ql-spec-7-rgb: 133 121 246;
  --ql-spec-8-rgb: 167 139 250;

  --ql-emerald:     var(--ql-spec-0);
  --ql-cyan:        var(--ql-spec-2);
  --ql-azure:       var(--ql-spec-4);
  --ql-indigo:      var(--ql-spec-6);
  --ql-violet:      var(--ql-spec-8);

  /* Accent — the one interactive colour */

  --ql-accent:      #0D66D8;   /* filled controls. carries white at 4.93:1 */
  --ql-accent-hi:   #1268DC;   /* its hover — 4.77:1, never lighter       */
  --ql-accent-text: #2997FF;
  --ql-accent-rgb:   13 102 216;
  --ql-accent-text-rgb: 41 151 255;

  /* darkest point of the brand that still carries --ql-text-on-spec at 5:1 */
  --ql-spec-floor:  #726EF3;

  /* Quadrant ramp — the four colours of the Q as text, in rail order.
     All four are the logo's own stops and clear 4.5:1 on every surface. */

  --ql-div-1: #10B981;   /* emerald · top right    6.71:1 */
  --ql-div-2: #38BDF8;   /* sky · top left         7.94:1 */
  --ql-div-3: #A78BFA;   /* violet · bottom right  6.25:1 */
  --ql-div-4: #F43F5E;   /* rose · bottom left     4.63:1 */

  /* The same four by their place in the mark. */
  --ql-q-tl: var(--ql-div-2);   /* sky     */
  --ql-q-tr: var(--ql-div-1);   /* emerald */
  --ql-q-bl: var(--ql-div-4);   /* rose    */
  --ql-q-br: var(--ql-div-3);   /* violet  */

  --ql-cyan-bright:   #67E8F9;
  --ql-cyan-deep:     #0E7490;
  --ql-violet-bright: #C4B5FD;
  --ql-violet-deep:   #5B21B6;

  --ql-emerald-rgb: 16 185 129;
  --ql-cyan-rgb:    6 182 212;
  --ql-cyan-bright-rgb:  103 232 249;
  --ql-violet-bright-rgb: 196 181 253;
  --ql-azure-rgb:   93 165 248;
  --ql-indigo-rgb:  99 102 241;
  --ql-violet-rgb: 167 139 250;
  --ql-white-rgb:  255 255 255;
  --ql-black-rgb:    0   0   0;

  /* 2 · Ink — the neutral housing */

  --ql-ink-000: #000000;  /* void — scrims only                           */
  --ql-ink-025: #000000;  /* the page beneath the page                    */
  --ql-ink-050: #050505;  /* ▸ CANVAS                                     */
  --ql-ink-100: #0E0E0E;  /* sunken                                       */
  --ql-ink-150: #151515;  /* surface                                      */
  --ql-ink-200: #1C1C1E;  /* raised                                       */
  --ql-ink-300: #2A2A2C;  /* overlay / hairline hi                        */
  --ql-ink-400: #3A3A3C;  /* border strong                                */
  --ql-ink-500: #48484A;  /* disabled ink                                 */
  --ql-ink-600: #636366;  /* ▸ NOT A TEXT COLOUR                          */
  --ql-ink-650: #98989D;  /* lowest legal text step — floor 5.93:1        */
  --ql-ink-700: #A1A1A6;  /* secondary text                               */
  --ql-ink-800: #D2D2D7;  /* body text                                    */
  --ql-ink-900: #E8E8ED;  /* strong text                                  */
  --ql-ink-950: #F5F5F7;  /* ▸ headline. never #fff                       */

  /* 3 · Surface roles */

  --ql-bg:            var(--ql-ink-050);
  --ql-bg-sunken:     var(--ql-ink-025);
  --ql-surface:       var(--ql-ink-100);
  --ql-surface-2:     var(--ql-ink-150);
  --ql-surface-3:     var(--ql-ink-200);
  --ql-surface-hover: var(--ql-ink-200);
  --ql-overlay:       var(--ql-ink-150);

  --ql-text:          var(--ql-ink-900);
  --ql-text-strong:   var(--ql-ink-950);
  --ql-text-body:     var(--ql-ink-800);
  --ql-text-muted:    var(--ql-ink-700);
  --ql-text-subtle:   var(--ql-ink-650);
  --ql-text-disabled: var(--ql-ink-500);
  --ql-text-on-spec:  #06080C;    /* ink that sits ON a spectrum fill       */

  /* Surfaces and elevation */

  --ql-spec-top:    transparent;
  --ql-spec-top-hi: transparent;
  --ql-bevel-low:   transparent;

  --ql-plate:       linear-gradient(var(--ql-ink-200), var(--ql-ink-200));
  --ql-plate-deep:  linear-gradient(var(--ql-ink-150), var(--ql-ink-150));
  --ql-plate-floor: linear-gradient(var(--ql-ink-025), var(--ql-ink-025));

  --ql-lift-1: 0 1px 2px rgb(var(--ql-black-rgb) / .40);
  --ql-lift-2: 0 2px 10px -2px rgb(var(--ql-black-rgb) / .45);
  --ql-lift-3: 0 8px 28px -8px rgb(var(--ql-black-rgb) / .55);
  --ql-lift-4: 0 20px 56px -16px rgb(var(--ql-black-rgb) / .60);

  --ql-lift-chrome: 0 1px 0 0 rgb(var(--ql-white-rgb) / .06),
                    0 8px 28px -12px rgb(var(--ql-black-rgb) / .60);

  --ql-line:          rgb(var(--ql-white-rgb) / .09);   /* default hairline */
  --ql-line-soft:     rgb(var(--ql-white-rgb) / .055);
  --ql-line-strong:   rgb(var(--ql-white-rgb) / .16);
  --ql-line-spec:     rgb(var(--ql-accent-text-rgb) / .38);

  /* 4 · Status */

  --ql-success:      #00D89F;  /* oklch(.78 .165 166) */
  --ql-success-dim:  #007655;  /* oklch(.50 .105 166) */
  --ql-warning:      #F5B430;  /* oklch(.81 .155  80) */
  --ql-warning-dim:  #876114;  /* oklch(.52 .100  80) */
  --ql-danger:       #FC436F;  /* oklch(.665 .22  12) — text/border only */
  --ql-danger-fill:  #C70046;
  --ql-danger-fill-hi: #D50B51;/* oklch(.560 .22  12) — its hover          */
  --ql-danger-dim:   #8F263D;  /* oklch(.44 .140  12) */
  --ql-info:         #03C3F7;  /* oklch(.76 .145 226) */

  --ql-success-rgb:   0 216 159;
  --ql-warning-rgb: 245 180  48;
  --ql-danger-rgb:  252  67 111;

  /* 5 · Axis */

  --ql-axis:       -30deg;
  --ql-axis-grad:   210deg;
  --ql-axis-fill:   180deg;

  --ql-grad-fill:  linear-gradient(var(--ql-axis-fill),
                     var(--ql-spec-0) 0%,     var(--ql-spec-1) 12.5%,
                     var(--ql-spec-2) 25%,    var(--ql-spec-3) 37.5%,
                     var(--ql-spec-4) 50%,    var(--ql-spec-5) 62.5%,
                     var(--ql-spec-6) 75%,    var(--ql-spec-7) 87.5%,
                     var(--ql-spec-8) 100%);
  --ql-grad-axis:  linear-gradient(var(--ql-axis-grad),
                     var(--ql-spec-0), var(--ql-spec-4) 46%,
                     var(--ql-spec-6) 74%, var(--ql-spec-8));

  --ql-grad-signature: linear-gradient(90deg,
                     var(--ql-q-emerald) 0%,  var(--ql-q-cyan) 22%,
                     var(--ql-q-sky) 28%,     var(--ql-q-periwinkle) 47%,
                     var(--ql-q-indigo) 53%,  var(--ql-q-violet) 72%,
                     var(--ql-q-rose) 78%,    var(--ql-q-orange) 100%);

  --ql-grad-carry:       linear-gradient(var(--ql-accent), var(--ql-accent));
  --ql-grad-carry-sweep: linear-gradient(var(--ql-accent), var(--ql-accent));
  --ql-grad-sweep:       linear-gradient(var(--ql-accent-text), var(--ql-accent-text));
  --ql-grad-hair:  linear-gradient(90deg, transparent,
                     rgb(var(--ql-white-rgb)/.14) 22%,
                     rgb(var(--ql-white-rgb)/.14) 78%, transparent);

  --ql-edge:       linear-gradient(rgb(var(--ql-white-rgb)/.10),
                                   rgb(var(--ql-white-rgb)/.10));
  --ql-edge-hi:    linear-gradient(rgb(var(--ql-white-rgb)/.18),
                                   rgb(var(--ql-white-rgb)/.18));
  --ql-edge-quiet: linear-gradient(rgb(var(--ql-white-rgb)/.06),
                                   rgb(var(--ql-white-rgb)/.06));

  /* 6 · Type */

  --ql-font-sans: "Manrope", "Manrope Fallback", ui-sans-serif, -apple-system,
                  "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;
  --ql-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono",
                  Menlo, Consolas, "Liberation Mono", monospace;

  --ql-fs-3xs: 0.6875rem;  /* 11.00 */
  --ql-fs-2xs: 0.75rem;    /* 12.00 */
  --ql-fs-xs:  0.8333rem;  /* 13.33 */
  --ql-fs-sm:  0.875rem;   /* 14.00 */
  --ql-fs-md:  1rem;       /* 16.00  ← base */
  --ql-fs-lg:  1.2rem;     /* 19.20 */
  --ql-fs-xl:  1.44rem;    /* 23.04 */
  --ql-fs-2xl: 1.728rem;   /* 27.65 */
  --ql-fs-3xl: 2.0736rem;  /* 33.18 */
  --ql-fs-4xl: 2.4883rem;  /* 39.81 */
  --ql-fs-5xl: 2.986rem;   /* 47.78 */
  --ql-fs-6xl: 3.5832rem;  /* 57.33 */
  --ql-fs-7xl: 4.2998rem;  /* 68.80 */
  --ql-fs-8xl: 5.1598rem;  /* 82.56 */
  --ql-fs-9xl: 6.1917rem;  /* 99.07  — poster */
  --ql-fs-10xl: 7.43rem;   /* 118.88 — poster */

  --ql-fs-d1: clamp(2.4883rem, 1.30rem + 5.28vw, 5.1598rem);
  --ql-fs-d2: clamp(2.0736rem, 1.24rem + 3.71vw, 3.5832rem);
  --ql-fs-d3: clamp(1.728rem,  1.19rem + 2.39vw, 2.6rem);
  --ql-fs-d4: clamp(1.44rem,   1.13rem + 1.38vw, 2.0736rem);

  --ql-fs-d0:  clamp(2.986rem, 1.35rem + 7.3vw, 7.43rem);
  --ql-fs-d00: clamp(3.5832rem, 1.42rem + 9.6vw, 9.5rem);

  --ql-tr-micro:    0.06em;   /* 11px uppercase eyebrows */
  --ql-tr-tiny:     0.015em;  /* 12–13px               */
  --ql-tr-body:     0em;      /* 14–16px               */
  --ql-tr-lead:    -0.011em;  /* 19–23px               */
  --ql-tr-head:    -0.018em;  /* 28–33px               */
  --ql-tr-display: -0.024em;  /* 40–48px               */
  --ql-tr-hero:    -0.032em;  /* 57px+                 */

  --ql-lh-flat:    1.0;
  --ql-lh-display: 1.04;
  --ql-lh-head:    1.16;
  --ql-lh-lead:    1.5;
  --ql-lh-body:    1.65;
  --ql-lh-micro:   1.45;

  --ql-fw-thin:      200;
  --ql-fw-regular:   400;
  --ql-fw-medium:    500;
  --ql-fw-semibold:  600;
  --ql-fw-bold:      700;
  --ql-fw-heavy:     800;

  /* 7 · Space — 4px base */

  --ql-sp-0:  0;
  --ql-sp-1:  0.125rem;  /*  2 */
  --ql-sp-2:  0.25rem;   /*  4 */
  --ql-sp-3:  0.375rem;  /*  6 */
  --ql-sp-4:  0.5rem;    /*  8 */
  --ql-sp-5:  0.75rem;   /* 12 */
  --ql-sp-6:  1rem;      /* 16 */
  --ql-sp-7:  1.25rem;   /* 20 */
  --ql-sp-8:  1.5rem;    /* 24 */
  --ql-sp-9:  2rem;      /* 32 */
  --ql-sp-10: 2.5rem;    /* 40 */
  --ql-sp-11: 3rem;      /* 48 */
  --ql-sp-12: 4rem;      /* 64 */
  --ql-sp-13: 5rem;      /* 80 */
  --ql-sp-14: 6rem;      /* 96 */
  --ql-sp-15: 8rem;      /* 128 */
  --ql-sp-16: 10rem;     /* 160 */

  --ql-gutter:      clamp(1.25rem, 0.55rem + 3.1vw, 2.5rem);
  --ql-section:     clamp(4rem, 2.2rem + 7.5vw, 8rem);
  --ql-section-lg:  clamp(5.5rem, 2.6rem + 11.5vw, 12rem);   /* stage sections */
  --ql-container:   1200px;
  --ql-container-wide: 1440px;
  --ql-container-prose: 68ch;

  /* 8 · Radii */

  --ql-r-xs:   8px;
  --ql-r-sm:  10px;
  --ql-r-md:  14px;
  --ql-r-lg:  18px;
  --ql-r-xl:  24px;
  --ql-r-2xl: 32px;
  --ql-r-3xl: 44px;
  --ql-r-full: 999px;

  /* 9 · Elevation */

  --ql-el-0: none;
  --ql-el-1: 0 1px 2px rgb(var(--ql-black-rgb)/.40);
  --ql-el-2: 0 2px 10px -2px rgb(var(--ql-black-rgb)/.45);
  --ql-el-3: 0 8px 28px -8px rgb(var(--ql-black-rgb)/.55);
  --ql-el-4: 0 20px 56px -16px rgb(var(--ql-black-rgb)/.60);
  --ql-el-5: 0 32px 80px -24px rgb(var(--ql-black-rgb)/.65);

  --ql-glow-cy:  0 4px 18px -8px rgb(var(--ql-accent-rgb)/.35);
  --ql-glow-vi:  0 4px 18px -8px rgb(var(--ql-accent-rgb)/.30);
  --ql-glow-spec: 0 6px 24px -10px rgb(var(--ql-accent-rgb)/.35);

  --ql-ring: 0 0 0 2px var(--ql-bg),
             0 0 0 4px rgb(var(--ql-accent-text-rgb)/.90),
             0 0 0 5px rgb(var(--ql-black-rgb)/.35);
  --ql-ring-danger: 0 0 0 2px var(--ql-bg),
             0 0 0 4px rgb(var(--ql-danger-rgb)/.85),
             0 0 22px -2px rgb(var(--ql-danger-rgb)/.40);

  /* 10 · Motion */

  --ql-d-instant: 90ms;
  --ql-d-fast:   140ms;
  --ql-d-base:   220ms;
  --ql-d-slow:   340ms;
  --ql-d-slower: 560ms;
  --ql-d-ambient: 900ms;

  --ql-ease:         cubic-bezier(.4, 0, .2, 1);
  --ql-ease-out:     cubic-bezier(.19, 1, .22, 1);    /* expo out  */
  --ql-ease-in-out:  cubic-bezier(.76, 0, .24, 1);
  --ql-ease-accel:   cubic-bezier(.55, 0, 1, .45);

  --ql-ease-spring:  linear(
      0, .0088 1.3%, .0347 2.7%, .1252 5.4%, .2739 8.4%, .4409 11.3%,
      .6094 14.2%, .7644 17.2%, .8979 20.5%, .9494 22.2%, .9911 24%,
      1.0239 25.9%, 1.0477 27.9%, 1.0629 30.2%, 1.0695 33%, 1.066 36.6%,
      1.0546 40.2%, 1.0243 47.5%, 1.0028 54.1%, .9938 60.5%, .9962 72.3%,
      1);

  --ql-t-color:  color var(--ql-d-fast) var(--ql-ease),
                 background-color var(--ql-d-fast) var(--ql-ease),
                 border-color var(--ql-d-fast) var(--ql-ease);
  --ql-t-lift:   transform var(--ql-d-base) var(--ql-ease-out),
                 box-shadow var(--ql-d-base) var(--ql-ease-out);

  /* 11 · Z-index */

  --ql-z-behind:   -1;
  --ql-z-base:      0;
  --ql-z-raised:    10;
  --ql-z-sticky:    100;
  --ql-z-header:    200;
  --ql-z-drawer:    300;
  --ql-z-backdrop:  400;
  --ql-z-modal:     410;
  --ql-z-popover:   500;
  --ql-z-tooltip:   600;
  --ql-z-toast:     700;
  --ql-z-grain:     900;

  /* 12 · Atmosphere */

  --ql-grain-opacity: 0;
  --ql-caustic-opacity: 0;

  --ql-control-h-sm: 34px;
  --ql-control-h:    44px;
  --ql-control-h-lg: 54px;
  --ql-tap-min:      44px;   /* WCAG 2.5.5 minimum target */

  --ql-btn-h-sm: 32px;
  --ql-btn-h:    40px;
  --ql-btn-h-lg: 48px;
}

/* 13 · Breakpoints — written literally in media queries:
   xs 0 · sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */

/* 14 · Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ql-d-instant: 1ms; --ql-d-fast: 1ms; --ql-d-base: 1ms;
    --ql-d-slow: 1ms;    --ql-d-slower: 1ms; --ql-d-ambient: 1ms;
    --ql-caustic-opacity: 0;
  }
}