@layer reset, base, components, modules, utilities;


@layer reset {
  body.learn,
  body.learn * {
    -webkit-user-select: none !important;
  }

  body * {
    box-sizing: border-box;
  }
}

@layer base {
/* color vars */

  :root {
    --background-gray: #fafafa;
    --blue-fresh: #2196f3;
    --dark-gray: rgb(115, 115, 115);
    --dark-text: #333;
    --medium-text: #555;
    --gray: #b3b3b3;
    --green: hsla(144, 40%, 55%, 1);
    --primary-green: #00a665;
    --bright-green: #1bd886;
    --medium-gray: #f5f5f5;
    --medium-green: #92ce9446;
    --primary-blue: #008cba;
    --pink: #ff69b4;
    --purple: #7d52ff;
    --appColor: var(--background-gray);
    --appTextColor: var(--dark-text);
    --yellow: #fbc155;
    --red: #e91e63;
    --secondary-color: #6c757d;
    --shadow: rgba(0, 0, 0, 0.16);
    --soft-green: #92ce9416;
    --white: #fff;

    /* Coler Experiment */
    --salmonella: #f8ece5;
    --soft-bg: #fbf7f5;
    --off-white: #fffefb;

    /* Difficulty Colors */
    --difficulty-1: #7ad77a;
    --difficulty-2: #9ad994;
    --difficulty-3: #b7dda7;
    --difficulty-4: #d3e1b7;
    --difficulty-5: #f2ebc7;
    --difficulty-6: #f5e8a1;
    --difficulty-7: #f8e47b;
    --difficulty-8: #fbc155;
    --difficulty-9: #fe9e2f;
    --difficulty-10: #f75d5d;

    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
  }

  /* Fonts */

  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: normal;
    src: url(https://drammstein.enabling.io/assets/NotoSans-Regular-856ef8f4f4357d5e37f21123e87807e1f1f82d468e9cbe6b54ef2877c3c0761a.woff2) format("woff2"),
      url(https://drammstein.enabling.io/assets/NotoSans-Regular-7d5da30e045ee8675c035c2dbd8fc4bb851ef6b96361025c43271a40c70010db.woff) format("woff");
  }

  @font-face {
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: normal;
    src: url(https://drammstein.enabling.io/assets/NotoSans-Italic-64692f43362f95747fc398e65ba263a33176f13610768fecbf24fc77d7217b01.woff2) format("woff2"),
      url(https://drammstein.enabling.io/assets/NotoSans-Italic-7931d45582a4d0a75fe4851f36f764093138985768b67a946a29b0e2e9214e80.woff) format("woff");
  }

  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: bold;
    src: url(https://drammstein.enabling.io/assets/NotoSans-Bold-cff6b5e8062ab1df0457291ca23e6ce3e94b04add19685197dd7d4383c72fef7.woff2) format("woff2"),
      url(https://drammstein.enabling.io/assets/NotoSans-Bold-53a02d1694590f5d3ca2c47e26069747bdf504db5c27523402583e38ff7d63cb.woff) format("woff");
  }

  /* General Styles */

  html {
    font-size: 16px;

    @media (max-width: 430px) {
      font-size: 14px;
    }
  }

  :root {
    font-family: "Inter", sans-serif;
  }

  @supports (font-variation-settings: normal) {
    :root {
      font-family: "InterVariable", sans-serif;
      font-optical-sizing: auto;
    }
  }

  body {
    background-color: #fafafa;
    box-sizing: border-box;
    color: var(--dark-text);
    margin: 0;
  }

  h2 {
    font-size: 1.1rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 1rem 0;
  }

  a {
    color: var(--purple);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  a.visited {
    color: var(--purple);
  }

  p,
  p a {
    overflow-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    word-wrap: break-word;
  }

  p {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  p a {
    -ms-hyphens: none;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
  }

  img.logo {
    margin: 1rem auto;
  }

  img.logo.sign-in {
    filter: hue-rotate(235deg);
  }

  .composer img.logo {
    filter: hue-rotate(-73deg);
    width: 10rem;
  }

  /* The inline gem (shared/gem_sparkle) is an svg plus a canvas overlay.
     Tint the wrapper rather than the svg, so the twinkle drawn on the
     canvas shifts hue along with the gem instead of staying pink. */
  .composer .gem-sparkle:has(svg.logo) {
    filter: hue-rotate(-73deg);
  }

  @keyframes hueRotate {
    0% {
      filter: hue-rotate(0deg);
    }

    100% {
      filter: hue-rotate(-73deg);
    }
  }

  img.logo.transition,
  .gem-sparkle:has(svg.logo.transition) {
    animation: hueRotate 1s ease forwards;
  }

  form {
    @media (max-width: 430px) {
      width: 100%;
    }
  }

  /* For iOS added to Home Screen */

  @supports(padding: max(0px)) {
    body {
      padding-top: var(--sat, 0);
    }
  }

  /* Shared Styles */

  .logo {
    display: block;
    margin: 0 auto;
    width: 200px;
  }

  .logged-in {
    inset: 4rem 1rem auto auto;
    opacity: 0;
    position: fixed;
    z-index: 0;
  }

  @media (max-width: 600px) {
    .logged-in {
      font-size: 0.9rem;
    }
  }

  .app-menu-container {
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 99;
  }

  @media (max-width: 600px) {
    .app-menu-container {
      margin-right: 0;
      margin-top: 0;
    }
  }


  .breadcrumbs {
    border-bottom: 1px solid var(--background-gray);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -2rem -2rem 0;
    padding: 1rem 2rem;
  }

  @media (max-width: 670px) {
    .breadcrumbs {
      margin: -1rem -1rem 0;
    }
  }

  .backdrop {
    inset: 0;
    position: fixed;
    z-index: -1;
  }

  body.fuzzy-background {
    --color-1: oklch(from var(--yellow) l c h / 0.2);
    --color-2: oklch(from var(--purple) l c h / 0.2);
    --color-3: oklch(from var(--blue-fresh) l c h / 0.2);

    background-color: #fafafa;
    background-image: linear-gradient(200deg, var(--color-1), transparent 30%);
    background-position: center;
    background-repeat: no-repeat;

    &.home {
      background-color: var(--salmonella);
    }

    &.learn {
      @media (min-width: 768px) {
        background: #6d54bb;
        --color-1: oklch(from var(--yellow) l c h / 0.6);
        --color-2: oklch(from var(--purple) l c h / 0.6);
        --color-3: oklch(from var(--blue-fresh) l c h / 0.6);
        --submit: #ffb873;
        --submit-text: #000;

        @media (prefers-color-scheme: dark) {
          background: #251e39;
          --submit: #ff9732;
        }
      }

      .pien-container {
        --color-1: oklch(from var(--yellow) l c h / 0.2);
        --color-2: oklch(from var(--submit) l c h / 0.2);
        --color-3: oklch(from var(--submit) l c h / 0.4);
      }
    }
  }

  body.fuzzy-background>.backdrop {
    mix-blend-mode: color-dodge;
    overflow: hidden;

    &::before,
    &::after {
      aspect-ratio: 1;
      background-repeat: no-repeat;
      content: "";
      position: absolute;
    }

    &::before {
      background: radial-gradient(circle at 50% 50%, var(--color-2) 0%, transparent 70%);
      height: 100vh;
      left: 0%;
      top: 50%;
      transform: translate(-70%, -50%);
    }

    &::after {
      background: radial-gradient(circle at 50% 50%, var(--color-3) 0%, transparent 70%);
      bottom: 0;
      height: 110vh;
      right: 0;
      transform: translate(50%, 60%);
    }
  }

  body.learn {
    height: 100dvh;

    @media (min-width: 768px) {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .frits-equalizer {
    align-items: flex-start;
    align-self: flex-start;
    display: flex;
    flex: 1;
    justify-content: flex-start;
    margin-top: calc(5dvh - 1rem);
    z-index: 99;

    @media (max-width: 768px) {
      display: none;
    }
  }

  .overflowing .frits-equalizer {
    display: none;
  }

  .pien-container {
    --color-1: oklch(from var(--yellow) l c h / 0.2);
    aspect-ratio: 9 / 16;
    container-type: size;
    height: 90dvh;
    margin: 0 auto;
    min-height: 0;
    position: relative;

    @media (max-width: 768px) {
      aspect-ratio: auto;
      height: 100%;
    }
  }

  .pien-container>.backdrop {
    @media (min-width: 768px) {
      background: #fafafa linear-gradient(200deg, var(--color-1), transparent 30%);
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 1.6rem;
      inset: 0;
      overflow: hidden;
      position: absolute;
      z-index: 0;

      &::before,
      &::after {
        aspect-ratio: 1;
        background-repeat: no-repeat;
        content: "";
        position: absolute;
      }

      &::before {
        background: radial-gradient(circle at 50% 50%, var(--color-2) 0%, transparent 70%);
        height: 70vh;
        left: 0%;
        top: 50%;
        transform: translate(-70%, -50%);
      }

      &::after {
        background: radial-gradient(circle at 50% 50%, var(--color-3) 0%, transparent 70%);
        bottom: 0;
        height: 70vh;
        right: 0;
        transform: translate(50%, 60%);
      }
    }
  }

}

@layer utilities {
  /* General shorthand styles POC */
  .flex {
    display: flex;
  }

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

  .flex-inline-center {
    align-items: center;
    display: inline-flex;
  }

  .flex-center {
    align-items: center;
    display: flex;
  }

  .flex-center-center {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .flex-start {
    align-items: flex-start;
    display: flex;
  }

  .flex-space-between {
    display: flex;
    justify-content: space-between;
  }

  .flex-center-space-between {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: auto;
    justify-content: center;
    overflow: auto;
    padding: 1rem;
    width: 100%;
  }

  .flex-row>* {
    flex: 1;
  }

  .flex-column {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    overflow: auto;
    width: 100%;
  }

  .flex-column-100vh {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    min-height: calc(100dvh - 2rem);
    overflow: auto;
    width: 100%;
  }

  .flex-column-100vh-justify-start {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    min-height: calc(100dvh - 2rem);
    overflow: auto;
    width: 100%;
  }

  .flex-column-center {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    height: auto;
  }

  .flex-column-left {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    width: 100%;
  }

  .gap-1 {
    gap: 0.5rem;
  }

  .gap-2 {
    gap: 1rem;
  }

  .gap-3 {
    gap: 2rem;
  }

  .v-align-middle { vertical-align: middle; }

  .relative {
    position: relative;
  }

  .right {
    float: right;
  }

  .hide {
    display: none;
  }

  .hide-on-touch {
    @media (any-hover: none) {
      display: none;
    }
  }

  .italic {
    color: #666;
    font-style: italic;
  }

  .small-text {
    font-size: 0.8rem;
  }

  .border-left {
    border-left: 5px solid #ccc;
  }

  .shadow {
    box-shadow: 0px 2px 3px var(--shadow);
  }

  .shadow-xl {
    box-shadow: 0px 3px 6px var(--shadow);
  }

  .border-top {
    border-top: 1rem solid var(--purple);
  }

  .green-text {
    color: var(--green);
  }

  .blue-text {
    color: var(--blue-fresh);
  }

  .purple-text {
    color: var(--purple);
  }

  .green {
    background-color: var(--green);
  }

  .blue {
    background-color: var(--blue-fresh);
  }

  /* Helpers */

  .word-wrap {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    word-wrap: break-word;
  }

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

  [hidden] {
    display: none;
  }
}

  @layer components {
  .box {
    background: var(--medium-gray);
    margin: 1rem 0;
    padding: 1rem;
  }

  .materialized-box {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 3px 6px var(--shadow);
    margin-bottom: 2rem;
    max-width: 670px;
    padding: 2rem;
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .materialized-box.less-margin {
    margin-bottom: 1rem;
  }

  .materialized-box.less-vertical-padding {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .materialized-box.center {
    margin: 0 auto 2rem;
  }

  .materialized-box.wide {
    max-width: 72rem;
  }

  .materialized-box-xl {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 3px 6px var(--shadow);
    margin-bottom: 1rem;
    max-width: 50rem;
    padding: 2rem;
    width: 100%;
  }

  /* Flash messages */

  /* Floating toast at the top-right. Out of flow so it never pushes
     page content around while it fades out after 5.5s. pointer-events
     is disabled so it can't intercept taps on the UI underneath. */
  .flash_message {
    animation: appear-then-fade 5.5s both;
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: 8px;
    box-shadow: 0 6px 20px var(--shadow);
    color: white;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.75rem 1rem;
    pointer-events: none;
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 100;
  }

  .flash_message.error,
  .flash_message.alert {
    background: var(--red);
    border: 1px solid var(--red);
  }

  /* Button styles */

  .add-button {
    align-items: center;
    background-color: var(--primary-green);
    border: none;
    border-radius: 50%;
    bottom: 2rem;
    box-shadow: 0px 3px 6px var(--shadow);
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 56px;
    justify-content: center;
    outline: none;
    position: fixed;
    right: 2rem;
    text-decoration: none;
    transition: transform 0.2s ease-out;
    width: 56px;
  }

  .add-button:hover {
    text-decoration: none;
    transform: scale(1.1);
  }

  .add-button:active {
    transform: scale(0.95);
    transition: transform 0.05s ease-out;
  }

  .add-button:focus {
    box-shadow: 0 0 0 3px rgba(125, 82, 255, 0.3);
  }

  .button {
    background-color: var(--primary-green);
    border: none;
    border-radius: 100rem;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.9rem 3rem;
    text-decoration: none;
    transition: 0.3s;
  }

  .button.gray {
    background-color: var(--gray);
    border: 1px solid var(--gray);
    color: white;
  }

  .top-bar {
    align-items: stretch;
    border-bottom: 1px solid #0001;
    color: var(--appTextColor);
    display: flex;
    height: 3.5rem;
    inset: 0 0 auto;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    position: sticky;
    width: 100%;
    z-index: 99;

    @media (max-width: 768px) {
      padding: 0.5rem;
    }
  }

  .save-button {
    align-items: center;
    background: linear-gradient(to right, var(--purple), #8b70d1);
    background-color: var(--purple);
    border: 0px solid #000;
    border-radius: 10px;
    box-shadow: 2px 3px 9px -5px #2d2d2d;
    color: #fff;
    display: inline-flex;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    justify-content: center;
    padding: 14px 15px;
    text-decoration: none;
  }

  .save-button span {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiPg0KICA8ZGVmcz4NCiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aCI+DQogICAgICA8cmVjdCB4PSItNCIgeT0iLTI1IiB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgZmlsbD0ibm9uZSIvPg0KICAgIDwvY2xpcFBhdGg+DQogICAgPGNsaXBQYXRoIGlkPSJjbGlwLXBhdGgtMiI+DQogICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzEiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDEiIHdpZHRoPSIxNDIiIGhlaWdodD0iMTAwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4zMzMgOS4xMjgpIiBmaWxsPSJub25lIi8+DQogICAgPC9jbGlwUGF0aD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9IjAuOTg2IiB5MT0iMC41MDciIHgyPSItMC4wMjgiIHkyPSIwLjUyMiIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPg0KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjAuNTMxIiBzdG9wLWNvbG9yPSIjZDlkOWQ5Ii8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9ImdyYXkiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTIiIHgxPSIwLjk4NiIgeTE9IjAuNDkzIiB4Mj0iLTAuMDI4IiB5Mj0iMC40NzgiIHhsaW5rOmhyZWY9IiNsaW5lYXItZ3JhZGllbnQiLz4NCiAgPC9kZWZzPg0KICA8ZyBpZD0iU2Nyb2xsX0dyb3VwXzEiIGRhdGEtbmFtZT0iU2Nyb2xsIEdyb3VwIDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMjUpIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoKSIgc3R5bGU9Imlzb2xhdGlvbjogaXNvbGF0ZSI+DQogICAgPGcgaWQ9ImxvZ28tdyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwLjMzMyAtOS4xMjgpIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoLTIpIj4NCiAgICAgIDxnIGlkPSJHcm91cF80MCIgZGF0YS1uYW1lPSJHcm91cCA0MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC45NDEgNC40ODkpIj4NCiAgICAgICAgPGcgaWQ9Ikdyb3VwXzM4IiBkYXRhLW5hbWU9Ikdyb3VwIDM4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDAuMDAxKSI+DQogICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZV82MyIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgNjMiIHdpZHRoPSI3NS44ODciIGhlaWdodD0iMjUuMjk2IiByeD0iMTIuNjQ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOC4wMzMgMzcuMjI1KSByb3RhdGUoNDUpIiBmaWxsPSJ1cmwoI2xpbmVhci1ncmFkaWVudCkiLz4NCiAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzY0IiBkYXRhLW5hbWU9IlJlY3RhbmdsZSA2NCIgd2lkdGg9Ijc1Ljg4NyIgaGVpZ2h0PSIyNS4yOTYiIHJ4PSIxMi42NDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgNTMuNjYpIHJvdGF0ZSgtNDUpIiBmaWxsPSIjZmZmIi8+DQogICAgICAgICAgPGNpcmNsZSBpZD0iRWxsaXBzZV8xIiBkYXRhLW5hbWU9IkVsbGlwc2UgMSIgY3g9IjcuODQyIiBjeT0iNy44NDIiIHI9IjcuODQyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMS4xMyA0NS4wODEpIiBmaWxsPSIjZDlkYmZmIi8+DQogICAgICAgIDwvZz4NCiAgICAgICAgPGcgaWQ9Ikdyb3VwXzM5IiBkYXRhLW5hbWU9Ikdyb3VwIDM5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MC4wNzkgMCkiPg0KICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfNjMtMiIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgNjMiIHdpZHRoPSI3NS44ODciIGhlaWdodD0iMjUuMjk2IiByeD0iMTIuNjQ4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MS41NDcgNTUuMTEyKSByb3RhdGUoMTM1KSIgZmlsbD0idXJsKCNsaW5lYXItZ3JhZGllbnQtMikiLz4NCiAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzY0LTIiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDY0IiB3aWR0aD0iNzUuODg3IiBoZWlnaHQ9IjI1LjI5NiIgcng9IjEyLjY0OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuODA3IDcxLjU0Nykgcm90YXRlKC0xMzUpIiBmaWxsPSIjZmZmIi8+DQogICAgICAgICAgPGNpcmNsZSBpZD0iRWxsaXBzZV8xLTIiIGRhdGEtbmFtZT0iRWxsaXBzZSAxIiBjeD0iNy44NDIiIGN5PSI3Ljg0MiIgcj0iNy44NDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0Ljg4IDQ1LjA4MikiIGZpbGw9IiNkOWRiZmYiLz4NCiAgICAgICAgPC9nPg0KICAgICAgPC9nPg0KICAgIDwvZz4NCiAgPC9nPg0KPC9zdmc+DQo=);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 22px;
    margin-right: 15px;
    transform: rotate(45deg);
    width: 22px;
  }

  .save-button:hover {
    background: linear-gradient(to right, var(--purple), #9b85d6);
    background-color: var(--purple);
  }

  .save-button:active {
    transform: scale(0.95);
  }

  .share-button {
    border: none;
    border-radius: 29px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    margin: 10px 2px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
  }

  .invite-button {
    background-color: var(--purple);
    border: none;
    border-radius: 29px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    margin: 10px 2px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
  }

  .answer-button {
    flex-shrink: 0;
  }

  .exit-button {
    align-items: center;
    background-color: color-mix(in srgb, var(--dark-text) 10%, transparent);
    border: none;
    border-radius: 1rem;
    color: var(--dark-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.25rem;
    justify-content: center;
    line-height: 1;
    margin: 0.1rem;
    padding: 0 0.75rem;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background-color: color-mix(in srgb, var(--dark-text) 20%, transparent);
      text-decoration: none;
    }

    @media (max-width: 768px) {
      border-radius: 0.5rem;
    }

    .icon {
      fill: currentColor;
      height: 1.25em;
      width: 1.25em;
    }
  }

  #lesson-picker {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 1.5rem;
  }

  .picker-toggle,
  .picker-buttons .picker-button {
    align-items: center;
    background-color: #5551;
    border: none;
    border-radius: 0.2rem;
    color: white;
    cursor: pointer;
    display: inline-flex;
    gap: 0.35rem;
    height: 2.2rem;
    line-height: 1;
    padding: 0 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;

    &.current,
    &.current:hover {
      background-color: var(--purple);
    }

    &:hover {
      background-color: #5554;
    }

    .icon {
      fill: currentColor;
      height: 1rem;
      width: 1rem;
    }
  }

  .lesson-picker-dropdown {
    align-items: center;
    background-color: #0001;
    border-radius: 1.5rem;
    box-shadow: 0 0 0 2px #fff1;
    display: flex;
    gap: 1rem;
    padding: 0.5em;
    padding-left: 1.5rem;
  }

  .picker-buttons {
    padding: 0.2rem;

    .button_to {
      display: contents;
    }

    .picker-button {
      display: flex;
      flex: 1;
      width: 100%;
    }
  }

  .picker-toggle {
    background-color: var(--submit);
    border-radius: 100px;
    box-shadow: 0 0 0px color-mix(in srgb, var(--submit) 0%, transparent);
    color: var(--submit-text);
    flex: 1;
    justify-content: center;
    margin-left: auto;
    max-width: 10rem;
    transition: all 0.2s ease;

    &:hover {
      background-color: color-mix(in srgb, var(--submit) 80%, white) !important;
      box-shadow: 0 0 10px color-mix(in srgb, var(--submit) 50%, transparent) !important;

      .icon {
        opacity: 1;
      }
    }

    .icon {
      margin-left: auto;
      opacity: 0.5;
    }
  }

  .picker-toggle-label {
    white-space: nowrap;
  }
}

@layer modules {
  .session-content {
    display: flex;
    flex-direction: row;
    height: 100dvh;
  }

  .lesson-layout {
    display: flex;
    flex-direction: column;
    height: calc(100% - 3.5rem);
    justify-content: space-between;
    padding: 1rem;

    @media (min-width: 768px) {
      margin: 0 auto;
    }

    /* PWA safe area fix for devices with notches/home indicators */
    @supports (-webkit-touch-callout: none) {
      @media (display-mode: standalone) {
        @media (max-width: 768px) {
          padding-bottom: calc(1rem + var(--sab, 0px));
        }
      }
    }
  }

  .lesson-layout .session-content {
    height: 100%;
  }

  .lesson-bottom {
    flex-shrink: 0;
    height: var(--lesson-bottom-height, 3.4rem);
    overflow: hidden;
    transition: height 0.3s ease;
  }

  .lesson-bottom:has(.answer-submit) {
    height: var(--lesson-bottom-height, 4.85rem);
  }

  .lesson-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-around;
    mask-image: linear-gradient(to bottom, black calc(100% - 1rem), transparent 100%);
    overflow-y: auto;
    padding-bottom: 1rem;

    &> :first-child {
      margin-top: auto !important;
    }

    &> :last-child {
      margin-bottom: auto !important;
    }
  }

  /* Flashcard Lesson Styles */

  .flash-card {
    border-radius: .5rem;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
  }


  .lesson-front,
  .lesson-back {
    align-items: center;
    backface-visibility: hidden;
    background: white;
    border-radius: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 1.5rem;
    position: absolute;
    transition: transform 0.4s ease, opacity 0.3s ease;

    &::before,
    &::after {
      content: '';
      flex: 1 1 auto;
      min-height: 1rem;
    }
  }

  .lesson-front {
    transform: rotateY(0deg);
  }

  .lesson-back {
    transform: rotateY(180deg);
  }

  .lesson-content.flipped .lesson-front {
    opacity: 0;
    transform: rotateY(180deg);
  }

  .lesson-content.flipped .lesson-back {
    opacity: 1;
    transform: rotateY(0deg);
  }

  svg.flip-icon {
    height: 1rem;
  }

  .flip-icon {
    bottom: 1rem;
    fill: #bbb;
    height: 24px;
    position: absolute;
    right: 1rem;
    transition: fill 0.2s ease;
    width: 24px;
  }

  .lesson-front:hover .flip-icon,
  .lesson-back:hover .flip-icon {
    fill: #555;
  }

  /* Flash Card Render Hints */
  .lesson-front.hint-single_char .trix-content,
  .lesson-front.hint-single_char .trix-content p {
    font-size: clamp(4rem, 14vw, 10rem);
    line-height: 1;
    text-align: center;
  }

  .lesson-front.hint-single_word .trix-content,
  .lesson-front.hint-single_word .trix-content p {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.1;
    text-align: center;
  }

  /* </Flashcard Lesson Styles> */


@keyframes appear-then-fade {
  0% {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  10% {
    opacity: 1;
    transform: none;
  }

  90% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

.tippy-content {
  background: none;
  padding: 0;
}

.subject-title {
  flex: 1;
  font-size: 1rem;
  margin: auto 0.5rem;
  opacity: 0.66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Form Styles */

.question-header {
  margin-bottom: 2rem;
}

.question-title {
  border-bottom: 1px solid var(--background-gray);
  color: var(--dark-gray);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.question-descriptiom {
  color: var(--gray);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.field {
  margin-bottom: 1rem;
}

.field input[type="text"],
.field textarea {
  background-color: var(--background-gray);
  border: 2px solid var(--medium-gray);
  border-radius: 5px;
  font-size: 1.2rem;
  height: 3rem;
  padding: 0.7rem 1rem;
  resize: none;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.field textarea:focus:not([readonly]),
.field input:focus:not([readonly]):not([type="range"]),
.field input:focus:not([readonly]):not([type="radio"]),
.field textarea:focus:not([readonly]) {
  border-color: var(--purple);
  outline: none;
}

.field label {
  color: var(--gray);
  left: 1rem;
  top: 0.2rem;
  transition: all 0.2s ease-out;

  @media (max-width: 430px) {
    font-size: 1.1rem;
  }
}

.field textarea {
  background-color: var(--background-gray);
  border: 2px solid var(--medium-gray);
  border-radius: 5px;
  font-size: 1.2rem;
  height: 8rem;
  padding: 0.7rem 1rem;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

.field input,
.field textarea:focus:not([readonly])~label,
.field textarea:not([value=""])~label {
  color: var(--purple);
  font-size: 1rem;
  left: 1rem;
  top: -1rem;
}

input::placeholder {
  color: var(--dark-gray);
}

.field select {
  background-color: var(--background-gray);
  border: none;
  border-radius: 4px;
  font-size: 16px;
  margin: 8px 0;
  padding: 12px;
  width: 100%;
}

.margin-left {
  margin-left: 0.5rem;
}

.radio-group {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  display: flex;
}

.radio-group .radio-with-input,
.radio-group>label {
  align-items: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex: 1;
  gap: 0.3rem;
  height: 2.6rem;
  inset: 0;
  justify-content: center;
}

.radio-group>label {
  padding: 0 0.8rem;
}

.radio-group label {
  font-size: 1rem;
}

.radio-group .radio-with-input {
  padding: 0 0 0 1rem;
  transition: all 0.2s ease-in-out;
}

.radio-group .radio-with-input:has(input:checked),
.radio-group>label:has(input:checked) {
  background-color: white;
  border-color: white;
  box-shadow: 0 0 0 3px white, 0px 2px 4px rgba(0, 0, 0, 0.05),
    0px 10px 30px rgba(0, 0, 0, 0.05);
}

.radio-group .radio-with-input:last-child,
.radio-group>label:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
  border-right: none;
}

.radio-group .radio-with-input:first-child,
.radio-group>label:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
}

.field .radio-group .radio-with-input label {
  margin-left: auto;
}

.field .radio-group .radio-with-input input[type="number"],
.field .radio-group .radio-with-input input[type="number"]:disabled {
  background: transparent;
  border: none;
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 0 0 2px transparent inset;
  color: black;
  font-weight: bold;
  height: 2.6rem;
  margin: 0 0 0 0.1rem;
  transition: all 0.2s ease-in-out;
}

.field .radio-group .radio-with-input:focus-within {
  color: white;
}

.field .radio-group .radio-with-input input[type="number"]:not(:disabled):hover,
.field .radio-group .radio-with-input input[type="number"]:focus {
  background-color: white;
  box-shadow: 0 0 0 2px var(--purple) inset;
  color: var(--purple);
}

/* Trix Kitchen Sink.
   NOTE: these rules live in @layer modules, so they lose to Trix's own
   *unlayered* trix.css. The composer's handoff restyle therefore lives in the
   unlayered views/composer/composer-page.css, which loads after trix.css and
   wins. */

.trix-button-row {
  margin-top: 0.5rem;
}

.trix-button--icon-increase-nesting-level,
.trix-button--icon-decrease-nesting-level,
.trix-button--icon-attach,
.trix-button-group--file-tools {
  display: none;
}

.trix-button-group.trix-button-group--file-tools {
  display: none;
}

trix-toolbar .trix-button {
  border-bottom: none;
}

trix-toolbar .trix-button:not(:first-child),
trix-toolbar .trix-button-group {
  border-color: rgba(0, 0, 0, 0.07);
}

trix-editor {
  background-color: var(--background-gray);
  border: 2px solid var(--medium-gray);
  border-radius: 5px;
  transition: all 0.2s ease-in-out;
}

trix-editor:focus {
  border-color: var(--purple);
}

/* width tools */

.fill-width {
  max-width: 670px;
  width: 100%;
}

/* titles */

h2.respondent-name,
.summary-title,
.response-comment h2,
.response-question h2 {
  margin: 0 0 0.5rem;
}

#point-click img {
  max-width: 100%;
}

#point-click-submit {
  display: none;
}

.rating-value {
  font-size: 1.5rem;
  font-weight: bold;
}

.rating-low {
  color: #dc2626;
  /* red */
}

.rating-medium {
  color: #f97316;
  /* orange */
}

.rating-high {
  color: #16a34a;
  /* green */
}

/* pagination */

.pagy {
  --B: 0;
  --H: 260;
  /* purple hue */
  --S: 100%;
  --L: 60%;
  --A: 1;
  --spacing: 0.125rem;
  --padding: 0.75rem;
  --rounding: 1.75rem;
  --border-width: 0rem;
  --font-size: 0.875rem;
  --font-weight: 600;
  --line-height: 1.75;

  --text: hsla(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A));
  --text-hover: hsla(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A));
  --text-current: hsla(var(--H) var(--S) calc(100 * (var(--B) + 1)) / var(--A));
  --background: hsla(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A));
  --background-hover: hsla(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
  --background-current: hsla(var(--H) var(--S) var(--L) / var(--A));
  --background-input: hsla(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));

  color: var(--text);
  display: flex;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

.pagy> :not([hidden])~ :not([hidden]) {
  margin-left: calc(var(--spacing) * (1 - var(--space-reverse, 0)));
  margin-right: calc(var(--spacing) * var(--space-reverse, 0));
}

.rtl .pagy> :not([hidden])~ :not([hidden]) {
  --space-reverse: 1;
}

.pagy a:not([role="separator"]) {
  /* all but gaps */
  background-color: var(--background);
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  color: inherit;
  display: block;
  padding: calc(var(--padding) / 3) var(--padding);
  text-decoration: none;
}

.pagy a[href]:hover {
  /* all links on hover */
  background-color: var(--background-hover);
  color: var(--text-hover)
}

.pagy a:not([href]) {
  /* all but links */
  cursor: default;
}

.pagy a[role="link"]:not([aria-current]) {
  /* disabled links */
  opacity: .6;
}

.pagy a[aria-current] {
  /* current page */
  background-color: var(--background-current);
  border-color: var(--text);
  color: var(--text-current);
}

.pagy label {
  background-color: var(--background);
  border: var(--border-width) solid var(--background-current);
  border-radius: var(--rounding);
  display: inline-block;
  padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
  white-space: nowrap;
}

.pagy label input {
  all: unset;
  background-color: var(--background-input);
  border: var(--border-width) solid var(--background-current);
  border-radius: calc(var(--rounding) / 2) !important;
}

/* 3D model lesson viewer */
.three-d-viewer-container {
  position: relative;
  inline-size: 100%;
  max-inline-size: 40rem;
  margin-inline: auto;
  min-block-size: 12rem;
}

/* Our overlay replaces model-viewer's built-in thin top progress bar. */
model-viewer::part(default-progress-bar) {
  display: none;
}

/* Hovered-part name, floating bottom-center INSIDE the canvas — an overlay,
   never in flow, so hovering can't shift the layout below the viewer. */
.three-d-hover-label {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 1;
  max-inline-size: 85%;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(24, 24, 27, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.three-d-hover-label[hidden] {
  display: none;
}

.three-d-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.three-d-loading.is-done {
  opacity: 0;
}

.three-d-loading__spinner {
  inline-size: 36px;
  block-size: 36px;
  border: 3px solid rgba(125, 82, 255, 0.2);
  border-top-color: var(--purple, #7d52ff);
  border-radius: 50%;
  animation: three-d-loading-spin 0.9s linear infinite;
}

@keyframes three-d-loading-spin {
  to { transform: rotate(360deg); }
}

.three-d-loading__track {
  inline-size: 140px;
  block-size: 4px;
  border-radius: 100rem;
  background: rgba(125, 82, 255, 0.15);
  overflow: hidden;
}

.three-d-loading__bar {
  inline-size: 0;
  block-size: 100%;
  border-radius: inherit;
  background: var(--purple, #7d52ff);
  transition: inline-size 0.2s ease;
}

/* Learner peel bar — chrome-free, sits directly under the model. */
.peel-bar {
  width: 100%;
  max-width: 600px;
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.peel-bar[hidden] {
  display: none;
}

.peel-bar__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.peel-bar__layer {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #18181b;
}

.peel-bar__counter {
  font-size: 12px;
  color: #71717a;
  font-variant-numeric: tabular-nums;
}

/* 44px is the touch target; the bars inside are much thinner. */
.peel-bar__track {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.peel-bar__track:focus-visible {
  outline: 2px solid var(--purple, #7d52ff);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Thin ghosts behind you, a tall solid marker where you are, medium bars ahead. */
.peel-bar__band {
  flex: 1;
  height: 10px;
  border-radius: 100rem;
  background: rgba(125, 82, 255, 0.28);
  transition: all 0.18s ease;
}

.peel-bar__band.is-peeled {
  height: 5px;
  background: rgba(0, 0, 0, 0.1);
}

.peel-bar__band.is-current {
  height: 16px;
  background: #7d52ff;
}

.peel-bar__endpoints {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.peel-bar__endpoint {
  font-size: 11.5px;
  color: #71717a;
}

.peel-bar__hint {
  font-size: 11.5px;
  color: #a1a1aa;
}

@media (prefers-reduced-motion: reduce) {
  .peel-bar__band {
    transition: none;
  }
}

.three-d-viewer {
  inline-size: 100%;
  block-size: 24rem;
  background-color: transparent;
  border-radius: 0.5rem;
  touch-action: none;
  --poster-color: transparent;
}

.answer-options-preview .correct {
  font-weight: 700;
  color: var(--primary-green);
}