@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manrope:wght@200..800&display=swap");@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');

:where(*, *::before, *::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  min-width: 0;
}

:where(html) {
  block-size: 100%;
  text-size-adjust: none;
  interpolate-size: allow-keywords;
}

:where(body) {
  min-block-size: 100vh;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
  font-weight: bold;
  margin-block: 0;
}

:where(p) {
  text-wrap: pretty;
  margin-block: 0;
}

:where(ul, ol) {
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

:where(img, svg, video, canvas) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

:where(input, textarea, select, button) {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: currentColor;
}

:where(textarea, select, input) {
  field-sizing: content;
}

:where(select) {
  appearance: base-select;
}

:where(button) {
  appearance: none;
  background: none;
  cursor: pointer;
  text-align: inherit;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(:focus-visible) {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

:root {
	--color-brand-1: oklch(0.9711476052928827 0.013555383941428474 261.37123615135886);
	--color-brand-5: oklch(0.9323973692905733 0.03240943569090831 259.3752099398267);
	--color-brand-7: oklch(0.9071797618023052 0.04499077160871579 259.08739628347325);
	--color-brand-10: oklch(0.866256751444062 0.06585441673265693 259.21637309575);
	--color-brand-20: oklch(0.7478958715720843 0.1293146666951013 262.11359881091164);
	--color-brand-30: oklch(0.6509136694456766 0.18578682612871325 262.559966066137);
	--color-brand-40: oklch(0.5663470261850462 0.21439569041245357 263.45743782053194);
	--color-brand-50: oklch(0.4869461318320599 0.21265492704634234 264.50060959071544);
	--color-brand-60: oklch(0.4169880480703586 0.19575561691249516 264.9690514421961);
	--color-brand-70: oklch(0.3554619163917039 0.16355423411288994 264.79866861021804);
	--color-brand-80: oklch(0.28358425762952216 0.12661175903033886 264.1401028903014);
	--color-brand-90: oklch(0.20120553102583863 0.08414729161142655 261.1259926797181);
	--color-brand-93: oklch(0.1693511312457257 0.07065644287160322 261.1259926797181);
	--color-brand-95: oklch(0.15097495672159908 0.06289022160828227 261.1259926797181);
	--color-brand-99: oklch(0.12 0.0498312527890926 261.1259926797181);
	--color-neutral-1: oklch(0.97845988 0.005354730939831005 264.5287908705319);
	--color-neutral-5: oklch(0.95127606 0.009695360769345348 266.93579396053195);
	--color-neutral-7: oklch(0.93709285 0.013097726015270181 266.1727147005319);
	--color-neutral-10: oklch(0.91692611 0.018564784291236366 264.5506932905319);
	--color-neutral-20: oklch(0.86696024 0.03027565671134668 263.6812497705319);
	--color-neutral-30: oklch(0.81011129 0.04062644393481681 263.2428964405319);
	--color-neutral-40: oklch(0.72717486 0.04759164003299629 263.45743782053194);
	--color-neutral-50: oklch(0.5989269 0.05199554136370739 264.07048392053196);
	--color-neutral-60: oklch(0.47810822 0.04447945855299962 263.2852936505319);
	--color-neutral-70: oklch(0.38754138 0.039564625129031195 264.56569728053194);
	--color-neutral-80: oklch(0.31010615 0.03664200672242711 263.0406973705319);
	--color-neutral-90: oklch(0.24550477 0.026723493728914124 263.4865303005319);
	--color-neutral-93: oklch(0.19338986 0.021400449829728257 263.4865303005319);
	--color-neutral-95: oklch(0.16494895 0.01846318092866258 263.4865303005319);
	--color-neutral-99: oklch(0.12 0.013758225023127409 263.4865303005319);
	--color-informative-1: oklch(0.9746632 0.011799445656143302 264.82259595);
	--color-informative-5: oklch(0.94178254 0.027691737250429074 261.48495561);
	--color-informative-7: oklch(0.91823037 0.03935384243342764 260.45993900999997);
	--color-informative-10: oklch(0.87933283 0.05905984595797124 259.63629047);
	--color-informative-20: oklch(0.77490245 0.114291398159484 261.8941741);
	--color-informative-30: oklch(0.67908149 0.16114875187778152 262.2058377);
	--color-informative-40: oklch(0.59050862 0.18422193956186803 262.76569201);
	--color-informative-50: oklch(0.51026643 0.19034959505695134 264.02952208);
	--color-informative-60: oklch(0.44000333 0.17910178203687427 264.64726443);
	--color-informative-70: oklch(0.37579135 0.1494892721169335 264.18801366);
	--color-informative-80: oklch(0.29514948 0.11270264035455084 263.20209508);
	--color-informative-90: oklch(0.19852229 0.06787846874171398 259.83853848);
	--color-informative-93: oklch(0.16785461 0.05731884393074048 259.83853848);
	--color-informative-95: oklch(0.15008914 0.05120910374124234 259.83853848);
	--color-informative-99: oklch(0.12 0.04087529341836389 259.83853848);
	--color-positive-1: oklch(0.98827811 0.01923056946255739 145.90017087);
	--color-positive-5: oklch(0.96353691 0.04669185519252253 147.42018577);
	--color-positive-7: oklch(0.95324991 0.05894207702863159 147.83457833);
	--color-positive-10: oklch(0.93906088 0.07666093704606819 148.26705913);
	--color-positive-20: oklch(0.89323686 0.13451622058377502 149.07921108);
	--color-positive-30: oklch(0.8505402 0.17638627687778152 149.7811939);
	--color-positive-40: oklch(0.77513589 0.20889296006186803 150.90374495);
	--color-positive-50: oklch(0.70076253 0.19593612051451445 149.37094596);
	--color-positive-60: oklch(0.59904566 0.16818843674121337 149.19890324);
	--color-positive-70: oklch(0.45610028 0.12421399597853358 150.47297305);
	--color-positive-80: oklch(0.37540954 0.10029312241683705 151.30684273);
	--color-positive-90: oklch(0.26989237 0.0682603937357553 153.83611108);
	--color-positive-93: oklch(0.2059938 0.05209515859046491 153.83611108);
	--color-positive-95: oklch(0.17204017 0.04351520524934404 153.83611108);
	--color-positive-99: oklch(0.12 0.0303362403684402 153.83611108);
	--color-warning-1: oklch(0.98870449 0.010686617689264578 81.82792737);
	--color-warning-5: oklch(0.96321366 0.03701232904762449 83.52799891);
	--color-warning-7: oklch(0.95232216 0.04803553393177591 83.41224116);
	--color-warning-10: oklch(0.93660869 0.0634144690529243 82.95774317);
	--color-warning-20: oklch(0.8780009 0.10840884152025744 77.24356911);
	--color-warning-30: oklch(0.81662267 0.14723532818281054 70.14218522);
	--color-warning-40: oklch(0.7457395 0.17230527956186803 60.08050387);
	--color-warning-50: oklch(0.64854826 0.16784627855695136 50.33832974);
	--color-warning-60: oklch(0.57333525 0.1554316195368743 46.55892095);
	--color-warning-70: oklch(0.46973444 0.13729245211693347 40.72853691);
	--color-warning-80: oklch(0.35067791 0.10994008085455083 36.4220747);
	--color-warning-90: oklch(0.22379369 0.07032166624171397 36.72863831);
	--color-warning-93: oklch(0.1818133 0.05747445343074048 36.72863831);
	--color-warning-95: oklch(0.15829876 0.05024688674124234 36.72863831);
	--color-warning-99: oklch(0.12 0.03841366791836389 36.72863831);
	--color-negative-1: oklch(0.9716031 0.014185698762183133 7.01356397);
	--color-negative-5: oklch(0.90761777 0.046561907192522525 6.769802479999999);
	--color-negative-7: oklch(0.8815184 0.06164560402863158 7.251737540000001);
	--color-negative-10: oklch(0.8460532 0.08339559754606819 8.59298194);
	--color-negative-20: oklch(0.7349607 0.15119214958377503 11.596570190000001);
	--color-negative-30: oklch(0.64898947 0.20110598537778152 15.324680959999998);
	--color-negative-40: oklch(0.58999719 0.22234985406186805 19.56226189);
	--color-negative-50: oklch(0.53735295 0.21587117655695137 21.96626467);
	--color-negative-60: oklch(0.47817104 0.19271655571085358 22.29836561);
	--color-negative-70: oklch(0.40476123 0.1629736065407833 21.79110318);
	--color-negative-80: oklch(0.3123729 0.12556772929509363 20.76227727);
	--color-negative-90: oklch(0.20013662 0.08015115463782335 17.83910085);
	--color-negative-93: oklch(0.16876334 0.0675757683896614 17.83910085);
	--color-negative-95: oklch(0.15063035 0.06031901383095313 17.83910085);
	--color-negative-99: oklch(0.12 0.048060726876351816 17.83910085);
	--color-data-red-1: oklch(0.9718804402389815 0.014231777039079902 6.7000430003890425);
	--color-data-red-5: oklch(0.9172343987953091 0.044594529301402716 4.133968558954311);
	--color-data-red-7: oklch(0.8944906592072673 0.05782910562578064 4.891117079268606);
	--color-data-red-10: oklch(0.8624203998605184 0.07784938612763752 4.772744134791725);
	--color-data-red-20: oklch(0.7588420408984697 0.14942130145770943 8.297527325945058);
	--color-data-red-30: oklch(0.6804139670455441 0.20555353064261594 12.42831021187908);
	--color-data-red-40: oklch(0.6103587172544408 0.22232886295807866 16.891505536244654);
	--color-data-red-50: oklch(0.549754435149482 0.21592734122540283 20.642814706920824);
	--color-data-red-60: oklch(0.4880114954579161 0.1967919732648897 22.535086370239103);
	--color-data-red-70: oklch(0.4126332127538849 0.16620869736103688 21.92342186525203);
	--color-data-red-80: oklch(0.31826674138040223 0.12786752568863202 20.321278601798383);
	--color-data-red-90: oklch(0.20160922624349534 0.08059921025366307 14.915754691291081);
	--color-data-red-93: oklch(0.1707394992327277 0.06826229762274713 15.065819835781218);
	--color-data-red-95: oklch(0.15199567155129076 0.06078839567786458 15.742073607588125);
	--color-data-red-99: oklch(0.11868550286345414 0.047452805249741756 15.158584165516432);
	--color-data-orange-1: oklch(0.9790232845924405 0.011071963585576904 45.724280915014);
	--color-data-orange-5: oklch(0.9393167775539992 0.03427774010318221 50.21288028839966);
	--color-data-orange-7: oklch(0.9232632684203792 0.04397769026965778 50.41724007206478);
	--color-data-orange-10: oklch(0.9005785250256416 0.05823071083180971 50.80995048985735);
	--color-data-orange-20: oklch(0.8179127136057025 0.11120366514225062 47.272006584204945);
	--color-data-orange-30: oklch(0.7451594846584414 0.15562653429094886 45.510327425959154);
	--color-data-orange-40: oklch(0.6683642655694888 0.17495775388351426 43.692734899189745);
	--color-data-orange-50: oklch(0.5954981379430132 0.17889305590113966 40.76696043789283);
	--color-data-orange-60: oklch(0.5234417212539576 0.1652825602707391 39.702427493794886);
	--color-data-orange-70: oklch(0.44461447316608155 0.13770965630107204 40.65707443941892);
	--color-data-orange-80: oklch(0.34514581913762726 0.10365227973121567 42.25440396809288);
	--color-data-orange-90: oklch(0.22672743122224437 0.06139162984894657 48.37608314349163);
	--color-data-orange-93: oklch(0.1836669486541778 0.04931798003909069 48.93269765826257);
	--color-data-orange-95: oklch(0.1578763835580003 0.04348001372524851 47.27908447426724);
	--color-data-orange-99: oklch(0.12148106466407746 0.032077036571563605 50.084269119655225);
	--color-data-yellow-1: oklch(0.9906485557137713 0.013529049869998682 92.97794518703621);
	--color-data-yellow-5: oklch(0.9752005220481564 0.0485257134894244 98.35967772268641);
	--color-data-yellow-7: oklch(0.9681920383592053 0.0636947719824131 98.78053925707282);
	--color-data-yellow-10: oklch(0.9604487330746126 0.0843658750479207 99.79206688963153);
	--color-data-yellow-20: oklch(0.9210340009846305 0.13669276306176406 96.69338466344347);
	--color-data-yellow-30: oklch(0.8824768650265163 0.1658250755529273 92.3424072789576);
	--color-data-yellow-40: oklch(0.8460848577848006 0.17232593619730555 85.41281101603357);
	--color-data-yellow-50: oklch(0.7751667302763035 0.15887842674485284 84.95000664138473);
	--color-data-yellow-60: oklch(0.688122898842151 0.1411193005979115 84.54275234529722);
	--color-data-yellow-70: oklch(0.5807371134096053 0.11892469731281752 85.64625278610613);
	--color-data-yellow-80: oklch(0.44749229590199696 0.09159836413665043 86.0522725546347);
	--color-data-yellow-90: oklch(0.2877530090950656 0.058806797855291366 90.18858002504882);
	--color-data-yellow-93: oklch(0.2141284143404587 0.043760098639786214 90.15310251224184);
	--color-data-yellow-95: oklch(0.17709944584230985 0.0361956549205268 90.44590665796358);
	--color-data-yellow-99: oklch(0.11894382775331705 0.0243299946864451 86.82576183925379);
	--color-data-green-1: oklch(0.9919725088816393 0.01815849564119462 127.13136410334575);
	--color-data-green-5: oklch(0.9598461293240769 0.047026861344329034 125.5376517369246);
	--color-data-green-7: oklch(0.9467665428848031 0.058010054030411706 125.4368293946652);
	--color-data-green-10: oklch(0.9286473958644478 0.07336918262471005 126.1185252526234);
	--color-data-green-20: oklch(0.8750699120518993 0.12822423484609877 127.64689632988797);
	--color-data-green-30: oklch(0.8152103062589703 0.16115560568187354 128.50025950125587);
	--color-data-green-40: oklch(0.7669351626140364 0.1835524623254344 129.7850599316501);
	--color-data-green-50: oklch(0.7080798397270174 0.1867446347593012 131.2870870753268);
	--color-data-green-60: oklch(0.6344364308081875 0.17522978650381746 132.3872493769161);
	--color-data-green-70: oklch(0.539335906825427 0.14822833978305383 132.03237657463873);
	--color-data-green-80: oklch(0.420318891111602 0.11451050778823599 131.51990326808092);
	--color-data-green-90: oklch(0.2702723144022272 0.07288879550508622 130.13541080974508);
	--color-data-green-93: oklch(0.2063727365468109 0.0551728429195981 129.5492304172569);
	--color-data-green-95: oklch(0.17388245108481712 0.046967068695451565 130.23918551547504);
	--color-data-green-99: oklch(0.12198621123650154 0.03320666911941355 130.75010675932091);
	--color-data-jade-1: oklch(0.988438878282493 0.016429469282122383 162.76623471617336);
	--color-data-jade-5: oklch(0.9550260817170477 0.048291996137430064 163.10222446200572);
	--color-data-jade-7: oklch(0.9413041621441293 0.06037942174024977 162.82792355074935);
	--color-data-jade-10: oklch(0.9222739744843378 0.07628354084791665 163.13322460617292);
	--color-data-jade-20: oklch(0.8661598777217779 0.12827572478767235 160.06963417150664);
	--color-data-jade-30: oklch(0.8117998887452462 0.1604997040283879 157.5576724779652);
	--color-data-jade-40: oklch(0.7528738505765246 0.17350365001396928 155.3016670320451);
	--color-data-jade-50: oklch(0.6957548105942137 0.17537949519628146 153.16018348129126);
	--color-data-jade-60: oklch(0.6238296725192576 0.16408243591191404 151.94819327082442);
	--color-data-jade-70: oklch(0.5314354375086092 0.13926456713445678 152.0791393850479);
	--color-data-jade-80: oklch(0.40994387204591953 0.10548374431896729 153.0285434169624);
	--color-data-jade-90: oklch(0.264725326269536 0.0645517382085749 155.71402387207382);
	--color-data-jade-93: oklch(0.20294523163908895 0.048861962863363195 156.39219636827036);
	--color-data-jade-95: oklch(0.17211993753306842 0.041581993986279174 156.208373313746);
	--color-data-jade-99: oklch(0.11846428350072426 0.027355566661573325 158.75341744533915);
	--color-data-blue-1: oklch(0.9844728006973901 0.01130764840859291 217.5411140566753);
	--color-data-blue-5: oklch(0.9556190692844496 0.03493640117746601 214.48383505317156);
	--color-data-blue-7: oklch(0.9443644018894066 0.04430554770694054 214.15696569146962);
	--color-data-blue-10: oklch(0.9282831239763802 0.0575123390279293 214.09553791704968);
	--color-data-blue-20: oklch(0.864829774568796 0.0978689928280135 219.92419316001983);
	--color-data-blue-30: oklch(0.8044522885231404 0.12537284953246045 224.25549198029222);
	--color-data-blue-40: oklch(0.7345801746462975 0.13253955604258286 226.60747341681397);
	--color-data-blue-50: oklch(0.6611863284941688 0.12951367526859775 229.8711539430866);
	--color-data-blue-60: oklch(0.5844299337549927 0.11747900310118141 230.7610861771701);
	--color-data-blue-70: oklch(0.4945057236707735 0.09895109413300385 230.36551987641585);
	--color-data-blue-80: oklch(0.3826507758050058 0.07554491824256623 229.1559440098074);
	--color-data-blue-90: oklch(0.24955704283749106 0.04684173106704001 223.93058791591972);
	--color-data-blue-93: oklch(0.19434768452880363 0.036677183316817706 224.55553479858492);
	--color-data-blue-95: oklch(0.16493025227958658 0.030819642290248753 223.40196324591042);
	--color-data-blue-99: oklch(0.11982332756631395 0.02303638948830213 226.5652570089393);
	--color-data-indigo-1: oklch(0.972708941237764 0.012755905914546341 266.70121799595177);
	--color-data-indigo-5: oklch(0.9179148804681543 0.034833728975013446 265.99087329485025);
	--color-data-indigo-7: oklch(0.8964341642034698 0.04398018641684633 265.58945387223173);
	--color-data-indigo-10: oklch(0.86505539457964 0.056827479552026536 264.2169015073306);
	--color-data-indigo-20: oklch(0.7521067533132909 0.1055682456846421 263.6283546393575);
	--color-data-indigo-30: oklch(0.6492083382128413 0.14383799086911667 262.9326133716509);
	--color-data-indigo-40: oklch(0.5619503059791643 0.16783837724024195 262.5022792834604);
	--color-data-indigo-50: oklch(0.4803192630117981 0.18190391586736265 262.1164107142865);
	--color-data-indigo-60: oklch(0.40562696836195744 0.1780443704914012 262.2760879128307);
	--color-data-indigo-70: oklch(0.34670974665793114 0.15069787544094773 262.1330816832343);
	--color-data-indigo-80: oklch(0.2722349237291943 0.11337343159756699 261.2736785845515);
	--color-data-indigo-90: oklch(0.18250119028686 0.0669986619166755 259.50540866071304);
	--color-data-indigo-93: oklch(0.15830972135992527 0.057864791462605876 260.3080670427249);
	--color-data-indigo-95: oklch(0.14284240200339393 0.05529024493246186 258.9703307891706);
	--color-data-indigo-99: oklch(0.12001423489490069 0.043955484198451696 257.75261600547185);
	--color-data-violet-1: oklch(0.9710800111278929 0.019122119302305975 312.80224424826974);
	--color-data-violet-5: oklch(0.9033010816153959 0.043954000888513305 314.1513299371137);
	--color-data-violet-7: oklch(0.8753256677990584 0.0546574492087956 313.4416278178446);
	--color-data-violet-10: oklch(0.8392399974363406 0.06734508676225356 313.23457443442373);
	--color-data-violet-20: oklch(0.7173521199474081 0.12280089671457978 313.4044348848824);
	--color-data-violet-30: oklch(0.612040262624418 0.15882861731325904 312.58434247238444);
	--color-data-violet-40: oklch(0.5307284988189412 0.1950850851927603 311.43201422108484);
	--color-data-violet-50: oklch(0.46403628054692986 0.20804206490853513 309.9116805289174);
	--color-data-violet-60: oklch(0.4018000448432389 0.19614044997348676 308.35736243505477);
	--color-data-violet-70: oklch(0.34283188947182336 0.16812374827842014 308.1122334948422);
	--color-data-violet-80: oklch(0.267742610207353 0.1316212290817445 308.4221168834999);
	--color-data-violet-90: oklch(0.1756480879627351 0.08467229046510968 310.6317771570051);
	--color-data-violet-93: oklch(0.15627655834110546 0.07402721678348281 310.26750280069524);
	--color-data-violet-95: oklch(0.1435162739131725 0.06696438496838376 309.4922488422501);
	--color-data-violet-99: oklch(0.11789376348230819 0.0591407001974482 311.5407995938328);
	--color-data-pink-1: oklch(0.9732875678410473 0.01665169593157021 343.6099036135233);
	--color-data-pink-5: oklch(0.9027505674878685 0.05954502975096536 342.11322545203984);
	--color-data-pink-7: oklch(0.8735023344237556 0.07642646063609325 342.6482387167886);
	--color-data-pink-10: oklch(0.8372426844791635 0.09896670461471853 343.5930352886594);
	--color-data-pink-20: oklch(0.7265195138861764 0.17104021323692137 346.03659975472635);
	--color-data-pink-30: oklch(0.6507023551377351 0.2123550560023689 348.7827064654016);
	--color-data-pink-40: oklch(0.5907814162573789 0.22591249866582924 351.2577392501333);
	--color-data-pink-50: oklch(0.5355465211282694 0.21615641775195515 353.90969165200846);
	--color-data-pink-60: oklch(0.47759925612028986 0.19597834728103658 355.19135390069795);
	--color-data-pink-70: oklch(0.4051517196710557 0.16649614023239007 354.6815513703654);
	--color-data-pink-80: oklch(0.3132016435720158 0.12914743638983264 353.55294134864846);
	--color-data-pink-90: oklch(0.20147394040863942 0.08425610359942942 349.34522316912995);
	--color-data-pink-93: oklch(0.16924922258177458 0.0708870450346994 348.9277014487227);
	--color-data-pink-95: oklch(0.15198910513558325 0.06331509100403065 350.44324977031147);
	--color-data-pink-99: oklch(0.12018609976767909 0.050191695558627056 349.7341844832758);
	--spacing: 0.25rem;
	--radius-none: 0px;
	--radius-xs: 0.125rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-3xl: 1.5rem;
	--radius-4xl: 2rem;
	--radius-full: 9999px;
	--shadow-sm: 0 1px 2px 0 oklch(from var(--color-neutral-90) l c h / 0.05);
	--shadow-md: 0 4px 6px -1px oklch(from var(--color-neutral-90) l c h / 0.1), 0 2px 4px -2px oklch(from var(--color-neutral-90) l c h / 0.1);
	--shadow-lg: 0 10px 15px -3px oklch(from var(--color-neutral-90) l c h / 0.1), 0 4px 6px -4px oklch(from var(--color-neutral-90) l c h / 0.1);
	--shadow-xl: 0 20px 25px -5px oklch(from var(--color-neutral-90) l c h / 0.1), 0 8px 10px -6px oklch(from var(--color-neutral-90) l c h / 0.1);
	--opacity-hover: 0.08;
	--opacity-pressed: 0.12;
	--opacity-secondary: 0.8;
	--opacity-disabled: 0.4;
	--opacity-overlay: 0.1;
	--z-index-dropdown: 1000;
	--z-index-sticky: 1100;
	--z-index-overlay: 1200;
	--z-index-modal: 1300;
	--z-index-popover: 1400;
	--z-index-toast: 1500;
	--z-index-tooltip: 1600;
}

.typography-display-large {
  font-family: "Manrope", sans-serif;
  font-size: 3.5rem;
  line-height: 4rem;
  font-weight: 800;
}

.typography-display-medium {
  font-family: "Manrope", sans-serif;
  font-size: 2.75rem;
  line-height: 3.25rem;
  font-weight: 700;
}

.typography-display-small {
  font-family: "Manrope", sans-serif;
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 600;
}

.typography-title-large {
  font-family: "Manrope", sans-serif;
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 600;
}

.typography-title-medium {
  font-family: "Manrope", sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}

.typography-title-small {
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.typography-body-large {
  font-family: "Geist", sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 400;
}

.typography-body-medium {
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

.typography-body-small {
  font-family: "Geist", sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}

.typography-label-large {
  font-family: "Geist", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.typography-label-medium {
  font-family: "Geist", sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.typography-label-small {
  font-family: "Geist", sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.typography-mono-large {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

.typography-mono-medium {
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.typography-mono-small {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

[data-theme="light"] {
	--color-surface: var(--color-neutral-1);
	--color-on-surface: var(--color-neutral-99);
	--color-surface-container: var(--color-neutral-7);
	--color-on-surface-container: var(--color-neutral-99);
	--color-inverse-surface: var(--color-neutral-99);
	--color-on-inverse-surface: var(--color-neutral-1);
	--color-outline: var(--color-neutral-20);
	--color-outline-variant: var(--color-neutral-10);
	--color-ring: var(--color-brand-50);
	--color-scrim: color-mix(in oklab, var(--color-neutral-99) calc(var(--opacity-overlay) * 100%), transparent);
	--color-brand-soft: var(--color-brand-10);
	--color-on-brand-soft: var(--color-brand-99);
	--color-brand: var(--color-brand-50);
	--color-on-brand: var(--color-brand-1);
	--color-brand-bright: var(--color-brand-30);
	--color-on-brand-bright: var(--color-brand-99);
	--color-text-brand: var(--color-brand-50);
	--color-informative-soft: var(--color-informative-10);
	--color-on-informative-soft: var(--color-informative-99);
	--color-informative: var(--color-informative-50);
	--color-on-informative: var(--color-informative-1);
	--color-informative-bright: var(--color-informative-30);
	--color-on-informative-bright: var(--color-informative-99);
	--color-text-informative: var(--color-informative-50);
	--color-positive-soft: var(--color-positive-10);
	--color-on-positive-soft: var(--color-positive-99);
	--color-positive: var(--color-positive-50);
	--color-on-positive: var(--color-positive-99);
	--color-positive-bright: var(--color-positive-30);
	--color-on-positive-bright: var(--color-positive-99);
	--color-text-positive: var(--color-positive-70);
	--color-warning-soft: var(--color-warning-10);
	--color-on-warning-soft: var(--color-warning-99);
	--color-warning: var(--color-warning-50);
	--color-on-warning: var(--color-warning-99);
	--color-warning-bright: var(--color-warning-30);
	--color-on-warning-bright: var(--color-warning-99);
	--color-text-warning: var(--color-warning-70);
	--color-negative-soft: var(--color-negative-10);
	--color-on-negative-soft: var(--color-negative-99);
	--color-negative: var(--color-negative-50);
	--color-on-negative: var(--color-negative-1);
	--color-negative-bright: var(--color-negative-30);
	--color-on-negative-bright: var(--color-negative-99);
	--color-text-negative: var(--color-negative-50);
	--color-data-red-soft: var(--color-data-red-10);
	--color-on-data-red-soft: var(--color-data-red-99);
	--color-data-red: var(--color-data-red-50);
	--color-on-data-red: var(--color-data-red-1);
	--color-data-red-bright: var(--color-data-red-30);
	--color-on-data-red-bright: var(--color-data-red-99);
	--color-text-data-red: var(--color-data-red-50);
	--color-data-orange-soft: var(--color-data-orange-10);
	--color-on-data-orange-soft: var(--color-data-orange-99);
	--color-data-orange: var(--color-data-orange-50);
	--color-on-data-orange: var(--color-data-orange-99);
	--color-data-orange-bright: var(--color-data-orange-30);
	--color-on-data-orange-bright: var(--color-data-orange-99);
	--color-text-data-orange: var(--color-data-orange-60);
	--color-data-yellow-soft: var(--color-data-yellow-10);
	--color-on-data-yellow-soft: var(--color-data-yellow-99);
	--color-data-yellow: var(--color-data-yellow-50);
	--color-on-data-yellow: var(--color-data-yellow-99);
	--color-data-yellow-bright: var(--color-data-yellow-30);
	--color-on-data-yellow-bright: var(--color-data-yellow-99);
	--color-text-data-yellow: var(--color-data-yellow-80);
	--color-data-green-soft: var(--color-data-green-10);
	--color-on-data-green-soft: var(--color-data-green-99);
	--color-data-green: var(--color-data-green-50);
	--color-on-data-green: var(--color-data-green-99);
	--color-data-green-bright: var(--color-data-green-30);
	--color-on-data-green-bright: var(--color-data-green-99);
	--color-text-data-green: var(--color-data-green-70);
	--color-data-jade-soft: var(--color-data-jade-10);
	--color-on-data-jade-soft: var(--color-data-jade-99);
	--color-data-jade: var(--color-data-jade-50);
	--color-on-data-jade: var(--color-data-jade-99);
	--color-data-jade-bright: var(--color-data-jade-30);
	--color-on-data-jade-bright: var(--color-data-jade-99);
	--color-text-data-jade: var(--color-data-jade-70);
	--color-data-blue-soft: var(--color-data-blue-10);
	--color-on-data-blue-soft: var(--color-data-blue-99);
	--color-data-blue: var(--color-data-blue-50);
	--color-on-data-blue: var(--color-data-blue-99);
	--color-data-blue-bright: var(--color-data-blue-30);
	--color-on-data-blue-bright: var(--color-data-blue-99);
	--color-text-data-blue: var(--color-data-blue-70);
	--color-data-indigo-soft: var(--color-data-indigo-10);
	--color-on-data-indigo-soft: var(--color-data-indigo-99);
	--color-data-indigo: var(--color-data-indigo-50);
	--color-on-data-indigo: var(--color-data-indigo-1);
	--color-data-indigo-bright: var(--color-data-indigo-30);
	--color-on-data-indigo-bright: var(--color-data-indigo-99);
	--color-text-data-indigo: var(--color-data-indigo-50);
	--color-data-violet-soft: var(--color-data-violet-10);
	--color-on-data-violet-soft: var(--color-data-violet-99);
	--color-data-violet: var(--color-data-violet-50);
	--color-on-data-violet: var(--color-data-violet-1);
	--color-data-violet-bright: var(--color-data-violet-30);
	--color-on-data-violet-bright: var(--color-data-violet-99);
	--color-text-data-violet: var(--color-data-violet-40);
	--color-data-pink-soft: var(--color-data-pink-10);
	--color-on-data-pink-soft: var(--color-data-pink-99);
	--color-data-pink: var(--color-data-pink-50);
	--color-on-data-pink: var(--color-data-pink-1);
	--color-data-pink-bright: var(--color-data-pink-30);
	--color-on-data-pink-bright: var(--color-data-pink-99);
	--color-text-data-pink: var(--color-data-pink-50);
}

[data-theme="dark"] {
	--color-surface: var(--color-neutral-99);
	--color-on-surface: var(--color-neutral-1);
	--color-surface-container: var(--color-neutral-93);
	--color-on-surface-container: var(--color-neutral-1);
	--color-inverse-surface: var(--color-neutral-1);
	--color-on-inverse-surface: var(--color-neutral-99);
	--color-outline: var(--color-neutral-80);
	--color-outline-variant: var(--color-neutral-90);
	--color-ring: var(--color-brand-50);
	--color-scrim: color-mix(in oklab, var(--color-neutral-1) calc(var(--opacity-overlay) * 100%), transparent);
	--color-brand-soft: var(--color-brand-80);
	--color-on-brand-soft: var(--color-brand-1);
	--color-brand: var(--color-brand-50);
	--color-on-brand: var(--color-brand-1);
	--color-brand-bright: var(--color-brand-70);
	--color-on-brand-bright: var(--color-brand-1);
	--color-text-brand: var(--color-brand-30);
	--color-informative-soft: var(--color-informative-80);
	--color-on-informative-soft: var(--color-informative-1);
	--color-informative: var(--color-informative-50);
	--color-on-informative: var(--color-informative-1);
	--color-informative-bright: var(--color-informative-70);
	--color-on-informative-bright: var(--color-informative-1);
	--color-text-informative: var(--color-informative-40);
	--color-positive-soft: var(--color-positive-80);
	--color-on-positive-soft: var(--color-positive-1);
	--color-positive: var(--color-positive-50);
	--color-on-positive: var(--color-positive-99);
	--color-positive-bright: var(--color-positive-70);
	--color-on-positive-bright: var(--color-positive-1);
	--color-text-positive: var(--color-positive-60);
	--color-warning-soft: var(--color-warning-80);
	--color-on-warning-soft: var(--color-warning-1);
	--color-warning: var(--color-warning-50);
	--color-on-warning: var(--color-warning-99);
	--color-warning-bright: var(--color-warning-70);
	--color-on-warning-bright: var(--color-warning-1);
	--color-text-warning: var(--color-warning-50);
	--color-negative-soft: var(--color-negative-80);
	--color-on-negative-soft: var(--color-negative-1);
	--color-negative: var(--color-negative-50);
	--color-on-negative: var(--color-negative-1);
	--color-negative-bright: var(--color-negative-70);
	--color-on-negative-bright: var(--color-negative-1);
	--color-text-negative: var(--color-negative-30);
	--color-data-red-soft: var(--color-data-red-80);
	--color-on-data-red-soft: var(--color-data-red-1);
	--color-data-red: var(--color-data-red-50);
	--color-on-data-red: var(--color-data-red-1);
	--color-data-red-bright: var(--color-data-red-70);
	--color-on-data-red-bright: var(--color-data-red-1);
	--color-text-data-red: var(--color-data-red-40);
	--color-data-orange-soft: var(--color-data-orange-80);
	--color-on-data-orange-soft: var(--color-data-orange-1);
	--color-data-orange: var(--color-data-orange-50);
	--color-on-data-orange: var(--color-data-orange-99);
	--color-data-orange-bright: var(--color-data-orange-70);
	--color-on-data-orange-bright: var(--color-data-orange-1);
	--color-text-data-orange: var(--color-data-orange-50);
	--color-data-yellow-soft: var(--color-data-yellow-80);
	--color-on-data-yellow-soft: var(--color-data-yellow-1);
	--color-data-yellow: var(--color-data-yellow-50);
	--color-on-data-yellow: var(--color-data-yellow-99);
	--color-data-yellow-bright: var(--color-data-yellow-70);
	--color-on-data-yellow-bright: var(--color-data-yellow-99);
	--color-text-data-yellow: var(--color-data-yellow-70);
	--color-data-green-soft: var(--color-data-green-80);
	--color-on-data-green-soft: var(--color-data-green-1);
	--color-data-green: var(--color-data-green-50);
	--color-on-data-green: var(--color-data-green-99);
	--color-data-green-bright: var(--color-data-green-70);
	--color-on-data-green-bright: var(--color-data-green-1);
	--color-text-data-green: var(--color-data-green-60);
	--color-data-jade-soft: var(--color-data-jade-80);
	--color-on-data-jade-soft: var(--color-data-jade-1);
	--color-data-jade: var(--color-data-jade-50);
	--color-on-data-jade: var(--color-data-jade-99);
	--color-data-jade-bright: var(--color-data-jade-70);
	--color-on-data-jade-bright: var(--color-data-jade-1);
	--color-text-data-jade: var(--color-data-jade-60);
	--color-data-blue-soft: var(--color-data-blue-80);
	--color-on-data-blue-soft: var(--color-data-blue-1);
	--color-data-blue: var(--color-data-blue-50);
	--color-on-data-blue: var(--color-data-blue-99);
	--color-data-blue-bright: var(--color-data-blue-70);
	--color-on-data-blue-bright: var(--color-data-blue-1);
	--color-text-data-blue: var(--color-data-blue-60);
	--color-data-indigo-soft: var(--color-data-indigo-80);
	--color-on-data-indigo-soft: var(--color-data-indigo-1);
	--color-data-indigo: var(--color-data-indigo-50);
	--color-on-data-indigo: var(--color-data-indigo-1);
	--color-data-indigo-bright: var(--color-data-indigo-70);
	--color-on-data-indigo-bright: var(--color-data-indigo-1);
	--color-text-data-indigo: var(--color-data-indigo-30);
	--color-data-violet-soft: var(--color-data-violet-80);
	--color-on-data-violet-soft: var(--color-data-violet-1);
	--color-data-violet: var(--color-data-violet-50);
	--color-on-data-violet: var(--color-data-violet-1);
	--color-data-violet-bright: var(--color-data-violet-70);
	--color-on-data-violet-bright: var(--color-data-violet-1);
	--color-text-data-violet: var(--color-data-violet-30);
	--color-data-pink-soft: var(--color-data-pink-80);
	--color-on-data-pink-soft: var(--color-data-pink-1);
	--color-data-pink: var(--color-data-pink-50);
	--color-on-data-pink: var(--color-data-pink-1);
	--color-data-pink-bright: var(--color-data-pink-70);
	--color-on-data-pink-bright: var(--color-data-pink-1);
	--color-text-data-pink: var(--color-data-pink-30);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
html,
body {
  background-color: var(--color-surface) !important;
}

body {
  color: var(--color-on-surface);
  font-family:
    "Geist",
    -apple-system,
    "Manrope",
    sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 7);
  font-weight: 400;
}

body.histoire-story {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 8);
}

button.va-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}
*, ::before, ::after {--_histoire-color-primary-50: 240 246 255;--_histoire-color-primary-100: 220 234 255;--_histoire-color-primary-200: 186 213 255;--_histoire-color-primary-300: 128 172 255;--_histoire-color-primary-400: 79 137 255;--_histoire-color-primary-500: 46 105 242;--_histoire-color-primary-600: 31 78 213;--_histoire-color-primary-700: 21 59 180;--_histoire-color-primary-800: 7 33 103;--_histoire-color-primary-900: 1 18 59;--_histoire-color-gray-50: 246 248 252;--_histoire-color-gray-100: 236 239 246;--_histoire-color-gray-200: 221 228 240;--_histoire-color-gray-300: 201 212 232;--_histoire-color-gray-400: 179 193 220;--_histoire-color-gray-500: 151 167 198;--_histoire-color-gray-600: 112 128 160;--_histoire-color-gray-700: 80 93 119;--_histoire-color-gray-750: 50 50 56;--_histoire-color-gray-800: 39 48 67;--_histoire-color-gray-850: 31 31 33;--_histoire-color-gray-900: 26 33 46;--_histoire-color-gray-950: 16 16 18;}

@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)){

.resize-observer[data-v-b329ee4c]{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  border:none;
  background-color:transparent;
  pointer-events:none;
  display:block;
  overflow:hidden;
  opacity:0
}

.resize-observer[data-v-b329ee4c] object{
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:-1
}

.v-popper__popper{
  z-index:10000;
  top:0;
  left:0;
  outline:none
}

.v-popper__popper.v-popper__popper--hidden{
  visibility:hidden;
  opacity:0;
  transition:opacity .15s,visibility .15s;
  pointer-events:none
}

.v-popper__popper.v-popper__popper--shown{
  visibility:visible;
  opacity:1;
  transition:opacity .15s
}

.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{
  transition:none!important
}

.v-popper__backdrop{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none
}

.v-popper__inner{
  position:relative;
  box-sizing:border-box;
  overflow-y:auto
}

.v-popper__inner>div{
  position:relative;
  z-index:1;
  max-width:inherit;
  max-height:inherit
}

.v-popper__arrow-container{
  position:absolute;
  width:10px;
  height:10px
}

.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{
  display:none
}

.v-popper__arrow-inner,.v-popper__arrow-outer{
  border-style:solid;
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0
}

.v-popper__arrow-inner{
  visibility:hidden;
  border-width:7px
}

.v-popper__arrow-outer{
  border-width:6px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  left:-2px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  left:-1px
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{
  border-bottom-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{
  top:0
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  border-top-width:0;
  border-left-color:transparent!important;
  border-right-color:transparent!important;
  border-top-color:transparent!important
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{
  top:-4px
}

.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{
  top:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  top:-2px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  top:-1px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  border-left-width:0;
  border-left-color:transparent!important;
  border-top-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{
  left:-4px
}

.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{
  left:-6px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{
  right:-10px
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{
  border-right-width:0;
  border-top-color:transparent!important;
  border-right-color:transparent!important;
  border-bottom-color:transparent!important
}

.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{
  left:-2px
}

.v-popper--theme-tooltip .v-popper__inner{
  background:rgba(0,0,0,.8);
  color:#fff;
  border-radius:6px;
  padding:7px 12px 6px
}

.v-popper--theme-tooltip .v-popper__arrow-outer{
  border-color:#000c
}

.v-popper--theme-dropdown .v-popper__inner{
  background:#fff;
  color:#000;
  border-radius:6px;
  border:1px solid #ddd;
  box-shadow:0 6px 30px #0000001a
}

.v-popper--theme-dropdown .v-popper__arrow-inner{
  visibility:visible;
  border-color:#fff
}

.v-popper--theme-dropdown .v-popper__arrow-outer{
  border-color:#ddd
}

.htw-bind-col-size{
  grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))
}

.__histoire-json-code[data-v-d4369e5a] .cm-editor{
  height:100%;
  min-width:280px
}

.v-popper{
  line-height:0
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color:rgb(244 244 245 / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity: 1;
  border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity: 1;
  border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{
  transform:scale(.75)
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{
  transform:none;
  transition:transform .15s cubic-bezier(0,1,.5,1)
}

.v-popper__popper:focus-visible{
  outline:none
}

.htw-range-input::-webkit-slider-thumb{
  height:.75rem;
  width:.75rem;
  -webkit-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-webkit-slider-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

.htw-range-input::-moz-range-thumb{
  height:.75rem;
  width:.75rem;
  -moz-appearance:none;
  appearance:none;
  border-radius:9999px;
  border-width:1px;
  border-style:solid;
  border-color:#00000040;
  --tw-bg-opacity: 1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-range-input:is(.htw-dark *)::-moz-range-thumb{
  border-color:#ffffff40;
  --tw-bg-opacity: 1;
  background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.htw-range-input:hover::-moz-range-thumb{
  --tw-border-opacity: 1 !important;
  border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;
  --tw-bg-opacity: 1 !important;
  background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important
}

/* @TODO custom themes */

.v-popper {
  line-height: 0;
}

.htw-dark .v-popper--theme-dropdown .v-popper__inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-700) / var(--tw-border-opacity, 1))
}

.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper {
  transform: scale(.75);
}

.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper {
  transform: none;
  transition: transform .15s cubic-bezier(0, 1, .5, 1);
}

.v-popper__popper:focus-visible {
  outline: none;
}

.__histoire-scale-x-enter-active,
  .__histoire-scale-x-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-x-enter-from,
  .__histoire-scale-x-leave-to {
  transform: scaleX(0);
  opacity: 0;
}

.__histoire-scale-y-enter-active,
  .__histoire-scale-y-leave-active {
  transition: transform .15s, opacity .15s;
}

.__histoire-scale-y-enter-from,
  .__histoire-scale-y-leave-to {
  transform: scaleY(0);
  opacity: 0;
}

.__histoire-fade-enter-active,
  .__histoire-fade-leave-active {
  transition: opacity .15s;
}

.__histoire-fade-enter-from,
  .__histoire-fade-leave-to {
  opacity: 0;
}

.__histoire-fade-bottom-enter-active,
  .__histoire-fade-bottom-leave-active {
  transition: transform .15s, opacity .15s;
  transform: translateY(0px);
}

.__histoire-fade-bottom-enter-from,
  .__histoire-fade-bottom-leave-to {
  transform: translateY(32px);
  opacity: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

a,
input,
button {
  color: inherit;
}

a {
  text-decoration: inherit;
}

input, button {
  font-family: inherit;
}

a,
button {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

body,
  pre {
  margin: 0;
}

:scope,
  body,
  #app {
  height: 100%;
}

:scope {
  font-family: 'Noto Sans Display', system-ui, sans-serif;
  font-size: 1rem;
}

body {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  body {
    font-size: .875rem;
  }
}

.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}

.__histoire-code .shiki {
  background: transparent !important;
}

.htw-prose h1:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h2:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h3:not(:hover) .header-anchor[aria-hidden="true"], .htw-prose h4:not(:hover) .header-anchor[aria-hidden="true"] {
  visibility: hidden;
}

.htw-prose hr {
  margin: 1rem 0;
}

.__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right;
}

.htw-dark .__histoire-pane-shadow-from-right {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
}

.htw-prose{
  color:var(--tw-prose-body);
  max-width:65ch;
}

.htw-prose :where(p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where([class~="lead"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-lead);
  font-size:1.25em;
  line-height:1.6;
  margin-top:1.2em;
  margin-bottom:1.2em
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:rgb(var(--_histoire-color-primary-500));
  text-decoration:none;
  font-weight:500;
}

.htw-prose :where(a):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):hover{
  text-decoration:underline
}

.htw-prose :where(strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-bold);
  font-weight:600
}

.htw-prose :where(a strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol[type="A"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="A" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-alpha
}

.htw-prose :where(ol[type="a" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-alpha
}

.htw-prose :where(ol[type="I"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="I" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:upper-roman
}

.htw-prose :where(ol[type="i" s]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:lower-roman
}

.htw-prose :where(ol[type="1"]):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:decimal
}

.htw-prose :where(ul):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  list-style-type:disc;
  margin-top:1.25em;
  margin-bottom:1.25em;
  padding-inline-start:1.625em
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  font-weight:400;
  color:var(--tw-prose-counters)
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::marker{
  color:var(--tw-prose-bullets)
}

.htw-prose :where(dt):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.25em
}

.htw-prose :where(hr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-color:var(--tw-prose-hr);
  border-top-width:1px;
  margin-top:3em;
  margin-bottom:3em
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-style:italic;
  color:var(--tw-prose-quotes);
  border-inline-start-width:0.25rem;
  border-inline-start-color:var(--tw-prose-quote-borders);
  quotes:"\201C""\201D""\2018""\2019";
  margin-top:1.6em;
  margin-bottom:1.6em;
  padding-inline-start:1em;
  margin-left:0;
  margin-right:0;
  background-color:rgb(var(--_histoire-color-gray-100));
  padding:.25rem .375rem;
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:first-child{
  margin-top:0
}

.htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)) p:last-child{
  margin-bottom:0
}

.htw-dark .htw-prose :where(blockquote):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:rgb(var(--_histoire-color-gray-750))
}

.htw-prose :where(blockquote p:first-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:open-quote
}

.htw-prose :where(blockquote p:last-of-type):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:close-quote
}

.htw-prose :where(h1):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:800;
  font-size:2.25em;
  margin-top:0;
  margin-bottom:0.8888889em;
  line-height:1.1111111
}

.htw-prose :where(h1 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:900;
  color:inherit
}

.htw-prose :where(h2):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:700;
  font-size:1.5em;
  margin-top:2em;
  margin-bottom:1em;
  line-height:1.3333333
}

.htw-prose :where(h2 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:800;
  color:inherit
}

.htw-prose :where(h3):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  font-size:1.25em;
  margin-top:1.6em;
  margin-bottom:0.6em;
  line-height:1.6
}

.htw-prose :where(h3 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(h4):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  margin-top:1.5em;
  margin-bottom:0.5em;
  line-height:1.5
}

.htw-prose :where(h4 strong):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:700;
  color:inherit
}

.htw-prose :where(img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(picture):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  display:block;
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(video):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(kbd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  font-weight:500;
  font-family:inherit;
  color:var(--tw-prose-kbd);
  box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size:0.875em;
  border-radius:0.3125rem;
  padding-top:0.1875em;
  padding-inline-end:0.375em;
  padding-bottom:0.1875em;
  padding-inline-start:0.375em
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-code);
  font-weight:normal;
  font-size:0.8rem;
  background-color:rgb(var(--_histoire-color-gray-500) / 20%);
  padding:0.05rem 0.5rem;
  border-radius:0.25rem;
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before,.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  display:none
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:"`"
}

.htw-prose :where(code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:"`"
}

.htw-prose :where(a code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h1 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(h2 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.875em
}

.htw-prose :where(h3 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit;
  font-size:0.9em
}

.htw-prose :where(h4 code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(blockquote code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(thead th code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:inherit
}

.htw-prose :where(pre):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-pre-code);
  background-color:var(--tw-prose-pre-bg);
  overflow-x:auto;
  font-weight:400;
  font-size:0.875em;
  line-height:1.7142857;
  margin-top:1.7142857em;
  margin-bottom:1.7142857em;
  border-radius:0.375rem;
  padding-top:0.8571429em;
  padding-inline-end:1.1428571em;
  padding-bottom:0.8571429em;
  padding-inline-start:1.1428571em
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  background-color:transparent;
  border-width:0;
  border-radius:0;
  padding:0;
  font-weight:inherit;
  color:inherit;
  font-size:inherit;
  font-family:inherit;
  line-height:inherit
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::before{
  content:none
}

.htw-prose :where(pre code):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *))::after{
  content:none
}

.htw-prose :where(table):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  width:100%;
  table-layout:auto;
  margin-top:2em;
  margin-bottom:2em;
  font-size:0.875em;
  line-height:1.7142857
}

.htw-prose :where(thead):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-th-borders)
}

.htw-prose :where(thead th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-headings);
  font-weight:600;
  vertical-align:bottom;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody tr):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:1px;
  border-bottom-color:var(--tw-prose-td-borders)
}

.htw-prose :where(tbody tr:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-bottom-width:0
}

.htw-prose :where(tbody td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:baseline
}

.htw-prose :where(tfoot):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  border-top-width:1px;
  border-top-color:var(--tw-prose-th-borders)
}

.htw-prose :where(tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  vertical-align:top
}

.htw-prose :where(th, td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  text-align:start
}

.htw-prose :where(figure > *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(figcaption):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  color:var(--tw-prose-captions);
  font-size:0.875em;
  line-height:1.4285714;
  margin-top:0.8571429em
}

.htw-prose{
  --tw-prose-body:#374151;
  --tw-prose-headings:#111827;
  --tw-prose-lead:#4b5563;
  --tw-prose-links:#111827;
  --tw-prose-bold:#111827;
  --tw-prose-counters:#6b7280;
  --tw-prose-bullets:#d1d5db;
  --tw-prose-hr:#e5e7eb;
  --tw-prose-quotes:#111827;
  --tw-prose-quote-borders:#e5e7eb;
  --tw-prose-captions:#6b7280;
  --tw-prose-kbd:#111827;
  --tw-prose-kbd-shadows:rgb(17 24 39 / 10%);
  --tw-prose-code:#111827;
  --tw-prose-pre-code:#e5e7eb;
  --tw-prose-pre-bg:#1f2937;
  --tw-prose-th-borders:#d1d5db;
  --tw-prose-td-borders:#e5e7eb;
  --tw-prose-invert-body:#d1d5db;
  --tw-prose-invert-headings:#fff;
  --tw-prose-invert-lead:#9ca3af;
  --tw-prose-invert-links:#fff;
  --tw-prose-invert-bold:#fff;
  --tw-prose-invert-counters:#9ca3af;
  --tw-prose-invert-bullets:rgb(var(--_histoire-color-gray-500));
  --tw-prose-invert-hr:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-quotes:#f3f4f6;
  --tw-prose-invert-quote-borders:rgb(var(--_histoire-color-gray-800));
  --tw-prose-invert-captions:#9ca3af;
  --tw-prose-invert-kbd:#fff;
  --tw-prose-invert-kbd-shadows:rgb(255 255 255 / 10%);
  --tw-prose-invert-code:#fff;
  --tw-prose-invert-pre-code:#d1d5db;
  --tw-prose-invert-pre-bg:rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders:#4b5563;
  --tw-prose-invert-td-borders:#374151;
  font-size:1rem;
  line-height:1.75
}

.htw-prose :where(picture > img):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0;
  margin-bottom:0
}

.htw-prose :where(li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.1rem;
  margin-bottom:0.1rem
}

.htw-prose :where(ol > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(ul > li):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0.375em
}

.htw-prose :where(.htw-prose > ul > li p):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(.htw-prose > ul > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ul > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em
}

.htw-prose :where(.htw-prose > ol > li > p:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:1.25em
}

.htw-prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.75em;
  margin-bottom:0.75em
}

.htw-prose :where(dl):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:1.25em;
  margin-bottom:1.25em
}

.htw-prose :where(dd):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0.5em;
  padding-inline-start:1.625em
}

.htw-prose :where(hr + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h2 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h3 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(h4 + *):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(thead th:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(thead th:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(tbody td, tfoot td):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-top:0.5714286em;
  padding-inline-end:0.5714286em;
  padding-bottom:0.5714286em;
  padding-inline-start:0.5714286em
}

.htw-prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-start:0
}

.htw-prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  padding-inline-end:0
}

.htw-prose :where(figure):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:2em;
  margin-bottom:2em
}

.htw-prose :where(.htw-prose > :first-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-top:0
}

.htw-prose :where(.htw-prose > :last-child):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)){
  margin-bottom:0.75rem;
}

.htw-prose :where(h1, h2, h3, h4, th):not(:where([class~="htw-not-prose"],[class~="htw-not-prose"] *)):not(:first-child){
  margin-top:1.25rem
}

.htw-pointer-events-none{
  pointer-events:none
}

.htw-invisible{
  visibility:hidden
}

.htw-fixed{
  position:fixed
}

.htw-absolute{
  position:absolute
}

.htw-relative{
  position:relative
}

.htw-inset-0{
  inset:0px
}

.htw-bottom-0{
  bottom:0px
}

.htw-bottom-4{
  bottom:1rem
}

.htw-bottom-5{
  bottom:1.25rem
}

.htw-bottom-8{
  bottom:2rem
}

.htw-left-0{
  left:0px
}

.htw-left-5{
  left:1.25rem
}

.htw-left-8{
  left:2rem
}

.htw-right-0{
  right:0px
}

.htw-right-4{
  right:1rem
}

.htw-right-5{
  right:1.25rem
}

.htw-right-8{
  right:2rem
}

.htw-top-0{
  top:0px
}

.htw-top-5{
  top:1.25rem
}

.htw-top-8{
  top:2rem
}

.htw-isolate{
  isolation:isolate
}

.htw-z-10{
  z-index:10
}

.htw-z-20{
  z-index:20
}

.htw-m-0{
  margin:0px
}

.htw-m-1{
  margin:0.25rem
}

.htw-m-4{
  margin:1rem
}

.htw-m-auto{
  margin:auto
}

.-htw-my-1{
  margin-top:-0.25rem;
  margin-bottom:-0.25rem
}

.htw-mx-1{
  margin-left:0.25rem;
  margin-right:0.25rem
}

.htw-mx-2{
  margin-left:0.5rem;
  margin-right:0.5rem
}

.htw-mx-4{
  margin-left:1rem;
  margin-right:1rem
}

.htw-mx-6{
  margin-left:1.5rem;
  margin-right:1.5rem
}

.htw-my-0{
  margin-top:0px;
  margin-bottom:0px
}

.htw-my-2{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.htw-my-4{
  margin-top:1rem;
  margin-bottom:1rem
}

.htw-my-8{
  margin-top:2rem;
  margin-bottom:2rem
}

.-htw-mt-1{
  margin-top:-0.25rem
}

.htw-mb-2{
  margin-bottom:0.5rem
}

.htw-mb-6{
  margin-bottom:1.5rem
}

.htw-mb-8{
  margin-bottom:2rem
}

.htw-ml-4{
  margin-left:1rem
}

.htw-ml-auto{
  margin-left:auto
}

.htw-mr-2{
  margin-right:0.5rem
}

.htw-mr-auto{
  margin-right:auto
}

.htw-mt-0\.5{
  margin-top:0.125rem
}

.htw-mt-1{
  margin-top:0.25rem
}

.htw-mt-2{
  margin-top:0.5rem
}

.htw-box-border{
  box-sizing:border-box
}

.htw-block{
  display:block
}

.htw-flex{
  display:flex
}

.htw-inline-flex{
  display:inline-flex
}

.htw-grid{
  display:grid
}

.\!htw-hidden{
  display:none !important
}

.htw-hidden{
  display:none
}

.htw-h-1{
  height:0.25rem
}

.htw-h-10{
  height:2.5rem
}

.htw-h-12{
  height:3rem
}

.htw-h-16{
  height:4rem
}

.htw-h-2{
  height:0.5rem
}

.htw-h-20{
  height:5rem
}

.htw-h-3{
  height:0.75rem
}

.htw-h-32{
  height:8rem
}

.htw-h-4{
  height:1rem
}

.htw-h-48{
  height:12rem
}

.htw-h-5{
  height:1.25rem
}

.htw-h-6{
  height:1.5rem
}

.htw-h-64{
  height:16rem
}

.htw-h-8{
  height:2rem
}

.htw-h-9{
  height:2.25rem
}

.htw-h-\[100px\]{
  height:100px
}

.htw-h-\[16px\]{
  height:16px
}

.htw-h-\[1px\]{
  height:1px
}

.htw-h-\[22px\]{
  height:22px
}

.htw-h-\[27px\]{
  height:27px
}

.htw-h-\[2px\]{
  height:2px
}

.htw-h-\[51px\]{
  height:51px
}

.htw-h-fit{
  height:-moz-fit-content;
  height:fit-content
}

.htw-h-full{
  height:100%
}

.htw-h-px{
  height:1px
}

.htw-h-screen{
  height:100vh
}

.htw-max-h-\[400px\]{
  max-height:400px
}

.htw-max-h-\[80vh\]{
  max-height:80vh
}

.htw-max-h-full{
  max-height:100%
}

.htw-min-h-32{
  min-height:8rem
}

.htw-min-h-\[26px\]{
  min-height:26px
}

.htw-w-0{
  width:0px
}

.htw-w-16{
  width:4rem
}

.htw-w-2{
  width:0.5rem
}

.htw-w-20{
  width:5rem
}

.htw-w-28{
  width:7rem
}

.htw-w-3{
  width:0.75rem
}

.htw-w-32{
  width:8rem
}

.htw-w-4{
  width:1rem
}

.htw-w-5{
  width:1.25rem
}

.htw-w-6{
  width:1.5rem
}

.htw-w-64{
  width:16rem
}

.htw-w-8{
  width:2rem
}

.htw-w-\[16px\]{
  width:16px
}

.htw-w-\[2px\]{
  width:2px
}

.htw-w-fit{
  width:-moz-fit-content;
  width:fit-content
}

.htw-w-full{
  width:100%
}

.htw-w-max{
  width:-moz-max-content;
  width:max-content
}

.htw-w-px{
  width:1px
}

.htw-w-screen{
  width:100vw
}

.htw-min-w-0{
  min-width:0px
}

.htw-min-w-16{
  min-width:4rem
}

.htw-min-w-4{
  min-width:1rem
}

.htw-min-w-\[150px\]{
  min-width:150px
}

.htw-min-w-\[80px\]{
  min-width:80px
}

.htw-max-w-6{
  max-width:1.5rem
}

.htw-max-w-\[400px\]{
  max-width:400px
}

.htw-max-w-\[512px\]{
  max-width:512px
}

.htw-max-w-\[63px\]{
  max-width:63px
}

.htw-max-w-\[82px\]{
  max-width:82px
}

.htw-max-w-full{
  max-width:100%
}

.htw-max-w-none{
  max-width:none
}

.htw-flex-1{
  flex:1 1 0%
}

.htw-flex-none{
  flex:none
}

.htw-flex-shrink{
  flex-shrink:1
}

.htw-shrink{
  flex-shrink:1
}

.htw-shrink-0{
  flex-shrink:0
}

.htw-grow{
  flex-grow:1
}

.htw-rotate-90{
  --tw-rotate:90deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-scale-0{
  --tw-scale-x:0;
  --tw-scale-y:0;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.htw-cursor-default{
  cursor:default
}

.htw-cursor-ew-resize{
  cursor:ew-resize
}

.htw-cursor-ns-resize{
  cursor:ns-resize
}

.htw-cursor-nwse-resize{
  cursor:nwse-resize
}

.htw-cursor-pointer{
  cursor:pointer
}

.htw-cursor-text{
  cursor:text
}

.htw-select-none{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.htw-resize-none{
  resize:none
}

.htw-resize-y{
  resize:vertical
}

.htw-appearance-none{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none
}

.htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
}

.htw-flex-row{
  flex-direction:row
}

.htw-flex-col{
  flex-direction:column
}

.htw-flex-wrap{
  flex-wrap:wrap
}

.htw-flex-nowrap{
  flex-wrap:nowrap
}

.htw-place-content-between{
  place-content:space-between
}

.htw-items-start{
  align-items:flex-start
}

.htw-items-end{
  align-items:flex-end
}

.htw-items-center{
  align-items:center
}

.htw-items-baseline{
  align-items:baseline
}

.htw-items-stretch{
  align-items:stretch
}

.htw-justify-end{
  justify-content:flex-end
}

.htw-justify-center{
  justify-content:center
}

.htw-justify-evenly{
  justify-content:space-evenly
}

.htw-gap-0\.5{
  gap:0.125rem
}

.htw-gap-1{
  gap:0.25rem
}

.htw-gap-12{
  gap:3rem
}

.htw-gap-2{
  gap:0.5rem
}

.htw-gap-4{
  gap:1rem
}

.htw-gap-6{
  gap:1.5rem
}

.htw-gap-px{
  gap:1px
}

.htw-gap-x-2{
  -moz-column-gap:0.5rem;
       column-gap:0.5rem
}

.htw-gap-y-1{
  row-gap:0.25rem
}

.htw-space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.htw-divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse))
}

.htw-divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-divide-opacity, 1))
}

.htw-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-divide-opacity, 1))
}

.htw-overflow-auto{
  overflow:auto
}

.htw-overflow-hidden{
  overflow:hidden
}

.htw-overflow-y-auto{
  overflow-y:auto
}

.htw-overflow-y-scroll{
  overflow-y:scroll
}

.htw-scroll-smooth{
  scroll-behavior:smooth
}

.htw-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.htw-text-ellipsis{
  text-overflow:ellipsis
}

.htw-whitespace-nowrap{
  white-space:nowrap
}

.\!htw-rounded-\[3px\]{
  border-radius:3px !important
}

.htw-rounded{
  border-radius:0.375rem
}

.htw-rounded-full{
  border-radius:9999px
}

.htw-rounded-lg{
  border-radius:0.75rem
}

.htw-rounded-sm{
  border-radius:0.25rem
}

.htw-rounded-b-lg{
  border-bottom-right-radius:0.75rem;
  border-bottom-left-radius:0.75rem
}

.htw-rounded-l{
  border-top-left-radius:0.375rem;
  border-bottom-left-radius:0.375rem
}

.htw-rounded-r{
  border-top-right-radius:0.375rem;
  border-bottom-right-radius:0.375rem
}

.htw-rounded-r-lg{
  border-top-right-radius:0.75rem;
  border-bottom-right-radius:0.75rem
}

.htw-border{
  border-width:1px
}

.htw-border-0{
  border-width:0px
}

.htw-border-2{
  border-width:2px
}

.htw-border-8{
  border-width:8px
}

.htw-border-b{
  border-bottom-width:1px
}

.htw-border-l-2{
  border-left-width:2px
}

.htw-border-r{
  border-right-width:1px
}

.htw-border-t{
  border-top-width:1px
}

.htw-border-solid{
  border-style:solid
}

.htw-border-none{
  border-style:none
}

.htw-border-black\/20{
  border-color:rgb(0 0 0 / 0.2)
}

.htw-border-black\/25{
  border-color:rgb(0 0 0 / 0.25)
}

.htw-border-black\/50{
  border-color:rgb(0 0 0 / 0.5)
}

.htw-border-current{
  border-color:currentColor
}

.htw-border-gray-100{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-100) / var(--tw-border-opacity, 1))
}

.htw-border-gray-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-200) / var(--tw-border-opacity, 1))
}

.htw-border-gray-300\/30{
  border-color:rgb(var(--_histoire-color-gray-300) / 0.3)
}

.htw-border-gray-500\/10{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-border-gray-500\/30{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.htw-border-gray-500\/40{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.4)
}

.htw-border-gray-500\/5{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.htw-border-gray-500\/50{
  border-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-border-gray-600{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-600) / var(--tw-border-opacity, 1))
}

.htw-border-gray-800{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.htw-border-gray-850{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.htw-border-primary-200{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-200) / var(--tw-border-opacity, 1))
}

.htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-border-primary-900{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.htw-border-transparent{
  border-color:transparent
}

.\!htw-bg-primary-500{
  --tw-bg-opacity:1 !important;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1)) !important
}

.htw-bg-gray-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-100) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-400\/25{
  background-color:rgb(var(--_histoire-color-gray-400) / 0.25)
}

.htw-bg-gray-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-500\/10{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.htw-bg-gray-500\/50{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.5)
}

.htw-bg-gray-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-gray-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-200{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-50{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-500) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-500\/10{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.htw-bg-primary-500\/20{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.2)
}

.htw-bg-primary-500\/25{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.25)
}

.htw-bg-primary-700{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.htw-bg-primary-800{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.htw-bg-transparent{
  background-color:transparent
}

.htw-bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.htw-bg-white\/80{
  background-color:rgb(255 255 255 / 0.8)
}

.htw-fill-primary-500{
  fill:rgb(var(--_histoire-color-primary-500))
}

.htw-fill-transparent{
  fill:transparent
}

.htw-stroke-white{
  stroke:#fff
}

.htw-stroke-2{
  stroke-width:2
}

.htw-p-1{
  padding:0.25rem
}

.htw-p-2{
  padding:0.5rem
}

.htw-p-4{
  padding:1rem
}

.htw-p-8{
  padding:2rem
}

.htw-p-px{
  padding:1px
}

.htw-px-0\.5{
  padding-left:0.125rem;
  padding-right:0.125rem
}

.htw-px-1{
  padding-left:0.25rem;
  padding-right:0.25rem
}

.htw-px-2{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.htw-px-4{
  padding-left:1rem;
  padding-right:1rem
}

.htw-px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}

.htw-py-0\.5{
  padding-top:0.125rem;
  padding-bottom:0.125rem
}

.htw-py-1{
  padding-top:0.25rem;
  padding-bottom:0.25rem
}

.htw-py-12{
  padding-top:3rem;
  padding-bottom:3rem
}

.htw-py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.htw-py-3{
  padding-top:0.75rem;
  padding-bottom:0.75rem
}

.htw-py-4{
  padding-top:1rem;
  padding-bottom:1rem
}

.htw-pl-0{
  padding-left:0px
}

.htw-pl-0\.5{
  padding-left:0.125rem
}

.htw-pl-2{
  padding-left:0.5rem
}

.htw-pl-4{
  padding-left:1rem
}

.htw-pl-6{
  padding-left:1.5rem
}

.htw-pr-2{
  padding-right:0.5rem
}

.htw-pr-6{
  padding-right:1.5rem
}

.htw-pt-4{
  padding-top:1rem
}

.htw-text-left{
  text-align:left
}

.htw-text-center{
  text-align:center
}

.htw-font-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.htw-text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.htw-text-5xl{
  font-size:3rem;
  line-height:1
}

.htw-text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.htw-text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.htw-text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.htw-font-bold{
  font-weight:700
}

.htw-uppercase{
  text-transform:uppercase
}

.htw-leading-none{
  line-height:1
}

.htw-leading-normal{
  line-height:1.5
}

.htw-text-black\/\[1\%\]{
  color:rgb(0 0 0 / 1%)
}

.htw-text-gray-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-400) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-500) / var(--tw-text-opacity, 1))
}

.htw-text-gray-500\/20{
  color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.htw-text-gray-700{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-700) / var(--tw-text-opacity, 1))
}

.htw-text-gray-900{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-900) / var(--tw-text-opacity, 1))
}

.htw-text-inherit{
  color:inherit
}

.htw-text-orange-500{
  --tw-text-opacity:1;
  color:rgb(249 115 22 / var(--tw-text-opacity, 1))
}

.htw-text-primary-200{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.htw-text-primary-400{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.htw-text-primary-500{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.htw-text-primary-600{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-600) / var(--tw-text-opacity, 1))
}

.htw-text-primary-800{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-800) / var(--tw-text-opacity, 1))
}

.htw-text-red-500{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.htw-text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.htw-opacity-0{
  opacity:0
}

.htw-opacity-20{
  opacity:0.2
}

.htw-opacity-25{
  opacity:0.25
}

.htw-opacity-30{
  opacity:0.3
}

.htw-opacity-40{
  opacity:0.4
}

.htw-opacity-50{
  opacity:0.5
}

.htw-opacity-60{
  opacity:0.6
}

.htw-opacity-70{
  opacity:0.7
}

.htw-shadow-xl{
  --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.htw-outline-none{
  outline:2px solid transparent;
  outline-offset:2px
}

.htw-transition-all{
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-border{
  transition-property:border;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-colors{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-transition-none{
  transition-property:none
}

.htw-transition-transform{
  transition-property:transform;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.htw-delay-150{
  transition-delay:150ms
}

.htw-duration-150{
  transition-duration:150ms
}

.htw-duration-200{
  transition-duration:200ms
}

.htw-duration-300{
  transition-duration:300ms
}

.htw-ease-\[cubic-bezier\(0\,1\,\.6\,1\)\]{
  transition-timing-function:cubic-bezier(0,1,.6,1)
}

.htw-ease-in-out{
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
}

.htw-ease-out{
  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
}

.htw-will-change-transform{
  will-change:transform
}

.dark\:htw-prose-invert:is(.htw-dark *){
  --tw-prose-body:var(--tw-prose-invert-body);
  --tw-prose-headings:var(--tw-prose-invert-headings);
  --tw-prose-lead:var(--tw-prose-invert-lead);
  --tw-prose-links:var(--tw-prose-invert-links);
  --tw-prose-bold:var(--tw-prose-invert-bold);
  --tw-prose-counters:var(--tw-prose-invert-counters);
  --tw-prose-bullets:var(--tw-prose-invert-bullets);
  --tw-prose-hr:var(--tw-prose-invert-hr);
  --tw-prose-quotes:var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);
  --tw-prose-captions:var(--tw-prose-invert-captions);
  --tw-prose-kbd:var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code:var(--tw-prose-invert-code);
  --tw-prose-pre-code:var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders:var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders:var(--tw-prose-invert-td-borders)
}

.first\:htw-mt-0:first-child{
  margin-top:0px
}

.last\:htw-mb-0:last-child{
  margin-bottom:0px
}

.focus-within\:htw-border-primary-500:focus-within{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus-within\:htw-bg-gray-500\/5:focus-within{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.05)
}

.hover\:htw-border-primary-500:hover{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.hover\:htw-bg-gray-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-gray-500\/10:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.1)
}

.hover\:htw-bg-gray-500\/20:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.hover\:htw-bg-gray-500\/30:hover{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.3)
}

.hover\:htw-bg-primary-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-200) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-300:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-300) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-50) / var(--tw-bg-opacity, 1))
}

.hover\:htw-bg-primary-500\/10:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.1)
}

.hover\:htw-bg-primary-500\/30:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.3)
}

.hover\:htw-bg-primary-500\/50:hover{
  background-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.hover\:htw-bg-primary-600:hover{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.hover\:htw-text-primary-500:hover{
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-500) / var(--tw-text-opacity, 1))
}

.hover\:htw-opacity-100:hover{
  opacity:1
}

.focus\:htw-border-primary-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.focus\:htw-border-primary-500\/50:focus{
  border-color:rgb(var(--_histoire-color-primary-500) / 0.5)
}

.focus\:htw-opacity-100:focus{
  opacity:1
}

.focus-visible\:htw-border-primary-500:focus-visible{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.active\:htw-bg-gray-600\/50:active{
  background-color:rgb(var(--_histoire-color-gray-600) / 0.5)
}

.htw-group:first-child .group-first\:htw-hidden{
  display:none
}

.htw-group:nth-child(odd) .group-odd\:htw-bg-gray-100\/50{
  background-color:rgb(var(--_histoire-color-gray-100) / 0.5)
}

.htw-group:focus-within .group-focus-within\:htw-visible{
  visibility:visible
}

.htw-group:hover .group-hover\:htw-flex{
  display:flex
}

.htw-group:hover .group-hover\:htw-border-primary-500{
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .group-hover\:htw-bg-primary-100{
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-100) / var(--tw-bg-opacity, 1))
}

.htw-group:hover .group-hover\:htw-opacity-100{
  opacity:1
}

.htw-group:hover .group-hover\:htw-opacity-90{
  opacity:0.9
}

.htw-group:active .group-active\:htw-bg-gray-500\/20{
  background-color:rgb(var(--_histoire-color-gray-500) / 0.2)
}

.dark\:htw-divide-gray-750:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-800:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-divide-opacity, 1))
}

.dark\:htw-divide-gray-850:is(.htw-dark *) > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-divide-opacity, 1))
}

.dark\:htw-border-gray-700\/30:is(.htw-dark *){
  border-color:rgb(var(--_histoire-color-gray-700) / 0.3)
}

.dark\:htw-border-gray-750:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-750) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-800:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-800) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-gray-850:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-gray-850) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-primary-900:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-900) / var(--tw-border-opacity, 1))
}

.dark\:htw-border-white\/20:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.2)
}

.dark\:htw-border-white\/25:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.25)
}

.dark\:htw-border-white\/50:is(.htw-dark *){
  border-color:rgb(255 255 255 / 0.5)
}

.dark\:htw-bg-black:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-750:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-750) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-900) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-gray-900\/80:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-900) / 0.8)
}

.dark\:htw-bg-primary-400:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-400) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-600:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-600) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:htw-bg-primary-800:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:htw-text-black:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-100:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-100) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-gray-300:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-gray-300) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-200:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-200) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-primary-400:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:htw-text-white\/\[1\%\]:is(.htw-dark *){
  color:rgb(255 255 255 / 1%)
}

.dark\:focus-within\:htw-border-primary-500:focus-within:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-border-primary-500:hover:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.dark\:hover\:htw-bg-gray-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-gray-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-700:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-800:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-800) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-bg-primary-900:hover:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-900) / var(--tw-bg-opacity, 1))
}

.dark\:hover\:htw-text-primary-400:hover:is(.htw-dark *){
  --tw-text-opacity:1;
  color:rgb(var(--_histoire-color-primary-400) / var(--tw-text-opacity, 1))
}

.dark\:focus\:htw-border-primary-500:focus:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:nth-child(odd) .dark\:group-odd\:htw-bg-gray-750\/40:is(.htw-dark *){
  background-color:rgb(var(--_histoire-color-gray-750) / 0.4)
}

.htw-group:hover .group-hover\:dark\:htw-border-primary-500:is(.htw-dark *){
  --tw-border-opacity:1;
  border-color:rgb(var(--_histoire-color-primary-500) / var(--tw-border-opacity, 1))
}

.htw-group:hover .dark\:group-hover\:htw-bg-primary-700:is(.htw-dark *){
  --tw-bg-opacity:1;
  background-color:rgb(var(--_histoire-color-primary-700) / var(--tw-bg-opacity, 1))
}

@media (min-width: 640px){
  .sm\:htw-h-4{
    height:1rem
  }

  .sm\:htw-w-4{
    width:1rem
  }

  .sm\:htw-p-1{
    padding:0.25rem
  }

  .sm\:htw-py-4{
    padding-top:1rem;
    padding-bottom:1rem
  }
}

@media (min-width: 768px){
  .md\:htw-mx-auto{
    margin-left:auto;
    margin-right:auto
  }

  .md\:htw-mt-16{
    margin-top:4rem
  }

  .md\:htw-block{
    display:block
  }

  .md\:htw-max-w-\[600px\]{
    max-width:600px
  }

  .md\:htw-flex-col{
    flex-direction:column
  }

  .md\:htw-p-12{
    padding:3rem
  }

  .md\:htw-py-1\.5{
    padding-top:0.375rem;
    padding-bottom:0.375rem
  }
}

@media (min-width: 1024px){
  .lg\:htw-max-w-\[800px\]{
    max-width:800px
  }
}

@media (min-width: 1280px){
  .xl\:htw-max-w-\[900px\]{
    max-width:900px
  }
}

@media (max-width: 767px){
  .\!md\:htw-flex-col{
    flex-direction:column
  }
}

.histoire-story-list-folder-button:hover .\[\.histoire-story-list-folder-button\:hover_\&\]\:htw-opacity-100{
  opacity:1
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-tree-margin[data-v-64c2458f] {
  margin-left: var(--v2562213a);
}
.bind-icon-color[data-v-64c2458f] {
  color: var(--v1eff521f);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-tree-padding[data-v-ee932a0c] {
  padding-left: var(--v5352bb71);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-d15ecb89] {
  color: var(--a3f02f4e);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.landscape > div > .dragger[data-v-4f40a1bb] {
  width: .625rem;
}
.portrait > div > .dragger[data-v-4f40a1bb] {
  height: .625rem;
}
.landscape > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  right: 0;
}
.portrait > div > .dragger.dragger-offset-before[data-v-4f40a1bb] {
  bottom: 0;
}
.landscape > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  right: -.3125rem;
}
.portrait > div > .dragger.dragger-offset-center[data-v-4f40a1bb] {
  bottom: -.3125rem;
}
.landscape > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  right: -.625rem;
}
.portrait > div > .dragger.dragger-offset-after[data-v-4f40a1bb] {
  bottom: -.625rem;
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.htw-base-empty[data-v-c5ecfead]:not(.no-animation) {
  animation: htw-base-empty-c5ecfead .15s .2s both;
}
@keyframes htw-base-empty-c5ecfead {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.__histoire-code-placeholder[data-v-96af7f40] {
  color: inherit;
  font-size: inherit;
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-preview-bg[data-v-c48fb2b2] {
  background-color: var(--v627bec82);
  color: var(--v35068428);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-feff9239] {
  color: var(--v60afaf4d);
}
.bind-preview-bg[data-v-feff9239] {
  background-color: var(--v3bd99e7e);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-1b279b85] {
  color: var(--ab2181a2);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.__histoire-hatched-pattern[data-v-91561117] {
  background: repeating-linear-gradient(135deg,
  transparent 0px,
  transparent 32px,
  currentColor 32px,
  currentColor 64px);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-preview-bg[data-v-18122333] {
  background-color: var(--v5f6f4ee9);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-c2a43485] {
  color: var(--v41c4d268);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-096f6d6e] {
  color: var(--v0f021d3c);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
img.colorize-black[data-v-2114f510] {
  filter: grayscale(100) brightness(0);
}
}
@scope (:root) to (.__histoire-render-story:not(.__histoire-render-custom-controls)) {
.bind-icon-color[data-v-9f94ad2b] {
  color: var(--v1f9aa6ca);
}
}
.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-d4369e5a] .cm-editor{height:100%;min-width:280px}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity, 1))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity, 1))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.htw-range-input:is(.htw-dark *)::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity, 1))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1))!important}

html,
body {
  background: transparent !important;
}

body {
  margin: 0;
}

html {
  font-size: 1rem;
  font-family: 'Noto Sans Display', system-ui, sans-serif;
}

.htw-sandbox-hidden {
  display: none;
}

.__histoire-render-story:not(.__histoire-render-custom-controls) {
  overflow: auto;
  min-height: 100%;
}

.divider {
  flex-shrink: 0;
  margin: 0;
  border-style: solid;
  border-color: var(--divider-color, var(--color-outline));
}
.divider--horizontal {
  block-size: 0;
  border-block-end-width: 1px;
}
.divider--vertical {
  align-self: stretch;
  inline-size: 0;
  border-inline-end-width: 1px;
}
.divider--dashed {
  border-style: dashed;
}
.divider--horizontal.divider--inset {
  margin-inline: 1rem;
}
.divider--vertical.divider--inset {
  margin-block: 1rem;
}
.divider--color-outline {
  --divider-color: var(--color-outline);
}
.divider--color-outline-variant {
  --divider-color: var(--color-outline-variant);
}
.divider--color-brand-soft {
  --divider-color: var(--color-brand-soft);
}
.divider--color-brand {
  --divider-color: var(--color-brand);
}
.divider--color-brand-bright {
  --divider-color: var(--color-brand-bright);
}
.divider--color-informative-soft {
  --divider-color: var(--color-informative-soft);
}
.divider--color-informative {
  --divider-color: var(--color-informative);
}
.divider--color-informative-bright {
  --divider-color: var(--color-informative-bright);
}
.divider--color-positive-soft {
  --divider-color: var(--color-positive-soft);
}
.divider--color-positive {
  --divider-color: var(--color-positive);
}
.divider--color-positive-bright {
  --divider-color: var(--color-positive-bright);
}
.divider--color-warning-soft {
  --divider-color: var(--color-warning-soft);
}
.divider--color-warning {
  --divider-color: var(--color-warning);
}
.divider--color-warning-bright {
  --divider-color: var(--color-warning-bright);
}
.divider--color-negative-soft {
  --divider-color: var(--color-negative-soft);
}
.divider--color-negative {
  --divider-color: var(--color-negative);
}
.divider--color-negative-bright {
  --divider-color: var(--color-negative-bright);
}

.heading {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  transition: color 150ms ease-in-out, text-decoration-color 150ms ease-in-out;
}
.heading--color-brand {
  color: var(--color-text-brand);
}
.heading--color-informative {
  color: var(--color-text-informative);
}
.heading--color-positive {
  color: var(--color-text-positive);
}
.heading--color-warning {
  color: var(--color-text-warning);
}
.heading--color-negative {
  color: var(--color-text-negative);
}
.heading--secondary.heading--color-none {
  color: color-mix(in oklab, currentColor calc(var(--opacity-secondary) * 100%), transparent);
}
.heading--secondary.heading--color-brand {
  color: color-mix(in oklab, var(--color-text-brand) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.heading--secondary.heading--color-informative {
  color: color-mix(in oklab, var(--color-text-informative) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.heading--secondary.heading--color-positive {
  color: color-mix(in oklab, var(--color-text-positive) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.heading--secondary.heading--color-warning {
  color: color-mix(in oklab, var(--color-text-warning) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.heading--secondary.heading--color-negative {
  color: color-mix(in oklab, var(--color-text-negative) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.heading--link {
  cursor: pointer;
}
.heading--link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
@media (hover: hover) {
.heading--link.heading--color-none:hover {
    color: color-mix(in oklab, transparent calc(var(--opacity-hover) * 100%), currentColor);
}
}
.heading--link.heading--color-none:active {
  color: color-mix(in oklab, transparent calc(var(--opacity-pressed) * 100%), currentColor);
}
@media (hover: hover) {
.heading--link.heading--color-brand:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-brand));
}
}
.heading--link.heading--color-brand:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-brand));
}
@media (hover: hover) {
.heading--link.heading--color-informative:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-informative));
}
}
.heading--link.heading--color-informative:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-informative));
}
@media (hover: hover) {
.heading--link.heading--color-positive:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-positive));
}
}
.heading--link.heading--color-positive:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-positive));
}
@media (hover: hover) {
.heading--link.heading--color-warning:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-warning));
}
}
.heading--link.heading--color-warning:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-warning));
}
@media (hover: hover) {
.heading--link.heading--color-negative:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-negative));
}
}
.heading--link.heading--color-negative:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-negative));
}
@media (hover: hover) {
.heading--underline-hover:hover {
    text-decoration-color: currentColor;
}
}
.heading--underline-always {
  text-decoration-color: currentColor;
}

.text {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  transition: color 150ms ease-in-out, text-decoration-color 150ms ease-in-out;
}
.text--color-brand {
  color: var(--color-text-brand);
}
.text--color-informative {
  color: var(--color-text-informative);
}
.text--color-positive {
  color: var(--color-text-positive);
}
.text--color-warning {
  color: var(--color-text-warning);
}
.text--color-negative {
  color: var(--color-text-negative);
}
.text--secondary.text--color-none {
  color: color-mix(in oklab, currentColor calc(var(--opacity-secondary) * 100%), transparent);
}
.text--secondary.text--color-brand {
  color: color-mix(in oklab, var(--color-text-brand) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.text--secondary.text--color-informative {
  color: color-mix(in oklab, var(--color-text-informative) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.text--secondary.text--color-positive {
  color: color-mix(in oklab, var(--color-text-positive) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.text--secondary.text--color-warning {
  color: color-mix(in oklab, var(--color-text-warning) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.text--secondary.text--color-negative {
  color: color-mix(in oklab, var(--color-text-negative) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.text--link {
  cursor: pointer;
}
.text--link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
@media (hover: hover) {
.text--link.text--color-none:hover {
    color: color-mix(in oklab, transparent calc(var(--opacity-hover) * 100%), currentColor);
}
}
.text--link.text--color-none:active {
  color: color-mix(in oklab, transparent calc(var(--opacity-pressed) * 100%), currentColor);
}
@media (hover: hover) {
.text--link.text--color-brand:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-brand));
}
}
.text--link.text--color-brand:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-brand));
}
@media (hover: hover) {
.text--link.text--color-informative:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-informative));
}
}
.text--link.text--color-informative:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-informative));
}
@media (hover: hover) {
.text--link.text--color-positive:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-positive));
}
}
.text--link.text--color-positive:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-positive));
}
@media (hover: hover) {
.text--link.text--color-warning:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-warning));
}
}
.text--link.text--color-warning:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-warning));
}
@media (hover: hover) {
.text--link.text--color-negative:hover {
    color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-hover) * 100%), var(--color-text-negative));
}
}
.text--link.text--color-negative:active {
  color: color-mix(in oklab, var(--color-surface) calc(var(--opacity-pressed) * 100%), var(--color-text-negative));
}
@media (hover: hover) {
.text--underline-hover:hover {
    text-decoration-color: currentColor;
}
}
.text--underline-always {
  text-decoration-color: currentColor;
}

.markdown {
  display: contents;
strong {
    font-weight: 600;
}
ul {
    list-style-type: disc;
    padding-inline-start: calc(var(--spacing) * 5);
}
ol {
    list-style-type: decimal;
    padding-inline-start: calc(var(--spacing) * 6);
}
}
.markdown__heading {
  margin-block-end: calc(var(--spacing) * 3);
}
.markdown__heading:not(:first-child) {
  margin-block-start: calc(var(--spacing) * 6);
}
.markdown__paragraph {
  color: color-mix(in oklab, currentColor calc(var(--opacity-secondary) * 100%), var(--color-surface));
:not(> .markdown__paragraph) {
    color: var(--color-on-surface);
}
}
.markdown__paragraph:not(:last-child) {
  margin-block-end: calc(var(--spacing) * 3);
}
.markdown__inline-code {
  background: var(--color-surface);
  color: var(--color-on-surface);
  padding-block: calc(var(--spacing) * 0.5);
  padding-inline: calc(var(--spacing));
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-sm);
  display: inline-block;
}
.markdown__code-block {
  margin: 0;
  background: var(--color-surface);
  padding: calc(var(--spacing) * 2);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-xl);
  tab-size: 4;
  white-space: pre-wrap;

  --shiki-foreground: var(--color-on-surface);
  --shiki-token-keyword: var(--color-text-data-red);
  --shiki-token-string: var(--color-text-data-green);
  --shiki-token-string-expression: var(--color-text-data-green);
  --shiki-token-function: var(--color-text-data-indigo);
  --shiki-token-constant: var(--color-on-surface);
  --shiki-token-parameter: var(--color-on-surface);
  --shiki-token-punctuation: var(--color-on-surface);
  --shiki-color-text: var(--color-on-surface);
  --shiki-token-comment: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.markdown__code-block:not(:last-child) {
  margin-block-end: calc(var(--spacing) * 3);
}
.markdown__list p:last-of-type {
  margin-block-end: 0;
}
.markdown__list:not(:last-child) {
  margin-block-end: calc(var(--spacing) * 3);
}
.markdown__blockquote {
  background: color-mix(in oklab, var(--color-brand-soft) 25%, transparent);
  color: var(--color-on-brand-soft);
  margin: 0;
  padding-block: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 4);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
p:last-child {
    margin-block-end: 0;
}
}
.markdown__blockquote:not(:last-child) {
  margin-block-end: calc(var(--spacing) * 3);
}
.markdown__table {
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
table {
    min-width: 100%;
}
thead {
    background-color: var(--color-surface-container);
    color: var(--color-on-surface-container);
th {
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 0.5);
      font-weight: 600;
      white-space: nowrap;
}
th:not(:last-child) {
      border-right: 1px solid var(--color-outline);
}
}
thead:not(:last-child) {
    border-bottom: 1px solid var(--color-outline);
}
tr {
td {
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 0.5);
      white-space: nowrap;
}
td:not(:last-child) {
      border-right: 1px solid var(--color-outline);
}
}
tr:not(:last-child) {
    border-bottom: 1px solid var(--color-outline);
}
}
.markdown__table:not(:last-child) {
  margin-block-end: calc(var(--spacing) * 3);
}
.markdown__hr {
  margin-block: calc(var(--spacing) * 6);
}

.demo {
  border: 1px solid var(--color-outline);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 12);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-xl);
  min-block-size: calc(var(--spacing) * 32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface);
  width: 100%;
  overflow: hidden;
  position: relative;
}

.portal-demo__card {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  padding: calc(var(--spacing) * 4);
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-xl);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
}
.portal-demo__floating {
  position: fixed;
  inset-block-end: calc(var(--spacing) * 4);
  inset-inline-end: calc(var(--spacing) * 4);
  z-index: var(--z-index-toast);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  background: var(--color-brand);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-lg);
}

.icon {
  flex-shrink: 0;
  inline-size: calc(var(--spacing) * var(--icon-size, 5));
  block-size: calc(var(--spacing) * var(--icon-size, 5));
}

.button-base {
  --button-touch-target: 40px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--button-size);
  border-radius: var(--button-radius);
  background: var(--button-background, transparent);
  color: var(--button-foreground, currentColor);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: background 150ms ease-in-out,
    border-color 150ms ease-in-out,
    color 150ms ease-in-out;
}
.button-icon-enter-active,
.button-icon-leave-active {
  transition: opacity 150ms ease-in-out, scale 150ms ease-in-out;
}
.button-icon-enter-from,
.button-icon-leave-to {
  opacity: 0;
  scale: 0.6;
}
.button-base__spinner {
  animation: button-spin 700ms linear infinite;
}
@keyframes button-spin {
to {
    rotate: 360deg;
}
}
@media (pointer: coarse) {
.button-base--size-sm::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100%, var(--button-touch-target));
    block-size: max(100%, var(--button-touch-target));
    translate: -50% -50%;
}
}
.button-base--size-sm {
  --button-size: calc(var(--spacing) * 8);
  --button-padding-inline: calc(var(--spacing) * 3 / var(--padding-divisor, 1));
  --button-gap: calc(var(--button-padding-inline) / 2);
}
.button-base--size-md {
  --button-size: calc(var(--spacing) * 10);
  --button-padding-inline: calc(var(--spacing) * 4 / var(--padding-divisor, 1));
  --button-gap: calc(var(--button-padding-inline) / 2);
}
.button-base--size-lg {
  --button-size: calc(var(--spacing) * 12);
  --button-padding-inline: calc(var(--spacing) * 6 / var(--padding-divisor, 1));
  --button-gap: calc(var(--button-padding-inline) / 2);
}
.button-base--variant-text {
  --padding-divisor: 1.25;
}
.button-base--shape-square {
  --button-radius: var(--radius-none);
}
.button-base--size-sm.button-base--shape-rounded {
  --button-radius: var(--radius-lg);
}
.button-base--size-md.button-base--shape-rounded {
  --button-radius: var(--radius-xl);
}
.button-base--size-lg.button-base--shape-rounded {
  --button-radius: var(--radius-2xl);
}
.button-base--shape-pill {
  --button-radius: var(--radius-full);
}
.button-base--color-primary {
  --button-fill: var(--color-inverse-surface);
  --button-on-fill: var(--color-on-inverse-surface);
  --button-soft: var(--color-surface-container);
  --button-on-soft: var(--color-on-surface-container);
  --button-text: var(--color-on-surface);
  --button-outline: var(--color-outline);
}
.button-base--color-brand {
  --button-fill: var(--color-brand);
  --button-on-fill: var(--color-on-brand);
  --button-soft: var(--color-brand-soft);
  --button-on-soft: var(--color-on-brand-soft);
  --button-text: var(--color-text-brand);
  --button-outline: var(--color-brand);
}
.button-base--color-informative {
  --button-fill: var(--color-informative);
  --button-on-fill: var(--color-on-informative);
  --button-soft: var(--color-informative-soft);
  --button-on-soft: var(--color-on-informative-soft);
  --button-text: var(--color-text-informative);
  --button-outline: var(--color-informative);
}
.button-base--color-positive {
  --button-fill: var(--color-positive);
  --button-on-fill: var(--color-on-positive);
  --button-soft: var(--color-positive-soft);
  --button-on-soft: var(--color-on-positive-soft);
  --button-text: var(--color-text-positive);
  --button-outline: var(--color-positive);
}
.button-base--color-warning {
  --button-fill: var(--color-warning);
  --button-on-fill: var(--color-on-warning);
  --button-soft: var(--color-warning-soft);
  --button-on-soft: var(--color-on-warning-soft);
  --button-text: var(--color-text-warning);
  --button-outline: var(--color-warning);
}
.button-base--color-negative {
  --button-fill: var(--color-negative);
  --button-on-fill: var(--color-on-negative);
  --button-soft: var(--color-negative-soft);
  --button-on-soft: var(--color-on-negative-soft);
  --button-text: var(--color-text-negative);
  --button-outline: var(--color-negative);
}
.button-base--variant-filled {
  --button-background: var(--button-fill);
  --button-blend: var(--button-on-fill);
  --button-foreground: var(--button-on-fill);
}
.button-base--variant-tonal {
  --button-background: var(--button-soft);
  --button-blend: var(--button-on-soft);
  --button-foreground: var(--button-on-soft);
}
.button-base--variant-outlined,
.button-base--variant-text {
  --button-background: transparent;
  --button-background-blend: var(--button-soft);
  --button-background-disabled: transparent;
  --button-blend: var(--button-on-soft);
  --button-foreground: var(--button-text);
  --button-foreground-hover: var(--button-on-soft);
}
.button-base--variant-outlined {
  border: 2px solid var(--button-outline);
}
@media (hover: hover) {
.button-base:hover {
    background: color-mix(in oklab, var(--button-blend) calc(var(--opacity-hover) * 100%), var(--button-background-blend, var(--button-background)));
    color: var(--button-foreground-hover, var(--button-foreground));
}
}
.button-base:active {
  background: color-mix(in oklab, var(--button-blend) calc(var(--opacity-pressed) * 100%), var(--button-background-blend, var(--button-background)));
}
.button-base:disabled, .button-base[aria-disabled="true"] {
  cursor: default;
  background: var(--button-background-disabled, color-mix(in oklab, var(--button-background) calc(var(--opacity-disabled) * 100%), var(--color-surface)));
  color: color-mix(in oklab, var(--button-foreground) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  border-color: color-mix(in oklab, var(--button-outline) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}

.button {
  padding-inline: var(--button-padding-inline);
}
.button__text {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.button__slot {
  display: grid;
  grid-template-areas: "icon";
  place-items: center;
  inline-size: 0;
  overflow: clip;
  transition: inline-size 150ms ease-in-out, margin 150ms ease-in-out;
}
.button__slot > * {
  grid-area: icon;
}
.button__slot--filled {
  inline-size: calc(var(--spacing) * var(--icon-size, 5));
}
.button__slot--leading.button__slot--filled {
  margin-inline-end: var(--button-gap);
}
.button__slot--trailing.button__slot--filled {
  margin-inline-start: var(--button-gap);
}

.box-demo__frame {
  display: inline-block;
  padding: calc(var(--spacing) * 4);
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-lg);
}

.container {
  inline-size: 100%;
  margin-inline: auto;
  position: relative;
  padding-inline: calc(var(--spacing) * 4);
  background: var(--container-color, transparent);
  max-inline-size: var(--container-width, 100%);
}
.container--grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(var(--spacing) * 4);
}
@media (min-width: 40rem) {
.container:not(.container--fluid) {
    --container-width: 40rem;
}
}
@media (min-width: 48rem) {
.container:not(.container--fluid) {
    --container-width: 48rem;
}
}
@media (min-width: 64rem) {
.container:not(.container--fluid) {
    --container-width: 64rem;
}
}
@media (min-width: 80rem) {
.container:not(.container--fluid) {
    --container-width: 80rem;
}
}
@media (min-width: 96rem) {
.container:not(.container--fluid) {
    --container-width: 96rem;
}
}
.container::before, .container::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: calc((100vw - var(--container-width)) / 2);
  background: var(--container-color, transparent);
}
.container::before {
  right: 100%;
}
.container::after {
  left: 100%;
}
.container--padding-top {
  padding-block-start: calc(var(--spacing) * 8);
}
.container--padding-bottom {
  padding-block-end: calc(var(--spacing) * 8);
}
.container--padding-both {
  padding-block: calc(var(--spacing) * 8);
}
.container--color-surface {
  --container-color: var(--color-surface);
  color: var(--color-on-surface);
}
.container--color-surface-container {
  --container-color: var(--color-surface-container);
  color: var(--color-on-surface-container);
}
.container--color-inverse-surface {
  --container-color: var(--color-inverse-surface);
  color: var(--color-on-inverse-surface);
}
.container--color-brand-soft {
  --container-color: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}
.container--color-brand {
  --container-color: var(--color-brand);
  color: var(--color-on-brand);
}
.container--color-brand-bright {
  --container-color: var(--color-brand-bright);
  color: var(--color-on-brand-bright);
}
.container--color-informative-soft {
  --container-color: var(--color-informative-soft);
  color: var(--color-on-informative-soft);
}
.container--color-informative {
  --container-color: var(--color-informative);
  color: var(--color-on-informative);
}
.container--color-informative-bright {
  --container-color: var(--color-informative-bright);
  color: var(--color-on-informative-bright);
}
.container--color-positive-soft {
  --container-color: var(--color-positive-soft);
  color: var(--color-on-positive-soft);
}
.container--color-positive {
  --container-color: var(--color-positive);
  color: var(--color-on-positive);
}
.container--color-positive-bright {
  --container-color: var(--color-positive-bright);
  color: var(--color-on-positive-bright);
}
.container--color-warning-soft {
  --container-color: var(--color-warning-soft);
  color: var(--color-on-warning-soft);
}
.container--color-warning {
  --container-color: var(--color-warning);
  color: var(--color-on-warning);
}
.container--color-warning-bright {
  --container-color: var(--color-warning-bright);
  color: var(--color-on-warning-bright);
}
.container--color-negative-soft {
  --container-color: var(--color-negative-soft);
  color: var(--color-on-negative-soft);
}
.container--color-negative {
  --container-color: var(--color-negative);
  color: var(--color-on-negative);
}
.container--color-negative-bright {
  --container-color: var(--color-negative-bright);
  color: var(--color-on-negative-bright);
}

.container-demo__item {
  grid-column: span 4;
  padding: calc(var(--spacing) * 4);
  border: 1px dashed currentColor;
  border-radius: var(--radius-md);
}

.divider-demo {
  display: flex;
  border: 1px dashed var(--color-outline-variant);
  border-radius: var(--radius-lg);
}
.divider-demo--horizontal {
  flex-direction: column;
}
.divider-demo--vertical {
  flex-direction: row;
  align-items: stretch;
}
.divider-demo__item {
  padding: calc(var(--spacing) * 4);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
  gap: calc(var(--spacing) * var(--grid-gap, 0));
}

.grid-demo__item {
  padding: calc(var(--spacing) * 4);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}
.grid-demo__item--wide {
  grid-column: span 2;
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.stack {
  display: flex;
  gap: calc(var(--spacing) * var(--stack-spacing, 0));
}
.stack--horizontal {
  flex-direction: row;
}
.stack--vertical {
  flex-direction: column;
}

.stack-demo {
  align-items: flex-start;
}
.stack-demo__item {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 5);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}

.palette {
  display: grid;
  gap: calc(var(--spacing) * 4);
  grid-template-columns: repeat(3, 1fr);
}
.palette__column {
  display: grid;
  gap: calc(var(--spacing) * 2);
}
.palette__name {
  text-transform: uppercase;
}
.palette__row {
  display: grid;
  gap: calc(var(--spacing) * 0.5);
}
.palette__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: calc(var(--spacing) * 16);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline);
}
.palette__variable {
  color: var(--color-on-surface);
}
.palette__meta {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}

.tag {
  --tag-touch-target: 40px;
  --tag-touch-bleed: calc(var(--spacing) * 3);

  display: inline-flex;
  align-items: center;
  max-inline-size: 100%;
  block-size: var(--tag-size);
  padding-inline: var(--tag-padding-inline);
  border: 2px solid transparent;
  border-radius: var(--tag-radius);
  background: var(--tag-background);
  color: var(--tag-foreground);
  white-space: nowrap;
  user-select: none;
  transition: background 150ms ease-in-out,
    border-color 150ms ease-in-out,
    color 150ms ease-in-out;
}
.tag__content {
  min-inline-size: 0;
  block-size: 100%;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: none;
  color: inherit;
  text-overflow: ellipsis;
  cursor: inherit;
}
.tag__leading,
.tag__trailing {
  display: grid;
  grid-template-areas: "zone";
  place-items: center;
  inline-size: 0;
  block-size: 100%;
  overflow: clip;
  transition: inline-size 150ms ease-in-out, margin 150ms ease-in-out;
}
.tag__leading > *,
.tag__trailing > * {
  grid-area: zone;
}
.tag__leading--filled {
  inline-size: calc(var(--spacing) * var(--icon-size, 4));
  margin-inline-end: var(--tag-gap);
}
.tag__trailing--filled {
  inline-size: calc(var(--tag-zone-size) + var(--tag-padding-inline));
  margin-inline-start: var(--tag-gap);
}
.tag--removable {
  padding-inline-end: 0;
}
.tag__leading-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tag__remove {
  position: relative;
  display: grid;
  grid-template-areas: "shape";
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding-inline-end: var(--tag-padding-inline);
  background: none;
  color: inherit;
  cursor: pointer;
}
@media (pointer: coarse) {
.tag__trailing {
    overflow-clip-margin: var(--tag-touch-bleed);
}
.tag__remove::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100%, var(--tag-touch-target));
    block-size: max(100%, var(--tag-touch-target));
    translate: -50% -50%;
}
}
.tag__remove::before,
.tag__remove > * {
  grid-area: shape;
}
.tag__remove::before {
  content: "";
  inline-size: var(--tag-remove-size);
  block-size: var(--tag-remove-size);
  border-radius: var(--radius-full);
  transition: background 150ms ease-in-out;
}
.tag-icon-enter-active,
.tag-icon-leave-active {
  transition: opacity 150ms ease-in-out, scale 150ms ease-in-out;
}
.tag-icon-enter-from,
.tag-icon-leave-to {
  opacity: 0;
  scale: 0.6;
}
.tag--size-sm {
  --tag-size: calc(var(--spacing) * 6);
  --tag-padding-inline: calc(var(--spacing) * 2);
  --tag-gap: calc(var(--spacing) * 1);
  --tag-remove-size: calc(var(--spacing) * 4.5);
  --tag-zone-size: calc(var(--spacing) * 5.5);
}
.tag--size-md {
  --tag-size: calc(var(--spacing) * 8);
  --tag-padding-inline: calc(var(--spacing) * 3);
  --tag-gap: calc(var(--spacing) * 1.5);
  --tag-remove-size: calc(var(--spacing) * 6);
  --tag-zone-size: calc(var(--spacing) * 7);
}
.tag--shape-pill {
  --tag-radius: var(--radius-full);
}
.tag--size-sm.tag--shape-rounded {
  --tag-radius: var(--radius-md);
}
.tag--size-md.tag--shape-rounded {
  --tag-radius: var(--radius-lg);
}
.tag--color-primary {
  --tag-fill: var(--color-inverse-surface);
  --tag-on-fill: var(--color-on-inverse-surface);
  --tag-soft: var(--color-surface-container);
  --tag-on-soft: var(--color-on-surface-container);
  --tag-text: var(--color-on-surface);
  --tag-outline: var(--color-outline);
}
.tag--color-brand {
  --tag-fill: var(--color-brand);
  --tag-on-fill: var(--color-on-brand);
  --tag-soft: var(--color-brand-soft);
  --tag-on-soft: var(--color-on-brand-soft);
  --tag-text: var(--color-text-brand);
  --tag-outline: var(--color-brand);
}
.tag--color-informative {
  --tag-fill: var(--color-informative);
  --tag-on-fill: var(--color-on-informative);
  --tag-soft: var(--color-informative-soft);
  --tag-on-soft: var(--color-on-informative-soft);
  --tag-text: var(--color-text-informative);
  --tag-outline: var(--color-informative);
}
.tag--color-positive {
  --tag-fill: var(--color-positive);
  --tag-on-fill: var(--color-on-positive);
  --tag-soft: var(--color-positive-soft);
  --tag-on-soft: var(--color-on-positive-soft);
  --tag-text: var(--color-text-positive);
  --tag-outline: var(--color-positive);
}
.tag--color-warning {
  --tag-fill: var(--color-warning);
  --tag-on-fill: var(--color-on-warning);
  --tag-soft: var(--color-warning-soft);
  --tag-on-soft: var(--color-on-warning-soft);
  --tag-text: var(--color-text-warning);
  --tag-outline: var(--color-warning);
}
.tag--color-negative {
  --tag-fill: var(--color-negative);
  --tag-on-fill: var(--color-on-negative);
  --tag-soft: var(--color-negative-soft);
  --tag-on-soft: var(--color-on-negative-soft);
  --tag-text: var(--color-text-negative);
  --tag-outline: var(--color-negative);
}
.tag--variant-filled {
  --tag-background: var(--tag-fill);
  --tag-blend: var(--tag-on-fill);
  --tag-foreground: var(--tag-on-fill);
}
.tag--variant-tonal {
  --tag-background: var(--tag-soft);
  --tag-blend: var(--tag-on-soft);
  --tag-foreground: var(--tag-on-soft);
}
.tag--variant-outlined {
  --tag-background: transparent;
  --tag-background-blend: var(--tag-soft);
  --tag-background-disabled: transparent;
  --tag-blend: var(--tag-on-soft);
  --tag-foreground: var(--tag-text);

  border-color: var(--tag-outline);
}
.tag--interactive {
  cursor: pointer;
}
@media (hover: hover) {
button.tag:not(:disabled):hover,
  button.tag__content:not(:disabled):hover {
    background: color-mix(in oklab, var(--tag-blend) calc(var(--opacity-hover) * 100%), var(--tag-background-blend, var(--tag-background)));
}
}
button.tag:not(:disabled):active,
button.tag__content:not(:disabled):active {
  background: color-mix(in oklab, var(--tag-blend) calc(var(--opacity-pressed) * 100%), var(--tag-background-blend, var(--tag-background)));
}
@media (hover: hover) {
.tag__remove:not(:disabled):hover::before {
    background: color-mix(in oklab, var(--tag-blend) calc(var(--opacity-hover) * 100%), var(--tag-background-blend, var(--tag-background)));
}
}
.tag__remove:not(:disabled):active::before {
  background: color-mix(in oklab, var(--tag-blend) calc(var(--opacity-pressed) * 100%), var(--tag-background-blend, var(--tag-background)));
}
.tag:disabled,
.tag[aria-disabled="true"] {
  cursor: default;
  background: var(--tag-background-disabled, color-mix(in oklab, var(--tag-background) calc(var(--opacity-disabled) * 100%), var(--color-surface)));
  color: color-mix(in oklab, var(--tag-foreground) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  border-color: color-mix(in oklab, var(--tag-outline) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}

.radius {
  display: grid;
  gap: calc(var(--spacing) * 4);
  grid-template-columns: repeat(5, 1fr);
}
.radius__item {
  display: grid;
  gap: calc(var(--spacing) * 1);
}
.radius__box {
  block-size: calc(var(--spacing) * 32);
  border: 1px solid var(--color-outline);
  background: var(--color-surface-container);
}
.radius__name {
  text-transform: uppercase;
}
.radius__variable,
.radius__value {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.radius-usage {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 5);
}
.radius-usage__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background: linear-gradient(135deg, var(--color-brand-40), var(--color-informative-40));
  color: var(--color-brand-1);
}

.shadow {
  display: grid;
  gap: calc(var(--spacing) * 8);
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}
.shadow__item {
  display: grid;
  gap: calc(var(--spacing) * 2);
  justify-items: center;
}
.shadow__box {
  aspect-ratio: 1;
  inline-size: 100%;
  border-radius: var(--radius-xl);
  background: var(--color-neutral-1);
}
.shadow__variable {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.shadow-usage {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 8);
}
.shadow-usage__menu {
  display: grid;
  gap: calc(var(--spacing) * 1);
  inline-size: 9rem;
  padding: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-1);
}
.shadow-usage__modal {
  display: grid;
  gap: calc(var(--spacing) * 1);
  inline-size: 12rem;
  padding: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  background: var(--color-neutral-1);
}
.shadow-usage__hint {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}

.spacing {
  display: grid;
  gap: calc(var(--spacing) * 2);
}
.spacing__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 9rem;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.spacing__multiplier {
  text-align: right;
}
.spacing__track {
  overflow-x: auto;
}
.spacing__bar {
  background: var(--color-brand);
  border-radius: var(--radius-sm);
  block-size: 1rem;
  min-inline-size: 1px;
}
.spacing__value {
  text-align: right;
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.spacing-usage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 6);
  margin-block: calc(var(--spacing) * 3);
}
.spacing-usage__card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  inline-size: fit-content;
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
}
.spacing-usage__hint {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.spacing-usage__row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.spacing-usage__dot {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-40);
}

.typography {
  display: grid;
  gap: calc(var(--spacing) * 6);
  color: var(--color-on-surface);
}
.typography__group {
  display: grid;
  gap: calc(var(--spacing) * 3);
}
.typography__title {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.typography__row {
  display: grid;
  gap: calc(var(--spacing) * 1);
}
.typography__row:last-child {
  border-bottom: none;
}
.typography__sample {
  margin: 0;
}
.typography__meta {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.typography-usage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
  margin-block: calc(var(--spacing) * 3);
}
.typography-usage__heading {
  margin: 0;
}

.scheme {
  padding: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  display: grid;
  gap: calc(var(--spacing) * 2);
}
.scheme__group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--spacing) * 64), 1fr));
  gap: calc(var(--spacing) * 2)
}
.scheme__group-name {
  grid-column: 1 / -1;
}
.scheme__group-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing);
}
.scheme__swatch {
  border: 1px solid;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  min-block-size: calc(var(--spacing) * 16);
  display: flex;
  align-items: center;
}
.color-usage__card {
  display: grid;
  gap: calc(var(--spacing) * 2);
  max-inline-size: 22rem;
  padding: calc(var(--spacing) * 4);
  border: 1px solid;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.color-usage__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-block-start: calc(var(--spacing) * 1);
}

.opacity {
  display: grid;
  gap: calc(var(--spacing) * 2);
}
.opacity__row {
  display: grid;
  grid-template-columns: 12rem 6rem 9rem 1fr;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.opacity__bar {
  block-size: 1.5rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-sm);
}
.opacity__value,
.opacity__usage {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.opacity-usage {
  display: grid;
  gap: calc(var(--spacing) * 4);
}
.opacity-usage__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.opacity-usage__secondary {
  color: color-mix(in oklab, currentColor calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.opacity-usage__scrim {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing) * 6);
  border-radius: var(--radius-xl);
  background: var(--color-scrim);
}
.opacity-usage__modal {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  box-shadow: var(--shadow-xl);
}

.z-index-usage__stack {
  position: relative;
  block-size: calc(var(--spacing) * 40);
}
.z-index-usage__card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--spacing) * 44);
  block-size: calc(var(--spacing) * 24);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.z-index-usage__card--tooltip {
  inset-block-start: calc(var(--spacing) * 12);
  inset-inline-start: calc(var(--spacing) * 24);
  z-index: var(--z-index-tooltip);
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.z-index-usage__card--modal {
  inset-block-start: calc(var(--spacing) * 6);
  inset-inline-start: calc(var(--spacing) * 12);
  z-index: var(--z-index-modal);
  background: var(--color-brand-bright);
  color: var(--color-on-brand-bright);
}
.z-index-usage__card--dropdown {
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-index-dropdown);
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}

.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: var(--avatar-radius);
  background: var(--avatar-background, transparent);
  color: var(--avatar-foreground, currentColor);
  overflow: hidden;
  user-select: none;
}
.avatar__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.avatar__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar--size-xs {
  --avatar-size: calc(var(--spacing) * 5);
}
.avatar--size-sm {
  --avatar-size: calc(var(--spacing) * 6);
}
.avatar--size-md {
  --avatar-size: calc(var(--spacing) * 8);
}
.avatar--size-lg {
  --avatar-size: calc(var(--spacing) * 10);
}
.avatar--size-xl {
  --avatar-size: calc(var(--spacing) * 12);
}
.avatar--shape-square {
  --avatar-radius: var(--radius-none);
}
.avatar--size-xs.avatar--shape-rounded {
  --avatar-radius: var(--radius-sm);
}
.avatar--size-sm.avatar--shape-rounded {
  --avatar-radius: var(--radius-md);
}
.avatar--size-md.avatar--shape-rounded {
  --avatar-radius: var(--radius-lg);
}
.avatar--size-lg.avatar--shape-rounded {
  --avatar-radius: var(--radius-xl);
}
.avatar--size-xl.avatar--shape-rounded {
  --avatar-radius: var(--radius-2xl);
}
.avatar--shape-pill {
  --avatar-radius: var(--radius-full);
}

.badge-anchor {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  max-inline-size: 100%;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--badge-size);
  border-radius: var(--radius-full);
  background: var(--badge-background);
  color: var(--badge-foreground);
}
.badge--dot,
.badge--letter {
  inline-size: var(--badge-size);
}
.badge:not(.badge--dot, .badge--letter) {
  padding-inline: var(--badge-padding-inline);
}
.badge--size-sm {
  --badge-size: calc(var(--spacing) * 5);
  --badge-padding-inline: calc(var(--spacing) * 1.5);
}
.badge--size-sm.badge--dot {
  --badge-size: calc(var(--spacing) * 1.5);
}
.badge--size-md {
  --badge-size: calc(var(--spacing) * 6);
  --badge-padding-inline: calc(var(--spacing) * 2);
}
.badge--size-md.badge--dot {
  --badge-size: calc(var(--spacing) * 2);
}
.badge--attached {
  --badge-inset-block: calc(var(--badge-size) / -4);
  --badge-inset-inline: calc(100% - var(--badge-size) * 0.75);

  position: absolute;
}
.badge--placement-top-start,
.badge--placement-top-end {
  inset-block-start: var(--badge-inset-block);
}
.badge--placement-bottom-start,
.badge--placement-bottom-end {
  inset-block-end: var(--badge-inset-block);
}
.badge--placement-top-start,
.badge--placement-bottom-start {
  inset-inline-end: var(--badge-inset-inline);
}
.badge--placement-top-end,
.badge--placement-bottom-end {
  inset-inline-start: var(--badge-inset-inline);
}
.badge--color-primary {
  --badge-fill: var(--color-inverse-surface);
  --badge-on-fill: var(--color-on-inverse-surface);
  --badge-soft: var(--color-surface-container);
  --badge-on-soft: var(--color-on-surface-container);
}
.badge--color-brand {
  --badge-fill: var(--color-brand);
  --badge-on-fill: var(--color-on-brand);
  --badge-soft: var(--color-brand-soft);
  --badge-on-soft: var(--color-on-brand-soft);
}
.badge--color-informative {
  --badge-fill: var(--color-informative);
  --badge-on-fill: var(--color-on-informative);
  --badge-soft: var(--color-informative-soft);
  --badge-on-soft: var(--color-on-informative-soft);
}
.badge--color-positive {
  --badge-fill: var(--color-positive);
  --badge-on-fill: var(--color-on-positive);
  --badge-soft: var(--color-positive-soft);
  --badge-on-soft: var(--color-on-positive-soft);
}
.badge--color-warning {
  --badge-fill: var(--color-warning);
  --badge-on-fill: var(--color-on-warning);
  --badge-soft: var(--color-warning-soft);
  --badge-on-soft: var(--color-on-warning-soft);
}
.badge--color-negative {
  --badge-fill: var(--color-negative);
  --badge-on-fill: var(--color-on-negative);
  --badge-soft: var(--color-negative-soft);
  --badge-on-soft: var(--color-on-negative-soft);
}
.badge--variant-filled {
  --badge-background: var(--badge-fill);
  --badge-foreground: var(--badge-on-fill);
}
.badge--variant-tonal {
  --badge-background: var(--badge-soft);
  --badge-foreground: var(--badge-on-soft);
}

.avatar-demo__matrix {
  display: grid;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.avatar-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.avatar-demo__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.avatar-demo__label {
  inline-size: calc(var(--spacing) * 16);
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.button-base.icon-button {
  display: grid;
  grid-template-areas: "icon";
  place-items: center;
  inline-size: var(--button-size);
}
.icon-button > * {
  grid-area: icon;
}

.badge-demo__matrix {
  display: grid;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.badge-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.badge-demo__row--wide {
  gap: calc(var(--spacing) * 20);
}
.badge-demo__row-label {
  inline-size: calc(var(--spacing) * 20);
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}
.badge-demo__anchor {
  display: grid;
  place-items: center;
  inline-size: calc(var(--spacing) * 16);
  block-size: calc(var(--spacing) * 16);
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.625rem;
  text-align: center;
}

.button-demo__matrix {
  display: grid;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.button-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.button-demo__row-label {
  inline-size: calc(var(--spacing) * 18);
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.popover-anchor {
  anchor-name: var(--popover-anchor-name);
}
.popover {
  --popover-slide: calc(var(--spacing) * 2);
  --popover-enter: 150ms;
  --popover-leave: 150ms;

  position-anchor: var(--popover-anchor);
  position-area: var(--popover-area);
  position-try-fallbacks: var(--popover-fallbacks);
  inset: auto;
  margin: 0;
  max-inline-size: calc(100dvw - var(--spacing) * 4);
  max-block-size: calc(100dvh - var(--spacing) * 4);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: auto;
  opacity: 0;
  translate: var(--popover-shift, 0 0);
  transition:
    opacity var(--popover-leave) ease-in-out,
    translate var(--popover-leave) ease-in-out,
    display var(--popover-leave) allow-discrete,
    overlay var(--popover-leave) allow-discrete;
}
.popover:popover-open {
  opacity: 1;
  translate: 0 0;
  transition-duration: var(--popover-enter);
@starting-style {
    opacity: 0;
    translate: var(--popover-shift, 0 0);
}
}
.popover--match-width {
  min-inline-size: anchor-size(inline);
}
.popover--side-top {
  --popover-shift: 0 var(--popover-slide);
  --popover-fallbacks: flip-block;

  margin-block: var(--popover-offset);
}
.popover--side-bottom {
  --popover-shift: 0 calc(var(--popover-slide) * -1);
  --popover-fallbacks: flip-block;

  margin-block: var(--popover-offset);
}
.popover--side-left {
  --popover-shift: var(--popover-slide) 0;
  --popover-fallbacks: flip-inline;

  margin-inline: var(--popover-offset);
}
.popover--side-right {
  --popover-shift: calc(var(--popover-slide) * -1) 0;
  --popover-fallbacks: flip-inline;

  margin-inline: var(--popover-offset);
}
.popover--placement-top {
  --popover-area: block-start center;
}
.popover--placement-top-start {
  --popover-area: block-start span-inline-end;
}
.popover--placement-top-end {
  --popover-area: block-start span-inline-start;
}
.popover--placement-top-left {
  --popover-area: block-start inline-start;
  --popover-fallbacks: flip-block, flip-inline;

  margin: var(--popover-offset);
}
.popover--placement-top-right {
  --popover-area: block-start inline-end;
  --popover-fallbacks: flip-block, flip-inline;

  margin: var(--popover-offset);
}
.popover--placement-bottom {
  --popover-area: block-end center;
}
.popover--placement-bottom-start {
  --popover-area: block-end span-inline-end;
}
.popover--placement-bottom-end {
  --popover-area: block-end span-inline-start;
}
.popover--placement-bottom-left {
  --popover-area: block-end inline-start;
  --popover-fallbacks: flip-block, flip-inline;

  margin: var(--popover-offset);
}
.popover--placement-bottom-right {
  --popover-area: block-end inline-end;
  --popover-fallbacks: flip-block, flip-inline;

  margin: var(--popover-offset);
}
.popover--placement-left {
  --popover-area: inline-start center;
}
.popover--placement-left-start {
  --popover-area: inline-start span-block-end;
}
.popover--placement-left-end {
  --popover-area: inline-start span-block-start;
}
.popover--placement-right {
  --popover-area: inline-end center;
}
.popover--placement-right-start {
  --popover-area: inline-end span-block-end;
}
.popover--placement-right-end {
  --popover-area: inline-end span-block-start;
}

.tooltip {
  display: flex;
  flex-direction: column;
  max-inline-size: min(calc(100vw - var(--spacing) * 4), fit-content);
}
.tooltip--plain {
  gap: 0;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border-radius: var(--radius-sm);
  background: var(--color-inverse-surface);
  color: var(--color-on-inverse-surface);
  pointer-events: none;
  white-space: nowrap;
}
.tooltip--rich {
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-xl);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  box-shadow: var(--shadow-md);
}
.tooltip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  margin-block-start: calc(var(--spacing) * 1);
}

.icon-button-demo__matrix {
  display: grid;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.icon-button-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.icon-button-demo__row-label {
  inline-size: calc(var(--spacing) * 18);
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.icon-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 6);
}
.icon-demo__box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.icon-demo__inline {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  color: var(--color-brand);
}
.icon-demo__scale {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 6);
}
.icon-demo__scale-item {
  display: grid;
  justify-items: center;
  gap: calc(var(--spacing) * 2);
}

.progress-bar--shape-linear {
  display: flex;
  align-items: center;
  gap: var(--progress-gap);
  inline-size: 100%;
  block-size: var(--progress-thickness);
}
.progress-bar--shape-circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--progress-size);
  block-size: var(--progress-size);
}
.progress-bar__segment {
  block-size: 100%;
  border-radius: var(--radius-full);
}
.progress-bar__segment--value {
  flex-grow: 0;
  flex-shrink: 0;
  background: var(--progress-fill);
}
.progress-bar__segment--rest {
  flex: 1;
  background: var(--progress-soft);
}
.progress-bar__svg {
  inline-size: 100%;
  block-size: 100%;
  rotate: calc(var(--progress-start, 0) * 1deg - 90deg);
}
.progress-bar__arc {
  cx: 50%;
  cy: 50%;
  r: calc(50% - var(--progress-thickness) / 2);
  fill: none;
  stroke-width: var(--progress-thickness);
  stroke-linecap: round;
}
.progress-bar__arc--value {
  stroke: var(--progress-fill);
}
.progress-bar__arc--rest {
  stroke: var(--progress-soft);
}
.progress-bar__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.progress-bar--color-primary {
  --progress-fill: var(--color-inverse-surface);
  --progress-soft: var(--color-outline);
}
.progress-bar--color-brand {
  --progress-fill: var(--color-brand);
  --progress-soft: var(--color-brand-soft);
}
.progress-bar--color-informative {
  --progress-fill: var(--color-informative);
  --progress-soft: var(--color-informative-soft);
}
.progress-bar--color-positive {
  --progress-fill: var(--color-positive);
  --progress-soft: var(--color-positive-soft);
}
.progress-bar--color-warning {
  --progress-fill: var(--color-warning);
  --progress-soft: var(--color-warning-soft);
}
.progress-bar--color-negative {
  --progress-fill: var(--color-negative);
  --progress-soft: var(--color-negative-soft);
}

.progress-demo__stack {
  display: grid;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.progress-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.progress-demo__cell {
  display: grid;
  justify-items: center;
  gap: calc(var(--spacing) * 2);
}
.progress-demo__row .progress-bar--shape-linear {
  flex: 1;
  inline-size: auto;
  min-inline-size: calc(var(--spacing) * 40);
}
.progress-demo__label {
  inline-size: calc(var(--spacing) * 24);
  flex-shrink: 0;
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.skeleton {
  --skeleton-background: var(--color-outline-variant);
  --skeleton-highlight: var(--color-outline);
  --skeleton-shimmer-duration: 2600ms;

  display: block;
  background: var(--skeleton-background);
  overflow: clip;
}
.skeleton--variant-shimmer {
  background-image: linear-gradient(
    135deg,
    var(--skeleton-background) 40%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-background) 60%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 200vmax 200vmax;
  animation: skeleton-shimmer var(--skeleton-shimmer-duration) linear infinite;
}
@media (min-width: 48rem) {
.skeleton {
    --skeleton-shimmer-duration: 2400ms;
}
}
@media (min-width: 64rem) {
.skeleton {
    --skeleton-shimmer-duration: 2200ms;
}
}
@media (min-width: 96rem) {
.skeleton {
    --skeleton-shimmer-duration: 2000ms;
}
}
@media (prefers-reduced-motion: reduce) {
.skeleton--variant-shimmer {
    background-image: none;
    animation: none;
}
}
@keyframes skeleton-shimmer {
from {
    background-position: -100vmax -100vmax;
}
to {
    background-position: 100vmax 100vmax;
}
}

.skeleton-demo__grid {
  display: grid;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.skeleton-demo__cell {
  display: grid;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
}
.skeleton-demo__cell--raised {
  background: var(--color-surface-container);
}
.skeleton-demo__block {
  block-size: calc(var(--spacing) * 10);
  border-radius: var(--radius-lg);
}
.skeleton-demo__label {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}
.skeleton-demo__card {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.skeleton-demo__body {
  display: grid;
  gap: calc(var(--spacing) * 3);
  flex: 1;
}
.skeleton-demo__avatar {
  inline-size: calc(var(--spacing) * 12);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.skeleton-demo__title {
  block-size: calc(var(--spacing) * 5);
  inline-size: 40%;
  border-radius: var(--radius-sm);
}
.skeleton-demo__line {
  block-size: 1em;
  border-radius: var(--radius-sm);
}
.skeleton-demo__line--short {
  inline-size: 70%;
}

.spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--spinner-foreground, currentColor);
}
.spinner__icon {
  animation: spinner-spin 700ms linear infinite;
}
@keyframes spinner-spin {
to {
    rotate: 1turn;
}
}
.spinner--color-brand {
  --spinner-foreground: var(--color-text-brand);
}
.spinner--color-informative {
  --spinner-foreground: var(--color-text-informative);
}
.spinner--color-positive {
  --spinner-foreground: var(--color-text-positive);
}
.spinner--color-warning {
  --spinner-foreground: var(--color-text-warning);
}
.spinner--color-negative {
  --spinner-foreground: var(--color-text-negative);
}

.spinner-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.spinner-demo__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.spinner-demo__inline {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.spinner-demo__label {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.tag-demo__matrix {
  display: grid;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.tag-demo__column {
  display: grid;
  justify-items: start;
  gap: calc(var(--spacing) * 3);
  inline-size: 100%;
}
.tag-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.tag-demo__row-label {
  inline-size: calc(var(--spacing) * 20);
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}
.tag-demo__dot {
  inline-size: calc(var(--spacing) * 2);
  block-size: calc(var(--spacing) * 2);
  border-radius: var(--radius-full);
  background: var(--color-positive);
}
.tag-demo__reset {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
  text-decoration: underline;
  cursor: pointer;
}

.calendar {
  --calendar-cell-size: calc(var(--spacing) * 9);
  --calendar-gap: calc(var(--spacing) * 1);

  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  color: var(--color-on-surface);
}
.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--calendar-gap);
}
.calendar__title {
  flex: 1;
  text-transform: capitalize;
.button__text {
    text-align: center;
}
}
.calendar__grid {
  display: flex;
  flex-direction: column;
}
.calendar__row {
  display: grid;
  grid-template-columns: repeat(7, var(--calendar-cell-size));
}
.calendar__weekday {
  display: grid;
  place-items: center;
  block-size: calc(var(--spacing) * 6);
  text-transform: capitalize;
}
.calendar .calendar__day,
.calendar .calendar__cell {
  --button-size: var(--calendar-cell-size);
  --button-radius: var(--radius-md);

  inline-size: 100%;
  padding-inline: 0;
  font-variant-numeric: tabular-nums;
}
.calendar .calendar__day .button__text,
.calendar .calendar__cell .button__text {
  flex: none;
}
.calendar .calendar__weekday--weekend {
  color: var(--color-text-negative);
}
.calendar .calendar__day--weekend {
  --button-foreground: var(--color-text-negative);
}
.calendar .calendar__day--outside.calendar__day--weekend {
  --button-foreground: color-mix(in oklab, var(--color-text-negative) calc(var(--opacity-secondary) * 100%), transparent);
}
.calendar .calendar__day--outside {
  --button-foreground: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-secondary) * 100%), var(--color-surface));
}
.calendar .calendar__day--in-range {
  --button-radius: 0;
}
.calendar .calendar__day--range-start {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.calendar .calendar__day--range-end {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.calendar__panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--calendar-gap);
  inline-size: calc(var(--calendar-cell-size) * 7);
}
.calendar--disabled {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}

.calendar-demo__row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 6);
}
.calendar-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
}
.calendar-demo__dot {
  inline-size: calc(var(--spacing) * 1);
  block-size: calc(var(--spacing) * 1);
  border-radius: var(--radius-full);
  background: currentcolor;
}
.calendar-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.checkbox {
  --checkbox-touch-target: 40px;
  --checkbox-background: var(--color-surface-container);
  --checkbox-foreground: var(--color-on-surface-container);
  --checkbox-border: var(--color-outline);
  --checkbox-marker: var(--color-on-brand);

  display: inline-flex;
  align-items: center;
  gap: var(--checkbox-gap);
  cursor: pointer;
  user-select: none;
}
.checkbox__box {
  position: relative;
  display: grid;
  grid-template-areas: "icon";
  place-items: center;
  flex: none;
  inline-size: var(--checkbox-size);
  block-size: var(--checkbox-size);
  border: 2px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  background: var(--checkbox-background);
  color: var(--checkbox-marker);
  transition: background 150ms ease-in-out,
    border-color 150ms ease-in-out;
}
.checkbox__box > * {
  grid-area: icon;
}
@media (pointer: coarse) {
.checkbox:not(.checkbox--disabled) .checkbox__box::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100%, var(--checkbox-touch-target));
    block-size: max(100%, var(--checkbox-touch-target));
    translate: -50% -50%;
}
}
.checkbox-icon-enter-active,
.checkbox-icon-leave-active {
  transition: opacity 150ms ease-in-out, scale 150ms ease-in-out;
}
.checkbox-icon-enter-from,
.checkbox-icon-leave-to {
  opacity: 0;
  scale: 0.6;
}
.checkbox:has(:checked) .checkbox__box,
.checkbox:has(:indeterminate) .checkbox__box {
  --checkbox-background: var(--color-brand);
  --checkbox-foreground: var(--color-on-brand);
  --checkbox-border: var(--color-brand);
}
.checkbox--invalid {
  --checkbox-marker: var(--color-on-negative);
}
.checkbox--invalid {
  --checkbox-border: var(--color-negative);
}
.checkbox--invalid:has(:checked) .checkbox__box {
  --checkbox-background: var(--color-negative);
  --checkbox-foreground: var(--color-on-negative);
  --checkbox-border: var(--color-negative);
}
.checkbox:has(:focus-visible) .checkbox__box {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
}
.checkbox--disabled {
  cursor: default;
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.checkbox--disabled .checkbox__box {
  background: color-mix(in oklab, var(--checkbox-background) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  border-color: color-mix(in oklab, var(--checkbox-border) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  color: color-mix(in oklab, var(--checkbox-marker) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.checkbox--size-sm {
  --checkbox-size: calc(var(--spacing) * 4);
  --checkbox-gap: calc(var(--spacing) * 2);
  --checkbox-radius: var(--radius-sm);
}
.checkbox--size-md {
  --checkbox-size: calc(var(--spacing) * 5);
  --checkbox-gap: calc(var(--spacing) * 2.5);
  --checkbox-radius: var(--radius-md);
}
.checkbox--size-lg {
  --checkbox-size: calc(var(--spacing) * 6);
  --checkbox-gap: calc(var(--spacing) * 3);
  --checkbox-radius: var(--radius-md);
}

.checkbox-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.checkbox-demo__nested {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  padding-inline-start: calc(var(--spacing) * 7);
}
.checkbox-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.dropdown-menu__group {
  display: contents;
}
.dropdown-menu__label {
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2) calc(var(--spacing) * 1);
}

.dropdown-menu__separator {
  margin-block: calc(var(--spacing) * 1);
}

.dropdown-menu {
  --dropdown-menu-item-size: calc(var(--spacing) * 9);
  --dropdown-menu-padding: calc(var(--spacing) * 1);
  --dropdown-menu-gutter: calc(var(--spacing) * 8);
  --dropdown-menu-room: calc(100dvh - var(--dropdown-menu-gutter) - var(--dropdown-menu-padding) * 2);
  --dropdown-menu-fit: calc(round(down, var(--dropdown-menu-room), var(--dropdown-menu-item-size)) + var(--dropdown-menu-padding) * 2);

  display: flex;
  flex-direction: column;
  min-inline-size: calc(var(--spacing) * 44);
  max-block-size: var(--dropdown-menu-fit);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--spacing) * 1);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  box-shadow: var(--shadow-md);
}
.dropdown-menu--limited {
  max-block-size: min(
    var(--dropdown-menu-fit),
    calc(var(--dropdown-menu-item-size) * var(--dropdown-menu-max-items) + var(--dropdown-menu-padding) * 2)
  );
}
.dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  flex: none;
  min-block-size: var(--dropdown-menu-item-size);
  padding-inline: calc(var(--spacing) * 2);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.dropdown-menu__item:focus-visible,
.dropdown-menu__item[data-active="true"] {
  background: color-mix(in oklab, var(--color-on-surface-container) calc(var(--opacity-hover) * 100%), var(--color-surface-container));
}
@media (hover: hover) {
.dropdown-menu__item:hover:not([aria-disabled="true"]) {
    background: color-mix(in oklab, var(--color-on-surface-container) calc(var(--opacity-hover) * 100%), var(--color-surface-container));
}
}
.dropdown-menu__item[aria-disabled="true"] {
  cursor: default;
  color: color-mix(in oklab, var(--color-on-surface-container) calc(var(--opacity-disabled) * 100%), var(--color-surface-container));
}
.dropdown-menu__leading {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: calc(var(--spacing) * 4);
}
.dropdown-menu--leading > .dropdown-menu__item > .dropdown-menu__leading,
.dropdown-menu--leading > .dropdown-menu__group > .dropdown-menu__item > .dropdown-menu__leading {
  display: flex;
}
.dropdown-menu__text {
  flex: 1;
  min-inline-size: 0;
}
.dropdown-menu__trailing {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}
.dropdown-menu-adornment-enter-active,
.dropdown-menu-adornment-leave-active {
  transition: opacity 150ms ease-in-out, scale 150ms ease-in-out;
}
.dropdown-menu-adornment-enter-from,
.dropdown-menu-adornment-leave-to {
  opacity: 0;
  scale: 0.6;
}
.dropdown-menu__trailing.dropdown-menu-adornment-enter-from,
.dropdown-menu__trailing.dropdown-menu-adornment-leave-to {
  opacity: 0;
}

.base-field {
  appearance: none;
  text-align: start;
  font: inherit;
  --field-clip-bleed: calc(var(--spacing) * 1.5);
  --field-background: var(--color-surface-container);
  --field-foreground: var(--color-on-surface-container);
  --field-placeholder-foreground: color-mix(in oklab, var(--field-foreground) calc(var(--opacity-disabled) * 100%), var(--field-background));
  --field-border: var(--color-outline);
  --field-border-width: 2px;
  --field-slot-size: var(--field-zone-size);

  display: inline-flex;
  align-items: center;
  background: var(--field-background);
  color: var(--field-foreground);
  border: var(--field-border-width) solid var(--field-border);
  border-radius: var(--field-radius);
  cursor: text;
  transition: background 150ms ease-in-out,
    border-color 150ms ease-in-out,
    color 150ms ease-in-out;
}
.base-field ::placeholder {
  color: var(--field-placeholder-foreground);
}
@media (hover: hover) {
.base-field:not(.base-field--disabled):hover {
    --field-border: var(--color-brand-bright);
    /*TODO doesn't remove, i still thinking about that*/
    /*background: color-mix(in oklab, var(--field-foreground) calc(var(--opacity-hover) * 100%), var(--field-background));*/
}
.base-field:not(.base-field--disabled):has(.field-slot:is(button, a):hover) {
    background: var(--field-background);
}
}
.base-field:not(.base-field--disabled).base-field--invalid {
  --field-foreground: var(--color-text-negative);
  --field-border: var(--color-negative);
}
.base-field:not(.base-field--disabled):not(.base-field--invalid):has(:focus-visible) {
  --field-border: var(--color-ring);
}
.base-field--disabled {
  cursor: default;
  background: color-mix(in oklab, var(--field-background) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  color: color-mix(in oklab, var(--field-foreground) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  border-color: color-mix(in oklab, var(--field-border) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.base-field__zone {
  display: grid;
  grid-template-areas: "zone";
  place-items: center;
  flex: none;
  inline-size: 0;
  block-size: 100%;
  overflow: clip;
  overflow-clip-margin: var(--field-clip-bleed);
  transition: inline-size 150ms ease-in-out, margin 150ms ease-in-out;
}
.base-field__zone > * {
  grid-area: zone;
}
.base-field__zone-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.base-field__zone--filled {
  inline-size: var(--field-zone-size);
}
.base-field__leading.base-field__zone--filled {
  margin-inline-end: var(--field-gap);
}
.base-field__trailing.base-field__zone--filled {
  margin-inline-start: var(--field-gap);
}
.base-field-zone-enter-active,
.base-field-zone-leave-active {
  transition: opacity 150ms ease-in-out, scale 150ms ease-in-out;
}
.base-field-zone-enter-from,
.base-field-zone-leave-to {
  opacity: 0;
  scale: 0.6;
}
@media (pointer: coarse) {
.base-field__zone {
    overflow-clip-margin: var(--field-touch-bleed);
}
}
.base-field__control {
  display: flex;
  align-items: center;
  flex: 1;
  min-inline-size: 0;
}
.base-field--size-sm {
  --field-gap: calc(var(--spacing) * 1.5 / 2);
  --field-zone-size: calc(var(--spacing) * 6);
  --field-min-size: calc(var(--spacing) * 8);
  --field-touch-bleed: calc(var(--spacing) * 3);

  min-block-size: var(--field-min-size);
  padding-inline: calc(var(--spacing) * 1.5);
}
.base-field--size-md {
  --field-gap: calc(var(--spacing) * 2.5 / 2);
  --field-zone-size: calc(var(--spacing) * 7);
  --field-min-size: calc(var(--spacing) * 10);
  --field-touch-bleed: calc(var(--spacing) * 2);

  min-block-size: var(--field-min-size);
  padding-inline: calc(var(--spacing) * 2.5);
}
.base-field--size-lg {
  --field-gap: calc(var(--spacing) * 3.5 / 2);
  --field-zone-size: calc(var(--spacing) * 8);
  --field-min-size: calc(var(--spacing) * 12);
  --field-touch-bleed: calc(var(--spacing) * 1);

  min-block-size: var(--field-min-size);
  padding-inline: calc(var(--spacing) * 3.5);
}
.base-field--shape-square {
  --field-radius: var(--radius-none);
}
.base-field--size-sm.base-field--shape-rounded {
  --field-radius: var(--radius-md);
}
.base-field--size-md.base-field--shape-rounded {
  --field-radius: var(--radius-lg);
}
.base-field--size-lg.base-field--shape-rounded {
  --field-radius: var(--radius-xl);
}
.base-field--shape-pill {
  --field-radius: var(--radius-full);
}

.field-slot {
  --field-touch-target: 40px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--field-slot-size, calc(var(--spacing) * 7));
  block-size: var(--field-slot-size, calc(var(--spacing) * 7));
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  transition: background 150ms ease-in-out, color 150ms ease-in-out;
}
.field-slot .avatar {
  --avatar-size: var(--field-slot-size, calc(var(--spacing) * 7));
}
.field-slot:is(button, a) {
  cursor: pointer;
}
@media (hover: hover) {
.field-slot:is(button, a):not(:disabled, [aria-disabled="true"]):hover {
    background: color-mix(in oklab, var(--field-foreground, currentColor) calc(var(--opacity-hover) * 100%), var(--field-background, transparent));
}
}
.field-slot:is(button, a):not(:disabled, [aria-disabled="true"]):active {
  background: color-mix(in oklab, var(--field-foreground, currentColor) calc(var(--opacity-pressed) * 100%), var(--field-background, transparent));
}
.field-slot:disabled,
.field-slot[aria-disabled="true"] {
  cursor: default;
  color: color-mix(in oklab, currentColor calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
@media (pointer: coarse) {
.field-slot:is(button, a)::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100%, var(--field-touch-target));
    block-size: max(100%, var(--field-touch-target));
    translate: -50% -50%;
}
}

.combobox__input {
  inline-size: 100%;
  block-size: 1.75em;
  min-inline-size: 0;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
}
.combobox__empty {
  display: block;
  padding: calc(var(--spacing) * 2);
}
.combobox__arrow {
  transition: rotate 150ms ease-in-out;
}
.combobox__arrow--open {
  rotate: 180deg;
}

.combobox-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  inline-size: min(100%, 20rem);
}
.combobox-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.date-segments {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.date-segments__segment {
  border-radius: var(--radius-md);
  padding-inline: calc(var(--spacing) * 0.25);
  font-variant-numeric: tabular-nums;
  outline: none;
}
.date-segments__segment--empty {
  color: var(--field-placeholder-foreground);
}
.date-segments__segment:focus {
  background: var(--color-brand-soft);
  color: var(--color-on-brand-soft);
}
.date-segments__literal {
  padding-inline: calc(var(--spacing) * 0.25);
}

.date-picker__control {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  min-inline-size: 0;
}
.date-picker__panel {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-lg);
}
.date-picker__presets:empty {
  display: none;
}
.date-picker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}

.date-picker-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.date-picker-demo__row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 6);
}
.date-picker-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.text-field__input {
  inline-size: 100%;
  block-size: 1.75em;
  min-inline-size: 0;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
}

.field-slot-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}
.field-slot-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.field-slot-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.file-upload {
  --file-upload-border: var(--color-outline);
  --file-upload-background: transparent;
  --file-upload-foreground: var(--color-on-surface);

  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  inline-size: 100%;
}
.file-upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
  border: 2px dashed var(--file-upload-border);
  border-radius: var(--radius-lg);
  background: var(--file-upload-background);
  color: var(--file-upload-foreground);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms ease-in-out, background 150ms ease-in-out;
}
.file-upload__zone:has(:focus-visible) {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
}
@media (hover: hover) {
.file-upload:not(.file-upload--disabled) .file-upload__zone:hover {
    --file-upload-border: var(--color-brand);
}
}
.file-upload--dragging {
  --file-upload-border: var(--color-brand);
  --file-upload-background: var(--color-brand-soft);
  --file-upload-foreground: var(--color-on-brand-soft);
}
.file-upload--invalid {
  --file-upload-border: var(--color-negative);
}
.file-upload--disabled .file-upload__zone {
  cursor: default;
  border-color: color-mix(in oklab, var(--file-upload-border) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  color: color-mix(in oklab, var(--file-upload-foreground) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.file-upload__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.file-upload__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
}
.file-upload__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: calc(var(--spacing) * 10);
  block-size: calc(var(--spacing) * 10);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container);
  overflow: clip;
}
.file-upload__preview {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.file-upload__meta {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1;
}
.file-upload__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-upload--disabled .file-upload__item {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}

.file-upload-demo__col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.file-upload-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.text-area-field {
  align-items: start;
}
.text-area-field .base-field__zone {
  block-size: calc(var(--field-min-size) - var(--field-border-width) * 2);
}
.text-area-field__input {
  --text-area-padding: calc((var(--field-min-size) - var(--field-border-width) * 2 - 1lh) / 2);

  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: calc(var(--text-area-min-rows) * 1lh + var(--text-area-padding) * 2);
  max-block-size: calc(var(--text-area-max-rows) * 1lh + var(--text-area-padding) * 2);
  padding-block: var(--text-area-padding);
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
  overflow-y: auto;
  resize: none;
  field-sizing: fixed;
  transition: block-size 150ms ease-in-out;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--form-field-gap);
}
.form-field__label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
  width: fit-content;
  cursor: pointer;
}
.form-field__required {
  color: var(--color-text-negative);
}
.form-field__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
}
.form-field__helper {
  min-inline-size: 0;
}
.form-field__counter {
  flex: none;
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}
.form-field--disabled {
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.form-field--disabled .form-field__label {
  cursor: default;
}
.form-field--size-sm {
  --form-field-gap: calc(var(--spacing) * 0.25);
}
.form-field--size-md {
  --form-field-gap: calc(var(--spacing) * 0.5);
}
.form-field--size-lg {
  --form-field-gap: calc(var(--spacing) * 0.75);
}

.form-field-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}

.mask-field__input {
  inline-size: 100%;
  block-size: 1.75em;
  min-inline-size: 0;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
}

.mask-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}
.mask-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.number-field__input {
  inline-size: 100%;
  block-size: 1.75em;
  min-inline-size: 0;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
  appearance: textfield;
}
.number-field--controls-both .number-field__input {
  text-align: center;
}
.number-field--controls-trailing .base-field__trailing.base-field__zone--filled {
  inline-size: calc(var(--field-zone-size) * 2);
}
.number-field__input::-webkit-outer-spin-button,
.number-field__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.number-field-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}
.number-field-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.password-field__control {
  position: relative;
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
}
.password-field__input {
  inline-size: 100%;
  block-size: 1.75em;
  min-inline-size: 0;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
}
.password-field--mono .password-field__input {
  letter-spacing: var(--password-tracking);
}
.password-field--masked .password-field__input {
  color: transparent;
  caret-color: var(--field-foreground, currentColor);
  -webkit-text-security: none;
}
.password-field--masked .password-field__input::selection {
  color: transparent;
  background: transparent;
}
.password-field__shape--selected {
  background: Highlight;
  color: HighlightText;
}
.password-field {
  --password-tracking: 0.3em;
}
.password-field__shapes {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  block-size: 1.75em;
  overflow: clip;
  inline-size: 100%;
  pointer-events: none;
}
.password-field__track {
  display: flex;
  align-items: center;
  block-size: 100%;
}
.password-field__shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--password-cell, calc(1ch + var(--password-tracking)));
}

.password-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}
.password-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.radio {
  --radio-touch-target: 40px;
  --radio-background: var(--color-surface-container);
  --radio-foreground: var(--color-on-surface-container);
  --radio-border: var(--color-outline);
  --radio-marker: var(--color-on-brand);

  display: inline-flex;
  align-items: center;
  gap: var(--radio-gap);
  cursor: pointer;
  user-select: none;
}
.radio__box {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--radio-size);
  block-size: var(--radio-size);
  border: 2px solid var(--radio-border);
  border-radius: var(--radius-full);
  background: var(--radio-background);
  transition: background 150ms ease-in-out, border-color 150ms ease-in-out;
}
.radio__dot {
  inline-size: var(--radio-dot);
  block-size: var(--radio-dot);
  border-radius: var(--radius-full);
  background: var(--radio-marker);
  scale: 0;
  transition: scale 150ms ease-in-out;
}
.radio:has(:checked) .radio__dot {
  scale: 1;
}
.radio:has(:checked) .radio__box {
  --radio-background: var(--color-brand);
  --radio-foreground: var(--color-on-brand);
  --radio-border: var(--color-brand);
}
.radio--invalid {
  --radio-border: var(--color-negative);
  --radio-marker: var(--color-on-negative);
}
.radio--invalid:has(:checked) .radio__box {
  --radio-background: var(--color-negative);
  --radio-foreground: var(--color-on-negative);
  --radio-border: var(--color-negative);
}
.radio:has(:focus-visible) .radio__box {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
}
.radio--disabled {
  cursor: default;
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.radio--disabled .radio__box {
  background: color-mix(in oklab, var(--radio-background) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  border-color: color-mix(in oklab, var(--radio-border) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.radio--disabled .radio__dot {
  background: color-mix(in oklab, var(--radio-marker) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
@media (pointer: coarse) {
.radio:not(.radio--disabled) .radio__box::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100%, var(--radio-touch-target));
    block-size: max(100%, var(--radio-touch-target));
    translate: -50% -50%;
}
}
.radio--size-sm {
  --radio-size: calc(var(--spacing) * 4);
  --radio-dot: calc(var(--spacing) * 1.5);
  --radio-gap: calc(var(--spacing) * 2);
}
.radio--size-md {
  --radio-size: calc(var(--spacing) * 5);
  --radio-dot: calc(var(--spacing) * 2);
  --radio-gap: calc(var(--spacing) * 2.5);
}
.radio--size-lg {
  --radio-size: calc(var(--spacing) * 6);
  --radio-dot: calc(var(--spacing) * 2.5);
  --radio-gap: calc(var(--spacing) * 3);
}

.radio-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.radio-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.search-field__input {
  inline-size: 100%;
  block-size: 1.75em;
  min-inline-size: 0;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
}
.search-field__input::-webkit-search-cancel-button,
.search-field__input::-webkit-search-decoration {
  appearance: none;
  display: none;
}

.search-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}
.search-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.select {
  cursor: pointer;
}
.select__text {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select__text--placeholder {
  color: var(--field-placeholder-foreground);
}
.select__arrow {
  transition: rotate 150ms ease-in-out;
}
.select__arrow--open {
  rotate: 180deg;
}

.select-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  inline-size: min(100%, 20rem);
}
.select-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.slider {
  --slider-touch-target: 40px;
  --slider-travel: calc(100% - var(--slider-thumb-width));
  --slider-gap: calc(var(--slider-track-size) / 2 + var(--slider-thumb-width) / 2);
  --slider-rest: var(--color-brand-soft);
  --slider-active: var(--color-brand);
  --slider-thumb: var(--color-brand);
  --slider-tick: var(--color-on-brand);

  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
  block-size: max(var(--slider-thumb-height), var(--slider-touch-target));
  touch-action: pan-y;
  cursor: pointer;
}
.slider:has(:focus-visible) {
  --slider-gap: calc(var(--slider-track-size) / 2 + var(--slider-thumb-width));
}
.slider__segment {
  --slider-segment-gap-start: var(--slider-gap);
  --slider-segment-gap-end: var(--slider-gap);

  position: absolute;
  inset-inline-start: calc(
    var(--slider-thumb-width) / 2 + var(--slider-segment-from) * var(--slider-travel) + var(--slider-segment-gap-start)
  );
  inset-inline-end: calc(
    100% - var(--slider-thumb-width) / 2 - var(--slider-segment-to) * var(--slider-travel) + var(--slider-segment-gap-end)
  );
  block-size: var(--slider-track-size);
  border-radius: var(--radius-full);
  background: var(--slider-rest);
}
.slider__segment--active {
  background: var(--slider-active);
}
.slider__segment--edge-start {
  --slider-segment-gap-start: 0px;

  inset-inline-start: 0;
}
.slider__segment--edge-end {
  --slider-segment-gap-end: 0px;

  inset-inline-end: 0;
}
.slider__tick {
  position: absolute;
  inline-size: var(--slider-tick-size);
  block-size: var(--slider-tick-size);
  inset-block-start: 50%;
  inset-inline-start: calc(var(--slider-thumb-width) / 2 + var(--slider-tick-fraction) * var(--slider-travel));
  translate: -50% -50%;
  border-radius: var(--radius-full);
  background: var(--slider-active);
}
.slider__tick--active {
  background: var(--slider-tick);
}
.slider__handle {
  position: absolute;
  display: flex;
  inset-inline-start: calc(var(--slider-thumb-fraction) * var(--slider-travel));
}
.slider__thumb {
  --slider-thumb-current: var(--slider-thumb-width);

  inline-size: var(--slider-thumb-current);
  block-size: var(--slider-thumb-height);
  translate: calc((var(--slider-thumb-width) - var(--slider-thumb-current)) / 2) 0;
  border-radius: var(--radius-full);
  background: var(--slider-thumb);
  transition: inline-size 150ms ease-in-out, translate 150ms ease-in-out;
}
.slider:not(.slider--disabled):active .slider__thumb {
  --slider-thumb-current: calc(var(--slider-thumb-width) * 0.75);
}
.slider__handle:has(:focus-visible) .slider__thumb {
  --slider-thumb-current: calc(var(--slider-thumb-width) * 1.25);
}
.slider--invalid {
  --slider-rest: var(--color-negative-soft);
  --slider-active: var(--color-negative);
  --slider-thumb: var(--color-negative);
  --slider-tick: var(--color-on-negative);
}
.slider--disabled {
  cursor: default;
}
.slider--disabled .slider__segment {
  background: color-mix(in oklab, var(--slider-rest) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.slider--disabled .slider__segment--active {
  background: color-mix(in oklab, var(--slider-active) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.slider--disabled .slider__thumb {
  background: color-mix(in oklab, var(--slider-thumb) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.slider--size-sm {
  --slider-track-size: calc(var(--spacing) * 1.5);
  --slider-thumb-width: calc(var(--spacing) * 1.25);
  --slider-thumb-height: calc(var(--spacing) * 6);
  --slider-tick-size: calc(var(--spacing) * 1);
}
.slider--size-md {
  --slider-track-size: calc(var(--spacing) * 2);
  --slider-thumb-width: calc(var(--spacing) * 1.5);
  --slider-thumb-height: calc(var(--spacing) * 7);
  --slider-tick-size: calc(var(--spacing) * 1.25);
}
.slider--size-lg {
  --slider-track-size: calc(var(--spacing) * 2.5);
  --slider-thumb-width: calc(var(--spacing) * 1.75);
  --slider-thumb-height: calc(var(--spacing) * 8);
  --slider-tick-size: calc(var(--spacing) * 1.5);
}

.slider-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--spacing) * 4);
  inline-size: 100%;
}
.slider-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.switch {
  --switch-touch-target: 40px;
  --switch-padding: 1px;
  --switch-thumb-size: calc(var(--switch-height) - var(--switch-padding) * 2 - 4px);
  --switch-track: var(--color-surface-container);
  --switch-thumb: var(--color-on-surface-container);
  --switch-border: var(--color-outline);

  display: inline-flex;
  align-items: center;
  gap: var(--switch-gap);
  cursor: pointer;
  user-select: none;
}
.switch__track {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  inline-size: var(--switch-width);
  block-size: var(--switch-height);
  padding: var(--switch-padding);
  border: 2px solid var(--switch-border);
  border-radius: var(--radius-full);
  background: var(--switch-track);
  transition: background 150ms ease-in-out, border-color 150ms ease-in-out;
}
.switch__thumb {
  inline-size: var(--switch-thumb-size);
  block-size: var(--switch-thumb-size);
  border-radius: var(--radius-full);
  background: var(--switch-thumb);
  scale: 0.75;
  transition: translate 150ms ease-in-out, background 150ms ease-in-out, scale 150ms ease-in-out;
}
.switch:has(:checked) .switch__thumb {
  scale: 1;
  translate: calc(var(--switch-width) - var(--switch-height)) 0;
}
.switch:has(:checked) .switch__track {
  --switch-track: var(--color-brand);
  --switch-thumb: var(--color-on-brand);
  --switch-border: var(--color-brand);
}
.switch:not(.switch--disabled):active .switch__thumb {
  scale: 0.9;
}
.switch:not(.switch--disabled):active:has(:checked) .switch__thumb {
  scale: 1.15;
}
.switch--invalid {
  --switch-border: var(--color-negative);
  --switch-thumb: var(--color-negative);
}
.switch--invalid:has(:checked) .switch__track {
  --switch-track: var(--color-negative);
  --switch-thumb: var(--color-on-negative);
  --switch-border: var(--color-negative);
}
.switch:has(:focus-visible) .switch__track {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
}
.switch--disabled {
  cursor: default;
  color: color-mix(in oklab, var(--color-on-surface) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.switch--disabled .switch__track {
  background: color-mix(in oklab, var(--switch-track) calc(var(--opacity-disabled) * 100%), var(--color-surface));
  border-color: color-mix(in oklab, var(--switch-border) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
.switch--disabled .switch__thumb {
  background: color-mix(in oklab, var(--switch-thumb) calc(var(--opacity-disabled) * 100%), var(--color-surface));
}
@media (pointer: coarse) {
.switch:not(.switch--disabled) .switch__track::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: max(100%, var(--switch-touch-target));
    block-size: max(100%, var(--switch-touch-target));
    translate: -50% -50%;
}
}
.switch--size-sm {
  --switch-width: calc(var(--spacing) * 9);
  --switch-height: calc(var(--spacing) * 5);
  --switch-gap: calc(var(--spacing) * 2);
}
.switch--size-md {
  --switch-width: calc(var(--spacing) * 11);
  --switch-height: calc(var(--spacing) * 6);
  --switch-gap: calc(var(--spacing) * 2.5);
}
.switch--size-lg {
  --switch-width: calc(var(--spacing) * 13);
  --switch-height: calc(var(--spacing) * 7);
  --switch-gap: calc(var(--spacing) * 3);
}

.switch-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.switch-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.tags-input {
  padding-block: calc(var(--spacing) * 1);
}
.tags-input__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  inline-size: 100%;
  min-inline-size: 0;
}
.tags-input__tag {
  outline: none;
}
.tags-input__tag:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}
.tags-input__input {
  flex: 1;
  min-inline-size: calc(var(--spacing) * 16);
  block-size: 1.75em;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
}
.tags-input__empty {
  display: block;
  padding: calc(var(--spacing) * 2);
}
.tags-input__arrow {
  transition: rotate 150ms ease-in-out;
}
.tags-input__arrow--open {
  rotate: 180deg;
}

.tags-input-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  inline-size: min(100%, 20rem);
}
.tags-input-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.text-area-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}
.text-area-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.text-field-demo__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  inline-size: min(100%, 22rem);
  gap: calc(var(--spacing) * 4);
}
.text-field-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.text-field-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 2px solid var(--alert-border);
  border-radius: var(--radius-lg);
  background: var(--alert-background);
  color: var(--alert-foreground);
}
.alert--variant-outlined {
  --alert-background: var(--color-surface-container);
  --alert-foreground: var(--color-on-surface-container);
  --alert-border: var(--color-outline);
  --alert-icon: currentColor;
}
.alert--variant-outlined.alert--color-informative {
  --alert-border: var(--color-informative);
  --alert-icon: var(--color-informative);
}
.alert--variant-outlined.alert--color-positive {
  --alert-border: var(--color-positive);
  --alert-icon: var(--color-positive);
}
.alert--variant-outlined.alert--color-warning {
  --alert-border: var(--color-warning);
  --alert-icon: var(--color-warning);
}
.alert--variant-outlined.alert--color-negative {
  --alert-border: var(--color-negative);
  --alert-icon: var(--color-negative);
}
.alert--variant-tonal {
  --alert-border: transparent;
  --alert-icon: currentColor;
}
.alert--variant-tonal.alert--color-primary {
  --alert-background: var(--color-surface-container);
  --alert-foreground: var(--color-on-surface-container);
}
.alert--variant-tonal.alert--color-informative {
  --alert-background: var(--color-informative-soft);
  --alert-foreground: var(--color-on-informative-soft);
}
.alert--variant-tonal.alert--color-positive {
  --alert-background: var(--color-positive-soft);
  --alert-foreground: var(--color-on-positive-soft);
}
.alert--variant-tonal.alert--color-warning {
  --alert-background: var(--color-warning-soft);
  --alert-foreground: var(--color-on-warning-soft);
}
.alert--variant-tonal.alert--color-negative {
  --alert-background: var(--color-negative-soft);
  --alert-foreground: var(--color-on-negative-soft);
}
.alert--banner {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-index-overlay);
  border-radius: 0;
}
.alert:not(:has(.alert__title)) {
  align-items: center;
}
.alert__icon {
  flex: none;
  color: var(--alert-icon);
  margin-block-start: calc(var(--spacing) * 1);
}
.alert:not(:has(.alert__title)) .alert__icon {
  margin-block-start: 0;
}
.alert__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
  flex: 1;
  min-inline-size: 0;
}
.alert__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.alert__close {
  flex: none;
}

.alert-demo__column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--spacing) * 3);
}

.context-menu__group {
  display: contents;
}
.context-menu__label {
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2) calc(var(--spacing) * 1);
}

.context-menu__separator {
  margin-block: calc(var(--spacing) * 1);
}

.context-menu {
  display: flex;
  flex-direction: column;
  min-inline-size: calc(var(--spacing) * 44);
  padding: calc(var(--spacing) * 1);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  box-shadow: var(--shadow-md);
}
.context-menu__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-block-size: calc(var(--spacing) * 9);
  padding-inline: calc(var(--spacing) * 2);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.context-menu__item:focus-visible {
  background: color-mix(in oklab, var(--color-on-surface-container) calc(var(--opacity-hover) * 100%), var(--color-surface-container));
}
@media (hover: hover) {
.context-menu__item:hover:not([aria-disabled="true"]) {
    background: color-mix(in oklab, var(--color-on-surface-container) calc(var(--opacity-hover) * 100%), var(--color-surface-container));
}
}
.context-menu__item[aria-disabled="true"] {
  cursor: default;
  color: color-mix(in oklab, var(--color-on-surface-container) calc(var(--opacity-disabled) * 100%), var(--color-surface-container));
}
.context-menu__leading {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: calc(var(--spacing) * 4);
}
.context-menu--leading > .context-menu__item > .context-menu__leading,
.context-menu--leading > .context-menu__group > .context-menu__item > .context-menu__leading {
  display: flex;
}
.context-menu__text {
  flex: 1;
  min-inline-size: 0;
}
.context-menu__trailing {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}
.context-menu-adornment-enter-active,
.context-menu-adornment-leave-active {
  transition: opacity 150ms ease-in-out, scale 150ms ease-in-out;
}
.context-menu-adornment-enter-from,
.context-menu-adornment-leave-to {
  opacity: 0;
  scale: 0.6;
}
.context-menu__trailing.context-menu-adornment-enter-from,
.context-menu__trailing.context-menu-adornment-leave-to {
  opacity: 0;
}
.context-menu__anchor {
  position: fixed;
  inline-size: 0;
  block-size: 0;
  anchor-name: var(--context-menu-anchor);
}
.popover:has(> .context-menu--root) {
  --popover-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

.context-menu-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.context-menu-demo__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: calc(var(--spacing) * 60);
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
}
.context-menu-demo__zone--muted {
  opacity: var(--opacity-secondary);
}
.context-menu-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

html:has(.dialog[open]) {
  overflow: hidden;
}
.dialog {
  --dialog-enter: 150ms;
  --dialog-leave: 150ms;

  grid-template-rows: auto 1fr auto;
  max-inline-size: min(var(--dialog-width, 32rem), 100dvw - var(--spacing) * 8);
  max-block-size: calc(100dvh - var(--spacing) * 8);
  padding: 0;
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-3xl);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  scale: 0.96;
  transition:
    opacity var(--dialog-leave) ease-in-out,
    scale var(--dialog-leave) ease-in-out,
    display var(--dialog-leave) allow-discrete,
    overlay var(--dialog-leave) allow-discrete;
}
.dialog[open] {
  display: grid;
  opacity: 1;
  scale: 1;
  transition-duration: var(--dialog-enter);
@starting-style {
    opacity: 0;
    scale: 0.96;
}
}
.dialog::backdrop {
  background: var(--color-scrim);
  opacity: 0;
  transition:
    opacity var(--dialog-leave) ease-in-out,
    display var(--dialog-leave) allow-discrete,
    overlay var(--dialog-leave) allow-discrete;
}
.dialog[open]::backdrop {
  opacity: 1;
  transition-duration: var(--dialog-enter);
@starting-style {
    opacity: 0;
}
}
.dialog__title {
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 5) calc(var(--spacing) * 3);
}
.dialog__body {
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 5);
  overflow: auto;
}
.dialog__title + .dialog__body {
  padding-block-start: 0;
}
.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5) calc(var(--spacing) * 5);
}

.dialog-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.dialog-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

html:has(.drawer[open]) {
  overflow: hidden;
}
.drawer {
  --drawer-enter: 250ms;
  --drawer-leave: 200ms;

  max-inline-size: none;
  max-block-size: none;
  padding: 0;
  border: 0;
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition:
    translate var(--drawer-leave) ease-in-out,
    display var(--drawer-leave) allow-discrete,
    overlay var(--drawer-leave) allow-discrete;
}
.drawer[open] {
  display: flex;
  transition-duration: var(--drawer-enter);
}
.drawer--dragging {
  transition: none;
}
.drawer::backdrop {
  background: var(--color-scrim);
  opacity: 0;
  transition:
    opacity var(--drawer-leave) ease-in-out,
    display var(--drawer-leave) allow-discrete,
    overlay var(--drawer-leave) allow-discrete;
}
.drawer[open]::backdrop {
  opacity: 1;
  transition-duration: var(--drawer-enter);
@starting-style {
    opacity: 0;
}
}
.drawer--start,
.drawer--end {
  inline-size: min(var(--drawer-size, 20rem), 100dvw);
  block-size: 100dvh;
  margin-block: 0;
}
.drawer--top,
.drawer--bottom {
  inline-size: 100dvw;
  block-size: var(--drawer-size, fit-content);
  max-block-size: 85dvh;
  margin-inline: 0;
}
.drawer--end {
  flex-direction: row;
  margin-inline: auto 0;
  border-start-start-radius: var(--radius-3xl);
  border-end-start-radius: var(--radius-3xl);
  translate: 100% 0;
}
.drawer--end[open] {
  translate: var(--drawer-drag, 0px) 0;
}
@starting-style {
.drawer--end[open] {
    translate: 100% 0;
}
}
.drawer--start {
  flex-direction: row-reverse;
  margin-inline: 0 auto;
  border-start-end-radius: var(--radius-3xl);
  border-end-end-radius: var(--radius-3xl);
  translate: -100% 0;
}
.drawer--start[open] {
  translate: var(--drawer-drag, 0px) 0;
}
@starting-style {
.drawer--start[open] {
    translate: -100% 0;
}
}
.drawer--bottom {
  flex-direction: column;
  margin-block: auto 0;
  border-start-start-radius: var(--radius-3xl);
  border-start-end-radius: var(--radius-3xl);
  translate: 0 100%;
}
.drawer--bottom[open] {
  translate: 0 var(--drawer-drag, 0px);
}
@starting-style {
.drawer--bottom[open] {
    translate: 0 100%;
}
}
.drawer--top {
  flex-direction: column-reverse;
  margin-block: 0 auto;
  border-end-start-radius: var(--radius-3xl);
  border-end-end-radius: var(--radius-3xl);
  translate: 0 -100%;
}
.drawer--top[open] {
  translate: 0 var(--drawer-drag, 0px);
}
@starting-style {
.drawer--top[open] {
    translate: 0 -100%;
}
}
.drawer__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.drawer--dragging > .drawer__handle {
  cursor: grabbing;
}
.drawer__handle::before {
  content: "";
  display: block;
  border-radius: var(--radius-full);
  background: var(--color-on-surface-container);
  opacity: var(--opacity-disabled);
}
.drawer--start > .drawer__handle,
.drawer--end > .drawer__handle {
  inline-size: calc(var(--spacing) * 5);
  block-size: 100%;
}
.drawer--start > .drawer__handle::before,
.drawer--end > .drawer__handle::before {
  inline-size: calc(var(--spacing) * 1);
  block-size: calc(var(--spacing) * 8);
}
.drawer--top > .drawer__handle,
.drawer--bottom > .drawer__handle {
  inline-size: 100%;
  block-size: calc(var(--spacing) * 5);
}
.drawer--top > .drawer__handle::before,
.drawer--bottom > .drawer__handle::before {
  inline-size: calc(var(--spacing) * 8);
  block-size: calc(var(--spacing) * 1);
}
.drawer__body {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
  padding: calc(var(--spacing) * 5);
  overflow: auto;
}
.drawer--bottom > .drawer__body {
  padding-block-start: 0;
}
.drawer--top > .drawer__body {
  padding-block-end: 0;
}
.drawer--end > .drawer__body {
  padding-inline-start: 0;
}
.drawer--start > .drawer__body {
  padding-inline-end: 0;
}

.drawer-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}

.dropdown-menu-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  justify-content: center;
  inline-size: 100%;
}
.dropdown-menu-demo__muted {
  color: var(--color-on-surface);
  opacity: var(--opacity-secondary);
}

.popover-demo__grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  justify-content: center;
  inline-size: 100%;
}
.popover-demo__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.popover-demo__body {
  display: block;
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.popover-demo__wide {
  inline-size: calc(var(--spacing) * 60);
}

.toast {
  --toast-shift: calc(var(--toast-index) * 14px);
  --toast-scale: calc(1 - var(--toast-index) * 0.03);

  position: absolute;
  z-index: calc(100 - var(--toast-index));
  inline-size: 100%;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3) calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-surface-container);
  color: var(--color-on-surface-container);
  border: 2px solid var(--color-outline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  scale: var(--toast-scale);
  transition:
    translate 200ms ease-in-out,
    scale 200ms ease-in-out,
    opacity 200ms ease-in-out;
}
.toast--color-informative {
  border-color: var(--color-informative);
.toast__icon {
    color: var(--color-informative)
}
}
.toast--color-positive {
  border-color: var(--color-positive);
.toast__icon {
    color: var(--color-positive)
}
}
.toast--color-warning {
  border-color: var(--color-warning);
.toast__icon {
    color: var(--color-warning)
}
}
.toast--color-positive {
  border-color: var(--color-positive);
.toast__icon {
    color: var(--color-positive)
}
}
.toast--color-warning {
  border-color: var(--color-warning);
.toast__icon {
    color: var(--color-warning)
}
}
.toast--color-negative {
  border-color: var(--color-negative);
.toast__icon {
    color: var(--color-negative)
}
}
.toast__icon {
  flex: none;
  margin-block-start: calc(var(--spacing));
}
.toast__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  margin-block-start: calc(var(--spacing) * 0.25);
}
.toast__extra {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 200ms ease-in-out,
    opacity 200ms ease-in-out;
}
.toast__extra-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 1);
  min-block-size: 0;
  padding-block-start: calc(var(--spacing) * 1);
  overflow: hidden;
}
.toast__action {
  flex: none;
  width: auto;
  margin-inline-start: auto;
}
.toast__close {
  flex: none;
}

.toast-provider {
  --toast-width: 22rem;

  inset: auto;
  margin: 0;
  max-inline-size: none;
  max-block-size: none;
  padding: calc(var(--spacing) * 4);
  border: 0;
  background: none;
  color: inherit;
  overflow: visible;
  pointer-events: none;
}
.toast-provider--top-start,
.toast-provider--top,
.toast-provider--top-end {
  inset-block-start: 0;
}
.toast-provider--bottom-start,
.toast-provider--bottom,
.toast-provider--bottom-end {
  inset-block-end: 0;
}
.toast-provider--top-start,
.toast-provider--bottom-start {
  inset-inline-start: 0;
}
.toast-provider--top-end,
.toast-provider--bottom-end {
  inset-inline-end: 0;
}
.toast-provider--top,
.toast-provider--bottom {
  inset-inline: 0;
  margin-inline: auto;
}
.toast-provider__stack {
  position: relative;
  inline-size: min(var(--toast-width), 100dvw - var(--spacing) * 8);
  block-size: var(--toast-stack-size, 0);
  pointer-events: auto;
  transition: block-size 200ms ease-in-out;
}
.toast-provider--top-start .toast,
.toast-provider--top .toast,
.toast-provider--top-end .toast {
  inset-block-start: 0;
  translate: 0 var(--toast-shift);
}
.toast-provider--bottom-start .toast,
.toast-provider--bottom .toast,
.toast-provider--bottom-end .toast {
  inset-block-end: 0;
  translate: 0 calc(var(--toast-shift) * -1);
}
.toast-provider__stack:not(.toast-provider__stack--expanded) .toast:nth-child(n + 4) {
  opacity: 0;
  pointer-events: none;
}
.toast-provider__stack:not(.toast-provider__stack--expanded):has(.toast:nth-child(2)) .toast__extra {
  grid-template-rows: 0fr;
  opacity: 0;
}
.toast-provider__stack--expanded .toast {
  --toast-shift: var(--toast-offset);
  --toast-scale: 1;
}

.toast-demo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}

.tooltip-demo__row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
  justify-content: center;
  inline-size: 100%;
}
/*$vite$:1*/