/* Approved Ara artwork and motion from the Create concept. */
.mch-root .art-viewport{
      position: relative;
      width: 100%;
      min-width: 0;
      height: clamp(230px, 32vh, 300px);
      overflow: visible;
      clip-path: inset(-24px 0 -24px 0);
      outline: none;
      cursor: grab;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
    }
.mch-root .art-viewport.dragging{ cursor: grabbing; }
.mch-root .art-track{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 2%;
      padding-left: 15%;
      transform: translate3d(0,0,0);
      transition: transform 240ms var(--ease);
      will-change: transform;
    }
.mch-root .art-viewport.dragging .art-track{ transition: none; }
.mch-root .art-card{
      position: relative;
      height: 100%;
      display: grid;
      place-items: center;
      flex: 0 0 70%;
      opacity: .24;
      transform: scale(.72);
      transition: opacity 220ms ease, transform 240ms var(--ease), filter 220ms ease;
      filter: saturate(.55);
    }
.mch-root .art-card[aria-current="true"]{
      opacity: 1;
      transform: scale(1);
      filter: none;
    }
.mch-root .art-card[data-art="study"]{ order: 0; }
.mch-root .art-card[data-art="path"]{ order: 1; }
.mch-root .art-card[data-art="topic"]{ order: 2; }
.mch-root .art-card img{
      width: min(260px, 86%);
      height: min(260px, 100%);
      display: block;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 20px 18px rgba(0,0,0,.4));
    }
.mch-root .path-ara-scene,
.mch-root .topic-ara-scene{
      width: min(326px, 118%);
      height: min(300px, 100%);
      display: block;
      overflow: visible;
      pointer-events: none;
      filter: drop-shadow(0 20px 18px rgba(0,0,0,.34));
    }
.mch-root .path-character{
      transform-box: view-box;
      transform-origin: 154px 175px;
      animation: path-character-float 4.4s ease-in-out infinite;
    }
.mch-root .path-eyes{
      transform-box: view-box;
      transform-origin: 154px 150px;
      animation: path-eyes-blink 4.4s ease-in-out infinite;
    }
.mch-root .path-pupils{ animation: path-pupils-follow 4.4s ease-in-out infinite; }
.mch-root .path-route-live{
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      animation: path-route-draw 4.4s cubic-bezier(.35,0,.2,1) infinite;
    }
.mch-root .path-node-one,
.mch-root .path-node-two,
.mch-root .path-goal,
.mch-root .path-sparks{
      transform-box: fill-box;
      transform-origin: center;
    }
.mch-root .path-node-one{ animation: path-node-one 4.4s ease-in-out infinite; }
.mch-root .path-node-two{ animation: path-node-two 4.4s ease-in-out infinite; }
.mch-root .path-goal{ animation: path-goal-arrive 4.4s cubic-bezier(.2,.9,.3,1) infinite; }
.mch-root .path-sparks{ animation: path-sparks 4.4s ease-out infinite; }
.mch-root .path-character,
.mch-root .path-eyes,
.mch-root .path-pupils,
.mch-root .path-route-live,
.mch-root .path-node-one,
.mch-root .path-node-two,
.mch-root .path-goal,
.mch-root .path-sparks{
      animation-play-state: paused;
    }
.mch-root .art-card[aria-current="true"] .path-character,
.mch-root .art-card[aria-current="true"] .path-eyes,
.mch-root .art-card[aria-current="true"] .path-pupils,
.mch-root .art-card[aria-current="true"] .path-route-live,
.mch-root .art-card[aria-current="true"] .path-node-one,
.mch-root .art-card[aria-current="true"] .path-node-two,
.mch-root .art-card[aria-current="true"] .path-goal,
.mch-root .art-card[aria-current="true"] .path-sparks{
      animation-play-state: running;
    }
@keyframes path-character-float{
      0%, 100% { transform: translateY(1px) rotate(-.2deg); }
      48% { transform: translateY(-4px) rotate(.25deg); }
      72% { transform: translateY(-5px) rotate(.35deg); }
    }
@keyframes path-pupils-follow{
      0%, 12%, 96%, 100% { transform: translate(-5px,4px); }
      34%, 46% { transform: translate(0,5px); }
      66%, 84% { transform: translate(5px,3px); }
    }
@keyframes path-eyes-blink{
      0%, 76%, 80%, 100% { transform: scaleY(1); }
      78% { transform: scaleY(.08); }
    }
@keyframes path-route-draw{
      0%, 10% { stroke-dashoffset:100; opacity:0; }
      14% { opacity:1; }
      68%, 89% { stroke-dashoffset:0; opacity:1; }
      97%, 100% { stroke-dashoffset:0; opacity:0; }
    }
@keyframes path-node-one{
      0%, 20%, 100% { opacity:.72; transform:scale(.94); }
      27% { opacity:1; transform:scale(1.13); }
      33%, 89% { opacity:1; transform:scale(1); }
      97% { opacity:.72; }
    }
@keyframes path-node-two{
      0%, 42%, 100% { opacity:.72; transform:scale(.94); }
      49% { opacity:1; transform:scale(1.13); }
      55%, 89% { opacity:1; transform:scale(1); }
      97% { opacity:.72; }
    }
@keyframes path-goal-arrive{
      0%, 59%, 100% { opacity:.78; transform:scale(.95); }
      67% { opacity:1; transform:scale(1.09); }
      73%, 89% { opacity:1; transform:scale(1); }
      97% { opacity:.78; }
    }
@keyframes path-sparks{
      0%, 65%, 87%, 100% { opacity:0; transform:scale(.25) rotate(-20deg); }
      72% { opacity:1; transform:scale(1); }
      80% { opacity:.65; transform:scale(.8) rotate(10deg); }
    }
.mch-root .study-ara{
      width: min(326px, 118%);
      height: min(300px, 100%);
      display: block;
      overflow: visible;
      pointer-events: none;
      filter: drop-shadow(0 20px 18px rgba(0,0,0,.34));
      transform: translateY(-12px);
    }
.mch-root .study-ara .study-float{
      transform-box: view-box;
      transform-origin: 154px 176px;
      animation: study-float 4.2s ease-in-out infinite;
    }
.mch-root .study-ara .study-eyes{
      transform-box: view-box;
      transform-origin: 157px 168px;
      animation: study-blink 5.4s ease-in-out infinite;
    }
.mch-root .study-ara .study-pupils{
      animation: study-look 4.2s ease-in-out infinite;
    }
.mch-root .study-ara .study-pencil{
      transform-box: view-box;
      transform-origin: 196px 203px;
      animation: study-writing 4.2s cubic-bezier(.22,.8,.3,1) infinite;
    }
.mch-root .study-ara .study-thought{
      transform-box: fill-box;
      transform-origin: 76% 84%;
      animation: study-thought 4.2s ease-in-out infinite;
    }
.mch-root .study-ara .thought-book,
.mch-root .study-ara .thought-card,
.mch-root .study-ara .thought-bulb{
      opacity: 0;
      animation-duration: 4.2s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
.mch-root .study-ara .thought-book{ animation-name: thought-book; }
.mch-root .study-ara .thought-card{ animation-name: thought-card; }
.mch-root .study-ara .thought-bulb{ animation-name: thought-bulb; }
.mch-root .study-ara .study-spark{
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      animation: study-spark 4.2s ease-out infinite;
    }
.mch-root .study-ara .study-spark.s2{ animation-delay: .09s; }
.mch-root .study-ara .study-spark.s3{ animation-delay: .18s; }
.mch-root .study-ara .study-float,
.mch-root .study-ara .study-eyes,
.mch-root .study-ara .study-pupils,
.mch-root .study-ara .study-pencil,
.mch-root .study-ara .study-thought,
.mch-root .study-ara .thought-book,
.mch-root .study-ara .thought-card,
.mch-root .study-ara .thought-bulb,
.mch-root .study-ara .study-spark{
      animation-play-state: paused;
    }
.mch-root .art-card[aria-current="true"] .study-ara .study-float,
.mch-root .art-card[aria-current="true"] .study-ara .study-eyes,
.mch-root .art-card[aria-current="true"] .study-ara .study-pupils,
.mch-root .art-card[aria-current="true"] .study-ara .study-pencil,
.mch-root .art-card[aria-current="true"] .study-ara .study-thought,
.mch-root .art-card[aria-current="true"] .study-ara .thought-book,
.mch-root .art-card[aria-current="true"] .study-ara .thought-card,
.mch-root .art-card[aria-current="true"] .study-ara .thought-bulb,
.mch-root .art-card[aria-current="true"] .study-ara .study-spark{
      animation-play-state: running;
    }
@keyframes study-float{
      0%, 100% { transform: translateY(1px) rotate(-.25deg); }
      50% { transform: translateY(-4px) rotate(.3deg); }
    }
@keyframes study-blink{
      0%, 38%, 42%, 100% { transform: scaleY(1); }
      40% { transform: scaleY(.08); }
    }
@keyframes study-look{
      0%, 12%, 86%, 100% { transform: translate(0,0); }
      20%, 76% { transform: translate(1px,4px); }
    }
@keyframes study-writing{
      0%, 15%, 58%, 100% { transform: translate(0,0) rotate(0); }
      22% { transform: translate(-2px,1px) rotate(-2deg); }
      29% { transform: translate(2px,-1px) rotate(1.5deg); }
      36% { transform: translate(-2px,1px) rotate(-2deg); }
      43% { transform: translate(2px,-1px) rotate(1.5deg); }
      50% { transform: translate(-1px,1px) rotate(-1deg); }
    }
@keyframes study-thought{
      0%, 55%, 100% { opacity: 1; transform: scale(1); }
      63% { opacity: 0; transform: scale(.9); }
      65%, 82% { opacity: 0; transform: scale(.82); }
      90% { opacity: 1; transform: scale(1.03); }
    }
@keyframes thought-book{
      0%, 4%, 18%, 91%, 100% { opacity: 1; transform: translateY(0) scale(1); }
      22%, 87% { opacity: 0; transform: translateY(2px) scale(.86); }
    }
@keyframes thought-card{
      0%, 17%, 39%, 100% { opacity: 0; transform: translateY(2px) scale(.86); }
      22%, 34% { opacity: 1; transform: translateY(0) scale(1); }
    }
@keyframes thought-bulb{
      0%, 36%, 65%, 100% { opacity: 0; transform: translateY(2px) scale(.86); }
      42%, 56% { opacity: 1; transform: translateY(0) scale(1); }
    }
@keyframes study-spark{
      0%, 57%, 76%, 100% { opacity: 0; transform: scale(.25) rotate(-20deg); }
      63% { opacity: 1; transform: scale(1) rotate(0); }
      70% { opacity: .72; transform: scale(.82) rotate(10deg); }
    }
.mch-root .swipe-arrow{
      position: absolute;
      top: 50%;
      z-index: 4;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 50%;
      background: rgba(26,25,31,.52);
      color: #aaa4af;
      cursor: pointer;
      opacity: .8;
      transform: translateY(-50%);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
.mch-root .swipe-arrow:hover{ color: #fff; border-color: rgba(255,255,255,.2); }
.mch-root .swipe-arrow:active:not(:disabled){ transform: translateY(-50%) scale(.96); }
.mch-root .swipe-arrow:disabled{ opacity: .18; cursor: default; }
.mch-root .swipe-arrow.prev{ left: 2px; }
.mch-root .swipe-arrow.next{ right: 2px; }
.mch-root .swipe-arrow svg{ width: 18px; height: 18px; }
.mch-root .mode-dots{
      position: relative;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      flex: 0 0 28px;
      margin: 0 auto 5px;
    }
.mch-root .mode-dot{
      position: relative;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
.mch-root .mode-dot::after{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #5f5a66;
      content: "";
      transform: translate(-50%, -50%);
      transition: background 160ms ease, box-shadow 160ms ease, transform 180ms var(--ease);
    }
.mch-root .mode-dot[aria-selected="true"]::after{
      background: var(--amber);
      box-shadow: 0 0 8px rgba(245,162,10,.55);
      transform: translate(-50%, -50%) scale(1.2);
    }
.mch-root .empty-state-copy{
      position: relative;
      width: 100%;
      height: 96px;
      flex: 0 0 96px;
      margin-bottom: 22px;
    }
.mch-root .mode-intro{
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      visibility: hidden;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 170ms ease, transform 210ms var(--ease), visibility 0s linear 210ms;
      pointer-events: none;
    }
.mch-root .mode-intro.active{
      visibility: visible;
      opacity: 1;
      transform: none;
      transition-delay: 45ms;
    }
.mch-root .empty-state-title{
      margin: 0;
      color: var(--text);
      font-size: 29px;
      font-weight: 800;
      letter-spacing: -.75px;
      line-height: 1.08;
      text-align: center;
    }
.mch-root .empty-state-title .accent{ color: var(--amber-bright); }
.mch-root .empty-state-description{
      max-width: 350px;
      margin: 10px auto 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.42;
      text-align: center;
    }
.mch-root .empty-state-actions{
      position: relative;
      width: 100%;
      height: 62px;
      flex: 0 0 62px;
      margin-top: auto;
      margin-bottom: 8px;
    }
.mch-root .mode-empty-action{
      position: absolute;
      top: 0;
      left: 50%;
      width: min(310px, calc(100% - 28px));
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      border: 1px solid #ffd37a;
      border-radius: 15px;
      background: #f5a623;
      box-shadow: 0 5px 0 #8e5409, 0 10px 20px rgba(245,166,35,.18), inset 0 1px 0 rgba(255,255,255,.46);
      color: #1a1304;
      cursor: pointer;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -.1px;
      visibility: hidden;
      opacity: 0;
      transform: translate(-50%, 6px);
      transition: opacity 170ms ease, transform 210ms var(--ease), visibility 0s linear 210ms, box-shadow 100ms ease;
      pointer-events: none;
    }
.mch-root .mode-empty-action.active{
      visibility: visible;
      opacity: 1;
      transform: translate(-50%, 0);
      transition-delay: 45ms;
      pointer-events: auto;
    }
.mch-root .mode-empty-action.active:active{
      box-shadow: 0 2px 0 #8e5409, 0 6px 13px rgba(245,166,35,.14), inset 0 1px 0 rgba(255,255,255,.4);
      transform: translate(-50%, 3px);
    }
.mch-root .study-sheet{
      position: relative;
      isolation: isolate;
      max-height: 85%;
      overflow-y: auto;
      width: 100%;
      padding: 11px 22px calc(19px + var(--safe-bottom));
      border: 1px solid #3c3944;
      border-bottom: 0;
      border-radius: 28px 28px 0 0;
      background: #1d1c23;
      box-shadow: 0 -16px 48px rgba(0,0,0,.28);
      animation: sheetRiseIn .32s cubic-bezier(.2,.82,.22,1) both;
    }
@keyframes sheetRiseIn{ from { transform: translateY(28px); } to { transform: translateY(0); } }
.mch-root .study-sheet-grab{ width: 36px; height: 4px; margin: 0 auto 13px; border-radius: 4px; background: #6e6875; }
.mch-root .study-sheet-heading{ text-align: center; }
.mch-root .study-sheet-symbol{ width: 106px; height: 106px; display: grid; place-items: center; margin: 0 auto 7px; background: none; }
.mch-root .study-sheet-symbol svg{ display: block; width: 100px; height: 100px; overflow: visible; }
.mch-root .study-sheet h2{ margin: 0; color: var(--text); font-size: 24px; font-weight: 800; line-height: 1.2; }
.mch-root .study-sheet .study-sheet-heading p{ max-width: 320px; margin: 8px auto 20px; color: #a49eaa; font-size: 13px; line-height: 1.5; }
.mch-root .study-sheet-choice{
      width: 100%;
      min-height: 82px;
      display: flex;
      align-items: center;
      gap: 13px;
      margin-top: 10px;
      padding: 10px 15px 10px 11px;
      border: 1px solid #48434e;
      border-radius: 18px;
      background: #211e26;
      box-shadow: 0 3px 0 #141218;
      color: var(--text);
      cursor: pointer;
      text-align: left;
    }
.mch-root .study-sheet-choice:active{ transform: translateY(2px); box-shadow: 0 1px 0 #141218; }
.mch-root .study-sheet-choice-icon{ width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; }
.mch-root .study-sheet-choice-icon svg{ display: block; width: 54px; height: 54px; overflow: visible; }
.mch-root .study-sheet-choice-copy{ min-width: 0; flex: 1; }
.mch-root .study-sheet-choice strong{ display: block; font-size: 15px; font-weight: 800; }
.mch-root .study-sheet-choice small{ display: block; margin-top: 4px; color: #a49eaa; font-size: 11px; line-height: 1.3; }
.mch-root .study-sheet-choice .study-sheet-choice-chevron{ width: 18px; height: 18px; flex: 0 0 auto; color: #d9a452; }
.mch-root .study-sheet-close{ display: block; margin: 13px auto 0; padding: 9px 14px; border: 0; background: none; color: #a49eaa; cursor: pointer; font-size: 13px; font-weight: 800; }
.mch-root .study-paste textarea,
.mch-root .path-goal-form textarea{ width: 100%; min-height: 106px; margin-top: 8px; padding: 15px; resize: vertical; border: 1px solid #3c3944; border-radius: 15px; outline: none; background: #211e26; color: var(--text); font-size: 14px; line-height: 1.5; }
.mch-root .study-paste textarea:focus,
.mch-root .path-goal-form textarea:focus{ border-color: rgba(255,185,74,.7); box-shadow: 0 0 0 3px rgba(245,166,35,.1); }
.mch-root .study-paste button,
.mch-root .path-goal-form button{ width: 100%; min-height: 53px; margin-top: 12px; border: 1px solid #f5a000; border-radius: 15px; background: #ffab00; box-shadow: 0 3px 0 #ad6900; color: #261800; cursor: pointer; font-size: 16px; font-weight: 800; }
.mch-root .study-paste button:active,
.mch-root .path-goal-form button:active{ transform: translateY(1px); box-shadow: 0 2px 0 #ad6900; }
.mch-root .study-sheet-feedback{ min-height: 0; margin: 9px 0 0 !important; color: var(--amber-bright) !important; text-align: center; }
.mch-root .study-sheet-feedback:empty{ display: none; }
.mch-root .study-courses-heading{
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
      color: var(--text);
      font-size: 17px;
      font-weight: 800;
    }
.mch-root .study-courses-count{
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border: 1px solid var(--hair-strong);
      border-radius: 50%;
      color: var(--muted);
      font-size: 12px;
    }
.mch-root .study-course-card{
      width: 100%;
      min-height: 87px;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 14px;
      border: 1px solid var(--hair-strong);
      border-radius: 19px;
      background: #242328;
      box-shadow: 0 5px 0 rgba(255,255,255,.055);
      color: var(--text);
      cursor: pointer;
      text-align: left;
    }
.mch-root .study-course-card[hidden]{ display: none; }
.mch-root .study-course-list{ display: grid; gap: 12px; }
.mch-root .study-course-card:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(255,255,255,.055); }
.mch-root .study-course-icon{ width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; background: none; }
.mch-root .study-course-icon svg{ display: block; width: 48px; height: 48px; overflow: visible; }
.mch-root .study-course-text{ min-width: 0; flex: 1; }
.mch-root .study-course-text strong{ display: block; overflow-wrap: anywhere; font-size: 15px; font-weight: 800; line-height: 1.25; }
.mch-root .study-course-text span{ display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 600; }
.mch-root .study-course-chevron{ width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }