[x-cloak] {
  display: none !important;
}

.tutorial-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tutorial-flow {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tutorial-card {
  padding: 2.5rem;
  border-radius: 32px;
  background: #fefeff;
  border: 1px solid rgba(230, 232, 255, 0.65);
  box-shadow: 0 45px 82px rgba(68, 56, 156, 0.32);
  backdrop-filter: blur(20px);
}

body.dark-mode .tutorial-card {
  background: rgba(22, 24, 55, 0.92);
  border-color: rgba(128, 138, 255, 0.2);
  box-shadow: 0 45px 75px rgba(0, 0, 0, 0.7);
}

.tutorial-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tutorial-header p {
  color: #4c5681;
  font-size: 0.98rem;
}

body.dark-mode .tutorial-header p {
  color: #c2c6ff;
}

.tutorial-os-switch {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.tutorial-os-button {
  flex: 1;
  min-width: 150px;
  border-radius: 18px;
  border: 1px solid rgba(140, 150, 220, 0.25);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: rgba(248, 249, 255, 0.96);
  color: #485071;
  cursor: pointer;
  transition: all 0.28s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}


.tutorial-os-button.is-active {
  background: #ffffff;
  color: #3a32c9;
  box-shadow: 0 15px 32px rgba(70, 50, 180, 0.25);
  border-color: rgba(88, 77, 220, 0.38);
}

.tutorial-os-button:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.99);
  color: #313a6c;
}

body.dark-mode .tutorial-os-button {
  background: rgba(33, 35, 70, 0.85);
  color: #b6bdff;
  border-color: rgba(98, 108, 220, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.dark-mode .tutorial-os-button.is-active {
  background: rgba(255, 255, 255, 0.93);
  color: #3426c5;
  box-shadow: 0 18px 36px rgba(8, 10, 48, 0.65);
}

.tutorial-step {
  border-radius: 26px;
  padding: 1.8rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(218, 224, 255, 0.55);
  box-shadow: 0 30px 55px rgba(64, 52, 172, 0.22);
}

body.dark-mode .tutorial-step {
  background: rgba(21, 23, 51, 0.92);
  border-color: rgba(120, 130, 240, 0.35);
  box-shadow: 0 42px 60px rgba(2, 3, 20, 0.7);
}

.tutorial-step-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.tutorial-step-number {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 1.12rem;
  box-shadow: 0 12px 26px rgba(72, 56, 180, 0.28);
}

body.dark-mode .tutorial-step-number {
  box-shadow: 0 18px 32px rgba(6, 9, 32, 0.68);
}

.tutorial-step-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1f275c;
  margin-bottom: 0.3rem;
}

.tutorial-step-desc {
  color: #505c85;
  font-size: 0.98rem;
  line-height: 1.68;
}

body.dark-mode .tutorial-step-title {
  color: #f0f1ff;
}

body.dark-mode .tutorial-step-desc {
  color: #c2c7ff;
}

.tutorial-step-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tutorial-step--blue .tutorial-step-number {
  background: linear-gradient(135deg, #4c79ff, #5f4dff);
}

.tutorial-step--green .tutorial-step-number {
  background: linear-gradient(135deg, #1fc869, #14a065);
}

.tutorial-step--purple .tutorial-step-number {
  background: linear-gradient(135deg, #a856f6, #7c3eed);
}

.tutorial-step--orange .tutorial-step-number {
  background: linear-gradient(135deg, #f97316, #f59e0b);
}

.tutorial-step--indigo .tutorial-step-number {
  background: linear-gradient(135deg, #6667f3, #4f46e5);
}

.tutorial-step--yellow .tutorial-step-number {
  background: linear-gradient(135deg, #f9c846, #f59e0b);
}

.tutorial-inner-card {
  border-radius: 20px;
  padding: 1.4rem 1.5rem;
  background: rgba(247, 249, 255, 0.96);
  border: 1px solid rgba(194, 204, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 18px 32px rgba(92, 84, 200, 0.18);
}

.tutorial-inner-card h5,
.tutorial-inner-card h6 {
  font-weight: 600;
  color: #27336a;
  margin-bottom: 0.55rem;
  font-size: 1.08rem;
}

.tutorial-inner-card p,
.tutorial-inner-card ol,
.tutorial-inner-card ul {
  color: #4b567d;
  font-size: 0.95rem;
  line-height: 1.68;
}

.tutorial-inner-card :not(pre) > code {
  background: rgba(78, 70, 229, 0.08);
  color: #2f386a;
  padding: 0.22rem 0.5rem;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
}

.tutorial-inner-card--neutral {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(209, 215, 255, 0.6);
  box-shadow: 0 22px 45px rgba(71, 60, 200, 0.18);
}

.tutorial-inner-card--blue {
  background: linear-gradient(135deg, rgba(235, 243, 255, 0.96), rgba(222, 231, 255, 0.94));
  border-color: rgba(96, 110, 240, 0.35);
}

.tutorial-inner-card--green {
  background: linear-gradient(135deg, rgba(236, 252, 245, 0.97), rgba(221, 247, 235, 0.94));
  border-color: rgba(22, 163, 118, 0.35);
}

.tutorial-inner-card--purple {
  background: linear-gradient(135deg, rgba(243, 238, 255, 0.96), rgba(232, 224, 254, 0.94));
  border-color: rgba(168, 85, 247, 0.35);
}

.tutorial-inner-card--orange {
  background: linear-gradient(135deg, rgba(255, 246, 234, 0.96), rgba(255, 238, 212, 0.94));
  border-color: rgba(245, 158, 11, 0.38);
}

.tutorial-inner-card--indigo {
  background: linear-gradient(135deg, rgba(235, 239, 255, 0.97), rgba(221, 228, 255, 0.94));
  border-color: rgba(79, 70, 229, 0.4);
}

.tutorial-inner-card--yellow {
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.97), rgba(255, 242, 210, 0.94));
  border-color: rgba(250, 204, 21, 0.4);
}

.tutorial-inner-card--success {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(216, 247, 232, 0.94));
  border-color: rgba(16, 185, 129, 0.48);
}

.tutorial-inner-card--warning {
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.97), rgba(255, 240, 214, 0.94));
  border-color: rgba(245, 158, 11, 0.48);
}

.tutorial-inner-card--warning h5,
.tutorial-inner-card--warning h6 {
  color: #b45309;
}

.tutorial-inner-card--success h5,
.tutorial-inner-card--success h6 {
  color: #047857;
}

body.dark-mode .tutorial-inner-card {
  background: rgba(25, 27, 64, 0.86);
  border-color: rgba(106, 115, 240, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 36px rgba(0, 0, 0, 0.65);
}

body.dark-mode .tutorial-inner-card h5,
body.dark-mode .tutorial-inner-card h6 {
  color: #eef0ff;
}

body-dark-mode .tutorial-inner-card p,
body-dark-mode .tutorial-inner-card ol,
body-dark-mode .tutorial-inner-card ul {
  color: #c5c9ff;
}

body-dark-mode .tutorial-inner-card :not(pre) > code {
  background: rgba(126, 138, 240, 0.28);
  color: #f3f4ff;
}

body-dark-mode .tutorial-inner-card--neutral {
  background: rgba(23, 25, 55, 0.92);
  border-color: rgba(118, 128, 226, 0.35);
  box-shadow: 0 24px 48px rgba(4, 6, 24, 0.7);
}

body-dark-mode .tutorial-inner-card--blue {
  background: rgba(25, 31, 70, 0.88);
  border-color: rgba(134, 148, 255, 0.5);
}

body-dark-mode .tutorial-inner-card--green {
  background: rgba(16, 36, 30, 0.86);
  border-color: rgba(45, 170, 130, 0.55);
}

body-dark-mode .tutorial-inner-card--success {
  background: rgba(18, 38, 34, 0.86);
  border-color: rgba(52, 211, 153, 0.55);
}

body-dark-mode .tutorial-inner-card--success h5,
body-dark-mode .tutorial-inner-card--success h6 {
  color: #4ade80;
}

body-dark-mode .tutorial-inner-card--warning h5,
body-dark-mode .tutorial-inner-card--warning h6 {
  color: #fbbf24;
}

body-dark-mode .tutorial-inner-card--orange {
  background: rgba(41, 28, 13, 0.88);
  border-color: rgba(245, 158, 11, 0.55);
}

body-dark-mode .tutorial-inner-card--orange h5,
body-dark-mode .tutorial-inner-card--orange h6 {
  color: #fb923c;
}

body-dark-mode .tutorial-inner-card--indigo {
  background: rgba(23, 26, 68, 0.88);
  border-color: rgba(123, 136, 244, 0.55);
}

body-dark-mode .tutorial-inner-card--indigo h5,
body-dark-mode .tutorial-inner-card--indigo h6 {
  color: #cdd6ff;
}

body-dark-mode .tutorial-inner-card--yellow,
body-dark-mode .tutorial-inner-card--warning {
  background: rgba(45, 39, 14, 0.88);
  border-color: rgba(255, 204, 46, 0.55);
}

.tutorial-list {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0.4rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.tutorial-code {
  font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 0.85rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 15px;
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.6;
  border: 1px solid rgba(79, 70, 229, 0.4);
}

body.dark-mode .tutorial-code {
  background: #0a1224;
  border-color: rgba(139, 148, 255, 0.45);
  color: #e2e8f0;
}

.tutorial-placeholder {
  text-align: center;
  color: #4d5a84;
  font-size: 0.95rem;
}

body.dark-mode .tutorial-placeholder {
  color: #c6c8ff;
}

.tutorial-faq details {
  border-radius: 18px;
  border: 1px solid rgba(210, 214, 255, 0.5);
  background: rgba(252, 253, 255, 0.96);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tutorial-faq summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: #334155;
}

.tutorial-faq summary:hover {
  background: rgba(245, 247, 255, 0.9);
}

.tutorial-faq details[open] {
  border-color: rgba(113, 122, 240, 0.6);
  box-shadow: 0 16px 30px rgba(90, 83, 200, 0.18);
}

.tutorial-faq details > div {
  padding: 0 1.2rem 1.2rem;
  font-size: 0.94rem;
  color: #4b5563;
}

body-dark-mode .tutorial-faq details {
  background: rgba(23, 24, 52, 0.92);
  border-color: rgba(118, 126, 240, 0.4);
}

body-dark-mode .tutorial-faq summary {
  color: #c9cdff;
}

body-dark-mode .tutorial-faq details > div {
  color: #afb3ec;
}
body {
        background: radial-gradient(120% 120% at 0% 0%, #9b78ff 0%, #5a30c9 45%, #2f2968 100%);
        font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
        transition: background 0.5s ease, color 0.5s ease;
      }
      .glass-card {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 20px 45px rgba(73, 46, 158, 0.35);
        backdrop-filter: blur(18px);
        transition: background 0.5s ease, border 0.5s ease, color 0.5s ease;
      }
      .floating-tab {
        background: linear-gradient(120deg, #8469ff, #a76bff);
        box-shadow: 0 15px 45px rgba(108, 74, 226, 0.45);
      }
      .primary-btn {
        background: linear-gradient(120deg, #8369ff, #9f58ff);
        box-shadow: 0 15px 35px rgba(108, 74, 226, 0.35);
      }
      .primary-btn:hover {
        background: linear-gradient(120deg, #715dff, #8b4fff);
      }
      .pill-button {
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.4);
      }
      /* Theme switch styles */
      .theme-switch {
        --toggle-size: 20px;
        --container-width: 5.625em;
        --container-height: 2.5em;
        --container-radius: 6.25em;
        --container-light-bg: #3d7eae;
        --container-night-bg: #1d1f2c;
        --circle-container-diameter: 3.375em;
        --sun-moon-diameter: 2.125em;
        --sun-bg: #ecca2f;
        --moon-bg: #c4c9d1;
        --spot-color: #959db1;
        --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
        --stars-color: #fff;
        --clouds-color: #f3fdff;
        --back-clouds-color: #aacadf;
        --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
        --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
        display: inline-flex;
        align-items: center;
      }
      .theme-switch,
      .theme-switch *,
      .theme-switch *::before,
      .theme-switch *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: var(--toggle-size);
      }
      .theme-switch__container {
        width: var(--container-width);
        height: var(--container-height);
        background-color: var(--container-light-bg);
        border-radius: var(--container-radius);
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
        transition: var(--transition);
        position: relative;
      }
      .theme-switch__container::before {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
        border-radius: var(--container-radius);
      }
      .theme-switch__checkbox {
        display: none;
      }
      .theme-switch__circle-container {
        width: var(--circle-container-diameter);
        height: var(--circle-container-diameter);
        background-color: rgba(255, 255, 255, 0.1);
        position: absolute;
        left: var(--circle-container-offset);
        top: var(--circle-container-offset);
        border-radius: var(--container-radius);
        box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
        display: flex;
        transition: var(--circle-transition);
        pointer-events: none;
      }
      .theme-switch__sun-moon-container {
        pointer-events: auto;
        position: relative;
        z-index: 2;
        width: var(--sun-moon-diameter);
        height: var(--sun-moon-diameter);
        margin: auto;
        border-radius: var(--container-radius);
        background-color: var(--sun-bg);
        box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
        filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
        overflow: hidden;
        transition: var(--transition);
      }
      .theme-switch__moon {
        transform: translateX(100%);
        width: 100%;
        height: 100%;
        background-color: var(--moon-bg);
        border-radius: inherit;
        box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
        transition: var(--transition);
        position: relative;
      }
      .theme-switch__spot {
        position: absolute;
        top: 0.75em;
        left: 0.312em;
        width: 0.75em;
        height: 0.75em;
        border-radius: var(--container-radius);
        background-color: var(--spot-color);
        box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
      }
      .theme-switch__spot:nth-of-type(2) {
        width: 0.375em;
        height: 0.375em;
        top: 0.937em;
        left: 1.375em;
      }
      .theme-switch__spot:nth-last-of-type(3) {
        width: 0.25em;
        height: 0.25em;
        top: 0.312em;
        left: 0.812em;
      }
      .theme-switch__clouds {
        width: 1.25em;
        height: 1.25em;
        background-color: var(--clouds-color);
        border-radius: var(--container-radius);
        position: absolute;
        bottom: -0.625em;
        left: 0.312em;
        box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
        transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
      }
      .theme-switch__stars-container {
        position: absolute;
        color: var(--stars-color);
        top: -100%;
        left: 0.312em;
        width: 2.75em;
        height: auto;
        transition: var(--transition);
      }
      .theme-switch__checkbox:checked + .theme-switch__container {
        background-color: var(--container-night-bg);
      }
      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
        left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
      }
      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
        left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
      }
      .theme-switch__circle-container:hover {
        left: calc(var(--circle-container-offset) + 0.187em);
      }
      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
        transform: translate(0);
      }
      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
        bottom: -4.062em;
      }
      .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
        top: 50%;
        transform: translateY(-50%);
      }
      /* Dark mode adjustments */
      body.dark-mode {
        background: radial-gradient(120% 120% at 0% 0%, #2a1f4f 0%, #1b1740 48%, #0d0b2a 100%);
        color: #e9e9ff;
      }
      body.dark-mode .glass-card {
        background: rgba(28, 30, 62, 0.88);
        border: 1px solid rgba(120, 135, 255, 0.1);
        box-shadow: 0 20px 45px rgba(8, 7, 37, 0.6);
        color: #e9eaff;
      }
      body.dark-mode .floating-tab {
        background: linear-gradient(120deg, #4f3bc4, #6e2adb);
      }
      body.dark-mode .primary-btn {
        background: linear-gradient(120deg, #5d4bff, #7d36ff);
      }
      body.dark-mode .primary-btn:hover {
        background: linear-gradient(120deg, #4b3ed9, #6a2fe0);
      }
      body.dark-mode .pill-button {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.18);
      }
      body.dark-mode .text-slate-500,
      body.dark-mode .text-slate-400 {
        color: #a6a8f0 !important;
      }
      body.dark-mode .text-slate-600 {
        color: #cfd0ff !important;
      }
      body.dark-mode .text-slate-700 {
        color: #f1f1ff !important;
      }
      body.dark-mode .text-slate-900 {
        color: #fafaff !important;
      }
      body.dark-mode .text-indigo-600 {
        color: #98a6ff !important;
      }
      body.dark-mode .bg-white\/90,
      body.dark-mode .bg-white\/75,
      body.dark-mode .bg-white\/70,
      body.dark-mode .bg-white\/60 {
        background-color: rgba(26, 28, 58, 0.9) !important;
        color: #e8e9ff;
      }
      body.dark-mode .bg-white {
        background-color: rgba(30, 35, 70, 0.9) !important;
      }
      .tab-pill {
        flex: 1 1 0;
        min-width: 7rem;
        border-radius: 9999px;
        padding: 0.75rem 1.5rem;
        color: rgba(255, 255, 255, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: all 0.35s ease;
      }
      .tab-pill::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(255, 255, 255, 0.18);
        box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.4);
        opacity: 0;
        transition: opacity 0.35s ease;
      }
      .tab-pill span {
        position: relative;
        z-index: 2;
      }
      .tab-pill--active {
        color: #5a30c9;
      }
      .tab-pill--active::after {
        opacity: 1;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 10px 30px rgba(73, 46, 158, 0.35);
      }
      .tab-pill:hover:not(.tab-pill--active) {
        color: rgba(255, 255, 255, 0.95);
      }
      body.dark-mode .tab-pill {
        color: rgba(224, 224, 255, 0.6);
      }
      body.dark-mode .tab-pill::after {
        background: rgba(33, 36, 72, 0.6);
        box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.08);
      }
      body.dark-mode .tab-pill--active {
        color: #c9c9ff;
      }
      body.dark-mode .tab-pill--active::after {
        background: rgba(255, 255, 255, 0.92);
        color: #3a2ba8;
        box-shadow: 0 12px 32px rgba(10, 9, 40, 0.6);
      }

      body.dark-mode .floating-tab button.bg-white {
        background-color: rgba(255, 255, 255, 0.92) !important;
        color: #4b3ae2 !important;
        box-shadow: 0 10px 25px rgba(37, 25, 96, 0.35);
      }
    .tutorial-os-icon,
    .icon-windows,
    .icon-macos,
    .icon-linux { display: none !important; }
    .os-icon{
      width: 1.15rem;
      height: 1.15rem;
      object-fit: contain;
      flex-shrink: 0;
      filter: var(--icon-tint, none);
    }
    
    .tutorial-os-button.is-active{
      color: #3A32C9;
      --icon-tint: brightness(0) saturate(100%) invert(16%)
                   sepia(92%) saturate(4107%) hue-rotate(246deg)
                   brightness(90%) contrast(106%);
    }
    .tutorial-os-button{
      --icon-tint: grayscale(0.1) brightness(0.95) contrast(1.05);
    }