@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Nunito:ital,wght@0,400..900;1,400..900&display=swap");/* public-sans-vietnamese-wght-normal */
@font-face {
  font-family: 'Public Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/public-sans-vietnamese-wght-normal-CtlIRbEm.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* public-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Public Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/public-sans-latin-ext-wght-normal-MQgHevqp.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* public-sans-latin-wght-normal */
@font-face {
  font-family: 'Public Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/public-sans-latin-wght-normal-DdeTHZLK.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/** **************************************
* Plugins
*************************************** */
/* scrollbar */
[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:' ';display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:'';background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{top:2px;bottom:2px;left:2px;right:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:0;bottom:0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.simplebar-scrollbar:before {
  background-color: var(--palette-text-disabled);
}
.simplebar-scrollbar.simplebar-visible:before {
  opacity: 0.48;
}
/* map */
/*@import './components/map/styles.css';*/

/* lightbox */
/*@import './components/lightbox/styles.css';*/

/* chart */
/*@import './components/chart/styles.css';*/

/** **************************************
* Baseline
*************************************** */
html {
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

body,
#root,
#root__layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 100%;
    flex-direction: column;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

input[type='number'] {
    -moz-appearance: textfield;
    appearance: none;
}

    input[type='number']::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

    input[type='number']::-webkit-inner-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }


/* AttendIn brand webfonts.
   Brand pack specifies Comfortaa (headings) + Nunito (everything read).
   Both are Google Fonts originals, so they are loaded from the Google CDN
   rather than substituted. The shipping product (odyssey.app) currently
   still renders Public Sans Variable + Barlow — see readme.md "Font status". */
:root{
/* ---- Brand core (brand pack p.02) ---- */
--violet:#493193;
--blue:#3c6fb5;
--cyan:#2fadd8;

/* Signature gradient — hero moments, primary CTAs, gradient text only */
--gradient-signature:linear-gradient(135deg,#493193 0%,#3c6fb5 50%,#2fadd8 100%); /* @kind color */
--gradient-signature-90:linear-gradient(90deg,#493193 0%,#3c6fb5 50%,#2fadd8 100%); /* @kind color */

/* ---- Surfaces ---- */
--dark-surface-start:#241a52;
--dark-surface-end:#191340;
--gradient-dark-surface:linear-gradient(135deg,#241a52 0%,#191340 100%); /* @kind color */
--ice-blue:#f5fbff;
--lilac-mist:#f4f3f9;
--white:#ffffff;

/* ---- Ink & lines ---- */
--ink:#000300;
--hairline:#c8c1df;
--ghost-number:#e4ddf5;

/* ---- Semantic ---- */
--success:#1fb573;
--warning:#f5a623;
--danger:#f04e37;

/* ---- Violet ramp (product palette, odyssey.app theme-config.ts) ---- */
--violet-lighter:#e8dff5;
--violet-light:#a084d1;
--violet-main:#493193;
--violet-dark:#2f1f61;
--violet-darker:#1a113a;

/* ---- Cyan ramp ---- */
--cyan-lighter:#d4f3fa;
--cyan-light:#7dd7ef;
--cyan-main:#2fadd8;
--cyan-dark:#1f7692;
--cyan-darker:#11495b;

/* ---- Product neutrals (odyssey.app grey scale) ---- */
--grey-50:#fcfdfd;
--grey-100:#f9fafb;
--grey-200:#f4f6f8;
--grey-300:#dfe3e8;
--grey-400:#c4cdd5;
--grey-500:#919eab;
--grey-600:#637381;
--grey-700:#454f5b;
--grey-800:#1c252e;
--grey-900:#141a21;

/* ---- Product semantic ramps (in-app states) ---- */
--app-success:#22c55e;--app-success-light:#77ed8b;--app-success-lighter:#d3fcd2;--app-success-dark:#118d57;
--app-warning:#ffab00;--app-warning-light:#ffd666;--app-warning-lighter:#fff5cc;--app-warning-dark:#b76e00;
--app-error:#ff5630;--app-error-light:#ffac82;--app-error-lighter:#ffe9d5;--app-error-dark:#b71d18;
--app-info:#00b8d9;--app-info-light:#61f3f3;--app-info-lighter:#cafdf5;--app-info-dark:#006c9c;

/* ---- Marketing-site ink (landing hero, Hero.tsx) ---- */
--marketing-ink:#0c0719;
--marketing-ink-2:#140d2b;

/* =========================================================
   Semantic aliases — reach for these first
   ========================================================= */
--text-heading:var(--violet);
--text-body:var(--ink);
--text-muted:var(--grey-600);
--text-disabled:var(--grey-500);
--text-on-dark:#ffffff;
--text-on-dark-muted:rgba(232,223,245,.75);
--text-accent:var(--cyan);

--surface-page:var(--ice-blue);
--surface-page-alt:var(--lilac-mist);
--surface-card:var(--white);
--surface-sunken:var(--grey-200);
--surface-dark:var(--dark-surface-start);
--surface-chip:var(--violet-lighter);
--surface-chip-cyan:var(--cyan-lighter);
--surface-translucent:rgba(255,255,255,.1);

--border-hairline:var(--hairline);
--border-card:rgba(200,193,223,.5);
--border-input:var(--hairline);
--border-focus:var(--violet);
--border-divider:rgba(145,158,171,.2);

--action-primary:var(--violet);
--action-primary-hover:var(--violet-dark);
--action-accent:var(--cyan);
--action-hover-tint:rgba(145,158,171,.08);
--action-selected-tint:rgba(145,158,171,.16);

--glow-violet:radial-gradient(circle,rgba(73,49,147,.45) 0%,transparent 70%); /* @kind color */
--glow-cyan:radial-gradient(circle,rgba(47,173,216,.22) 0%,transparent 70%); /* @kind color */
}
:root{
/* ---- Families ---- */
--font-display:"Comfortaa",system-ui,sans-serif; /* headings only, never body copy */
--font-body:"Nunito",system-ui,-apple-system,sans-serif; /* everything you read */
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

/* odyssey.app currently still ships Public Sans Variable + Barlow via MUI.
   Not exposed as tokens on purpose — see readme.md "Font status". */

/* ---- Weights ---- */
--weight-display-regular:500; /* @kind other */
--weight-display-bold:700; /* @kind other */
--weight-body:400; /* @kind other */
--weight-label:600; /* @kind other */
--weight-label-strong:700; /* @kind other */
--weight-emphasis:800; /* @kind other */

/* ---- Display scale (Comfortaa) ---- */
--size-display-1:80px;--lh-display-1:1.1; /* @kind other */
--size-display-2:60px;--lh-display-2:1.1; /* @kind other */
--size-display-3:44px;--lh-display-3:1.2; /* @kind other */
--size-h1:36px;--lh-h1:1.2; /* @kind other */
--size-h2:28px;--lh-h2:1.3; /* @kind other */
--size-h3:22px;--lh-h3:1.35; /* @kind other */

/* ---- Body scale (Nunito) ---- */
--size-body-xl:20px;--lh-body-xl:1.6; /* @kind other */
--size-body-lg:18px;--lh-body-lg:1.6; /* @kind other */
--size-body:16px;--lh-body:1.5; /* @kind other */
--size-body-sm:14px;--lh-body-sm:1.57; /* @kind other */
--size-caption:12px;--lh-caption:1.5; /* @kind other */

/* ---- Labels / UI ---- */
--size-label:14px;
--size-label-sm:12px;
--size-overline:12px;
--tracking-overline:.16em; /* @kind other */
--tracking-tight:-.02em; /* @kind other */
--tracking-tighter:-.03em; /* @kind other */
--tracking-normal:0; /* @kind other */

/* Mobile app type scale (OdysseyMobile designSystem.ts, px) */
--m-display-lg:32px;--m-display-md:28px;--m-display-sm:24px;
--m-h1:22px;--m-h2:18px;--m-h3:16px;
--m-body-lg:16px;--m-body-md:14px;--m-body-sm:12px;
--m-label-lg:14px;--m-label-md:12px;--m-label-sm:10px;
}
:root{
/* 4px base scale — mirrors OdysseyMobile designSystem.ts spacing */
--space-xs:4px;   /* icon-to-text gaps */
--space-sm:8px;   /* between related items */
--space-md:12px;  /* card internal padding (compact) */
--space-lg:16px;  /* list item spacing */
--space-xl:20px;  /* section spacing */
--space-2xl:24px; /* screen horizontal padding, card padding */
--space-2-5xl:28px;
--space-3xl:32px; /* major section break */
--space-4xl:48px; /* page-level spacing */
--space-5xl:64px;
--space-6xl:96px; /* marketing section rhythm */
--space-7xl:128px;

/* Control heights */
--height-input-sm:40px;
--height-input:48px;
--height-input-lg:56px;
--height-button-sm:44px;
--height-button:52px;
--height-button-lg:56px;

/* Touch targets */
--touch-min:44px;
--touch-comfortable:48px;
--touch-large:56px;

/* Avatars */
--avatar-xs:24px;--avatar-sm:40px;--avatar-md:64px;--avatar-lg:96px;--avatar-xl:120px;

/* Icons — 24px grid is the drawing grid for brand icons */
--icon-xs:14px;--icon-sm:16px;--icon-md:20px;--icon-lg:24px;--icon-xl:32px;--icon-2xl:48px;--icon-3xl:64px;

/* Layout */
--container-max:1280px;
--container-narrow:820px;
--sidebar-width:280px;
--appbar-height:64px;

/* Z layers */
--z-dropdown:100; /* @kind other */
--z-sticky:200; /* @kind other */
--z-overlay:300; /* @kind other */
--z-modal:400; /* @kind other */
--z-toast:500; /* @kind other */
}
:root{
/* ---- Radii (brand pack p.04: corners scale with the element) ---- */
--radius-pill:999px;  /* every button, every chip, always */
--radius-panel:26px;  /* large panels, hero cards, social templates */
--radius-card:18px;   /* cards & inputs */
--radius-compact:12px;/* compact / nested elements */
--radius-sm:8px;      /* product-app buttons & inputs (MUI shape.borderRadius) */
--radius-xs:4px;      /* small badges, tags */

/* ---- Borders ---- */
--border-width-hairline:1px;   /* dividers, card outlines */
--border-width-input:1.5px;    /* inputs & ghost buttons */
--border-width-focus:2px;      /* focus ring */
--focus-ring-offset:3px;
--focus-ring:0 0 0 var(--border-width-focus) var(--violet); /* @kind shadow */

/* ---- Elevation: one soft shadow, never heavy borders ---- */
--shadow-subtle:0 1px 2px 0 rgba(0,0,0,.03);
--shadow-card:0 2px 6px 0 rgba(25,19,64,.06);
--shadow-raised:0 4px 10px 0 rgba(25,19,64,.10);
--shadow-high:0 8px 14px 0 rgba(25,19,64,.12);
--shadow-dialog:-40px 40px 80px -8px rgba(0,0,0,.24);
--shadow-dropdown:0 0 2px 0 rgba(145,158,171,.24),-20px 20px 40px -4px rgba(145,158,171,.24);

/* Product MUI custom shadows (odyssey.app custom-shadows.ts) */
--shadow-z1:0 1px 2px 0 rgba(145,158,171,.16);
--shadow-z4:0 4px 8px 0 rgba(145,158,171,.16);
--shadow-z8:0 8px 16px 0 rgba(145,158,171,.16);
--shadow-z12:0 12px 24px -4px rgba(145,158,171,.16);
--shadow-z16:0 16px 32px -4px rgba(145,158,171,.16);
--shadow-z20:0 20px 40px -4px rgba(145,158,171,.16);
--shadow-z24:0 24px 48px 0 rgba(145,158,171,.16);
--shadow-app-card:0 0 2px 0 rgba(145,158,171,.2),0 12px 24px -4px rgba(145,158,171,.12);

/* Coloured shadows — CTA lift */
--shadow-violet:0 8px 16px 0 rgba(73,49,147,.24);
--shadow-cyan:0 8px 28px rgba(47,173,216,.35);
--shadow-cyan-hover:0 12px 36px rgba(47,173,216,.5);

/* Blur */
--blur-glass:20px; /* @kind other */
--blur-glow:90px; /* @kind other */
}
:root{
/* Durations — mobile designSystem.ts animations */
--duration-fast:150ms; /* @kind other */
--duration-normal:250ms; /* @kind other */
--duration-slow:350ms; /* @kind other */
--duration-reveal:700ms; /* @kind other */

/* Easing */
--ease-standard:cubic-bezier(.25,.4,.25,1); /* @kind other */
--ease-out:ease-out; /* @kind other */
--ease-in-out:ease-in-out; /* @kind other */

/* Interaction deltas (brand pack p.04: cards lift 4px, buttons 2px) */
--lift-card:-4px;
--lift-button:-2px;
--press-scale:.97; /* @kind other */
--press-opacity:.7; /* @kind other */
--disabled-opacity:.5; /* @kind other */

/* Composite transitions */
--transition-hover:transform var(--duration-slow) var(--ease-in-out),box-shadow var(--duration-slow) var(--ease-in-out),border-color var(--duration-slow) var(--ease-in-out); /* @kind other */
--transition-colour:background-color var(--duration-normal) var(--ease-in-out),color var(--duration-normal) var(--ease-in-out); /* @kind other */
}
/* Minimal base layer. Consumers get body type + link colours for free. */
body { margin: 0; font-family: var(--font-body); font-size: var(--size-body); line-height: var(--lh-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: var(--weight-display-bold); margin: 0; letter-spacing: var(--tracking-tight); }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--cyan); }
*:focus-visible { outline: var(--border-width-focus) solid var(--violet); outline-offset: var(--focus-ring-offset); }
::selection { background: var(--violet-lighter); color: var(--violet); }