@citolab/qti-components 6.0.3-9 → 6.0.3

package/dist/themes/qti.css

@@ -42,13 +42,11 @@
   modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
   */
 
-/* @layer base, components, utilities, variants; */
-
-/* layout, dimensions, design */
+@layer base, components, variants, states, utilities;
 
 /** default styles for all components */
 
-*, ::before, ::after {
+*, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -98,7 +96,7 @@
   --tw-backdrop-sepia:  ;
 }
 
-::backdrop {
+::backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -148,57 +146,6 @@
   --tw-backdrop-sepia:  ;
 }
 
-/** The different components, you can choose only one */
-
-/* - button  : .input-control-hidden qti-choice, qti-hotspot */
-
-/*  - select  : inline-choice */
-
-/* - check   : qti-choice, qti-hotspot */
-
-/* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
-
-/* - text    : text-entry and extended-text */
-
-/* - spot    : gap-select-point, graphic-order, qti-graphic-associate */
-
-/* - drag    : gap-match, match, order, associate */
-
-/* - drop    : gap-match, match, order, associate */
-
-/** End components */
-
-/* hover, every element has a hover, except disabled( which overrides hover */
-
-/* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
-
-/* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
-
-/* readonly, overwrites cursor, hover background, outline for focus and ring */
-
-/* disabled, make gray state */
-
-/* drag in the drop, else the drag in the drop was black and not gray */
-
-/** Modifiers */
-
-/* PK: There was no utility to reset the ring-inset
-  We use this for the drop container, where we want the ring to have an outset
-  So the drag, with ring-inset, snugs neatly into the drop with ring-'outset' 
-  by unsetting the ring-inset */
-
-/* intext for elements which has to appear in text
-  - intext    : gap-match > qti-gap, hottext > hottext, select
-  */
-
-/* small for elements which has to appear in text
-  - intext    : gap-match > qti-gap, hottext > hottext, select
-*/
-
-/* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
-
-/* QTI Interactions */
-
 .qti-underline {
   text-decoration: underline;
 }
@@ -264,216 +211,87 @@
   box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
 }
 
-.qti-layout-row {
-  display: flow-root;
-  width: 100%;
-}
-
-.qti-layout-row [class*='qti-layout-col'] {
-  margin-left: 2.1276595745%;
-  float: left;
-}
-
-.qti-layout-row [class*='qti-layout-col']:first-child {
-  margin-left: 0;
-}
-
-.qti-layout-row .qti-layout-col12 {
-  width: 100%;
-}
-
-.qti-layout-row .qti-layout-offset12 {
-  margin-left: 104.2553191489%;
-}
-
-.qti-layout-row .qti-layout-offset12:first-child {
-  margin-left: 102.1276595745%;
-}
-
-.qti-layout-row .qti-layout-col11 {
-  width: 91.4893617021%;
-}
-
-.qti-layout-row .qti-layout-offset11 {
-  margin-left: 95.7446808511%;
-}
-
-.qti-layout-row .qti-layout-offset11:first-child {
-  margin-left: 93.6170212766%;
-}
-
-.qti-layout-row .qti-layout-col10 {
-  width: 82.9787234043%;
-}
-
-.qti-layout-row .qti-layout-offset10 {
-  margin-left: 87.2340425532%;
-}
-
-.qti-layout-row .qti-layout-offset10:first-child {
-  margin-left: 85.1063829787%;
-}
-
-.qti-layout-row .qti-layout-col9 {
-  width: 74.4680851064%;
-}
-
-.qti-layout-row .qti-layout-offset9 {
-  margin-left: 78.7234042553%;
-}
-
-.qti-layout-row .qti-layout-offset9:first-child {
-  margin-left: 76.5957446809%;
-}
-
-.qti-layout-row .qti-layout-col8 {
-  width: 65.9574468085%;
-}
-
-.qti-layout-row .qti-layout-offset8 {
-  margin-left: 70.2127659574%;
-}
-
-.qti-layout-row .qti-layout-offset8:first-child {
-  margin-left: 68.085106383%;
-}
-
-.qti-layout-row .qti-layout-col7 {
-  width: 57.4468085106%;
-}
-
-.qti-layout-row .qti-layout-offset7 {
-  margin-left: 61.7021276596%;
-}
-
-.qti-layout-row .qti-layout-offset7:first-child {
-  margin-left: 59.5744680851%;
-}
-
-.qti-layout-row .qti-layout-col6 {
-  width: 48.9361702128%;
-}
+/** The different components, you can choose only one */
 
-.qti-layout-row .qti-layout-offset6 {
-  margin-left: 53.1914893617%;
-}
+/* - button  : .input-control-hidden qti-choice, qti-hotspot */
 
-.qti-layout-row .qti-layout-offset6:first-child {
-  margin-left: 51.0638297872%;
-}
+/*  - select  : inline-choice */
 
-.qti-layout-row .qti-layout-col5 {
-  width: 40.4255319149%;
-}
+/* - check   : qti-choice, qti-hotspot */
 
-.qti-layout-row .qti-layout-offset5 {
-  margin-left: 44.6808510638%;
-}
+/* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
 
-.qti-layout-row .qti-layout-offset5:first-child {
-  margin-left: 42.5531914894%;
-}
+/* - text    : text-entry and extended-text */
 
-.qti-layout-row .qti-layout-col4 {
-  width: 31.914893617%;
-}
+/* - spot    : gap-select-point, graphic-order, qti-graphic-associate */
 
-.qti-layout-row .qti-layout-offset4 {
-  margin-left: 36.170212766%;
-}
+/* - drag    : gap-match, match, order, associate */
 
-.qti-layout-row .qti-layout-offset4:first-child {
-  margin-left: 34.0425531915%;
-}
+/* - drop    : gap-match, match, order, associate */
 
-.qti-layout-row .qti-layout-col3 {
-  width: 23.4042553191%;
-}
+/** End components */
 
-.qti-layout-row .qti-layout-offset3 {
-  margin-left: 27.6595744681%;
-}
+/** Modifiers */
 
-.qti-layout-row .qti-layout-offset3:first-child {
-  margin-left: 25.5319148936%;
-}
+/* intext for elements which has to appear in text
+  - intext    : gap-match > qti-gap, hottext > hottext, select
+  */
 
-.qti-layout-row .qti-layout-col2 {
-  width: 14.8936170213%;
-}
+/* small for elements which has to appear in text
+  - intext    : gap-match > qti-gap, hottext > hottext, select
+*/
 
-.qti-layout-row .qti-layout-offset2 {
-  margin-left: 19.1489361702%;
-}
+/* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
 
-.qti-layout-row .qti-layout-offset2:first-child {
-  margin-left: 17.0212765957%;
-}
+/* hover, every element has a hover, except disabled( which overrides hover */
 
-.qti-layout-row .qti-layout-col1 {
-  width: 6.3829787234%;
-}
+/* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
 
-.qti-layout-row .qti-layout-offset1 {
-  margin-left: 10.6382978723%;
-}
+/* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
 
-.qti-layout-row .qti-layout-offset1:first-child {
-  margin-left: 8.5106382979%;
-}
+/* readonly, overwrites cursor, hover background, outline for focus and ring */
 
-.qti-input-width-1 {
-  width: 1ch;
-  min-width: 1ch;
-}
+/* disabled, make gray state */
 
-.qti-input-width-2 {
-  width: 2ch;
-  min-width: 2ch;
-}
+/* drag in the drop, else the drag in the drop was black and not gray */
 
-.qti-input-width-3 {
-  width: 3ch;
-  min-width: 3ch;
-}
+/* PK: There was no utility to reset the ring-inset
+We use this for the drop container, where we want the ring to have an outset
+So the drag, with ring-inset, snugs neatly into the drop with ring-'outset' 
+by unsetting the ring-inset */
 
-.qti-input-width-4 {
-  width: 4ch;
-  min-width: 4ch;
+qti-choice-interaction{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: grid;
+  gap: 0.5rem;
 }
 
-.qti-input-width-6 {
-  width: 6ch;
-  min-width: 6ch;
+qti-choice-interaction.qti-choices-stacking-2{
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.qti-input-width-10 {
-  width: 10ch;
-  min-width: 10ch;
+qti-choice-interaction.qti-choices-stacking-3{
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.qti-input-width-15 {
-  width: 15ch;
-  min-width: 15ch;
+qti-choice-interaction.qti-choices-stacking-4{
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.qti-input-width-20 {
-  width: 20ch;
-  min-width: 20ch;
+qti-choice-interaction.qti-choices-stacking-5{
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 
-.qti-input-width-72 {
-  width: 72ch;
-  min-width: 72ch;
+qti-choice-interaction.qti-orientation-horizontal{
+  display: flex;
 }
 
-qti-choice-interaction {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  gap: 0.5rem;
+qti-choice-interaction[orientation='horizontal']{
+  display: flex;
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -499,25 +317,25 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"] {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -530,12 +348,12 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled=
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > * {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"] {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -548,7 +366,7 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly=
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -585,7 +403,7 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(ch
       width: 66.666667%;
     }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch) {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -604,13 +422,13 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ra
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio'][aria-checked='true']::part(cha) {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio'][aria-checked='true']::part(cha){
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch) {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -633,25 +451,25 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ch
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
     }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:hover {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"] {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -664,12 +482,12 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-dis
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] > * {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"] {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -682,12 +500,12 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-rea
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-text-entry-interaction {
+qti-text-entry-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-text-entry-interaction::part(input) {
+qti-text-entry-interaction::part(input){
   cursor: pointer;
   color: rgb(17 24 39 / var(--tw-text-opacity));
   outline: 2px solid transparent;
@@ -708,22 +526,22 @@ qti-text-entry-interaction::part(input) {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-qti-text-entry-interaction::part(input):hover {
+qti-text-entry-interaction::part(input):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-text-entry-interaction::part(input):focus {
+qti-text-entry-interaction::part(input):focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-extended-text-interaction {
+qti-extended-text-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-extended-text-interaction::part(textarea) {
+qti-extended-text-interaction::part(textarea){
   cursor: pointer;
   color: rgb(17 24 39 / var(--tw-text-opacity));
   outline: 2px solid transparent;
@@ -744,23 +562,23 @@ qti-extended-text-interaction::part(textarea) {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-qti-extended-text-interaction::part(textarea):hover {
+qti-extended-text-interaction::part(textarea):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-extended-text-interaction::part(textarea):focus {
+qti-extended-text-interaction::part(textarea):focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-gap-match-interaction {
+qti-gap-match-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   line-height: 2rem;
 }
 
-qti-gap-match-interaction qti-gap-text {
+qti-gap-match-interaction qti-gap-text{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -800,17 +618,17 @@ qti-gap-match-interaction qti-gap-text {
     line-height: 1.5;
 }
 
-qti-gap-match-interaction qti-gap-text:hover {
+qti-gap-match-interaction qti-gap-text:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-gap-match-interaction qti-gap-text:focus {
+qti-gap-match-interaction qti-gap-text:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-gap-match-interaction qti-gap {
+qti-gap-match-interaction qti-gap{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -837,17 +655,17 @@ qti-gap-match-interaction qti-gap {
     line-height: 1.5;
 }
 
-qti-gap-match-interaction qti-gap:hover {
+qti-gap-match-interaction qti-gap:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-gap-match-interaction qti-gap:focus {
+qti-gap-match-interaction qti-gap:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-gap-match-interaction qti-gap {
+qti-gap-match-interaction qti-gap{
   width: 8rem;
 }
 
@@ -857,7 +675,7 @@ qti-gap-match-interaction qti-gap:empty:after {
       content: '\0000a0'; /* when empty, put a space in it */
     }
 
-qti-gap-match-interaction qti-gap:not(:empty) {
+qti-gap-match-interaction qti-gap:not(:empty){
   display: inline-flex;
   width: auto;
   padding: 0px;
@@ -866,7 +684,7 @@ qti-gap-match-interaction qti-gap:not(:empty) {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-qti-gap-match-interaction qti-gap:not(:empty) > * {
+qti-gap-match-interaction qti-gap:not(:empty) > *{
   flex: 1 1 0%;
   --tw-rotate: 0deg;
   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));
@@ -877,228 +695,41 @@ qti-gap-match-interaction qti-gap:not(:empty) > * {
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction {
+qti-hotspot-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-hotspot-interaction qti-hotspot-choice:hover {
+qti-hotspot-interaction qti-hotspot-choice:hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.3;
 }
 
-qti-hotspot-interaction qti-hotspot-choice {
-
-    /* &::after {
-        content: '';
-        @apply absolute top-0 block origin-center bg-white;
-        height: 95%;
-        width: 95%;
-        clip-path: inherit;
-      } */
-  }
-
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'] {
-  cursor: pointer;
-  border-radius: 0.375rem;
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  --tw-ring-inset: inset;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-  height: 100%;
-  width: 100%;
-  background-color: transparent;
-  padding: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
-  border-radius: 9999px;
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='circle']:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='circle']:focus {
-  outline-width: 2px;
-  outline-color: #93c5fd;
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"] {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] {
-  cursor: not-allowed;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] > * {
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"] {
-  cursor: pointer;
+qti-hotspot-interaction qti-hotspot-choice[aria-checked='true']{
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-width: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='rect'] {
-  cursor: pointer;
-  border-radius: 0.375rem;
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  --tw-ring-inset: inset;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-  height: 100%;
-  width: 100%;
-  background-color: transparent;
-  padding: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='rect']:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='rect']:focus {
-  outline-width: 2px;
-  outline-color: #93c5fd;
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"] {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] {
-  cursor: not-allowed;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] > * {
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"] {
-  cursor: pointer;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-width: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='poly']:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='poly']:focus {
-  outline-width: 2px;
-  outline-color: #93c5fd;
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"] {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] {
-  cursor: not-allowed;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] > * {
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"] {
-  cursor: pointer;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-width: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked='true'] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice::after {
+      content: '';
+      position: absolute;
+      top: 0px;
+      display: block;
+      transform-origin: center;
+      --tw-bg-opacity: 1;
+      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      height: 95%;
+      width: 95%;
+      -webkit-clip-path: inherit;
+              clip-path: inherit;
+    }
 
-qti-hottext-interaction {
+qti-hottext-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1128,25 +759,25 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext {
     /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"] {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1159,12 +790,12 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > * {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"] {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1177,11 +808,11 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch) {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch){
   display: none !important;
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1218,7 +849,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
       width: 66.666667%;
     }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch) {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -1237,13 +868,13 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio'][aria-checked='true']::part(cha) {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio'][aria-checked='true']::part(cha){
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch) {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -1266,7 +897,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbo
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
     }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   display: inline-flex;
 
     /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
@@ -1282,7 +913,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch) {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
   height: 1rem !important;
   width: 1rem !important;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
@@ -1290,25 +921,25 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch) {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:hover {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"] {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1321,12 +952,12 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > * {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"] {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1339,7 +970,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-inline-choice-interaction::part(select) {
+qti-inline-choice-interaction::part(select){
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1367,25 +998,25 @@ qti-inline-choice-interaction::part(select) {
       no-repeat center right 6px;
 }
 
-qti-inline-choice-interaction::part(select):hover {
+qti-inline-choice-interaction::part(select):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-inline-choice-interaction::part(select):focus {
+qti-inline-choice-interaction::part(select):focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-inline-choice-interaction[aria-checked="true"]::part(select) {
+qti-inline-choice-interaction[aria-checked="true"]::part(select){
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-inline-choice-interaction[aria-disabled="true"]::part(select) {
+qti-inline-choice-interaction[aria-disabled="true"]::part(select){
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1398,12 +1029,12 @@ qti-inline-choice-interaction[aria-disabled="true"]::part(select) {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-inline-choice-interaction::part(select)[aria-disabled="true"] > * {
+qti-inline-choice-interaction::part(select)[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-inline-choice-interaction[aria-readonly="true"]::part(select) {
+qti-inline-choice-interaction[aria-readonly="true"]::part(select){
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1416,14 +1047,14 @@ qti-inline-choice-interaction[aria-readonly="true"]::part(select) {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type{
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding-bottom: 1rem;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1462,24 +1093,24 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type
     padding-right: 0.75rem;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type{
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
   gap: 0.5rem;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1504,24 +1135,23 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     --tw-ring-inset: unset;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
-      /* @apply flex h-32  flex-col gap-2; */
-      display: flex;
-      height: 8rem;
-      flex-direction: column;
-    }
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1540,6 +1170,10 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
           user-select: none;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 0.5rem;
   font-weight: 600;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1554,28 +1188,20 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     background-repeat: repeat-y;
     background-position: left 2px;
     background-size: 14px 8px;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 0.75rem;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus {
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
-      flex-basis: fit-content;
-    }
-
 qti-order-interaction::part(qti-simple-choice),
-  qti-order-interaction qti-simple-choice {
+  qti-order-interaction qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1615,18 +1241,18 @@ qti-order-interaction::part(qti-simple-choice),
 }
 
 qti-order-interaction::part(qti-simple-choice):hover,
-  qti-order-interaction qti-simple-choice:hover {
+  qti-order-interaction qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
 qti-order-interaction::part(qti-simple-choice):focus,
-  qti-order-interaction qti-simple-choice:focus {
+  qti-order-interaction qti-simple-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-order-interaction::part(qti-simple-choice) {
+qti-order-interaction::part(qti-simple-choice){
   display: flex;
   width: 100%;
   align-items: center;
@@ -1634,15 +1260,15 @@ qti-order-interaction::part(qti-simple-choice) {
   text-overflow: ellipsis;
 }
 
-qti-order-interaction::part(drops) {
+qti-order-interaction::part(drops){
   gap: 0.5rem;
 }
 
-qti-order-interaction::part(drags) {
+qti-order-interaction::part(drags){
   gap: 0.5rem;
 }
 
-qti-order-interaction::part(drop-list) {
+qti-order-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1669,26 +1295,26 @@ qti-order-interaction::part(drop-list) {
     min-height: 4rem;
 }
 
-qti-order-interaction::part(drop-list):hover {
+qti-order-interaction::part(drop-list):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-order-interaction::part(drop-list):focus {
+qti-order-interaction::part(drop-list):focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-order-interaction::part(active) {
+qti-order-interaction::part(active){
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
 qti-associate-interaction::part(qti-simple-associable-choice),
-  qti-associate-interaction qti-simple-associable-choice {
+  qti-associate-interaction qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1732,18 +1358,18 @@ qti-associate-interaction::part(qti-simple-associable-choice),
 }
 
 qti-associate-interaction::part(qti-simple-associable-choice):hover,
-  qti-associate-interaction qti-simple-associable-choice:hover {
+  qti-associate-interaction qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
 qti-associate-interaction::part(qti-simple-associable-choice):focus,
-  qti-associate-interaction qti-simple-associable-choice:focus {
+  qti-associate-interaction qti-simple-associable-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-associate-interaction::part(associables-container) {
+qti-associate-interaction::part(associables-container){
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: flex;
@@ -1757,15 +1383,15 @@ qti-associate-interaction::part(associables-container) {
     );
 }
 
-qti-associate-interaction::part(active) {
+qti-associate-interaction::part(active){
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-associate-interaction::part(drop-list) {
+qti-associate-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1795,7 +1421,7 @@ qti-associate-interaction::part(drop-list) {
 
 /* @apply my-2; */
 
-qti-graphic-order-interaction qti-hotspot-choice {
+qti-graphic-order-interaction qti-hotspot-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1805,8 +1431,9 @@ qti-graphic-order-interaction qti-hotspot-choice {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   --tw-ring-inset: inset;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-  height: 100%;
-  width: 100%;
+  height: 1.5rem !important;
+  width: 1.5rem !important;
+  border-radius: 9999px !important;
   background-color: transparent;
   padding: 0px;
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1816,25 +1443,25 @@ qti-graphic-order-interaction qti-hotspot-choice {
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice:hover {
+qti-graphic-order-interaction qti-hotspot-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice:focus {
+qti-graphic-order-interaction qti-hotspot-choice:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"] {
+qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] {
+qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1847,12 +1474,12 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > * {
+qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"] {
+qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1865,39 +1492,24 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"] {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-/* &::after {
-        content: '';
-        @apply absolute top-0 block scale-75 bg-white;
-        height: inherit;
-        width: inherit;
-        clip-path: inherit;
-      } */
-
-qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue] {
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 9999px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]::after {
-      content: attr(aria-ordervalue) !important;
-    }
+qti-graphic-order-interaction qti-hotspot-choice {
+    /* &::after {
+      content: '';
+      @apply absolute top-0 block scale-75 bg-white;
+      height: inherit;
+      width: inherit;
+      clip-path: inherit;
+    } */
+  }
 
-qti-graphic-associate-interaction {
+qti-graphic-associate-interaction{
   position: relative;
   display: block;
 }
 
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       /* border-radius: 100%;
-        background-color: green; */
+      background-color: green; */
       cursor: pointer;
       border-radius: 0.375rem;
       --tw-text-opacity: 1;
@@ -1907,8 +1519,9 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
       --tw-ring-inset: inset;
       --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-      height: 100%;
-      width: 100%;
+      height: 1.5rem !important;
+      width: 1.5rem !important;
+      border-radius: 9999px !important;
       background-color: transparent;
       padding: 0px;
       --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1918,25 +1531,25 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"] {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1949,12 +1562,12 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-di
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > * {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"] {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1979,8 +1592,9 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
       --tw-ring-inset: inset;
       --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-      height: 100%;
-      width: 100%;
+      height: 1.5rem !important;
+      width: 1.5rem !important;
+      border-radius: 9999px !important;
       background-color: transparent;
       padding: 0px;
       --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1990,25 +1604,25 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus{
   outline-width: 2px;
-  outline-color: #93c5fd;
+  outline-color: #fca5a5;
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"] {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2021,12 +1635,12 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-di
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > * {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"] {
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2039,22 +1653,22 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-re
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-graphic-gap-match-interaction {
+qti-graphic-gap-match-interaction{
   position: relative;
 }
 
-qti-graphic-gap-match-interaction img {
+qti-graphic-gap-match-interaction img{
   margin: 0px;
   padding: 0px;
 }
 
-qti-slider-interaction {
+qti-slider-interaction{
   position: relative;
   width: 100%;
   display: block;
 }
 
-qti-slider-interaction::part(knob) {
+qti-slider-interaction::part(knob){
   position: absolute;
   height: 1rem;
   width: 1rem;
@@ -2064,10 +1678,10 @@ qti-slider-interaction::part(knob) {
   cursor: pointer;
   border-radius: 9999px;
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
-qti-slider-interaction::part(rail) {
+qti-slider-interaction::part(rail){
   height: 1rem;
     background-position: 0 center;
     --qti-border-color: #ff0000;
@@ -2078,117 +1692,27 @@ qti-slider-interaction::part(rail) {
     background-size: calc(calc(100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
 }
 
-qti-select-point-interaction::part(point):hover {
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-  --tw-bg-opacity: 0.3;
-}
-
-qti-select-point-interaction::part(point) {
-  cursor: pointer;
-  border-radius: 0.375rem;
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  --tw-ring-inset: inset;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-  height: 1.5rem;
-  width: 1.5rem;
-  background-color: transparent;
-  padding: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
-  border-radius: 9999px;
-}
-
-qti-select-point-interaction::part(point):hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-}
-
-qti-select-point-interaction::part(point):focus {
-  outline-width: 2px;
-  outline-color: #93c5fd;
-}
-
-qti-select-point-interaction[aria-checked="true"]::part(point) {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
-qti-select-point-interaction[aria-disabled="true"]::part(point) {
-  cursor: not-allowed;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-
-qti-select-point-interaction::part(point)[aria-disabled="true"] > * {
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-
-qti-select-point-interaction[aria-readonly="true"]::part(point) {
-  cursor: pointer;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-width: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-qti-position-object-stage qti-position-object-interaction {
-    /* no styles necessary, only layout styles, defined in the component */
-    /* height: 40px; */
-  }
-
-qti-choice-interaction.qti-choices-stacking-2 {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-qti-choice-interaction.qti-choices-stacking-3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-qti-choice-interaction.qti-choices-stacking-4 {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
+/* qti-match-interaction {
+  &.qti-match-tabular {
+    qti-simple-match-set:first-of-type {
+      display: flex;
+      margin-left: 4rem;
+      font-weight: bold;
+      gap: 2rem;
+    }
 
-qti-choice-interaction.qti-choices-stacking-5 {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
+    qti-simple-match-set:last-of-type {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
 
-qti-choice-interaction.qti-orientation-horizontal {
-    /* is the default layout */
-  }
+      qti-simple-associable-choice {
+        display: unset !important;
+      }
 
-qti-choice-interaction[orientation='horizontal'] {
-    flex-direction: row;
+      qti-simple-associable-choice > * {
+        display: block !important;
+      }
+    }
   }
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
+} */