/* Generated by @classeoedu/courderecre-design-system. Edit its private repository, then sync. */
/* Generated from src/tokens.json. */
:root {
  --cdr-color-purple: #5536f3;
  --cdr-color-purple-hover: #4323d9;
  --cdr-color-ink: #262236;
  --cdr-color-muted: #686578;
  --cdr-color-line: #e6e4ed;
  --cdr-color-page: #fafafd;
  --cdr-color-surface: #ffffff;
  --cdr-color-highlight: #ffff70;
  --cdr-color-yellow: #fff35b;
  --cdr-color-action: #155fc5;
  --cdr-color-action-hover: #064fa8;
  --cdr-color-soft-purple: #f2efff;
  --cdr-color-soft-hover: #f5f3fc;
  --cdr-color-soft-neutral: #f7f6fa;
  --cdr-color-rail: #f0f7fd;
  --cdr-color-rail-ink: #24383b;
  --cdr-color-field-line: #776789;
  --cdr-color-danger: #a33042;
  --cdr-color-danger-background: #fff2f4;
  --cdr-color-success: #216248;
  --cdr-color-success-background: #dff8eb;
  --cdr-color-info: #265abb;
  --cdr-color-info-background: #e1edff;
  --cdr-color-reply: #6333ba;
  --cdr-color-reply-background: #efe3ff;
  --cdr-color-photos: #97501c;
  --cdr-color-photos-background: #fff1d9;
  --cdr-color-mint: #b2f1df;
  --cdr-color-mint-ink: #233e35;
  --cdr-color-coral: #ce3f48;
  --cdr-color-blue: #2863c6;
  --cdr-color-lavender: #e8dfff;
  --cdr-color-lavender-ink: #4f2a90;
  --cdr-color-yellow-ink: #38310e;
  --cdr-color-back: #adfae5;
  --cdr-color-back-hover: #8ff5dc;
  --cdr-color-viewer: #211933;
  --cdr-color-viewer-stage: #110d1c;
  --cdr-color-viewer-text: #ffffff;
  --cdr-font-family: Inter, Arial, sans-serif;
  --cdr-type-marketing-family: "Bricolage Grotesque", Inter, Arial, sans-serif;
  --cdr-type-body-size: 1rem;
  --cdr-type-body-leading: 1.75;
  --cdr-type-small-size: 0.875rem;
  --cdr-type-small-leading: 1.6;
  --cdr-type-caption-size: 0.75rem;
  --cdr-type-caption-leading: 1.5;
  --cdr-type-heading-size: 2.8rem;
  --cdr-type-heading-mobile-size: 2rem;
  --cdr-type-heading-leading: 1.2;
  --cdr-type-heading-tracking: -1.2px;
  --cdr-type-post-title-size: 1.65rem;
  --cdr-type-post-title-mobile-size: 1.35rem;
  --cdr-type-post-title-leading: 1.4;
  --cdr-type-post-title-tracking: -0.45px;
  --cdr-type-composer-title-size: 1.35rem;
  --cdr-type-brand-size: 1.85rem;
  --cdr-type-brand-tracking: -1.4px;
  --cdr-type-regular-weight: 400;
  --cdr-type-medium-weight: 550;
  --cdr-type-semibold-weight: 650;
  --cdr-type-title-weight: 750;
  --cdr-type-heading-weight: 800;
  --cdr-type-brand-weight: 900;
  --cdr-space-xxs: 2px;
  --cdr-space-xs: 4px;
  --cdr-space-sm: 8px;
  --cdr-space-md: 12px;
  --cdr-space-lg: 16px;
  --cdr-space-xl: 24px;
  --cdr-space-2xl: 32px;
  --cdr-space-3xl: 48px;
  --cdr-space-control-height: 44px;
  --cdr-space-header-height: 60px;
  --cdr-space-header-mobile-height: 56px;
  --cdr-space-icon: 20px;
  --cdr-radius-small: 4px;
  --cdr-radius-control: 7px;
  --cdr-radius-field: 10px;
  --cdr-radius-panel: 16px;
  --cdr-radius-menu: 19px;
  --cdr-radius-card: 26px;
  --cdr-radius-card-mobile: 19px;
  --cdr-radius-composer: 30px;
  --cdr-radius-pill: 999px;
  --cdr-radius-avatar: 50%;
  --cdr-shadow-card: 0 6px 35px #29244206;
  --cdr-shadow-paper: 0 1px 3px #21205009, 0 10px 40px #312d6505;
  --cdr-shadow-composer: 0 6px 40px #27233e08;
  --cdr-shadow-menu: 0 3px 8px #29203810, 0 20px 60px #29203820;
  --cdr-shadow-menu-mobile: 0 5px 15px #29203814, 0 20px 60px #29203830;
  --cdr-shadow-dialog: 0 20px 100px #00000044;
  --purple: var(--cdr-color-purple);
  --ink: var(--cdr-color-ink);
  --muted: var(--cdr-color-muted);
  --line: var(--cdr-color-line);
  --page-background: var(--cdr-color-page);
  --paper: var(--cdr-color-surface);
  --mint: var(--cdr-color-mint);
}

/* Local Inter subsets. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  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;
}

/* Canonical primitives extracted from the static demo. Product layouts belong
   to their adapters. This sheet deliberately avoids unscoped element resets. */
.cdr-scope {
  color: var(--cdr-color-ink);
  font-family: var(--cdr-font-family);
  font-size: var(--cdr-type-body-size);
  line-height: var(--cdr-type-body-leading);
  font-synthesis: none;
}
.cdr-scope *, .cdr-scope *::before, .cdr-scope *::after { box-sizing: border-box; }
.cdr-scope [hidden] { display: none !important; }
.cdr-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.cdr-icon {
  width: var(--cdr-space-icon); height: var(--cdr-space-icon); flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.cdr-logo {
  display: inline-flex; align-items: center; gap: 0;
  color: var(--cdr-color-purple); font-family: var(--cdr-font-family);
  font-weight: var(--cdr-type-brand-weight); font-size: var(--cdr-type-brand-size);
  letter-spacing: var(--cdr-type-brand-tracking); line-height: 1.2;
  white-space: nowrap; text-decoration: none;
}
.cdr-logo > span {
  display: inline-block; margin-left: 3px; padding: 0 5px;
  color: var(--cdr-color-ink); background: var(--cdr-color-highlight);
  border-radius: var(--cdr-radius-small); transform: rotate(-7deg);
}
.cdr-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  max-width: 100%; min-width: 0; min-height: var(--cdr-space-control-height);
  padding: 9px 17px; border: 1px solid var(--cdr-color-purple);
  border-radius: var(--cdr-radius-pill); background: var(--cdr-color-surface);
  color: var(--cdr-color-purple); font: inherit; font-family: var(--cdr-font-family);
  font-size: var(--cdr-type-small-size); font-weight: var(--cdr-type-semibold-weight);
  line-height: 1.35; text-align: center; text-decoration: none;
  overflow-wrap: anywhere; white-space: normal; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.cdr-button:hover { background: var(--cdr-color-soft-purple); }
.cdr-button--primary {
  background: var(--cdr-color-action); border-color: var(--cdr-color-action);
  color: var(--cdr-color-surface);
}
.cdr-button--primary:hover { background: var(--cdr-color-action-hover); border-color: var(--cdr-color-action-hover); }
.cdr-button--secondary { border-color: var(--cdr-color-line); color: var(--cdr-color-muted); }
.cdr-button--secondary:hover { background: var(--cdr-color-soft-neutral); }
.cdr-button--quiet { border-color: transparent; background: transparent; padding-inline: 0; }
.cdr-button--quiet:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.cdr-button--danger { color: var(--cdr-color-danger); border-color: var(--cdr-color-danger); }
.cdr-button--danger:hover { background: var(--cdr-color-danger-background); }
.cdr-button--icon { width: var(--cdr-space-control-height); padding: 9px; flex-shrink: 0; }
.cdr-button:disabled, .cdr-button[aria-disabled="true"] { opacity: .6; cursor: default; }
.cdr-button[aria-busy="true"] { cursor: wait; }
.cdr-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--cdr-radius-avatar); overflow: hidden;
  background: var(--cdr-color-purple); color: var(--cdr-color-surface);
  font-family: var(--cdr-font-family); font-size: var(--cdr-type-caption-size);
  font-weight: 700; line-height: 1;
}
.cdr-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cdr-avatar--small { width: 30px; height: 30px; font-size: .6875rem; }
.cdr-avatar--large { width: 86px; height: 86px; font-size: 1.75rem; font-weight: 750; }
.cdr-avatar[data-color="coral"] { background: var(--cdr-color-coral); }
.cdr-avatar[data-color="mint"] { background: var(--cdr-color-mint); color: var(--cdr-color-mint-ink); }
.cdr-avatar[data-color="sky"], .cdr-avatar[data-color="blue"] { background: var(--cdr-color-blue); }
.cdr-avatar[data-color="yellow"] { background: var(--cdr-color-yellow); color: var(--cdr-color-yellow-ink); }
.cdr-avatar[data-color="lavender"] { background: var(--cdr-color-lavender); color: var(--cdr-color-lavender-ink); }
.cdr-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px;
  border-radius: var(--cdr-radius-small); background: var(--cdr-color-soft-neutral);
  color: var(--cdr-color-muted); font-family: var(--cdr-font-family);
  font-size: var(--cdr-type-caption-size); font-weight: 600; line-height: 1.35;
  overflow-wrap: anywhere;
}
.cdr-badge--photos { background: var(--cdr-color-photos-background); color: var(--cdr-color-photos); }
.cdr-badge--info { background: var(--cdr-color-info-background); color: var(--cdr-color-info); }
.cdr-badge--reply { background: var(--cdr-color-reply-background); color: var(--cdr-color-reply); }
.cdr-badge--success { background: var(--cdr-color-success-background); color: var(--cdr-color-success); }
.cdr-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cdr-field > label { color: var(--cdr-color-ink); font-size: var(--cdr-type-small-size); font-weight: 650; }
.cdr-input {
  width: 100%; min-width: 0; min-height: var(--cdr-space-control-height);
  padding: 10px 13px; border: 1px solid var(--cdr-color-field-line);
  border-radius: var(--cdr-radius-field); background: var(--cdr-color-surface);
  color: var(--cdr-color-ink); font: inherit; font-size: var(--cdr-type-body-size);
  line-height: 1.6;
}
.cdr-input::placeholder { color: var(--cdr-color-muted); opacity: 1; }
textarea.cdr-input { min-height: 100px; resize: vertical; }
.cdr-input[aria-invalid="true"] { border-color: var(--cdr-color-danger); }
.cdr-input:disabled { opacity: .6; cursor: default; }
.cdr-help, .cdr-error { margin: 0; font-size: var(--cdr-type-small-size); line-height: 1.6; overflow-wrap: anywhere; }
.cdr-help { color: var(--cdr-color-muted); }
.cdr-error { color: var(--cdr-color-danger); }
.cdr-card {
  min-width: 0; padding: var(--cdr-space-xl); border: 1px solid var(--cdr-color-line);
  border-radius: var(--cdr-radius-card); background: var(--cdr-color-surface);
  color: var(--cdr-color-ink); box-shadow: var(--cdr-shadow-card);
}
.cdr-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: var(--cdr-space-control-height); padding: 7px 12px;
  border: 1px solid var(--cdr-color-line); border-radius: var(--cdr-radius-pill);
  background: var(--cdr-color-surface); color: var(--cdr-color-purple);
  font: inherit; font-size: var(--cdr-type-caption-size); font-weight: 600;
  line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; cursor: pointer;
}
.cdr-chip:hover { background: var(--cdr-color-soft-purple); }
.cdr-chip[aria-pressed="true"], .cdr-chip[aria-selected="true"] {
  background: var(--cdr-color-purple); color: var(--cdr-color-surface); border-color: var(--cdr-color-purple);
}
.cdr-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cdr-space-xxs); }
.cdr-tabs > :is(a, button) {
  display: inline-flex; align-items: center; min-height: var(--cdr-space-control-height);
  padding: 9px 10px; border: 0; border-radius: var(--cdr-radius-control);
  background: transparent; color: var(--cdr-color-muted); font: inherit;
  font-size: var(--cdr-type-small-size); text-decoration: none; cursor: pointer;
}
.cdr-tabs > :is(a, button):hover { background: var(--cdr-color-soft-hover); }
.cdr-tabs > :is([aria-current="page"], [aria-pressed="true"], [aria-selected="true"]) {
  color: var(--cdr-color-purple); background: var(--cdr-color-soft-purple); font-weight: 650;
}
.cdr-menu {
  width: 480px; max-width: 100%; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--cdr-color-line); border-radius: var(--cdr-radius-menu);
  background: var(--cdr-color-surface); color: var(--cdr-color-ink);
  box-shadow: var(--cdr-shadow-menu); scrollbar-width: thin;
}
.cdr-menu__header { display: flex; align-items: center; gap: 11px; padding: 17px 20px; border-bottom: 1px solid var(--cdr-color-line); }
.cdr-menu__section { padding: 7px 14px 12px; }
.cdr-menu__section + .cdr-menu__section { border-top: 1px solid var(--cdr-color-line); }
.cdr-menu__title { margin: 4px 6px 7px; color: var(--cdr-color-muted); font-size: var(--cdr-type-caption-size); font-weight: 600; }
.cdr-menu__entry {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 51px;
  padding: 9px 10px; margin: 2px 0; border: 0; border-radius: 9px; background: transparent;
  color: inherit; font: inherit; font-size: var(--cdr-type-small-size); text-align: left;
  text-decoration: none; cursor: pointer;
}
.cdr-menu__entry:hover { background: var(--cdr-color-soft-hover); }
.cdr-menu__entry[aria-current="page"] { background: var(--cdr-color-rail); }
.cdr-menu__entry > div { flex: 1; min-width: 0; }
.cdr-menu__entry strong { display: block; font-size: var(--cdr-type-small-size); font-weight: 550; }
.cdr-menu__entry small { display: block; color: var(--cdr-color-muted); font-size: var(--cdr-type-caption-size); line-height: 1.5; margin-top: 2px; }
:is(.cdr-button, .cdr-chip, .cdr-input, .cdr-logo, .cdr-tabs > *, .cdr-menu__entry):focus-visible {
  outline: 3px solid var(--cdr-color-purple); outline-offset: 3px;
}
@media (max-width: 640px) {
  .cdr-card { border-radius: var(--cdr-radius-card-mobile); padding: 20px; }
  .cdr-menu { border-radius: var(--cdr-radius-panel); box-shadow: var(--cdr-shadow-menu-mobile); }
  .cdr-menu__header { padding: 14px 16px; }
  .cdr-menu__section { padding: 8px 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdr-button { transition: none; }
}
@media (forced-colors: active) {
  :is(.cdr-button, .cdr-chip, .cdr-input, .cdr-logo, .cdr-tabs > *, .cdr-menu__entry):focus-visible { outline-color: CanvasText; }
  .cdr-chip[aria-pressed="true"], .cdr-tabs > [aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

*{box-sizing:border-box}html{scroll-padding-top:1rem}body{margin:0;background:#f9f8fc;color:var(--cdr-color-ink);font-family:Arial,sans-serif;line-height:1.6}header,footer,main{max-width:800px;margin:auto;padding:24px}main{background:white;border:1px solid #e4e0ee;border-radius:22px}h1{font-size:2rem;line-height:1.25}h2{font-size:1.25rem;margin-top:2rem;line-height:1.4}a{color:var(--cdr-color-purple);text-underline-offset:3px}header a,footer a{display:inline-flex;min-height:44px;align-items:center}a:focus-visible,main:focus-visible{outline:3px solid var(--cdr-color-purple);outline-offset:3px}li{margin:8px 0}.skip{position:absolute;left:12px;top:0;transform:translateY(-150%);padding:10px;background:white}.skip:focus{transform:none}footer p{color:var(--cdr-color-muted);font-size:.875rem}@media(max-width:640px){main{border-radius:0;border-inline:0}header,footer,main{padding:20px}h1{font-size:1.75rem}}@media(forced-colors:active){:focus-visible{outline-color:CanvasText}}