@charset "UTF-8";
.highlight .err {
  color: #e3d2d2;
  background-color: #8c2121; }
.highlight .c {
  color: #8a8a8a; }
.highlight .c1 {
  color: #8a8a8a; }
.highlight .cm {
  color: #8a8a8a; }
.highlight .cp {
  color: #8a8a8a; }
.highlight .cs {
  color: #8a8a8a;
  font-style: italic; }
.highlight .gd {
  color: #d85a5a; }
.highlight .gd .x {
  color: #d85a5a; }
.highlight .ge {
  font-style: italic; }
.highlight .gh {
  color: #999999; }
.highlight .gi {
  color: #4ec64e; }
.highlight .gi .x {
  color: #4ec64e; }
.highlight .go {
  color: #888888; }
.highlight .gp {
  color: #555555; }
.highlight .gr {
  color: #f07178; }
.highlight .gs {
  font-weight: bold; }
.highlight .gt {
  color: #f07178; }
.highlight .gu {
  color: #aaaaaa; }
.highlight .k {
  color: #d85a7b; }
.highlight .kc {
  color: #d85a7b; }
.highlight .kd {
  color: #d85a7b; }
.highlight .kp {
  color: #d85a7b; }
.highlight .kr {
  color: #d85a7b; }
.highlight .kt {
  color: #ffcb6b; }
.highlight .n {
  color: #c7d1d8; }
.highlight .na {
  color: #11a69f; }
.highlight .nb {
  color: #d85a7b; }
.highlight .bp {
  color: #999999; }
.highlight .nc {
  color: #11a69f; }
.highlight .ne {
  color: #990000; }
.highlight .nf {
  color: #5ab780; }
.highlight .ni {
  color: #11a69f; }
.highlight .nn {
  color: #11a69f; }
.highlight .no {
  color: #9d99e6; }
.highlight .nt {
  color: #de3581; }
.highlight .nv {
  color: #9680b1; }
.highlight .vc {
  color: #9680b1; }
.highlight .vg {
  color: #9680b1; }
.highlight .vi {
  color: #9680b1; }
.highlight .o {
  color: #bcd890; }
.highlight .ow {
  color: #bcd890; }
.highlight .m {
  color: #9d99e6; }
.highlight .mf {
  color: #9d99e6; }
.highlight .mh {
  color: #9d99e6; }
.highlight .mi {
  color: #9d99e6; }
.highlight .il {
  color: #9d99e6; }
.highlight .mo {
  color: #9d99e6; }
.highlight .s {
  color: #baa94a; }
.highlight .s1 {
  color: #baa94a; }
.highlight .s2 {
  color: #baa94a; }
.highlight .sb {
  color: #baa94a; }
.highlight .sc {
  color: #baa94a; }
.highlight .sd {
  color: #baa94a; }
.highlight .se {
  color: #baa94a; }
.highlight .sh {
  color: #baa94a; }
.highlight .si {
  color: #baa94a; }
.highlight .sr {
  color: #009926; }
.highlight .ss {
  color: #3c90f5; }
.highlight .sx {
  color: #baa94a; }
.highlight .w {
  color: #eeffff; }
.highlight .lineno, .highlight .gl {
  color: #8a8a8a; }
.highlight .hll {
  background-color: #373730; }

html {
  font-size: 16px; }

/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0; }

/**
 * Basic styling
 */
body {
  font: 400 16px/1.5 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif;
  color: #959595;
  background-color: #181818;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow-wrap: break-word; }

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
div.highlight,
figure.highlight {
  margin-bottom: 15px; }

hr {
  margin-top: 30px;
  margin-bottom: 30px; }

/**
 * `main` element
 */
main {
  display: block;
  /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle; }

/**
 * Figures
 */
figure > img {
  display: block; }

figcaption {
  font-size: 14px; }

/**
 * Lists
 */
ul, ol {
  margin-left: 30px; }

li > ul,
li > ol {
  margin-bottom: 0; }

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
  color: #bbbbbb;
  font-weight: 500; }

/**
 * Links
 */
a {
  color: #5691cd;
  text-decoration: none; }
  a:visited {
    color: #80bbff; }
  a:hover {
    color: #959595;
    text-decoration: underline #999999;
    text-underline-offset: 3px; }
  .social-media-list a:hover {
    text-decoration: none; }
    .social-media-list a:hover .username {
      text-decoration: underline; }

/**
 * Blockquotes
 */
blockquote {
  color: #999999;
  border-left: 4px solid #2b2b2b;
  padding-left: 15px;
  font-size: 1.05rem;
  font-style: italic; }
  blockquote > :last-child {
    margin-bottom: 0; }
  blockquote i, blockquote em {
    font-style: normal; }

/**
 * Code formatting
 */
pre,
code {
  font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
  background-color: #222222; }
  @media screen and (max-width: 600px) {
    pre,
    code {
      font-family: monospace; } }

pre {
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.4;
  color: #bbbbbb;
  overflow-x: auto; }
  pre > code {
    display: inline-block;
    width: 100%; }

div.highlight, figure.highlight {
  border: 1px solid #2b2b2b;
  border-radius: 3px; }
  div.highlight pre, figure.highlight pre {
    margin: 0; }
  div.highlight table, div.highlight tbody, div.highlight th, div.highlight tr, div.highlight td, figure.highlight table, figure.highlight tbody, figure.highlight th, figure.highlight tr, figure.highlight td {
    margin: 0;
    padding: 0;
    border: 0; }
  div.highlight .lineno, div.highlight .gl, figure.highlight .lineno, figure.highlight .gl {
    text-align: right; }

figure.highlight table {
  margin: -8px -12px -14px; }
figure.highlight td.gutter {
  border-right: 1px solid #2b2b2b; }
figure.highlight td.code {
  width: 100%; }

code.highlighter-rouge {
  padding: 1px 5px;
  font-size: 14px;
  border: 1px solid #2b2b2b;
  border-radius: 3px; }

/**
 * Wrapper
 */
.wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px; }
  @media screen and (max-width: 600px) {
    .wrapper {
      padding-right: 18px;
      padding-left: 18px; } }

/**
 * Clearfix
 */
.wrapper:after {
  content: "";
  display: table;
  clear: both; }

/**
 * Icons
 */
.orange {
  color: #f66a0a; }

.grey {
  color: #828282; }

.svg-icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  fill: currentColor;
  vertical-align: text-bottom;
  overflow: visible; }

/**
 * Tables
 */
table {
  margin-bottom: 30px;
  width: 100%;
  text-align: left;
  color: #959595;
  border-collapse: collapse;
  border: 1px solid #2b2b2b; }
  table tr:nth-child(even) {
    background-color: #222222; }
  table th, table td {
    padding: 10px 15px; }
  table th {
    background-color: #323232;
    border: 1px solid #3e3e3e; }
  table td {
    border: 1px solid #2b2b2b; }
  @media screen and (max-width: 800px) {
    table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar; } }

/**
 * Site header
 */
.site-header {
  position: relative;
  width: 100%;
  min-height: 55.95px;
  line-height: 54px;
  background-color: #181818;
  border-top: 5px solid #999999;
  border-bottom: 1px solid #2b2b2b; }

.site-title {
  font-size: 1.625rem;
  font-weight: 300;
  letter-spacing: -1px;
  margin-bottom: 0;
  float: left; }
  @media screen and (max-width: 600px) {
    .site-title {
      padding-right: 45px; } }
  .site-title, .site-title:visited {
    color: #a6a6a6; }

.site-nav {
  float: right;
  border: none;
  background-color: inherit; }
  .site-nav label[for="nav-trigger"], .site-nav #nav-trigger {
    display: none; }
  .site-nav .nav-item {
    color: #959595; }
    .site-nav .nav-item:not(:last-child) {
      margin-right: 15px; }
  @media screen and (max-width: 600px) {
    .site-nav {
      position: absolute;
      top: 9px;
      right: 18px;
      background-color: #181818;
      border: 1px solid #2b2b2b;
      border-radius: 5px;
      text-align: right; }
      .site-nav label[for="nav-trigger"] {
        display: block;
        float: right;
        width: 36px;
        height: 36px;
        cursor: pointer; }
      .site-nav .menu-icon {
        float: right;
        width: 36px;
        height: 26px;
        line-height: 0;
        padding-top: 18px;
        text-align: center; }
        .site-nav .menu-icon::before {
          font-family: "Font Awesome 7 Free";
          font-weight: 900; }
        .site-nav .menu-icon > svg path {
          fill: #999999; }
      .site-nav #nav-trigger ~ label[for=nav-trigger] .menu-icon::before {
        content: "\f0c9";
        font-size: 1.25em; }
      .site-nav #nav-trigger ~ .nav-items {
        clear: both;
        display: none; }
      .site-nav #nav-trigger:checked ~ label[for=nav-trigger] .menu-icon::before {
        content: "\f00d";
        font-size: 1.5em; }
      .site-nav #nav-trigger:checked ~ .nav-items {
        display: block;
        padding-bottom: 5px; }
        .site-nav #nav-trigger:checked ~ .nav-items .nav-item {
          margin-left: 20px;
          padding: 5px 10px; }
      .site-nav .nav-item {
        display: block;
        margin-right: 15px;
        padding: 5px 0;
        color: #959595;
        line-height: 1.5; } }

/**
 * Site footer
 */
.site-footer {
  border-top: 1px solid #2b2b2b;
  padding: 30px 0; }

.footer-heading {
  font-size: 1.125rem;
  margin-bottom: 15px; }

.feed-subscribe .svg-icon {
  padding: 5px 5px 2px 0; }

.contact-list,
.social-media-list {
  list-style: none;
  margin-left: 0; }

.footer-col-wrapper,
.social-links {
  font-size: 0.9375rem;
  color: #858585; }

.footer-col {
  margin-bottom: 15px; }

.footer-col-1,
.footer-col-2 {
  width: calc(50% - (30px / 2)); }

.footer-col-3 {
  width: calc(100% - (30px / 2)); }

@media screen and (min-width: 800px) {
  .footer-col-1 {
    width: calc(35% - (30px / 2)); }

  .footer-col-2 {
    width: calc(20% - (30px / 2)); }

  .footer-col-3 {
    width: calc(45% - (30px / 2)); } }
@media screen and (min-width: 600px) {
  .footer-col-wrapper {
    display: flex; }

  .footer-col {
    width: calc(100% - (30px / 2));
    padding: 0 15px; }
    .footer-col:first-child {
      padding-right: 15px;
      padding-left: 0; }
    .footer-col:last-child {
      padding-right: 0;
      padding-left: 15px; } }
/**
 * Page content
 */
.page-content {
  padding: 30px 0;
  flex: 1 0 auto; }

.page-heading {
  font-size: 2rem; }

.post-list-heading {
  font-size: 1.75rem; }

.post-list {
  margin-left: 0;
  list-style: none; }
  .post-list > li {
    margin-bottom: 30px; }

.post-meta {
  font-size: 14px;
  color: #858585; }

.post-link {
  display: block;
  font-size: 1.5rem; }

/**
 * Posts
 */
.post-header {
  margin-bottom: 30px;
  padding-bottom: 18px;
  text-align: center;
  border-bottom: 1px solid #2b2b2b; }

.post-meta .bullet-divider {
  padding-inline: 15px; }
.post-meta .meta-label {
  font-weight: 600; }
.post-meta .force-inline {
  display: inline; }
  .post-meta .force-inline::before {
    content: "•";
    padding-inline: 5px; }
.post-meta .post-authors {
  margin-top: 3px; }

.post-title,
.post-content h1 {
  margin-bottom: 10px;
  font-size: 2.625rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.15; }
  @media screen and (min-width: 800px) {
    .post-title,
    .post-content h1 {
      font-size: 2.625rem; } }

.post-content {
  margin-bottom: 30px; }
  .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
    margin-top: 30px; }
  .post-content h2 {
    font-size: 1.75rem; }
    @media screen and (min-width: 800px) {
      .post-content h2 {
        font-size: 2rem; } }
  .post-content h3 {
    font-size: 1.375rem; }
    @media screen and (min-width: 800px) {
      .post-content h3 {
        font-size: 1.625rem; } }
  .post-content h4 {
    font-size: 1.25rem; }
  .post-content h5 {
    font-size: 1.125rem; }
  .post-content h6 {
    font-size: 1.0625rem; }

.comments-disabled-message {
  text-align: center;
  font-weight: 300; }

.social-media-list {
  display: table;
  margin: 0 auto; }
  .social-media-list li {
    float: left;
    min-width: 45px;
    min-height: 45px;
    text-align: center;
    margin: 5px 10px 5px 0; }
    .social-media-list li:last-of-type {
      margin-right: 0; }
    .social-media-list li a {
      display: block;
      padding: 10px 12px;
      border: 1px solid #2b2b2b; }
      .social-media-list li a:hover {
        border-color: #a6a6a6; }

/**
 * Pagination navbar
 */
.pagination {
  display: table;
  margin: 0 auto;
  list-style-type: none; }
  .pagination li {
    float: left;
    margin: 0 3px;
    min-width: 45px;
    min-height: 45px;
    text-align: center; }
    .pagination li a {
      display: block;
      text-decoration: none;
      border: 1px solid #2b2b2b; }
      .pagination li a:hover {
        border-color: #a6a6a6; }
    .pagination li a, .pagination li div {
      min-width: 41px;
      padding: 10px 12px;
      text-align: center;
      box-sizing: border-box; }
    .pagination li div {
      border: 1px solid transparent; }
      .pagination li div.pager-edge {
        color: #2b2b2b;
        border: 1px dashed; }
      .pagination li div.current-page {
        font-weight: bold; }

/**
 * Task-lists
 */
.task-list {
  margin-left: 0;
  padding-left: 18px; }

.task-list-item {
  list-style-type: none; }
  .task-list-item-checkbox {
    position: relative;
    margin-right: 9px;
    margin-left: -15px;
    appearance: none;
    border: 8px solid #2b2b2b;
    vertical-align: text-top;
    z-index: -1; }
    .task-list-item-checkbox::after {
      position: absolute;
      top: -8px;
      left: -3px;
      width: 4px;
      height: 10px;
      content: "";
      border: solid transparent;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg); }
    .task-list-item-checkbox:checked::after {
      border-color: #999999; }

/**
 * Grid helpers
 */
@media screen and (min-width: 800px) {
  .one-half {
    width: calc(50% - (30px / 2)); } }
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

.site-nav .trigger {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 60px;
  /* adjust as needed */
  width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000; }

.site-nav .nav-trigger:checked ~ label + .trigger,
.site-nav .nav-trigger:checked + label + .trigger {
  display: flex; }

@media (min-width: 600px) {
  .site-nav .trigger {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    box-shadow: none;
    width: auto; } }
#loginArea.page-link {
  /* Add any custom login link styles here */
  opacity: 1; }

#site-logo {
  height: 40px;
  vertical-align: middle;
  margin-right: 10px; }

:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Base code formatting
 * Override default code and text formatting with user preferences
 */
/** Code formatting - override hardcoded dark background */
pre, code {
  font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace;
  background-color: var(--panel) !important;
  color: var(--pref-text-color) !important;
  padding: 2px 6px;
  border-radius: 3px; }

pre {
  padding: 1rem;
  border: 1px solid var(--ui-border);
  overflow-x: auto; }
  pre code {
    background-color: transparent !important;
    padding: 0; }

/** Inline code in markdown */
p code,
li code,
td code {
  background-color: var(--panel) !important;
  color: var(--pref-text-color) !important; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn, .iridescent {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover, .iridescent:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus, .iridescent:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover, .iridescent:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn, .iridescent {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small, .small.iridescent {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium, .medium.iridescent, .hallpass-buttons button.iridescent, .hallpass-buttons button.ocs__btn {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large, .large.iridescent {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill, .pill.iridescent {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent), .pill.iridescent:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .pill.iridescent:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible, .pill.iridescent:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent, .accent.iridescent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill, .accent.fill.iridescent {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .accent.fill.iridescent:hover, .ocs__btn.accent.fill:focus, .accent.fill.iridescent:focus, .ocs__btn.accent.fill:active, .accent.fill.iridescent:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red, .alert-red.iridescent {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .alert-red.iridescent:hover, .ocs__btn.alert-red:focus, .alert-red.iridescent:focus, .ocs__btn.alert-red:active, .alert-red.iridescent:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill, .alert-red.fill.iridescent {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .alert-red.fill.iridescent:hover, .ocs__btn.alert-red.fill:focus, .alert-red.fill.iridescent:focus, .ocs__btn.alert-red.fill:active, .alert-red.fill.iridescent:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow, .alert-yellow.iridescent {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .alert-yellow.iridescent:hover, .ocs__btn.alert-yellow:focus, .alert-yellow.iridescent:focus, .ocs__btn.alert-yellow:active, .alert-yellow.iridescent:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill, .alert-yellow.fill.iridescent {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .alert-yellow.fill.iridescent:hover, .ocs__btn.alert-yellow.fill:focus, .alert-yellow.fill.iridescent:focus, .ocs__btn.alert-yellow.fill:active, .alert-yellow.fill.iridescent:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green, .alert-green.iridescent {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .alert-green.iridescent:hover, .ocs__btn.alert-green:focus, .alert-green.iridescent:focus, .ocs__btn.alert-green:active, .alert-green.iridescent:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill, .alert-green.fill.iridescent {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .alert-green.fill.iridescent:hover, .ocs__btn.alert-green.fill:focus, .alert-green.fill.iridescent:focus, .ocs__btn.alert-green.fill:active, .alert-green.fill.iridescent:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility, .utility.iridescent {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before, .utility.iridescent::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run, .utility.run.iridescent {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before, .utility.run.iridescent::before {
    content: '▶'; }

.ocs__btn.utility.pause, .utility.pause.iridescent {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before, .utility.pause.iridescent::before {
    content: '⏸'; }

.ocs__btn.utility.stop, .utility.stop.iridescent {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before, .utility.stop.iridescent::before {
    content: '■'; }

.ocs__btn.utility.fullscreen, .utility.fullscreen.iridescent,
.ocs__btn.utility.copy,
.utility.copy.iridescent,
.ocs__btn.utility.save,
.utility.save.iridescent,
.ocs__btn.utility.clear,
.utility.clear.iridescent,
.ocs__btn.utility.reset,
.utility.reset.iridescent,
.ocs__btn.utility.copyOutput,
.utility.copyOutput.iridescent {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before, .utility.fullscreen.iridescent::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before, .utility.copy.iridescent::before {
  content: '📋'; }

.ocs__btn.utility.save::before, .utility.save.iridescent::before {
  content: '💾'; }

.ocs__btn.utility.clear::before, .utility.clear.iridescent::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before, .utility.reset.iridescent::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before, .utility.copyOutput.iridescent::before {
  content: '⎘'; }

.ocs__btn.utility:disabled, .utility.iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility, .utility.iridescent {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before, .utility.iridescent::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill, .alert-red.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .alert-red.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .alert-red.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active, .alert-red.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill, .alert-yellow.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .alert-yellow.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .alert-yellow.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active, .alert-yellow.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill, .alert-green.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .alert-green.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .alert-green.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active, .alert-green.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.ocs__btn:disabled, .iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none; }
  .ocs__btn:disabled:hover, .iridescent:disabled:hover, .ocs__btn:disabled:active, .iridescent:disabled:active {
    opacity: 0.5;
    transform: none; }

.primary.disabled, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn, .iridescent {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover, .iridescent:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus, .iridescent:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover, .iridescent:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn, .iridescent {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small, .small.iridescent {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium, .medium.iridescent, .hallpass-buttons button.iridescent, .hallpass-buttons button.ocs__btn {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large, .large.iridescent {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill, .pill.iridescent {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent), .pill.iridescent:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .pill.iridescent:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible, .pill.iridescent:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent, .accent.iridescent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill, .accent.fill.iridescent {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .accent.fill.iridescent:hover, .ocs__btn.accent.fill:focus, .accent.fill.iridescent:focus, .ocs__btn.accent.fill:active, .accent.fill.iridescent:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red, .alert-red.iridescent {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .alert-red.iridescent:hover, .ocs__btn.alert-red:focus, .alert-red.iridescent:focus, .ocs__btn.alert-red:active, .alert-red.iridescent:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill, .alert-red.fill.iridescent {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .alert-red.fill.iridescent:hover, .ocs__btn.alert-red.fill:focus, .alert-red.fill.iridescent:focus, .ocs__btn.alert-red.fill:active, .alert-red.fill.iridescent:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow, .alert-yellow.iridescent {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .alert-yellow.iridescent:hover, .ocs__btn.alert-yellow:focus, .alert-yellow.iridescent:focus, .ocs__btn.alert-yellow:active, .alert-yellow.iridescent:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill, .alert-yellow.fill.iridescent {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .alert-yellow.fill.iridescent:hover, .ocs__btn.alert-yellow.fill:focus, .alert-yellow.fill.iridescent:focus, .ocs__btn.alert-yellow.fill:active, .alert-yellow.fill.iridescent:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green, .alert-green.iridescent {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .alert-green.iridescent:hover, .ocs__btn.alert-green:focus, .alert-green.iridescent:focus, .ocs__btn.alert-green:active, .alert-green.iridescent:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill, .alert-green.fill.iridescent {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .alert-green.fill.iridescent:hover, .ocs__btn.alert-green.fill:focus, .alert-green.fill.iridescent:focus, .ocs__btn.alert-green.fill:active, .alert-green.fill.iridescent:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility, .utility.iridescent {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before, .utility.iridescent::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run, .utility.run.iridescent {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before, .utility.run.iridescent::before {
    content: '▶'; }

.ocs__btn.utility.pause, .utility.pause.iridescent {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before, .utility.pause.iridescent::before {
    content: '⏸'; }

.ocs__btn.utility.stop, .utility.stop.iridescent {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before, .utility.stop.iridescent::before {
    content: '■'; }

.ocs__btn.utility.fullscreen, .utility.fullscreen.iridescent,
.ocs__btn.utility.copy,
.utility.copy.iridescent,
.ocs__btn.utility.save,
.utility.save.iridescent,
.ocs__btn.utility.clear,
.utility.clear.iridescent,
.ocs__btn.utility.reset,
.utility.reset.iridescent,
.ocs__btn.utility.copyOutput,
.utility.copyOutput.iridescent {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before, .utility.fullscreen.iridescent::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before, .utility.copy.iridescent::before {
  content: '📋'; }

.ocs__btn.utility.save::before, .utility.save.iridescent::before {
  content: '💾'; }

.ocs__btn.utility.clear::before, .utility.clear.iridescent::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before, .utility.reset.iridescent::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before, .utility.copyOutput.iridescent::before {
  content: '⎘'; }

.ocs__btn.utility:disabled, .utility.iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility, .utility.iridescent {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before, .utility.iridescent::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill, .alert-red.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .alert-red.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .alert-red.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active, .alert-red.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill, .alert-yellow.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .alert-yellow.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .alert-yellow.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active, .alert-yellow.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill, .alert-green.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .alert-green.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .alert-green.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active, .alert-green.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

button, .primary, .hallpass-buttons button {
  color: white;
  background-color: rgba(80, 80, 80, 0.7);
  transition: all 0.5s;
  transition: all 0.5s; }
  button:hover, .primary:hover, .hallpass-buttons button:hover {
    background-color: rgba(55, 55, 55, 0.7); }
  button:active, .primary:active, .hallpass-buttons button:active {
    background-color: rgba(29, 29, 29, 0.7); }

.secondary {
  color: #999999;
  background-color: rgba(120, 120, 128, 0.12);
  transition: all 0.5s;
  transition: all 0.5s; }
  .secondary:hover {
    background-color: rgba(95, 95, 102, 0.12); }
  .secondary:active {
    background-color: rgba(71, 71, 75, 0.12); }

.filledHighlight {
  background-color: #007aff;
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledHighlight:hover {
    background-color: #0062cc; }
  .filledHighlight:active {
    background-color: #004999; }

.filledTinted {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.15);
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledTinted:hover {
    background-color: rgba(0, 98, 204, 0.15); }
  .filledTinted:active {
    background-color: rgba(0, 73, 153, 0.15); }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.ocs__btn:disabled, .iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none; }
  .ocs__btn:disabled:hover, .iridescent:disabled:hover, .ocs__btn:disabled:active, .iridescent:disabled:active {
    opacity: 0.5;
    transform: none; }

.primary.disabled, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/* define class for redifined button */
.button {
  width: auto;
  height: auto;
  border-radius: 10px;
  background-color: #21807c;
  border: 3px solid black;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 1;
  grid-row: span 1;
  transition: all 0.5s; }

/* darkens the background color on hover to create a selecting effect */
.button:hover {
  background-color: #373737; }

/* "row style" is flexible size and aligns pictures in center */
.row {
  align-items: center;
  display: flex; }

/* "column style" is one-third of the width with padding */
.column {
  flex: 16.66%;
  padding: 3px; }

/* Animation container */
#animation {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; }

/* Calculator container - modern grid layout */
.calculator-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 12px; }

/* Output display */
.calculator-output {
  grid-column: span 4;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: #fff;
  text-align: right;
  border: none;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  overflow: hidden; }

/* Base button mixin for calculator */
/* Number buttons */
.calculator-number {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Zero button spans 2 columns */ }
  .calculator-number:hover {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  .calculator-number:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-number.zero {
    grid-column: span 2;
    aspect-ratio: auto;
    padding: 0 2rem; }

/* Operation buttons (+, -, *, /) */
.calculator-operation {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #ff9500, #e68a00);
  color: #fff;
  box-shadow: 0 4px 6px rgba(255, 149, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-operation:hover {
    background: linear-gradient(145deg, #ffaa33, #ff9500);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 149, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-operation:active {
    transform: translateY(0); }

/* Clear button */
.calculator-clear {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(1rem, 3vw, 1.2rem); }
  .calculator-clear:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-clear:active {
    transform: translateY(0); }

/* Special operation buttons (sqrt, %) */
.calculator-special {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-special:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-special:active {
    transform: translateY(0); }

/* Equals button */
.calculator-equals {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #34c759, #28a745);
  color: #fff;
  box-shadow: 0 4px 6px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-equals:hover {
    background: linear-gradient(145deg, #4cd964, #34c759);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(52, 199, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-equals:active {
    transform: translateY(0); }

/* Responsive breakpoints */
@media (max-width: 480px) {
  .calculator-container {
    max-width: 100%;
    padding: 1rem;
    gap: 8px;
    border-radius: 16px; }

  .calculator-output {
    min-height: 60px;
    padding: 0.75rem 1rem; } }
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-container {
    max-width: 350px; } }
@media (min-width: 769px) {
  .calculator-container {
    max-width: 400px; }

  .calculator-number,
  .calculator-operation,
  .calculator-clear,
  .calculator-special,
  .calculator-equals {
    min-height: 70px; } }
/* Disable canvas filter if present */
canvas {
  filter: none; }

.iridescent {
  --ocs-btn-tone: var(--ocs-btn-tone, var(--pref-accent-color, var(--accent)));
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 88%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 74%, #000000));
  color: var(--pref-bg-color, var(--white1, #ffffff));
  border-color: var(--ocs-btn-tone);
  transition: filter 0.2s ease, opacity 0.2s ease; }
  .iridescent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.08) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s infinite linear;
    z-index: 0;
    pointer-events: none; }
  .iridescent:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 90%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 72%, #000000));
    filter: brightness(1.06); }
  .iridescent:active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 84%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 68%, #000000));
    filter: brightness(0.94); }
  .iridescent span,
  .iridescent a {
    position: relative;
    z-index: 1; }

@keyframes shimmer {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 100% 50%; } }
/**
 * Drag and Drop Buttons
 * Reusable classes for drag-source / drop-target button pairs used by
 * assembly, matching, and sorting activities (see the PC Assembly Bench).
 *
 *
 * Sizing comes from the $dnd-sizes map below, mirroring the $sizes token
 * pattern in _tokens.scss.
 *
 * Markup contract:
 *   .ocs__dnd                     board wrapper
 *     .ocs__dnd-header            title / controls row
 *     .ocs__dnd-status            aria-live status line
 *     .ocs__dnd-progress          secondary progress line
 *     .ocs__dnd-layout            responsive two panel grid
 *       .ocs__dnd-panel           a tray or a target area
 *         .ocs__dnd-panel-title   panel heading
 *         .ocs__drag-btn          draggable source button  (draggable="true")
 *         .ocs__drop-btn          drop target button
 *
 * State classes (toggle from JS, no inline styles needed):
 *   .is-selected  source picked, waiting for a destination
 *   .is-over      pointer is dragging over this drop target
 *   .is-filled    drop target accepted its correct item
 *   [disabled]    consumed source or completed target
 *
 * Size classes:
 *   .ocs__dnd--small | --medium | --large      resize a whole board
 *   .ocs__drag-btn--small etc.                 resize one control
 */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

:root {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px;
  --dnd-panel-padding: 14px;
  --dnd-board-padding: 18px;
  --dnd-gap: 18px;
  --dnd-min-column: 240px; }

.ocs__dnd--small {
  --dnd-control-padding: 8px;
  --dnd-control-font: 14px;
  --dnd-radius: 6px;
  --dnd-panel-padding: 10px;
  --dnd-board-padding: 12px;
  --dnd-gap: 12px;
  --dnd-min-column: 180px; }

.ocs__drag-btn--small,
.ocs__drop-btn--small {
  --dnd-control-padding: 8px;
  --dnd-control-font: 14px;
  --dnd-radius: 6px; }

.ocs__dnd--medium {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px;
  --dnd-panel-padding: 14px;
  --dnd-board-padding: 18px;
  --dnd-gap: 18px;
  --dnd-min-column: 240px; }

.ocs__drag-btn--medium,
.ocs__drop-btn--medium {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px; }

.ocs__dnd--large {
  --dnd-control-padding: 15px;
  --dnd-control-font: 18px;
  --dnd-radius: 10px;
  --dnd-panel-padding: 20px;
  --dnd-board-padding: 24px;
  --dnd-gap: 24px;
  --dnd-min-column: 320px; }

.ocs__drag-btn--large,
.ocs__drop-btn--large {
  --dnd-control-padding: 15px;
  --dnd-control-font: 18px;
  --dnd-radius: 10px; }

.ocs__dnd {
  color: #F0F0F0;
  background: #121212;
  border: 1px solid #3a3a3c;
  border-radius: calc(var(--dnd-radius) + 4px);
  padding: var(--dnd-board-padding);
  font-family: system-ui, sans-serif; }

.ocs__dnd-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end; }

.ocs__dnd-status {
  font-weight: 700;
  min-height: 24px; }

.ocs__dnd-progress {
  color: #4bbaff; }

.ocs__dnd-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dnd-min-column), 1fr));
  gap: var(--dnd-gap);
  margin-top: 14px; }

.ocs__dnd-panel {
  background: #1F2020;
  border: 1px solid #3a3a3c;
  border-radius: calc(var(--dnd-radius) + 2px);
  padding: var(--dnd-panel-padding); }

.ocs__dnd-panel-title {
  margin-top: 0; }

.ocs__dnd-input {
  display: block;
  width: min(100%, 320px);
  box-sizing: border-box;
  margin-top: 6px;
  padding: var(--dnd-control-padding);
  border: 1px solid #3a3a3c;
  border-radius: var(--dnd-radius);
  background: #1F2020;
  color: rgba(255, 255, 255, 0.87);
  font-size: var(--dnd-control-font); }

.ocs__dnd-reset {
  padding: var(--dnd-control-padding) calc(var(--dnd-control-padding) * 1.4);
  border: 1px solid #4CAFEF;
  border-radius: var(--dnd-radius);
  background: #007aff;
  color: white;
  font-size: var(--dnd-control-font);
  cursor: pointer;
  transition: background 0.2s; }
  .ocs__dnd-reset:hover {
    background: #0068d9; }

.ocs__drag-btn,
.ocs__drop-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: var(--dnd-control-padding);
  border: 1px solid #3182CE;
  border-radius: var(--dnd-radius);
  background: #2c2c2e;
  color: rgba(255, 255, 255, 0.87);
  font-size: var(--dnd-control-font);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background 0.2s, border-color 0.2s, outline-color 0.2s, opacity 0.2s; }
  .ocs__drag-btn:hover:not([disabled]),
  .ocs__drop-btn:hover:not([disabled]) {
    background: #4c4c4d; }
  .ocs__drag-btn:focus-visible,
  .ocs__drop-btn:focus-visible {
    outline: 3px solid #4CAFEF;
    outline-offset: 2px; }
  .ocs__drag-btn[disabled],
  .ocs__drop-btn[disabled] {
    cursor: default; }

.ocs__drag-btn {
  cursor: grab; }
  .ocs__drag-btn:active:not([disabled]) {
    cursor: grabbing; }
  .ocs__drag-btn.is-selected {
    outline: 3px solid #FBBF24; }
  .ocs__drag-btn[disabled] {
    opacity: 0.35;
    cursor: default; }

.ocs__drop-btn.is-over {
  border-color: #FBBF24;
  background: #5a5a5c; }
.ocs__drop-btn.is-filled, .ocs__drop-btn.is-filled[disabled] {
  border-color: #4ADE80;
  background: #2D5A3D;
  opacity: 1; }

.container {
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
  background: #1c1c1e;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); }

.queue-info {
  text-align: center;
  font-size: 18px;
  color: #48484a;
  margin-bottom: 15px; }

.queue-list {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 12px; }

.queue-list p {
  font-size: 16px;
  color: #636366;
  margin-bottom: 10px; }

#studentList {
  list-style: none;
  padding: 0; }

#studentList li {
  font-size: 16px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

.queue-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px; }

.post-list {
  font-size: 0.95em;
  list-style: none;
  margin: 0;
  padding: 0; }

.post-list-heading {
  /* Leave header size as default or adjust here if needed */
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.75em; }

.post-list li {
  background-color: var(--bg-1);
  border: 1px solid var(--accent);
  border-radius: 0.5em;
  margin-bottom: 1.5em;
  padding: 1em; }

.post-list li:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px); }

@media only screen and (max-width: 767px) {
  .post-list {
    padding: 10px;
    font-size: 0.7125em; }

  .post-list-heading {
    font-size: 2em; }

  .post-list li {
    padding: 0.75em;
    margin-bottom: 1em; } }
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem;
  z-index: 9999;
  padding-top: 50px; }
  @media (max-width: 768px) {
    .modal {
      padding: 60px 0 0 0; } }

.modal-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #1F2020;
  border: 1px solid #2A2D2D;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  background: linear-gradient(145deg, var(--panel), var(--panel-mid));
  color: var(--text);
  font-family: var(--pref-font-family); }
  @media (max-width: 768px) {
    .modal-content {
      padding: 20px 0;
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      min-height: calc(100vh - 60px); } }
  .modal-content input,
  .modal-content textarea,
  .modal-content p {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border-radius: 12px;
    border: 1px solid var(--ui-border);
    font-size: var(--pref-font-size, 16px);
    background-color: var(--bg-1);
    color: var(--text);
    font-family: var(--pref-font-family); }
  .modal-content button {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: var(--pref-font-size, 16px);
    font-weight: bold; }
    .modal-content button:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .modal-content button:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .modal-content button:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .modal-content button {
        height: 44px; } }

.close {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  position: absolute;
  z-index: 10;
  line-height: 1;
  font-size: 28px;
  top: 28px;
  right: 28px; }
  .close:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .close:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .close:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .close {
      height: 44px; } }
  @media (max-width: 768px) {
    .close {
      margin-left: 0.25rem;
      width: 44px; } }
  @media (max-width: 768px) {
    .close {
      font-size: 20px;
      top: 12px;
      right: 12px; } }

h1 {
  display: none; }

h2 {
  color: var(--text); }

#calendar {
  margin-left: 20px;
  box-sizing: border-box;
  z-index: 0;
  overflow: visible; }

.calendar-stage {
  box-sizing: border-box;
  z-index: 0; }

.fc-scroller {
  height: auto !important;
  overflow: visible !important; }

.fc-head .fc-widget-header {
  margin-right: 0 !important; }

.calendar {
  z-index: -100; }

header {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; }

.fc-toolbar-title {
  color: var(--text) !important; }

.fc-view.fc-dayGridDay-view {
  max-width: 100%;
  margin: 0;
  padding: 0; }

.fc-button.fc-today-button::first-letter {
  text-transform: capitalize; }

#editDescription {
  max-height: 250px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word; }

.styled-dropdown {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  padding: 12px;
  margin: 15px 0;
  border-radius: 12px; }
  .styled-dropdown:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .styled-dropdown:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  @media (max-width: 768px) {
    .styled-dropdown {
      min-width: auto;
      max-width: 90px;
      font-size: 0.85rem; } }

.fc-scrollgrid,
.fc-scrollgrid > tbody > tr > td,
.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard .fc-scrollgrid > tbody > tr > td,
.fc-daygrid,
.fc-daygrid-day,
.fc-daygrid-body,
.fc-daygrid-body table,
.fc-daygrid-body td {
  border-radius: 0 !important; }

td > img[src*="logo.png"] {
  display: none !important; }

td:has(> img[src*="logo.png"]) {
  display: none !important; }

.fc {
  background-color: var(--bg-0); }

.fc .fc-view-harness {
  background-color: var(--bg-0); }

.fc-theme-standard td,
.fc-theme-standard th {
  background-color: var(--bg-0);
  border-color: var(--ui-border); }

.fc-theme-standard .fc-scrollgrid {
  border-color: var(--ui-border); }

.fc-daygrid-day {
  background-color: var(--bg-0); }
  .fc-daygrid-day:nth-child(even) {
    background-color: var(--bg-1); }

.fc .fc-col-header-cell {
  background-color: var(--bg-2);
  color: var(--text);
  border-bottom: none; }

.fc .fc-daygrid-day-number {
  color: var(--text); }

.fc .fc-daygrid-body {
  border-top: none; }

.fc .fc-day-today {
  background-color: color-mix(in srgb, var(--pref-accent-color) 15%, var(--bg-0) 85%) !important; }

.fc .fc-button {
  background-color: var(--bg-2) !important;
  border-color: var(--ui-border) !important;
  color: var(--text) !important;
  font-family: var(--pref-font-family);
  transition: background-color 0.2s, border-color 0.2s; }
  .fc .fc-button:hover {
    background-color: var(--bg-3) !important;
    border-color: var(--pref-accent-color) !important;
    color: var(--text-strong, var(--text)) !important; }
  .fc .fc-button:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pref-accent-color) 40%, transparent 60%) !important; }
  .fc .fc-button:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--pref-accent-color) !important;
  border-color: var(--pref-accent-color) !important;
  color: var(--pref-bg-color) !important; }

.fc-event-break {
  background-color: var(--bg-3) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important; }

.fc-daygrid-day.break-day {
  background-color: var(--bg-2) !important; }

.fc-school-holiday {
  background-color: color-mix(in srgb, var(--pref-accent-color) 25%, var(--bg-2) 75%) !important;
  border-color: color-mix(in srgb, var(--pref-accent-color) 40%, var(--ui-border) 60%) !important;
  color: var(--text-strong, var(--text)) !important; }

.fc-event.priority-p0 {
  background-color: color-mix(in srgb, var(--priority-p0, #dc2626) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p0, #dc2626) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.fc-event.priority-p1 {
  background-color: color-mix(in srgb, var(--priority-p1, #ea580c) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p1, #ea580c) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.fc-event.priority-p2 {
  background-color: color-mix(in srgb, var(--priority-p2, #ca8a04) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p2, #ca8a04) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.fc-event.priority-p3 {
  background-color: color-mix(in srgb, var(--priority-p3, #16a34a) 85%, var(--bg-0) 15%) !important;
  border-color: color-mix(in srgb, var(--priority-p3, #16a34a) 65%, var(--bg-0) 35%) !important;
  color: var(--pref-bg-color) !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }

.event-priority-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
  color: var(--pref-bg-color);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--pref-bg-color) 30%, transparent 70%); }
  .event-priority-badge.p0 {
    background: color-mix(in srgb, var(--priority-p0, #dc2626) 85%, var(--bg-0) 15%); }
  .event-priority-badge.p1 {
    background: color-mix(in srgb, var(--priority-p1, #ea580c) 85%, var(--bg-0) 15%); }
  .event-priority-badge.p2 {
    background: color-mix(in srgb, var(--priority-p2, #ca8a04) 85%, var(--bg-0) 15%); }
  .event-priority-badge.p3 {
    background: color-mix(in srgb, var(--priority-p3, #16a34a) 85%, var(--bg-0) 15%); }

.calendar-dashboard-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--bg-1); }

.dashboard-tab-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  height: auto;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .dashboard-tab-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .dashboard-tab-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .dashboard-tab-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .dashboard-tab-btn {
      height: 44px; } }
  .dashboard-tab-btn:hover {
    transform: none;
    opacity: 1;
    color: var(--text);
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .dashboard-tab-btn:focus-visible {
    outline: none;
    border-color: var(--pref-accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pref-accent-color) 28%, transparent 72%); }
  .dashboard-tab-btn.active {
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    background: color-mix(in srgb, var(--pref-accent-color) 84%, var(--bg-1) 16%);
    box-shadow: none; }

.calendar-issues-panel {
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent 25%);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 82%, var(--pref-accent-color) 18%), color-mix(in srgb, var(--bg-1) 95%, var(--pref-accent-color) 5%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent 90%), 0 12px 28px color-mix(in srgb, #000 28%, transparent 72%);
  color: var(--text); }

.calendar-source-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px; }

.calendar-source-chip {
  border: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent 15%);
  background: color-mix(in srgb, var(--bg-1) 90%, #000 10%);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .calendar-source-chip.active, .calendar-source-chip:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--pref-accent-color) 55%, var(--ui-border) 45%);
    background: color-mix(in srgb, var(--pref-accent-color) 18%, var(--bg-1) 82%); }

.calendar-cs-pathway-panel {
  margin-top: 8px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
  background: color-mix(in srgb, var(--bg-2) 92%, var(--pref-accent-color) 8%); }

.calendar-cs-pathway-header {
  margin-bottom: 14px; }

.calendar-cs-pathway-title {
  margin: 0 0 6px;
  font-size: 1.25rem; }

.calendar-cs-pathway-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45; }

.calendar-cs-pathway-empty {
  margin: 0 0 12px;
  color: var(--text-muted); }

.calendar-cs-pathway-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-height: min(52vh, 520px);
  overflow: auto; }

.calendar-cs-pathway-task {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent 20%);
  background: color-mix(in srgb, var(--bg-1) 94%, #000 6%); }

.calendar-cs-pathway-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--text-muted); }

.calendar-cs-pathway-task-priority {
  font-weight: 800;
  letter-spacing: 0.04em; }

.calendar-cs-pathway-task-title {
  display: block;
  margin-bottom: 4px; }

.calendar-cs-pathway-task-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4; }

.calendar-cs-pathway-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px; }

.fc-event-cs-pathway {
  border-left: 3px solid #4ecca3 !important; }

.calendar-controls-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: minmax(0, auto);
  align-items: start;
  gap: 10px;
  margin: 14px 0 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 88%, var(--pref-accent-color) 12%), color-mix(in srgb, var(--bg-1) 96%, var(--pref-accent-color) 4%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent 92%), 0 10px 24px color-mix(in srgb, #000 22%, transparent 78%); }

.calendar-controls-row input,
.calendar-controls-row select,
.issues-controls-row input,
.issues-controls-row select,
.issue-form input,
.issue-form textarea,
.issue-form select,
.issue-card-footer select,
.kanban-item select,
#threads-list input,
#threads-list select {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent 15%);
  background: color-mix(in srgb, var(--bg-1) 90%, #000 10%);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; }
  .calendar-controls-row input:focus,
  .calendar-controls-row select:focus,
  .issues-controls-row input:focus,
  .issues-controls-row select:focus,
  .issue-form input:focus,
  .issue-form textarea:focus,
  .issue-form select:focus,
  .issue-card-footer select:focus,
  .kanban-item select:focus,
  #threads-list input:focus,
  #threads-list select:focus {
    border-color: color-mix(in srgb, var(--pref-accent-color) 60%, var(--ui-border) 40%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pref-accent-color) 20%, transparent 80%); }

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%; }

.filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-left: 2px; }

.filter-field--date input {
  min-width: 0;
  width: 100%; }

.calendar-controls-row input::placeholder,
.issues-controls-row input::placeholder,
.issue-form input::placeholder,
.issue-form textarea::placeholder,
#threads-list input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 82%, transparent 18%); }

.calendar-issue-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent 15%);
  background: color-mix(in srgb, var(--bg-1) 90%, #000 10%);
  color: var(--text-muted);
  font-weight: 700; }

.calendar-issue-filter-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--pref-accent-color); }

.calendar-issue-filter-toggle span {
  white-space: nowrap; }

.calendar-controls-row .calendar-issue-filter-toggle {
  grid-column: span 2; }

.calendar-stage {
  box-sizing: border-box;
  z-index: 0;
  width: 100%; }

#calendar-threads-panel {
  margin-top: 14px; }

.threads-panel-empty,
.issues-empty {
  border: 1px dashed color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
  border-radius: 12px;
  padding: 16px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-0) 92%, var(--pref-accent-color) 8%);
  text-align: center; }

.calendar-issues-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px; }

.calendar-issues-title {
  margin: 0;
  color: var(--text-strong, var(--text));
  letter-spacing: 0.01em; }

.calendar-issues-subtitle {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem; }

.issues-controls-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: minmax(0, auto);
  align-items: start;
  gap: 10px;
  margin-bottom: 12px; }

.issue-form textarea {
  min-height: 130px;
  resize: vertical; }

.issues-subtabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 12px; }

.issues-subtab-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 34px;
  border-radius: 8px;
  padding: 6px 14px;
  background: var(--bg-2);
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
  .issues-subtab-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .issues-subtab-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .issues-subtab-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .issues-subtab-btn {
      height: 44px; } }
  .issues-subtab-btn:hover {
    transform: none;
    opacity: 1;
    background: var(--panel-mid);
    border-color: var(--pref-accent-color);
    color: var(--text); }
  .issues-subtab-btn.active {
    background: color-mix(in srgb, var(--pref-accent-color) 84%, var(--bg-1) 16%);
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    box-shadow: none; }

.issues-subpanel {
  border: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent 30%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-0) 78%, var(--pref-accent-color) 22%);
  padding: 12px;
  overflow: visible; }

.issue-form {
  display: flex;
  flex-direction: column;
  gap: 10px; }

.issue-thread-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--pref-accent-color) 20%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-0) 88%, var(--pref-accent-color) 12%); }

.issue-thread-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; }

.issue-thread-panel-title {
  margin: 0;
  font-size: 1rem; }

.issue-thread-count {
  font-size: 0.9rem;
  color: var(--text-2); }

.issue-comments-list {
  display: grid;
  gap: 10px; }

.issue-comment-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-0) 72%, var(--pref-accent-color) 28%);
  border: 1px solid color-mix(in srgb, var(--pref-accent-color) 18%, transparent); }

.issue-comment-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; }

.issue-comment-body {
  white-space: pre-wrap;
  line-height: 1.5; }

.issue-comment-label {
  font-weight: 700; }

.issue-comment-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pref-accent-color) 20%, transparent);
  padding: 12px;
  background: color-mix(in srgb, var(--bg-0) 84%, var(--pref-accent-color) 16%);
  color: inherit; }

.issue-thread-composer-actions {
  display: flex;
  justify-content: flex-end; }

.issue-thread-latest {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.45; }

.issue-thread-card {
  border-left: 4px solid color-mix(in srgb, var(--pref-accent-color) 70%, transparent); }

.issue-form > div > label,
.issue-form-grid label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--text-strong, var(--text)); }

.issue-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px; }

.issue-markdown-preview {
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent 24%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-1) 86%, #000 14%);
  min-height: 52px;
  padding: 12px;
  color: var(--text-muted); }

.issue-markdown-empty {
  margin: 0;
  font-style: italic; }

.issue-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px; }

.calendar-issue-action-btn {
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent 25%);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  color: var(--text);
  background: var(--bg-2); }
  .calendar-issue-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px color-mix(in srgb, #000 28%, transparent 72%); }
  .calendar-issue-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }
  .calendar-issue-action-btn.primary, .hallpass-buttons button.calendar-issue-action-btn {
    border-color: color-mix(in srgb, var(--pref-accent-color) 75%, transparent 25%);
    background: color-mix(in srgb, var(--pref-accent-color) 75%, var(--bg-2) 25%);
    color: var(--pref-bg-color); }
  .calendar-issue-action-btn.secondary {
    background: color-mix(in srgb, var(--bg-3) 92%, #000 8%);
    color: var(--text-strong, var(--text)); }
  .calendar-issue-action-btn.danger {
    border-color: color-mix(in srgb, #ef4444 80%, transparent 20%);
    background: color-mix(in srgb, #dc2626 85%, #0f172a 15%);
    color: #fff; }

.issues-list {
  display: grid;
  gap: 10px; }

#threads-list {
  display: grid;
  gap: 12px; }

.issue-card {
  border: 1px solid color-mix(in srgb, var(--ui-border) 70%, transparent 30%);
  border-left: 4px solid color-mix(in srgb, var(--pref-accent-color) 82%, transparent 18%);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 90%, var(--pref-accent-color) 10%), color-mix(in srgb, var(--bg-0) 94%, var(--pref-accent-color) 6%));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent 92%), 0 10px 24px color-mix(in srgb, #000 18%, transparent 82%);
  padding: 14px; }

.issue-thread-card {
  border-left-color: color-mix(in srgb, #60a5fa 72%, var(--pref-accent-color) 28%); }

.issue-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px; }

.issue-link-btn {
  border: 0;
  background: transparent;
  color: var(--text-strong, var(--text));
  cursor: pointer;
  padding: 0;
  text-align: left; }

.issue-card-title {
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-wrap: balance; }

.issue-card-note,
.issue-author,
.issue-meta {
  color: var(--text-muted);
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.45; }

.issue-card-note {
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%); }

.issue-author,
.issue-meta {
  font-size: 0.85rem; }

.issue-card-badge-row,
.issue-tags,
.issue-card-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; }

.issue-card-badge-row {
  justify-content: flex-end; }

.issue-tags {
  margin-top: 12px; }

.issue-tag {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 78%, transparent 22%);
  background: color-mix(in srgb, var(--bg-2) 88%, #000 12%);
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text) 12%);
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2; }

.issue-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px; }

.issue-card-footer select {
  max-width: 180px; }

.issue-pill {
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent 25%);
  background: color-mix(in srgb, var(--bg-2) 82%, #000 18%);
  color: var(--text-strong, var(--text)); }

.issue-pill.open {
  background: color-mix(in srgb, var(--pref-accent-color) 46%, var(--bg-1) 54%);
  border-color: color-mix(in srgb, var(--pref-accent-color) 66%, var(--ui-border) 34%);
  color: var(--pref-bg-color); }

.issue-pill.in-progress {
  background: color-mix(in srgb, #3b82f6 70%, var(--bg-1) 30%);
  border-color: color-mix(in srgb, #3b82f6 85%, var(--ui-border) 15%);
  color: #fff; }

.issue-pill.blocked {
  background: color-mix(in srgb, #ef4444 74%, var(--bg-1) 26%);
  border-color: color-mix(in srgb, #ef4444 85%, var(--ui-border) 15%);
  color: #fff; }

.issue-pill.done {
  background: color-mix(in srgb, #22c55e 72%, var(--bg-1) 28%);
  border-color: color-mix(in srgb, #22c55e 85%, var(--ui-border) 15%);
  color: #fff; }

.issue-pill.critical,
.issue-pill.p0 {
  background: color-mix(in srgb, var(--priority-p0, #dc2626) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p0, #dc2626) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.issue-pill.high,
.issue-pill.p1 {
  background: color-mix(in srgb, var(--priority-p1, #ea580c) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p1, #ea580c) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.issue-pill.medium, .hallpass-buttons button.issue-pill,
.issue-pill.p2 {
  background: color-mix(in srgb, var(--priority-p2, #ca8a04) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p2, #ca8a04) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.issue-pill.low,
.issue-pill.p3 {
  background: color-mix(in srgb, var(--priority-p3, #16a34a) 86%, var(--bg-0) 14%);
  border-color: color-mix(in srgb, var(--priority-p3, #16a34a) 74%, var(--ui-border) 26%);
  color: var(--pref-bg-color); }

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px; }

.kanban-column {
  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent 28%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-1) 88%, var(--pref-accent-color) 12%);
  padding: 10px;
  min-height: 220px; }

.kanban-column-title {
  margin: 0 0 10px;
  color: var(--text-strong, var(--text));
  font-size: 1.06rem; }

.kanban-item {
  border: 1px solid color-mix(in srgb, var(--ui-border) 74%, transparent 26%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-0) 90%, var(--pref-accent-color) 10%);
  padding: 10px;
  margin-bottom: 10px; }

.issues-empty {
  border: 1px dashed color-mix(in srgb, var(--ui-border) 70%, transparent 30%);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 16px;
  text-align: center; }

.issue-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000 55%, transparent 45%);
  padding: 20px; }
  .issue-modal.open {
    display: flex; }

.issue-modal-content {
  width: min(760px, 95vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent 24%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 78%, var(--pref-accent-color) 22%), color-mix(in srgb, var(--bg-0) 92%, var(--pref-accent-color) 8%));
  padding: 14px; }

.issue-modal-header,
.issue-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; }

.issue-modal-title {
  margin: 0; }

.issue-modal-close {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.7rem;
  cursor: pointer;
  line-height: 1; }

.issue-modal-meta {
  margin: 8px 0 10px;
  color: var(--text-muted); }

.calendar-event-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: color-mix(in srgb, #000 55%, transparent 45%);
  backdrop-filter: blur(8px); }
  .calendar-event-modal.open {
    display: flex; }

.calendar-event-modal-content {
  position: relative;
  width: min(760px, 95vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent 24%);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 78%, var(--pref-accent-color) 22%), color-mix(in srgb, var(--bg-0) 92%, var(--pref-accent-color) 8%));
  padding: 14px; }

.calendar-event-modal-body {
  display: grid;
  gap: 10px; }

.calendar-event-modal-title {
  margin: 0 0 8px;
  color: var(--text-strong, var(--text));
  font-size: 1.8rem;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%; }

.calendar-event-modal-label {
  display: block;
  margin-top: 2px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-strong, var(--text)); }

.calendar-event-modal-field {
  width: 100%;
  min-height: 46px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent 18%);
  background: color-mix(in srgb, var(--bg-1) 88%, #000 12%);
  color: var(--text);
  box-sizing: border-box; }

.calendar-event-modal-display {
  margin: 0;
  white-space: pre-wrap; }

.calendar-event-modal-description {
  min-height: 110px; }

.issue-form-date-hidden {
  display: none; }

.calendar-event-modal-doc-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  overflow-wrap: anywhere; }

.calendar-event-modal-doc-empty {
  color: var(--text-muted); }

.calendar-event-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease; }
  .calendar-event-modal-close:hover {
    color: var(--pref-accent-color); }

.calendar-event-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px; }

.calendar-event-modal-button {
  border: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent 25%);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  color: var(--text);
  background: var(--bg-2); }
  .calendar-event-modal-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px color-mix(in srgb, #000 28%, transparent 72%); }
  .calendar-event-modal-button.primary, .hallpass-buttons button.calendar-event-modal-button {
    border-color: color-mix(in srgb, var(--pref-accent-color) 75%, transparent 25%);
    background: color-mix(in srgb, var(--pref-accent-color) 75%, var(--bg-2) 25%);
    color: var(--pref-bg-color); }
  .calendar-event-modal-button.warning {
    border-color: color-mix(in srgb, #f59e0b 70%, transparent 30%);
    background: color-mix(in srgb, #f59e0b 80%, var(--bg-2) 20%);
    color: #111827; }
  .calendar-event-modal-button.danger {
    border-color: color-mix(in srgb, #ef4444 80%, transparent 20%);
    background: color-mix(in srgb, #dc2626 85%, #0f172a 15%);
    color: #fff; }

.reply-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, #000 55%, transparent 45%);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.2s ease-in-out; }
  .reply-modal:not([aria-hidden="true"]) {
    display: flex; }

.reply-modal-content {
  position: relative;
  width: min(600px, 95vw);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--ui-border) 76%, transparent 24%);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 78%, var(--pref-accent-color) 22%), color-mix(in srgb, var(--bg-0) 92%, var(--pref-accent-color) 8%));
  padding: 16px;
  box-shadow: 0 20px 40px color-mix(in srgb, #000 32%, transparent 68%); }

.reply-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent 50%); }

#reply-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-strong, var(--text)); }

.reply-modal-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.7rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.18s ease;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .reply-modal-close:hover {
    color: var(--pref-accent-color); }

#reply-parent-preview {
  border: 1px solid color-mix(in srgb, var(--ui-border) 65%, transparent 35%);
  border-radius: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--bg-0) 88%, var(--pref-accent-color) 12%);
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5; }
  #reply-parent-preview strong {
    display: block;
    color: var(--text-strong, var(--text));
    margin-bottom: 6px;
    font-weight: 700; }

#reply-modal-text {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent 15%);
  background: color-mix(in srgb, var(--bg-1) 90%, #000 10%);
  color: var(--text);
  padding: 12px;
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  margin-bottom: 12px; }
  #reply-modal-text:focus {
    border-color: var(--pref-accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pref-accent-color) 25%, transparent 75%); }
  #reply-modal-text::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent 18%); }

.reply-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 50%, transparent 50%); }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98); }
  to {
    opacity: 1;
    transform: scale(1); } }
@media (max-width: 1100px) {
  .kanban-board {
    grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 900px) {
  .calendar-controls-row,
  .issues-controls-row {
    grid-template-columns: 1fr 1fr; }

  .issue-form-grid {
    grid-template-columns: 1fr; }

  .issue-card-footer {
    flex-direction: column;
    align-items: stretch; }

  .issue-card-footer select {
    max-width: none; } }
@media (max-width: 680px) {
  .calendar-issues-header {
    flex-direction: column;
    align-items: stretch; }

  .calendar-controls-row,
  .issues-controls-row,
  .kanban-board {
    grid-template-columns: 1fr; }

  .issues-subtabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .calendar-issue-filter-toggle {
    grid-column: auto; } }
#periodFilterDropdown {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-left: 8px; }
  #periodFilterDropdown:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  #periodFilterDropdown:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  @media (max-width: 768px) {
    #periodFilterDropdown {
      min-width: auto;
      max-width: 90px;
      font-size: 0.85rem; } }

.fc-event-appointment {
  display: flex;
  flex-direction: column;
  padding: 2px 4px;
  line-height: 1.2;
  overflow: hidden; }

.fc-event-individual {
  font-weight: bold;
  font-size: 0.85em;
  opacity: 0.9; }

.fc-event-title-custom {
  font-size: 0.9em; }

.fc-event-group {
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.85; }

.fc-event {
  color: var(--text); }

.fc-event-title,
.fc-event-time {
  color: inherit; }

.topics-browser [data-topics-title-heading][hidden],
.topics-browser [data-topics-body-section][hidden] {
  display: none; }
.topics-browser__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem; }
.topics-browser__filters {
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 0.75rem;
  padding: 0.75rem;
  min-width: 0; }
.topics-browser__search h2 {
  margin-top: 0; }
.topics-browser__search-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; }
  .topics-browser__search-input input {
    box-sizing: border-box;
    flex: 1 1 16rem;
    width: 100%;
    min-width: 0; }
.topics-browser__count {
  font-size: inherit;
  font-weight: inherit; }
.topics-browser__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-height: 12rem;
  min-width: 0;
  overflow-y: auto;
  padding: 0.75rem; }
  .topics-browser__categories label {
    max-width: 100%;
    overflow-wrap: break-word; }
.topics-browser__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem; }
.topics-browser__category-disclosure summary {
  cursor: pointer;
  padding: 0.5rem 0; }
.topics-browser__category-disclosure summary h3 {
  display: inline;
  margin: 0; }
.topics-browser__accessible-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; }
.topics-browser__primary {
  max-height: none;
  border: 2px solid rgba(128, 128, 128, 0.6);
  border-radius: 0.75rem; }
  .topics-browser__primary label {
    font-weight: 600;
    padding: 0.35rem; }
.topics-browser mark {
  background-color: #ffdf80;
  color: #1a1a1a;
  padding: 0 0.1em; }
.topics-browser__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; }
.topics-browser__card {
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 0.75rem;
  padding: 1rem; }
  .topics-browser__card h2 {
    font-size: 1.15rem;
    margin-top: 0; }
  .topics-browser__card[hidden] {
    display: none; }
.topics-browser__metadata {
  font-size: 0.85rem; }
.topics-browser--list .topics-browser__results {
  grid-template-columns: 1fr; }

.topics-document-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem; }

@media (max-width: 480px) {
  .topics-browser__results {
    grid-template-columns: 1fr; } }
.announcement-calendar {
  margin: 20px 0 28px;
  color: #F0F0F0;
  font-family: var(--pref-font-family);
  /* ── toolbar: version tabs, role + data-source toggles ─────────── */
  /* ── V1: attach-event panel ───────────────────────────────────── */
  /* ── V2: quick syntax detection ───────────────────────────────── */
  /* ── Week view toggle (the strip itself is ocs__calendar) ─────── */
  /* ── phones ───────────────────────────────────────────────────── */ }
  .announcement-calendar .announcement-calendar-toolbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px; }
  .announcement-calendar .announcement-calendar-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; }
    .announcement-calendar .announcement-calendar-versions button {
      padding: 5px 10px;
      border: 1px solid #2A2D2D;
      border-radius: 999px;
      background: transparent;
      color: #aaa;
      font: inherit;
      font-size: 12px;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
      font-size: 13px; }
      .announcement-calendar .announcement-calendar-versions button:hover:not(:disabled) {
        border-color: #4CAFEF;
        color: #F0F0F0; }
      .announcement-calendar .announcement-calendar-versions button:disabled {
        opacity: 0.45;
        cursor: not-allowed; }
      .announcement-calendar .announcement-calendar-versions button b {
        color: #4CAFEF;
        margin-right: 4px; }
      .announcement-calendar .announcement-calendar-versions button[aria-selected="true"] {
        background: rgba(76, 175, 239, 0.15);
        border-color: #4CAFEF;
        color: #F0F0F0; }
  .announcement-calendar .announcement-calendar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; }
  .announcement-calendar .announcement-calendar-segment {
    display: inline-flex;
    align-items: center;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    overflow: hidden; }
    .announcement-calendar .announcement-calendar-segment button {
      padding: 4px 10px;
      border: 0;
      background: transparent;
      color: #aaa;
      font: inherit;
      font-size: 12px;
      cursor: pointer; }
      .announcement-calendar .announcement-calendar-segment button[aria-checked="true"] {
        background: #4CAFEF;
        color: #0b1320;
        font-weight: 600; }
      .announcement-calendar .announcement-calendar-segment button:disabled {
        opacity: 0.45;
        cursor: not-allowed; }
  .announcement-calendar .announcement-calendar-segment-label {
    padding: 0 4px 0 10px;
    color: #aaa;
    font-size: 11px; }
  .announcement-calendar .announcement-calendar-reset {
    padding: 5px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
    .announcement-calendar .announcement-calendar-reset:hover:not(:disabled) {
      border-color: #4CAFEF;
      color: #F0F0F0; }
    .announcement-calendar .announcement-calendar-reset:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
  .announcement-calendar .announcement-calendar-summary {
    margin: 0 0 12px;
    color: #aaa;
    font-size: 13px;
    line-height: 1.5; }
  .announcement-calendar .announcement-calendar-tools {
    display: flex;
    gap: 8px;
    margin-top: 8px; }
    .announcement-calendar .announcement-calendar-tools:empty {
      display: none; }
  .announcement-calendar .calendar-attach-toggle {
    padding: 5px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px; }
    .announcement-calendar .calendar-attach-toggle:hover:not(:disabled) {
      border-color: #4CAFEF;
      color: #F0F0F0; }
    .announcement-calendar .calendar-attach-toggle:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
    .announcement-calendar .calendar-attach-toggle.is-active {
      background: rgba(76, 175, 239, 0.15);
      border-color: #4CAFEF;
      color: #F0F0F0; }
  .announcement-calendar .calendar-attach-panel,
  .announcement-calendar .quick-syntax {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed rgba(76, 175, 239, 0.5);
    border-radius: 8px;
    background: rgba(76, 175, 239, 0.04); }
    .announcement-calendar .calendar-attach-panel[hidden],
    .announcement-calendar .quick-syntax[hidden] {
      display: none; }
  .announcement-calendar .calendar-attach-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600; }
  .announcement-calendar .calendar-attach-close {
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 18px;
    cursor: pointer; }
  .announcement-calendar .calendar-attach-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px; }
  .announcement-calendar .calendar-field--full {
    grid-column: 1 / -1; }
  .announcement-calendar .calendar-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #aaa;
    font-size: 11px; }
    .announcement-calendar .calendar-field input,
    .announcement-calendar .calendar-field select {
      padding: 6px 8px;
      border: 1px solid #2A2D2D;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.04);
      color: #F0F0F0;
      font: inherit;
      font-size: 13px;
      color-scheme: dark; }
  .announcement-calendar .calendar-quick-dates,
  .announcement-calendar .calendar-choice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px; }
  .announcement-calendar .calendar-quick-date {
    padding: 5px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    font-size: 11px; }
    .announcement-calendar .calendar-quick-date:hover:not(:disabled) {
      border-color: #4CAFEF;
      color: #F0F0F0; }
    .announcement-calendar .calendar-quick-date:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
  .announcement-calendar .calendar-choice-label {
    min-width: 52px;
    color: #aaa;
    font-size: 11px; }
  .announcement-calendar .calendar-choice-hint {
    color: #aaa;
    font-size: 11px;
    font-style: italic; }
  .announcement-calendar .calendar-period-option {
    padding: 5px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    min-width: 32px; }
    .announcement-calendar .calendar-period-option:hover:not(:disabled) {
      border-color: #4CAFEF;
      color: #F0F0F0; }
    .announcement-calendar .calendar-period-option:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
    .announcement-calendar .calendar-period-option[aria-pressed="true"] {
      background: rgba(76, 175, 239, 0.15);
      border-color: #4CAFEF;
      color: #F0F0F0;
      font-weight: 700; }
  .announcement-calendar .calendar-priority-option {
    padding: 5px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
    .announcement-calendar .calendar-priority-option:hover:not(:disabled) {
      border-color: #4CAFEF;
      color: #F0F0F0; }
    .announcement-calendar .calendar-priority-option:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
    .announcement-calendar .calendar-priority-option[aria-checked="true"] {
      background: rgba(76, 175, 239, 0.15);
      border-color: #4CAFEF;
      color: #F0F0F0;
      font-weight: 700; }
  .announcement-calendar .calendar-attach-hint {
    margin: 8px 0 0;
    color: #aaa;
    font-size: 12px; }
  .announcement-calendar .calendar-attach-error,
  .announcement-calendar .quick-syntax-error {
    margin: 6px 0 0;
    color: #E53E3E;
    font-size: 12px; }
    .announcement-calendar .calendar-attach-error[hidden],
    .announcement-calendar .quick-syntax-error[hidden] {
      display: none; }
  .announcement-calendar .quick-syntax-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px; }
  .announcement-calendar .quick-syntax-title {
    font-size: 13px;
    font-weight: 600; }
  .announcement-calendar .quick-syntax-week {
    flex: 1;
    color: #aaa;
    font-size: 12px; }
  .announcement-calendar .quick-syntax-example {
    padding: 5px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    font-size: 11px; }
    .announcement-calendar .quick-syntax-example:hover:not(:disabled) {
      border-color: #4CAFEF;
      color: #F0F0F0; }
    .announcement-calendar .quick-syntax-example:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
  .announcement-calendar .quick-syntax-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; }
  .announcement-calendar .quick-syntax-empty {
    color: #aaa;
    font-size: 12px; }
  .announcement-calendar .quick-syntax-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid #4CAFEF;
    border-radius: 8px;
    background: rgba(76, 175, 239, 0.1);
    color: #F0F0F0;
    font: inherit;
    text-align: left;
    cursor: pointer; }
    .announcement-calendar .quick-syntax-chip[aria-pressed="false"] {
      opacity: 0.45;
      border-style: dashed; }
      .announcement-calendar .quick-syntax-chip[aria-pressed="false"] .quick-syntax-chip-title {
        text-decoration: line-through; }
  .announcement-calendar .quick-syntax-chip-day {
    color: #4CAFEF;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase; }
  .announcement-calendar .quick-syntax-chip-title {
    font-size: 13px;
    font-weight: 600; }
  .announcement-calendar .quick-syntax-chip-meta {
    color: #aaa;
    font-size: 11px; }
  .announcement-calendar .quick-syntax-help {
    margin-top: 8px;
    color: #aaa;
    font-size: 12px; }
    .announcement-calendar .quick-syntax-help summary {
      cursor: pointer; }
    .announcement-calendar .quick-syntax-help ul {
      margin: 6px 0 0;
      padding-left: 18px; }
    .announcement-calendar .quick-syntax-help code, .announcement-calendar .quick-syntax-help kbd {
      font-size: 11px; }
  .announcement-calendar .announcement-calendar-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px; }
  .announcement-calendar .week-view-toggle {
    padding: 5px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px; }
    .announcement-calendar .week-view-toggle:hover:not(:disabled) {
      border-color: #4CAFEF;
      color: #F0F0F0; }
    .announcement-calendar .week-view-toggle:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
    .announcement-calendar .week-view-toggle[aria-pressed="true"] {
      background: rgba(76, 175, 239, 0.15);
      border-color: #4CAFEF;
      color: #F0F0F0; }
  .announcement-calendar [data-slot="week-view"][hidden] {
    display: none; }
  @media (max-width: 640px) {
    .announcement-calendar .announcement-calendar-toolbar {
      flex-direction: column;
      align-items: stretch; }
    .announcement-calendar .calendar-attach-grid {
      grid-template-columns: 1fr 1fr; }
    .announcement-calendar .calendar-field--wide {
      grid-column: 1 / -1; }
    .announcement-calendar .week-view-toggle span {
      display: none; } }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

#toggle-response-btn {
  margin-top: auto;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: green !important; }
  #toggle-response-btn:hover {
    background-color: darkgreen !important; }

#msger-send-btn {
  margin-top: auto;
  padding: 10px;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: blue !important; }
  #msger-send-btn:hover {
    background-color: darkblue !important; }

.msg-info,
.msg-text {
  color: black; }

:root {
  --body-bg: linear-gradient(135deg, white 0%, gray 100%);
  --msger-bg: white;
  --border: 2px solid #ddd;
  --left-msg-bg: #ececec;
  --right-msg-bg: #579ffb; }

.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: fill;
  margin: auto auto;
  height: calc(867px);
  border: var(--border);
  border-radius: 12px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2); }

.msger-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: var(--border);
  background: #eee;
  color: gray; }

.msger-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px; }

.msger-chat::-webkit-scrollbar {
  width: 6px; }

.msger-chat::-webkit-scrollbar-track {
  background: #ddd; }

.msger-chat::-webkit-scrollbar-thumb {
  background: #bdbdbd; }

.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: auto; }

.msg:last-of-type {
  margin: auto; }

.msg-img {
  width: 64px;
  height: 64px;
  margin-right: 0.2rem;
  background: #ddd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%; }

.msg-bubble {
  max-width: 450px;
  padding: 15px;
  border-radius: 12px;
  background: var(--left-msg-bg); }

.msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: gap; }

.msg-info-name {
  margin-right: 2rem;
  font-weight: bold; }

.msg-info-time {
  font-size: 0.85em; }

.left-msg .msg-bubble {
  border-bottom-left-radius: 0; }

.right-msg {
  flex-direction: row-reverse; }

.right-msg .msg-bubble {
  background: var(--right-msg-bg);
  color: #fff;
  border-bottom-right-radius: 0; }

.right-msg .msg-img {
  margin: 0 0 0 1rem; }

.msger-inputarea {
  display: flex;
  padding: 10px;
  border-top: var(--border);
  background: #eee; }

.msger-inputarea * {
  padding: 10px;
  border: none;
  border-radius: 12px;
  font-size: 1em; }

.msger-input {
  flex: 1;
  background: #ddd; }

.msger-send-btn {
  margin-left: 0.2rem;
  background: #00c441;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s; }

.msger-send-btn:hover {
  background: #066320; }

.msger-chat {
  background-color: #fcfcfe;
  background-image: url("https://w.wallhaven.cc/full/vm/wallhaven-vmydxl.jpg"); }

/**
 * Code Runner Styles
 * Interactive code editor with execution capabilities
 */
/**
 * Runner Base Styles
 * Shared styles for code-runner and ui-runner
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
.code-runner-container {
  margin-bottom: 2rem; }
  .code-runner-container .challenge-box {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--panel);
    border: 2px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
    .code-runner-container .challenge-box h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .code-runner-container .challenge-box p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
  .code-runner-container .editor-container {
    margin-bottom: 20px; }
  .code-runner-container .CodeMirror {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
  .code-runner-container .CodeMirror-gutters {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
  .code-runner-container .CodeMirror-selectedtext {
    background: var(--pref-accent-color, #3b82f6) !important;
    color: #ffffff !important; }
  .code-runner-container .output-container {
    margin-bottom: 20px; }
  .code-runner-container .control-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px 10px 0 0;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
    .code-runner-container .control-panel span {
      font-size: 0.9rem;
      color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .code-runner-container .control-panel {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem; } }
  .code-runner-container .ocs__btn.utility.run, .code-runner-container .utility.run.iridescent {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color); }
    .code-runner-container .ocs__btn.utility.run:hover, .code-runner-container .utility.run.iridescent:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .ocs__btn.utility.run:focus, .code-runner-container .utility.run.iridescent:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .code-runner-container .ocs__btn.utility.run:hover, .code-runner-container .utility.run.iridescent:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .code-runner-container .ocs__btn.utility.run, .code-runner-container .utility.run.iridescent {
        height: 44px; } }
    @media (max-width: 768px) {
      .code-runner-container .ocs__btn.utility.run, .code-runner-container .utility.run.iridescent {
        margin-left: 0.25rem;
        width: 44px; } }
    .code-runner-container .ocs__btn.utility.run:hover, .code-runner-container .utility.run.iridescent:hover {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      opacity: 0.85;
      transform: scale(1.05); }
  .code-runner-container .ocs__btn.utility.copy, .code-runner-container .utility.copy.iridescent,
  .code-runner-container .ocs__btn.utility.clear,
  .code-runner-container .utility.clear.iridescent {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .code-runner-container .ocs__btn.utility.copy:hover, .code-runner-container .utility.copy.iridescent:hover,
    .code-runner-container .ocs__btn.utility.clear:hover,
    .code-runner-container .utility.clear.iridescent:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .ocs__btn.utility.copy:focus, .code-runner-container .utility.copy.iridescent:focus,
    .code-runner-container .ocs__btn.utility.clear:focus,
    .code-runner-container .utility.clear.iridescent:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .code-runner-container .ocs__btn.utility.copy:hover, .code-runner-container .utility.copy.iridescent:hover,
    .code-runner-container .ocs__btn.utility.clear:hover,
    .code-runner-container .utility.clear.iridescent:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .code-runner-container .ocs__btn.utility.copy, .code-runner-container .utility.copy.iridescent,
      .code-runner-container .ocs__btn.utility.clear,
      .code-runner-container .utility.clear.iridescent {
        height: 44px; } }
    @media (max-width: 768px) {
      .code-runner-container .ocs__btn.utility.copy, .code-runner-container .utility.copy.iridescent,
      .code-runner-container .ocs__btn.utility.clear,
      .code-runner-container .utility.clear.iridescent {
        margin-left: 0.25rem;
        width: 44px; } }
  .code-runner-container .languageSelect,
  .code-runner-container .fontSizeSelect {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px; }
    .code-runner-container .languageSelect:hover,
    .code-runner-container .fontSizeSelect:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .languageSelect:focus,
    .code-runner-container .fontSizeSelect:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    @media (max-width: 768px) {
      .code-runner-container .languageSelect,
      .code-runner-container .fontSizeSelect {
        min-width: auto;
        max-width: 90px;
        font-size: 0.85rem; } }
  .code-runner-container .output-content {
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    padding: 16px;
    background: var(--panel);
    color: var(--pref-text-color);
    white-space: pre-wrap;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.9rem;
    line-height: 1.5; }
    .code-runner-container .output-content::-webkit-scrollbar {
      width: 8px; }
    .code-runner-container .output-content::-webkit-scrollbar-track {
      background: var(--pref-bg-color); }
    .code-runner-container .output-content::-webkit-scrollbar-thumb {
      background: var(--ui-border);
      border-radius: 4px; }
      .code-runner-container .output-content::-webkit-scrollbar-thumb:hover {
        background: var(--panel-mid); }
  .code-runner-container .copyOutputBtn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .code-runner-container .copyOutputBtn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .code-runner-container .copyOutputBtn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .code-runner-container .copyOutputBtn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .code-runner-container .copyOutputBtn {
        height: 44px; } }
    @media (max-width: 768px) {
      .code-runner-container .copyOutputBtn {
        margin-left: 0.25rem;
        width: 44px; } }
  .code-runner-container .cm-comment {
    color: #7f849c !important; }

/**
 * UI Runner Styles
 * Interactive UI code executor with visual output
 */
/**
 * Runner Base Styles
 * Shared styles for code-runner and ui-runner
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
.ui-runner--sized {
  height: var(--runner-output-height, auto);
  min-height: var(--runner-output-height, 0);
  max-height: var(--runner-output-height, none);
  overflow: auto; }

.ui-runner-source--sized pre {
  height: var(--runner-editor-height, auto);
  min-height: var(--runner-editor-height, 0);
  max-height: var(--runner-editor-height, none);
  overflow: auto; }

.ui-runner-container {
  margin-bottom: 2rem; }
  .ui-runner-container .challenge-box {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--panel);
    border: 2px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
    .ui-runner-container .challenge-box h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .ui-runner-container .challenge-box p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
  .ui-runner-container .editor-container {
    margin-bottom: 20px; }
  .ui-runner-container .CodeMirror {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
  .ui-runner-container .CodeMirror-gutters {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
  .ui-runner-container .CodeMirror-selectedtext {
    background: var(--pref-accent-color, #3b82f6) !important;
    color: #ffffff !important; }
  .ui-runner-container .output-container {
    margin-bottom: 20px; }
  .ui-runner-container .control-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px 10px 0 0;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
    .ui-runner-container .control-panel span {
      font-size: 0.9rem;
      color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .ui-runner-container .control-panel {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem; } }
  .ui-runner-container .ocs__btn.utility.run, .ui-runner-container .utility.run.iridescent {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color); }
    .ui-runner-container .ocs__btn.utility.run:hover, .ui-runner-container .utility.run.iridescent:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .ui-runner-container .ocs__btn.utility.run:focus, .ui-runner-container .utility.run.iridescent:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .ui-runner-container .ocs__btn.utility.run:hover, .ui-runner-container .utility.run.iridescent:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .ui-runner-container .ocs__btn.utility.run, .ui-runner-container .utility.run.iridescent {
        height: 44px; } }
    @media (max-width: 768px) {
      .ui-runner-container .ocs__btn.utility.run, .ui-runner-container .utility.run.iridescent {
        margin-left: 0.25rem;
        width: 44px; } }
    .ui-runner-container .ocs__btn.utility.run:hover, .ui-runner-container .utility.run.iridescent:hover {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      opacity: 0.85;
      transform: scale(1.05); }
  .ui-runner-container .ocs__btn.utility.copy, .ui-runner-container .utility.copy.iridescent,
  .ui-runner-container .ocs__btn.utility.clear,
  .ui-runner-container .utility.clear.iridescent {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .ui-runner-container .ocs__btn.utility.copy:hover, .ui-runner-container .utility.copy.iridescent:hover,
    .ui-runner-container .ocs__btn.utility.clear:hover,
    .ui-runner-container .utility.clear.iridescent:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .ui-runner-container .ocs__btn.utility.copy:focus, .ui-runner-container .utility.copy.iridescent:focus,
    .ui-runner-container .ocs__btn.utility.clear:focus,
    .ui-runner-container .utility.clear.iridescent:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .ui-runner-container .ocs__btn.utility.copy:hover, .ui-runner-container .utility.copy.iridescent:hover,
    .ui-runner-container .ocs__btn.utility.clear:hover,
    .ui-runner-container .utility.clear.iridescent:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .ui-runner-container .ocs__btn.utility.copy, .ui-runner-container .utility.copy.iridescent,
      .ui-runner-container .ocs__btn.utility.clear,
      .ui-runner-container .utility.clear.iridescent {
        height: 44px; } }
    @media (max-width: 768px) {
      .ui-runner-container .ocs__btn.utility.copy, .ui-runner-container .utility.copy.iridescent,
      .ui-runner-container .ocs__btn.utility.clear,
      .ui-runner-container .utility.clear.iridescent {
        margin-left: 0.25rem;
        width: 44px; } }
  .ui-runner-container .ui-output {
    min-height: 400px;
    max-height: 600px;
    overflow: auto;
    position: relative;
    padding: 0;
    background: var(--panel);
    color: var(--pref-text-color); }
    .ui-runner-container .ui-output canvas {
      display: block;
      max-width: 100%;
      height: auto; }

/**
 * Game Runner Styles
 * Interactive game development environment with GameEngine integration
 */
/**
 * Runner Base Styles
 * Shared styles for code-runner and ui-runner
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
.game-runner-container {
  margin-bottom: 2rem;
  width: var(--gr-panel-width, 100%);
  max-width: 100%; }
  .game-runner-container .challenge-box {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--panel);
    border: 2px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
    .game-runner-container .challenge-box h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .game-runner-container .challenge-box p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
  .game-runner-container .editor-container {
    margin-bottom: 20px; }
  .game-runner-container .CodeMirror {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
  .game-runner-container .CodeMirror-gutters {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
  .game-runner-container .CodeMirror-selectedtext {
    background: var(--pref-accent-color, #3b82f6) !important;
    color: #ffffff !important; }
  .game-runner-container .output-container {
    margin-bottom: 20px; }
  .game-runner-container .control-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px 10px 0 0;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border); }
    .game-runner-container .control-panel span {
      font-size: 0.9rem;
      color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .game-runner-container .control-panel {
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.5rem; } }
  .game-runner-container .ocs__btn.utility.run, .game-runner-container .utility.run.iridescent {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color); }
    .game-runner-container .ocs__btn.utility.run:hover, .game-runner-container .utility.run.iridescent:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .ocs__btn.utility.run:focus, .game-runner-container .utility.run.iridescent:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .game-runner-container .ocs__btn.utility.run:hover, .game-runner-container .utility.run.iridescent:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .game-runner-container .ocs__btn.utility.run, .game-runner-container .utility.run.iridescent {
        height: 44px; } }
    @media (max-width: 768px) {
      .game-runner-container .ocs__btn.utility.run, .game-runner-container .utility.run.iridescent {
        margin-left: 0.25rem;
        width: 44px; } }
    .game-runner-container .ocs__btn.utility.run:hover, .game-runner-container .utility.run.iridescent:hover {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      opacity: 0.85;
      transform: scale(1.05); }
  .game-runner-container .ocs__btn.utility.copy, .game-runner-container .utility.copy.iridescent,
  .game-runner-container .ocs__btn.utility.clear,
  .game-runner-container .utility.clear.iridescent {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 0; }
    .game-runner-container .ocs__btn.utility.copy:hover, .game-runner-container .utility.copy.iridescent:hover,
    .game-runner-container .ocs__btn.utility.clear:hover,
    .game-runner-container .utility.clear.iridescent:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .ocs__btn.utility.copy:focus, .game-runner-container .utility.copy.iridescent:focus,
    .game-runner-container .ocs__btn.utility.clear:focus,
    .game-runner-container .utility.clear.iridescent:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .game-runner-container .ocs__btn.utility.copy:hover, .game-runner-container .utility.copy.iridescent:hover,
    .game-runner-container .ocs__btn.utility.clear:hover,
    .game-runner-container .utility.clear.iridescent:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .game-runner-container .ocs__btn.utility.copy, .game-runner-container .utility.copy.iridescent,
      .game-runner-container .ocs__btn.utility.clear,
      .game-runner-container .utility.clear.iridescent {
        height: 44px; } }
    @media (max-width: 768px) {
      .game-runner-container .ocs__btn.utility.copy, .game-runner-container .utility.copy.iridescent,
      .game-runner-container .ocs__btn.utility.clear,
      .game-runner-container .utility.clear.iridescent {
        margin-left: 0.25rem;
        width: 44px; } }
  .game-runner-container .game-output {
    overflow: hidden;
    position: relative;
    padding: 0;
    background: #000;
    color: var(--pref-text-color); }
    .game-runner-container .game-output .gameContainer {
      width: 100%;
      height: var(--gr-canvas-height, 580px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center; }
      .game-runner-container .game-output .gameContainer > canvas#gameCanvas {
        display: block;
        border: none;
        background: transparent; }
      .game-runner-container .game-output .gameContainer canvas {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important; }
  .game-runner-container .levelSelect {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 120px;
    max-width: 200px; }
    .game-runner-container .levelSelect:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .levelSelect:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    @media (max-width: 768px) {
      .game-runner-container .levelSelect {
        min-width: auto;
        max-width: 90px;
        font-size: 0.85rem; } }
  .game-runner-container .engineVersionSelect {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 150px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 110px;
    max-width: 170px; }
    .game-runner-container .engineVersionSelect:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .game-runner-container .engineVersionSelect:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    @media (max-width: 768px) {
      .game-runner-container .engineVersionSelect {
        min-width: auto;
        max-width: 90px;
        font-size: 0.85rem; } }
    @media (max-width: 768px) {
      .game-runner-container .engineVersionSelect {
        min-width: 110px;
        max-width: 170px; } }
  .game-runner-container .game-status {
    font-weight: 500; }
    .game-runner-container .game-status .status-text {
      color: var(--pref-accent-color);
      font-weight: 600; }
  .game-runner-container .compact-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px;
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    margin-bottom: 10px;
    justify-content: flex-start; }
    .game-runner-container .compact-controls button,
    .game-runner-container .compact-controls select {
      margin-left: 0;
      flex: 0 0 auto;
      white-space: nowrap; }
    .game-runner-container .compact-controls .ocs__btn.utility, .game-runner-container .compact-controls .utility.iridescent {
      flex: 0 0 auto; }
    .game-runner-container .compact-controls .levelSelect {
      background: var(--pref-bg-color);
      border: 1px solid var(--ui-border);
      color: var(--pref-text-color);
      font-family: var(--pref-font-family);
      font-size: var(--pref-font-size);
      cursor: pointer;
      transition: all 0.2s;
      min-width: 150px;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      min-width: 120px;
      max-width: 200px;
      height: 36px;
      font-size: 0.95rem;
      padding: 0.3rem 0.45rem; }
      .game-runner-container .compact-controls .levelSelect:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color); }
      .game-runner-container .compact-controls .levelSelect:focus {
        outline: none;
        border-color: var(--pref-accent-color); }
      @media (max-width: 768px) {
        .game-runner-container .compact-controls .levelSelect {
          min-width: auto;
          max-width: 90px;
          font-size: 0.85rem; } }
    .game-runner-container .compact-controls .engineVersionSelect {
      background: var(--pref-bg-color);
      border: 1px solid var(--ui-border);
      color: var(--pref-text-color);
      font-family: var(--pref-font-family);
      font-size: var(--pref-font-size);
      cursor: pointer;
      transition: all 0.2s;
      min-width: 150px;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      min-width: 110px;
      max-width: 170px;
      height: 36px;
      font-size: 0.95rem;
      padding: 0.3rem 0.45rem; }
      .game-runner-container .compact-controls .engineVersionSelect:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color); }
      .game-runner-container .compact-controls .engineVersionSelect:focus {
        outline: none;
        border-color: var(--pref-accent-color); }
      @media (max-width: 768px) {
        .game-runner-container .compact-controls .engineVersionSelect {
          min-width: auto;
          max-width: 90px;
          font-size: 0.85rem; } }
    @media (max-width: 768px) {
      .game-runner-container .compact-controls {
        gap: 0.4rem; }
        .game-runner-container .compact-controls .ocs__btn.utility, .game-runner-container .compact-controls .utility.iridescent {
          flex: 0 0 auto; }
        .game-runner-container .compact-controls .engineVersionSelect,
        .game-runner-container .compact-controls .levelSelect {
          flex: 1 1 calc(50% - 0.4rem);
          min-width: 130px;
          max-width: none;
          height: 34px;
          font-size: 0.9rem; } }
    @media (max-width: 480px) {
      .game-runner-container .compact-controls .engineVersionSelect,
      .game-runner-container .compact-controls .levelSelect {
        flex-basis: calc(50% - 0.3rem);
        min-width: 0; } }
  .game-runner-container.hide-editor .challenge-box {
    display: none; }
  .game-runner-container.hide-editor .game-output {
    border-radius: 8px;
    border: 2px solid var(--pref-accent-color); }

/* ========================================
   Fullscreen Game Mode Styles
   ======================================== */
.game-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99;
  display: flex;
  flex-direction: column;
  overflow: auto; }

.fullscreen-control-header {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease; }
  .fullscreen-control-header.collapsed {
    padding: 0.5rem 1.5rem; }

.fullscreen-collapse-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: var(--pref-text-color);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: absolute;
  left: 1.5rem; }
  .fullscreen-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05); }

.fullscreen-title {
  color: var(--pref-text-color);
  font-weight: 600;
  font-size: 1rem;
  position: absolute;
  left: 4rem; }

.fullscreen-controls-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  transition: all 0.3s ease;
  padding-left: 12rem; }
  .fullscreen-controls-container.collapsed {
    display: none; }
  .fullscreen-controls-container button {
    background: var(--pref-accent-color);
    border: none;
    color: var(--pref-text-color);
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; }
    .fullscreen-controls-container button:hover:not(:disabled) {
      filter: brightness(1.2);
      transform: scale(1.05); }
    .fullscreen-controls-container button:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
  .fullscreen-controls-container select {
    background: var(--pref-accent-color);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--pref-text-color);
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease; }
    .fullscreen-controls-container select:hover:not(:disabled) {
      filter: brightness(1.2); }
    .fullscreen-controls-container select:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
    .fullscreen-controls-container select option {
      background: var(--pref-bg-color);
      color: var(--pref-text-color); }
  @media (max-width: 900px) {
    .fullscreen-controls-container {
      padding-left: 0;
      justify-content: center; } }
  @media (max-width: 768px) {
    .fullscreen-controls-container {
      width: 100%; }
      .fullscreen-controls-container button,
      .fullscreen-controls-container select {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0; }
      .fullscreen-controls-container button {
        min-width: 40px;
        height: 40px;
        font-size: 1rem; } }
  @media (max-width: 480px) {
    .fullscreen-controls-container button,
    .fullscreen-controls-container select {
      flex-basis: 100%; } }

/**
 * Container Panel Styles
 * Composes UI Runner and Game Runner panels in row/column layouts.
 */
.container-panel {
  display: grid;
  gap: var(--cp-gap, 1rem);
  margin: 1rem 0;
  align-items: start; }
  .container-panel.container-panel--row {
    grid-template-columns: var(--cp-left, 1fr) var(--cp-right, 1fr); }
  .container-panel.container-panel--column {
    grid-template-columns: 1fr;
    grid-template-rows: var(--cp-left, auto) var(--cp-right, auto); }
  .container-panel .container-panel__item {
    min-width: 0; }
  .container-panel .container-panel__item > .game-runner-container,
  .container-panel .container-panel__item > .ui-runner,
  .container-panel .container-panel__item > .ui-runner-container {
    width: 100%;
    max-width: 100%; }
  .container-panel .runner-side-panel,
  .container-panel .cookie-play-panel,
  .container-panel .cookie-hack-panel,
  .container-panel .lesson-content {
    background: var(--panel, #ffffff);
    color: var(--pref-text-color, inherit);
    border: 1px solid var(--ui-border, #d7deea);
    border-radius: 12px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-border, #d7deea) 45%, transparent);
    padding: 1rem 1.1rem; }
    .container-panel .runner-side-panel h3,
    .container-panel .cookie-play-panel h3,
    .container-panel .cookie-hack-panel h3,
    .container-panel .lesson-content h3 {
      margin-top: 0;
      margin-bottom: 0.65rem;
      font-size: 1.05rem;
      line-height: 1.3; }
    .container-panel .runner-side-panel p,
    .container-panel .runner-side-panel li,
    .container-panel .cookie-play-panel p,
    .container-panel .cookie-play-panel li,
    .container-panel .cookie-hack-panel p,
    .container-panel .cookie-hack-panel li,
    .container-panel .lesson-content p,
    .container-panel .lesson-content li {
      line-height: 1.45; }
    .container-panel .runner-side-panel code,
    .container-panel .cookie-play-panel code,
    .container-panel .cookie-hack-panel code,
    .container-panel .lesson-content code {
      background: color-mix(in srgb, var(--panel, #ffffff) 78%, var(--pref-accent-color, #7aa8ff) 22%);
      color: var(--pref-text-color, inherit);
      border-radius: 6px;
      padding: 0.05rem 0.35rem; }

@media (max-width: 900px) {
  .container-panel.container-panel--row {
    grid-template-columns: 1fr; } }
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Form Mixins
 * Reusable form patterns for modals, widgets, and interactive components
 * All media queries are embedded in mixins for consistency
 */
/**
 * Modal Container
 * Centered container for modal content with responsive padding
 *
 * @param {Number} $min-width - Minimum width (default: 300px)
 * @param {Number} $max-width - Maximum width (default: 400px)
 * @param {Number} $padding - Inner padding (default: 24px)
 *
 * @example
 *   .my-modal-content {
 *     @include modal-container;
 *   }
 */
/**
 * Widget Container
 * Fixed/floating container for widgets like leaderboards
 *
 * @param {Number} $width - Container width (default: 350px)
 * @param {Number} $border-width - Border width (default: 2px)
 *
 * @example
 *   .my-widget {
 *     @include widget-container;
 *   }
 */
/**
 * Header Bar
 * Common header for modals and widgets
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 * @param {Number} $font-size - Font size (default: 20px)
 *
 * @example
 *   .my-header {
 *     @include header-bar;
 *   }
 */
/**
 * Form Group
 * Label and input pair with consistent styling
 *
 * @param {Number} $margin-bottom - Space between groups (default: 16px)
 *
 * @example
 *   .form-group {
 *     @include form-group;
 *   }
 */
/**
 * Submit Button
 * Primary action button with responsive sizing
 *
 * @param {Number} $padding - Inner padding (default: 12px)
 *
 * @example
 *   .submit-btn {
 *     @include submit-button;
 *   }
 */
/**
 * Content Area
 * Scrollable content area with max height
 *
 * @param {Number} $max-height - Maximum height (default: 400px)
 *
 * @example
 *   .content-area {
 *     @include content-area;
 *   }
 */
/**
 * Button Container
 * Flex container for button groups
 *
 * @param {String} $direction - Flex direction (default: column)
 * @param {Number} $gap - Gap between items (default: 10px)
 *
 * @example
 *   .button-group {
 *     @include button-container;
 *   }
 */
/**
 * Action Button
 * Full-width button for modals/forms
 *
 * @param {Number} $padding - Inner padding (default: 12px 16px)
 *
 * @example
 *   .action-btn {
 *     @include action-button;
 *   }
 */
/**
 * Table Styles
 * Themed table with alternating rows
 *
 * @example
 *   .my-table {
 *     @include themed-table;
 *   }
 */
/**
 * Game Modal Content
 * Modal styling optimized for game interfaces with backdrop blur and gradients
 *
 * @param {Color} $border-color - Border accent color (default: var(--pref-accent-color))
 * @param {Number} $max-width - Maximum width (default: 600px)
 * @param {Number} $padding - Inner padding (default: 30px)
 *
 * @example
 *   #cheatsModal .modal-content {
 *     @include game-modal-content;
 *   }
 */
/**
 * Game Modal Header
 * Header section for game modals with gradient accents
 *
 * @param {Color} $accent-color - Accent color for gradient (default: var(--pref-accent-color))
 * @param {Number} $padding-bottom - Bottom spacing (default: 20px)
 *
 * @example
 *   .modal-header {
 *     @include game-modal-header;
 *   }
 */
/**
 * Game Modal Body
 * Content area for game modals with auto-scrolling
 *
 * @param {Number} $max-height - Maximum height before scrolling (default: 400px)
 * @param {Number} $padding - Inner padding (default: 20px)
 *
 * @example
 *   .modal-body {
 *     @include game-modal-body;
 *   }
 */
/**
 * Game Modal Animation Keyframes
 * Slide-in animation for game modals
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**
 * Pause Modal Overlay
 * Centered modal for game pause menu
 */
#pauseModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 10000; }
  @media (max-width: 768px) {
    #pauseModal {
      padding: 60px 0 0 0; } }

/**
 * Pause Modal Content
 * Container for pause menu buttons and options
 */
.pause-modal-content {
  background: var(--panel, #000);
  border: 1px solid var(--pref-accent-color, #FFF);
  border-radius: 12px;
  padding: 24px;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--pref-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); }
  @media (max-width: 768px) {
    .pause-modal-content {
      min-width: 280px;
      padding: 20px; } }

/**
 * Modal Header
 */
.pause-modal-header {
  margin: 0 0 16px 0;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--pref-text-color, #FFF); }
  @media (max-width: 768px) {
    .pause-modal-header {
      font-size: 20px; } }

/**
 * Button Container
 */
.pause-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px; }

/**
 * Pause Menu Button
 * Uses action-button mixin with text-button base
 */
.pause-menu-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s; }
  .pause-menu-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .pause-menu-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .pause-menu-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .pause-menu-btn {
      height: 44px; } }
  .pause-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
  .pause-menu-btn:active {
    transform: translateY(0); }
  @media (max-width: 768px) {
    .pause-menu-btn {
      padding: 14px 16px;
      font-size: 14px; } }
  .pause-menu-btn.primary, .hallpass-buttons button.pause-menu-btn {
    margin-top: 8px;
    font-weight: 700;
    background: var(--pref-accent-color, #3b82f6);
    color: var(--pref-text-color, #FFF);
    border-color: var(--pref-accent-color, #3b82f6); }
    .pause-menu-btn.primary:hover, .hallpass-buttons button.pause-menu-btn:hover {
      opacity: 0.9;
      background: var(--pref-accent-color, #3b82f6); }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Form Mixins
 * Reusable form patterns for modals, widgets, and interactive components
 * All media queries are embedded in mixins for consistency
 */
/**
 * Modal Container
 * Centered container for modal content with responsive padding
 *
 * @param {Number} $min-width - Minimum width (default: 300px)
 * @param {Number} $max-width - Maximum width (default: 400px)
 * @param {Number} $padding - Inner padding (default: 24px)
 *
 * @example
 *   .my-modal-content {
 *     @include modal-container;
 *   }
 */
/**
 * Widget Container
 * Fixed/floating container for widgets like leaderboards
 *
 * @param {Number} $width - Container width (default: 350px)
 * @param {Number} $border-width - Border width (default: 2px)
 *
 * @example
 *   .my-widget {
 *     @include widget-container;
 *   }
 */
/**
 * Header Bar
 * Common header for modals and widgets
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 * @param {Number} $font-size - Font size (default: 20px)
 *
 * @example
 *   .my-header {
 *     @include header-bar;
 *   }
 */
/**
 * Form Group
 * Label and input pair with consistent styling
 *
 * @param {Number} $margin-bottom - Space between groups (default: 16px)
 *
 * @example
 *   .form-group {
 *     @include form-group;
 *   }
 */
/**
 * Submit Button
 * Primary action button with responsive sizing
 *
 * @param {Number} $padding - Inner padding (default: 12px)
 *
 * @example
 *   .submit-btn {
 *     @include submit-button;
 *   }
 */
/**
 * Content Area
 * Scrollable content area with max height
 *
 * @param {Number} $max-height - Maximum height (default: 400px)
 *
 * @example
 *   .content-area {
 *     @include content-area;
 *   }
 */
/**
 * Button Container
 * Flex container for button groups
 *
 * @param {String} $direction - Flex direction (default: column)
 * @param {Number} $gap - Gap between items (default: 10px)
 *
 * @example
 *   .button-group {
 *     @include button-container;
 *   }
 */
/**
 * Action Button
 * Full-width button for modals/forms
 *
 * @param {Number} $padding - Inner padding (default: 12px 16px)
 *
 * @example
 *   .action-btn {
 *     @include action-button;
 *   }
 */
/**
 * Table Styles
 * Themed table with alternating rows
 *
 * @example
 *   .my-table {
 *     @include themed-table;
 *   }
 */
/**
 * Game Modal Content
 * Modal styling optimized for game interfaces with backdrop blur and gradients
 *
 * @param {Color} $border-color - Border accent color (default: var(--pref-accent-color))
 * @param {Number} $max-width - Maximum width (default: 600px)
 * @param {Number} $padding - Inner padding (default: 30px)
 *
 * @example
 *   #cheatsModal .modal-content {
 *     @include game-modal-content;
 *   }
 */
/**
 * Game Modal Header
 * Header section for game modals with gradient accents
 *
 * @param {Color} $accent-color - Accent color for gradient (default: var(--pref-accent-color))
 * @param {Number} $padding-bottom - Bottom spacing (default: 20px)
 *
 * @example
 *   .modal-header {
 *     @include game-modal-header;
 *   }
 */
/**
 * Game Modal Body
 * Content area for game modals with auto-scrolling
 *
 * @param {Number} $max-height - Maximum height before scrolling (default: 400px)
 * @param {Number} $padding - Inner padding (default: 20px)
 *
 * @example
 *   .modal-body {
 *     @include game-modal-body;
 *   }
 */
/**
 * Game Modal Animation Keyframes
 * Slide-in animation for game modals
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**
 * Leaderboard Widget Container
 * Fixed-position widget for displaying game leaderboards
 */
.leaderboard-widget {
  width: 350px;
  background: var(--panel, #1a1a1a);
  border: 2px solid var(--ui-border, #333);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--pref-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  z-index: 1000;
  overflow: hidden; }
  @media (max-width: 768px) {
    .leaderboard-widget {
      width: 100%;
      max-width: 350px; } }
  .leaderboard-widget.initially-hidden {
    display: none; }

/**
 * Positioning Classes
 */
.leaderboard-embedded {
  position: absolute;
  top: 80px;
  right: 20px; }

.leaderboard-fixed {
  position: fixed;
  top: 80px;
  right: 20px; }

/**
 * Leaderboard Header
 */
.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  color: var(--pref-text-color, white);
  font-size: 20px;
  font-weight: 700;
  background: var(--panel-mid, #2d2d2d);
  border-bottom: 2px solid var(--ui-border, #444);
  display: flex;
  align-items: center; }
  @media (max-width: 768px) {
    .leaderboard-header {
      font-size: 18px;
      padding: 12px; } }

/**
 * Toggle Button
 */
.toggle-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  border-radius: 50%;
  font-size: 22px; }
  .toggle-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .toggle-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .toggle-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .toggle-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .toggle-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .toggle-btn:hover {
    background: var(--panel-mid, #4a4a4a);
    border-color: var(--ui-border, #666); }
  @media (max-width: 768px) {
    .toggle-btn {
      width: 36px;
      height: 36px;
      font-size: 20px; } }

/**
 * Leaderboard Content Area
 */
.leaderboard-content {
  background: var(--panel, #1a1a1a);
  max-height: 400px;
  overflow-y: auto; }
  @media (max-width: 768px) {
    .leaderboard-content {
      max-height: 300px; } }
  .leaderboard-content.hidden {
    display: none !important; }

/**
 * Leaderboard Table
 */
.leaderboard-table {
  width: 100%;
  border-collapse: collapse; }
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 12px 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--ui-border, #333); }
    @media (max-width: 768px) {
      .leaderboard-table th,
      .leaderboard-table td {
        padding: 10px 6px;
        font-size: 13px; } }
  .leaderboard-table th {
    color: var(--text-muted, #aaa);
    font-weight: 600;
    background: var(--panel-mid, #252525);
    text-align: left; }
  .leaderboard-table td {
    color: var(--pref-text-color, #ddd); }
  .leaderboard-table tbody tr {
    background: var(--panel, #1a1a1a);
    transition: background 0.2s; }
    .leaderboard-table tbody tr:hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }
    .leaderboard-table tbody tr:nth-child(even) {
      background: var(--ui-bg, rgba(0, 0, 0, 0.06)); }
    .leaderboard-table tbody tr:nth-child(even):hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }

/**
 * Table Cell Types
 */
.rank {
  font-weight: 800;
  color: #ffd700; }

.username {
  font-weight: 600;
  color: var(--pref-text-color, #fff); }

.score {
  font-weight: 800;
  color: var(--pref-accent-color, #4a9eff); }

/**
 * Type Selection Screen
 */
.type-selection {
  padding: 24px;
  text-align: center; }
  .type-selection h3 {
    margin: 0 0 20px 0;
    color: var(--pref-text-color, #fff);
    font-size: 18px; }
  @media (max-width: 768px) {
    .type-selection {
      padding: 20px; } }

.type-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px; }

.type-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border: 2px solid var(--pref-accent-color, #4a9eff);
  background: var(--panel-mid, #2d2d2d);
  color: var(--pref-accent-color, #4a9eff);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600; }
  .type-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .type-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .type-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .type-btn {
      height: 44px; } }
  .type-btn:hover {
    background: var(--pref-accent-color, #4a9eff);
    color: var(--panel, #1a1a1a);
    border-color: var(--pref-accent-color, #5aafff);
    transform: scale(1.02); }
  @media (max-width: 768px) {
    .type-btn {
      padding: 12px 16px;
      font-size: 15px; } }

/**
 * Elementary Form
 */
.elementary-form {
  padding: 20px;
  background: var(--panel, #1a1a1a); }
  @media (max-width: 768px) {
    .elementary-form {
      padding: 16px; } }

.form-group {
  margin-bottom: 16px; }
  .form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted, #ccc);
    font-weight: 600;
    font-size: 14px; }
  .form-group input {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--ui-border, #333);
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background: var(--panel-mid, #2d2d2d);
    color: var(--pref-text-color, #fff);
    transition: border-color 0.2s;
    font-family: var(--pref-font-family, inherit); }
    .form-group input:focus {
      outline: none;
      border-color: var(--pref-accent-color, #4a9eff); }
    .form-group input::placeholder {
      color: var(--text-muted, #888); }

/**
 * Submit Button
 */
.submit-btn {
  width: 100%;
  padding: 12px;
  background: var(--pref-accent-color, #4a9eff);
  color: var(--panel, #1a1a1a);
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  transition: all 0.2s; }
  .submit-btn:hover {
    background: var(--pref-accent-color, #5aafff);
    transform: translateY(-1px);
    opacity: 0.95; }
  .submit-btn:active {
    transform: translateY(0); }
  @media (max-width: 768px) {
    .submit-btn {
      padding: 14px;
      font-size: 15px; } }

/**
 * Save Score Button (Icon-only)
 */
.save-score-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  font-size: 18px; }
  .save-score-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .save-score-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .save-score-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .save-score-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .save-score-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .save-score-btn:hover {
    background: var(--panel-mid, #4a4a4a);
    border-color: var(--ui-border, #666); }
  @media (max-width: 768px) {
    .save-score-btn {
      width: 36px;
      height: 36px;
      font-size: 16px; } }

/**
 * Loading and Error States
 */
.loading,
.error {
  padding: 20px;
  text-align: center;
  color: var(--text-muted, #aaa);
  font-size: 14px; }

.error {
  color: #ff6b6b; }

/**
 * Back Button (Icon-only)
 */
.back-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  margin-right: 8px;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center; }
  .back-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .back-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .back-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .back-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .back-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .back-btn:hover {
    background: var(--panel-mid, #4a4a4a);
    border-color: var(--ui-border, #666); }
  @media (max-width: 768px) {
    .back-btn {
      width: 36px;
      height: 36px;
      font-size: 16px; } }

/**
 * Delete Button
 */
.delete-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ff6b6b;
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600; }
  .delete-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .delete-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .delete-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .delete-btn {
      height: 44px; } }
  .delete-btn:hover {
    background: #ff5252;
    transform: translateY(-1px); }
  .delete-btn:active {
    transform: translateY(0); }
  @media (max-width: 768px) {
    .delete-btn {
      padding: 5px 10px;
      font-size: 11px; } }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
#masterFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-x: auto; }
  #masterFooter p {
    display: none; }

.game-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0; }

.game-footer-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: 40px; }

.game-footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 1 1 0; }

.game-controls-left,
.game-controls-right {
  display: flex;
  align-items: center;
  gap: 10px; }

#mansion-game-controls-container {
  display: flex;
  align-items: center;
  gap: 10px; }

#prevLevelButton,
#nextLevelButton,
#cheatsMenuButton,
#infoButton {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  font-family: var(--pref-font-family); }
  #prevLevelButton:hover,
  #nextLevelButton:hover,
  #cheatsMenuButton:hover,
  #infoButton:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  #prevLevelButton:focus,
  #nextLevelButton:focus,
  #cheatsMenuButton:focus,
  #infoButton:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  #prevLevelButton:hover,
  #nextLevelButton:hover,
  #cheatsMenuButton:hover,
  #infoButton:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    #prevLevelButton,
    #nextLevelButton,
    #cheatsMenuButton,
    #infoButton {
      height: 44px; } }

#prevLevelButton {
  background-color: var(--pref-accent-color, #f26767ff);
  border-color: var(--pref-accent-color, #f26767ff); }
  #prevLevelButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#nextLevelButton {
  background-color: var(--pref-accent-color, #6ae378ff);
  border-color: var(--pref-accent-color, #6ae378ff); }
  #nextLevelButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#cheatsMenuButton {
  background-color: var(--pref-accent-color, #a46ae3ff);
  border-color: var(--pref-accent-color, #a46ae3ff); }
  #cheatsMenuButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#infoButton {
  background-color: var(--pref-accent-color, #e67e22);
  border-color: var(--pref-accent-color, #e67e22); }
  #infoButton:hover {
    filter: brightness(0.85);
    transform: scale(1.05); }

#homeButton {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none; }
  #homeButton:focus {
    outline: none; }
  #homeButton:hover {
    transform: scale(1.1); }

#cheatsModal,
#infoModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px); }
  @media (max-width: 768px) {
    #cheatsModal,
    #infoModal {
      padding: 60px 0 0 0; } }
  #cheatsModal > div,
  #infoModal > div {
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(145deg, var(--panel), var(--panel-mid));
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    font-family: var(--pref-font-family);
    color: var(--pref-text-color); }
    @media (max-width: 768px) {
      #cheatsModal > div,
      #infoModal > div {
        padding: 20px;
        width: 95%; } }

#cheatsModal > div {
  border: 4px solid var(--pref-accent-color, #a46ae3ff);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  max-height: 80vh;
  overflow-y: auto; }

#infoModal > div {
  border: 4px solid var(--pref-accent-color, #e67e22);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }

.game-modal-title {
  text-align: center;
  margin-bottom: 25px;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
  @media (max-width: 768px) {
    .game-modal-title {
      font-size: 14px; } }

#cheatsModal .game-modal-title {
  color: var(--pref-accent-color, #a46ae3ff); }

#infoModal .game-modal-title {
  color: var(--pref-accent-color, #e67e22); }

.game-modal-container {
  display: flex;
  flex-direction: column;
  gap: 15px; }

.game-modal-section, .game-level-select-section, .game-info-section {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 10px; }
  @media (max-width: 768px) {
    .game-modal-section, .game-level-select-section, .game-info-section {
      padding: 15px; } }

.game-level-select-section {
  border: 2px solid var(--pref-accent-color, #a46ae3ff); }

.game-info-section {
  border: 2px solid var(--pref-accent-color, #e67e22);
  text-align: left;
  color: var(--pref-text-color);
  font-size: 12px; }
  .game-info-section strong {
    color: var(--pref-accent-color); }
  @media (max-width: 768px) {
    .game-info-section {
      font-size: 10px; } }

.game-section-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 14px; }
  @media (max-width: 768px) {
    .game-section-title {
      font-size: 12px; } }

.game-level-select-section .game-section-title {
  color: var(--pref-accent-color, #a46ae3ff); }

.game-level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px; }
  @media (max-width: 768px) {
    .game-level-grid {
      gap: 8px; } }

.game-level-button {
  padding: 15px 10px;
  background-color: var(--pref-accent-color, #3498db);
  color: white;
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--pref-font-family);
  transition: all 0.3s ease;
  font-weight: bold;
  text-align: center;
  line-height: 1.3; }
  .game-level-button:hover {
    transform: scale(1.05);
    background-color: var(--pref-selection-color, #2ecc71); }
  @media (max-width: 768px) {
    .game-level-button {
      padding: 12px 8px;
      font-size: 9px; } }

.game-modal-close {
  margin-top: 20px;
  padding: 12px 20px;
  background-color: var(--pref-accent-color, #e74c3c);
  color: white;
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--pref-font-family);
  width: 100%;
  transition: all 0.3s ease; }
  .game-modal-close:hover {
    transform: scale(1.05);
    filter: brightness(0.85); }
  @media (max-width: 768px) {
    .game-modal-close {
      padding: 10px 16px;
      font-size: 10px; } }

.game-placeholder-section {
  background: rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 10px;
  border: 2px solid var(--ui-border);
  text-align: center;
  color: var(--text-muted);
  font-size: 11px; }
  @media (max-width: 768px) {
    .game-placeholder-section {
      padding: 12px;
      font-size: 10px; } }

@media (max-width: 768px) {
  #masterFooter {
    padding: 10px 5px; }

  .game-footer-center {
    margin-left: 20px; }

  #prevLevelButton,
  #nextLevelButton,
  #cheatsMenuButton,
  #infoButton {
    font-size: 10px;
    padding: 6px 10px; }

  #homeButton {
    font-size: 32px; } }
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Three-Panel Layout Container
 * Creates a flexible three-column layout with gap spacing
 * Automatically stacks on mobile devices
 *
 * @param {Number} $gap - Space between panels (default: 10px)
 * @param {Number} $padding - Container padding (default: 10px)
 * @param {Number} $height - Viewport height (default: 92vh)
 *
 * @example
 *   .my-builder-layout {
 *     @include three-panel-layout;
 *   }
 */
/**
 * Asset/Config Panel (Left Panel)
 * Fixed-width panel for controls, forms, and asset selection
 *
 * @param {Number} $flex-basis - Width percentage (default: 20%)
 *
 * @example
 *   .config-panel {
 *     @include asset-panel;
 *   }
 */
/**
 * Main Content Panel (Center/Right Panel)
 * Flexible panel for primary content, supports split views
 *
 * @example
 *   .main-panel {
 *     @include main-content-panel;
 *   }
 */
/**
 * Glass Panel Effect
 * Modern glassmorphic panel with backdrop blur
 *
 * @param {Color} $bg - Background color (default: rgba(0,0,0,0.3))
 * @param {Number} $blur - Backdrop blur amount (default: 20px)
 * @param {Number} $border-radius - Corner radius (default: 12px)
 *
 * @example
 *   .glass-panel {
 *     @include glass-panel-effect;
 *   }
 */
/**
 * Panel Header Bar
 * Consistent header with title and control buttons
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 *
 * @example
 *   .panel-header {
 *     @include panel-header-bar;
 *   }
 */
/**
 * View Mode Toggle Controls
 * Buttons to switch between different view modes (code/game/split)
 *
 * @example
 *   .view-controls {
 *     @include view-mode-controls;
 *   }
 */
/**
 * View Mode Button
 * Individual toggle button for view switching
 *
 * @example
 *   .view-btn {
 *     @include view-toggle-button;
 *   }
 */
/**
 * Code Editor Container
 * Dual-layer container for syntax highlighting
 * Supports both textarea editing and visual highlights
 *
 * @example
 *   .editor-container {
 *     @include code-editor-container;
 *   }
 */
/**
 * Code Layer (Editable Text)
 * Transparent textarea for code input
 *
 * @example
 *   .code-layer {
 *     @include code-text-layer;
 *   }
 */
/**
 * Highlight Layer (Visual Overlay)
 * Non-interactive layer for syntax highlighting
 *
 * @example
 *   .highlight-layer {
 *     @include code-highlight-layer;
 *   }
 */
/**
 * Preview/Game Frame
 * Container for iframe or canvas preview
 *
 * @example
 *   .game-frame {
 *     @include preview-frame;
 *   }
 */
/**
 * Scrollable Form Container
 * Scrollable area for form inputs
 *
 * @param {Number} $padding - Inner padding (default: 15px)
 *
 * @example
 *   .scroll-form {
 *     @include scrollable-form;
 *   }
 */
/**
 * Form Section Group
 * Grouped section for related form fields
 *
 * @param {Number} $padding - Inner padding (default: 14px)
 * @param {Number} $margin-bottom - Bottom margin (default: 15px)
 *
 * @example
 *   .asset-group {
 *     @include form-section-group;
 *   }
 */
/**
 * Section Group Title
 * Title header for form sections
 *
 * @example
 *   .group-title {
 *     @include section-group-title;
 *   }
 */
/**
 * Icon Button with Tooltip
 * Small icon button with hover tooltip
 *
 * @param {Number} $size - Button size (default: 32px)
 *
 * @example
 *   .icon-btn {
 *     @include icon-button-tooltip;
 *   }
 */
.gamebuilder-title {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 2px; }
  @media (max-width: 768px) {
    .gamebuilder-title {
      font-size: 1.2em; } }

.creator-layout {
  display: flex;
  gap: 10px;
  padding: 10px;
  height: 92vh;
  box-sizing: border-box; }
  @media (max-width: 768px) {
    .creator-layout {
      flex-direction: column;
      height: auto; } }

.col-asset {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column; }
  @media (max-width: 768px) {
    .col-asset {
      flex: none;
      max-height: 300px; } }

.col-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative; }
  @media (max-width: 768px) {
    .col-main {
      flex: none;
      min-height: 600px; } }
  .col-main.view-code .panel-game {
    display: none; }
  .col-main.view-game .panel-code {
    display: none; }
  .col-main.view-code .panel-code, .col-main.view-game .panel-game {
    flex: 1; }
  .col-main.view-split .main-content {
    flex-direction: row; }
  .col-main.view-split .panel-game {
    flex: 0 0 55%; }
  .col-main.view-split .panel-code {
    flex: 1; }
  @media (max-width: 768px) {
    .col-main.view-code .panel-game, .col-main.view-game .panel-code {
      display: flex !important; }
    .col-main .main-content {
      flex-direction: column !important; }
    .col-main .panel-game {
      flex: 0 0 45% !important; }
    .col-main .panel-code {
      flex: 1 !important; } }

.view-controls {
  display: flex;
  gap: 5px;
  margin-bottom: 10px; }
  @media (max-width: 768px) {
    .view-controls {
      display: none; } }

.view-btn {
  flex: 1;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 0.8em;
  text-transform: uppercase;
  transition: all 0.2s; }
  .view-btn.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--pref-accent-color); }
  .view-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05); }

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0; }

.glass-panel {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

.panel-header {
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.panel-controls {
  display: flex;
  gap: 8px;
  align-items: center; }

.icon-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  margin-left: 0;
  position: relative; }
  .icon-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .icon-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .icon-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .icon-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .icon-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .icon-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none; }
  .icon-btn.staged {
    box-shadow: 0 0 10px rgba(0, 200, 0, 0.9);
    border-color: rgba(0, 200, 0, 0.9); }

.step-indicator {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 4px; }

.add-item-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 8px;
  margin-left: 0;
  position: relative;
  font-size: 18px;
  line-height: 1;
  padding: 0; }
  .add-item-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .add-item-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .add-item-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .add-item-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .add-item-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .add-item-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none; }

.scroll-form {
  flex: 1;
  overflow-y: auto;
  padding: 15px; }

.asset-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 15px; }

.group-title {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.creator-layout label {
  display: block;
  font-size: 0.7em;
  margin-bottom: 5px; }
.creator-layout select,
.creator-layout input {
  width: 100%;
  padding: 8px !important;
  border-radius: 4px;
  font-size: 0.85em;
  margin-bottom: 10px;
  color: var(--pref-text-color, #fff);
  background: var(--pref-bg-color, #000);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box; }
.creator-layout select {
  color: var(--pref-text-color, #fff);
  background: var(--pref-bg-color, #000); }
  .creator-layout select option {
    color: var(--pref-text-color, #fff);
    background: var(--pref-bg-color, #000); }
  .creator-layout select:disabled,
  .creator-layout select option[disabled] {
    color: var(--text-muted, rgba(255, 255, 255, 0.5)); }

.creator-layout .btn {
  padding: 12px;
  border-radius: 6px;
  border: none;
  background: var(--pref-bg-color);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0; }
  .creator-layout .btn:hover {
    background: var(--panel-mid);
    opacity: 0.9; }
.creator-layout .btn-sm {
  padding: 6px;
  border-radius: 4px;
  font-size: 0.7em; }
.creator-layout .btn-confirm {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color); }
.creator-layout .btn-run {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .creator-layout .btn-run:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .creator-layout .btn-run:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .creator-layout .btn-run:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .creator-layout .btn-run {
      height: 44px; } }
  @media (max-width: 768px) {
    .creator-layout .btn-run {
      margin-left: 0.25rem;
      width: 44px; } }
  .creator-layout .btn-run:hover {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    opacity: 0.85;
    transform: scale(1.05); }
.creator-layout .btn-danger {
  background: #e74c3c;
  border-color: #e74c3c; }

.help-panel {
  display: none;
  position: absolute;
  top: 50px;
  right: 16px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 12px;
  max-width: 300px;
  z-index: 100;
  font-size: 0.85em;
  line-height: 1.4; }
  .help-panel.active {
    display: block; }

.code-panel {
  flex: 1;
  position: relative; }

.editor-container {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden; }

.code-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Fira Code', 'Monaco', 'Courier New', monospace;
  font-size: 13px;
  line-height: 20px;
  border: none;
  resize: none;
  outline: none;
  z-index: 2;
  white-space: pre;
  overflow: auto; }

.highlight-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1; }

.highlight-box {
  position: absolute;
  background: color-mix(in srgb, var(--pref-accent-color) 25%, transparent);
  border-left: 4px solid var(--pref-accent-color);
  left: 10px;
  width: calc(100% - 20px);
  display: block !important; }

.highlight-persistent-block {
  position: absolute;
  background: rgba(255, 230, 0, 0.6);
  border: 2px solid #ffdd00;
  border-left-width: 4px;
  left: 10px;
  width: calc(100% - 20px); }

.typing-highlight {
  position: absolute;
  background: color-mix(in srgb, var(--pref-accent-color) 25%, transparent);
  border-left: 4px solid var(--pref-accent-color);
  left: 10px;
  width: calc(100% - 20px); }

.game-frame {
  flex: 1;
  position: relative; }
  .game-frame iframe, .game-frame canvas {
    width: 100%;
    height: 100%;
    border: none; }

.draw-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50; }
  .draw-overlay.active {
    pointer-events: auto; }
  .draw-overlay.mode-barrier {
    cursor: crosshair; }

.draw-rect {
  position: absolute;
  box-sizing: border-box; }
  .draw-rect.barrier {
    border: 2px solid #ff2d2d;
    background: rgba(255, 0, 0, 0.05); }

.draw-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 8px; }

.draw-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: 0.8em; }
  .draw-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .draw-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .draw-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .draw-btn {
      height: 44px; } }
  .draw-btn.active {
    border-color: var(--pref-accent-color);
    background: rgba(255, 255, 255, 0.08); }

.wall-slot {
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08); }

.wall-fields label {
  display: block; }
.wall-fields select {
  color: var(--pref-text-color, #fff); }

iframe .pause-button-bar,
iframe button.pause-btn,
iframe .leaderboard-widget {
  display: none !important;
  visibility: hidden !important; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Form Mixins
 * Reusable form patterns for modals, widgets, and interactive components
 * All media queries are embedded in mixins for consistency
 */
/**
 * Modal Container
 * Centered container for modal content with responsive padding
 *
 * @param {Number} $min-width - Minimum width (default: 300px)
 * @param {Number} $max-width - Maximum width (default: 400px)
 * @param {Number} $padding - Inner padding (default: 24px)
 *
 * @example
 *   .my-modal-content {
 *     @include modal-container;
 *   }
 */
/**
 * Widget Container
 * Fixed/floating container for widgets like leaderboards
 *
 * @param {Number} $width - Container width (default: 350px)
 * @param {Number} $border-width - Border width (default: 2px)
 *
 * @example
 *   .my-widget {
 *     @include widget-container;
 *   }
 */
/**
 * Header Bar
 * Common header for modals and widgets
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 * @param {Number} $font-size - Font size (default: 20px)
 *
 * @example
 *   .my-header {
 *     @include header-bar;
 *   }
 */
/**
 * Form Group
 * Label and input pair with consistent styling
 *
 * @param {Number} $margin-bottom - Space between groups (default: 16px)
 *
 * @example
 *   .form-group {
 *     @include form-group;
 *   }
 */
/**
 * Submit Button
 * Primary action button with responsive sizing
 *
 * @param {Number} $padding - Inner padding (default: 12px)
 *
 * @example
 *   .submit-btn {
 *     @include submit-button;
 *   }
 */
/**
 * Content Area
 * Scrollable content area with max height
 *
 * @param {Number} $max-height - Maximum height (default: 400px)
 *
 * @example
 *   .content-area {
 *     @include content-area;
 *   }
 */
/**
 * Button Container
 * Flex container for button groups
 *
 * @param {String} $direction - Flex direction (default: column)
 * @param {Number} $gap - Gap between items (default: 10px)
 *
 * @example
 *   .button-group {
 *     @include button-container;
 *   }
 */
/**
 * Action Button
 * Full-width button for modals/forms
 *
 * @param {Number} $padding - Inner padding (default: 12px 16px)
 *
 * @example
 *   .action-btn {
 *     @include action-button;
 *   }
 */
/**
 * Table Styles
 * Themed table with alternating rows
 *
 * @example
 *   .my-table {
 *     @include themed-table;
 *   }
 */
/**
 * Game Modal Content
 * Modal styling optimized for game interfaces with backdrop blur and gradients
 *
 * @param {Color} $border-color - Border accent color (default: var(--pref-accent-color))
 * @param {Number} $max-width - Maximum width (default: 600px)
 * @param {Number} $padding - Inner padding (default: 30px)
 *
 * @example
 *   #cheatsModal .modal-content {
 *     @include game-modal-content;
 *   }
 */
/**
 * Game Modal Header
 * Header section for game modals with gradient accents
 *
 * @param {Color} $accent-color - Accent color for gradient (default: var(--pref-accent-color))
 * @param {Number} $padding-bottom - Bottom spacing (default: 20px)
 *
 * @example
 *   .modal-header {
 *     @include game-modal-header;
 *   }
 */
/**
 * Game Modal Body
 * Content area for game modals with auto-scrolling
 *
 * @param {Number} $max-height - Maximum height before scrolling (default: 400px)
 * @param {Number} $padding - Inner padding (default: 20px)
 *
 * @example
 *   .modal-body {
 *     @include game-modal-body;
 *   }
 */
/**
 * Game Modal Animation Keyframes
 * Slide-in animation for game modals
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**
 * Dialogue Box Container
 * Main dialogue box shown at bottom of screen for NPC conversations
 */
[id^="custom-dialogue-box-"] {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  max-width: 80%;
  background: var(--panel, rgba(0, 0, 0, 0.85));
  border: 2px solid var(--pref-accent-color, #4a86e8);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: 'Press Start 2P', cursive, monospace;
  font-size: 14px;
  text-align: center;
  color: var(--pref-text-color, #FFF);
  z-index: 9999;
  display: none; }
  @media (max-width: 768px) {
    [id^="custom-dialogue-box-"] {
      max-width: 90%;
      padding: 16px;
      font-size: 12px;
      bottom: 60px; } }

/**
 * Avatar Container
 * Character portrait shown in dialogue
 */
[id^="dialogue-avatar-"] {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: none; }
  @media (max-width: 768px) {
    [id^="dialogue-avatar-"] {
      width: 40px;
      height: 40px;
      margin-right: 10px; } }

/**
 * Speaker Name
 * Character name displayed above dialogue text
 */
[id^="dialogue-speaker-"] {
  font-weight: bold;
  color: var(--pref-accent-color, #4a86e8);
  margin-bottom: 10px;
  font-size: 16px; }
  @media (max-width: 768px) {
    [id^="dialogue-speaker-"] {
      font-size: 14px;
      margin-bottom: 8px; } }

/**
 * Dialogue Text Content
 * Main text area for dialogue messages
 */
[id^="dialogue-text-"] {
  line-height: 1.5;
  min-height: 40px;
  color: var(--pref-text-color, #FFF); }
  @media (max-width: 768px) {
    [id^="dialogue-text-"] {
      min-height: 30px; } }

/**
 * Close Button
 * Uses text-button mixin for consistency
 */
[id^="custom-dialogue-box-"] button {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 20px;
  font-family: 'Press Start 2P', cursive, monospace;
  font-size: 12px; }
  [id^="custom-dialogue-box-"] button:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  [id^="custom-dialogue-box-"] button:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  [id^="custom-dialogue-box-"] button:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    [id^="custom-dialogue-box-"] button {
      height: 44px; } }
  @media (max-width: 768px) {
    [id^="custom-dialogue-box-"] button {
      margin-top: 8px;
      padding: 8px 16px;
      font-size: 11px; } }

/**
 * Primary and Secondary Buttons
 * Added by addButtons() method
 */
.primary-button {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pref-accent-color, #3b82f6);
  color: var(--pref-bg-color, #FFF);
  border-color: var(--pref-accent-color, #3b82f6); }
  .primary-button:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .primary-button:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .primary-button:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .primary-button {
      height: 44px; } }
  .primary-button:hover {
    opacity: 0.9;
    background: var(--pref-accent-color, #3b82f6); }

.secondary-button {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-mid, #666);
  color: var(--pref-text-color, #FFF); }
  .secondary-button:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .secondary-button:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .secondary-button:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .secondary-button {
      height: 44px; } }
  .secondary-button:hover {
    opacity: 0.9; }

/**
 * User/AI Message Classes
 * Used in AiNpc.js chat history
 */
.user-message {
  background: linear-gradient(135deg, var(--pref-accent-color, rgba(74, 134, 232, 0.4)) 0%, var(--pref-accent-color, rgba(74, 134, 232, 0.2)) 100%);
  border-left: 4px solid var(--pref-accent-color, #4a86e8);
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative; }
  .user-message::before {
    content: '👤';
    position: absolute;
    left: -25px;
    top: 8px;
    font-size: 16px; }

.ai-message {
  background: linear-gradient(135deg, var(--panel, rgba(22, 33, 62, 0.6)) 0%, var(--panel-mid, rgba(22, 33, 62, 0.4)) 100%);
  border-left: 4px solid var(--ui-border, #555);
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative; }
  .ai-message::before {
    content: '🤖';
    position: absolute;
    left: -25px;
    top: 8px;
    font-size: 16px; }

/**
 * ===========================
 * AI NPC Interaction Styles
 * ===========================
 * Chat UI elements appended to dialogue boxes
 */
/**
 * AI NPC Container
 * Main container for input, buttons, and response area
 */
.ai-npc-container {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ui-border, rgba(255, 255, 255, 0.1)); }

/**
 * AI NPC Input Field
 * Textarea for multi-line user messages with wrapping
 */
.ai-npc-input {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 50px;
  max-height: 120px;
  padding: 10px 12px;
  font-family: var(--pref-font-family, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  resize: vertical;
  overflow-y: auto;
  background: var(--panel, rgba(0, 0, 0, 0.4));
  border: 2px solid var(--ui-border, #444);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease; }
  .ai-npc-input:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ai-npc-input:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ai-npc-input:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ai-npc-input {
      height: 44px; } }
  .ai-npc-input::placeholder {
    opacity: 0.6;
    font-style: italic; }
  .ai-npc-input:focus {
    border-color: var(--pref-accent-color, #4a86e8);
    box-shadow: 0 0 0 2px rgba(74, 134, 232, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
    background: var(--panel-mid, rgba(0, 0, 0, 0.5)); }
  @media (max-width: 768px) {
    .ai-npc-input {
      padding: 10px;
      font-size: 13px;
      min-height: 44px; } }

/**
 * AI NPC Button Row
 * Container for history and send buttons
 */
.ai-npc-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch; }
  .ai-npc-button-row::before {
    content: 'Press Enter to send, Shift+Enter for new line';
    display: block;
    font-size: 10px;
    opacity: 0.5;
    text-align: center;
    font-style: italic;
    width: 100%;
    order: -1;
    margin-bottom: -5px; }

/**
 * AI NPC History Button
 * Button to show chat history modal
 */
.ai-npc-history-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 13px;
  background: var(--panel-mid, rgba(0, 0, 0, 0.3)); }
  .ai-npc-history-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ai-npc-history-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ai-npc-history-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ai-npc-history-btn {
      height: 44px; } }
  .ai-npc-history-btn:hover {
    background: var(--pref-accent-color, #4a86e8);
    color: var(--pref-bg-color, #FFF);
    transform: scale(1.02); }
  @media (max-width: 768px) {
    .ai-npc-history-btn {
      padding: 10px 12px;
      font-size: 12px; } }

/**
 * AI NPC Response Area
 * Area displaying AI responses with typewriter effect
 */
.ai-npc-response-area {
  min-height: 40px;
  padding: 12px 14px;
  border-radius: 8px;
  border-left: 4px solid var(--pref-accent-color, #4a86e8);
  background: linear-gradient(135deg, var(--panel, rgba(0, 0, 0, 0.4)) 0%, var(--panel-mid, rgba(0, 0, 0, 0.3)) 100%);
  color: var(--pref-text-color, #FFF);
  font-style: italic;
  line-height: 1.5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
  .ai-npc-response-area:empty::before {
    content: '💭';
    opacity: 0.3;
    margin-right: 8px; }
  @media (max-width: 768px) {
    .ai-npc-response-area {
      min-height: 30px;
      padding: 10px 12px;
      font-size: 13px; } }

/**
 * AI NPC Modal
 * Chat history modal overlay
 */
.ai-npc-modal {
  background: var(--panel, #000);
  border: 1px solid var(--pref-accent-color, #FFF);
  border-radius: 12px;
  padding: 20px;
  min-width: 300px;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-family: var(--pref-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 600px;
  overflow-y: auto;
  z-index: 10001;
  padding-left: 40px;
  padding-right: 20px; }
  @media (max-width: 768px) {
    .ai-npc-modal {
      min-width: 280px;
      padding: 16px; } }
  @media (max-width: 768px) {
    .ai-npc-modal {
      max-width: 90%;
      max-height: 80vh;
      padding-left: 35px; } }

/**
 * AI NPC Modal Title
 * Title for chat history modal
 */
.ai-npc-modal-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--pref-accent-color, #4a86e8);
  text-align: center; }
  @media (max-width: 768px) {
    .ai-npc-modal-title {
      font-size: 16px;
      margin-bottom: 12px; } }

/**
 * AI NPC Close Button
 * Close button for chat history modal
 */
.ai-npc-close-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  background: var(--pref-accent-color, #3b82f6);
  color: var(--pref-bg-color, #FFF);
  border-color: var(--pref-accent-color, #3b82f6); }
  .ai-npc-close-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ai-npc-close-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ai-npc-close-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ai-npc-close-btn {
      height: 44px; } }
  .ai-npc-close-btn:hover {
    opacity: 0.9;
    background: var(--pref-accent-color, #3b82f6); }
  @media (max-width: 768px) {
    .ai-npc-close-btn {
      padding: 10px; } }

/**
 * Home Gamified Journey Styles
 * Zone-based course exploration with progressive unlock mechanics
 * Used in: _notebooks/home/2026-04-02-home2-gamified-mvp.ipynb
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Zone Clicker Buttons
 * Large interactive buttons that unlock course zones
 */
.zone-clicker {
  width: 100%;
  padding: 1.5rem;
  margin: 0.5rem 0;
  font-size: 1.2rem;
  font-weight: bold;
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--pref-accent-color);
  color: var(--pref-bg-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--pref-font-family); }
  .zone-clicker:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    opacity: 0.9; }
  .zone-clicker.locked {
    background: var(--panel-mid);
    border-color: var(--ui-border);
    opacity: 0.6; }
  .zone-clicker.unlocked {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    border-color: #4CAF50; }

/**
 * Zone Subtitle Text
 * Secondary descriptive text within zone buttons
 */
.zone-subtitle {
  font-size: 0.8rem;
  font-weight: normal;
  opacity: 0.85; }

/**
 * Zone Info Panel
 * Displays current zone status, mission, and progress
 */
.zone-info {
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--panel);
  border: 2px solid var(--pref-accent-color);
  color: var(--pref-text-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-height: 100px; }
  .zone-info h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--pref-accent-color); }
  .zone-info p {
    margin: 0.5rem 0;
    line-height: 1.5;
    font-size: 1rem;
    opacity: 0.95; }

/**
 * Unlock Progress Counter
 * Shows clicks remaining to unlock zone
 */
.unlock-count {
  font-size: 0.9rem;
  color: var(--pref-accent-color);
  margin-top: 0.5rem;
  font-weight: 600; }

/**
 * Progress Bar
 * Visual representation of unlock progress
 */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--panel-mid);
  border-radius: 4px;
  margin: 0.5rem 0;
  overflow: hidden; }

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 4px;
  transition: width 0.3s ease; }

/**
 * Zone Unlock Panel
 * Container for all zone selection elements
 */
#zone-unlock-panel > p {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0.25rem 0 0.75rem 0; }
#zone-unlock-panel > h3 {
  margin-bottom: 0.5rem; }

/**
 * Zone Buttons Container
 * Grid layout for zone selection buttons
 */
#zone-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }
  @media (max-width: 768px) {
    #zone-buttons-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem; } }

/**
 * Zone Status Display
 * Individual zone unlock tracking in progress panel
 */
.zone-status {
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-radius: 6px;
  background: var(--panel-mid);
  border: 1px solid var(--ui-border);
  transition: all 0.3s ease; }
  .zone-status .zone-header {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--pref-text-color); }
  .zone-status .zone-unlock-status {
    font-size: 0.85rem;
    opacity: 0.8;
    color: var(--pref-text-color); }
  .zone-status.locked {
    opacity: 0.7; }
  .zone-status.unlocked {
    background: var(--panel);
    border-color: var(--pref-accent-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

/**
 * Zone Selector Buttons
 * Side-by-side button interface for zone navigation
 */
#zone-selector-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem; }

/**
 * Zone Section Container
 * Individual zone content areas that show/hide based on selection
 * Wrapper div contains: Header (markdown) -> UI_RUNNER -> GAME_RUNNER -> Footer
 */
.zone-section {
  margin-top: 1.5rem; }
  .zone-section[style*="display: none"] {
    display: none !important; }
  .zone-section[style*="display: block"] {
    display: block !important; }

/**
 * Zone Button
 * Individual zone selection button with unlock states
 */
.zone-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  justify-content: flex-start;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  height: auto;
  position: relative;
  min-height: auto;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word; }
  .zone-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .zone-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .zone-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .zone-btn {
      height: 44px; } }
  .zone-btn .zone-btn-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pref-text-color);
    width: 100%;
    word-wrap: break-word;
    white-space: normal; }
  .zone-btn .zone-btn-subtitle {
    font-size: 0.85rem;
    opacity: 0.7;
    color: var(--pref-text-color);
    width: 100%;
    word-wrap: break-word;
    white-space: normal; }
  .zone-btn .zone-btn-lock {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    opacity: 0.6;
    width: 100%;
    word-wrap: break-word;
    white-space: normal; }
  @media (max-width: 768px) {
    .zone-btn {
      padding: 1rem 0.75rem;
      gap: 0.5rem;
      min-height: 90px; }
      .zone-btn .zone-btn-title {
        font-size: 1rem;
        line-height: 1.4; }
      .zone-btn .zone-btn-subtitle {
        font-size: 0.8rem;
        line-height: 1.4; }
      .zone-btn .zone-btn-lock {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-top: 0.15rem; } }
  .zone-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--panel-mid); }
    .zone-btn.locked:hover {
      transform: none;
      opacity: 0.5;
      background: var(--panel-mid); }
  .zone-btn.unlocked {
    border-color: var(--pref-accent-color); }
    .zone-btn.unlocked:hover {
      border-color: var(--pref-accent-color);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
  .zone-btn.active {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color); }
    .zone-btn.active .zone-btn-title,
    .zone-btn.active .zone-btn-subtitle,
    .zone-btn.active .zone-btn-lock {
      color: var(--pref-bg-color); }

/**
 * Zone Content Display
 * Content panel showing zone information
 */
.zone-content {
  padding: 1rem;
  color: var(--pref-text-color); }
  .zone-content h3 {
    margin-bottom: 0.5rem;
    color: var(--pref-accent-color); }
  .zone-content .zone-subtitle-text {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 1rem;
    font-weight: 600; }
  .zone-content .zone-description {
    margin-bottom: 1.5rem;
    line-height: 1.6; }
  .zone-content h4 {
    margin: 1rem 0 0.5rem 0;
    color: var(--pref-text-color); }

.zone-journey-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem; }
  .zone-journey-list li {
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
    background: var(--panel-mid);
    border-radius: 4px;
    border-left: 3px solid var(--pref-accent-color);
    transition: all 0.2s ease; }
    .zone-journey-list li:hover {
      background: var(--panel);
      transform: translateX(4px); }
    .zone-journey-list li:before {
      content: '▸ ';
      color: var(--pref-accent-color);
      font-weight: bold;
      margin-right: 0.5rem; }

/**
 * Mario Open House Form Styles
 * Reusable top-rail button + detail panel layout for open house navigation.
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
.mario-open-house {
  margin-bottom: 1.5rem;
  position: relative;
  width: 100%;
  max-width: 980px;
  min-height: 700px;
  margin: 1.25rem auto;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(145deg, #0f172a, #13213f 46%, #1f3b73 100%);
  border-radius: 20px;
  box-shadow: 0 10px 36px rgba(10, 25, 51, 0.45);
  overflow: hidden; }
  .mario-open-house .sprite {
    width: var(--mario-sprite-width, 256px);
    height: var(--mario-sprite-height, 256px);
    background-image: var(--mario-sprite-image);
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    top: 28px;
    left: 36px;
    z-index: 5;
    transform: scale(var(--mario-sprite-scale, 0.25));
    transform-origin: top left;
    pointer-events: none; }
  .mario-open-house .mario-nav-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    position: absolute;
    top: 18px;
    left: 12px;
    right: 12px;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    z-index: 4; }
  .mario-open-house .mario-lane {
    position: absolute;
    top: 12px;
    left: 10px;
    right: 10px;
    height: 82px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.2);
    border: 1px dashed rgba(147, 197, 253, 0.25);
    pointer-events: none;
    z-index: 2; }
  .mario-open-house .hotspot {
    position: relative;
    width: 180px;
    min-height: 48px;
    z-index: 4;
    transition: transform 120ms ease, filter 120ms ease; }
    .mario-open-house .hotspot:hover, .mario-open-house .hotspot.active {
      transform: translateY(-2px) scale(1.01);
      filter: brightness(1.1); }
  .mario-open-house .mario-nav-btn {
    width: 170px;
    flex: 0 0 auto; }
  .mario-open-house .detail-section {
    padding: 1.1rem 1.2rem;
    margin-bottom: 0;
    border-radius: 8px;
    background: var(--panel);
    border: 2px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: absolute;
    display: none;
    top: 96px;
    left: 40px;
    right: 40px;
    min-height: 270px;
    z-index: 3;
    border-color: rgba(147, 197, 253, 0.7);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.88);
    color: #dbeafe;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px); }
    .mario-open-house .detail-section h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .mario-open-house .detail-section p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
    .mario-open-house .detail-section h3 {
      margin-top: 0;
      margin-bottom: 0.75rem;
      color: #eff6ff; }
    .mario-open-house .detail-section p {
      margin-bottom: 0.65rem;
      line-height: 1.45;
      color: #dbeafe; }
    .mario-open-house .detail-section ul {
      margin: 0;
      padding-left: 1.1rem; }

@media (max-width: 900px) {
  .mario-open-house {
    min-height: 760px;
    border-radius: 16px; }
    .mario-open-house .mario-nav-bar {
      left: 8px;
      right: 8px;
      justify-content: flex-start; }
    .mario-open-house .hotspot {
      width: min(44vw, 170px);
      min-width: 130px;
      font-size: 0.95rem; }
    .mario-open-house .detail-section {
      top: 164px;
      min-height: 360px;
      left: 12px;
      right: 12px; } }
@media (max-width: 560px) {
  .mario-open-house {
    min-height: 820px;
    margin: 0.75rem auto; }
    .mario-open-house .mario-nav-bar {
      gap: 8px; }
    .mario-open-house .hotspot {
      width: 152px;
      min-width: 152px;
      min-height: 44px;
      font-size: 0.88rem; }
    .mario-open-house .detail-section {
      left: 8px;
      right: 8px;
      min-height: 430px;
      padding: 0.9rem; }
      .mario-open-house .detail-section h3 {
        font-size: 1rem; }
      .mario-open-house .detail-section p,
      .mario-open-house .detail-section li {
        font-size: 0.92rem; } }
@keyframes rainbow {
  0% {
    background-color: red; }
  14% {
    background-color: orange; }
  28% {
    background-color: yellow; }
  42% {
    background-color: green; }
  57% {
    background-color: blue; }
  71% {
    background-color: indigo; }
  85% {
    background-color: violet; }
  100% {
    background-color: red; } }
.rainbow {
  width: 100px;
  height: 100px;
  animation: rainbow 5s linear infinite;
  margin: auto; }

@keyframes spinMove {
  0% {
    transform: rotate(0deg) translateX(0); }
  10% {
    transform: rotate(36deg) translateX(-200px); }
  20% {
    transform: rotate(72deg) translateX(200px); }
  30% {
    transform: rotate(108deg) translateX(400px); }
  40% {
    transform: rotate(144deg) translateX(200px); }
  50% {
    transform: rotate(180deg) translateX(0); }
  60% {
    transform: rotate(216deg) translateX(-200px); }
  70% {
    transform: rotate(252deg) translateX(200px); }
  80% {
    transform: rotate(288deg) translateX(400px); }
  90% {
    transform: rotate(324deg) translateX(200px); }
  100% {
    transform: rotate(360deg) translateX(0); } }
.spinMove {
  width: 100px;
  height: 100px;
  margin: auto;
  background-color: blue;
  animation: spinMove 10s linear infinite; }

@keyframes iridescent {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 200% 50%; }
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-4px); } }
.iridescent {
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.8) 0%, rgba(255, 154, 0, 0.8) 10%, rgba(208, 222, 33, 0.8) 20%, rgba(79, 220, 74, 0.8) 30%, rgba(63, 218, 216, 0.8) 40%, rgba(47, 201, 226, 0.8) 50%, rgba(28, 127, 238, 0.8) 60%, rgba(95, 21, 242, 0.8) 70%, rgba(186, 12, 248, 0.8) 80%, rgba(251, 7, 217, 0.8) 90%, rgba(255, 0, 0, 0.8) 100%);
  background-size: 200% 100%;
  animation: iridescent 2s linear infinite; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn, .iridescent {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover, .iridescent:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus, .iridescent:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover, .iridescent:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn, .iridescent {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small, .small.iridescent {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium, .medium.iridescent, .hallpass-buttons button.iridescent, .hallpass-buttons button.ocs__btn {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large, .large.iridescent {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill, .pill.iridescent {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent), .pill.iridescent:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .pill.iridescent:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible, .pill.iridescent:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent, .accent.iridescent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill, .accent.fill.iridescent {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .accent.fill.iridescent:hover, .ocs__btn.accent.fill:focus, .accent.fill.iridescent:focus, .ocs__btn.accent.fill:active, .accent.fill.iridescent:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red, .alert-red.iridescent {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .alert-red.iridescent:hover, .ocs__btn.alert-red:focus, .alert-red.iridescent:focus, .ocs__btn.alert-red:active, .alert-red.iridescent:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill, .alert-red.fill.iridescent {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .alert-red.fill.iridescent:hover, .ocs__btn.alert-red.fill:focus, .alert-red.fill.iridescent:focus, .ocs__btn.alert-red.fill:active, .alert-red.fill.iridescent:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow, .alert-yellow.iridescent {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .alert-yellow.iridescent:hover, .ocs__btn.alert-yellow:focus, .alert-yellow.iridescent:focus, .ocs__btn.alert-yellow:active, .alert-yellow.iridescent:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill, .alert-yellow.fill.iridescent {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .alert-yellow.fill.iridescent:hover, .ocs__btn.alert-yellow.fill:focus, .alert-yellow.fill.iridescent:focus, .ocs__btn.alert-yellow.fill:active, .alert-yellow.fill.iridescent:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green, .alert-green.iridescent {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .alert-green.iridescent:hover, .ocs__btn.alert-green:focus, .alert-green.iridescent:focus, .ocs__btn.alert-green:active, .alert-green.iridescent:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill, .alert-green.fill.iridescent {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .alert-green.fill.iridescent:hover, .ocs__btn.alert-green.fill:focus, .alert-green.fill.iridescent:focus, .ocs__btn.alert-green.fill:active, .alert-green.fill.iridescent:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility, .utility.iridescent {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before, .utility.iridescent::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run, .utility.run.iridescent {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before, .utility.run.iridescent::before {
    content: '▶'; }

.ocs__btn.utility.pause, .utility.pause.iridescent {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before, .utility.pause.iridescent::before {
    content: '⏸'; }

.ocs__btn.utility.stop, .utility.stop.iridescent {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before, .utility.stop.iridescent::before {
    content: '■'; }

.ocs__btn.utility.fullscreen, .utility.fullscreen.iridescent,
.ocs__btn.utility.copy,
.utility.copy.iridescent,
.ocs__btn.utility.save,
.utility.save.iridescent,
.ocs__btn.utility.clear,
.utility.clear.iridescent,
.ocs__btn.utility.reset,
.utility.reset.iridescent,
.ocs__btn.utility.copyOutput,
.utility.copyOutput.iridescent {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before, .utility.fullscreen.iridescent::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before, .utility.copy.iridescent::before {
  content: '📋'; }

.ocs__btn.utility.save::before, .utility.save.iridescent::before {
  content: '💾'; }

.ocs__btn.utility.clear::before, .utility.clear.iridescent::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before, .utility.reset.iridescent::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before, .utility.copyOutput.iridescent::before {
  content: '⎘'; }

.ocs__btn.utility:disabled, .utility.iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility, .utility.iridescent {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before, .utility.iridescent::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill, .alert-red.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .alert-red.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .alert-red.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active, .alert-red.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill, .alert-yellow.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .alert-yellow.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .alert-yellow.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active, .alert-yellow.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill, .alert-green.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .alert-green.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .alert-green.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active, .alert-green.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.ocs__btn:disabled, .iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none; }
  .ocs__btn:disabled:hover, .iridescent:disabled:hover, .ocs__btn:disabled:active, .iridescent:disabled:active {
    opacity: 0.5;
    transform: none; }

.primary.disabled, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn, .iridescent {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover, .iridescent:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus, .iridescent:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover, .iridescent:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn, .iridescent {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small, .small.iridescent {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium, .medium.iridescent, .hallpass-buttons button.iridescent, .hallpass-buttons button.ocs__btn {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large, .large.iridescent {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill, .pill.iridescent {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent), .pill.iridescent:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .pill.iridescent:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible, .pill.iridescent:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent, .accent.iridescent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill, .accent.fill.iridescent {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .accent.fill.iridescent:hover, .ocs__btn.accent.fill:focus, .accent.fill.iridescent:focus, .ocs__btn.accent.fill:active, .accent.fill.iridescent:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red, .alert-red.iridescent {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .alert-red.iridescent:hover, .ocs__btn.alert-red:focus, .alert-red.iridescent:focus, .ocs__btn.alert-red:active, .alert-red.iridescent:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill, .alert-red.fill.iridescent {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .alert-red.fill.iridescent:hover, .ocs__btn.alert-red.fill:focus, .alert-red.fill.iridescent:focus, .ocs__btn.alert-red.fill:active, .alert-red.fill.iridescent:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow, .alert-yellow.iridescent {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .alert-yellow.iridescent:hover, .ocs__btn.alert-yellow:focus, .alert-yellow.iridescent:focus, .ocs__btn.alert-yellow:active, .alert-yellow.iridescent:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill, .alert-yellow.fill.iridescent {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .alert-yellow.fill.iridescent:hover, .ocs__btn.alert-yellow.fill:focus, .alert-yellow.fill.iridescent:focus, .ocs__btn.alert-yellow.fill:active, .alert-yellow.fill.iridescent:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green, .alert-green.iridescent {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .alert-green.iridescent:hover, .ocs__btn.alert-green:focus, .alert-green.iridescent:focus, .ocs__btn.alert-green:active, .alert-green.iridescent:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill, .alert-green.fill.iridescent {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .alert-green.fill.iridescent:hover, .ocs__btn.alert-green.fill:focus, .alert-green.fill.iridescent:focus, .ocs__btn.alert-green.fill:active, .alert-green.fill.iridescent:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility, .utility.iridescent {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before, .utility.iridescent::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run, .utility.run.iridescent {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before, .utility.run.iridescent::before {
    content: '▶'; }

.ocs__btn.utility.pause, .utility.pause.iridescent {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before, .utility.pause.iridescent::before {
    content: '⏸'; }

.ocs__btn.utility.stop, .utility.stop.iridescent {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before, .utility.stop.iridescent::before {
    content: '■'; }

.ocs__btn.utility.fullscreen, .utility.fullscreen.iridescent,
.ocs__btn.utility.copy,
.utility.copy.iridescent,
.ocs__btn.utility.save,
.utility.save.iridescent,
.ocs__btn.utility.clear,
.utility.clear.iridescent,
.ocs__btn.utility.reset,
.utility.reset.iridescent,
.ocs__btn.utility.copyOutput,
.utility.copyOutput.iridescent {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before, .utility.fullscreen.iridescent::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before, .utility.copy.iridescent::before {
  content: '📋'; }

.ocs__btn.utility.save::before, .utility.save.iridescent::before {
  content: '💾'; }

.ocs__btn.utility.clear::before, .utility.clear.iridescent::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before, .utility.reset.iridescent::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before, .utility.copyOutput.iridescent::before {
  content: '⎘'; }

.ocs__btn.utility:disabled, .utility.iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility, .utility.iridescent {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before, .utility.iridescent::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill, .alert-red.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .alert-red.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .alert-red.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active, .alert-red.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill, .alert-yellow.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .alert-yellow.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .alert-yellow.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active, .alert-yellow.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill, .alert-green.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .alert-green.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .alert-green.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active, .alert-green.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

button, .primary, .hallpass-buttons button {
  color: white;
  background-color: rgba(80, 80, 80, 0.7);
  transition: all 0.5s;
  transition: all 0.5s; }
  button:hover, .primary:hover, .hallpass-buttons button:hover {
    background-color: rgba(55, 55, 55, 0.7); }
  button:active, .primary:active, .hallpass-buttons button:active {
    background-color: rgba(29, 29, 29, 0.7); }

.secondary {
  color: #999999;
  background-color: rgba(120, 120, 128, 0.12);
  transition: all 0.5s;
  transition: all 0.5s; }
  .secondary:hover {
    background-color: rgba(95, 95, 102, 0.12); }
  .secondary:active {
    background-color: rgba(71, 71, 75, 0.12); }

.filledHighlight {
  background-color: #007aff;
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledHighlight:hover {
    background-color: #0062cc; }
  .filledHighlight:active {
    background-color: #004999; }

.filledTinted {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.15);
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledTinted:hover {
    background-color: rgba(0, 98, 204, 0.15); }
  .filledTinted:active {
    background-color: rgba(0, 73, 153, 0.15); }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.ocs__btn:disabled, .iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none; }
  .ocs__btn:disabled:hover, .iridescent:disabled:hover, .ocs__btn:disabled:active, .iridescent:disabled:active {
    opacity: 0.5;
    transform: none; }

.primary.disabled, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/* define class for redifined button */
.button {
  width: auto;
  height: auto;
  border-radius: 10px;
  background-color: #21807c;
  border: 3px solid black;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 1;
  grid-row: span 1;
  transition: all 0.5s; }

/* darkens the background color on hover to create a selecting effect */
.button:hover {
  background-color: #373737; }

/* "row style" is flexible size and aligns pictures in center */
.row {
  align-items: center;
  display: flex; }

/* "column style" is one-third of the width with padding */
.column {
  flex: 16.66%;
  padding: 3px; }

/* Animation container */
#animation {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; }

/* Calculator container - modern grid layout */
.calculator-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 12px; }

/* Output display */
.calculator-output {
  grid-column: span 4;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: #fff;
  text-align: right;
  border: none;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  overflow: hidden; }

/* Base button mixin for calculator */
/* Number buttons */
.calculator-number {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Zero button spans 2 columns */ }
  .calculator-number:hover {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  .calculator-number:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-number.zero {
    grid-column: span 2;
    aspect-ratio: auto;
    padding: 0 2rem; }

/* Operation buttons (+, -, *, /) */
.calculator-operation {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #ff9500, #e68a00);
  color: #fff;
  box-shadow: 0 4px 6px rgba(255, 149, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-operation:hover {
    background: linear-gradient(145deg, #ffaa33, #ff9500);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 149, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-operation:active {
    transform: translateY(0); }

/* Clear button */
.calculator-clear {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(1rem, 3vw, 1.2rem); }
  .calculator-clear:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-clear:active {
    transform: translateY(0); }

/* Special operation buttons (sqrt, %) */
.calculator-special {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-special:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-special:active {
    transform: translateY(0); }

/* Equals button */
.calculator-equals {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #34c759, #28a745);
  color: #fff;
  box-shadow: 0 4px 6px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-equals:hover {
    background: linear-gradient(145deg, #4cd964, #34c759);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(52, 199, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-equals:active {
    transform: translateY(0); }

/* Responsive breakpoints */
@media (max-width: 480px) {
  .calculator-container {
    max-width: 100%;
    padding: 1rem;
    gap: 8px;
    border-radius: 16px; }

  .calculator-output {
    min-height: 60px;
    padding: 0.75rem 1rem; } }
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-container {
    max-width: 350px; } }
@media (min-width: 769px) {
  .calculator-container {
    max-width: 400px; }

  .calculator-number,
  .calculator-operation,
  .calculator-clear,
  .calculator-special,
  .calculator-equals {
    min-height: 70px; } }
/* Disable canvas filter if present */
canvas {
  filter: none; }

.iridescent {
  --ocs-btn-tone: var(--ocs-btn-tone, var(--pref-accent-color, var(--accent)));
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 88%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 74%, #000000));
  color: var(--pref-bg-color, var(--white1, #ffffff));
  border-color: var(--ocs-btn-tone);
  transition: filter 0.2s ease, opacity 0.2s ease; }
  .iridescent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.08) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s infinite linear;
    z-index: 0;
    pointer-events: none; }
  .iridescent:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 90%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 72%, #000000));
    filter: brightness(1.06); }
  .iridescent:active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 84%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 68%, #000000));
    filter: brightness(0.94); }
  .iridescent span,
  .iridescent a {
    position: relative;
    z-index: 1; }

@keyframes shimmer {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 100% 50%; } }
/**
 * Drag and Drop Buttons
 * Reusable classes for drag-source / drop-target button pairs used by
 * assembly, matching, and sorting activities (see the PC Assembly Bench).
 *
 *
 * Sizing comes from the $dnd-sizes map below, mirroring the $sizes token
 * pattern in _tokens.scss.
 *
 * Markup contract:
 *   .ocs__dnd                     board wrapper
 *     .ocs__dnd-header            title / controls row
 *     .ocs__dnd-status            aria-live status line
 *     .ocs__dnd-progress          secondary progress line
 *     .ocs__dnd-layout            responsive two panel grid
 *       .ocs__dnd-panel           a tray or a target area
 *         .ocs__dnd-panel-title   panel heading
 *         .ocs__drag-btn          draggable source button  (draggable="true")
 *         .ocs__drop-btn          drop target button
 *
 * State classes (toggle from JS, no inline styles needed):
 *   .is-selected  source picked, waiting for a destination
 *   .is-over      pointer is dragging over this drop target
 *   .is-filled    drop target accepted its correct item
 *   [disabled]    consumed source or completed target
 *
 * Size classes:
 *   .ocs__dnd--small | --medium | --large      resize a whole board
 *   .ocs__drag-btn--small etc.                 resize one control
 */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

:root {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px;
  --dnd-panel-padding: 14px;
  --dnd-board-padding: 18px;
  --dnd-gap: 18px;
  --dnd-min-column: 240px; }

.ocs__dnd--small {
  --dnd-control-padding: 8px;
  --dnd-control-font: 14px;
  --dnd-radius: 6px;
  --dnd-panel-padding: 10px;
  --dnd-board-padding: 12px;
  --dnd-gap: 12px;
  --dnd-min-column: 180px; }

.ocs__drag-btn--small,
.ocs__drop-btn--small {
  --dnd-control-padding: 8px;
  --dnd-control-font: 14px;
  --dnd-radius: 6px; }

.ocs__dnd--medium {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px;
  --dnd-panel-padding: 14px;
  --dnd-board-padding: 18px;
  --dnd-gap: 18px;
  --dnd-min-column: 240px; }

.ocs__drag-btn--medium,
.ocs__drop-btn--medium {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px; }

.ocs__dnd--large {
  --dnd-control-padding: 15px;
  --dnd-control-font: 18px;
  --dnd-radius: 10px;
  --dnd-panel-padding: 20px;
  --dnd-board-padding: 24px;
  --dnd-gap: 24px;
  --dnd-min-column: 320px; }

.ocs__drag-btn--large,
.ocs__drop-btn--large {
  --dnd-control-padding: 15px;
  --dnd-control-font: 18px;
  --dnd-radius: 10px; }

.ocs__dnd {
  color: #F0F0F0;
  background: #121212;
  border: 1px solid #3a3a3c;
  border-radius: calc(var(--dnd-radius) + 4px);
  padding: var(--dnd-board-padding);
  font-family: system-ui, sans-serif; }

.ocs__dnd-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end; }

.ocs__dnd-status {
  font-weight: 700;
  min-height: 24px; }

.ocs__dnd-progress {
  color: #4bbaff; }

.ocs__dnd-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dnd-min-column), 1fr));
  gap: var(--dnd-gap);
  margin-top: 14px; }

.ocs__dnd-panel {
  background: #1F2020;
  border: 1px solid #3a3a3c;
  border-radius: calc(var(--dnd-radius) + 2px);
  padding: var(--dnd-panel-padding); }

.ocs__dnd-panel-title {
  margin-top: 0; }

.ocs__dnd-input {
  display: block;
  width: min(100%, 320px);
  box-sizing: border-box;
  margin-top: 6px;
  padding: var(--dnd-control-padding);
  border: 1px solid #3a3a3c;
  border-radius: var(--dnd-radius);
  background: #1F2020;
  color: rgba(255, 255, 255, 0.87);
  font-size: var(--dnd-control-font); }

.ocs__dnd-reset {
  padding: var(--dnd-control-padding) calc(var(--dnd-control-padding) * 1.4);
  border: 1px solid #4CAFEF;
  border-radius: var(--dnd-radius);
  background: #007aff;
  color: white;
  font-size: var(--dnd-control-font);
  cursor: pointer;
  transition: background 0.2s; }
  .ocs__dnd-reset:hover {
    background: #0068d9; }

.ocs__drag-btn,
.ocs__drop-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: var(--dnd-control-padding);
  border: 1px solid #3182CE;
  border-radius: var(--dnd-radius);
  background: #2c2c2e;
  color: rgba(255, 255, 255, 0.87);
  font-size: var(--dnd-control-font);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background 0.2s, border-color 0.2s, outline-color 0.2s, opacity 0.2s; }
  .ocs__drag-btn:hover:not([disabled]),
  .ocs__drop-btn:hover:not([disabled]) {
    background: #4c4c4d; }
  .ocs__drag-btn:focus-visible,
  .ocs__drop-btn:focus-visible {
    outline: 3px solid #4CAFEF;
    outline-offset: 2px; }
  .ocs__drag-btn[disabled],
  .ocs__drop-btn[disabled] {
    cursor: default; }

.ocs__drag-btn {
  cursor: grab; }
  .ocs__drag-btn:active:not([disabled]) {
    cursor: grabbing; }
  .ocs__drag-btn.is-selected {
    outline: 3px solid #FBBF24; }
  .ocs__drag-btn[disabled] {
    opacity: 0.35;
    cursor: default; }

.ocs__drop-btn.is-over {
  border-color: #FBBF24;
  background: #5a5a5c; }
.ocs__drop-btn.is-filled, .ocs__drop-btn.is-filled[disabled] {
  border-color: #4ADE80;
  background: #2D5A3D;
  opacity: 1; }

.hallpass-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  background: #1c1c1e;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  text-align: center;
  border: 2px solid #48484a; }

.hallpass-header {
  font-size: 22px;
  font-weight: bold;
  color: white;
  padding-bottom: 10px;
  border-bottom: 2px solid #3a3a3c;
  margin-bottom: 15px; }

.hallpass-icon {
  max-width: 150px;
  height: auto;
  margin: 15px auto;
  display: block; }

.hallpass-details {
  font-size: 16px;
  color: #636366;
  margin-bottom: 10px; }

.hallpass-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px; }

.hallpass-buttons button {
  border-radius: 12px;
  font-size: 16px;
  padding: 12px 20px; }

.hallpass-buttons button:hover {
  transform: scale(1.05);
  cursor: pointer; }

/* Microblog form group and label */
.microblog-form-group {
  width: 100%;
  display: flex;
  flex-direction: column; }

.microblog-form-label {
  font-size: 1rem;
  font-weight: 500;
  color: #f1f5f9;
  margin-bottom: 0.25rem; }

.microblog-form-label .required {
  color: #ef4444; }

/* Modal overlay background: dark semi-transparent */
#microblog-modal,
#reply-modal {
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200; }

#microblog-modal,
#reply-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s; }

#microblog-modal.hidden,
#reply-modal.hidden {
  display: none; }

/* Modal Panel: matches microblog panel pattern */
.microblog-modal-panel {
  background: var(--green-bg);
  color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 32rem;
  margin: 0 0.5rem;
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column; }

.microblog-modal-content {
  /* Remove background and color, handled by .microblog-modal-panel */
  width: 100%;
  padding: 0;
  background: none;
  color: inherit; }

.microblog-modal-close {
  background: none;
  border: none;
  color: #e5e7eb;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s;
  margin-right: 0.5rem; }

.microblog-modal-close:hover {
  color: #fff; }

.microblog-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0; }

.microblog-form {
  display: flex;
  flex-direction: column;
  gap: 1rem; }

.microblog-form label {
  font-size: 1rem;
  font-weight: 500;
  color: #f1f5f9;
  margin-bottom: 0.25rem; }

.microblog-form input[type="text"] {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.5rem;
  font-size: 1rem;
  color: #222;
  background: #fff;
  margin-top: 0.25rem; }

.microblog-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 7rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.5rem;
  font-size: 1rem;
  color: #222;
  background: #fff;
  margin-top: 0.25rem;
  resize: vertical;
  box-sizing: border-box; }

.microblog-form .microblog-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem; }

.microblog-btn {
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s; }

.microblog-btn:hover {
  background: #2563eb; }

.microblog-btn-cancel {
  background: #64748b; }

.microblog-btn-cancel:hover {
  background: #475569; }

/* Floating Action Button */
/* Container that holds the microblog FAB */
.micro-actions-wrapper {
  position: fixed;
  top: 5rem;
  right: 2rem;
  z-index: 1050;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  --fab-size: 56px;
  /* default diameter for circular FABs */ }

/* Floating Action Button */
.microblog-fab {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fab-size, 56px);
  min-width: calc(var(--fab-size, 56px) + 40px); }

.microblog-fab:hover {
  background: #1e40af; }

@media (max-width: 600px) {
  .micro-actions-wrapper {
    top: 1rem;
    right: 1rem; }

  .microblog-fab {
    font-size: 1.2rem;
    min-width: 56px;
    height: var(--fab-size, 56px); } }
/* Side Panel */
.microblog-panel {
  background: var(--green-bg);
  color: var(--white);
  position: fixed;
  top: 5rem;
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: calc(100vh - 5rem - 3rem);
  /* leave 3rem for footer */
  margin-bottom: 3rem;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column; }

.microblog-panel.open {
  transform: translateX(0); }

.microblog-panel-header,
.microblog-modal-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb; }

.microblog-panel-title,
.microblog-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 1rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.microblog-close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 1; }

.microblog-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem; }

@media (max-width: 768px) {
  .microblog-panel {
    width: 95vw;
    max-width: 95vw;
    height: 85vh;
    border-radius: 12px;
    /* Centered Modal Style */
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    /* Reset right positioning */
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s ease; }

  .microblog-panel.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible; }

  .microblog-fab {
    right: 2rem;
    top: 5rem;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    min-width: auto;
    min-height: auto;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } }
/* Example: Scrollable table container */
#microblog-playground .max-h-\[45vh\],
#microblog-playground .max-h-\[60vh\],
#microblog-playground .max-h-\[70vh\] {
  overflow-y: auto; }

/* Guest Signup Styles */
.guest-signup-toggle-btn {
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-left: auto; }

.guest-signup-toggle-btn:hover {
  background: #059669; }

.guest-signup-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2); }

.guest-signup-title {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff; }

.guest-form-group {
  margin-bottom: 0.75rem; }

.guest-form-group input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  font-size: 1rem;
  color: #222;
  background: #fff;
  box-sizing: border-box; }

.guest-submit-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%; }

.guest-submit-btn:hover:not(:disabled) {
  background: #1e40af; }

.guest-submit-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed; }

.guest-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.2rem; }

/* Add more microblog-specific styles as needed */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

/* ===================== Grading Button ===================== */
.grading-button-container {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0; }

.grading-btn {
  padding: 10px 22px;
  border-radius: 999px;
  background: #4CAFEF;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.2s; }
  .grading-btn:hover {
    background: #007ACC; }

/* ===================== Fullscreen Grading Overlay ===================== */
.grading-panel {
  position: fixed;
  inset: 0;
  z-index: 1300;
  /* ABOVE microblog */
  background: #000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  isolation: isolate; }

/* Hidden state */
.grading-panel[hidden] {
  display: none; }

/* ===================== Inner Panel ===================== */
.grading-panel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
  color: white;
  pointer-events: auto; }

/* ===================== Header ===================== */
.grading-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #000;
  border-bottom: 1px solid #333;
  z-index: 1; }
  .grading-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: white; }
  .grading-header .grading-close-btn {
    font-size: 2rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: white; }

/* ===================== Content ===================== */
#grading-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  background: #000;
  color: white; }

/* ===================== Table Styling ===================== */
#grading-content table {
  width: 100%;
  border-collapse: collapse; }
  #grading-content table th,
  #grading-content table td {
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid #333;
    color: white; }
  #grading-content table th {
    background-color: #2A2D2D;
    font-weight: 600; }
  #grading-content table tr:nth-child(even) {
    background-color: #1F1F1F; }
  #grading-content table tr:nth-child(odd) {
    background-color: #000; }

#rubric-container {
  margin-top: 24px;
  padding: 16px;
  border-top: 1px solid #333; }

.rubric-label {
  font-weight: 600; }

.rubric-score {
  padding: 4px; }

.rubric-comment {
  width: 100%;
  min-height: 48px; }

.rubric-footer {
  margin-top: 16px;
  font-size: 1.1em; }

#create-assignment-btn {
  padding: 8px 14px;
  background: #4CAFEF;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s; }
  #create-assignment-btn:hover {
    background: #007ACC; }

#assignment-modal {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; }

.assignment-box {
  background: #2A2D2D;
  padding: 20px;
  width: 300px;
  border-radius: 8px; }

.assignment-box input,
.assignment-box textarea {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 8px;
  background: #000;
  color: white;
  border: 1px solid #333;
  border-radius: 4px; }

.assignment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px; }

#rubric-modal,
#assignment-modal {
  position: fixed;
  inset: 0;
  background: #000;
  align-items: center;
  justify-content: center;
  z-index: 10000; }

#rubric-modal:not([hidden]),
#assignment-modal:not([hidden]) {
  display: flex; }

.rubric-panel,
.assignment-box {
  background: #2A2D2D;
  padding: 16px;
  border-radius: 8px;
  width: 600px; }

.rubric-row {
  display: grid;
  grid-template-columns: 120px 80px 1fr;
  gap: 8px;
  margin-bottom: 8px; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.site-header {
  border-top: 0px solid;
  border-bottom: 1px solid var(--navbar-border);
  font-weight: bold;
  z-index: 999999999; }

.site-nav {
  background-color: transparent; }

.site-nav .page-link {
  line-height: 1.5;
  padding: 5px 10px;
  margin-left: 20px; }

.site-title {
  color: var(--pref-text-color) !important; }

.site-nav .page-link:not(:last-child) {
  margin-right: 0; }

#loginArea {
  margin-left: 20px; }

.site-title,
.site-title:visited,
.site-nav,
.page-link {
  font-weight: bolder; }

@media screen and (max-width: fit-content) {
  .site-title {
    padding-right: 45px; } }
.site-header .wrapper {
  max-width: fit-content !important; }

.project-tooltip-anchor {
  position: relative; }

.project-tooltip {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--navbar-surface);
  color: var(--pref-text-color);
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--navbar-border);
  box-shadow: 0 6px 18px var(--navbar-shadow);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 60;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis; }

.project-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; }

.site-toast-wrap {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none; }

.site-toast {
  pointer-events: auto;
  background: var(--navbar-surface);
  color: var(--pref-text-color);
  border: 1px solid var(--navbar-border);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 10px 30px var(--navbar-shadow);
  display: inline-flex;
  gap: 12px;
  align-items: center;
  max-width: 340px;
  transform: translateX(18px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 320ms ease;
  font-size: 14px; }

.site-toast.show {
  transform: translateX(0);
  opacity: 1; }

.site-toast .toast-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--navbar-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px; }

.site-toast .toast-close:hover {
  color: var(--pref-text-color);
  background: color-mix(in srgb, var(--pref-accent-color) 12%, transparent); }

@media (max-width: 680px) {
  .project-tooltip {
    right: 12px;
    left: 12px;
    top: auto;
    bottom: 12px;
    transform: translateY(6px);
    white-space: normal; }

  .project-tooltip.visible {
    transform: translateY(0); }

  .site-toast-wrap {
    right: 12px;
    left: 12px;
    top: 12px;
    align-items: center; }

  .site-toast {
    max-width: 96%; } }
/* Press Start 2P font loaded globally via head-custom.html */
#score {
  position: relative;
  z-index: 2;
  padding: 5px;
  color: darkred !important; }

#gameBegin,
#gameOver,
#settings,
#leaderboard {
  position: relative;
  z-index: 2; }

#addRow,
#backToGame {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-right: 2rem; }

.submenu {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  border: none;
  position: fixed;
  z-index: 3;
  top: 3.73rem;
  width: fit-content; }
  .submenu .submenu-item {
    display: inline-block;
    margin-right: 2rem; }

.sidebar {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  border: none;
  position: fixed;
  z-index: 3;
  top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5-second transition effect to slide in the sidebar */
  width: 0px;
  padding-left: 0px;
  padding-right: 0px;
  overflow-y: scroll;
  height: 75%; }

.leaderboardDropDown {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  border: none;
  position: fixed;
  z-index: 3;
  top: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5-second transition effect to slide in the sidebar */
  width: 0px;
  padding-left: 0px;
  padding-right: 0px;
  height: 75%;
  scroll-behavior: auto; }

#leaderboardTitle {
  text-align: center;
  color: #3d3af2;
  text-decoration: wavy;
  font-weight: 900;
  font-size: 70px;
  font-family: "Press Start 2P", system-ui;
  background-color: #b01a2e; }

.table.scores,
th,
tr,
td {
  text-align: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; }

.table.scores th {
  background-color: #e0b2b2; }
.table.scores tr td {
  border: 1px solid #742929; }
  .table.scores tr td:nth-child(odd) {
    background-color: #e85252; }
  .table.scores tr td:nth-child(even) {
    background-color: #be6464; }

.table.levels tr {
  cursor: pointer; }
  .table.levels tr td {
    border: 1px solid #6272a4; }
  .table.levels tr:hover {
    background-color: #6272a4; }
    .table.levels tr:hover td {
      background-color: inherit; }

.input.userID {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  height: 30px;
  border-radius: 5px;
  padding: 5px;
  width: 100px; }

.input.gameSpeed,
.input.gravity {
  color: #FFFFFF !important;
  background-color: #000000 !important;
  border: 1px solid #6272a4;
  height: 30px;
  border-radius: 5px;
  padding: 5px;
  width: 40px;
  text-align: right; }

#toggleCanvasEffect,
#background,
#platform {
  animation: fadein 3s; }

#startGame,
#marioSays {
  animation: flash 0.5s infinite; }

@keyframes flash {
  50% {
    opacity: 0; } }
@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.bottom-matter {
  position: relative; }

#cut-story {
  visibility: hidden;
  min-width: 250px;
  background-color: #ff5d0c;
  color: white;
  font-family: "Press Start 2P", system-ui;
  border-radius: 4px;
  position: fixed;
  text-align: center;
  justify-content: center;
  border: 4px solid;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 50%;
  padding: 10px;
  bottom: 0px; }

/*creating class with javascript*/
#cut-story.show {
  visibility: visible;
  -webkit-animation: fadein 3s;
  animation: fadein 3s; }

#cut-story.hide {
  visibility: visible;
  -webkit-animation: fadeout 0.5s 3s;
  animation: fadeout 0.5s 3s; }

body {
  background: #FFB6C1; }

#container {
  width: 95%;
  height: 100vh;
  display: flex;
  text-align: center; }

.fun_facts {
  visibility: hidden;
  min-width: 250px;
  background-color: #0cebff;
  color: #096b4e;
  font-family: "Press Start 2P", system-ui;
  border-radius: 20px;
  position: absolute;
  text-align: center;
  border: 4px solid;
  left: 50%;
  transform: translate(-50%, -20%);
  width: 90%;
  padding: 10px;
  bottom: 0px;
  z-index: 1; }

.fun_facts h3,
.fun_facts p {
  font-size: 1rem; }

.quiz-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px; }

.question-section {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px; }

.question {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px; }

.answer-input {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px; }

.submit-btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer; }
  .submit-btn:hover {
    background-color: #45a049; }
  .submit-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed; }

.score-display {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0; }

.leaderboard {
  margin-top: 30px; }
  .leaderboard table {
    width: 100%;
    border-collapse: collapse; }
  .leaderboard th, .leaderboard td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd; }
  .leaderboard th {
    background-color: #4CAF50;
    color: white; }
  .leaderboard tr:hover {
    background-color: #f5f5f5; }

.user-form {
  margin-bottom: 20px; }
  .user-form input {
    padding: 8px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 10px; }

.error-msg {
  color: red;
  margin: 10px 0; }

.success-msg {
  color: green;
  margin: 10px 0; }

.rps-lesson .lesson-wrapper {
  background: #121212;
  /* slightly lighter than page background */
  border-radius: 12px;
  padding: 40px 32px;
  margin: 40px auto;
  max-width: 1000px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  border: 1px solid #000000; }

.rps-lesson {
  background: #121212;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  margin: 0;
  padding: 0; }

.rps-lesson .subtitle {
  text-align: center;
  color: #e5e7eb;
  font-style: italic;
  font-size: 1.15em;
  margin-bottom: 24px; }

.rps-lesson .play-instructions {
  background: #121212;
  color: #fff;
  border: 2px solid #ffa600;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  margin: 20px auto 32px auto;
  padding: 20px;
  max-width: 700px; }

.rps-lesson .game-buttons {
  text-align: center;
  margin: 32px 0 24px 0;
  display: flex;
  justify-content: center;
  gap: 32px; }

.rps-lesson button {
  background: #232336;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: bold;
  padding: 10px 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background 0.2s, color 0.2s, transform 0.2s; }

.rps-lesson button:hover {
  background: #ffa600;
  color: #232336;
  transform: translateY(-2px); }

.rps-lesson button:active {
  background: #c06c84;
  color: #fff;
  transform: translateY(-1px); }

.rps-lesson h1 {
  color: #fff;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: none;
  padding-bottom: 0; }

.rps-lesson h2 {
  color: #fff;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 36px;
  margin-bottom: 18px;
  border-left: 5px solid #c06c84;
  padding-left: 18px; }

.rps-lesson h3 {
  color: #fff;
  font-size: 1.25em;
  font-weight: bold;
  margin-top: 28px;
  margin-bottom: 12px; }

.rps-lesson h4 {
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 8px; }

.rps-lesson p, .rps-lesson li, .rps-lesson strong {
  color: #e5e7eb;
  font-size: 0.98em; }

.rps-lesson ul, .rps-lesson ol {
  margin: 15px 0;
  padding-left: 30px; }

.rps-lesson li {
  margin: 8px 0; }

/* Section highlight for all major content blocks */
.rps-lesson .section-highlight {
  background: #121212;
  border-radius: 16px;
  border: 2px solid #c06c84;
  box-shadow: 0 0 0 2px #c06c84;
  padding: 32px 28px 24px 28px;
  margin-bottom: 32px; }

.rps-lesson .console-example, .rps-lesson .code-block {
  background: #000 !important;
  color: #f6f5f4 !important;
  padding: 18px;
  font-family: 'Courier New', monospace;
  margin: 18px 0;
  border: 2px solid #8e6fc4;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 1em; }

.rps-lesson .checkpoint-section {
  margin: 32px 0 24px 0;
  padding: 24px;
  background: #111112;
  border-radius: 12px;
  border: 2px solid #ffd700;
  box-shadow: 0 2px 12px #0004; }

.rps-lesson .checkpoint-label {
  font-weight: bold;
  color: #ffffff;
  font-size: 1.1em;
  margin-bottom: 8px;
  display: block; }

.rps-lesson .checkpoint-input {
  width: 100%;
  padding: 10px;
  font-size: 1em;
  border-radius: 6px;
  border: 2px solid #444;
  margin-bottom: 10px;
  background: #121212;
  color: #fff;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s; }

.rps-lesson .checkpoint-input.correct {
  border: 2px solid #22c55e;
  box-shadow: 0 0 8px #22c55e;
  background: #1e2e1e; }

.rps-lesson .checkpoint-input.incorrect {
  border: 2px solid #ef4444;
  box-shadow: 0 0 8px #ef4444;
  background: #2e1e1e; }

.rps-lesson .checkpoint-feedback {
  font-weight: bold;
  margin-bottom: 8px;
  min-height: 24px; }

.rps-lesson .checkpoint-feedback.correct {
  color: #22c55e; }

.rps-lesson .checkpoint-feedback.incorrect {
  color: #ef4444; }

.rps-lesson .show-answer-btn {
  background: #111112;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 0; }

.rps-lesson .show-answer-btn:hover {
  background: #8e6fc4; }

.rps-lesson .flowchart-box {
  border: 2px solid #fff !important;
  background: #121212;
  border-radius: 8px;
  max-width: 500px;
  text-align: left;
  padding: 1rem 1.5rem; }

.rps-lesson .flowchart-arrow {
  color: #fff !important;
  font-size: 2.5rem; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
@keyframes u2SlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes u2Shake {
  0%, 100% {
    transform: translateX(0); }
  20%, 60% {
    transform: translateX(-4px); }
  40%, 80% {
    transform: translateX(4px); } }
@keyframes u2Pop {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.08); }
  100% {
    transform: scale(1); } }
.u2-card {
  margin-bottom: 2rem;
  max-width: 880px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  position: relative; }
  .u2-card__header {
    background: var(--pref-accent-color);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap; }
  .u2-card__title {
    margin: 0;
    color: var(--pref-bg-color);
    font-weight: 700;
    font-size: 18px; }
    @media (max-width: 768px) {
      .u2-card__title {
        font-size: 14.4px; } }
  .u2-card__subtitle {
    margin: 4px 0 0;
    color: var(--pref-bg-color);
    opacity: 0.85;
    font-size: 14px;
    flex-basis: 100%; }
    @media (max-width: 768px) {
      .u2-card__subtitle {
        font-size: 11.2px; } }
  .u2-card__badge {
    display: none;
    background: var(--pref-bg-color);
    color: #4ADE80;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap; }
    @media (max-width: 768px) {
      .u2-card__badge {
        font-size: 9.6px; } }
  .u2-card--done .u2-card__badge {
    display: inline-block;
    animation: u2Pop 0.4s ease; }
  .u2-card__body {
    background: var(--pref-bg-color);
    padding: 20px; }
  .u2-card__prompt {
    color: var(--pref-text-color);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px; }
    @media (max-width: 768px) {
      .u2-card__prompt {
        font-size: 11.2px; } }
    .u2-card__prompt code {
      font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
      background: var(--panel-mid);
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--pref-text-color); }
  .u2-card__hint {
    color: var(--text-muted);
    font-size: 12px;
    margin: 8px 0 0;
    font-style: italic; }
    @media (max-width: 768px) {
      .u2-card__hint {
        font-size: 9.6px; } }

.u2-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 8px 15px;
  gap: 6px; }
  .u2-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .u2-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .u2-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .u2-btn {
      height: 44px; } }
  .u2-btn--primary {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color); }
  .u2-btn--success {
    background: #4ADE80;
    border-color: #4ADE80;
    color: var(--pref-bg-color); }
  .u2-btn--warn {
    background: #ED8936;
    border-color: #ED8936;
    color: var(--pref-bg-color); }
  .u2-btn--ghost {
    background: var(--panel-mid);
    border-color: var(--ui-border);
    color: var(--pref-text-color); }
  .u2-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none; }

.u2-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 15px; }

.u2-feedback {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pref-text-color); }
  @media (max-width: 768px) {
    .u2-feedback {
      font-size: 11.2px; } }
  .u2-feedback code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color); }
  .u2-feedback--correct {
    display: block;
    background: rgba(74, 222, 128, 0.12);
    border-left: 4px solid #4ADE80;
    animation: u2SlideDown 0.3s ease; }
  .u2-feedback--incorrect {
    display: block;
    background: rgba(229, 62, 62, 0.12);
    border-left: 4px solid #E53E3E;
    animation: u2Shake 0.4s ease; }
  .u2-feedback--info {
    display: block;
    background: rgba(56, 178, 172, 0.12);
    border-left: 4px solid #38B2AC;
    animation: u2SlideDown 0.3s ease; }

.u2-code {
  background: var(--panel-mid);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px 0;
  margin: 0 0 12px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  counter-reset: u2line; }
  @media (max-width: 768px) {
    .u2-code {
      font-size: 11.2px; } }
  .u2-code__line {
    display: flex;
    white-space: pre;
    padding: 1px 12px 1px 0;
    color: var(--pref-text-color);
    border-left: 4px solid transparent;
    transition: background 0.15s, border-color 0.15s; }
    .u2-code__line::before {
      counter-increment: u2line;
      content: counter(u2line);
      display: inline-block;
      width: 2.2em;
      margin-right: 10px;
      text-align: right;
      color: var(--text-muted);
      user-select: none;
      flex-shrink: 0; }
    .u2-code__line--active {
      background: rgba(251, 191, 36, 0.18);
      border-left-color: #FBBF24; }
    .u2-code__line--taken {
      background: rgba(74, 222, 128, 0.14);
      border-left-color: #4ADE80; }
    .u2-code__line--skipped {
      opacity: 0.45; }

.u2-console {
  background: var(--bg-0);
  color: var(--pref-text-color);
  border: 1px solid var(--ui-border);
  border-left: 3px solid #4ADE80;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  white-space: pre-wrap;
  min-height: 48px;
  max-height: 220px;
  overflow-y: auto; }
  @media (max-width: 768px) {
    .u2-console {
      font-size: 11.2px; } }
  .u2-console__label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 4px;
    font-family: var(--pref-font-family); }
    @media (max-width: 768px) {
      .u2-console__label {
        font-size: 8px; } }
  .u2-console__empty {
    color: var(--text-muted);
    font-style: italic; }

.u2-mcq__q {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--ui-border); }
  .u2-mcq__q:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0; }
.u2-mcq__number {
  color: var(--pref-accent-color);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px; }
  @media (max-width: 768px) {
    .u2-mcq__number {
      font-size: 9.6px; } }
.u2-mcq__options {
  display: flex;
  flex-direction: column;
  gap: 8px; }
.u2-mcq__option {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 15px;
  border-radius: 8px;
  border-width: 2px;
  line-height: 1.4;
  transition: all 0.2s; }
  .u2-mcq__option:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .u2-mcq__option:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .u2-mcq__option code {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    background: transparent;
    padding: 0;
    color: inherit; }
  .u2-mcq__option--correct {
    border-color: #4ADE80 !important;
    background: rgba(74, 222, 128, 0.12) !important; }
  .u2-mcq__option--incorrect {
    border-color: #E53E3E !important;
    background: rgba(229, 62, 62, 0.12) !important; }
  .u2-mcq__option--disabled {
    pointer-events: none;
    opacity: 0.55; }
.u2-mcq__feedback {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pref-text-color); }
  @media (max-width: 768px) {
    .u2-mcq__feedback {
      font-size: 11.2px; } }
  .u2-mcq__feedback code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color); }
  .u2-mcq__feedback--correct {
    display: block;
    background: rgba(74, 222, 128, 0.12);
    border-left: 4px solid #4ADE80;
    animation: u2SlideDown 0.3s ease; }
  .u2-mcq__feedback--incorrect {
    display: block;
    background: rgba(229, 62, 62, 0.12);
    border-left: 4px solid #E53E3E;
    animation: u2Shake 0.4s ease; }
  .u2-mcq__feedback--info {
    display: block;
    background: rgba(56, 178, 172, 0.12);
    border-left: 4px solid #38B2AC;
    animation: u2SlideDown 0.3s ease; }

.u2-fill__row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap; }
.u2-fill__input {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  cursor: text;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  min-width: 140px;
  flex: 1 1 200px; }
  .u2-fill__input:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .u2-fill__input:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .u2-fill__input--correct {
    border-color: #4ADE80 !important; }
  .u2-fill__input--incorrect {
    border-color: #E53E3E !important; }
.u2-fill__feedback {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pref-text-color); }
  @media (max-width: 768px) {
    .u2-fill__feedback {
      font-size: 11.2px; } }
  .u2-fill__feedback code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color); }
  .u2-fill__feedback--correct {
    display: block;
    background: rgba(74, 222, 128, 0.12);
    border-left: 4px solid #4ADE80;
    animation: u2SlideDown 0.3s ease; }
  .u2-fill__feedback--incorrect {
    display: block;
    background: rgba(229, 62, 62, 0.12);
    border-left: 4px solid #E53E3E;
    animation: u2Shake 0.4s ease; }
  .u2-fill__feedback--info {
    display: block;
    background: rgba(56, 178, 172, 0.12);
    border-left: 4px solid #38B2AC;
    animation: u2SlideDown 0.3s ease; }

.u2-order__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px; }
.u2-order__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-mid);
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: grab;
  user-select: none;
  color: var(--pref-text-color);
  transition: border-color 0.2s, background 0.2s; }
  .u2-order__item:hover {
    border-color: var(--pref-accent-color); }
  .u2-order__item.dragging {
    opacity: 0.4;
    cursor: grabbing; }
  .u2-order__item.drag-over {
    border-color: var(--pref-accent-color);
    border-style: dashed; }
  .u2-order__item--correct {
    border-color: #4ADE80;
    background: rgba(74, 222, 128, 0.1); }
  .u2-order__item--incorrect {
    border-color: #E53E3E;
    background: rgba(229, 62, 62, 0.1); }
.u2-order__handle {
  color: var(--text-muted);
  font-weight: 700;
  flex-shrink: 0; }
.u2-order__code {
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  white-space: pre;
  flex: 1;
  overflow-x: auto; }
  @media (max-width: 768px) {
    .u2-order__code {
      font-size: 11.2px; } }
.u2-order__moves {
  display: flex;
  gap: 4px;
  flex-shrink: 0; }
  .u2-order__moves button {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
    font-size: 12px; }
    .u2-order__moves button:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .u2-order__moves button:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
.u2-order__feedback {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pref-text-color); }
  @media (max-width: 768px) {
    .u2-order__feedback {
      font-size: 11.2px; } }
  .u2-order__feedback code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color); }
  .u2-order__feedback--correct {
    display: block;
    background: rgba(74, 222, 128, 0.12);
    border-left: 4px solid #4ADE80;
    animation: u2SlideDown 0.3s ease; }
  .u2-order__feedback--incorrect {
    display: block;
    background: rgba(229, 62, 62, 0.12);
    border-left: 4px solid #E53E3E;
    animation: u2Shake 0.4s ease; }
  .u2-order__feedback--info {
    display: block;
    background: rgba(56, 178, 172, 0.12);
    border-left: 4px solid #38B2AC;
    animation: u2SlideDown 0.3s ease; }

.u2-sort__pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  background: var(--panel-mid);
  border: 2px dashed var(--ui-border);
  border-radius: 8px;
  margin-bottom: 15px; }
.u2-sort__item {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  padding: 6px 12px;
  border-radius: 6px;
  border-width: 2px;
  font-size: 14px;
  cursor: grab;
  user-select: none; }
  .u2-sort__item:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .u2-sort__item:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  @media (max-width: 768px) {
    .u2-sort__item {
      font-size: 11.2px; } }
  .u2-sort__item code {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    color: inherit;
    background: transparent;
    padding: 0; }
  .u2-sort__item--selected {
    border-color: var(--pref-accent-color);
    background: var(--panel-mid);
    box-shadow: 0 0 0 2px var(--pref-accent-color); }
  .u2-sort__item--correct {
    border-color: #4ADE80 !important;
    background: rgba(74, 222, 128, 0.12) !important; }
  .u2-sort__item--incorrect {
    border-color: #E53E3E !important;
    background: rgba(229, 62, 62, 0.12) !important; }
  .u2-sort__item.dragging {
    opacity: 0.4; }
.u2-sort__buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; }
.u2-sort__bucket {
  background: var(--panel-mid);
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.2s; }
  .u2-sort__bucket:hover, .u2-sort__bucket.drag-over {
    border-color: var(--pref-accent-color); }
.u2-sort__bucket-title {
  color: var(--pref-accent-color);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  margin-bottom: 4px; }
  @media (max-width: 768px) {
    .u2-sort__bucket-title {
      font-size: 11.2px; } }
.u2-sort__help {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0 0 8px; }
  @media (max-width: 768px) {
    .u2-sort__help {
      font-size: 9.6px; } }
.u2-sort__feedback {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pref-text-color); }
  @media (max-width: 768px) {
    .u2-sort__feedback {
      font-size: 11.2px; } }
  .u2-sort__feedback code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color); }
  .u2-sort__feedback--correct {
    display: block;
    background: rgba(74, 222, 128, 0.12);
    border-left: 4px solid #4ADE80;
    animation: u2SlideDown 0.3s ease; }
  .u2-sort__feedback--incorrect {
    display: block;
    background: rgba(229, 62, 62, 0.12);
    border-left: 4px solid #E53E3E;
    animation: u2Shake 0.4s ease; }
  .u2-sort__feedback--info {
    display: block;
    background: rgba(56, 178, 172, 0.12);
    border-left: 4px solid #38B2AC;
    animation: u2SlideDown 0.3s ease; }

.u2-trace__params {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px; }
  .u2-trace__params label {
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px; }
    @media (max-width: 768px) {
      .u2-trace__params label {
        font-size: 11.2px; } }
  .u2-trace__params input, .u2-trace__params select {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    cursor: text;
    padding: 4px 8px;
    border-radius: 4px;
    width: 80px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }
    .u2-trace__params input:hover, .u2-trace__params select:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .u2-trace__params input:focus, .u2-trace__params select:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
  .u2-trace__params select {
    cursor: pointer;
    width: auto; }
.u2-trace__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .u2-trace__layout {
      grid-template-columns: 1fr; } }
.u2-trace__state {
  display: flex;
  flex-direction: column;
  gap: 12px; }
.u2-trace__vars {
  width: 100%;
  border-collapse: collapse;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px; }
  @media (max-width: 768px) {
    .u2-trace__vars {
      font-size: 11.2px; } }
  .u2-trace__vars th, .u2-trace__vars td {
    border: 1px solid var(--ui-border);
    padding: 4px 8px;
    text-align: left;
    color: var(--pref-text-color); }
  .u2-trace__vars th {
    background: var(--panel-mid);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px; }
    @media (max-width: 768px) {
      .u2-trace__vars th {
        font-size: 8px; } }
  .u2-trace__vars td.changed {
    background: rgba(251, 191, 36, 0.2);
    font-weight: 700; }
.u2-trace__extra {
  margin-top: 2px; }
.u2-trace__note {
  margin-top: 12px;
  padding: 12px;
  background: var(--panel-mid);
  border-radius: 8px;
  border-left: 3px solid var(--pref-accent-color);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  min-height: 40px; }
  @media (max-width: 768px) {
    .u2-trace__note {
      font-size: 11.2px; } }
  .u2-trace__note strong {
    color: var(--pref-accent-color); }
  .u2-trace__note code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }
.u2-trace__counter {
  color: var(--text-muted);
  font-size: 12px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  margin-left: auto; }
  @media (max-width: 768px) {
    .u2-trace__counter {
      font-size: 9.6px; } }
.u2-trace__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px; }
.u2-trace__cell {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  background: var(--panel-mid);
  color: var(--pref-text-color);
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  transition: all 0.15s; }
  @media (max-width: 768px) {
    .u2-trace__cell {
      font-size: 11.2px; } }
  .u2-trace__cell--active {
    background: var(--pref-accent-color);
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    transform: scale(1.1); }
  .u2-trace__cell--hit {
    background: rgba(74, 222, 128, 0.35);
    border-color: #4ADE80; }
  .u2-trace__cell--done {
    background: rgba(74, 222, 128, 0.2);
    border-color: #4ADE80; }
  .u2-trace__cell--dim {
    opacity: 0.35; }
.u2-trace__grid {
  display: grid;
  gap: 4px;
  width: max-content; }

.u2-truth__table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  margin-bottom: 12px; }
  @media (max-width: 768px) {
    .u2-truth__table {
      font-size: 11.2px; } }
  .u2-truth__table th, .u2-truth__table td {
    border: 1px solid var(--ui-border);
    padding: 6px 8px;
    text-align: center;
    color: var(--pref-text-color); }
  .u2-truth__table th {
    background: var(--panel-mid);
    font-size: 12px; }
    @media (max-width: 768px) {
      .u2-truth__table th {
        font-size: 9.6px; } }
  .u2-truth__table th.expr {
    color: var(--pref-accent-color); }
.u2-truth__given {
  color: var(--text-muted); }
.u2-truth__cell {
  cursor: pointer;
  user-select: none;
  min-width: 48px;
  transition: background 0.15s; }
  .u2-truth__cell:hover {
    background: var(--panel-mid); }
  .u2-truth__cell--t {
    color: #4ADE80;
    font-weight: 700; }
  .u2-truth__cell--f {
    color: #ED8936;
    font-weight: 700; }
  .u2-truth__cell--correct {
    background: rgba(74, 222, 128, 0.18) !important; }
  .u2-truth__cell--incorrect {
    background: rgba(229, 62, 62, 0.18) !important; }
.u2-truth__feedback {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pref-text-color); }
  @media (max-width: 768px) {
    .u2-truth__feedback {
      font-size: 11.2px; } }
  .u2-truth__feedback code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color); }
  .u2-truth__feedback--correct {
    display: block;
    background: rgba(74, 222, 128, 0.12);
    border-left: 4px solid #4ADE80;
    animation: u2SlideDown 0.3s ease; }
  .u2-truth__feedback--incorrect {
    display: block;
    background: rgba(229, 62, 62, 0.12);
    border-left: 4px solid #E53E3E;
    animation: u2Shake 0.4s ease; }
  .u2-truth__feedback--info {
    display: block;
    background: rgba(56, 178, 172, 0.12);
    border-left: 4px solid #38B2AC;
    animation: u2SlideDown 0.3s ease; }

.u2-live__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 12px; }
.u2-live__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px; }
  .u2-live__field label {
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
    @media (max-width: 768px) {
      .u2-live__field label {
        font-size: 11.2px; } }
  .u2-live__field input[type="number"], .u2-live__field input[type="text"], .u2-live__field select {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    cursor: text;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }
    .u2-live__field input[type="number"]:hover, .u2-live__field input[type="text"]:hover, .u2-live__field select:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .u2-live__field input[type="number"]:focus, .u2-live__field input[type="text"]:focus, .u2-live__field select:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
  .u2-live__field select {
    cursor: pointer; }
  .u2-live__field input[type="range"] {
    accent-color: var(--pref-accent-color);
    width: 180px; }
  .u2-live__field input[type="checkbox"] {
    accent-color: var(--pref-accent-color);
    width: 18px;
    height: 18px; }
.u2-live__value {
  color: var(--pref-accent-color);
  font-weight: 700; }
.u2-live__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .u2-live__layout {
      grid-template-columns: 1fr; } }
.u2-live__explain {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5; }
  @media (max-width: 768px) {
    .u2-live__explain {
      font-size: 11.2px; } }
  .u2-live__explain strong {
    color: var(--pref-accent-color); }
  .u2-live__explain code {
    background: var(--panel-mid);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }

.u2-flow__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .u2-flow__layout {
      grid-template-columns: 1fr; } }
.u2-flow__chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; }
.u2-flow__node {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 2px solid var(--ui-border);
  background: var(--panel-mid);
  color: var(--pref-text-color);
  text-align: center;
  font-size: 14px;
  transition: all 0.2s;
  box-sizing: border-box; }
  @media (max-width: 768px) {
    .u2-flow__node {
      font-size: 11.2px; } }
  .u2-flow__node--start, .u2-flow__node--end {
    border-radius: 999px; }
  .u2-flow__node--process {
    border-radius: 6px; }
  .u2-flow__node--decision {
    border-radius: 6px;
    border-style: dashed;
    color: var(--pref-accent-color);
    font-weight: 600; }
  .u2-flow__node--active {
    border-color: #FBBF24;
    background: rgba(251, 191, 36, 0.18);
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
  .u2-flow__node--visited {
    border-color: #4ADE80; }
.u2-flow__arrow {
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 0;
  font-size: 16px; }
  @media (max-width: 768px) {
    .u2-flow__arrow {
      font-size: 12.8px; } }
.u2-flow__jump {
  color: var(--text-muted);
  font-size: 10px;
  font-style: italic; }
  @media (max-width: 768px) {
    .u2-flow__jump {
      font-size: 8px; } }
.u2-flow__panel {
  display: flex;
  flex-direction: column;
  gap: 12px; }
.u2-flow__question {
  color: var(--pref-text-color);
  font-size: 14px;
  padding: 12px;
  background: var(--panel-mid);
  border-radius: 8px;
  border-left: 3px solid var(--pref-accent-color);
  min-height: 40px; }
  @media (max-width: 768px) {
    .u2-flow__question {
      font-size: 11.2px; } }
.u2-flow__log {
  background: var(--panel-mid);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 240px;
  overflow-y: auto;
  color: var(--text-muted);
  font-size: 12px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }
  @media (max-width: 768px) {
    .u2-flow__log {
      font-size: 9.6px; } }
  .u2-flow__log div {
    padding: 1px 0; }
  .u2-flow__log strong {
    color: var(--pref-text-color); }

.u2-count__row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px; }
.u2-count__input {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  cursor: text;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  width: 140px; }
  .u2-count__input:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .u2-count__input:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .u2-count__input--correct {
    border-color: #4ADE80 !important; }
  .u2-count__input--incorrect {
    border-color: #E53E3E !important; }
.u2-count__display {
  display: flex;
  gap: 15px;
  align-items: stretch;
  margin-top: 12px;
  flex-wrap: wrap; }
.u2-count__meter {
  min-width: 150px;
  text-align: center;
  background: var(--panel-mid);
  border: 2px solid var(--pref-accent-color);
  border-radius: 8px;
  padding: 12px; }
  .u2-count__meter .count-value {
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 34px;
    font-weight: 700;
    line-height: 1; }
  .u2-count__meter .count-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px; }
    @media (max-width: 768px) {
      .u2-count__meter .count-label {
        font-size: 8px; } }
.u2-count__console {
  flex: 1 1 200px; }
.u2-count__feedback {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pref-text-color); }
  @media (max-width: 768px) {
    .u2-count__feedback {
      font-size: 11.2px; } }
  .u2-count__feedback code {
    background: var(--pref-bg-color);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--pref-text-color); }
  .u2-count__feedback--correct {
    display: block;
    background: rgba(74, 222, 128, 0.12);
    border-left: 4px solid #4ADE80;
    animation: u2SlideDown 0.3s ease; }
  .u2-count__feedback--incorrect {
    display: block;
    background: rgba(229, 62, 62, 0.12);
    border-left: 4px solid #E53E3E;
    animation: u2Shake 0.4s ease; }
  .u2-count__feedback--info {
    display: block;
    background: rgba(56, 178, 172, 0.12);
    border-left: 4px solid #38B2AC;
    animation: u2SlideDown 0.3s ease; }

.u2-quiz__score {
  text-align: center;
  padding: 15px;
  background: var(--panel-mid);
  border-radius: 10px;
  margin-top: 15px; }
  .u2-quiz__score .score-label {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 4px; }
    @media (max-width: 768px) {
      .u2-quiz__score .score-label {
        font-size: 11.2px; } }
  .u2-quiz__score .score-value {
    color: var(--pref-text-color);
    font-size: 30px;
    font-weight: 700; }
  .u2-quiz__score .score-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px; }
    @media (max-width: 768px) {
      .u2-quiz__score .score-sub {
        font-size: 9.6px; } }
  .u2-quiz__score .score-bar {
    margin-top: 10px;
    height: 8px;
    background: var(--ui-border);
    border-radius: 4px;
    overflow: hidden; }
    .u2-quiz__score .score-bar .score-fill {
      height: 100%;
      background: var(--pref-accent-color);
      border-radius: 4px;
      transition: width 0.5s ease; }

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

.dm-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: 12px;
  border-radius: 50%;
  line-height: 1;
  text-decoration: none; }
  .dm-bell:hover, .dm-bell:focus-visible {
    background: color-mix(in srgb, currentColor 14%, transparent);
    text-decoration: none; }
  .dm-bell svg {
    fill: currentColor;
    pointer-events: none; }
  .dm-bell[hidden] {
    display: none; }
  @media screen and (max-width: 600px) {
    .dm-bell {
      margin-left: 4px; } }

.dm-bell-badge {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc1e1e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none; }
  .dm-bell-badge[hidden] {
    display: none; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.language-reference__toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0; }

.language-reference__toolbar .ocs__links {
  margin: 0; }

.language-reference__search {
  position: relative;
  flex: 1 1 18rem;
  max-width: 30rem;
  margin: 0;
  order: 1; }

.language-reference__search .search-results-wrap {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 24rem;
  overflow-y: auto;
  background: var(--panel, var(--pref-bg-color, #fff));
  border: 1px solid var(--ui-border, currentColor);
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--pref-text-color, #000) 18%, transparent); }

.language-reference__toolbar .ocs__links {
  order: 2;
  margin-left: auto; }

@media (max-width: 48rem) {
  .language-reference__search {
    flex-basis: 100%;
    max-width: none; }

  .language-reference__toolbar .ocs__links {
    margin-left: 0; } }
/* Language reference cards support either a full-card link or a trailing
   action button. Grid rows already stretch cards in a row to equal height. */
.language-reference__cards .ocs__grid-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box; }

.language-reference__cards > a.ocs__grid-cell {
  width: 100%;
  margin: 0;
  color: var(--pref-text-color);
  text-decoration: none; }

.language-reference__cards > .ocs__grid-cell > h2 {
  max-width: 100%;
  margin-inline: 0;
  font-size: 16px;
  overflow-wrap: anywhere; }

/* Both are inline by default; as flex items they would otherwise stretch to
   the full card width. */
.language-reference__cards .ocs__grid-cell > .ocs__status-pill,
.language-reference__cards .ocs__grid-cell > .ocs__btn,
.language-reference__cards .ocs__grid-cell > .iridescent {
  align-self: flex-start; }

.language-reference__cards .ocs__grid-cell > .ocs__btn, .language-reference__cards .ocs__grid-cell > .iridescent {
  margin-top: auto; }

.search-result-preview {
  color: #8e8e93 !important;
  list-style-type: none !important;
  list-style: none !important;
  background-color: #1e1e1e !important;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px; }

.search-result-highlight {
  color: #4bbaff !important;
  font-weight: bold !important;
  list-style-type: none !important;
  list-style: none !important; }

.search-results-list-item .search-result-title {
  color: white !important;
  list-style-type: none !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: #1e1e1e !important;
  padding: 10px; }

.search-results-list-item {
  list-style-type: none !important;
  margin-bottom: 10px !important; }

.stack-clicker-page {
  --stack-clicker-bg: #0d0d0d;
  --stack-clicker-bg-alt: #1a1a1a;
  --stack-clicker-panel: #1e1e1e;
  --stack-clicker-ink: #e0e0e0;
  --stack-clicker-accent: #00ff88;
  --stack-clicker-accent-2: #00cc66;
  --stack-clicker-warn: #ff6b6b;
  --stack-clicker-line: #333333;
  margin: 0;
  font-family: "Fira Code", "Courier New", monospace;
  color: var(--stack-clicker-ink);
  background: var(--stack-clicker-bg);
  min-height: 100vh; }
  .stack-clicker-page * {
    box-sizing: border-box; }
  .stack-clicker-page .app {
    width: min(1100px, 94vw);
    margin: 1.2rem auto;
    display: grid;
    gap: 1rem;
    grid-template-columns: 2fr 1.2fr; }
  .stack-clicker-page .panel {
    background: var(--stack-clicker-panel);
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 1rem;
    box-shadow: none; }
  .stack-clicker-page .hero {
    grid-column: 1; }
  .stack-clicker-page .upgrades {
    grid-column: 2;
    grid-row: 1 / 3; }
  .stack-clicker-page .upgrade-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin-bottom: 0.75rem; }
  .stack-clicker-page .upgrade-tab {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    background: #252525;
    color: var(--stack-clicker-ink);
    padding: 0.45rem 0.5rem;
    font-weight: 700;
    cursor: pointer; }
  .stack-clicker-page .upgrade-tab.active {
    background: var(--stack-clicker-accent);
    color: #000;
    border-color: transparent; }
  .stack-clicker-page .lesson-log {
    grid-column: 1; }
  .stack-clicker-page h1,
  .stack-clicker-page h2 {
    margin: 0 0 0.5rem; }
  .stack-clicker-page .subtitle {
    margin-top: 0;
    opacity: 0.8; }
  .stack-clicker-page .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 0.6rem;
    margin: 0.8rem 0; }
  .stack-clicker-page .stat-card {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 0.6rem;
    background: #252525; }
  .stack-clicker-page .stat-card.warn {
    border-color: #663333;
    background: #2a1f1f; }
  .stack-clicker-page .label {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.85; }
  .stack-clicker-page .value {
    margin: 0.15rem 0 0;
    font-size: 1.25rem;
    font-weight: 700; }
  .stack-clicker-page .push-btn {
    width: 100%;
    border: 1px solid var(--stack-clicker-accent);
    border-radius: 4px;
    padding: 0.85rem;
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    background: var(--stack-clicker-accent);
    cursor: pointer; }
  .stack-clicker-page .ai-btn {
    width: 100%;
    margin-top: 0.6rem;
    border: 1px solid var(--stack-clicker-accent);
    border-radius: 4px;
    padding: 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    background: transparent;
    color: var(--stack-clicker-accent);
    cursor: pointer; }
  .stack-clicker-page .ai-btn:hover {
    background: #333333; }
  .stack-clicker-page .push-btn:active {
    transform: translateY(1px); }
  .stack-clicker-page .meter-wrap {
    margin-top: 0.9rem; }
  .stack-clicker-page .meter {
    width: 100%;
    height: 18px;
    border-radius: 2px;
    background: #252525;
    border: 1px solid var(--stack-clicker-line);
    overflow: hidden; }
  .stack-clicker-page .meter-fill {
    height: 100%;
    width: 0%;
    background: var(--stack-clicker-accent);
    transition: width 120ms linear; }
  .stack-clicker-page .tip {
    margin: 0.7rem 0 0;
    font-size: 0.9rem; }
  .stack-clicker-page .upgrade-list {
    display: grid;
    gap: 0.6rem; }
  .stack-clicker-page .upgrade {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 0.6rem;
    background: #252525; }
  .stack-clicker-page .upgrade h3 {
    margin: 0;
    font-size: 0.95rem; }
  .stack-clicker-page .upgrade p {
    margin: 0.4rem 0;
    font-size: 0.86rem; }
  .stack-clicker-page .upgrade button {
    width: 100%;
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    padding: 0.45rem;
    cursor: pointer;
    background: #333333;
    color: var(--stack-clicker-accent); }
  .stack-clicker-page .upgrade button:disabled {
    cursor: not-allowed;
    opacity: 0.55; }
  .stack-clicker-page #logList {
    margin: 0;
    padding-left: 1.2rem;
    max-height: 220px;
    overflow: auto; }
  .stack-clicker-page #logList li {
    margin-bottom: 0.45rem;
    font-size: 0.9rem; }
  .stack-clicker-page .ai-npc-container {
    margin-top: 0.55rem;
    padding: 0.65rem;
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    background: #252525;
    box-shadow: none; }
  .stack-clicker-page .ai-npc-input {
    background: #1e1e1e;
    border: 1px solid var(--stack-clicker-line);
    color: var(--stack-clicker-ink);
    font-family: "Fira Code", "Courier New", monospace; }
  .stack-clicker-page .ai-npc-input:focus {
    background: #1e1e1e;
    border-color: var(--stack-clicker-accent); }
  .stack-clicker-page .ai-npc-history-btn {
    border: 1px solid var(--stack-clicker-line);
    border-radius: 4px;
    background: #333333;
    color: var(--stack-clicker-accent); }
  .stack-clicker-page .ai-npc-history-btn:hover {
    background: #3a3a3a;
    color: var(--stack-clicker-accent);
    transform: none; }
  .stack-clicker-page .ai-npc-response-area {
    border-left: 4px solid var(--stack-clicker-accent);
    background: #252525;
    color: var(--stack-clicker-ink);
    font-style: normal;
    box-shadow: none; }
  .stack-clicker-page [id^="custom-dialogue-box-"] {
    background: #1e1e1e !important;
    border: 1px solid var(--stack-clicker-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--stack-clicker-ink) !important; }
  .stack-clicker-page [id^="custom-dialogue-box-"] p,
  .stack-clicker-page [id^="custom-dialogue-box-"] em {
    color: var(--stack-clicker-ink) !important;
    background: transparent; }
  .stack-clicker-page [id^="dialogue-close-btn-"] {
    background: #333333;
    border: 1px solid var(--stack-clicker-line);
    color: var(--stack-clicker-accent); }
  .stack-clicker-page [id^="dialogue-close-btn-"]:hover {
    background: #3a3a3a; }
  @media (max-width: 900px) {
    .stack-clicker-page .app {
      grid-template-columns: 1fr; }
    .stack-clicker-page .hero,
    .stack-clicker-page .lesson-log,
    .stack-clicker-page .upgrades {
      grid-column: 1;
      grid-row: auto; } }

/* ---------- User theme: plain color (no gradients) ---------- */
:root {
  --pref-bg-color: #0b1220;
  --pref-text-color: #e6eef8;
  --pref-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --pref-font-size: 18px;
  --pref-accent-color: #3b82f6;
  --pref-success-color: #22c55e;
  --text-muted: #a0a0a0;
  /* Derived UI variables */
  --panel: var(--pref-bg-color);
  --panel-mid: rgba(0,0,0,0.12);
  --ui-bg: rgba(0,0,0,0.06);
  --ui-border: rgba(255,255,255,0.06);
  --emoji-bg: rgba(255,255,255,0.9);
  --glass-tint: color-mix(in srgb, var(--panel) 68%, transparent);
  --navbar-surface: color-mix(in srgb, var(--panel) 96%, var(--pref-text-color) 4%);
  --navbar-border: color-mix(in srgb, var(--pref-text-color) 12%, transparent);
  --navbar-shadow: color-mix(in srgb, var(--pref-text-color) 14%, transparent);
  --navbar-muted: color-mix(in srgb, var(--pref-text-color) 62%, var(--pref-bg-color) 38%); }

/* Scope the user theme */
.user-theme-active,
.user-theme-active.dark {
  background-color: var(--pref-bg-color) !important;
  color: var(--pref-text-color) !important;
  font-family: var(--pref-font-family) !important;
  font-size: var(--pref-font-size) !important; }

/* Make main containers use plain user color (no gradients) */
.user-theme-active {
  /* Full sidebar and topbar use the plain user color */
  /* Infograph module cards: same plain color for every card */
  /* Ensure no alternating rule overrides the plain color */
  /* Columns transparent so card color remains visible */
  /* Questions: background plain; inputs also plain user color */
  /* Generic cards/panels use plain user color */
  /* Links/icons */
  /* Selected capstone navigation uses the page background for contrast. */
  /* Force text color for readability */
  /* Muted secondary text */
  /* Inputs/buttons default */
  /* Invert color to look preferred */
  /* Lesson player specific overrides */
  /* Tailwind background class overrides */
  /* Mermaid style lines cannot contain var(--panel): the parentheses are parsed as node syntax.
     These rules keep rendered diagrams on the live preference colors. */ }
  .user-theme-active .container,
  .user-theme-active .page-content,
  .user-theme-active .wrapper,
  .user-theme-active main,
  .user-theme-active article,
  .user-theme-active .post,
  .user-theme-active .content,
  .user-theme-active .opencs_root {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border-color: var(--ui-border) !important; }
  .user-theme-active .lesson-sidebar,
  .user-theme-active .lesson-topbar,
  .user-theme-active aside,
  .user-theme-active .sidebar,
  .user-theme-active #sidebar,
  .user-theme-active .site-sidebar,
  .user-theme-active .sidebar-container,
  .user-theme-active .side-panel {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border-color: var(--ui-border) !important; }
  .user-theme-active .module-card {
    background-color: var(--pref-bg-color) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--pref-text-color) !important;
    padding: 1rem !important;
    box-shadow: none !important; }
  .user-theme-active .module-card:nth-child(2n) {
    background-color: var(--pref-bg-color) !important; }
  .user-theme-active .module-image-col,
  .user-theme-active .module-keypoints-col,
  .user-theme-active .module-desc-col {
    background: transparent !important;
    color: var(--pref-text-color) !important; }
  .user-theme-active .module-desc-col {
    padding: 0.6rem !important;
    border-radius: 0.375rem !important; }
  .user-theme-active .module-img {
    background-color: transparent !important;
    border-radius: 0.5rem !important;
    object-fit: cover !important; }
  .user-theme-active .module-emoji {
    background-color: var(--emoji-bg) !important;
    color: #0b1220 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important; }
  .user-theme-active .module-overlay {
    background-color: rgba(0, 0, 0, 0.45) !important; }
  .user-theme-active .questions,
  .user-theme-active .question-box,
  .user-theme-active .question-card,
  .user-theme-active .qa-box,
  .user-theme-active .qa-section {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border: 1px solid var(--ui-border) !important; }
  .user-theme-active .question-box input,
  .user-theme-active .question-box textarea,
  .user-theme-active .question-card input,
  .user-theme-active .question-card textarea,
  .user-theme-active input.question-input,
  .user-theme-active textarea.question-input {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    padding: 0.5rem !important; }
  .user-theme-active .card,
  .user-theme-active .panel,
  .user-theme-active .box,
  .user-theme-active .post,
  .user-theme-active .microblog-post,
  .user-theme-active [class*="rounded-xl"],
  .user-theme-active [class*="rounded-lg"] {
    background-color: var(--pref-bg-color) !important;
    border-color: var(--ui-border) !important;
    color: var(--pref-text-color) !important; }
  .user-theme-active a, .user-theme-active a:visited, .user-theme-active a:hover,
  .user-theme-active .module-card a,
  .user-theme-active .module-card svg,
  .user-theme-active header a,
  .user-theme-active .site-header a,
  .user-theme-active aside a,
  .user-theme-active .sidebar a {
    color: var(--pref-accent-color) !important;
    fill: currentColor !important; }
  .user-theme-active .jv-nav-link.active,
  .user-theme-active .ocs__btn.accent.fill,
  .user-theme-active .accent.fill.iridescent {
    color: var(--pref-bg-color) !important;
    background-color: var(--pref-accent-color) !important;
    border-color: var(--pref-accent-color) !important; }
  .user-theme-active p, .user-theme-active span, .user-theme-active div, .user-theme-active li, .user-theme-active td, .user-theme-active th, .user-theme-active label, .user-theme-active h1, .user-theme-active h2, .user-theme-active h3, .user-theme-active h4, .user-theme-active h5, .user-theme-active h6, .user-theme-active small {
    color: var(--pref-text-color) !important; }
  .user-theme-active .text-neutral-400, .user-theme-active .text-neutral-500, .user-theme-active .text-gray-400, .user-theme-active .text-gray-500,
  .user-theme-active .text-slate-400, .user-theme-active .text-slate-500, .user-theme-active .text-zinc-400, .user-theme-active .text-zinc-500,
  .user-theme-active .post-meta, .user-theme-active .post-meta-description {
    color: var(--text-muted) !important; }
  .user-theme-active input, .user-theme-active select, .user-theme-active textarea, .user-theme-active button {
    background-color: var(--panel);
    border: 1px solid var(--pref-accent-color); }
  .user-theme-active button.bg-blue-600, .user-theme-active button.bg-blue-700,
  .user-theme-active button.bg-green-600, .user-theme-active button.bg-green-700,
  .user-theme-active .btn-primary,
  .user-theme-active .save-section-btn,
  .user-theme-active #save-preferences,
  .user-theme-active #save-theme-btn {
    background-color: color-mix(in srgb, var(--pref-accent-color) 65%, white 35%);
    border: 1px solid var(--pref-accent-color); }
  .user-theme-active .lesson-player,
  .user-theme-active .lesson-main,
  .user-theme-active .main-content,
  .user-theme-active .content-wrapper,
  .user-theme-active .lesson-content {
    background-color: var(--pref-bg-color) !important;
    color: var(--pref-text-color) !important; }
  .user-theme-active .lesson-sidebar,
  .user-theme-active .sidebar-header,
  .user-theme-active .sprint-nav,
  .user-theme-active .sprint-section,
  .user-theme-active .lesson-item {
    background-color: var(--panel) !important;
    color: var(--pref-text-color) !important;
    border-color: var(--ui-border) !important; }
  .user-theme-active .sidebar-header h2,
  .user-theme-active .sidebar-header p,
  .user-theme-active .sprint-toggle,
  .user-theme-active .lesson-title,
  .user-theme-active .progress-label {
    color: var(--pref-text-color) !important; }
  .user-theme-active [class*="bg-neutral-"],
  .user-theme-active [class*="bg-gray-"],
  .user-theme-active [class*="bg-slate-"],
  .user-theme-active [class*="bg-zinc-"] {
    background-color: var(--pref-bg-color) !important; }
  .user-theme-active .mermaid .node rect,
  .user-theme-active .mermaid .node polygon,
  .user-theme-active .mermaid .node circle,
  .user-theme-active .mermaid .node ellipse {
    fill: var(--panel) !important;
    stroke: var(--pref-accent-color) !important; }
  .user-theme-active .mermaid .cluster rect {
    fill: var(--panel-mid) !important;
    stroke: var(--pref-accent-color) !important; }
  .user-theme-active .mermaid .flowchart-link,
  .user-theme-active .mermaid .edgePath path {
    stroke: var(--pref-accent-color) !important; }
  .user-theme-active .mermaid marker path {
    fill: var(--pref-accent-color) !important;
    stroke: var(--pref-accent-color) !important; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.ocs__avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--pref-accent-color);
  border-radius: 50%;
  background: color-mix(in srgb, var(--pref-accent-color) 14%, var(--panel));
  color: var(--pref-accent-color);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none; }

/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn, .iridescent {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover, .iridescent:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus, .iridescent:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover, .iridescent:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn, .iridescent {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small, .small.iridescent {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium, .medium.iridescent, .hallpass-buttons button.iridescent, .hallpass-buttons button.ocs__btn {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large, .large.iridescent {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill, .pill.iridescent {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent), .pill.iridescent:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .pill.iridescent:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible, .pill.iridescent:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent, .accent.iridescent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill, .accent.fill.iridescent {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .accent.fill.iridescent:hover, .ocs__btn.accent.fill:focus, .accent.fill.iridescent:focus, .ocs__btn.accent.fill:active, .accent.fill.iridescent:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red, .alert-red.iridescent {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .alert-red.iridescent:hover, .ocs__btn.alert-red:focus, .alert-red.iridescent:focus, .ocs__btn.alert-red:active, .alert-red.iridescent:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill, .alert-red.fill.iridescent {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .alert-red.fill.iridescent:hover, .ocs__btn.alert-red.fill:focus, .alert-red.fill.iridescent:focus, .ocs__btn.alert-red.fill:active, .alert-red.fill.iridescent:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow, .alert-yellow.iridescent {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .alert-yellow.iridescent:hover, .ocs__btn.alert-yellow:focus, .alert-yellow.iridescent:focus, .ocs__btn.alert-yellow:active, .alert-yellow.iridescent:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill, .alert-yellow.fill.iridescent {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .alert-yellow.fill.iridescent:hover, .ocs__btn.alert-yellow.fill:focus, .alert-yellow.fill.iridescent:focus, .ocs__btn.alert-yellow.fill:active, .alert-yellow.fill.iridescent:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green, .alert-green.iridescent {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .alert-green.iridescent:hover, .ocs__btn.alert-green:focus, .alert-green.iridescent:focus, .ocs__btn.alert-green:active, .alert-green.iridescent:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill, .alert-green.fill.iridescent {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .alert-green.fill.iridescent:hover, .ocs__btn.alert-green.fill:focus, .alert-green.fill.iridescent:focus, .ocs__btn.alert-green.fill:active, .alert-green.fill.iridescent:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility, .utility.iridescent {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before, .utility.iridescent::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run, .utility.run.iridescent {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before, .utility.run.iridescent::before {
    content: '▶'; }

.ocs__btn.utility.pause, .utility.pause.iridescent {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before, .utility.pause.iridescent::before {
    content: '⏸'; }

.ocs__btn.utility.stop, .utility.stop.iridescent {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before, .utility.stop.iridescent::before {
    content: '■'; }

.ocs__btn.utility.fullscreen, .utility.fullscreen.iridescent,
.ocs__btn.utility.copy,
.utility.copy.iridescent,
.ocs__btn.utility.save,
.utility.save.iridescent,
.ocs__btn.utility.clear,
.utility.clear.iridescent,
.ocs__btn.utility.reset,
.utility.reset.iridescent,
.ocs__btn.utility.copyOutput,
.utility.copyOutput.iridescent {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before, .utility.fullscreen.iridescent::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before, .utility.copy.iridescent::before {
  content: '📋'; }

.ocs__btn.utility.save::before, .utility.save.iridescent::before {
  content: '💾'; }

.ocs__btn.utility.clear::before, .utility.clear.iridescent::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before, .utility.reset.iridescent::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before, .utility.copyOutput.iridescent::before {
  content: '⎘'; }

.ocs__btn.utility:disabled, .utility.iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility, .utility.iridescent {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before, .utility.iridescent::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill, .alert-red.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .alert-red.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .alert-red.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active, .alert-red.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill, .alert-yellow.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .alert-yellow.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .alert-yellow.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active, .alert-yellow.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill, .alert-green.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .alert-green.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .alert-green.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active, .alert-green.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.ocs__btn:disabled, .iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none; }
  .ocs__btn:disabled:hover, .iridescent:disabled:hover, .ocs__btn:disabled:active, .iridescent:disabled:active {
    opacity: 0.5;
    transform: none; }

.primary.disabled, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn, .iridescent {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover, .iridescent:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus, .iridescent:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover, .iridescent:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn, .iridescent {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small, .small.iridescent {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium, .medium.iridescent, .hallpass-buttons button.iridescent, .hallpass-buttons button.ocs__btn {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large, .large.iridescent {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill, .pill.iridescent {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent), .pill.iridescent:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .pill.iridescent:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible, .pill.iridescent:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent, .accent.iridescent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill, .accent.fill.iridescent {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .accent.fill.iridescent:hover, .ocs__btn.accent.fill:focus, .accent.fill.iridescent:focus, .ocs__btn.accent.fill:active, .accent.fill.iridescent:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red, .alert-red.iridescent {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .alert-red.iridescent:hover, .ocs__btn.alert-red:focus, .alert-red.iridescent:focus, .ocs__btn.alert-red:active, .alert-red.iridescent:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill, .alert-red.fill.iridescent {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .alert-red.fill.iridescent:hover, .ocs__btn.alert-red.fill:focus, .alert-red.fill.iridescent:focus, .ocs__btn.alert-red.fill:active, .alert-red.fill.iridescent:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow, .alert-yellow.iridescent {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .alert-yellow.iridescent:hover, .ocs__btn.alert-yellow:focus, .alert-yellow.iridescent:focus, .ocs__btn.alert-yellow:active, .alert-yellow.iridescent:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill, .alert-yellow.fill.iridescent {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .alert-yellow.fill.iridescent:hover, .ocs__btn.alert-yellow.fill:focus, .alert-yellow.fill.iridescent:focus, .ocs__btn.alert-yellow.fill:active, .alert-yellow.fill.iridescent:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green, .alert-green.iridescent {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .alert-green.iridescent:hover, .ocs__btn.alert-green:focus, .alert-green.iridescent:focus, .ocs__btn.alert-green:active, .alert-green.iridescent:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill, .alert-green.fill.iridescent {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .alert-green.fill.iridescent:hover, .ocs__btn.alert-green.fill:focus, .alert-green.fill.iridescent:focus, .ocs__btn.alert-green.fill:active, .alert-green.fill.iridescent:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility, .utility.iridescent {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before, .utility.iridescent::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run, .utility.run.iridescent {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before, .utility.run.iridescent::before {
    content: '▶'; }

.ocs__btn.utility.pause, .utility.pause.iridescent {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before, .utility.pause.iridescent::before {
    content: '⏸'; }

.ocs__btn.utility.stop, .utility.stop.iridescent {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before, .utility.stop.iridescent::before {
    content: '■'; }

.ocs__btn.utility.fullscreen, .utility.fullscreen.iridescent,
.ocs__btn.utility.copy,
.utility.copy.iridescent,
.ocs__btn.utility.save,
.utility.save.iridescent,
.ocs__btn.utility.clear,
.utility.clear.iridescent,
.ocs__btn.utility.reset,
.utility.reset.iridescent,
.ocs__btn.utility.copyOutput,
.utility.copyOutput.iridescent {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before, .utility.fullscreen.iridescent::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before, .utility.copy.iridescent::before {
  content: '📋'; }

.ocs__btn.utility.save::before, .utility.save.iridescent::before {
  content: '💾'; }

.ocs__btn.utility.clear::before, .utility.clear.iridescent::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before, .utility.reset.iridescent::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before, .utility.copyOutput.iridescent::before {
  content: '⎘'; }

.ocs__btn.utility:disabled, .utility.iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility, .utility.iridescent {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before, .utility.iridescent::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill, .alert-red.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .alert-red.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .alert-red.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active, .alert-red.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill, .alert-yellow.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .alert-yellow.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .alert-yellow.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active, .alert-yellow.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill, .alert-green.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .alert-green.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .alert-green.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active, .alert-green.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

button, .primary, .hallpass-buttons button {
  color: white;
  background-color: rgba(80, 80, 80, 0.7);
  transition: all 0.5s;
  transition: all 0.5s; }
  button:hover, .primary:hover, .hallpass-buttons button:hover {
    background-color: rgba(55, 55, 55, 0.7); }
  button:active, .primary:active, .hallpass-buttons button:active {
    background-color: rgba(29, 29, 29, 0.7); }

.secondary {
  color: #999999;
  background-color: rgba(120, 120, 128, 0.12);
  transition: all 0.5s;
  transition: all 0.5s; }
  .secondary:hover {
    background-color: rgba(95, 95, 102, 0.12); }
  .secondary:active {
    background-color: rgba(71, 71, 75, 0.12); }

.filledHighlight {
  background-color: #007aff;
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledHighlight:hover {
    background-color: #0062cc; }
  .filledHighlight:active {
    background-color: #004999; }

.filledTinted {
  color: #007aff;
  background-color: rgba(0, 122, 255, 0.15);
  transition: all 0.5s;
  transition: all 0.5s; }
  .filledTinted:hover {
    background-color: rgba(0, 98, 204, 0.15); }
  .filledTinted:active {
    background-color: rgba(0, 73, 153, 0.15); }

.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .disabled:hover, .disabled:active {
    background-color: inherit; }

.ocs__btn:disabled, .iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none; }
  .ocs__btn:disabled:hover, .iridescent:disabled:hover, .ocs__btn:disabled:active, .iridescent:disabled:active {
    opacity: 0.5;
    transform: none; }

.primary.disabled, .hallpass-buttons button.disabled,
.secondary.disabled,
.tertiary.disabled {
  color: rgba(118, 118, 128, 0.48);
  background-color: rgba(120, 120, 128, 0.12);
  cursor: not-allowed;
  opacity: 0.5;
  transition: all 0.5s; }
  .primary.disabled:hover, .hallpass-buttons button.disabled:hover, .primary.disabled:active, .hallpass-buttons button.disabled:active,
  .secondary.disabled:hover,
  .secondary.disabled:active,
  .tertiary.disabled:hover,
  .tertiary.disabled:active {
    background-color: inherit; }

/* define class for redifined button */
.button {
  width: auto;
  height: auto;
  border-radius: 10px;
  background-color: #21807c;
  border: 3px solid black;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 1;
  grid-row: span 1;
  transition: all 0.5s; }

/* darkens the background color on hover to create a selecting effect */
.button:hover {
  background-color: #373737; }

/* "row style" is flexible size and aligns pictures in center */
.row {
  align-items: center;
  display: flex; }

/* "column style" is one-third of the width with padding */
.column {
  flex: 16.66%;
  padding: 3px; }

/* Animation container */
#animation {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem; }

/* Calculator container - modern grid layout */
.calculator-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.5rem;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 12px; }

/* Output display */
.calculator-output {
  grid-column: span 4;
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  color: #fff;
  text-align: right;
  border: none;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  word-break: break-all;
  overflow: hidden; }

/* Base button mixin for calculator */
/* Number buttons */
.calculator-number {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Zero button spans 2 columns */ }
  .calculator-number:hover {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
  .calculator-number:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-number.zero {
    grid-column: span 2;
    aspect-ratio: auto;
    padding: 0 2rem; }

/* Operation buttons (+, -, *, /) */
.calculator-operation {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #ff9500, #e68a00);
  color: #fff;
  box-shadow: 0 4px 6px rgba(255, 149, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-operation:hover {
    background: linear-gradient(145deg, #ffaa33, #ff9500);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 149, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-operation:active {
    transform: translateY(0); }

/* Clear button */
.calculator-clear {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: clamp(1rem, 3vw, 1.2rem); }
  .calculator-clear:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-clear:active {
    transform: translateY(0); }

/* Special operation buttons (sqrt, %) */
.calculator-special {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #636366, #48484a);
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .calculator-special:hover {
    background: linear-gradient(145deg, #737377, #58585a);
    transform: translateY(-2px); }
  .calculator-special:active {
    transform: translateY(0); }

/* Equals button */
.calculator-equals {
  aspect-ratio: 1;
  border-radius: 12px;
  border: none;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(145deg, #34c759, #28a745);
  color: #fff;
  box-shadow: 0 4px 6px rgba(52, 199, 89, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
  .calculator-equals:hover {
    background: linear-gradient(145deg, #4cd964, #34c759);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(52, 199, 89, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
  .calculator-equals:active {
    transform: translateY(0); }

/* Responsive breakpoints */
@media (max-width: 480px) {
  .calculator-container {
    max-width: 100%;
    padding: 1rem;
    gap: 8px;
    border-radius: 16px; }

  .calculator-output {
    min-height: 60px;
    padding: 0.75rem 1rem; } }
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-container {
    max-width: 350px; } }
@media (min-width: 769px) {
  .calculator-container {
    max-width: 400px; }

  .calculator-number,
  .calculator-operation,
  .calculator-clear,
  .calculator-special,
  .calculator-equals {
    min-height: 70px; } }
/* Disable canvas filter if present */
canvas {
  filter: none; }

.iridescent {
  --ocs-btn-tone: var(--ocs-btn-tone, var(--pref-accent-color, var(--accent)));
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 88%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 74%, #000000));
  color: var(--pref-bg-color, var(--white1, #ffffff));
  border-color: var(--ocs-btn-tone);
  transition: filter 0.2s ease, opacity 0.2s ease; }
  .iridescent::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.08) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s infinite linear;
    z-index: 0;
    pointer-events: none; }
  .iridescent:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 90%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 72%, #000000));
    filter: brightness(1.06); }
  .iridescent:active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ocs-btn-tone) 84%, #ffffff), color-mix(in srgb, var(--ocs-btn-tone) 68%, #000000));
    filter: brightness(0.94); }
  .iridescent span,
  .iridescent a {
    position: relative;
    z-index: 1; }

@keyframes shimmer {
  0% {
    background-position: 0% 50%; }
  100% {
    background-position: 100% 50%; } }
/**
 * Drag and Drop Buttons
 * Reusable classes for drag-source / drop-target button pairs used by
 * assembly, matching, and sorting activities (see the PC Assembly Bench).
 *
 *
 * Sizing comes from the $dnd-sizes map below, mirroring the $sizes token
 * pattern in _tokens.scss.
 *
 * Markup contract:
 *   .ocs__dnd                     board wrapper
 *     .ocs__dnd-header            title / controls row
 *     .ocs__dnd-status            aria-live status line
 *     .ocs__dnd-progress          secondary progress line
 *     .ocs__dnd-layout            responsive two panel grid
 *       .ocs__dnd-panel           a tray or a target area
 *         .ocs__dnd-panel-title   panel heading
 *         .ocs__drag-btn          draggable source button  (draggable="true")
 *         .ocs__drop-btn          drop target button
 *
 * State classes (toggle from JS, no inline styles needed):
 *   .is-selected  source picked, waiting for a destination
 *   .is-over      pointer is dragging over this drop target
 *   .is-filled    drop target accepted its correct item
 *   [disabled]    consumed source or completed target
 *
 * Size classes:
 *   .ocs__dnd--small | --medium | --large      resize a whole board
 *   .ocs__drag-btn--small etc.                 resize one control
 */
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

:root {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px;
  --dnd-panel-padding: 14px;
  --dnd-board-padding: 18px;
  --dnd-gap: 18px;
  --dnd-min-column: 240px; }

.ocs__dnd--small {
  --dnd-control-padding: 8px;
  --dnd-control-font: 14px;
  --dnd-radius: 6px;
  --dnd-panel-padding: 10px;
  --dnd-board-padding: 12px;
  --dnd-gap: 12px;
  --dnd-min-column: 180px; }

.ocs__drag-btn--small,
.ocs__drop-btn--small {
  --dnd-control-padding: 8px;
  --dnd-control-font: 14px;
  --dnd-radius: 6px; }

.ocs__dnd--medium {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px;
  --dnd-panel-padding: 14px;
  --dnd-board-padding: 18px;
  --dnd-gap: 18px;
  --dnd-min-column: 240px; }

.ocs__drag-btn--medium,
.ocs__drop-btn--medium {
  --dnd-control-padding: 11px;
  --dnd-control-font: 16px;
  --dnd-radius: 8px; }

.ocs__dnd--large {
  --dnd-control-padding: 15px;
  --dnd-control-font: 18px;
  --dnd-radius: 10px;
  --dnd-panel-padding: 20px;
  --dnd-board-padding: 24px;
  --dnd-gap: 24px;
  --dnd-min-column: 320px; }

.ocs__drag-btn--large,
.ocs__drop-btn--large {
  --dnd-control-padding: 15px;
  --dnd-control-font: 18px;
  --dnd-radius: 10px; }

.ocs__dnd {
  color: #F0F0F0;
  background: #121212;
  border: 1px solid #3a3a3c;
  border-radius: calc(var(--dnd-radius) + 4px);
  padding: var(--dnd-board-padding);
  font-family: system-ui, sans-serif; }

.ocs__dnd-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end; }

.ocs__dnd-status {
  font-weight: 700;
  min-height: 24px; }

.ocs__dnd-progress {
  color: #4bbaff; }

.ocs__dnd-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dnd-min-column), 1fr));
  gap: var(--dnd-gap);
  margin-top: 14px; }

.ocs__dnd-panel {
  background: #1F2020;
  border: 1px solid #3a3a3c;
  border-radius: calc(var(--dnd-radius) + 2px);
  padding: var(--dnd-panel-padding); }

.ocs__dnd-panel-title {
  margin-top: 0; }

.ocs__dnd-input {
  display: block;
  width: min(100%, 320px);
  box-sizing: border-box;
  margin-top: 6px;
  padding: var(--dnd-control-padding);
  border: 1px solid #3a3a3c;
  border-radius: var(--dnd-radius);
  background: #1F2020;
  color: rgba(255, 255, 255, 0.87);
  font-size: var(--dnd-control-font); }

.ocs__dnd-reset {
  padding: var(--dnd-control-padding) calc(var(--dnd-control-padding) * 1.4);
  border: 1px solid #4CAFEF;
  border-radius: var(--dnd-radius);
  background: #007aff;
  color: white;
  font-size: var(--dnd-control-font);
  cursor: pointer;
  transition: background 0.2s; }
  .ocs__dnd-reset:hover {
    background: #0068d9; }

.ocs__drag-btn,
.ocs__drop-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: var(--dnd-control-padding);
  border: 1px solid #3182CE;
  border-radius: var(--dnd-radius);
  background: #2c2c2e;
  color: rgba(255, 255, 255, 0.87);
  font-size: var(--dnd-control-font);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background 0.2s, border-color 0.2s, outline-color 0.2s, opacity 0.2s; }
  .ocs__drag-btn:hover:not([disabled]),
  .ocs__drop-btn:hover:not([disabled]) {
    background: #4c4c4d; }
  .ocs__drag-btn:focus-visible,
  .ocs__drop-btn:focus-visible {
    outline: 3px solid #4CAFEF;
    outline-offset: 2px; }
  .ocs__drag-btn[disabled],
  .ocs__drop-btn[disabled] {
    cursor: default; }

.ocs__drag-btn {
  cursor: grab; }
  .ocs__drag-btn:active:not([disabled]) {
    cursor: grabbing; }
  .ocs__drag-btn.is-selected {
    outline: 3px solid #FBBF24; }
  .ocs__drag-btn[disabled] {
    opacity: 0.35;
    cursor: default; }

.ocs__drop-btn.is-over {
  border-color: #FBBF24;
  background: #5a5a5c; }
.ocs__drop-btn.is-filled, .ocs__drop-btn.is-filled[disabled] {
  border-color: #4ADE80;
  background: #2D5A3D;
  opacity: 1; }

.ocs__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-family: var(--pref-font-family);
  color: var(--pref-text-color); }

.ocs__container,
.ocs__container * {
  box-sizing: border-box; }

.ocs__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem; }
  .ocs__stack--wide {
    gap: 1.5rem; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
/* Define a mixin for common dropdown styles */
/* Apply mixin to dropdown menus */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdown:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdown .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdown .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdown .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdown .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdown .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp1 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp1:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp1 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp1 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp1 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp1 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp1 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp2 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp2:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp2 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp2 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp2 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp2 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp2 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp3 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp3:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp3 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp3 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp3 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp3 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp3 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

.dropdownp4 {
  position: relative;
  display: inline-block;
  z-index: 1; }
  .dropdownp4:hover .dropdown-content {
    display: block;
    animation: scaleIn 0.3s ease forwards; }
  .dropdownp4 .dropdown-content {
    display: none;
    position: fixed;
    border-radius: 12px;
    box-shadow: 0px 8px 16px 0px black;
    overflow: hidden; }
    .dropdownp4 .dropdown-content a {
      position: relative;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      color: #ecf0f1;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 12px; }
      .dropdownp4 .dropdown-content a::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.5);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
        bottom: 0; }
      .dropdownp4 .dropdown-content a:hover {
        color: #95a5a6;
        background-color: transparent;
        border-radius: 12px; }
      .dropdownp4 .dropdown-content a:hover::after {
        transform: scaleX(1);
        transform-origin: left; }

@keyframes scaleIn {
  0% {
    transform: scale(0.8);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }
.dropbtn {
  border: none;
  background-color: transparent !important;
  text-decoration: underline; }

/**
 * Grid Mixins
 * Follows the same pattern as _buttons.scss:
 * - plain &:hover (no @media wrapper)
 * - theme vars: --pref-bg-color, --pref-text-color, --pref-accent-color, --panel, --panel-mid, --ui-border
 */
/**
 * Standard Grid — fixed columns, collapses to 2 on mobile.
 *
 * @param {Number} $cols - Column count (default: 3)
 * @param {Number} $gap  - Gap (default: $spacing-md)
 */
/**
 * Card Grid — auto-fill responsive.
 *
 * @param {Number} $min-cell - Min cell width before wrap (default: 200px)
 * @param {Number} $gap      - Gap (default: $spacing-lg)
 */
/**
 * Grid Card Cell — themed card with hover lift.
 */
/**
 * Calculator Grid — equal square tiles.
 *
 * @param {Number} $cols - Column count (default: 4)
 * @param {Number} $gap  - Gap (default: $spacing-sm)
 */
/**
 * Grid Key Cell — square themed tile.
 */
/**
 * Grid Key Cell — Accent (primary action tile, e.g. =).
 */
/**
 * Grid Key Cell — Muted (utility tile, e.g. clear).
 */
/**
 * Gallery Grid — auto-fill square tiles.
 *
 * @param {Number} $min-size - Min cell size (default: 160px)
 * @param {Number} $gap      - Gap (default: $spacing-sm)
 */
/**
 * Gallery Cell — square themed tile.
 */
.ocs__grid {
  width: 100%; }
  .ocs__grid--col2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem; }
    @media (max-width: 768px) {
      .ocs__grid--col2 {
        grid-template-columns: 1fr; } }

.ocs__grid-cell {
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 15px;
  color: var(--pref-text-color); }
  .ocs__grid-cell--header {
    grid-column: 1 / -1;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
    border-color: var(--pref-accent-color); }
  .ocs__grid-cell--wide {
    grid-column: span 2; }
  .ocs__grid-cell--accent {
    background: color-mix(in srgb, var(--pref-accent-color) 15%, var(--panel));
    border-color: var(--pref-accent-color); }
  .ocs__grid-cell--muted {
    background: color-mix(in srgb, var(--pref-text-color) 4%, var(--panel));
    color: color-mix(in srgb, var(--pref-text-color) 70%, transparent); }

.ocs__grid--standard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .ocs__grid--standard {
      grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--standard.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; }
    @media (max-width: 768px) {
      .ocs__grid--standard.cols-2 {
        grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--standard.cols-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; }
    @media (max-width: 768px) {
      .ocs__grid--standard.cols-4 {
        grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--standard .ocs__grid-cell {
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; }
    .ocs__grid--standard .ocs__grid-cell:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
    .ocs__grid--standard .ocs__grid-cell:active {
      transform: scale(0.97); }

.ocs__grid--card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px; }
  @media (max-width: 768px) {
    .ocs__grid--card {
      grid-template-columns: 1fr; } }
  .ocs__grid--card .ocs__grid-cell {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 20px;
    color: var(--pref-text-color);
    transition: all 0.2s ease; }
    .ocs__grid--card .ocs__grid-cell:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
  .ocs__grid--card .ocs__thumbnail-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: inherit;
    text-decoration: none; }
    .ocs__grid--card .ocs__thumbnail-link h3 {
      margin: 0;
      min-width: 0;
      font-size: 16px;
      font-weight: 600;
      overflow-wrap: anywhere; }
  .ocs__grid--card .ocs__card-treatment {
    margin: 12px 0 0;
    color: var(--pref-text-color);
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7; }
  .ocs__grid--card .ocs__card-description,
  .ocs__grid--card .ocs__card-team {
    margin-top: 12px;
    color: var(--pref-text-color);
    font-size: 12px;
    opacity: 0.85; }
  .ocs__grid--card .ocs__card-team {
    font-size: 10px;
    opacity: 0.65; }
  .ocs__grid--card.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (max-width: 1024px) {
      .ocs__grid--card.cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 768px) {
      .ocs__grid--card.cols-3 {
        grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .ocs__grid--card .ocs__thumbnail-link {
    gap: 12px; } }
.ocs__grid--calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: fit-content;
  padding: 15px;
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 16px; }
  @media (max-width: 768px) {
    .ocs__grid--calculator {
      gap: 8px; } }
  .ocs__grid--calculator .ocs__grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    color: var(--pref-text-color);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    min-width: 60px; }
    .ocs__grid--calculator .ocs__grid-cell:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color);
      transform: scale(1.05); }
    .ocs__grid--calculator .ocs__grid-cell:active {
      transform: scale(0.95); }
    @media (max-width: 768px) {
      .ocs__grid--calculator .ocs__grid-cell {
        font-size: 16px;
        border-radius: 10px; } }
    .ocs__grid--calculator .ocs__grid-cell--accent {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--panel);
      border: 1px solid var(--ui-border);
      border-radius: 12px;
      color: var(--pref-text-color);
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      color: var(--pref-bg-color); }
      .ocs__grid--calculator .ocs__grid-cell--accent:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color);
        transform: scale(1.05); }
      .ocs__grid--calculator .ocs__grid-cell--accent:active {
        transform: scale(0.95); }
      @media (max-width: 768px) {
        .ocs__grid--calculator .ocs__grid-cell--accent {
          font-size: 16px;
          border-radius: 10px; } }
      .ocs__grid--calculator .ocs__grid-cell--accent:hover {
        opacity: 0.85;
        transform: scale(1.05); }
    .ocs__grid--calculator .ocs__grid-cell--muted {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--panel);
      border: 1px solid var(--ui-border);
      border-radius: 12px;
      color: var(--pref-text-color);
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      background: var(--panel-mid);
      border-color: var(--ui-border); }
      .ocs__grid--calculator .ocs__grid-cell--muted:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color);
        transform: scale(1.05); }
      .ocs__grid--calculator .ocs__grid-cell--muted:active {
        transform: scale(0.95); }
      @media (max-width: 768px) {
        .ocs__grid--calculator .ocs__grid-cell--muted {
          font-size: 16px;
          border-radius: 10px; } }
    .ocs__grid--calculator .ocs__grid-cell--wide {
      grid-column: span 2;
      aspect-ratio: auto;
      padding: 0 20px; }

.ocs__grid--color {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .ocs__grid--color {
      grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--color .ocs__grid-cell {
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; }
  .ocs__grid--color .ocs__grid-cell:nth-child(1):hover, .ocs__grid--color .ocs__grid-cell:nth-child(1):active {
    background: #a31f1f;
    border-color: #f04242;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(2):hover, .ocs__grid--color .ocs__grid-cell:nth-child(2):active {
    background: #a3771f;
    border-color: #f0b642;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(3):hover, .ocs__grid--color .ocs__grid-cell:nth-child(3):active {
    background: #8da31f;
    border-color: #d3f042;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(4):hover, .ocs__grid--color .ocs__grid-cell:nth-child(4):active {
    background: #1fa31f;
    border-color: #42f042;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(5):hover, .ocs__grid--color .ocs__grid-cell:nth-child(5):active {
    background: #1fa377;
    border-color: #42f0b6;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(6):hover, .ocs__grid--color .ocs__grid-cell:nth-child(6):active {
    background: #1f77a3;
    border-color: #42b6f0;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(7):hover, .ocs__grid--color .ocs__grid-cell:nth-child(7):active {
    background: #1f1fa3;
    border-color: #4242f0;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(8):hover, .ocs__grid--color .ocs__grid-cell:nth-child(8):active {
    background: #771fa3;
    border-color: #b642f0;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(9):hover, .ocs__grid--color .ocs__grid-cell:nth-child(9):active {
    background: #a31f77;
    border-color: #f042b6;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }

@keyframes ocs-holo-rotate {
  from {
    filter: hue-rotate(0deg) brightness(1.05); }
  to {
    filter: hue-rotate(360deg) brightness(1.05); } }
.ocs__grid--holographic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .ocs__grid--holographic {
      grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--holographic .ocs__grid-cell {
    background: #d41111;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 15px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    animation: ocs-holo-rotate 4s linear infinite;
    transition: transform 0.15s ease;
    cursor: default; }
    .ocs__grid--holographic .ocs__grid-cell:hover {
      transform: scale(1.06); }
    .ocs__grid--holographic .ocs__grid-cell:active {
      transform: scale(0.96); }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(1) {
    animation-delay: 0s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(2) {
    animation-delay: -0.333s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(3) {
    animation-delay: -0.666s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(4) {
    animation-delay: -0.999s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(5) {
    animation-delay: -1.332s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(6) {
    animation-delay: -1.665s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(7) {
    animation-delay: -1.998s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(8) {
    animation-delay: -2.331s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(9) {
    animation-delay: -2.664s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(10) {
    animation-delay: -2.997s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(11) {
    animation-delay: -3.33s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(12) {
    animation-delay: -3.663s; }

.ocs__grid--gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; }
  .ocs__grid--gallery .ocs__grid-cell {
    aspect-ratio: 1;
    background: var(--panel);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pref-text-color);
    padding: 0; }
    .ocs__grid--gallery .ocs__grid-cell:hover {
      border-color: var(--pref-accent-color);
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
    .ocs__grid--gallery .ocs__grid-cell--wide {
      grid-column: span 2;
      aspect-ratio: 2 / 1; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
img {
  border-radius: 12px; }

.ocs__image-frame {
  display: block;
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px; }

img.ocs__image-frame {
  object-fit: contain; }

.ocs__image-frame--cover {
  overflow: hidden;
  padding: 0; }

.ocs__image-frame--cover > img,
.ocs__image-frame--cover > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.ocs__image-frame--thumbnail {
  width: 7rem;
  height: 7rem;
  max-width: 7rem;
  flex: 0 0 7rem; }

@media (max-width: 768px) {
  .ocs__image-frame {
    padding: 8px; }

  .ocs__image-frame--thumbnail {
    width: 4.5rem;
    height: 4.5rem;
    max-width: 4.5rem;
    flex-basis: 4.5rem; } }
.ocs__table-wrap {
  width: 100%;
  overflow-x: auto; }

.ocs__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--pref-text-color); }
  .ocs__table th,
  .ocs__table td {
    padding: 12px 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--ui-border, #333); }
    @media (max-width: 768px) {
      .ocs__table th,
      .ocs__table td {
        padding: 10px 6px;
        font-size: 13px; } }
  .ocs__table th {
    color: var(--text-muted, #aaa);
    font-weight: 600;
    background: var(--panel-mid, #252525);
    text-align: left; }
  .ocs__table td {
    color: var(--pref-text-color, #ddd); }
  .ocs__table tbody tr {
    background: var(--panel, #1a1a1a);
    transition: background 0.2s; }
    .ocs__table tbody tr:hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }
    .ocs__table tbody tr:nth-child(even) {
      background: var(--ui-bg, rgba(0, 0, 0, 0.06)); }
    .ocs__table tbody tr:nth-child(even):hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }
  .ocs__table th,
  .ocs__table td {
    color: var(--pref-text-color);
    border-color: var(--ui-border); }
  .ocs__table th {
    background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
    color: var(--pref-text-color); }
  .ocs__table tbody tr {
    background: var(--panel); }
    .ocs__table tbody tr:nth-child(even) {
      background: color-mix(in srgb, var(--pref-text-color) 4%, var(--panel)); }
    .ocs__table tbody tr:hover, .ocs__table tbody tr:nth-child(even):hover {
      background: color-mix(in srgb, var(--pref-accent-color) 10%, var(--panel)); }

.ocs__tabs {
  position: relative;
  border-bottom: 1px solid var(--ui-border); }

.ocs__tabs-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0; }

.ocs__tabs-btn {
  display: inline-block;
  padding: 1rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  font: inherit;
  cursor: pointer; }
  .ocs__tabs-btn:hover {
    color: var(--pref-text-color);
    border-color: color-mix(in srgb, var(--pref-text-color) 24%, transparent); }
  .ocs__tabs-btn.active.text-blue-500 {
    color: var(--pref-accent-color); }
  .ocs__tabs-btn.active.border-blue-500 {
    border-color: var(--pref-accent-color); }

.ocs__tabs-underline {
  background: var(--pref-accent-color); }

.ocs__tabs-panels {
  position: relative;
  min-height: 400px; }

.ocs__tabs-panel {
  padding: 1.5rem 0;
  color: var(--pref-text-color); }
  .ocs__tabs-panel.block {
    display: block; }

.ocs__modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6); }

.ocs__modal-card {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow: auto;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--ui-border); }

.ocs__card.ocs__modal-card {
  margin-bottom: 0; }

.ocs__modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem; }

.ocs__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-border); }

.ocs__modal-title {
  margin: 0; }

.ocs__modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border); }

.ocs__tree {
  margin-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--pref-accent-color) 40%, var(--panel)); }

.ocs__tree-item {
  padding: 6px 0 6px 12px; }

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(30px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; }

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
.ocs__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center; }

.ocs__spinner {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border: 3px solid color-mix(in srgb, var(--pref-text-color) 16%, transparent);
  border-bottom-color: var(--pref-accent-color);
  border-radius: 50%;
  animation: ocs__spin 0.75s linear infinite; }

@keyframes ocs__spin {
  to {
    transform: rotate(360deg); } }
input, textarea {
  color: var(--pref-text-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--pref-text-color) 12%, transparent));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--pref-text-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--pref-bg-color); }

select.ocs__input {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

select.ocs__input option {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

input, textarea {
  color: var(--pref-text-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--pref-text-color) 12%, transparent));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--pref-text-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--pref-bg-color); }

select.ocs__input {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

select.ocs__input option {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])),
textarea.ocs__input,
select.ocs__input {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--pref-bg-color) 88%, var(--pref-text-color) 12%);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  filter: none;
  padding: 0.5rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
  input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]))::placeholder,
  textarea.ocs__input::placeholder,
  select.ocs__input::placeholder {
    color: color-mix(in srgb, var(--pref-text-color) 60%, transparent);
    opacity: 1; }
  input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):focus-visible,
  textarea.ocs__input:focus-visible,
  select.ocs__input:focus-visible {
    border-color: var(--pref-accent-color);
    outline: 2px solid color-mix(in srgb, var(--pref-accent-color) 35%, transparent);
    outline-offset: 2px; }

input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):-webkit-autofill,
input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):-webkit-autofill:hover,
input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pref-text-color); }

input.ocs__input.gradient,
input.gradientInput {
  background-image: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a); }

.inputIconGroup > ion-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  /* Adjust based on desired spacing */
  transform: translateY(-50%);
  font-size: 1.5rem;
  /* Adjust the size of the icon */
  color: color-mix(in srgb, var(--pref-text-color) 40%, transparent);
  pointer-events: none;
  /* Ensure the icon does not interfere with input focus */ }

input, textarea {
  color: var(--pref-text-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--pref-text-color) 12%, transparent));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--pref-text-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--pref-bg-color); }

select.ocs__input {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

select.ocs__input option {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

input.ocs__input.small,
input.smallInput {
  font-size: 0.8em; }

input.ocs__input.medium,
input.mediumInput {
  font-size: 1.1em; }

input.ocs__input.large,
input.largeInput {
  font-size: 1.5em; }

textarea.ocs__input.small,
textarea.smallInput {
  font-size: 0.8em;
  height: 8em; }

textarea.ocs__input.medium,
textarea.mediumInput {
  font-size: 1.1em;
  height: 12em; }

textarea.ocs__input.large,
textarea.largeInput {
  font-size: 1.5em;
  height: 24em; }

.ocs__toggle {
  --ocs-toggle-accent: var(--pref-accent-color);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pref-text-color);
  cursor: pointer; }
  .ocs__toggle--green {
    --ocs-toggle-accent: var(--pref-success-color, var(--pref-accent-color)); }

.ocs__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0; }
  .ocs__toggle-input:checked + .ocs__toggle-track {
    background: var(--ocs-toggle-accent); }
    .ocs__toggle-input:checked + .ocs__toggle-track::before {
      transform: translateX(23px); }
  .ocs__toggle-input:focus-visible + .ocs__toggle-track {
    outline: 2px solid var(--ocs-toggle-accent);
    outline-offset: 2px; }
  .ocs__toggle-input:disabled ~ .ocs__toggle-track, .ocs__toggle-input:disabled ~ .ocs__toggle-label {
    cursor: not-allowed;
    opacity: 0.55; }

.ocs__toggle-track {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  height: 31px;
  border-radius: 31px;
  border: 1px solid var(--ui-border);
  background: var(--panel-mid);
  transition: background 0.2s ease; }
  .ocs__toggle-track::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--pref-text-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pref-text-color) 25%, transparent);
    transition: transform 0.2s ease; }

.ocs__toggle-label {
  user-select: none; }

.switch {
  display: flex;
  align-items: center;
  gap: 10px; }
  .switch .toggle {
    position: relative;
    width: 54px;
    height: 31px; }
  .switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0; }
    .switch input[type="checkbox"]:checked + .slider {
      background: var(--pref-accent-color); }
      .switch input[type="checkbox"]:checked + .slider.green {
        background: var(--pref-success-color, var(--pref-accent-color)); }
      .switch input[type="checkbox"]:checked + .slider::before {
        transform: translateX(23px); }
    .switch input[type="checkbox"]:focus-visible + .slider {
      outline: 2px solid var(--pref-accent-color);
      outline-offset: 2px; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border-radius: 31px;
  border: 1px solid var(--ui-border);
  background: var(--panel-mid);
  transition: background 0.2s ease; }
  .slider::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--pref-text-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pref-text-color) 25%, transparent);
    transition: transform 0.2s ease; }

.label-text {
  color: var(--pref-text-color);
  user-select: none; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
h1, h2, h3, h4 {
  color: var(--pref-text-color, white); }

p, li, ul, ol {
  color: var(--text-muted, var(--pref-text-color, #e1e1e6)); }

a {
  color: var(--pref-accent-color, #4bbaff); }
  a:hover {
    color: var(--pref-text-color, rgba(255, 255, 255, 0.87)); }

.ocs_section-title {
  font-family: var(--pref-font-family, Verdana, sans-serif);
  font-size: var(--pref-font-size, 1rem);
  font-weight: 600;
  line-height: 1.4; }

.ocs_text {
  font-family: var(--pref-font-family, Verdana, sans-serif);
  font-size: var(--pref-font-size, 1rem);
  line-height: 1.5; }

.ocs__truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

@media (hover: none) {
  .ocs__truncate--hover {
    overflow: visible;
    text-overflow: clip;
    white-space: normal; } }
body {
  font-family: var(--pref-font-family, Verdana, sans-serif); }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.backend-status {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); }
  @media (max-width: 480px) {
    .backend-status {
      flex-direction: column;
      gap: calc(15px * 0.5); } }
  @media (max-width: 768px) {
    .backend-status {
      padding: calc(15px * 0.75); } }

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  flex: 1;
  justify-content: center; }
  @media (max-width: 768px) {
    .status-item {
      padding: 6px 10px;
      gap: 6px; } }
  @media (max-width: 480px) {
    .status-item {
      justify-content: flex-start;
      min-height: 44px; } }

.status-icon {
  font-size: 16px;
  min-width: 16px;
  text-align: center; }

.status-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  @media (max-width: 480px) {
    .status-text {
      white-space: normal;
      word-break: break-word; } }

.overall-status {
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease; }
  .overall-status.hidden {
    display: none; }

@keyframes statusIndicatorSuccessPulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }
@keyframes statusIndicatorErrorShake {
  0%, 100% {
    transform: translateX(0); }
  25% {
    transform: translateX(-5px); }
  75% {
    transform: translateX(5px); } }
@keyframes statusIndicatorPendingPulse {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0.6; } }
@keyframes statusIndicatorSpin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.backend-status {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); }
  @media (max-width: 480px) {
    .backend-status {
      flex-direction: column;
      gap: calc(15px * 0.5); } }
  @media (max-width: 768px) {
    .backend-status {
      padding: calc(15px * 0.75); } }

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  flex: 1;
  justify-content: center; }
  @media (max-width: 768px) {
    .status-item {
      padding: 6px 10px;
      gap: 6px; } }
  @media (max-width: 480px) {
    .status-item {
      justify-content: flex-start;
      min-height: 44px; } }

.status-icon {
  font-size: 16px;
  min-width: 16px;
  text-align: center; }

.status-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  @media (max-width: 480px) {
    .status-text {
      white-space: normal;
      word-break: break-word; } }

.overall-status {
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease; }
  .overall-status.hidden {
    display: none; }

.status-item.pending {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.3);
  animation: statusIndicatorPendingPulse 2s ease-in-out infinite; }
.status-item.success {
  background: rgba(40, 167, 69, 0.2);
  border: 1px solid rgba(40, 167, 69, 0.3);
  animation: statusIndicatorSuccessPulse 0.5s ease-in-out; }
.status-item.error {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.3);
  animation: statusIndicatorErrorShake 0.5s ease-in-out; }
.status-item.loading {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.3); }
  .status-item.loading .status-icon {
    animation: statusIndicatorSpin 1s linear infinite; }
.status-item.disabled {
  opacity: 0.5; }
  .status-item.disabled .status-icon {
    opacity: 0.5; }
  .status-item.disabled .status-text {
    color: #888;
    font-style: italic; }

.overall-status.success {
  background: rgba(40, 167, 69, 0.2);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: #28a745; }
.overall-status.partial {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: #ffc107; }
.overall-status.error {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #dc3545; }

/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn, .iridescent {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover, .iridescent:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus, .iridescent:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover, .iridescent:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn, .iridescent {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium, .hallpass-buttons button {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small, .small.iridescent {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium, .medium.iridescent, .hallpass-buttons button.iridescent, .hallpass-buttons button.ocs__btn {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large, .large.iridescent {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill, .pill.iridescent {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent), .pill.iridescent:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .pill.iridescent:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible, .pill.iridescent:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent, .accent.iridescent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill, .accent.fill.iridescent {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .accent.fill.iridescent:hover, .ocs__btn.accent.fill:focus, .accent.fill.iridescent:focus, .ocs__btn.accent.fill:active, .accent.fill.iridescent:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red, .alert-red.iridescent {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .alert-red.iridescent:hover, .ocs__btn.alert-red:focus, .alert-red.iridescent:focus, .ocs__btn.alert-red:active, .alert-red.iridescent:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill, .alert-red.fill.iridescent {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .alert-red.fill.iridescent:hover, .ocs__btn.alert-red.fill:focus, .alert-red.fill.iridescent:focus, .ocs__btn.alert-red.fill:active, .alert-red.fill.iridescent:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow, .alert-yellow.iridescent {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .alert-yellow.iridescent:hover, .ocs__btn.alert-yellow:focus, .alert-yellow.iridescent:focus, .ocs__btn.alert-yellow:active, .alert-yellow.iridescent:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill, .alert-yellow.fill.iridescent {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .alert-yellow.fill.iridescent:hover, .ocs__btn.alert-yellow.fill:focus, .alert-yellow.fill.iridescent:focus, .ocs__btn.alert-yellow.fill:active, .alert-yellow.fill.iridescent:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green, .alert-green.iridescent {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .alert-green.iridescent:hover, .ocs__btn.alert-green:focus, .alert-green.iridescent:focus, .ocs__btn.alert-green:active, .alert-green.iridescent:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill, .alert-green.fill.iridescent {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .alert-green.fill.iridescent:hover, .ocs__btn.alert-green.fill:focus, .alert-green.fill.iridescent:focus, .ocs__btn.alert-green.fill:active, .alert-green.fill.iridescent:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility, .utility.iridescent {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before, .utility.iridescent::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run, .utility.run.iridescent {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before, .utility.run.iridescent::before {
    content: '▶'; }

.ocs__btn.utility.pause, .utility.pause.iridescent {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before, .utility.pause.iridescent::before {
    content: '⏸'; }

.ocs__btn.utility.stop, .utility.stop.iridescent {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before, .utility.stop.iridescent::before {
    content: '■'; }

.ocs__btn.utility.fullscreen, .utility.fullscreen.iridescent,
.ocs__btn.utility.copy,
.utility.copy.iridescent,
.ocs__btn.utility.save,
.utility.save.iridescent,
.ocs__btn.utility.clear,
.utility.clear.iridescent,
.ocs__btn.utility.reset,
.utility.reset.iridescent,
.ocs__btn.utility.copyOutput,
.utility.copyOutput.iridescent {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before, .utility.fullscreen.iridescent::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before, .utility.copy.iridescent::before {
  content: '📋'; }

.ocs__btn.utility.save::before, .utility.save.iridescent::before {
  content: '💾'; }

.ocs__btn.utility.clear::before, .utility.clear.iridescent::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before, .utility.reset.iridescent::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before, .utility.copyOutput.iridescent::before {
  content: '⎘'; }

.ocs__btn.utility:disabled, .utility.iridescent:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility, .utility.iridescent {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before, .utility.iridescent::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill, .alert-red.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .alert-red.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .alert-red.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active, .alert-red.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill, .alert-yellow.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .alert-yellow.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .alert-yellow.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active, .alert-yellow.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill, .alert-green.ocs__btn--alert-fill.iridescent,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .alert-green.ocs__btn--alert-fill.iridescent:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .alert-green.ocs__btn--alert-fill.iridescent:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active, .alert-green.ocs__btn--alert-fill.iridescent:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

@media (max-width: 768px) {
  .submit-button {
    width: 100%;
    margin-bottom: 10px;
    min-height: 44px; } }

.loading {
  color: transparent;
  position: relative; }
  .loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: statusIndicatorSpin 1s linear infinite; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.login-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap; }
  @media (max-width: 768px) {
    .login-container {
      flex-direction: column;
      gap: calc(20px * 0.75); } }

.login-card,
.signup-card {
  background-color: var(--bg-1);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  color: white;
  overflow: hidden;
  flex: 1 1 calc(50% - 20px);
  max-width: 45%;
  box-sizing: border-box; }
  @media (max-width: 768px) {
    .login-card,
    .signup-card {
      flex: 1 1 100%;
      max-width: 100%; } }
  .login-card h1,
  .signup-card h1 {
    margin-bottom: 20px;
    color: inherit; }
  .login-card hr,
  .signup-card hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 20px 0; }

.form-group {
  position: relative;
  margin-bottom: 1.5rem; }
  .form-group input, .form-group textarea, .form-group select {
    width: 100%;
    box-sizing: border-box; }
  @media (max-width: 480px) {
    .form-group {
      margin-bottom: calc(1.5rem * 0.75); } }

.form-group select {
  color: white;
  border-radius: 12px;
  border: 1px solid rgba(72, 72, 81, 0.63);
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
  padding: 15px;
  transition: all 0.3s ease;
  background-color: #121212; }
  .form-group select option[disabled], .form-group select:invalid {
    color: #757575; }

.ocs__field {
  display: grid;
  gap: 0.375rem;
  align-content: start; }
  .ocs__field > .ocs__label {
    margin-bottom: 0; }
  .ocs__field > .ocs__input,
  .ocs__field > input[type="range"] {
    width: 100%; }
  .ocs__field > input[type="range"] {
    padding: 0;
    border: 0;
    filter: none;
    accent-color: var(--pref-accent-color); }
  .ocs__field > small {
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.45; }

.ocs__label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.oauth-error {
  background-color: #dc2626;
  color: white;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin: 1rem 0; }

.oauth-success {
  background-color: #16a34a;
  color: white;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin: 1rem 0; }

.secondary {
  background-color: #6b7280 !important;
  color: white; }
  .secondary:hover {
    background-color: #5a6272 !important; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.password-match {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 1px #10b981 !important; }

.password-mismatch {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important; }

.password-length {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important; }

.validation-message {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  min-height: 1.2rem;
  transition: all 0.3s ease; }
  .validation-message.success {
    color: #10b981; }
  .validation-message.error {
    color: #ef4444; }

.form-group input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1; }

[data-hook="password-field"] {
  position: relative;
  display: block; }
  [data-hook="password-field"] input {
    width: 100%;
    padding-right: 4.5rem; }

.ocs__btn[data-hook="password-toggle"], [data-hook="password-toggle"].iridescent {
  position: absolute;
  right: 8px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  transition: opacity 0.15s, background 0.2s, border-color 0.2s; }
  .ocs__btn[data-hook="password-toggle"]:hover, [data-hook="password-toggle"].iridescent:hover {
    transform: translateY(-50%) scale(1.05); }
  @media (max-width: 1024px) {
    .ocs__btn[data-hook="password-toggle"], [data-hook="password-toggle"].iridescent {
      height: 36px;
      padding: 0 12px; } }
  @media (max-width: 768px) {
    .ocs__btn[data-hook="password-toggle"], [data-hook="password-toggle"].iridescent {
      right: 6px; } }
  @media (hover: none) {
    .ocs__btn[data-hook="password-toggle"]:hover, [data-hook="password-toggle"].iridescent:hover {
      transform: translateY(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .ocs__btn[data-hook="password-toggle"], [data-hook="password-toggle"].iridescent {
      transition: none; }
      .ocs__btn[data-hook="password-toggle"]:hover, [data-hook="password-toggle"].iridescent:hover {
        transform: translateY(-50%); } }

[data-hook="caps-lock-hint"] {
  margin-top: 6px; }
  [data-hook="caps-lock-hint"][hidden] {
    display: none; }

.glass, .tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content, .container, .hallpass-container {
  backdrop-filter: blur(30px); }

.tintedGlass, .site-header, .dropdown .dropdown-content, .dropdownp1 .dropdown-content, .dropdownp2 .dropdown-content, .dropdownp3 .dropdown-content, .dropdownp4 .dropdown-content {
  background: var(--glass-tint); }

.glow, .glowOnHover, .hallpass-buttons button {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before, .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before, .hallpass-buttons button:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before, .hallpass-buttons button:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after, .hallpass-buttons button:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover, .hallpass-buttons button {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
.support-topics-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem; }

.support-topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem; }

.support-topic-item {
  padding: 1rem 1.25rem;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  transition: background-color 0.2s ease, border-color 0.2s ease; }

.support-topic-item:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3); }

.support-groups {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }

.support-group {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden; }

.support-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease; }

.support-group-header:hover {
  background-color: rgba(255, 255, 255, 0.04); }

.support-group-label {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); }

.support-group-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  flex-shrink: 0; }

.support-group.open .support-group-arrow {
  transform: rotate(90deg); }

.support-group-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease; }

.support-group.open .support-group-content {
  max-height: 700px; }

.support-group-content .support-topic-list {
  padding: 0 1.1rem 1.1rem 1.1rem; }

.support-group-content .support-topic-item {
  border-color: rgba(255, 255, 255, 0.1); }

.support-back-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem; }

#support-reset-wizard {
  display: none;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 3rem 1.5rem;
  justify-content: center; }

#support-reset-wizard.active {
  display: flex;
  animation: supportFadeIn 0.4s ease; }

.support-wizard-inner {
  width: 100%;
  max-width: 480px; }

.support-step {
  display: none;
  opacity: 0; }

.support-step.active {
  display: block;
  animation: supportStepIn 0.4s ease forwards; }

.support-step.leaving {
  display: block;
  animation: supportStepOut 0.25s ease forwards; }

.support-step-centered {
  text-align: center;
  margin-bottom: 1.5rem; }

.support-oauth-hint {
  margin-bottom: 1rem;
  color: #d1d5db; }

.support-g-signin-container {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem; }

.support-oauth-status {
  margin-top: 1rem; }

.support-ticket-row {
  display: none;
  margin-top: 1rem; }

.support-reset-message {
  color: red; }

@keyframes supportFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes supportStepIn {
  from {
    opacity: 0;
    transform: translateY(16px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes supportStepOut {
  from {
    opacity: 1;
    transform: translateY(0); }
  to {
    opacity: 0;
    transform: translateY(-16px); } }
.ocs__kanban-board {
  margin: 0;
  padding: 0;
  list-style: none; }

.ocs__kanban-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(11.5rem, 100%), 1fr);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: thin; }
  .ocs__kanban-board > .ocs__kanban-column {
    scroll-snap-align: start; }

.ocs__kanban-column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-top: 3px solid var(--kanban-stage-color, color-mix(in srgb, var(--pref-accent-color) 0%, color-mix(in srgb, var(--pref-text-color) 30%, var(--panel))));
  border-radius: 12px;
  background: color-mix(in srgb, var(--pref-text-color) 3%, var(--panel));
  color: var(--pref-text-color); }

.ocs__kanban-column[data-stage="backlog"] {
  --kanban-stage-color: color-mix(in srgb, var(--pref-accent-color) 0%, color-mix(in srgb, var(--pref-text-color) 30%, var(--panel))); }

.ocs__kanban-column[data-stage="todo"] {
  --kanban-stage-color: color-mix(in srgb, var(--pref-accent-color) 30%, color-mix(in srgb, var(--pref-text-color) 30%, var(--panel))); }

.ocs__kanban-column[data-stage="doing"] {
  --kanban-stage-color: color-mix(in srgb, var(--pref-accent-color) 55%, color-mix(in srgb, var(--pref-text-color) 30%, var(--panel))); }

.ocs__kanban-column[data-stage="review"] {
  --kanban-stage-color: color-mix(in srgb, var(--pref-accent-color) 78%, color-mix(in srgb, var(--pref-text-color) 30%, var(--panel))); }

.ocs__kanban-column[data-stage="done"] {
  --kanban-stage-color: color-mix(in srgb, var(--pref-accent-color) 100%, color-mix(in srgb, var(--pref-text-color) 30%, var(--panel))); }

.ocs__kanban-item {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--pref-text-color);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
  .ocs__kanban-item:hover, .ocs__kanban-item:focus-visible {
    border-color: var(--pref-accent-color);
    background: color-mix(in srgb, var(--pref-accent-color) 4%, var(--panel));
    color: var(--pref-text-color);
    text-decoration: none; }
  .ocs__kanban-item:hover {
    transform: translateY(-1px); }
  .ocs__kanban-item:focus-visible {
    outline: 2px solid var(--pref-accent-color);
    outline-offset: 2px; }

.ocs__kanban-kicker {
  font-size: 0.65rem;
  line-height: 1.4; }

.ocs__kanban-name {
  font-size: 0.9rem;
  line-height: 1.4; }

.ocs__kanban-note {
  font-size: 0.8rem;
  line-height: 1.4; }

.ocs__kanban-kicker {
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase; }

.ocs__kanban-name {
  font-weight: 600; }

.ocs__kanban-note {
  color: var(--text-muted); }

.ocs__kanban-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px; }
  .ocs__kanban-evidence .ocs__status-pill--good {
    background: color-mix(in srgb, var(--pref-accent-color) 4%, var(--panel));
    color: var(--pref-text-color); }

.museum-container {
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  min-height: 100vh;
  padding: 2rem 0; }

.museum-title {
  text-align: center;
  color: #f4f4f4;
  font-size: 3rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 1rem; }

.museum-subtitle {
  text-align: center;
  color: #b8860b;
  font-style: italic;
  margin-bottom: 3rem; }

.exhibit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem; }

.exhibit-card {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid #b8860b;
  border-radius: 15px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }

.course-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 10; }

.course-badge.csa {
  background: linear-gradient(45deg, #ff6b6b, #ee5a52);
  border: 2px solid #ff8a80; }

.course-badge.csp {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  border: 2px solid #80cbc4; }

.course-badge.csse {
  background: linear-gradient(45deg, #a8e6cf, #88d8a3);
  border: 2px solid #c8e6c9; }

.course-badge.csh {
  background: linear-gradient(45deg, #7c4dff, #5e35b1);
  border: 2px solid #b39ddb; }

.exhibit-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(184, 134, 11, 0.3);
  border-color: #ffd700; }

.exhibit-icon {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1rem; }

.exhibit-title {
  color: #ffd700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: center; }

.exhibit-description {
  color: #f0f0f0;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 1.5rem; }

.exhibit-link {
  display: block;
  background: linear-gradient(45deg, #b8860b, #ffd700);
  color: #1a1a2e;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-align: center;
  font-weight: bold;
  transition: all 0.3s ease; }

.exhibit-link:hover {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  transform: scale(1.05);
  color: #1a1a2e;
  text-decoration: none; }

.closing-message {
  text-align: center;
  color: #b8860b;
  font-style: italic;
  margin-top: 3rem;
  font-size: 1.1rem; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Grid Mixins
 * Follows the same pattern as _buttons.scss:
 * - plain &:hover (no @media wrapper)
 * - theme vars: --pref-bg-color, --pref-text-color, --pref-accent-color, --panel, --panel-mid, --ui-border
 */
/**
 * Standard Grid — fixed columns, collapses to 2 on mobile.
 *
 * @param {Number} $cols - Column count (default: 3)
 * @param {Number} $gap  - Gap (default: $spacing-md)
 */
/**
 * Card Grid — auto-fill responsive.
 *
 * @param {Number} $min-cell - Min cell width before wrap (default: 200px)
 * @param {Number} $gap      - Gap (default: $spacing-lg)
 */
/**
 * Grid Card Cell — themed card with hover lift.
 */
/**
 * Calculator Grid — equal square tiles.
 *
 * @param {Number} $cols - Column count (default: 4)
 * @param {Number} $gap  - Gap (default: $spacing-sm)
 */
/**
 * Grid Key Cell — square themed tile.
 */
/**
 * Grid Key Cell — Accent (primary action tile, e.g. =).
 */
/**
 * Grid Key Cell — Muted (utility tile, e.g. clear).
 */
/**
 * Gallery Grid — auto-fill square tiles.
 *
 * @param {Number} $min-size - Min cell size (default: 160px)
 * @param {Number} $gap      - Gap (default: $spacing-sm)
 */
/**
 * Gallery Cell — square themed tile.
 */
/* ============================= */
/*       VIDEO DEMO MODAL        */
/* ============================= */
#video-demo {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem; }
  @media (max-width: 768px) {
    #video-demo {
      padding: 60px 0 0 0; } }

#video-demo > div {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #1F2020;
  border: 1px solid #2A2D2D;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  top: 60px; }
  @media (max-width: 768px) {
    #video-demo > div {
      padding: 20px 0;
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      min-height: calc(100vh - 60px); } }

#video-demo .close-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  position: absolute;
  z-index: 10;
  line-height: 1;
  font-size: 28px;
  top: 28px;
  right: 28px; }
  #video-demo .close-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  #video-demo .close-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  #video-demo .close-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    #video-demo .close-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    #video-demo .close-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  @media (max-width: 768px) {
    #video-demo .close-btn {
      font-size: 20px;
      top: 12px;
      right: 12px; } }

#video-demo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }

@media (max-width: 768px) {
  #video-demo .desktop-only {
    display: none; } }

.clickable-video {
  cursor: pointer;
  display: inline-block;
  transition: transform 0.2s; }

.clickable-video:hover {
  transform: scale(1.05); }

.timeline-page {
  /* Panel, radius, padding and spacing come from .ocs__card. A sprint keeps
     the accent border and its lift so it still reads as the outer container. */
  /* Panel, radius, padding and spacing come from .ocs__card. */
  /* No OCS component draws a numbered circle on a rail, so this stays
     bespoke — but on the theme tokens, not hardcoded SASS colours, so it
     follows the user's accent like every component does. */
  /* .completion-badge is styled by .ocs__status-pill--neutral (elements/capstone/status-pills). */
  /* Base look comes from .ocs__btn in the markup; only the icon-only square shape is set here. */
  /* .ocs__grid is the container; the cells are .ocs__grid-cell. The column
     rule stays here because .ocs__grid--card uses auto-fill at 200px, which
     leaves a lone lesson squeezed into a 200px track instead of filling the
     row. auto-fit at 300px collapses the empty track. */
  /* .ocs__grid-cell gives the box. grid-card-cell adds the hover lift his
     .ocs__grid--card cells get (panel-mid, accent border, -2px, shadow);
     only card-grid's auto-fill columns were the problem, not the cell. */
  /* base-button is his shared control behaviour (cursor, transition, hover
     and focus tones). The toggle stays a bare round icon at rest and picks up
     the panel-mid highlight on hover, so it reads as something you can press. */
  /* base-button's hover is --panel-mid, a 12% black wash that barely reads on
     a 20px circle over a dark panel. Previewing the accent on the icon is the
     same signal .status-icon.completed already uses for the "on" state. */
  /* .goals-label is styled by .ocs__section-title; it only needs to be a
     block so the goals sit under it rather than beside it. */
  /* Arrow, gap and colour come from .ocs__keypoint / .ocs__check. */
  /* Pill itself is .ocs__status-pill--warn; this only spaces it from the card above. */
  /* Certificate System Styles */
  /* ============================= */
  /*     PROGRESSION MODAL         */
  /* ============================= */
  /* ============================= */
  /*      CERTIFICATE MODAL        */
  /* ============================= */
  /* Certificate List Modal */
  /* ============================= */
  /*         HELP MODAL            */
  /* ============================= */
  /* ============================= */
  /*     SPRINT CALENDAR SYNC      */
  /* ============================= */
  /* ============================= */
  /*     PRIORITY SELECTOR         */
  /* ============================= */
  /* ============================= */
  /*  SELECTIVE SYNC/REMOVE MODAL  */
  /* ============================= */ }
  .timeline-page .timeline-header {
    margin-bottom: 32px; }
  .timeline-page .timeline-header h1 {
    color: #F0F0F0;
    font-size: 2.5rem;
    margin-bottom: 8px; }
  .timeline-page .timeline-header-description {
    color: #aaa;
    margin-bottom: 24px; }
  .timeline-page .timeline-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap; }
  .timeline-page .filter-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: #F0F0F0;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px; }
  .timeline-page .filter-btn:hover {
    background: #1F1F1F; }
  .timeline-page .filter-btn.active {
    background: #1F1F1F;
    border-color: #4CAFEF;
    color: #4CAFEF; }
  .timeline-page .sprint-filters {
    display: flex;
    gap: 6px;
    align-items: center; }
  .timeline-page .sprint-filter-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #2A2D2D;
    border-radius: 4px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    white-space: nowrap;
    line-height: 1; }
  .timeline-page .sprint-filter-btn:hover {
    background: #1F1F1F; }
  .timeline-page .sprint-filter-btn.active {
    background: #1F1F1F;
    border-color: #4CAFEF;
    color: #4CAFEF; }
  .timeline-page .sprint-filter-btn i {
    font-size: 10px;
    margin-right: 4px; }
  .timeline-page .timeline-container {
    margin-top: 32px; }
  .timeline-page .sprint-card {
    border-color: var(--pref-accent-color);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
  .timeline-page .sprint-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap; }
  .timeline-page .sprint-title {
    margin: 0;
    font-size: 1.75rem;
    color: var(--pref-accent-color) !important; }
  .timeline-page .sprint-meta {
    color: #aaa;
    font-size: 0.95rem; }
  .timeline-page .sprint-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center; }
  .timeline-page .sprint-toggle-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center; }
    .timeline-page .sprint-toggle-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-toggle-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
  .timeline-page .sprint-card.collapsed .sprint-toggle-icon {
    transform: rotate(0deg); }
  .timeline-page .sprint-toggle-icon {
    transition: transform 0.3s;
    display: inline-flex;
    color: var(--pref-accent-color);
    font-size: 2em;
    font-weight: bold;
    margin-right: 4px; }
  .timeline-page .sprint-weeks {
    display: flex;
    flex-direction: column;
    gap: 16px; }
  .timeline-page .sprint-card.collapsed .sprint-weeks {
    display: none; }
  .timeline-page .week-card {
    transition: all 0.2s;
    overflow: hidden; }
  .timeline-page .week-card:hover {
    border-color: var(--border-hover-color, #2A2D2D); }
  .timeline-page .week-content-wrapper {
    display: flex;
    gap: 24px; }
  .timeline-page .week-main-content {
    flex: 1; }
  .timeline-page .week-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px; }
  .timeline-page .week-indicator {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .timeline-page .week-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pref-accent-color);
    font-weight: 600;
    font-size: 14px; }
  .timeline-page .week-connector {
    width: 1px;
    height: 32px;
    background: var(--ui-border);
    margin-top: 8px; }
  .timeline-page .week-card:last-child .week-connector {
    display: none; }
  .timeline-page .week-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end; }
  .timeline-page .week-title-group h3 {
    color: var(--pref-accent-color) !important;
    font-size: 1.25rem;
    margin: 0 0 4px 0; }
  .timeline-page .sprint-btn.certificate,
  .timeline-page .sprint-btn.help {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px; }
    .timeline-page .sprint-btn.certificate:hover,
    .timeline-page .sprint-btn.help:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.certificate:focus,
    .timeline-page .sprint-btn.help:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.certificate:hover,
    .timeline-page .sprint-btn.help:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .timeline-page .sprint-btn.certificate,
      .timeline-page .sprint-btn.help {
        height: 44px; } }
    @media (max-width: 768px) {
      .timeline-page .sprint-btn.certificate,
      .timeline-page .sprint-btn.help {
        margin-left: 0.25rem;
        width: 44px; } }
  .timeline-page .items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 16px; }
  .timeline-page .item-card {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 20px;
    color: var(--pref-text-color);
    transition: all 0.2s ease; }
    .timeline-page .item-card:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
  .timeline-page .item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%; }
  .timeline-page .completion-toggle {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    background: none;
    border: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px; }
    .timeline-page .completion-toggle:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .completion-toggle:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
  .timeline-page .item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 1;
    min-width: 0; }
  .timeline-page .status-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font-size: 16px; }
  .timeline-page .status-icon.completed {
    color: var(--pref-accent-color); }
  .timeline-page .completion-toggle:hover .status-icon {
    color: var(--pref-accent-color); }
  .timeline-page .status-icon.incomplete {
    color: var(--text-muted); }
  .timeline-page .type-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px; }
  .timeline-page .type-icon.lesson {
    color: #4CAFEF; }
  .timeline-page .type-icon.assignment {
    color: #f59e0b; }
  .timeline-page .item-title {
    color: #F0F0F0;
    flex: 1;
    font-size: 14px; }
  .timeline-page .item-card.completed .item-title {
    color: #aaa; }
  .timeline-page .item-priority-selector {
    flex-shrink: 0;
    margin-left: auto; }
  .timeline-page .item-priority-dropdown {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 42px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    /* The priority tones above are emitted after select-control's own :hover
       and match its specificity, so they were winning and the select sat dead
       under the pointer. Restating the accent border last puts base-button's
       hover back on top while the priority tint still shows through. */ }
    .timeline-page .item-priority-dropdown:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .item-priority-dropdown:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    @media (max-width: 768px) {
      .timeline-page .item-priority-dropdown {
        min-width: auto;
        max-width: 90px;
        font-size: 0.85rem; } }
    .timeline-page .item-priority-dropdown.priority-p0 {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.4);
      color: #ef4444; }
    .timeline-page .item-priority-dropdown.priority-p1 {
      background: rgba(249, 115, 22, 0.15);
      border-color: rgba(249, 115, 22, 0.4);
      color: #f97316; }
    .timeline-page .item-priority-dropdown.priority-p2 {
      background: rgba(234, 179, 8, 0.15);
      border-color: rgba(234, 179, 8, 0.4);
      color: #eab308; }
    .timeline-page .item-priority-dropdown.priority-p3 {
      background: rgba(156, 163, 175, 0.15);
      border-color: rgba(156, 163, 175, 0.4);
      color: #9ca3af; }
    .timeline-page .item-priority-dropdown:hover, .timeline-page .item-priority-dropdown:focus {
      border-color: var(--pref-accent-color); }
  .timeline-page .week-goals-container {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2A2D2D; }
  .timeline-page .goals-label {
    display: block; }
  .timeline-page .goals-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start; }
  .timeline-page .goal-item:hover {
    color: #F0F0F0; }
  .timeline-page .goal-item:hover::before {
    opacity: 1; }
  .timeline-page .assignment-due {
    margin-top: 8px; }
  .timeline-page .load-more {
    text-align: center;
    margin-top: 24px; }
  .timeline-page .load-more-btn {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid #2A2D2D;
    color: #4CAFEF;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s; }
  .timeline-page .load-more-btn:hover {
    background: #1F1F1F;
    color: #007ACC; }
  @media (max-width: 768px) {
    .timeline-page {
      /* .ocs__card gives the week 24px 28px, which nests inside the sprint's
         16px and left lesson titles about 200px to wrap in on a phone. */
      /* select-control's own mobile rule sets 0.85rem, which suits his 150px
         language pickers but grew this compact chip on phones, past its desktop
         size, and took the width from the lesson title beside it. */
      /* Modal responsiveness */ }
      .timeline-page .timeline-header h1 {
        font-size: 2rem; }
      .timeline-page .timeline-filters {
        flex-direction: column;
        gap: 8px; }
      .timeline-page .filter-btn {
        width: 100%;
        text-align: center; }
      .timeline-page .sprint-card {
        padding: 16px; }
      .timeline-page .week-card {
        padding: 10px; }
      .timeline-page .sprint-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px; }
      .timeline-page .sprint-title {
        font-size: 1.5rem; }
      .timeline-page .sprint-controls {
        justify-content: space-between;
        width: 100%; }
      .timeline-page .week-content-wrapper {
        flex-direction: column;
        gap: 12px; }
      .timeline-page .week-indicator {
        flex-direction: row;
        align-items: center;
        gap: 12px; }
      .timeline-page .week-circle {
        width: 40px;
        height: 40px;
        font-size: 12px; }
      .timeline-page .week-connector {
        display: none; }
      .timeline-page .week-main-content {
        width: 100%; }
      .timeline-page .week-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px; }
      .timeline-page .week-title-group h3 {
        font-size: 1.1rem; }
      .timeline-page .week-actions {
        justify-content: space-between;
        flex-wrap: wrap; }
      .timeline-page .items-grid {
        grid-template-columns: 1fr;
        gap: 8px; }
      .timeline-page .item-card {
        padding: 10px; }
      .timeline-page .item-content {
        gap: 8px; }
      .timeline-page .item-title {
        font-size: 13px; }
      .timeline-page .item-priority-dropdown {
        font-size: 11px; }
      .timeline-page .progression-btn {
        padding: 8px 12px;
        font-size: 12px; }
      .timeline-page #progression-modal > div,
      .timeline-page #certificate-list-modal > div {
        margin: 20px auto;
        padding: 20px; }
      .timeline-page #certificate-content {
        padding: 40px 20px; }
      .timeline-page #certificate-student-name {
        font-size: 36px; }
      .timeline-page #certificate-content .achievement-text {
        font-size: 18px; }
      .timeline-page .certificate-modal .action-bar {
        padding: 12px; }
      .timeline-page .action-btn {
        padding: 8px 12px;
        font-size: 12px;
        margin: 0 4px; }
      .timeline-page .progression-task {
        padding: 10px;
        gap: 10px; } }
  .timeline-page .certificate-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4CAFEF 0%, #007ACC 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(76, 175, 239, 0.3);
    z-index: 1; }
  .timeline-page .week-card.clickable {
    cursor: pointer; }
  .timeline-page .week-card.clickable:hover {
    border-color: #4CAFEF;
    box-shadow: 0 0 12px rgba(76, 175, 239, 0.2); }
  .timeline-page #progression-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    overflow-y: auto;
    padding: 1rem; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal {
        padding: 60px 0 0 0; } }
  .timeline-page #progression-modal > div {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    top: 60px; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal > div {
        padding: 20px 0;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        min-height: calc(100vh - 60px); } }
  .timeline-page #progression-modal .close-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    position: absolute;
    z-index: 10;
    line-height: 1;
    font-size: 28px;
    top: 28px;
    right: 28px; }
    .timeline-page #progression-modal .close-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page #progression-modal .close-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page #progression-modal .close-btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .close-btn {
        height: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .close-btn {
        margin-left: 0.25rem;
        width: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .close-btn {
        font-size: 20px;
        top: 12px;
        right: 12px; } }
  .timeline-page #progression-modal h2 {
    color: #F0F0F0;
    margin-bottom: 8px;
    padding-right: 50px; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal h2 {
        font-size: 1.5rem; } }
  .timeline-page #progression-modal .week-theme {
    color: #4CAFEF;
    margin-bottom: 24px;
    padding-right: 50px; }
    @media (max-width: 768px) {
      .timeline-page #progression-modal .week-theme {
        font-size: 0.9rem;
        margin-bottom: 16px; } }
  .timeline-page #task-list {
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 16px; }
    @media (max-width: 768px) {
      .timeline-page #task-list {
        max-height: 50vh; } }
  .timeline-page #modal-progress-fill {
    height: 100%;
    background: #4CAFEF;
    width: 0%;
    transition: width 0.3s; }
  .timeline-page .progression-task {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #1F1F1F;
    border: 1px solid #2A2D2D;
    border-radius: 8px;
    margin-bottom: 8px; }
    @media (max-width: 768px) {
      .timeline-page .progression-task {
        padding: 10px;
        gap: 10px; } }
  .timeline-page .progression-week-header {
    color: #F0F0F0;
    font-size: 16px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2A2D2D; }
    .timeline-page .progression-week-header:first-child {
      margin-top: 0; }
    @media (max-width: 768px) {
      .timeline-page .progression-week-header {
        font-size: 14px;
        margin-top: 16px;
        margin-bottom: 10px; } }
  .timeline-page .progression-task input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #4CAFEF;
    flex-shrink: 0; }
    @media (max-width: 768px) {
      .timeline-page .progression-task input[type="checkbox"] {
        width: 22px;
        height: 22px; } }
  .timeline-page .progression-task label {
    color: #F0F0F0;
    flex: 1;
    cursor: pointer; }
    @media (max-width: 768px) {
      .timeline-page .progression-task label {
        font-size: 14px; } }
  .timeline-page .task-number {
    color: #aaa;
    font-size: 14px;
    flex-shrink: 0; }
    @media (max-width: 768px) {
      .timeline-page .task-number {
        font-size: 12px; } }
  .timeline-page #view-certificate-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4CAFEF 0%, #007ACC 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: 24px; }
  .timeline-page #view-certificate-btn:hover {
    transform: scale(1.02); }
  .timeline-page #certificate-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000; }
    @media (max-width: 768px) {
      .timeline-page #certificate-modal {
        padding: 60px 0 0 0; } }
  .timeline-page #certificate-modal .action-bar {
    position: sticky;
    top: 60px;
    background: var(--panel);
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--ui-border);
    z-index: 10; }
  .timeline-page #certificate-modal .action-btn {
    padding: 10px 20px;
    background: var(--pref-accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    margin: 0 8px;
    cursor: pointer; }
  .timeline-page #certificate-modal .secondary-btn {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--ui-border); }
  .timeline-page #certificate-content {
    max-width: 1000px;
    margin: 40px auto;
    background: var(--bg-1);
    padding: 90px 80px;
    border: 3px solid var(--pref-accent-color);
    position: relative;
    font-family: 'Crimson Text', serif;
    color: var(--text);
    transition: all 0.3s ease; }
    .timeline-page #certificate-content.excellence-theme {
      border-color: #ffd700;
      box-shadow: 0 0 50px rgba(255, 215, 0, 0.2);
      background: linear-gradient(135deg, var(--bg-1) 0%, #fffdf0 100%); }
      .timeline-page #certificate-content.excellence-theme::before {
        border-color: #ffd700; }
      .timeline-page #certificate-content.excellence-theme .certificate-emblem {
        border-color: #ffd700;
        background: #fffdf0; }
      .timeline-page #certificate-content.excellence-theme .certify-text {
        color: #b8860b; }
  .timeline-page .cert-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    z-index: 10001;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px); }
    .timeline-page .cert-notification.cert-notification-visible {
      transform: translateX(0); }
    .timeline-page .cert-notification.cert-notification-success {
      background: linear-gradient(135deg, #065f46 0%, #047857 100%);
      border: 1px solid #10b981; }
    .timeline-page .cert-notification.cert-notification-warning {
      background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
      border: 1px solid #f59e0b; }
    .timeline-page .cert-notification.cert-notification-error {
      background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
      border: 1px solid #ef4444; }
    .timeline-page .cert-notification.cert-notification-info {
      background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
      border: 1px solid #3b82f6; }
  .timeline-page .cert-notification-icon {
    font-size: 24px;
    line-height: 1; }
  .timeline-page .cert-notification-content {
    flex: 1; }
  .timeline-page .cert-notification-title {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    margin-bottom: 4px; }
  .timeline-page .cert-notification-message {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4; }
  .timeline-page .cert-notification-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s; }
    .timeline-page .cert-notification-close:hover {
      color: #fff; }
  .timeline-page .cert-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cert-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px; }
@keyframes cert-spin {
  to {
    transform: rotate(360deg); } }
  .timeline-page .cert-btn-loading {
    opacity: 0.8;
    cursor: wait; }
  .timeline-page #certificate-content::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    bottom: 18px;
    border: 1px solid var(--ui-border);
    pointer-events: none; }
  .timeline-page #certificate-content > div {
    position: relative;
    z-index: 1; }
  .timeline-page .certificate-heading {
    text-align: center;
    margin-bottom: 40px; }
  .timeline-page .certificate-emblem {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border: 3px solid var(--pref-accent-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
  .timeline-page #certificate-logo {
    width: 80px;
    height: 80px;
    object-fit: contain; }
  .timeline-page #certificate-content .header-text {
    font-size: 14px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 12px; }
  .timeline-page #certificate-content .certify-text {
    font-size: 30px;
    color: var(--text);
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 8px; }
  .timeline-page .certificate-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 13px;
    color: var(--text-muted); }
  .timeline-page #certificate-student-name {
    font-size: 62px;
    color: var(--text-strong);
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    border: none;
    outline: none;
    display: block;
    cursor: text;
    text-align: center;
    margin: 32px auto 40px;
    width: 100%; }
  .timeline-page #certificate-student-name:empty::before {
    content: 'Your Name';
    color: var(--text-muted); }
  .timeline-page #certificate-content .achievement-text {
    text-align: center;
    font-size: 22px;
    color: var(--text);
    max-width: 720px;
    margin: 0 auto 48px;
    line-height: 1.7; }
  .timeline-page .skill-focus-pill {
    text-align: center;
    margin-bottom: 32px; }
  .timeline-page .skill-focus-pill span {
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid var(--pref-accent-color);
    border-radius: 999px;
    font-size: 16px;
    color: var(--pref-accent-color);
    background: var(--bg-2);
    text-transform: uppercase;
    letter-spacing: 0.1em; }
  .timeline-page #certificate-date {
    text-align: center;
    font-size: 18px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 40px; }
  .timeline-page .certificate-divider {
    width: 60%;
    height: 1px;
    background: transparent;
    margin: 0 auto 48px; }
  .timeline-page #certificate-content .signature-section {
    display: flex;
    justify-content: center;
    margin-top: 32px; }
  .timeline-page #certificate-content .signature {
    text-align: center;
    max-width: 320px; }
  .timeline-page #certificate-content .signature-name {
    font-size: 30px;
    font-style: italic;
    color: var(--text);
    font-family: 'Libre Baskerville', serif;
    margin-bottom: 8px; }
  .timeline-page #certificate-content .signature-line {
    border-top: 2px solid var(--ui-border);
    padding-top: 8px;
    margin-bottom: 12px; }
  .timeline-page #certificate-content .signature-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 600;
    color: var(--text);
    margin: 0; }
  .timeline-page #certificate-content .signature-subtitle {
    color: var(--text-muted);
    margin: 2px 0 0 0; }
  .timeline-page #certificate-list-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1500;
    padding: 20px;
    overflow-y: auto; }
  .timeline-page #certificate-list-modal > div {
    max-width: 600px;
    margin: 40px auto;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 32px; }
  .timeline-page #certificate-list-modal .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer; }
  .timeline-page #certificate-list-modal h2 {
    color: #F0F0F0;
    margin-bottom: 24px; }
  .timeline-page #certificate-list button {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4CAFEF 0%, #007ACC 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    margin-bottom: 12px; }
  .timeline-page #certificate-list button:hover {
    transform: scale(1.02); }
  .timeline-page #certificate-skills {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--ui-border); }
  .timeline-page .skills-heading {
    text-align: center;
    color: var(--text-strong) !important;
    font-family: 'Libre Baskerville', serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 16px; }
  .timeline-page #skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px; }
  .timeline-page .skill-tag {
    padding: 6px 16px;
    border: 1px solid var(--pref-accent-color);
    border-radius: 20px;
    color: var(--text);
    font-family: 'Crimson Text', serif;
    font-size: 14px;
    margin: 4px;
    background: var(--bg-2); }
  @media (max-width: 768px) {
    .timeline-page #certificate-content {
      margin: 0;
      padding: 40px 20px;
      border-radius: 0;
      border-left: none;
      border-right: none; }
    .timeline-page #certificate-student-name {
      font-size: 36px; }
    .timeline-page #certificate-content .signature-section {
      flex-direction: column;
      gap: 16px; } }
  .timeline-page #help-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    overflow-y: auto;
    padding: 1rem; }
    @media (max-width: 768px) {
      .timeline-page #help-modal {
        padding: 60px 0 0 0; } }
  .timeline-page #help-modal > div {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    top: 60px; }
    @media (max-width: 768px) {
      .timeline-page #help-modal > div {
        padding: 20px 0;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        min-height: calc(100vh - 60px); } }
  .timeline-page #help-modal .close-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 8px;
    margin-left: 8px;
    position: absolute;
    z-index: 10;
    line-height: 1;
    font-size: 28px;
    top: 28px;
    right: 28px; }
    .timeline-page #help-modal .close-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page #help-modal .close-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page #help-modal .close-btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .timeline-page #help-modal .close-btn {
        height: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #help-modal .close-btn {
        margin-left: 0.25rem;
        width: 44px; } }
    @media (max-width: 768px) {
      .timeline-page #help-modal .close-btn {
        font-size: 20px;
        top: 12px;
        right: 12px; } }
  .timeline-page .sprint-date-control {
    position: relative;
    display: inline-block; }
  .timeline-page .sprint-btn.date-toggle {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px; }
    .timeline-page .sprint-btn.date-toggle:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.date-toggle:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .timeline-page .sprint-btn.date-toggle:hover {
      background: #1F1F1F; }
    .timeline-page .sprint-btn.date-toggle i {
      color: var(--pref-accent-color); }
  .timeline-page .sprint-date-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 320px;
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    margin-top: 8px; }
    .timeline-page .sprint-date-dropdown.hidden {
      display: none; }
  .timeline-page .date-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2A2D2D; }
    .timeline-page .date-dropdown-header span {
      font-weight: 600;
      color: #F0F0F0;
      font-size: 14px; }
  .timeline-page .date-dropdown-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1; }
    .timeline-page .date-dropdown-close:hover {
      color: #F0F0F0; }
  .timeline-page .calendar-sync-info {
    margin-bottom: 16px; }
  .timeline-page .sprint-week-range {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #1F1F1F;
    border-radius: 8px;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 12px; }
    .timeline-page .sprint-week-range i {
      color: var(--pref-accent-color); }
    .timeline-page .sprint-week-range strong {
      color: #F0F0F0; }
  .timeline-page .sprint-date-preview {
    padding: 12px;
    background: rgba(var(--pref-accent-rgb), 0.1);
    border: 1px solid rgba(var(--pref-accent-rgb), 0.2);
    border-radius: 8px; }
    .timeline-page .sprint-date-preview .date-preview-loading {
      color: #aaa;
      font-size: 12px;
      text-align: center; }
    .timeline-page .sprint-date-preview .date-range-display {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      font-size: 13px; }
      .timeline-page .sprint-date-preview .date-range-display .date-label {
        color: #aaa;
        font-weight: 500; }
      .timeline-page .sprint-date-preview .date-range-display .date-value {
        color: #F0F0F0;
        font-weight: 600; }
    .timeline-page .sprint-date-preview .date-error {
      color: #ef4444;
      font-size: 12px;
      text-align: center; }
  .timeline-page .holiday-warnings {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(var(--pref-accent-rgb), 0.3); }
  .timeline-page .holiday-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
    font-size: 11px;
    color: #f59e0b;
    margin-top: 6px; }
    .timeline-page .holiday-notice i {
      flex-shrink: 0; }
    .timeline-page .holiday-notice:first-child {
      margin-top: 0; }
  .timeline-page .sync-options {
    margin-bottom: 16px;
    padding: 12px;
    background: #1F1F1F;
    border-radius: 8px; }
  .timeline-page .sync-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 13px;
    color: #F0F0F0;
    border-bottom: 1px solid #2A2D2D; }
    .timeline-page .sync-option:last-child {
      border-bottom: none;
      padding-bottom: 0; }
    .timeline-page .sync-option:first-child {
      padding-top: 0; }
    .timeline-page .sync-option input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--pref-accent-color);
      cursor: pointer; }
    .timeline-page .sync-option span {
      display: flex;
      align-items: center;
      gap: 8px; }
      .timeline-page .sync-option span i {
        width: 16px;
        text-align: center;
        color: var(--pref-accent-color);
        opacity: 0.8; }
  .timeline-page .date-actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .timeline-page .advanced-sync-btn {
    width: 100%;
    padding: 12px 16px;
    background: var(--pref-accent-color);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.1s; }
    .timeline-page .advanced-sync-btn:hover {
      opacity: 0.9; }
    .timeline-page .advanced-sync-btn:active {
      transform: scale(0.98); }
    .timeline-page .advanced-sync-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
    .timeline-page .advanced-sync-btn i {
      font-size: 12px; }
  .timeline-page .advanced-remove-btn {
    width: 100%;
    padding: 10px 16px;
    background: #dc2626;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s, transform 0.1s; }
    .timeline-page .advanced-remove-btn:hover {
      opacity: 0.9;
      background: #b91c1c; }
    .timeline-page .advanced-remove-btn:active {
      transform: scale(0.98); }
    .timeline-page .advanced-remove-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed; }
    .timeline-page .advanced-remove-btn i {
      font-size: 12px; }
  .timeline-page .sprint-date-status {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    min-height: 18px;
    padding: 6px;
    border-radius: 6px; }
    .timeline-page .sprint-date-status.success {
      color: #10b981;
      background: rgba(16, 185, 129, 0.1); }
    .timeline-page .sprint-date-status.error {
      color: #ef4444;
      background: rgba(239, 68, 68, 0.1); }
    .timeline-page .sprint-date-status.warning {
      color: #f59e0b;
      background: rgba(245, 158, 11, 0.1); }
    .timeline-page .sprint-date-status.loading {
      color: #aaa;
      background: #1F1F1F; }
  .timeline-page .sprint-dates-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #aaa;
    padding: 6px 10px;
    background: #1F1F1F;
    border-radius: 6px; }
    .timeline-page .sprint-dates-display i {
      color: var(--pref-accent-color); }
    .timeline-page .sprint-dates-display .date-range {
      color: #F0F0F0; }
  .timeline-page .priority-selector {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #2A2D2D; }
  .timeline-page .priority-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #F0F0F0;
    margin-bottom: 10px; }
  .timeline-page .priority-options {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .timeline-page .priority-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #1F1F1F;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s; }
    .timeline-page .priority-option:hover {
      background: rgba(240, 240, 240, 0.05); }
    .timeline-page .priority-option input[type="radio"] {
      display: none; }
    .timeline-page .priority-option input[type="radio"]:checked + .priority-badge {
      transform: scale(1.1);
      box-shadow: 0 0 8px currentColor; }
    .timeline-page .priority-option:has(input[type="radio"]:checked) {
      border-color: currentColor;
      background: rgba(240, 240, 240, 0.08); }
  .timeline-page .priority-option.priority-p0 {
    color: #ef4444; }
    .timeline-page .priority-option.priority-p0:has(input:checked) {
      border-color: #ef4444;
      background: rgba(239, 68, 68, 0.1); }
  .timeline-page .priority-option.priority-p1 {
    color: #f97316; }
    .timeline-page .priority-option.priority-p1:has(input:checked) {
      border-color: #f97316;
      background: rgba(249, 115, 22, 0.1); }
  .timeline-page .priority-option.priority-p2 {
    color: #eab308; }
    .timeline-page .priority-option.priority-p2:has(input:checked) {
      border-color: #eab308;
      background: rgba(234, 179, 8, 0.1); }
  .timeline-page .priority-option.priority-p3 {
    color: #22c55e; }
    .timeline-page .priority-option.priority-p3:has(input:checked) {
      border-color: #22c55e;
      background: rgba(34, 197, 94, 0.1); }
  .timeline-page .priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s; }
    .timeline-page .priority-badge.p0 {
      background: #dc2626;
      color: white; }
    .timeline-page .priority-badge.p1 {
      background: #ea580c;
      color: white; }
    .timeline-page .priority-badge.p2 {
      background: #ca8a04;
      color: white; }
    .timeline-page .priority-badge.p3 {
      background: #16a34a;
      color: white; }
  .timeline-page .priority-desc {
    font-size: 13px;
    color: #F0F0F0;
    flex: 1; }
  @media (max-width: 768px) {
    .timeline-page .priority-options {
      gap: 6px; }
    .timeline-page .priority-option {
      padding: 8px 10px; }
    .timeline-page .priority-badge {
      width: 28px;
      height: 20px;
      font-size: 10px; }
    .timeline-page .priority-desc {
      font-size: 12px; } }
  .timeline-page .calendar-action-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px); }
  .timeline-page .calendar-action-modal-content {
    background: #1F2020;
    border: 1px solid #2A2D2D;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
    .timeline-page .calendar-action-modal-content.remove-modal .calendar-action-modal-header h2 {
      color: #ef4444; }
  .timeline-page .calendar-action-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #2A2D2D;
    flex-shrink: 0; }
    .timeline-page .calendar-action-modal-header h2 {
      margin: 0;
      font-size: 1.25rem;
      color: var(--pref-accent-color);
      display: flex;
      align-items: center;
      gap: 10px; }
      .timeline-page .calendar-action-modal-header h2 i {
        font-size: 1.1rem; }
    .timeline-page .calendar-action-modal-header .close-btn {
      background: none;
      border: none;
      color: #aaa;
      font-size: 24px;
      cursor: pointer;
      padding: 4px;
      line-height: 1;
      transition: color 0.2s; }
      .timeline-page .calendar-action-modal-header .close-btn:hover {
        color: #F0F0F0; }
  .timeline-page .calendar-action-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px; }
  .timeline-page .calendar-action-modal-footer {
    display: flex;
    justify-content: stretch;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #2A2D2D;
    flex-shrink: 0; }
  .timeline-page .modal-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    border: none;
    white-space: nowrap; }
    .timeline-page .modal-btn.primary, .timeline-page .hallpass-buttons button.modal-btn, .hallpass-buttons .timeline-page button.modal-btn {
      background: var(--pref-accent-color);
      color: white; }
      .timeline-page .modal-btn.primary:hover, .timeline-page .hallpass-buttons button.modal-btn:hover, .hallpass-buttons .timeline-page button.modal-btn:hover {
        opacity: 0.9; }
      .timeline-page .modal-btn.primary:disabled, .timeline-page .hallpass-buttons button.modal-btn:disabled, .hallpass-buttons .timeline-page button.modal-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed; }
    .timeline-page .modal-btn.secondary {
      background: #1F1F1F;
      color: #F0F0F0;
      border: 1px solid #2A2D2D; }
      .timeline-page .modal-btn.secondary:hover {
        background: #2A2D2D; }
    .timeline-page .modal-btn.export-blue {
      background: #3b82f6;
      color: white; }
      .timeline-page .modal-btn.export-blue:hover {
        background: #2563eb; }
    .timeline-page .modal-btn.danger {
      background: #dc2626;
      color: white; }
      .timeline-page .modal-btn.danger:hover {
        background: #b91c1c; }
      .timeline-page .modal-btn.danger:disabled {
        opacity: 0.5;
        cursor: not-allowed; }
    .timeline-page .modal-btn.info {
      background: #0ea5e9;
      color: white; }
      .timeline-page .modal-btn.info:hover {
        background: #0284c7; }
      .timeline-page .modal-btn.info:disabled {
        opacity: 0.5;
        cursor: not-allowed; }
  .timeline-page .calendar-action-modal-content.preview-modal {
    max-width: 1000px; }
    .timeline-page .calendar-action-modal-content.preview-modal .calendar-action-modal-body {
      display: flex;
      flex-direction: column;
      gap: 20px; }
  .timeline-page .preview-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; }
  .timeline-page .preview-column {
    display: flex;
    flex-direction: column;
    gap: 12px; }
    .timeline-page .preview-column h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #F0F0F0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 8px;
      border-bottom: 2px solid #2A2D2D; }
    .timeline-page .preview-column.current h3 {
      color: var(--pref-accent-color); }
    .timeline-page .preview-column.changes h3 {
      color: #10b981; }
  .timeline-page .preview-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto; }
  .timeline-page .preview-event-item {
    padding: 12px;
    background: #1F1F1F;
    border-left: 4px solid #2A2D2D;
    border-radius: 6px;
    font-size: 13px; }
    .timeline-page .preview-event-item.current {
      border-left-color: var(--pref-accent-color); }
    .timeline-page .preview-event-item.add {
      border-left-color: #10b981;
      background: rgba(16, 185, 129, 0.05); }
    .timeline-page .preview-event-item.update {
      border-left-color: #f59e0b;
      background: rgba(245, 158, 11, 0.05); }
    .timeline-page .preview-event-item .event-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 4px; }
      .timeline-page .preview-event-item .event-status.add {
        color: #10b981; }
      .timeline-page .preview-event-item .event-status.update {
        color: #f59e0b; }
    .timeline-page .preview-event-item .event-title {
      font-weight: 600;
      color: #F0F0F0;
      margin-bottom: 4px;
      line-height: 1.3; }
    .timeline-page .preview-event-item .event-date {
      color: #aaa;
      font-size: 12px;
      margin-bottom: 6px; }
    .timeline-page .preview-event-item .event-description-preview {
      color: #aaa;
      font-size: 12px;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis; }
    .timeline-page .preview-event-item .no-events {
      text-align: center;
      color: #aaa;
      padding: 20px;
      font-style: italic; }
    .timeline-page .preview-event-item .error-message {
      color: #ef4444;
      padding: 12px;
      background: rgba(239, 68, 68, 0.1);
      border-radius: 6px; }
  .timeline-page .preview-summary {
    display: flex;
    gap: 20px;
    padding: 16px;
    background: #1F1F1F;
    border-radius: 10px; }
  .timeline-page .summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600; }
    .timeline-page .summary-item i {
      font-size: 16px; }
    .timeline-page .summary-item.add {
      color: #10b981; }
    .timeline-page .summary-item.update {
      color: #f59e0b; }
  .timeline-page .sync-modal-sprint-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #1F1F1F;
    border-radius: 10px;
    margin-bottom: 16px; }
  .timeline-page .sync-modal-sprint-name {
    font-weight: 600;
    color: #F0F0F0;
    font-size: 15px; }
  .timeline-page .sync-modal-date-range {
    color: #aaa;
    font-size: 13px;
    padding: 4px 10px;
    background: #2A2D2D;
    border-radius: 6px; }
  .timeline-page .sync-warnings-container {
    margin-bottom: 16px; }
    .timeline-page .sync-warnings-container.hidden {
      display: none; }
    .timeline-page .sync-warnings-container .checking-events {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      background: #1F1F1F;
      border-radius: 8px;
      color: #aaa;
      font-size: 13px; }
  .timeline-page .sync-warning {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 12px; }
    .timeline-page .sync-warning.duplicate {
      background: rgba(245, 158, 11, 0.1);
      border: 1px solid rgba(245, 158, 11, 0.3); }
    .timeline-page .sync-warning .warning-header {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #f59e0b;
      margin-bottom: 8px; }
      .timeline-page .sync-warning .warning-header i {
        font-size: 16px; }
      .timeline-page .sync-warning .warning-header strong {
        font-size: 14px; }
    .timeline-page .sync-warning p {
      color: #aaa;
      font-size: 13px;
      margin: 0 0 10px 0; }
    .timeline-page .sync-warning .existing-events-list {
      margin: 0 0 12px 20px;
      padding: 0;
      font-size: 12px;
      color: #aaa; }
      .timeline-page .sync-warning .existing-events-list li {
        margin-bottom: 4px; }
    .timeline-page .sync-warning .warning-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(245, 158, 11, 0.2); }
    .timeline-page .sync-warning .warning-option {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 13px;
      color: #F0F0F0; }
      .timeline-page .sync-warning .warning-option input[type="radio"] {
        accent-color: #f59e0b; }
  .timeline-page .sync-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px; }
  .timeline-page .quick-action-btn {
    padding: 6px 12px;
    background: #1F1F1F;
    border: 1px solid #2A2D2D;
    border-radius: 6px;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s; }
    .timeline-page .quick-action-btn:hover {
      background: #2A2D2D;
      color: #F0F0F0;
      border-color: var(--pref-accent-color); }
    .timeline-page .quick-action-btn i {
      font-size: 11px; }
  .timeline-page .sync-modal-priority {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #1F1F1F;
    border-radius: 10px; }
    .timeline-page .sync-modal-priority .priority-label {
      font-size: 13px;
      font-weight: 600;
      color: #F0F0F0;
      margin-bottom: 10px;
      display: block; }
  .timeline-page .priority-options-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap; }
  .timeline-page .priority-option-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #1F2020;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s; }
    .timeline-page .priority-option-inline input[type="radio"] {
      display: none; }
    .timeline-page .priority-option-inline:has(input:checked) {
      border-color: currentColor; }
    .timeline-page .priority-option-inline:has(input:checked) .priority-badge {
      transform: scale(1.05); }
  .timeline-page .sync-week-list {
    display: flex;
    flex-direction: column;
    gap: 12px; }
  .timeline-page .sync-week-group {
    border: 1px solid #2A2D2D;
    border-radius: 10px;
    overflow: hidden; }
  .timeline-page .sync-week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #1F1F1F;
    cursor: pointer; }
    .timeline-page .sync-week-header:hover {
      background: rgba(240, 240, 240, 0.05); }
  .timeline-page .sync-week-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1; }
    .timeline-page .sync-week-checkbox input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: var(--pref-accent-color);
      cursor: pointer; }
    .timeline-page .sync-week-checkbox .week-label {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px; }
      .timeline-page .sync-week-checkbox .week-label strong {
        color: #F0F0F0;
        font-size: 14px; }
      .timeline-page .sync-week-checkbox .week-label .week-date-range {
        font-size: 12px;
        color: #aaa;
        padding: 2px 8px;
        background: #2A2D2D;
        border-radius: 4px; }
  .timeline-page .week-expand-btn {
    background: none;
    border: none;
    color: #aaa;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s; }
    .timeline-page .week-expand-btn:hover {
      color: #F0F0F0; }
    .timeline-page .week-expand-btn i {
      transition: transform 0.2s; }
  .timeline-page .sync-item-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    margin: 0; }
    .timeline-page .sync-item-warning i {
      flex-shrink: 0; }
    .timeline-page .sync-item-warning.skip {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6; }
    .timeline-page .sync-item-warning.holiday {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b; }
    .timeline-page .sync-item-warning.past {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444; }
  .timeline-page .sync-week-items {
    padding: 12px 16px;
    background: #1F2020; }
    .timeline-page .sync-week-items.collapsed {
      display: none; }
  .timeline-page .sync-item-category {
    margin-bottom: 12px; }
    .timeline-page .sync-item-category:last-child {
      margin-bottom: 0; }
  .timeline-page .sync-category-header {
    margin-bottom: 8px; }
  .timeline-page .sync-category-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #F0F0F0; }
    .timeline-page .sync-category-checkbox input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--pref-accent-color);
      cursor: pointer; }
    .timeline-page .sync-category-checkbox i {
      color: var(--pref-accent-color);
      width: 16px;
      text-align: center; }
  .timeline-page .sync-item-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 26px; }
  .timeline-page .sync-item-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    background: #1F1F1F;
    border-radius: 6px;
    transition: background 0.2s; }
    .timeline-page .sync-item-checkbox:hover {
      background: #2A2D2D; }
    .timeline-page .sync-item-checkbox input[type="checkbox"] {
      width: 14px;
      height: 14px;
      accent-color: var(--pref-accent-color);
      cursor: pointer;
      flex-shrink: 0; }
    .timeline-page .sync-item-checkbox .item-title {
      flex: 1;
      font-size: 13px;
      color: #F0F0F0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .timeline-page .sync-item-checkbox .item-link-icon {
      color: #aaa;
      font-size: 11px;
      padding: 4px;
      transition: color 0.2s; }
      .timeline-page .sync-item-checkbox .item-link-icon:hover {
        color: var(--pref-accent-color); }
  .timeline-page .item-priority-select {
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    background: #2A2D2D;
    color: #F0F0F0; }
    .timeline-page .item-priority-select:focus {
      outline: 2px solid var(--pref-accent-color);
      outline-offset: 1px; }
    .timeline-page .item-priority-select option {
      padding: 4px 8px; }
  .timeline-page .item-date-input {
    padding: 3px 6px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid #2A2D2D;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    background: #1F1F1F;
    color: #F0F0F0;
    width: 115px; }
    .timeline-page .item-date-input:hover {
      border-color: var(--pref-accent-color); }
    .timeline-page .item-date-input:focus {
      outline: none;
      border-color: var(--pref-accent-color);
      box-shadow: 0 0 0 2px rgba(var(--pref-accent-rgb), 0.2); }
    .timeline-page .item-date-input::-webkit-calendar-picker-indicator {
      filter: invert(0.7);
      cursor: pointer; }
      .timeline-page .item-date-input::-webkit-calendar-picker-indicator:hover {
        filter: invert(0.5); }
  .timeline-page .bulk-priority-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: #1F1F1F;
    border-radius: 8px;
    margin-bottom: 16px; }
    .timeline-page .bulk-priority-section .bulk-priority-label {
      font-size: 13px;
      font-weight: 500;
      color: #aaa; }
    .timeline-page .bulk-priority-section .bulk-priority-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap; }
    .timeline-page .bulk-priority-section .set-all-priority-btn {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s; }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P0"] {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P0"]:hover {
          background: rgba(239, 68, 68, 0.3); }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P1"] {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P1"]:hover {
          background: rgba(245, 158, 11, 0.3); }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P2"] {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P2"]:hover {
          background: rgba(59, 130, 246, 0.3); }
      .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P3"] {
        background: rgba(156, 163, 175, 0.2);
        color: #9ca3af; }
        .timeline-page .bulk-priority-section .set-all-priority-btn[data-priority="P3"]:hover {
          background: rgba(156, 163, 175, 0.3); }
  .timeline-page .sync-summary {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(var(--pref-accent-rgb), 0.1);
    border: 1px solid rgba(var(--pref-accent-rgb), 0.2);
    border-radius: 8px;
    text-align: center; }
    .timeline-page .sync-summary.remove-summary {
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.2); }
  .timeline-page .sync-summary-count {
    font-size: 14px;
    font-weight: 600;
    color: #F0F0F0; }
    .timeline-page .sync-summary-count span {
      color: var(--pref-accent-color); }
  .timeline-page .remove-summary .sync-summary-count span {
    color: #ef4444; }
  .timeline-page .no-items-message {
    text-align: center;
    color: #aaa;
    padding: 40px 20px;
    font-size: 14px; }
  @media (max-width: 600px) {
    .timeline-page .calendar-action-modal {
      padding: 10px; }
    .timeline-page .calendar-action-modal-content {
      max-height: 90vh;
      border-radius: 12px; }
    .timeline-page .calendar-action-modal-header {
      padding: 16px; }
      .timeline-page .calendar-action-modal-header h2 {
        font-size: 1.1rem; }
    .timeline-page .calendar-action-modal-body {
      padding: 16px; }
    .timeline-page .calendar-action-modal-footer {
      padding: 12px 16px;
      flex-direction: column; }
      .timeline-page .calendar-action-modal-footer .modal-btn {
        width: 100%;
        justify-content: center; }
    .timeline-page .sync-quick-actions {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 4px; }
      .timeline-page .sync-quick-actions .quick-action-btn {
        white-space: nowrap;
        flex-shrink: 0; }
    .timeline-page .priority-options-inline {
      flex-wrap: nowrap;
      overflow-x: auto; }
    .timeline-page .sync-week-checkbox .week-label {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px; } }

/* ============================= */
/*    TOAST NOTIFICATIONS        */
/* ============================= */
.calendar-toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 400px; }
  .calendar-toast-notification.show {
    transform: translateY(0);
    opacity: 1; }
  .calendar-toast-notification.success {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    border: 1px solid #10b981;
    color: white; }
  .calendar-toast-notification.error {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    border: 1px solid #ef4444;
    color: white; }
  .calendar-toast-notification.warning {
    background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
    border: 1px solid #f59e0b;
    color: white; }
  .calendar-toast-notification .toast-message {
    font-size: 14px;
    font-weight: 500;
    flex: 1; }
  .calendar-toast-notification .toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s; }
    .calendar-toast-notification .toast-close:hover {
      color: white; }
  @media (max-width: 600px) {
    .calendar-toast-notification {
      bottom: 16px;
      right: 16px;
      left: 16px;
      max-width: none; } }

/* ============================= */
/*  BULK PRIORITY BUTTONS        */
/*  (Global - applies to modals) */
/* ============================= */
.sync-bulk-priority {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--panel-mid, #2a2a2a);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap; }
  .sync-bulk-priority .bulk-priority-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted, #888);
    margin-right: 4px; }

.bulk-priority-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s; }
  .bulk-priority-btn.p0, .bulk-priority-btn[data-priority="P0"] {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.3) !important; }
    .bulk-priority-btn.p0:hover, .bulk-priority-btn.p0.active, .bulk-priority-btn[data-priority="P0"]:hover, .bulk-priority-btn[data-priority="P0"].active {
      background: rgba(220, 38, 38, 0.3) !important;
      border-color: #dc2626 !important; }
  .bulk-priority-btn.p1, .bulk-priority-btn[data-priority="P1"] {
    background: rgba(234, 88, 12, 0.15) !important;
    color: #ea580c !important;
    border-color: rgba(234, 88, 12, 0.3) !important; }
    .bulk-priority-btn.p1:hover, .bulk-priority-btn.p1.active, .bulk-priority-btn[data-priority="P1"]:hover, .bulk-priority-btn[data-priority="P1"].active {
      background: rgba(234, 88, 12, 0.3) !important;
      border-color: #ea580c !important; }
  .bulk-priority-btn.p2, .bulk-priority-btn[data-priority="P2"] {
    background: rgba(202, 138, 4, 0.15) !important;
    color: #ca8a04 !important;
    border-color: rgba(202, 138, 4, 0.3) !important; }
    .bulk-priority-btn.p2:hover, .bulk-priority-btn.p2.active, .bulk-priority-btn[data-priority="P2"]:hover, .bulk-priority-btn[data-priority="P2"].active {
      background: rgba(202, 138, 4, 0.3) !important;
      border-color: #ca8a04 !important; }
  .bulk-priority-btn.p3, .bulk-priority-btn[data-priority="P3"] {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #16a34a !important;
    border-color: rgba(22, 163, 74, 0.3) !important; }
    .bulk-priority-btn.p3:hover, .bulk-priority-btn.p3.active, .bulk-priority-btn[data-priority="P3"]:hover, .bulk-priority-btn[data-priority="P3"].active {
      background: rgba(22, 163, 74, 0.3) !important;
      border-color: #16a34a !important; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/* Apply minimal body styles when lesson player is active */
body:has(.lesson-player) {
  margin: 0;
  padding: 0; }

/* Override any parent container constraints only for lesson player */
.lesson-player .container,
.lesson-player .main-content,
.lesson-player .wrapper {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important; }

.lesson-player {
  display: flex;
  height: calc(100vh - 80px);
  width: 100vw;
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 1000; }

/* LEFT SIDEBAR */
.lesson-sidebar {
  width: 500px;
  border-right: 1px solid #2A2D2D;
  overflow-y: auto;
  flex-shrink: 0; }

.sidebar-header {
  padding: 32px 24px;
  border-bottom: 1px solid #2A2D2D; }

.course-pill-nav {
  margin-bottom: 1.25rem; }

.sidebar-header .course-pill-nav,
.course-mobile-nav .course-pill-nav {
  gap: 6px; }
  .sidebar-header .course-pill-nav .ocs__btn, .sidebar-header .course-pill-nav .iridescent,
  .course-mobile-nav .course-pill-nav .ocs__btn,
  .course-mobile-nav .course-pill-nav .iridescent {
    padding: 6px 10px;
    font-size: 0.8rem; }

.lesson-sidebar .sidebar-header {
  padding: 16px 8px; }

.course-home {
  min-width: 0; }
  .course-home .announcement-chat {
    width: 100%;
    max-width: none;
    margin: 1rem 0; }

.course-panel-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px; }
  .course-panel-actions .course-pill-nav {
    flex: 1;
    min-width: 0;
    margin-bottom: 0; }

.sidebar-header h2 {
  color: #F0F0F0;
  font-size: 1.25rem;
  margin: 0 0 8px 0; }

.sidebar-header p {
  color: #aaa;
  margin: 0 0 16px 0;
  font-size: 14px; }

.course-progress-section {
  margin-top: 16px; }

.progress-label {
  display: flex;
  justify-content: space-between;
  color: #aaa;
  font-size: 14px;
  margin-bottom: 8px; }

.progress-bar-sidebar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  overflow: hidden; }

.progress-bar-sidebar-fill {
  height: 100%;
  background: #4CAFEF;
  transition: width 0.3s ease; }

/* Sprint Navigation */
.sprint-nav {
  padding: 24px 16px; }

.sprint-section {
  margin-bottom: 8px; }

.sprint-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left; }

/* Hover tints follow the live theme accent. $accent is a static #4CAFEF that
   is not the same colour as var(--pref-accent-color) and never changes when
   the reader picks a different accent, so these use the same color-mix idiom
   his status pills and button utilities use. */
.sprint-toggle:hover {
  background: color-mix(in srgb, var(--pref-accent-color) 8%, transparent); }

.sprint-toggle:focus-visible {
  outline: 2px solid var(--pref-accent-color);
  outline-offset: -2px; }

.sprint-chevron {
  width: 16px;
  height: 16px;
  color: #aaa;
  flex-shrink: 0; }

.sprint-info {
  flex: 1; }

.sprint-title {
  color: var(--pref-accent-color);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px; }

.sprint-weeks {
  color: #4CAFEF;
  font-size: 12px; }

.lesson-list {
  margin-left: 12px;
  margin-top: 4px; }

.lesson-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
  text-decoration: none; }

.lesson-item:hover {
  background: color-mix(in srgb, var(--pref-accent-color) 6%, transparent); }

.lesson-item:focus-visible {
  outline: 2px solid var(--pref-accent-color);
  outline-offset: -2px; }

.lesson-item.active,
.lesson-item.navigation-resume {
  background: color-mix(in srgb, var(--pref-accent-color) 10%, transparent); }

.lesson-item.active .lesson-title,
.lesson-item.navigation-resume .lesson-title {
  color: #F0F0F0; }

.lesson-status-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: all 0.2s ease; }

/* Incomplete state - completely hidden, no space */
.lesson-status-icon.incomplete {
  display: none; }

/* Completed state - visible blue checkmark */
.lesson-status-icon.completed {
  display: block;
  color: #4CAFEF; }

.lesson-title {
  color: #aaa;
  font-size: 14px;
  flex: 1;
  min-width: 0; }

/* MAIN CONTENT AREA */
.lesson-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

/* Top Bar */
.topbar-lesson {
  border-bottom: 1px solid #2A2D2D;
  padding: 6px 24px; }

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px; }

/* When the row is tight (an iPad in portrait keeps the 250px sidebar), the
   crumbs give way so Prev / Next stay side by side instead of stacking.
   .ocs__links wraps by default, which is what stacked them. */
.topbar-left {
  min-width: 0; }

.topbar-actions .ocs__links {
  flex-shrink: 0;
  flex-wrap: nowrap; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 14px; }

.breadcrumbs .current {
  color: #F0F0F0; }

/* Keep each crumb whole and let the lesson title truncate; it is repeated as
   the H1 just below. Burndown lives inside .breadcrumbs, so it must not be
   the thing that gets squeezed. */
.breadcrumbs span {
  white-space: nowrap; }

.breadcrumbs .current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; }

.breadcrumbs .ocs__btn, .breadcrumbs .iridescent {
  flex-shrink: 0; }

.topbar-progress {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  overflow: hidden; }

.topbar-progress-fill {
  height: 100%;
  background: #4CAFEF;
  width: 15%;
  transition: width 0.3s ease; }

/* Lesson Content */
.lesson-content,
.lesson-content-inner,
.lesson-header {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  margin: 0;
  text-align: left;
  padding: 6px 24px;
  box-sizing: border-box; }

.lesson-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #F0F0F0;
  font-size: 14px;
  margin-bottom: 6px; }

.lesson-body {
  color: #aaa;
  line-height: 1.7; }

.lesson-body h2 {
  color: #F0F0F0;
  font-size: 1.5rem;
  margin: 0; }

.lesson-body h3 {
  color: #F0F0F0;
  font-size: 1.25rem;
  margin: 24px 0 12px 0; }

.lesson-body h4 {
  color: #F0F0F0;
  font-size: 1.1rem;
  margin: 20px 0 10px 0; }

.lesson-body p {
  margin-bottom: 16px; }

.lesson-body ul, .lesson-body ol {
  margin-bottom: 16px;
  padding-left: 24px; }

.lesson-body li {
  margin-bottom: 8px; }

.lesson-body a {
  color: #4CAFEF;
  text-decoration: none; }

.lesson-body a:hover {
  text-decoration: underline; }

.lesson-body code {
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
  color: #F0F0F0; }

.lesson-body pre {
  border: 1px solid var(--pref-accent-color);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 16px; }

.lesson-body pre code {
  background: none;
  padding: 0; }

.lesson-body blockquote {
  border-left: 4px solid var(--pref-accent-color);
  padding-left: 16px;
  margin-left: 0;
  color: #aaa; }

.lesson-body img {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0; }

.lesson-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0; }

.lesson-body table th,
.lesson-body table td {
  border: 1px solid var(--pref-accent-color);
  padding: 8px 12px;
  text-align: left; }

.lesson-body table th,
.lesson-body table tr:nth-child(even) {
  background: var(--bg-2); }

/* Assignment Submission Widget */
/* Remove these legacy rules:
.assignment-submission {
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--pref-accent-color);
  border-radius: 12px;
}

.assignment-submission h3 {
  color: $text;
  font-size: 1.25rem;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
*/
.assignment-submission-icon {
  color: #4CAFEF; }

/* Self-Assessment */
.self-assessment {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: #1F2020;
  border: 1px solid #2A2D2D;
  border-radius: 8px; }

.self-assessment-title {
  color: #F0F0F0;
  font-size: 1rem;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px; }

.self-assessment-hint {
  color: #aaa;
  font-size: 13px;
  margin: 0 0 16px 0; }

.rating-group {
  border: none;
  padding: 0;
  margin: 0 0 18px 0; }

.rating-label {
  color: #F0F0F0;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 4px; }

.rating-question {
  color: #aaa;
  font-size: 13px;
  margin: 0 0 8px 0; }

.rating-scale {
  display: flex;
  gap: 8px;
  flex-wrap: wrap; }

.rating-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #2A2D2D;
  border-radius: 6px;
  background: #000;
  color: #F0F0F0;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s; }

.rating-option:has(input:checked),
.rating-option.selected {
  background: #4CAFEF;
  color: #000;
  border-color: #4CAFEF; }

.rating-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0; }

.rating-scale-hint {
  color: #aaa;
  font-size: 11px;
  margin-top: 6px; }

.self-assessment-reflection {
  margin-bottom: 0; }

.submission-options {
  display: flex;
  gap: 12px;
  margin-bottom: 20px; }

.submission-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #2A2D2D;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s; }

.submission-tab:hover {
  background: #1F2020;
  color: #F0F0F0; }

.submission-tab.active {
  background: #4CAFEF;
  color: #000;
  border-color: #4CAFEF; }

.submission-form {
  display: none; }

.submission-form.active {
  display: block; }

.form-group {
  margin-bottom: 16px; }

.form-group label {
  display: block;
  color: #F0F0F0;
  font-size: 14px;
  margin-bottom: 8px; }

.form-group input[type="text"],
.form-group input[type="url"],
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #2A2D2D;
  border-radius: 6px;
  color: #F0F0F0;
  font-size: 14px;
  font-family: inherit; }

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4CAFEF; }

.form-group textarea {
  min-height: 100px;
  resize: vertical; }

.file-upload-area {
  border: 2px dashed #2A2D2D;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s; }

.file-upload-area:hover {
  border-color: #4CAFEF;
  background: #1F2020; }

.file-upload-area.dragover {
  border-color: #4CAFEF;
  background: #1F2020; }

.file-upload-icon {
  font-size: 48px;
  color: #4CAFEF;
  margin-bottom: 12px; }

.file-upload-text {
  color: #aaa;
  margin-bottom: 8px; }

.file-upload-hint {
  color: #aaa;
  font-size: 12px; }

.file-list {
  margin-top: 16px; }

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #1F2020;
  border-radius: 6px;
  margin-bottom: 8px; }

.file-info {
  display: flex;
  align-items: center;
  gap: 12px; }

.file-name {
  color: #F0F0F0;
  font-size: 14px; }

.file-size {
  color: #aaa;
  font-size: 12px; }

.remove-file {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s; }

.remove-file:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ff6b6b; }

.submit-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  margin-left: 8px;
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color);
  font-size: 14px; }
  .submit-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .submit-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .submit-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .submit-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .submit-btn {
      margin-left: 0.25rem;
      width: 44px; } }
  .submit-btn:hover {
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    opacity: 0.85;
    transform: scale(1.05); }

.submit-btn:disabled {
  background: #2A2D2D;
  color: #aaa;
  cursor: not-allowed; }

.submission-status {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  display: none; }

.submission-status.success {
  display: block;
  background: rgba(76, 175, 239, 0.1);
  border: 1px solid #4CAFEF;
  color: #4CAFEF; }

.submission-status.error {
  display: block;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  color: #ef4444; }

.submission-status.loading {
  display: block;
  background: color-mix(in srgb, var(--pref-accent-color) 10%, transparent);
  border: 1px solid var(--pref-accent-color);
  color: #F0F0F0; }

.code-runner-summary {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.9rem; }

.code-runner-summary li {
  padding: 4px 0; }

.code-runner-saved {
  color: var(--pref-success-color, #22c55e); }

.code-runner-unsaved {
  color: #ef4444; }

/* Bottom Navigation */
.lesson-bottom {
  border-top: 1px solid var(--pref-accent-color);
  padding: 12px 64px; }

.lesson-bottom-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.bottom-actions {
  display: flex;
  gap: 12px; }

/* Shared touch targets for opening navigation and closing its panel. */
.mobile-course-menu,
.lesson-course-menu,
.timeline-close-btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 8px;
  margin-left: 0;
  display: flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--pref-accent-color);
  border-radius: 8px; }
  .mobile-course-menu:hover,
  .lesson-course-menu:hover,
  .timeline-close-btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .mobile-course-menu:focus,
  .lesson-course-menu:focus,
  .timeline-close-btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .mobile-course-menu:hover,
  .lesson-course-menu:hover,
  .timeline-close-btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .mobile-course-menu,
    .lesson-course-menu,
    .timeline-close-btn {
      height: 44px; } }
  @media (max-width: 768px) {
    .mobile-course-menu,
    .lesson-course-menu,
    .timeline-close-btn {
      margin-left: 0.25rem;
      width: 44px; } }

.mobile-course-menu {
  display: none; }

#lesson-sidebar-toggle-wrap {
  flex-shrink: 0; }

/* Timeline Modal - applies to all screen sizes */
.timeline-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 800px;
  height: 80vh;
  background-color: var(--pref-bg-color);
  border: 1px solid #2A2D2D;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: none;
  flex-direction: column;
  overflow: hidden; }

.timeline-modal.open {
  display: flex; }

.timeline-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1999;
  display: none; }

.timeline-modal-overlay.open {
  display: block; }

.timeline-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #2A2D2D; }

.timeline-modal-header h3 {
  color: #F0F0F0;
  margin: 0;
  font-size: 1.5rem; }

.timeline-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px; }

/* Sprint cards in modal */
.modal-sprint-card {
  border: 1px solid var(--pref-accent-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }

.modal-sprint-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pref-accent-color); }

.modal-sprint-title {
  color: #F0F0F0;
  font-size: 1.2rem;
  margin: 0; }

.modal-sprint-toggle {
  background: transparent;
  border: 1px solid var(--pref-accent-color);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s; }

.modal-sprint-toggle:hover {
  background: var(--bg-2); }

.modal-lessons {
  display: none; }

.modal-lessons.expanded {
  display: block; }

.modal-lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #2A2D2D;
  border-radius: 8px;
  text-decoration: none;
  color: #F0F0F0;
  transition: all 0.2s;
  margin-bottom: 8px; }

.modal-lesson-item:hover {
  background: var(--bg-2);
  border-color: var(--pref-accent-color); }

.modal-lesson-item.active,
.modal-lesson-item.navigation-resume {
  border-color: var(--pref-accent-color); }

.modal-lesson-status {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: all 0.2s ease; }

.modal-lesson-status.incomplete {
  display: none; }

.modal-lesson-status.completed {
  display: block;
  color: #4CAFEF; }

.modal-lesson-title {
  flex: 1;
  font-size: 14px; }

@keyframes checkmarkAppear {
  0% {
    opacity: 0;
    transform: scale(0.5); }
  50% {
    transform: scale(1.1); }
  100% {
    opacity: 1;
    transform: scale(1); } }
.lesson-status-icon.completed,
.modal-lesson-status.completed {
  animation: checkmarkAppear 0.3s ease; }

/* Mobile Styles */
@media (max-width: 768px) {
  .lesson-player {
    flex-direction: column;
    height: auto;
    position: static;
    width: 100%; }

  .lesson-sidebar {
    display: none; }

  .lesson-main {
    flex: none;
    width: 100%;
    height: auto;
    /* ADD THIS */
    min-height: 100vh;
    /* ADD THIS */ }

  .mobile-course-menu {
    display: flex; }

  .topbar-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; }

  /* With align-items: flex-start the crumbs sized to their min-content, and
     the lesson title still counts at full width there, so the row came out
     396px wide and pushed Burndown off a 375px screen. Holding it to the
     column's width is what lets the title truncate. */
  .topbar-left {
    width: 100%; }

  .breadcrumbs {
    font-size: 12px; }

  .lesson-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; }

  .lesson-body {
    width: 100%;
    /* ADD THIS */ }

  .lesson-bottom {
    padding: 8px 16px;
    position: relative;
    /* ADD THIS */ }

  .lesson-bottom-inner {
    flex-direction: column;
    gap: 12px;
    align-items: stretch; }

  .bottom-actions {
    width: 100%;
    justify-content: space-between; }

  .assignment-submission {
    margin-top: 24px;
    padding: 16px; }

  .submission-options {
    flex-direction: column;
    gap: 8px; }

  .submission-tab {
    width: 100%;
    text-align: center; }

  .file-upload-area {
    padding: 20px; }

  .file-upload-icon {
    font-size: 32px; } }
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --blue: #3182CE;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden; }

.header {
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-3) 100%);
  padding: 3rem 2rem;
  text-align: center;
  border-bottom: 3px solid var(--accent);
  position: relative;
  overflow: hidden; }

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(74, 222, 128, 0.03) 10px, rgba(74, 222, 128, 0.03) 20px);
  pointer-events: none; }

h1 {
  font-size: 3rem;
  font-weight: 700;
  color: var(--green);
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
  margin-bottom: 0.5rem;
  position: relative; }

.subtitle {
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 400; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem; }

.section {
  background: var(--panel);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--accent);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.5s ease-out; }

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
h2 {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem; }

h3 {
  font-size: 1.4rem;
  color: var(--accent);
  margin: 1.5rem 0 1rem 0; }

p {
  margin-bottom: 1rem;
  color: var(--text-muted); }

.code-block {
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1rem 0;
  font-family: 'Space Mono', monospace;
  overflow-x: auto;
  position: relative; }

.code-block::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase; }

.code-block code {
  color: var(--text);
  font-size: 0.9rem; }

.keyword {
  color: var(--accent); }

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

.comment {
  color: var(--text-muted);
  font-style: italic; }

.method {
  color: var(--warn); }

.number {
  color: var(--orange); }

.list-item {
  background: var(--bg-3);
  padding: 1rem;
  margin: 0.5rem 0;
  border-radius: 6px;
  border-left: 3px solid var(--accent-700); }

.list-item strong {
  color: var(--accent); }

.game-container {
  background: var(--bg-1);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative; }

.game-header {
  text-align: center;
  margin-bottom: 2rem; }

.game-title {
  font-size: 1.8rem;
  color: var(--green);
  margin-bottom: 0.5rem; }

.game-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem; }

.game-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem; }

.game-panel {
  background: var(--panel);
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid var(--bg-3); }

.panel-header {
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bg-3); }

.error-indicator {
  background: rgba(229, 62, 62, 0.2);
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  color: var(--red); }

.success-indicator {
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  color: var(--green);
  display: none; }

.debug-tools {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap; }

.tool-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent; }

.tool-btn:hover {
  background: var(--accent-700-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(74, 175, 239, 0.3); }

.tool-btn:active {
  transform: translateY(0); }

.tool-btn.used {
  background: var(--bg-3);
  color: var(--text-muted);
  cursor: not-allowed; }

.output-console {
  background: var(--bg-0);
  border: 1px solid var(--bg-3);
  border-radius: 6px;
  padding: 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  min-height: 150px;
  max-height: 300px;
  overflow-y: auto; }

.console-line {
  padding: 0.25rem 0;
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards; }

@keyframes fadeIn {
  to {
    opacity: 1; } }
.console-error {
  color: var(--red); }

.console-success {
  color: var(--green); }

.console-info {
  color: var(--accent); }

.console-warning {
  color: var(--warn); }

.postman-sim {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 1rem; }

.request-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem; }

.method-select {
  background: var(--success-green);
  color: var(--text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; }

.url-input {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--surface);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; }

.send-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease; }

.send-btn:hover {
  background: var(--accent-700-hover); }

.response-section {
  margin-top: 1rem; }

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem; }

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

.status-500 {
  background: rgba(229, 62, 62, 0.2);
  color: var(--red); }

.objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem; }

.objective-card {
  background: var(--bg-3);
  border: 2px solid var(--accent-700);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease; }

.objective-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 8px 16px rgba(74, 175, 239, 0.2); }

.objective-number {
  display: inline-block;
  background: var(--accent-700);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 0.5rem; }

.interactive-section {
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border-radius: 12px;
  padding: 2rem;
  margin-top: 2rem;
  border: 2px solid var(--green); }

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem; }

.interactive-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-align: left;
  position: relative;
  overflow: hidden; }

.interactive-btn::before {
  content: '→';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  transition: transform 0.3s ease; }

.interactive-btn:hover {
  background: var(--accent-700-hover);
  border-color: var(--accent);
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(74, 175, 239, 0.4); }

.interactive-btn:hover::before {
  transform: translateY(-50%) translateX(5px); }

.interactive-btn.clicked {
  background: var(--green-bg);
  border-color: var(--green); }

.progress-bar {
  background: var(--bg-3);
  height: 8px;
  border-radius: 4px;
  margin-top: 1rem;
  overflow: hidden; }

.progress-fill {
  background: linear-gradient(90deg, var(--accent-700) 0%, var(--green) 100%);
  height: 100%;
  width: 0%;
  transition: width 0.5s ease; }

.hint-box {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem 0;
  display: none; }

.hint-box.visible {
  display: block;
  animation: slideIn 0.3s ease-out; }

.hint-title {
  color: var(--warn);
  font-weight: 700;
  margin-bottom: 0.5rem; }

.badge {
  display: inline-block;
  background: var(--accent-700);
  color: var(--text);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 0.5rem; }

@media (max-width: 768px) {
  .game-content {
    grid-template-columns: 1fr; }

  h1 {
    font-size: 2rem; }

  .container {
    padding: 1rem; } }
.line-number {
  color: var(--text-muted);
  display: inline-block;
  width: 30px;
  user-select: none; }

.code-line {
  display: block; }

.highlight-error {
  background: rgba(229, 62, 62, 0.2);
  border-radius: 3px;
  padding: 0 3px; }

.tab-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem; }

.tab-btn {
  background: var(--bg-3);
  color: var(--text-muted);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px 6px 0 0;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.3s ease; }

.tab-btn.active {
  background: var(--accent-700);
  color: var(--text); }

.tab-content {
  display: none; }

.tab-content.active {
  display: block; }

/**
 * API Documentation Styles
 * Clean, maintainable styles for technical documentation pages
 * Uses theme variables and mixins for consistency
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
.api-docs {
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
  .api-docs .api-header {
    background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
    padding: 25px;
    border-radius: 12px 12px 0 0;
    border-bottom: 3px solid var(--accent); }
    .api-docs .api-header h2 {
      margin: 0;
      color: var(--accent);
      font-weight: 700;
      font-size: 24px; }
    .api-docs .api-header p {
      margin: 8px 0 0 0;
      color: var(--text);
      opacity: 0.85;
      font-size: 15px; }
  .api-docs .api-content {
    background: var(--bg-0);
    padding: 30px;
    border-radius: 0 0 12px 12px; }
  .api-docs section {
    margin-bottom: 30px; }
  .api-docs h3 {
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 20px 0; }
    .api-docs h3.accent {
      color: var(--accent); }
    .api-docs h3.green {
      color: var(--green); }
    .api-docs h3.teal {
      color: var(--teal); }
    .api-docs h3.orange {
      color: var(--orange); }
  .api-docs h4 {
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 15px 0; }
  .api-docs .grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px; }
  .api-docs .panel {
    background: var(--bg-2);
    border-radius: 8px;
    padding: 20px; }
    .api-docs .panel.border-left {
      border-left: 4px solid; }
      .api-docs .panel.border-left.accent {
        border-color: var(--accent); }
      .api-docs .panel.border-left.teal {
        border-color: var(--teal); }
      .api-docs .panel.border-left.green {
        border-color: var(--green); }
      .api-docs .panel.border-left.orange {
        border-color: var(--orange); }
    .api-docs .panel.border-all {
      border: 2px solid; }
      .api-docs .panel.border-all.accent {
        border-color: var(--accent); }
      .api-docs .panel.border-all.teal {
        border-color: var(--teal); }
      .api-docs .panel.border-all.green {
        border-color: var(--green); }
    .api-docs .panel .panel-title {
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 10px; }
      .api-docs .panel .panel-title.accent {
        color: var(--accent); }
      .api-docs .panel .panel-title.teal {
        color: var(--teal); }
      .api-docs .panel .panel-title.green {
        color: var(--green); }
      .api-docs .panel .panel-title.orange {
        color: var(--orange); }
    .api-docs .panel ul {
      color: var(--text-muted);
      margin: 0;
      padding-left: 20px;
      line-height: 1.8;
      font-size: 14px; }
      .api-docs .panel ul strong {
        color: var(--text); }
    .api-docs .panel .panel-example {
      margin-top: 15px;
      padding: 12px;
      background: var(--bg-0);
      border-radius: 6px;
      font-size: 13px;
      color: var(--text-muted); }
      .api-docs .panel .panel-example strong {
        color: var(--accent); }
  .api-docs .info-box {
    padding: 12px;
    border-radius: 4px;
    margin: 15px 0;
    font-size: 14px;
    border-left: 3px solid; }
    .api-docs .info-box.warning {
      background: var(--warn-bg);
      border-color: var(--warn); }
      .api-docs .info-box.warning strong {
        color: var(--warn); }
    .api-docs .info-box.info {
      background: var(--bg-3);
      border-color: var(--accent); }
      .api-docs .info-box.info strong {
        color: var(--accent); }
    .api-docs .info-box.success {
      background: var(--green-bg);
      border-color: var(--green); }
      .api-docs .info-box.success strong {
        color: var(--green); }
    .api-docs .info-box strong {
      font-weight: 600; }
    .api-docs .info-box span {
      color: var(--text-muted); }
  .api-docs .http-method {
    background: var(--bg-2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px; }
    .api-docs .http-method.get {
      border-left: 4px solid var(--teal); }
    .api-docs .http-method.post {
      border-left: 4px solid var(--accent); }
    .api-docs .http-method.delete {
      border-left: 4px solid var(--orange); }
    .api-docs .http-method .method-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px; }
      .api-docs .http-method .method-header .method-name {
        font-weight: 700;
        font-size: 18px; }
        .api-docs .http-method .method-header .method-name.get {
          color: var(--teal); }
        .api-docs .http-method .method-header .method-name.post {
          color: var(--accent); }
        .api-docs .http-method .method-header .method-name.delete {
          color: var(--orange); }
        .api-docs .http-method .method-header .method-name .arrow {
          color: var(--text-muted);
          font-size: 14px;
          margin-left: 10px;
          font-weight: 400; }
      .api-docs .http-method .method-header .method-badge {
        padding: 4px 12px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 12px;
        color: var(--bg-2); }
        .api-docs .http-method .method-header .method-badge.get {
          background: var(--teal); }
        .api-docs .http-method .method-header .method-badge.post {
          background: var(--accent); }
        .api-docs .http-method .method-header .method-badge.delete {
          background: var(--orange); }
    .api-docs .http-method .method-description {
      color: var(--text-muted);
      margin: 0 0 15px 0;
      font-size: 14px;
      line-height: 1.6; }
      .api-docs .http-method .method-description strong {
        color: var(--text); }
    .api-docs .http-method details {
      cursor: pointer; }
      .api-docs .http-method details summary {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 10px; }
        .api-docs .http-method details summary.get {
          color: var(--teal); }
        .api-docs .http-method details summary.post {
          color: var(--accent); }
        .api-docs .http-method details summary.delete {
          color: var(--orange); }
  .api-docs pre {
    background: var(--bg-0);
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 10px 0 0 0; }
    .api-docs pre code {
      color: var(--text);
      font-family: 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.5; }
      .api-docs pre code .comment {
        color: var(--text-muted); }
      .api-docs pre code .keyword {
        color: #c44569; }
      .api-docs pre code .string {
        color: var(--teal); }
      .api-docs pre code .function {
        color: var(--green); }
  .api-docs ol {
    color: var(--text-muted);
    margin: 0;
    padding-left: 20px;
    line-height: 2;
    font-size: 14px; }
    .api-docs ol strong {
      color: var(--text); }
    .api-docs ol a {
      color: var(--accent);
      text-decoration: none; }
      .api-docs ol a:hover {
        text-decoration: underline; }
    .api-docs ol code {
      background: var(--bg-0);
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--orange); }
  .api-docs .integration-guide {
    background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px; }
    .api-docs .integration-guide .architecture-flow {
      background: var(--bg-0);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px; }
      .api-docs .integration-guide .architecture-flow .flow-box {
        background: var(--bg-2);
        padding: 15px;
        border-left: 4px solid var(--accent);
        border-radius: 4px; }
        .api-docs .integration-guide .architecture-flow .flow-box p {
          color: var(--text-muted);
          margin: 0 0 10px 0;
          font-size: 14px;
          line-height: 1.8; }
          .api-docs .integration-guide .architecture-flow .flow-box p:last-child {
            margin-bottom: 0; }
          .api-docs .integration-guide .architecture-flow .flow-box p .step {
            font-weight: 600; }
          .api-docs .integration-guide .architecture-flow .flow-box p .arrow {
            color: var(--text-muted);
            opacity: 0.5; }
    .api-docs .integration-guide .integration-steps {
      background: var(--bg-2);
      border-radius: 8px;
      padding: 20px; }
      .api-docs .integration-guide .integration-steps .step {
        margin-bottom: 20px; }
        .api-docs .integration-guide .integration-steps .step:last-child {
          margin-bottom: 0; }
        .api-docs .integration-guide .integration-steps .step .step-header {
          display: flex;
          align-items: center;
          margin-bottom: 10px; }
          .api-docs .integration-guide .integration-steps .step .step-header .step-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-right: 12px;
            color: var(--bg-2); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-1 {
              background: var(--accent); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-2 {
              background: var(--teal); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-3 {
              background: var(--green); }
            .api-docs .integration-guide .integration-steps .step .step-header .step-number.step-4 {
              background: var(--orange); }
          .api-docs .integration-guide .integration-steps .step .step-header strong {
            font-size: 15px; }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-1 {
              color: var(--accent); }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-2 {
              color: var(--teal); }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-3 {
              color: var(--green); }
            .api-docs .integration-guide .integration-steps .step .step-header strong.step-4 {
              color: var(--orange); }
        .api-docs .integration-guide .integration-steps .step pre {
          margin-left: 40px; }
          .api-docs .integration-guide .integration-steps .step pre code {
            font-size: 12px; }
        .api-docs .integration-guide .integration-steps .step p {
          color: var(--text-muted);
          margin: 0 0 10px 40px;
          font-size: 13px;
          line-height: 1.6; }
          .api-docs .integration-guide .integration-steps .step p code {
            background: var(--bg-0);
            padding: 2px 6px;
            border-radius: 3px;
            color: var(--accent); }
        .api-docs .integration-guide .integration-steps .step ul {
          color: var(--text-muted);
          margin: 0 0 0 60px;
          padding: 0;
          font-size: 13px;
          line-height: 1.8; }
          .api-docs .integration-guide .integration-steps .step ul strong {
            color: var(--text); }
  .api-docs .auto-enable {
    background: linear-gradient(135deg, #2d1b3d 0%, var(--bg-2) 100%);
    border: 2px solid var(--green);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px; }
    .api-docs .auto-enable h3 {
      color: var(--green); }
    .api-docs .auto-enable .option-panel {
      background: var(--bg-2);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px; }
      .api-docs .auto-enable .option-panel:last-of-type {
        margin-bottom: 0; }
      .api-docs .auto-enable .option-panel h4.option-1 {
        color: var(--accent); }
      .api-docs .auto-enable .option-panel h4.option-2 {
        color: var(--teal); }
      .api-docs .auto-enable .option-panel p {
        color: var(--text-muted);
        margin: 0 0 15px 0;
        font-size: 14px; }
        .api-docs .auto-enable .option-panel p code {
          background: var(--bg-0);
          padding: 2px 6px;
          border-radius: 3px;
          color: var(--orange); }
    .api-docs .auto-enable .pro-tip {
      background: #2d1b3d;
      border-left: 3px solid var(--green);
      padding: 15px;
      border-radius: 6px;
      margin-top: 20px; }
      .api-docs .auto-enable .pro-tip strong {
        color: var(--green); }
      .api-docs .auto-enable .pro-tip span {
        color: var(--text-muted);
        font-size: 13px; }

/**
 * Migration Runbook Styles
 * Operational runbook pages: phased procedures, severity-rated audit tables,
 * numbered steps with destructive/verify states, and a sticky contents rail.
 *
 * Layers on top of `api-documentation.scss` -- a runbook page carries BOTH
 * classes (`class="api-docs migration-runbook"`), so panels, info boxes,
 * `pre`/`code` and the two-column grid come from there and are not redefined
 * here. Only the constructs `.api-docs` has no rules for live in this file.
 *
 * spacing, radii and type sizes come from `mixins/_variables.scss`.
 */
/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
.migration-runbook {
  max-width: 1040px; }
  .migration-runbook .phase-label {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px 0; }
    @media (max-width: 768px) {
      .migration-runbook .phase-label {
        font-size: 8px; } }
  .migration-runbook .runbook-toc {
    background: var(--bg-2);
    border-radius: 8px;
    border-left: 4px solid var(--accent);
    padding: 20px;
    margin-bottom: 30px; }
    .migration-runbook .runbook-toc .toc-title {
      font-weight: 700;
      font-size: 14px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin-bottom: 12px; }
      @media (max-width: 768px) {
        .migration-runbook .runbook-toc .toc-title {
          font-size: 11.2px; } }
    .migration-runbook .runbook-toc ol {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 20px; }
      @media (max-width: 768px) {
        .migration-runbook .runbook-toc ol {
          grid-template-columns: 1fr; } }
    .migration-runbook .runbook-toc li {
      display: flex;
      gap: 10px;
      align-items: baseline;
      font-size: 14px;
      line-height: 1.5; }
      @media (max-width: 768px) {
        .migration-runbook .runbook-toc li {
          font-size: 11.2px; } }
    .migration-runbook .runbook-toc .toc-num {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: var(--text-muted);
      min-width: 26px; }
      @media (max-width: 768px) {
        .migration-runbook .runbook-toc .toc-num {
          font-size: 9.6px; } }
    .migration-runbook .runbook-toc a {
      color: var(--text);
      text-decoration: none; }
      .migration-runbook .runbook-toc a:hover {
        color: var(--accent);
        text-decoration: underline; }
      .migration-runbook .runbook-toc a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px; }
  .migration-runbook .panel p {
    color: var(--text-muted);
    margin: 0 0 10px 0;
    line-height: 1.7;
    font-size: 14px; }
    @media (max-width: 768px) {
      .migration-runbook .panel p {
        font-size: 11.2px; } }
    .migration-runbook .panel p:last-child {
      margin-bottom: 0; }
    .migration-runbook .panel p strong {
      color: var(--text); }
  .migration-runbook .findings-table {
    overflow-x: auto;
    border: 1px solid var(--bg-3);
    border-radius: 8px;
    background: var(--bg-2);
    margin-bottom: 20px; }
    .migration-runbook .findings-table table {
      border-collapse: collapse;
      width: 100%;
      min-width: 620px;
      font-size: 14px; }
      @media (max-width: 768px) {
        .migration-runbook .findings-table table {
          font-size: 11.2px; } }
    .migration-runbook .findings-table th {
      text-align: left;
      font-family: 'Courier New', monospace;
      font-size: 10px;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--text-muted);
      padding: 12px 15px;
      border-bottom: 1px solid var(--bg-3);
      white-space: nowrap; }
    .migration-runbook .findings-table td {
      padding: 12px 15px;
      border-bottom: 1px solid var(--bg-3);
      vertical-align: top;
      line-height: 1.6;
      color: var(--text-muted); }
      .migration-runbook .findings-table td strong {
        color: var(--text); }
      .migration-runbook .findings-table td code {
        background: var(--bg-0);
        padding: 2px 6px;
        border-radius: 3px;
        color: var(--orange);
        font-family: 'Courier New', monospace; }
    .migration-runbook .findings-table tbody tr:last-child td {
      border-bottom: none; }
    .migration-runbook .findings-table td.where {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: var(--text-muted);
      white-space: nowrap; }
  .migration-runbook .sev {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap; }
    .migration-runbook .sev.loss {
      background: rgba(229, 62, 62, 0.18);
      color: var(--red); }
    .migration-runbook .sev.breaks {
      background: var(--warn-bg);
      color: var(--warn); }
    .migration-runbook .sev.risk {
      background: var(--bg-3);
      color: var(--text-muted); }
  .migration-runbook ol.steps {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px; }
  .migration-runbook li.step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 15px;
    background: var(--bg-2);
    border-left: 4px solid var(--bg-3);
    border-radius: 0 6px 6px 0;
    padding: 15px 20px; }
    @media (max-width: 768px) {
      .migration-runbook li.step {
        grid-template-columns: 1fr;
        gap: 8px 0; } }
    .migration-runbook li.step.destructive {
      border-left-color: var(--red); }
      .migration-runbook li.step.destructive .step-num {
        color: var(--red); }
    .migration-runbook li.step.verify {
      border-left-color: var(--green); }
      .migration-runbook li.step.verify .step-num {
        color: var(--green); }
    .migration-runbook li.step .step-num {
      font-family: 'Courier New', monospace;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-muted);
      padding-top: 2px; }
    .migration-runbook li.step .step-body {
      min-width: 0; }
    .migration-runbook li.step .step-title {
      font-weight: 700;
      font-size: 16px;
      color: var(--text);
      margin: 0 0 8px 0;
      line-height: 1.4; }
      @media (max-width: 768px) {
        .migration-runbook li.step .step-title {
          font-size: 12.8px; } }
    .migration-runbook li.step p {
      margin: 0 0 10px 0;
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6; }
      @media (max-width: 768px) {
        .migration-runbook li.step p {
          font-size: 11.2px; } }
      .migration-runbook li.step p:last-child {
        margin-bottom: 0; }
      .migration-runbook li.step p strong {
        color: var(--text); }
      .migration-runbook li.step p code {
        background: var(--bg-0);
        padding: 2px 6px;
        border-radius: 3px;
        color: var(--accent);
        font-family: 'Courier New', monospace; }
    .migration-runbook li.step ul {
      color: var(--text-muted);
      margin: 0 0 10px 0;
      padding-left: 20px;
      line-height: 1.8;
      font-size: 14px; }
      @media (max-width: 768px) {
        .migration-runbook li.step ul {
          font-size: 11.2px; } }
      .migration-runbook li.step ul strong {
        color: var(--text); }
    .migration-runbook li.step .step-where {
      display: inline-block;
      font-family: 'Courier New', monospace;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: var(--bg-0);
      padding: 2px 8px;
      border-radius: 4px;
      margin-left: 8px;
      vertical-align: 2px;
      white-space: nowrap; }
    .migration-runbook li.step pre {
      margin: 0 0 10px 0; }
  .migration-runbook pre .c {
    color: var(--text-muted); }
  .migration-runbook hr.runbook-div {
    border: none;
    border-top: 1px solid var(--bg-3);
    margin: 30px 0; }
  .migration-runbook .runbook-footer {
    border-top: 1px solid var(--bg-3);
    padding-top: 20px;
    color: var(--text-muted);
    font-size: 14px; }
    @media (max-width: 768px) {
      .migration-runbook .runbook-footer {
        font-size: 11.2px; } }
    .migration-runbook .runbook-footer code {
      background: var(--bg-0);
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--orange);
      font-family: 'Courier New', monospace; }

.creator-workspace {
  padding: 1.5rem;
  color: var(--pref-text-color); }

.creator-workspace__header,
.creator-workspace__section-heading,
.creator-results-bar,
.creator-pagination {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem; }

.creator-workspace__header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-border); }

.creator-workspace .creator-workspace__eyebrow,
.creator-filter > span {
  color: var(--pref-accent-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.creator-workspace__eyebrow,
.creator-workspace h2,
.creator-workspace h3,
.creator-workspace p {
  margin-top: 0; }

.creator-workspace h2 {
  margin-bottom: 0.35rem;
  font-size: clamp(1.4rem, 2vw, 1.8rem); }

.creator-workspace h3 {
  margin-bottom: 0.25rem;
  font-size: 1.05rem; }

.creator-workspace__header p,
.creator-workspace__section-heading p,
.creator-workspace__summary,
.creator-results-bar p {
  margin-bottom: 0;
  color: var(--text-muted);
  font-size: 0.875rem; }

.creator-workspace__summary {
  white-space: nowrap; }

.creator-workspace__section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ui-border); }

.creator-workspace__loading,
.creator-workspace__error,
.creator-workspace__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 10rem;
  color: var(--text-muted); }

.creator-workspace [hidden] {
  display: none !important; }

.creator-workspace__error {
  color: var(--priority-p0); }

.creator-workspace__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ui-border);
  border-top-color: var(--pref-accent-color);
  border-radius: 50%;
  animation: creator-spin 0.75s linear infinite; }

.creator-workspace__table-scroll {
  margin-top: 1rem; }

.creator-workspace .ocs__table {
  min-width: 920px; }

.creator-assignment-link {
  color: var(--pref-accent-color);
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: 0.18em; }

.creator-assignment-link:hover,
.creator-assignment-link:focus-visible {
  color: var(--pref-accent-color);
  text-decoration: underline; }

.creator-assignment-count {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pref-accent-color);
  font: inherit;
  font-weight: 700;
  cursor: pointer; }

.creator-assignment-count:focus-visible {
  outline: 2px solid var(--pref-accent-color);
  outline-offset: 2px; }

.creator-course-list {
  white-space: nowrap; }

.creator-muted,
.creator-student-uid {
  color: var(--text-muted); }

.creator-student-uid {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem; }

.creator-grade-input {
  min-width: 5rem; }

.creator-feedback-input {
  min-width: 11rem;
  min-height: 4.5rem;
  resize: vertical; }

.creator-grade-source,
.creator-grade-status {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.75rem; }

.creator-grade-actions {
  margin-top: 0.4rem; }

.creator-filters {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(13rem, 1.2fr) minmax(14rem, 1.4fr) minmax(10rem, 0.8fr) auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 1.25rem; }

.creator-filter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem; }

.creator-filter input,
.creator-filter select {
  width: 100%;
  min-height: 2.6rem; }

.creator-results-bar {
  min-height: 2.75rem;
  padding-top: 1rem; }

.creator-pagination {
  justify-content: flex-end;
  align-items: center;
  padding-top: 1rem; }

.creator-pagination span {
  color: var(--text-muted);
  font-size: 0.875rem; }

.ocs__admin-submissions {
  padding: 1.5rem;
  color: var(--pref-text-color); }

.ocs__admin-submissions-header,
.ocs__admin-assignment-header,
.ocs__admin-submissions-summary-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem; }

.ocs__admin-submissions-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-border); }

.ocs__admin-submissions .ocs__admin-submissions-eyebrow,
.ocs__admin-submissions-filter > span {
  color: var(--pref-accent-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.ocs__admin-submissions-header h2 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.4rem, 2vw, 1.8rem); }

.ocs__admin-submissions-header p,
.ocs__admin-assignment-header p,
.ocs__admin-submissions-summary,
.ocs__admin-submissions-summary-actions span {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem; }

.ocs__admin-submissions .ocs__admin-submissions-eyebrow {
  margin-bottom: 0.4rem !important; }

.ocs__admin-submissions-summary {
  white-space: nowrap; }

.ocs__admin-submissions-toolbar {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ui-border); }

.ocs__admin-submissions-filters {
  display: grid;
  grid-template-columns: minmax(14rem, 1.4fr) minmax(12rem, 1fr) repeat(2, minmax(10rem, 0.8fr));
  gap: 0.75rem;
  align-items: end; }

.ocs__admin-submissions-filter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem; }

.ocs__admin-submissions-filter input,
.ocs__admin-submissions-filter select {
  width: 100%;
  min-height: 2.6rem; }

.ocs__admin-submissions-summary-actions {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.9rem; }

.ocs__admin-assignment {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ui-border); }

.ocs__admin-assignment-header {
  align-items: center;
  margin-bottom: 0.9rem; }

.ocs__admin-assignment-header h3 {
  margin: 0 0 0.3rem;
  color: var(--pref-text-color);
  font-size: 1.1rem; }

.ocs__admin-assignment-header > span {
  color: var(--pref-accent-color);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap; }

.ocs__admin-assignment-table .ocs__table {
  min-width: 1050px; }

.ocs__admin-grade-input {
  min-width: 5rem; }

.ocs__admin-feedback-input {
  min-width: 11rem;
  min-height: 4.5rem;
  resize: vertical; }

.ocs__admin-submission-actions {
  align-items: flex-start;
  flex-direction: column; }

.ocs__admin-delete-submission {
  border-color: var(--priority-p0) !important;
  background: color-mix(in srgb, var(--priority-p0) 18%, transparent) !important;
  color: var(--priority-p0) !important; }

.ocs__admin-action-status {
  color: var(--text-muted);
  font-size: 0.75rem; }

.ocs__admin-submissions-empty {
  display: flex;
  min-height: 10rem;
  align-items: center;
  justify-content: center;
  color: var(--text-muted); }

.submissions-table {
  min-width: 960px; }

.cell-clamp {
  display: -webkit-box;
  max-width: 220px;
  overflow: hidden;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; }

.cell-clamp.expanded {
  display: block;
  max-width: 360px;
  overflow: visible;
  white-space: pre-wrap;
  -webkit-line-clamp: unset; }

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase; }

.status-pending {
  background: color-mix(in srgb, var(--priority-p1) 20%, transparent);
  color: var(--priority-p1); }

.status-graded {
  background: color-mix(in srgb, var(--priority-p3) 20%, transparent);
  color: var(--priority-p3); }

.status-late {
  background: color-mix(in srgb, var(--priority-p0) 20%, transparent);
  color: var(--priority-p0); }

.grade-display {
  color: var(--priority-p3);
  font-weight: 600; }

.no-submissions {
  margin-top: 1.25rem;
  padding: 2.5rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--panel);
  color: var(--text-muted);
  font-size: 1rem;
  text-align: center; }

.error-message {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--priority-p0) 20%, transparent);
  color: var(--priority-p0); }

.submission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; }

.edit-modal.hidden {
  display: none; }

.edit-modal {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  inset: 0; }

.edit-modal-backdrop {
  position: absolute;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--pref-bg-color) 72%, transparent);
  inset: 0; }

.edit-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--pref-text-color) 18%, transparent);
  color: var(--pref-text-color); }

.edit-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px; }

.edit-modal-kicker,
.edit-field-label {
  color: var(--pref-accent-color); }

.edit-modal-kicker {
  margin: 0 0 6px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase; }

.edit-modal-header h3,
.edit-modal-header h4 {
  margin: 0;
  color: var(--pref-text-color); }

.edit-modal-subtitle,
.edit-modal-note {
  color: var(--text-muted); }

.edit-modal-subtitle {
  margin: 6px 0 0;
  font-size: 0.95rem; }

.edit-modal-close {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pref-text-color);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer; }

.edit-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px; }

.edit-readonly-field,
.edit-section {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.edit-field-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.edit-field-value {
  color: var(--pref-text-color);
  font-size: 1rem;
  font-weight: 600; }

.edit-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: var(--pref-text-color);
  font-weight: 600; }

.edit-input,
.edit-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--pref-text-color);
  font-family: inherit;
  font-size: 0.95rem; }

.edit-input:focus,
.edit-textarea:focus {
  outline: 2px solid var(--pref-accent-color);
  outline-offset: 2px; }

.edit-textarea {
  min-height: 112px;
  resize: vertical; }

.edit-current-file {
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--panel-mid);
  color: var(--pref-text-color);
  font-size: 0.92rem; }

.edit-modal-status {
  min-height: 24px;
  margin-top: 12px;
  color: var(--priority-p2);
  font-size: 0.95rem; }

.edit-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px; }

.edit-modal-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.5; }

@keyframes creator-spin {
  to {
    transform: rotate(360deg); } }
@media (max-width: 1024px) {
  .creator-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ocs__admin-submissions-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .creator-workspace {
    padding: 1rem 0.25rem; }

  .creator-workspace__header,
  .creator-workspace__section-heading {
    align-items: flex-start;
    flex-direction: column; }

  .ocs__admin-submissions {
    padding: 1rem 0.25rem; }

  .ocs__admin-submissions-header,
  .ocs__admin-assignment-header {
    align-items: flex-start;
    flex-direction: column; }

  .ocs__admin-submissions-filters {
    grid-template-columns: 1fr; }

  .ocs__admin-submissions-summary-actions {
    align-items: flex-start;
    flex-direction: column; }

  .ocs__admin-submissions-summary-actions .ocs__btn, .ocs__admin-submissions-summary-actions .iridescent {
    width: 100%; }

  .edit-modal {
    padding: 12px; }

  .edit-modal-panel {
    padding: 18px;
    border-radius: 16px; }

  .edit-modal-grid {
    grid-template-columns: 1fr; }

  .edit-modal-actions {
    flex-direction: column-reverse; }

  .edit-modal-actions .ocs__btn, .edit-modal-actions .iridescent {
    width: 100%; }

  .creator-filters {
    grid-template-columns: 1fr; }

  .creator-filters__clear {
    width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .creator-workspace__spinner,
  .creator-filters__clear,
  .creator-pagination button {
    animation: none;
    transition: none; } }
@keyframes pswGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px #5C4A1E, 0 0 20px rgba(200, 160, 50, 0.2); }
  50% {
    box-shadow: 0 0 0 2px #8A7A3E, 0 0 30px rgba(200, 160, 50, 0.4); } }
@keyframes pswBlink {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0; } }
#pixel-submit-widget {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  background: #1a1208;
  border: 3px solid #5C4A1E;
  max-width: 520px;
  margin: 30px auto;
  overflow: hidden;
  animation: pswGlow 3s ease-in-out infinite;
  box-sizing: border-box; }
  #pixel-submit-widget * {
    font-family: inherit; }
  #pixel-submit-widget canvas {
    image-rendering: pixelated;
    display: block; }
  #pixel-submit-widget .psw-titlebar {
    background: linear-gradient(180deg, #3a2a0e, #2a1e08);
    border-bottom: 3px solid #5C4A1E;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px; }
    #pixel-submit-widget .psw-titlebar-icon {
      font-size: 14px; }
    #pixel-submit-widget .psw-titlebar-text {
      color: #FFD700;
      font-size: 8px;
      letter-spacing: 2px;
      flex: 1; }
  #pixel-submit-widget .psw-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid #2a1e08; }
  #pixel-submit-widget .psw-panel {
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; }
    #pixel-submit-widget .psw-panel-left {
      border-right: 2px solid #2a1e08; }
  #pixel-submit-widget .psw-step-label {
    color: #C8A830;
    font-size: 7px;
    letter-spacing: 1px; }
  #pixel-submit-widget .psw-btn {
    font-family: inherit;
    font-size: 9px;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 14px;
    height: 34px;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    clip-path: polygon(2px 0%, calc(100% - 2px) 0%, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0% calc(100% - 2px), 0% 2px);
    transition: transform 0.05s, box-shadow 0.05s;
    user-select: none; }
    #pixel-submit-widget .psw-btn:active {
      transform: translateY(3px); }
    #pixel-submit-widget .psw-btn:disabled {
      background: #2a2a2a !important;
      color: #666 !important;
      cursor: not-allowed;
      box-shadow: none !important; }
    #pixel-submit-widget .psw-btn-gold {
      background: #C8880A;
      box-shadow: 0 4px 0 #7a5006, inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 0 14px #C8880A88; }
      #pixel-submit-widget .psw-btn-gold:hover:not(:disabled) {
        background: #E89A18; }
      #pixel-submit-widget .psw-btn-gold.done {
        background: #555;
        box-shadow: none; }
    #pixel-submit-widget .psw-btn-blue {
      background: #1E4D8C;
      box-shadow: 0 4px 0 #0d2347, inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 0 14px #1E4D8C88; }
      #pixel-submit-widget .psw-btn-blue:hover:not(:disabled) {
        background: #2a5ea0; }
  #pixel-submit-widget .psw-url-row {
    padding: 12px 16px 8px;
    border-bottom: 2px solid #2a1e08;
    display: flex;
    gap: 8px;
    align-items: center; }
  #pixel-submit-widget .psw-url-arrow {
    color: #5C4A1E;
    font-size: 8px; }
  #pixel-submit-widget .psw-url-input {
    flex: 1;
    background: #0e0a04;
    border: 2px solid #3a2a0e;
    color: #C8A830;
    font-family: inherit;
    font-size: 7px;
    padding: 8px 10px;
    outline: none;
    caret-color: #FFD700;
    box-sizing: border-box; }
    #pixel-submit-widget .psw-url-input:focus {
      border-color: #C8880A; }
    #pixel-submit-widget .psw-url-input::placeholder {
      color: #3a2a0e; }
  #pixel-submit-widget .psw-dialog {
    min-height: 42px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px; }
  #pixel-submit-widget .psw-dialog-icon {
    color: #FFD700;
    font-size: 12px;
    flex-shrink: 0; }
  #pixel-submit-widget .psw-dialog-text {
    color: #C8A830;
    font-size: 7px;
    line-height: 1.9; }
  #pixel-submit-widget .psw-dialog-muted {
    color: #5C4A1E; }
  #pixel-submit-widget .psw-dialog-success {
    color: #00FF88; }
  #pixel-submit-widget .psw-cursor {
    animation: pswBlink 1s step-end infinite; }

@media (prefers-color-scheme: light) {
  #pixel-submit-widget {
    animation: none;
    box-shadow: 0 0 0 3px #5C4A1E, 0 4px 24px rgba(92, 74, 30, 0.3); } }
.grading-module-panel {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--surface);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem; }
  .grading-module-panel h2 {
    color: var(--text);
    margin-top: 0; }

.grading-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  color: var(--text); }
  .grading-table th,
  .grading-table td {
    border: 1px solid var(--surface);
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: var(--bg-2);
    color: var(--text); }
  .grading-table th {
    background: var(--bg-3);
    color: var(--text);
    font-weight: 600; }
  .grading-table tbody tr:hover td {
    background: var(--bg-3); }
  .grading-table td button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0.25rem 0.6rem;
    margin: 0 0.15rem;
    border-radius: 4px;
    border: 1px solid var(--surface);
    background: var(--bg-3);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8rem; }
    .grading-table td button:hover {
      background: var(--panel);
      border-color: var(--accent); }

#grade-create-form input,
#grade-edit-form input {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--surface);
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--text);
  box-sizing: border-box; }
  #grade-create-form input::placeholder,
  #grade-edit-form input::placeholder {
    color: var(--text-muted); }
  #grade-create-form input:focus,
  #grade-edit-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(76, 175, 239, 0.25); }

.btn-primary {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  border-radius: 4px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  margin-right: 0.5rem; }
  .btn-primary:hover {
    background: var(--accent-700-hover); }

.btn-secondary {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--surface);
  border-radius: 4px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font-size: 0.9rem; }
  .btn-secondary:hover {
    background: var(--panel);
    border-color: var(--accent); }

.grading-dropdown {
  position: relative;
  display: inline-block; }

.grading-dropdown-btn {
  background: var(--accent-700);
  color: var(--text);
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem; }
  .grading-dropdown-btn:hover {
    background: var(--accent-700-hover); }

.grading-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-2);
  border: 1px solid var(--surface);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  min-width: 160px;
  overflow: hidden; }
  .grading-dropdown-content.show {
    display: block; }

.grading-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem; }
  .grading-dropdown-item:hover {
    background: var(--bg-3);
    color: var(--accent); }

#grading-status {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  min-height: 1.2em;
  color: var(--text-muted); }
  #grading-status.success {
    color: var(--success-green); }
  #grading-status.error {
    color: var(--red); }
  #grading-status.warn {
    color: var(--warn); }

.grading-modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  align-items: center;
  justify-content: center; }
  .grading-modal-backdrop.show {
    display: flex; }

.grading-modal-box {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--surface);
  border-radius: 8px;
  padding: 2rem;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
  .grading-modal-box h3 {
    margin-top: 0;
    color: var(--text); }
  .grading-modal-box p {
    margin-bottom: 0.4rem;
    color: var(--text); }
  .grading-modal-box label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem; }
  .grading-modal-box input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
    border: 1px solid var(--surface);
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text); }
    .grading-modal-box input::placeholder {
      color: var(--text-muted); }
    .grading-modal-box input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(76, 175, 239, 0.25); }

.grading-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem; }

.grading-modal-error {
  color: var(--red);
  margin-bottom: 1rem;
  font-size: 0.875rem; }

.grading-submission-module {
  margin: 3rem auto 2rem auto;
  max-width: 520px;
  width: 100%; }

html,
body,
input,
textarea,
select {
  background-color: #121212; }

.gist-connection {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  background: var(--panel); }
  .gist-connection h2 {
    margin-top: 0; }
  .gist-connection label {
    display: block;
    margin-bottom: 0.5rem; }
  .gist-connection input {
    width: 100%;
    max-width: 36rem; }
  .gist-connection p {
    line-height: 1.5; }
  .gist-connection .gist-connection-instructions {
    margin-bottom: 1.25rem; }
    .gist-connection .gist-connection-instructions summary {
      cursor: pointer;
      font-weight: 600; }
    .gist-connection .gist-connection-instructions ol {
      padding-left: 1.5rem;
      line-height: 1.6; }
    .gist-connection .gist-connection-instructions li + li {
      margin-top: 0.5rem; }
  .gist-connection #gist-connection-state[data-connected="true"] {
    color: var(--status-indicator-success-color, #28a745);
    font-size: 1.2rem;
    font-weight: 700;
    overflow-wrap: anywhere; }
  .gist-connection .gist-connection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; }
  .gist-connection .gist-connection-note, .gist-connection #gist-connection-help {
    font-size: 0.9rem; }
  .gist-connection [hidden] {
    display: none !important; }

.gist-settings-link {
  display: block;
  margin-top: 0.5rem;
  color: var(--pref-accent-color);
  text-decoration: underline; }

.ocs__dashboard-page {
  width: 100%; }

.ocs__dashboard-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; }

.ocs__dashboard-tab-content {
  max-width: 64rem;
  margin: 0 auto; }

.ocs__dashboard-page-title {
  margin-bottom: 0.5rem; }

.ocs__dashboard-page-subtitle {
  margin-bottom: 1.5rem; }

.ocs__dashboard-card {
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--ui-border); }

.ocs__dashboard-card-spaced {
  margin-top: 1.5rem; }

.ocs__dashboard-card-spaced-sm {
  margin-top: 0.75rem; }

.ocs__dashboard-card-title {
  margin: 0;
  color: var(--pref-text-color);
  font-weight: 500; }

.ocs__dashboard-card-desc {
  margin-bottom: 1rem;
  font-size: 0.875rem; }

.ocs__dashboard-fineprint {
  font-size: 0.75rem; }

.ocs__dashboard-column {
  display: flex;
  flex-direction: column;
  gap: 1rem; }

.ocs__dashboard-block-label {
  margin-bottom: 0.5rem; }

.ocs__dashboard-full-width {
  width: 100%;
  margin-top: 0.25rem; }

.ocs__dashboard-color-input {
  width: 100%;
  height: 2rem;
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  border: 1px solid var(--ui-border);
  background: none;
  padding: 0; }

.ocs__dashboard-link {
  color: var(--pref-accent-color);
  text-decoration: underline; }
  .ocs__dashboard-link:hover {
    color: var(--pref-text-color); }

.ocs__dashboard-toggle-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer; }

.ocs__dashboard-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

.ocs__dashboard-toggle-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  transition: background-color 0.2s ease; }
  .ocs__dashboard-toggle-track.bg-neutral-600 {
    background: color-mix(in srgb, var(--pref-text-color) 24%, var(--panel)); }
  .ocs__dashboard-toggle-track.bg-cyan-500 {
    background: var(--pref-accent-color); }

.ocs__dashboard-toggle-dot {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.2s ease; }

.ocs__dashboard-toggle-text {
  margin-left: 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem; }

.ocs__dashboard-calibration-title {
  margin: 0 0 0.25rem;
  color: var(--pref-text-color);
  font-size: 0.875rem; }

.ocs__dashboard-calibration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem; }
  @media (min-width: 768px) {
    .ocs__dashboard-calibration-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ocs__dashboard-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; }

.ocs__dashboard-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem; }

.ocs__dashboard-theme-name-input {
  flex: 1; }

.ocs__dashboard-textarea {
  resize: vertical; }

.ocs__dashboard-ai-response {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: var(--panel-mid, var(--panel));
  border: 1px solid var(--ui-border);
  font-size: 0.875rem;
  white-space: pre-wrap;
  color: var(--pref-text-color); }

.ocs__dashboard-people-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem; }
  @media (min-width: 768px) {
    .ocs__dashboard-people-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .ocs__dashboard-people-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ocs__dashboard-span-full {
  grid-column: 1 / -1; }

.ocs__dashboard-modal-status {
  margin-top: 0.75rem; }

.ocs__analytics-page {
  width: 100%; }

.ocs__analytics-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; }

.ocs__analytics-page-title {
  margin-bottom: 1rem; }

.ocs__analytics-card-spaced {
  margin-top: 1.5rem; }

.ocs__analytics-card-spaced-sm {
  margin-top: 0.75rem; }

.ocs__analytics-card-desc {
  margin-bottom: 1rem; }

.ocs__analytics-fineprint {
  font-size: 0.75rem;
  color: var(--text-muted); }

.ocs__analytics-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase; }

.ocs__analytics-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.25rem; }

.ocs__analytics-stat-value {
  margin: 0;
  color: var(--pref-text-color);
  font-size: 1.5rem;
  font-weight: 500; }

.ocs__analytics-full-width {
  width: 100%; }

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

.ocs__analytics-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; }
  @media (min-width: 768px) {
    .ocs__analytics-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .ocs__analytics-stat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr)); } }

.ocs__analytics-avatar-card {
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (min-width: 1024px) {
    .ocs__analytics-avatar-card {
      grid-row: span 2; } }

.ocs__analytics-avatar {
  width: 8rem;
  height: 8rem;
  border-radius: 0.75rem;
  object-fit: cover; }

@media (min-width: 1024px) {
  .ocs__analytics-profile-card {
    grid-row: span 2; } }

.ocs__analytics-tile-card {
  display: flex;
  flex-direction: column; }

.ocs__analytics-commits-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; }
  @media (min-width: 1024px) {
    .ocs__analytics-commits-layout {
      flex-direction: row; } }

.ocs__analytics-period-sidebar {
  flex-shrink: 0; }
  @media (min-width: 1024px) {
    .ocs__analytics-period-sidebar {
      width: 13rem; } }

.ocs__analytics-period-options {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem; }
  @media (min-width: 1024px) {
    .ocs__analytics-period-options {
      flex-direction: column;
      overflow-x: visible; } }

.ocs__analytics-chart-col {
  flex: 1;
  min-width: 0; }

.ocs__analytics-commit-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; }
  @media (min-width: 768px) {
    .ocs__analytics-commit-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .ocs__analytics-commit-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ocs__analytics-flex-card {
  display: flex;
  flex-direction: column; }

.ocs__analytics-card-heading {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600; }

.ocs__analytics-heading-blue {
  color: var(--pref-accent-color); }

.ocs__analytics-heading-green {
  color: var(--green, #22c55e); }

.ocs__analytics-formula {
  margin: 0 0 0.5rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background: var(--panel-mid, var(--panel));
  color: var(--pref-text-color);
  font-family: 'Source Code Pro', monospace;
  font-size: 0.75rem;
  overflow-x: auto; }

.ocs__analytics-result-text {
  margin: 0;
  color: var(--pref-text-color);
  font-size: 1.25rem;
  font-weight: 600; }

.ocs__analytics-slider-form {
  margin-bottom: 1.5rem; }

.ocs__analytics-help-title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 700; }

.ocs__analytics-help-summary {
  cursor: pointer;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600; }

.ocs__analytics-help-callout {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--pref-accent-color) 40%, transparent);
  color: var(--pref-text-color); }

.ocs__analytics-help-subheading {
  margin: 2rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600; }

.ocs__analytics-help-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  list-style: disc;
  color: var(--pref-text-color); }

.ocs__analytics-empty-state {
  padding: 4rem 0;
  text-align: center;
  color: var(--text-muted); }

.ocs__analytics-empty-title {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  color: var(--pref-text-color); }

.ocs__analytics-modal-card {
  max-width: 48rem;
  max-height: 24rem;
  display: flex;
  flex-direction: column; }

.ocs__analytics-modal-body {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem; }

.ocs__analytics-modal-pre {
  margin: 0;
  color: var(--pref-text-color);
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word; }

.ocs__calendar-v2-page {
  display: flex;
  flex-direction: column;
  gap: 4px; }

.ocs__calendar-v2-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--panel); }

.ocs__calendar-v2-tab-btn {
  appearance: none;
  border: 1px solid transparent;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .ocs__calendar-v2-tab-btn:hover {
    color: var(--pref-text-color);
    background: var(--panel-mid); }
  .ocs__calendar-v2-tab-btn:focus-visible {
    outline: none;
    border-color: var(--pref-accent-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); }
  .ocs__calendar-v2-tab-btn.active {
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    background: var(--pref-accent-color); }

.ocs__calendar-v2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px; }

.ocs__calendar-v2-chip {
  border: 1px solid var(--ui-border);
  background: var(--panel);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .ocs__calendar-v2-chip:hover {
    color: var(--pref-text-color);
    border-color: var(--pref-accent-color); }
  .ocs__calendar-v2-chip.active {
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    background: var(--pref-accent-color); }

.ocs__calendar-v2-panel {
  margin-top: 8px; }

.ocs__calendar-v2-auth-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.12);
  color: var(--text); }

.ocs__calendar-v2-cs-pathway-title {
  margin-bottom: 6px; }

.ocs__calendar-v2-panel-header.ocs__card-header {
  flex-wrap: wrap;
  align-items: flex-start; }

.ocs__calendar-v2-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px; }

.ocs__calendar-v2-modal {
  z-index: 10000;
  display: none; }
  .ocs__calendar-v2-modal.open {
    display: flex; }

.ocs__calendar-v2-reply-modal {
  z-index: 10001;
  display: none; }
  .ocs__calendar-v2-reply-modal:not([aria-hidden="true"]) {
    display: flex; }

.ocs__calendar-v2-modal-content.ocs__card.ocs__modal-card {
  width: min(760px, 95vw);
  max-width: none;
  max-height: 90vh;
  overflow: auto;
  margin-bottom: 0; }

.ocs__calendar-v2-reply-modal .ocs__calendar-v2-modal-content.ocs__card.ocs__modal-card {
  width: min(600px, 95vw);
  max-height: 85vh; }

.ocs__calendar-v2-modal-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.18s ease; }
  .ocs__calendar-v2-modal-close:hover {
    color: var(--pref-accent-color); }

.hidden {
  display: none; }

.hidden {
  display: none; }

:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/* ============================= */
/*      COURSE / WEEK CHAT       */
/* ============================= */
/* Shared styling for the class announcement panel at the top of a sprint page
   and the per-week chat inside every week card. Uses the same tokens as the
   surrounding timeline cards ($bg-3 borders, $accent headings, $text-muted
   secondary text) so the chats read as part of the page, not bolted on. */
.announcement-chat,
.week-chat {
  color: #F0F0F0;
  font-family: var(--pref-font-family);
  /* Connection state, shown as a pill beside the title */
  /* Banner shown when the chat is running locally (signed out / backend down) */ }
  .announcement-chat .chat-status-pill,
  .week-chat .chat-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 999px;
    white-space: nowrap; }
  .announcement-chat .chat-status-dot,
  .week-chat .chat-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #aaa;
    flex-shrink: 0; }
  .announcement-chat .chat-status,
  .week-chat .chat-status {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #aaa;
    white-space: nowrap; }
  .announcement-chat .chat-status-pill.is-live,
  .week-chat .chat-status-pill.is-live {
    border-color: rgba(74, 222, 128, 0.4); }
    .announcement-chat .chat-status-pill.is-live .chat-status-dot,
    .week-chat .chat-status-pill.is-live .chat-status-dot {
      background: #4ADE80; }
    .announcement-chat .chat-status-pill.is-live .chat-status,
    .week-chat .chat-status-pill.is-live .chat-status {
      color: #4ADE80; }
  .announcement-chat .chat-status-pill.is-preview,
  .week-chat .chat-status-pill.is-preview {
    border-color: rgba(251, 191, 36, 0.4); }
    .announcement-chat .chat-status-pill.is-preview .chat-status-dot,
    .week-chat .chat-status-pill.is-preview .chat-status-dot {
      background: #FBBF24; }
    .announcement-chat .chat-status-pill.is-preview .chat-status,
    .week-chat .chat-status-pill.is-preview .chat-status {
      color: #FBBF24; }
  .announcement-chat .chat-status-pill.is-error,
  .week-chat .chat-status-pill.is-error {
    border-color: rgba(229, 62, 62, 0.4); }
    .announcement-chat .chat-status-pill.is-error .chat-status-dot,
    .week-chat .chat-status-pill.is-error .chat-status-dot {
      background: #E53E3E; }
    .announcement-chat .chat-status-pill.is-error .chat-status,
    .week-chat .chat-status-pill.is-error .chat-status {
      color: #E53E3E; }
  .announcement-chat .chat-preview-note,
  .week-chat .chat-preview-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    border-radius: 6px;
    color: #FBBF24;
    font-size: 12px;
    line-height: 1.45; }
    .announcement-chat .chat-preview-note i,
    .week-chat .chat-preview-note i {
      flex-shrink: 0;
      margin-top: 2px; }
    .announcement-chat .chat-preview-note[hidden],
    .week-chat .chat-preview-note[hidden] {
      display: none; }
  .announcement-chat .chat-messages,
  .week-chat .chat-messages {
    overflow-y: auto;
    padding: 10px;
    margin: 0 0 12px 0;
    border: 1px solid #2A2D2D;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    scrollbar-width: thin;
    scrollbar-color: #2A2D2D transparent; }
    .announcement-chat .chat-messages::-webkit-scrollbar,
    .week-chat .chat-messages::-webkit-scrollbar {
      width: 8px; }
    .announcement-chat .chat-messages::-webkit-scrollbar-thumb,
    .week-chat .chat-messages::-webkit-scrollbar-thumb {
      background: #2A2D2D;
      border-radius: 4px; }
  .announcement-chat .chat-system,
  .week-chat .chat-system {
    margin: 8px 0;
    color: #aaa;
    font-size: 12px;
    font-style: italic;
    text-align: center; }
  .announcement-chat .chat-msg-sender,
  .week-chat .chat-msg-sender {
    color: #4CAFEF;
    font-weight: 600;
    font-size: 12px; }
  .announcement-chat .chat-msg-time,
  .week-chat .chat-msg-time {
    color: #aaa;
    font-size: 11px; }
  .announcement-chat .chat-msg-body,
  .week-chat .chat-msg-body {
    display: block;
    color: #F0F0F0;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word; }
  .announcement-chat .chat-form,
  .week-chat .chat-form {
    display: flex;
    align-items: center;
    gap: 8px; }
  .announcement-chat .chat-input,
  .week-chat .chat-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid #2A2D2D;
    border-radius: 6px;
    background: var(--pref-bg-color);
    color: #F0F0F0;
    font-family: var(--pref-font-family);
    font-size: 13px;
    transition: border-color 0.2s; }
    .announcement-chat .chat-input::placeholder,
    .week-chat .chat-input::placeholder {
      color: #aaa; }
    .announcement-chat .chat-input:focus,
    .week-chat .chat-input:focus {
      outline: none;
      border-color: #4CAFEF; }
    .announcement-chat .chat-input:disabled,
    .week-chat .chat-input:disabled {
      opacity: 0.55;
      cursor: not-allowed; }
  .announcement-chat .chat-send,
  .week-chat .chat-send {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    border-color: #4CAFEF;
    color: #4CAFEF; }
    .announcement-chat .chat-send:hover,
    .week-chat .chat-send:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .announcement-chat .chat-send:focus,
    .week-chat .chat-send:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .announcement-chat .chat-send:hover,
    .week-chat .chat-send:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .announcement-chat .chat-send,
      .week-chat .chat-send {
        height: 44px; } }
    .announcement-chat .chat-send:disabled,
    .week-chat .chat-send:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none; }

/* ── Class announcement panel (top of the sprint page) ────────────────
   Laid out as a proper panel: a titled header strip, a day-separated and
   sender-grouped message log that grows with its content, then a composer
   fenced off by its own rule. */
.announcement-chat {
  margin: 24px 0;
  border: 1px solid #2A2D2D;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
  /* Day separator between messages posted on different days */
  /* One message row: avatar in the gutter, sender/time/body stacked beside it */
  /* Empty state — centered, so an empty log doesn't read as a broken box */ }
  .announcement-chat:hover {
    border-color: var(--border-hover-color, #2A2D2D); }
  .announcement-chat .chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #2A2D2D;
    background: rgba(240, 240, 240, 0.02); }
  .announcement-chat .chat-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0; }
  .announcement-chat .chat-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(76, 175, 239, 0.35);
    background: rgba(76, 175, 239, 0.1);
    color: #4CAFEF;
    font-size: 15px; }
  .announcement-chat .chat-title {
    margin: 0;
    padding: 0;
    /* The global h2 rule adds a rule-line; the header already has one. */
    border-bottom: none;
    color: var(--pref-accent-color);
    font-size: 1.05rem;
    line-height: 1.3; }
  .announcement-chat .chat-subtitle {
    margin: 2px 0 0 0;
    color: #aaa;
    font-size: 12px;
    line-height: 1.45; }
  .announcement-chat .chat-body {
    padding: 14px 16px; }
  .announcement-chat .chat-messages {
    min-height: 8em;
    max-height: 24em;
    padding: 12px;
    margin-bottom: 0; }
  .announcement-chat .chat-day {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 10px;
    color: #aaa;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase; }
    .announcement-chat .chat-day:first-child {
      margin-top: 0; }
    .announcement-chat .chat-day::before, .announcement-chat .chat-day::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #2A2D2D; }
  .announcement-chat .chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
    /* Runs of messages from the same person collapse into one block */ }
    .announcement-chat .chat-msg.is-continued {
      margin-top: -4px; }
      .announcement-chat .chat-msg.is-continued .chat-avatar {
        visibility: hidden; }
      .announcement-chat .chat-msg.is-continued .chat-msg-meta {
        display: none; }
  .announcement-chat .chat-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #000;
    background: #aaa;
    user-select: none;
    /* Deterministic per-sender tint, drawn from the site palette so the log
       stays scannable without introducing off-theme colors. $accent is
       reserved for the reader's own avatar, so it is not in this set. */ }
    .announcement-chat .chat-avatar.tint-1 {
      background: #38B2AC; }
    .announcement-chat .chat-avatar.tint-2 {
      background: #4ADE80; }
    .announcement-chat .chat-avatar.tint-3 {
      background: #ED8936; }
    .announcement-chat .chat-avatar.tint-4 {
      background: #3182CE; }
    .announcement-chat .chat-avatar.tint-5 {
      background: #6366f1; }
  .announcement-chat .chat-msg-main {
    min-width: 0;
    flex: 1; }
  .announcement-chat .chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 1px; }
  .announcement-chat .chat-msg.is-self .chat-msg-sender {
    color: #F0F0F0; }
  .announcement-chat .chat-msg.is-self .chat-avatar {
    background: #4CAFEF; }
  .announcement-chat .chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 7em;
    padding: 12px;
    text-align: center; }
    .announcement-chat .chat-empty i {
      color: #aaa;
      font-size: 20px;
      opacity: 0.6;
      margin-bottom: 2px; }
    .announcement-chat .chat-empty .chat-empty-title {
      margin: 0;
      color: #F0F0F0;
      font-size: 13px;
      font-weight: 600; }
    .announcement-chat .chat-empty .chat-empty-hint {
      color: #aaa;
      font-size: 12px; }
  .announcement-chat .chat-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #2A2D2D; }

/* ── Per-week chat (inside each week card) ────────────────────────── */
.week-chat {
  margin-top: 16px;
  border: 1px solid #2A2D2D;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
  /* Compact bubbles — this widget is small and lives inside a week card */ }
  .week-chat[open] {
    border-color: rgba(76, 175, 239, 0.4); }
  .week-chat .chat-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    color: #F0F0F0;
    font-size: 13px;
    transition: background 0.2s; }
    .week-chat .chat-summary::-webkit-details-marker {
      display: none; }
    .week-chat .chat-summary:hover {
      background: rgba(240, 240, 240, 0.05); }
    .week-chat .chat-summary:focus-visible {
      outline: 2px solid #4CAFEF;
      outline-offset: -2px; }
  .week-chat .chat-summary-icon {
    color: #4CAFEF;
    font-size: 13px; }
  .week-chat .chat-summary-title {
    font-weight: 600;
    color: #F0F0F0; }
  .week-chat .chat-status-pill {
    margin-left: 4px; }
  .week-chat .chat-summary-caret {
    margin-left: auto;
    color: #aaa;
    font-size: 11px;
    transition: transform 0.2s; }
  .week-chat[open] .chat-summary-caret {
    transform: rotate(180deg); }
  .week-chat .chat-body {
    padding: 12px;
    border-top: 1px solid #2A2D2D; }
  .week-chat .chat-messages {
    height: 14em; }
  .week-chat .chat-empty {
    margin: 0;
    padding: 4px 0;
    color: #aaa;
    font-size: 13px;
    font-style: italic; }
  .week-chat .chat-msg {
    margin: 0 0 8px 0;
    padding: 8px 10px;
    border: 1px solid #2A2D2D;
    border-radius: 8px;
    background: rgba(240, 240, 240, 0.03);
    line-height: 1.45;
    word-break: break-word; }
    .week-chat .chat-msg:last-child {
      margin-bottom: 0; }
    .week-chat .chat-msg.is-self {
      border-color: rgba(76, 175, 239, 0.35);
      background: rgba(76, 175, 239, 0.08); }
  .week-chat .chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px; }

@media (max-width: 768px) {
  .announcement-chat .chat-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px; }
  .announcement-chat .chat-body {
    padding: 12px; }
  .announcement-chat .chat-messages {
    max-height: 18em; }
  .announcement-chat .chat-avatar {
    width: 24px;
    height: 24px;
    font-size: 10px; }

  .week-chat .chat-messages {
    height: 12em; }
  .week-chat .chat-send span {
    display: none; }

  .announcement-chat .chat-send span,
  .week-chat .chat-send span {
    display: none; } }
/* ============================= */
/*     RICH-TEXT COMPOSER        */
/* ============================= */
/* Slack-style formatting bar + contenteditable input, built by
   assets/js/chat/rich-text.js and dropped into every chat form in place of
   the old single-line <input>. Rendered-message formatting (bold, lists,
   font/size spans) is styled at the bottom so it applies wherever a message
   is shown, including the lesson chat, which is outside .announcement-chat. */
.chat-form.chat-form--rich {
  align-items: stretch; }
  .chat-form.chat-form--rich .chat-send {
    align-self: stretch;
    height: auto; }

.rt-composer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #2A2D2D;
  border-radius: 6px;
  background: var(--pref-bg-color);
  transition: border-color 0.2s; }
  .rt-composer:focus-within {
    border-color: #4CAFEF; }

.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid #2A2D2D; }

.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #F0F0F0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s; }
  .rt-btn:hover {
    background: rgba(240, 240, 240, 0.08); }
  .rt-btn:focus-visible {
    outline: none;
    border-color: #4CAFEF; }
  .rt-btn.is-active {
    background: rgba(76, 175, 239, 0.18);
    color: #4CAFEF; }
  .rt-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed; }

.rt-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
  background: #2A2D2D; }

.rt-select {
  height: 28px;
  padding: 0 4px;
  border: 1px solid #2A2D2D;
  border-radius: 4px;
  background: var(--pref-bg-color);
  color: #F0F0F0;
  font-family: var(--pref-font-family);
  font-size: 12px;
  cursor: pointer; }
  .rt-select:focus-visible {
    outline: none;
    border-color: #4CAFEF; }
  .rt-select:disabled {
    opacity: 0.4;
    cursor: not-allowed; }

.rt-editor {
  min-height: 38px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 12px;
  color: #F0F0F0;
  font-family: var(--pref-font-family);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: #2A2D2D transparent; }
  .rt-editor:focus {
    outline: none; }
  .rt-editor.is-empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none; }
  .rt-editor.is-over-limit {
    box-shadow: inset 0 0 0 1px #E53E3E; }
  .rt-editor.is-disabled {
    opacity: 0.55;
    cursor: not-allowed; }
  .rt-editor p {
    margin: 0; }
  .rt-editor ul, .rt-editor ol {
    margin: 4px 0;
    padding-left: 1.6em; }

.rt-emoji-panel {
  position: fixed;
  z-index: 1000;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 300px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  border: 1px solid #2A2D2D;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  scrollbar-width: thin;
  scrollbar-color: #2A2D2D transparent; }

.rt-emoji {
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  cursor: pointer; }
  .rt-emoji:hover {
    background: rgba(240, 240, 240, 0.12); }

/* the eraser icon in the Clear-formatting button */
.rt-btn svg {
  display: block; }

@media (max-width: 768px) {
  .rt-toolbar {
    gap: 1px; }

  .rt-btn {
    min-width: 32px;
    height: 32px; }

  .rt-select {
    height: 32px; } }
/* ── Formatting inside a rendered message ─────────────────────────────
   These classes ride on <span>s the composer emits; keep them global so a
   message reads the same in the announcement panel, a week card, and the
   lesson chat. */
.rt-font-serif {
  font-family: Georgia, 'Times New Roman', serif; }

.rt-font-mono {
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }

.rt-size-sm {
  font-size: 0.82em; }

.rt-size-lg {
  font-size: 1.3em; }

.rt-size-xl {
  font-size: 1.7em; }

.chat-msg-body ul, .chat-msg-body ol {
  margin: 4px 0;
  padding-left: 1.5em; }
.chat-msg-body li {
  margin: 1px 0; }

/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
.dm-chat .dm-layout {
  display: flex;
  gap: 0;
  min-height: 22em; }
  @media (max-width: 768px) {
    .dm-chat .dm-layout {
      flex-direction: column; } }
.dm-chat .dm-sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 12px;
  border-right: 1px solid #2A2D2D;
  display: flex;
  flex-direction: column;
  gap: 8px; }
  @media (max-width: 768px) {
    .dm-chat .dm-sidebar {
      width: auto;
      border-right: none;
      border-bottom: 1px solid #2A2D2D; } }
.dm-chat .dm-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column; }
.dm-chat .dm-conversation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto; }
.dm-chat .dm-conversation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  color: #aaa;
  font-size: 12px;
  cursor: pointer; }
  .dm-chat .dm-conversation:hover {
    background: rgba(240, 240, 240, 0.05); }
  .dm-chat .dm-conversation.is-active {
    background: rgba(76, 175, 239, 0.12);
    color: #F0F0F0; }
  .dm-chat .dm-conversation.has-unread {
    color: #F0F0F0;
    font-weight: 600; }
.dm-chat .dm-conversation-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
.dm-chat .dm-conversation-unread {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #dc1e1e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center; }
.dm-chat .dm-empty {
  padding: 8px;
  color: #aaa;
  font-size: 12px; }
.dm-chat .dm-picker {
  border: 1px solid #2A2D2D;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px; }
  .dm-chat .dm-picker.hidden {
    display: none; }
.dm-chat .dm-picker-results {
  max-height: 10em;
  overflow-y: auto; }
.dm-chat .dm-picker-result {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer; }
  .dm-chat .dm-picker-result:hover {
    background: rgba(240, 240, 240, 0.05); }
  .dm-chat .dm-picker-result.is-selected {
    background: rgba(76, 175, 239, 0.15);
    color: #4CAFEF; }
.dm-chat .dm-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; }
.dm-chat .dm-picker-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(76, 175, 239, 0.15);
  color: #4CAFEF;
  font-size: 10px;
  cursor: pointer; }

.nod-panel {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 80;
  width: 15rem; }

.nod-panel video {
  display: block;
  width: 100%;
  height: 5.5rem;
  object-fit: cover;
  transform: scaleX(-1);
  border-radius: 0.5rem;
  background: var(--panel-mid); }

.nod-panel progress {
  width: 100%;
  accent-color: var(--pref-accent-color); }

.nod-target {
  outline: 5px solid var(--pref-accent-color) !important;
  outline-offset: 4px; }

@media (max-width: 760px) {
  .nod-panel {
    left: 0.5rem;
    right: 0.5rem;
    width: auto; }

  .nod-panel video {
    display: none; } }
.ocs__grid--standard[data-card] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem; }
  .ocs__grid--standard[data-card] .ocs__grid-cell {
    padding: 0.5rem 0.25rem; }

:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

.lesson-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 1rem; }
  @media (max-width: 768px) {
    .lesson-container {
      flex-direction: column; } }

/* Sidebar */
.lesson-sidebar {
  flex: 0 0 250px;
  max-width: 100%;
  background: #1F2020;
  padding: 1rem;
  border-radius: 8px;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto; }
  @media (max-width: 768px) {
    .lesson-sidebar {
      position: relative;
      top: auto;
      max-height: none;
      overflow: visible;
      width: 100%; } }

/* Main content */
.lesson-content {
  flex: 1 1 0;
  min-width: 300px; }

.time-display {
  background: #2A2D2D;
  padding: 0.5rem;
  margin: 0.25rem 0;
  border-radius: 4px;
  text-align: center; }
  .time-display span {
    font-size: 1.2rem;
    font-weight: bold;
    color: #4CAFEF;
    display: block; }
  .time-display small {
    font-size: 0.75rem;
    color: #aaa; }

.timer-status {
  text-align: center;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-top: 0.5rem; }
  .timer-status.active {
    background: #2D5A3D;
    color: #4ADE80; }
  .timer-status.paused {
    background: #5A3D2D;
    color: #FBBF24; }

.progress-bar {
  background: #333;
  border-radius: 6px;
  height: 12px;
  width: 100%;
  margin: 0.5rem 0; }
  .progress-bar .progress-fill {
    background: #4CAFEF;
    height: 100%;
    width: 0%;
    border-radius: 6px; }

.btn {
  display: inline-block;
  color: white;
  padding: 15px 25px;
  border-radius: 4px;
  text-decoration: none;
  margin: 0.5rem 0.25rem;
  border: none;
  cursor: pointer;
  font-family: arial;
  font-weight: bolder;
  background: #007ACC; }
  .btn:hover {
    background: #005FA3;
    border-radius: 25px;
    transition: border-radius 2s; }

.small-btn {
  font-size: 0.75rem;
  padding: 3px 6px;
  margin-top: 0.5rem; }

.sandbox textarea {
  width: 100%;
  height: 120px;
  font-family: monospace;
  margin-bottom: 0.5rem; }

.resources,
.sandbox,
.lesson-quiz {
  background: #2B2B2B;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  color: #F0F0F0; }

#badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; }

.badge {
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

.congrats-popup {
  position: fixed;
  top: 20px;
  right: -300px;
  background: #222;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease, opacity 0.3s ease;
  opacity: 0.95;
  z-index: 9999; }
  .congrats-popup.show {
    right: 20px; }

.lesson-quiz textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #444;
  font-size: 1rem;
  resize: vertical;
  box-sizing: border-box;
  background: #1F1F1F;
  color: #F0F0F0; }
.lesson-quiz button:hover {
  background: #1aa3ff; }
.lesson-quiz #reflection-status {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #9ACDFF; }

.blackboard {
  width: 100%;
  min-height: 240px; }

#blackboard-canvas {
  border: 1px solid #ccc;
  background: #000;
  cursor: crosshair; }

.blackboard-description {
  margin-top: 10px;
  color: #ccc; }

.demo-label {
  display: block;
  text-align: center;
  margin: 6px 0; }

#demo-canvas-wrapper {
  background: white;
  border: 2px solid #333;
  display: block;
  margin: 0 auto; }

#demo-code {
  display: none;
  margin: 8px auto;
  overflow: auto; }

.info-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #3182CE; }

.challenge-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #38B2AC; }

.think-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #ED8936; }

.checkpoint-box,
.key-points {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #3182CE; }

.warning-box {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #E53E3E; }

.success {
  padding: 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  border-left: 4px solid #28A745; }

.flashcards-section {
  background: #2B2B2B !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  margin: 1rem 0 2rem 0 !important;
  color: #F0F0F0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important; }

.flashcard-container {
  position: relative !important;
  width: 100% !important;
  max-width: 280px !important;
  height: 140px !important;
  perspective: 1500px !important;
  margin: 1rem auto 1.5rem auto !important;
  display: block !important; }
  .flashcard-container.hidden {
    display: none !important; }

.flashcard-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.6s ease !important;
  transform-style: preserve-3d !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important; }
  .flashcard-inner.flipped {
    transform: rotateY(180deg) !important; }

.flashcard-front,
.flashcard-back {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 8px !important;
  background: #1E293B !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important; }

.flashcard-back {
  transform: rotateY(180deg) !important; }

.card-counter {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 15px !important;
  padding: 4px 10px !important;
  font-size: 0.8rem !important; }

.flashcard-front h3,
.flashcard-back h4 {
  text-align: center !important;
  margin-bottom: 1rem !important;
  color: white !important; }

.flashcard-back p {
  text-align: center !important;
  margin-bottom: 1rem !important;
  color: white !important; }

.flashcard-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 1rem 0 1.5rem 0 !important;
  gap: 0.4rem !important;
  max-width: 100% !important; }
  .flashcard-controls button {
    flex: 0 1 auto !important;
    min-width: 60px !important;
    max-width: 100px !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
    white-space: nowrap !important; }

.flashcard-actions {
  display: flex !important;
  gap: 0.5rem !important;
  flex: 1 !important; }
  .flashcard-actions .know-btn, .flashcard-actions .review-btn {
    flex: 1 !important;
    min-width: 60px !important;
    font-size: 0.75rem !important;
    padding: 6px 10px !important; }
  .flashcard-actions .know-btn {
    background: #10B981 !important;
    color: white !important; }
  .flashcard-actions .review-btn {
    background: #F59E0B !important;
    color: white !important; }

.card-status {
  margin-top: 12px !important;
  font-size: 0.85rem !important;
  color: #CBD5E1 !important;
  text-align: center !important; }

#flashcard-review-sidebar button {
  width: 100%;
  background: #334155;
  border: none;
  color: white;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 5px;
  font-size: 0.85rem; }
  #flashcard-review-sidebar button:hover {
    background: #475569; }

.flashcard-front h3,
.flashcard-back h4 {
  text-align: center !important;
  margin-bottom: 0.5rem !important;
  color: white !important;
  font-size: 1rem !important; }

.flashcard-back p {
  text-align: center !important;
  margin-bottom: 0.5rem !important;
  color: white !important;
  font-size: 0.9rem !important; }

.flashcard-front .btn,
.flashcard-back .btn {
  padding: 6px 12px !important;
  font-size: 0.8rem !important; }

.flashcard-deck {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important; }

.footer-links {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%; }

.footer-previous {
  justify-self: start;
  margin-left: 10vw; }

.footer-home {
  justify-self: center; }

.footer-next {
  justify-self: end;
  margin-right: 10vw; }

[class$="-infograph"],
[class$="-infograph"] * {
  box-sizing: border-box; }

[class$="-infograph"] {
  max-width: 1800px;
  width: min(100%, 1800px);
  margin: 0 auto;
  padding: 3rem 3rem;
  font-family: var(--pref-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  color: var(--pref-text-color, #ffffff);
  background-color: var(--pref-bg-color, #000000); }

/* Capstone-only page layout overrides to avoid global site styling conflicts */
.capstone-page {
  width: 100% !important;
  max-width: none !important; }

.capstone-page > .wrapper {
  width: 100% !important;
  max-width: none !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  margin: 0 auto !important; }

.capstone-page .opencs_root {
  width: 100% !important;
  max-width: none !important; }

[class$="-infograph"] [class$="-header"] {
  text-align: center;
  padding: 3rem 2rem;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 6%, var(--pref-bg-color, #000000));
  border-radius: 24px;
  margin-bottom: 2rem;
  border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.12)); }

[class$="-infograph"] [class$="-badge"] {
  display: inline-block;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 12%, var(--pref-bg-color, #000000));
  color: var(--pref-text-color, #ffffff);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem; }

[class$="-infograph"] [class$="-title"] {
  font-size: 2.75rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  letter-spacing: -0.02em; }

[class$="-infograph"] [class$="-description"],
[class$="-infograph"] [class$="-subtitle"] {
  color: var(--text-muted, rgba(255, 255, 255, 0.75));
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto; }

[class$="-infograph"] [class$="-card"] {
  background: var(--ui-bg, rgba(255, 255, 255, 0.05));
  border-radius: 24px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--pref-text-color, #ffffff) 20%, transparent); }

[class$="-infograph"] [class$="-card-grid"] {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(320px, 1.3fr) minmax(320px, 1.7fr);
  gap: 2rem;
  align-items: stretch;
  min-width: 0; }

[class$="-infograph"] [class$="-visual"],
[class$="-infograph"] [class$="-content"],
[class$="-infograph"] [class$="-details"] {
  min-width: 0; }

[class$="-infograph"] [class$="-title"],
[class$="-infograph"] [class$="-project-title"],
[class$="-infograph"] [class$="-description"],
[class$="-infograph"] [class$="-subtitle"],
[class$="-infograph"] [class$="-about"],
[class$="-infograph"] [class$="-section-title"],
[class$="-infograph"] [class$="-impact-item"] {
  word-break: break-word;
  overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  [class$="-infograph"] [class$="-card-grid"] {
    grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  [class$="-infograph"] [class$="-card-grid"] {
    grid-template-columns: 1fr; } }
[class$="-infograph"] [class$="-visual"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 6%, var(--pref-bg-color, #000000));
  border-radius: 16px;
  border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.12)); }

[class$="-infograph"] [class$="-image-link"] {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--pref-text-color, #ffffff) 20%, transparent);
  width: 100%; }

[class$="-infograph"] [class$="-image"] {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease; }

[class$="-infograph"] [class$="-image-link"]:hover [class$="-image"] {
  transform: scale(1.05); }

[class$="-infograph"] [class$="-overlay"] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--pref-bg-color, #000000) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease; }

[class$="-infograph"] [class$="-image-link"]:hover [class$="-overlay"] {
  opacity: 1; }

[class$="-infograph"] [class$="-overlay"] span {
  color: var(--pref-text-color, #ffffff);
  font-weight: 700;
  font-size: 1.1rem; }

[class$="-infograph"] [class$="-status"] {
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 12%, var(--pref-bg-color, #000000));
  color: var(--pref-text-color, #ffffff);
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center; }

[class$="-infograph"] [class$="-team"] {
  text-align: center;
  margin-top: auto; }

[class$="-infograph"] [class$="-team-label"] {
  display: block;
  color: var(--text-muted, rgba(255, 255, 255, 0.75));
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.25rem; }

[class$="-infograph"] [class$="-team-name"] {
  display: block;
  color: var(--pref-text-color, #ffffff);
  font-weight: 700;
  font-size: 1rem; }

[class$="-infograph"] [class$="-content"] {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 6%, var(--pref-bg-color, #000000));
  border-radius: 16px;
  border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.12)); }

[class$="-infograph"] [class$="-project-title"] {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--pref-text-color, #ffffff);
  margin: 0 0 0.25rem 0; }

[class$="-infograph"] [class$="-keypoints"] {
  margin-top: 1rem; }

[class$="-infograph"] [class$="-keypoint"] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem; }

[class$="-infograph"] [class$="-check"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 12%, var(--pref-bg-color, #000000));
  border-radius: 8px;
  font-weight: 700; }

[class$="-infograph"] [class$="-tech-stack"] {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; }

[class$="-infograph"] [class$="-tech-tag"] {
  padding: 0.45rem 0.9rem;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 12%, var(--pref-bg-color, #000000));
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em; }

[class$="-infograph"] [class$="-details"] {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 6%, var(--pref-bg-color, #000000));
  border-radius: 16px;
  border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.12)); }

[class$="-infograph"] [class$="-section-title"] {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0; }

[class$="-infograph"] [class$="-about"] {
  margin-bottom: 1.25rem;
  line-height: 1.6;
  color: var(--text-muted, rgba(255, 255, 255, 0.75)); }

[class$="-infograph"] [class$="-impact-list"] {
  display: grid;
  gap: 0.75rem; }

[class$="-infograph"] [class$="-impact-item"] {
  padding: 0.8rem 1rem;
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 6%, var(--pref-bg-color, #000000));
  border-radius: 12px;
  border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.12));
  color: var(--text-muted, rgba(255, 255, 255, 0.75)); }

[class$="-infograph"] [class$="-videos"] {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.25rem; }

[class$="-infograph"] [class$="-video-item"] {
  background: color-mix(in srgb, var(--pref-text-color, #ffffff) 6%, var(--pref-bg-color, #000000));
  border-radius: 12px;
  border: 1px solid var(--ui-border, rgba(255, 255, 255, 0.12));
  padding: 1rem;
  overflow: hidden; }

[class$="-infograph"] [class$="-video-title"] {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  color: var(--pref-text-color, #ffffff); }

[class$="-infograph"] [class$="-video-player"] {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: color-mix(in srgb, var(--pref-bg-color, #000000) 50%, transparent);
  display: block; }

[class$="-infograph"] [class$="-btn"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.2rem;
  margin-top: 1.5rem;
  background: color-mix(in srgb, var(--pref-accent-color, #3b82f6) 12%, var(--pref-bg-color, #000000));
  border: 1px solid var(--pref-accent-color, #3b82f6);
  border-radius: 999px;
  color: var(--pref-text-color, #ffffff);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, transform 0.2s ease; }

[class$="-infograph"] [class$="-btn"]:hover {
  background: color-mix(in srgb, var(--pref-accent-color, #3b82f6) 18%, var(--pref-bg-color, #000000));
  border-color: var(--pref-accent-color, #3b82f6);
  transform: translateY(-1px); }

.ocs__capstone-nav {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-border); }

.ocs__card {
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  color: var(--pref-text-color); }

.ocs__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem; }

.ocs__card-header > .ocs__section-title {
  margin: 0; }

.ocs__capstone-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem; }

.ocs__section-title {
  margin: 0 0 1rem;
  color: var(--pref-text-color);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

.ocs__card > h2.ocs__section-title,
.ocs__card > h3.ocs__section-title,
.ocs__container > h2.ocs__section-title {
  font-size: 0.875rem; }

.ocs__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--pref-accent-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  color: var(--pref-accent-color);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.ocs__description {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7; }

.ocs__text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65; }

.ocs__lead {
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 70ch; }

.ocs__callout {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel));
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6; }

.ocs__callout a {
  color: var(--pref-accent-color); }

.ocs__status {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--pref-accent-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  color: var(--pref-accent-color);
  font-size: 0.72rem;
  font-weight: 600; }

.ocs__team {
  display: flex;
  flex-direction: column;
  gap: 0.1rem; }

.ocs__team-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; }

.ocs__team-name {
  color: var(--pref-text-color);
  font-size: 0.85rem;
  font-weight: 600; }

.ocs__split,
.ocs__facts {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: stretch; }

.ocs__split {
  grid-template-columns: 1fr 1fr; }

.ocs__split--aside {
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); }

.ocs__facts {
  grid-template-columns: repeat(3, 1fr); }

.ocs__split .ocs__visual,
.ocs__facts .ocs__visual {
  width: 100%;
  height: 100%; }

.ocs__visual {
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel));
  color: var(--pref-text-color); }

.ocs__keypoints {
  display: grid;
  gap: 0.75rem; }

.ocs__keypoint {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--text-muted);
  line-height: 1.5; }

.ocs__check {
  flex-shrink: 0;
  color: var(--pref-accent-color);
  font-weight: 700; }

.ocs__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin: 1.25rem 0 0; }

.ocs__stat {
  padding: 1rem 0.75rem;
  text-align: center;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel)); }

.ocs__stat-value {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em; }

.ocs__stat-label {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.ocs__diagram {
  margin: 1rem 0 1.25rem;
  padding: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel)); }

.ocs__diagram .mermaid {
  display: flex;
  justify-content: center;
  margin: 0; }

.ocs__entity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none; }

.ocs__entity-list li {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel));
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5; }

.ocs__card-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(320px, 1.3fr) minmax(320px, 1.7fr);
  gap: 2rem;
  align-items: stretch;
  min-width: 0; }

.ocs__card-grid > * {
  min-width: 0; }

.ocs__nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ui-border); }

.ocs__nav-grid--in-card {
  margin: 1rem 0 0;
  padding-bottom: 0;
  border-bottom: none; }

.ocs__nav-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--pref-text-color);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }

.ocs__nav-card:visited {
  color: var(--pref-text-color); }

.ocs__nav-card:hover,
.ocs__nav-card.is-active {
  border-color: var(--pref-accent-color);
  background: color-mix(in srgb, var(--pref-accent-color) 10%, var(--panel)); }

.ocs__nav-card:hover {
  transform: translateY(-1px); }

.ocs__nav-card:hover {
  transform: translateY(-1px); }

.ocs__nav-card-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

html.user-theme-active .ocs__nav-card-kicker {
  color: var(--text-muted) !important; }

.ocs__nav-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25; }

html.user-theme-active .ocs__nav-card-title {
  color: var(--pref-accent-color) !important; }

.ocs__nav-card .ocs__status {
  font-size: 0.65rem; }

.ocs__nav-card .ocs__text {
  flex-basis: 100%;
  font-size: 0.82rem;
  line-height: 1.45; }

.ocs__nav-card-cta {
  margin-left: auto;
  color: var(--pref-accent-color);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase; }

.ocs-intelligence-infograph .ocs-intelligence-question {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0; }

.ocs-intelligence-infograph .ocs__team .ocs__text {
  margin: 0.35rem 0 0;
  text-align: center; }

.ocs-intelligence-infograph .ocs__diagram-stack {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem; }

.ocs-intelligence-infograph .ocs__diagram-block .ocs__diagram {
  margin-bottom: 0; }

.ocs-intelligence-infograph .ocs__diagram-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em; }

@media (min-width: 900px) {
  .ocs-intelligence-infograph .ocs__diagram-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; } }
.ocs-intelligence-infograph .ocs__diagram .mermaid,
.ocs-intelligence-infograph .ocs__diagram .mermaid * {
  box-sizing: content-box; }

.ocs-intelligence-infograph .ocs-intelligence-figure {
  margin: 0; }

.ocs-intelligence-infograph .ocs-intelligence-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35); }

.ocs-intelligence-infograph .ocs-intelligence-figure figcaption {
  margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.45; }

.ocs-intelligence-infograph .ocs-intelligence-figure a {
  text-decoration: underline;
  text-underline-offset: 2px; }

.ocs-intelligence-infograph .ocs__table-wrap {
  margin-top: 1rem; }

.ocs-intelligence-infograph .ocs__table td:first-child {
  font-weight: 600;
  min-width: 12rem; }

.ocs-intelligence-infograph .ocs__table td:nth-child(2) {
  white-space: nowrap;
  width: 8rem; }

.ocs-intelligence-infograph .ocs-intelligence-gpu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  width: 100%;
  margin: 0.75rem 0 0.5rem; }

.ocs-intelligence-infograph .ocs-intelligence-gpu {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em; }

.ocs-intelligence-infograph .ocs__card-grid + .ocs__stats {
  margin-top: 1.75rem; }

.ocs-intelligence-infograph .ocs__card-grid + .ocs__stats + .ocs__section-title {
  margin-top: 1.75rem; }

@media (max-width: 520px) {
  .ocs-intelligence-infograph .ocs-intelligence-gpu-grid {
    grid-template-columns: repeat(2, 1fr); } }
.ocs-intelligence-infograph .ocs-intelligence-gift-kicker,
.ocs-intelligence-infograph .ocs-intelligence-cost-line {
  letter-spacing: 0.04em; }

.ocs-intelligence-infograph .ocs-intelligence-gift-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62); }

.ocs-intelligence-infograph .ocs-intelligence-cost-line {
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff; }

.ocs-intelligence-infograph .ocs-intelligence-gift .ocs__stats {
  margin-top: 1.75rem; }

.ocs-intelligence-infograph .ocs-intelligence-stage-status {
  display: inline-block;
  margin-top: 1rem; }

.ocs-intelligence-infograph .ocs-intelligence-stack-link {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }

.ocs-intelligence-infograph .ocs-intelligence-stack-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22); }

.ocs__entity-list strong {
  color: var(--pref-text-color); }

.ocs__hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem; }

.ocs__hub-card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }

.ocs__hub-card:hover {
  border-color: var(--pref-accent-color);
  background: color-mix(in srgb, var(--pref-accent-color) 8%, var(--panel));
  transform: translateY(-2px); }

button.ocs__hub-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--ui-border);
  background: var(--panel);
  font: inherit;
  text-align: left;
  cursor: pointer; }

.ocs__hub-card.ocs__hub-card--selected {
  border-color: var(--pref-accent-color);
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel)); }

.ocs__hub-card-title {
  display: block;
  margin: 0.25rem 0 0.5rem;
  color: var(--pref-text-color);
  font-size: 1.2rem;
  font-weight: 800; }

.ocs__hub-card > .ocs__hub-card-title {
  font-size: 1.2rem; }

.ocs__hub-card p {
  margin: 0;
  color: var(--text-muted); }

.ocs__phase-crumb {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none; }

.ocs__phase-crumb:hover {
  color: var(--pref-accent-color);
  text-decoration: underline; }

.ocs__pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem; }

.ocs__pager-link {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: var(--panel);
  color: var(--text-muted);
  text-decoration: none; }

.ocs__pager-link:hover {
  border-color: var(--pref-accent-color);
  color: var(--pref-text-color); }

.ocs__pager-link.next {
  text-align: right; }

@media (max-width: 900px) {
  .ocs__facts {
    grid-template-columns: 1fr; }

  .ocs__card-grid {
    grid-template-columns: 1fr 1fr; }

  .ocs__nav-grid {
    grid-template-columns: 1fr; }

  .ocs__hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .ocs__card-grid,
  .ocs__split {
    grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .ocs__stats {
    grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .ocs__hub-grid,
  .ocs__pager {
    grid-template-columns: 1fr; } }
.ocs__checklist {
  list-style: none;
  padding: 0;
  margin: 0; }

.ocs__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ui-border);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5; }

.ocs__checklist li:last-child {
  border-bottom: none; }

.ocs__checklist-box {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border: 1.5px solid var(--ui-border);
  border-radius: 0.3rem; }

.ocs__checklist li.open .ocs__checklist-box {
  border-color: var(--pref-accent-color); }

.ocs__checklist li.done .ocs__checklist-box {
  border-color: var(--pref-accent-color);
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel)); }

.ocs__status-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--ui-border);
  border-radius: 9999px;
  color: var(--pref-text-color);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap; }

.ocs__status-pill--good {
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__status-pill--warn,
.ocs__status-pill--bad {
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__status-pill--neutral {
  background: var(--ui-bg);
  color: var(--text-muted); }

.games-directory__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem; }

.games-directory__search-input {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.4rem;
  background: var(--ui-bg);
  color: var(--pref-text-color);
  font-size: 0.9rem; }

.games-directory__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem; }

.js-games-topic-filter {
  cursor: pointer;
  background: none; }

.games-directory__topic--active {
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.games-directory__empty {
  color: var(--text-muted); }

.ocs__container {
  --jv-bg: var(--pref-bg-color);
  --jv-card: var(--pref-bg-color);
  --jv-card-border: var(--ui-border);
  --jv-text: var(--pref-text-color);
  --jv-text-muted: var(--text-muted);
  --jv-accent: var(--pref-accent-color);
  --jv-accent-soft: color-mix(in srgb, var(--pref-accent-color) 15%, transparent);
  --jv-success: #22c55e;
  --jv-success-soft: color-mix(in srgb, #22c55e 12%, transparent);
  --jv-tag: var(--ui-bg);
  --jv-purple: #a855f7;
  --jv-purple-soft: color-mix(in srgb, #a855f7 12%, transparent);
  --jv-amber: #f59e0b;
  --jv-amber-soft: color-mix(in srgb, #f59e0b 12%, transparent);
  --jv-red: #ef4444;
  --jv-red-soft: color-mix(in srgb, #ef4444 12%, transparent);
  --jv-surface: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  --jv-surface-strong: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
  --jv-overlay: color-mix(in srgb, var(--pref-bg-color) 50%, transparent);
  --jv-shadow: color-mix(in srgb, var(--pref-text-color) 20%, transparent);
  --jv-font-family: var(--pref-font-family); }

/* ── Header ── */
.jv-kanban {
  width: min(1400px, calc(100vw - 3rem));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%); }
  .jv-kanban .ocs__kanban-board {
    min-width: 0; }
  .jv-kanban .jv-kanban-more > summary {
    cursor: pointer;
    list-style: none; }
    .jv-kanban .jv-kanban-more > summary::-webkit-details-marker {
      display: none; }
    .jv-kanban .jv-kanban-more > summary:focus-visible {
      outline: 2px solid var(--pref-accent-color);
      outline-offset: 2px; }
  .jv-kanban .jv-kanban-collapse,
  .jv-kanban .jv-kanban-more[open] .jv-kanban-expand {
    display: none; }
  .jv-kanban .jv-kanban-more[open] .jv-kanban-collapse {
    display: inline; }
  .jv-kanban .jv-kanban-extra {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem; }
  @media (max-width: 600px) {
    .jv-kanban {
      width: 100%;
      margin-left: 0;
      transform: none; } }

.jv-header {
  text-align: center;
  margin-bottom: 2.75rem; }

.jv-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 2rem 0 2.75rem; }

.jv-flow-node-icon {
  font-size: 1.4rem; }

.jv-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 110px;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--jv-card-border);
  border-radius: 0.75rem;
  background: var(--jv-card);
  position: relative;
  text-align: center; }

.jv-flow-node-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--jv-text);
  line-height: 1.3; }

.jv-flow-node-sub {
  font-size: 0.62rem;
  color: var(--jv-text-muted);
  font-family: 'JetBrains Mono', monospace; }

.jv-flow-arrow {
  font-size: 1rem;
  color: var(--jv-accent);
  padding: 0 0.2rem;
  flex-shrink: 0; }

.jv-flow-node.active {
  border-color: var(--jv-accent);
  background: var(--jv-accent-soft); }

.jv-flow-node.active .jv-flow-node-label {
  color: var(--jv-accent); }

/* ── Research Question ── */
.jv-question {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--jv-text);
  border-left: 3px solid var(--jv-accent);
  padding: 0.25rem 0 0.25rem 1.1rem;
  margin: 0 0 1.25rem; }

.jv-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8em;
  background: var(--jv-tag);
  border: 1px solid var(--jv-card-border);
  border-radius: 0.3rem;
  padding: 0.05rem 0.35rem; }

/* ── Flow node photo (real hardware images inside a jv-flow node) ── */
.jv-flow-node-photo {
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
  background: var(--jv-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.jv-flow-node-photo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0.3rem; }

.jv-flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem; }

.jv-flow-row + .jv-flow-row {
  margin-top: 0.5rem; }

.jv-flow-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--jv-text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin: 0.35rem 0; }

@media (max-width: 640px) {
  .jv-flow-row {
    gap: 0.2rem; }

  .jv-flow-node {
    min-width: 78px;
    padding: 0.55rem 0.7rem; }

  .jv-flow-node-label {
    font-size: 0.62rem; } }
/* ── Decision Cards (icon + short why, replaces long tables) ── */
.jv-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem; }

.jv-decision-card {
  background: var(--jv-tag);
  border: 1px solid var(--jv-card-border);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem; }

.jv-decision-icon {
  font-size: 1.3rem;
  display: block;
  margin-bottom: 0.4rem; }

.jv-decision-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--jv-text);
  margin-bottom: 0.25rem;
  line-height: 1.35; }

.jv-decision-why {
  font-size: 0.78rem;
  color: var(--jv-text-muted);
  line-height: 1.4;
  margin: 0; }

.jv-decision-card .ocs__status-pill {
  margin-bottom: 0.35rem; }

/* ── Terminal-style monitor output ── */
.jv-log {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--jv-text);
  background: var(--jv-surface);
  border: 1px solid var(--jv-card-border);
  border-left: 3px solid var(--jv-accent);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  margin: 1rem 0 0;
  overflow-x: auto;
  white-space: pre; }

/* ── Screenshot figures (testing evidence) ── */
.jv-figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem; }

.jv-figure {
  margin: 0;
  background: var(--jv-tag);
  border: 1px solid var(--jv-card-border);
  border-radius: 0.75rem;
  padding: 0.6rem; }

.jv-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem; }

.jv-figure figcaption {
  font-size: 0.75rem;
  color: var(--jv-text-muted);
  margin-top: 0.5rem;
  line-height: 1.4; }

/* ── Paper / Patent / Source Cards ── */
.jv-paper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; }

.jv-paper-card {
  background: var(--jv-tag);
  border: 1px solid var(--jv-card-border);
  border-radius: 0.75rem;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; }

.jv-paper-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--jv-accent);
  text-decoration: none;
  line-height: 1.35; }

.jv-paper-title:hover {
  text-decoration: underline; }

.jv-paper-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--jv-text-muted);
  background: var(--jv-card);
  border: 1px solid var(--jv-card-border);
  border-radius: 0.3rem;
  padding: 0.1rem 0.4rem;
  display: inline-block;
  width: fit-content; }

.jv-paper-bullets {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem; }

.jv-paper-bullets li {
  font-size: 0.78rem;
  color: var(--jv-text-muted);
  line-height: 1.45; }

.jv-paper-bullets li::marker {
  color: var(--jv-accent); }

/* ── Segmented Timeline Bar (replaces mermaid gantt) ── */
.jv-timeline-bar {
  display: flex;
  width: 100%;
  height: 44px;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--jv-card-border); }

.jv-timeline-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jv-bg);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.4rem;
  text-align: center; }

.jv-timeline-dates {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--jv-text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 0.4rem; }

.jv-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  line-height: 1.4; }

.jv-timeline-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--jv-text-muted); }

.jv-timeline-legend-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  flex-shrink: 0; }

/* ── Occupancy Bar Chart (replaces mermaid xychart-beta) ── */
.jv-occupancy-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 140px;
  padding: 0 0.25rem; }

.jv-occupancy-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.35rem; }

.jv-occupancy-bar-value {
  font-size: 0.62rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--jv-text-muted); }

.jv-occupancy-bar-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 0.25rem 0.25rem 0 0;
  background: var(--jv-accent); }

.jv-occupancy-bar-label {
  font-size: 0.62rem;
  color: var(--jv-text-muted);
  white-space: nowrap; }

/* ── Bill of Materials (image cards) ── */
.jv-bom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 1rem; }

.jv-bom-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--jv-tag);
  border: 1px solid var(--jv-card-border);
  border-radius: 0.75rem;
  padding: 0.9rem; }

.jv-bom-thumb {
  height: 110px;
  background: var(--jv-surface);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.jv-bom-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 0.6rem; }

.jv-bom-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--jv-text);
  line-height: 1.3; }

.jv-bom-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem; }

.jv-bom-cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--jv-text-muted); }

.jv-bom-note {
  font-size: 0.78rem;
  color: var(--jv-text-muted);
  line-height: 1.45;
  margin: 0; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .jv-title {
    font-size: 1.6rem; } }
.rfid-presence-infograph {
  --rp-bg: var(--pref-bg-color);
  --rp-card-border: var(--ui-border);
  --rp-text: var(--pref-text-color);
  --rp-text-muted: var(--text-muted);
  --rp-accent: var(--pref-accent-color);
  --rp-accent-soft: color-mix(in srgb, var(--pref-accent-color) 15%, transparent);
  --rp-surface: color-mix(in srgb, var(--rp-text) 6%, var(--rp-bg));
  --rp-surface-strong: color-mix(in srgb, var(--rp-text) 12%, var(--rp-bg));
  --rp-border-strong: color-mix(in srgb, var(--rp-text) 18%, transparent);
  --rp-success: var(--rp-accent);
  --rp-warning: color-mix(in srgb, #d99a00 80%, var(--rp-text));
  --rp-danger: color-mix(in srgb, #e5484d 85%, var(--rp-text)); }
  .rfid-presence-infograph .rfid-presence-question {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0; }
  .rfid-presence-infograph .rfid-presence-table-wrap {
    overflow-x: auto;
    margin-top: 1rem; }
  .rfid-presence-infograph .rfid-presence-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem; }
    .rfid-presence-infograph .rfid-presence-table th,
    .rfid-presence-infograph .rfid-presence-table td {
      text-align: left;
      padding: 0.9rem 1rem;
      border-bottom: 1px solid var(--rp-card-border);
      vertical-align: top; }
    .rfid-presence-infograph .rfid-presence-table th {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--rp-text-muted); }
    .rfid-presence-infograph .rfid-presence-table td {
      color: var(--rp-text-muted);
      line-height: 1.5; }
    .rfid-presence-infograph .rfid-presence-table tr:last-child td {
      border-bottom: none; }
    .rfid-presence-infograph .rfid-presence-table a {
      text-decoration: none; }
      .rfid-presence-infograph .rfid-presence-table a:hover {
        text-decoration: underline;
        text-underline-offset: 2px; }
  .rfid-presence-infograph .rfid-presence-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    border: 1px solid var(--rp-border-strong);
    background: var(--rp-surface-strong);
    color: var(--rp-text); }
  .rfid-presence-infograph .rfid-presence-pill-good {
    border-color: var(--rp-success);
    background: var(--rp-success);
    color: var(--rp-bg); }
  .rfid-presence-infograph .rfid-presence-pill-warn {
    border-color: var(--rp-warning);
    background: color-mix(in srgb, var(--rp-warning) 15%, transparent);
    color: var(--rp-warning); }
  .rfid-presence-infograph .rfid-presence-pill-bad {
    border-color: var(--rp-danger);
    background: color-mix(in srgb, var(--rp-danger) 15%, transparent);
    color: var(--rp-danger); }
  .rfid-presence-infograph .rfid-presence-pill-neutral {
    border-color: var(--rp-border-strong);
    background: var(--rp-surface);
    color: var(--rp-text-muted); }
  .rfid-presence-infograph .rfid-presence-stage-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rp-card-border); }
    .rfid-presence-infograph .rfid-presence-stage-nav > a {
      flex: 1 1 auto;
      text-align: center;
      white-space: nowrap; }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
@keyframes rpnSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.rpn-popcorn {
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden; }
  .rpn-popcorn__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .rpn-popcorn__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
    .rpn-popcorn__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
  .rpn-popcorn__body {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-top: none;
    padding: 25px;
    border-radius: 0 0 12px 12px; }
  .rpn-popcorn__options {
    display: flex;
    flex-direction: column;
    gap: 10px; }
  .rpn-popcorn__option {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }
    .rpn-popcorn__option:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .rpn-popcorn__option:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .rpn-popcorn__option--correct {
      border-color: #4ADE80 !important;
      background: rgba(74, 222, 128, 0.1) !important; }
    .rpn-popcorn__option--incorrect {
      border-color: #E53E3E !important;
      background: rgba(229, 62, 62, 0.1) !important; }
    .rpn-popcorn__option--disabled {
      pointer-events: none;
      opacity: 0.6; }
  .rpn-popcorn__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px; }
    @media (max-width: 600px) {
      .rpn-popcorn__grid {
        grid-template-columns: 1fr; } }
  .rpn-popcorn__grid-card {
    background: var(--panel-mid);
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s; }
    .rpn-popcorn__grid-card code {
      color: var(--pref-text-color);
      font-size: 13px; }
    .rpn-popcorn__grid-card:hover {
      transform: translateY(-2px);
      border-color: #4ADE80;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
    .rpn-popcorn__grid-card--correct {
      border-color: #4ADE80 !important;
      background: rgba(74, 222, 128, 0.1) !important; }
    .rpn-popcorn__grid-card--incorrect {
      border-color: #E53E3E !important;
      background: rgba(229, 62, 62, 0.1) !important; }
  .rpn-popcorn__feedback {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pref-text-color); }
    .rpn-popcorn__feedback--correct {
      display: block;
      background: rgba(74, 222, 128, 0.1);
      border-left: 4px solid #4ADE80; }
    .rpn-popcorn__feedback--incorrect {
      display: block;
      background: rgba(229, 62, 62, 0.1);
      border-left: 4px solid #E53E3E; }

.rpn-reveal {
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden; }
  .rpn-reveal__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .rpn-reveal__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
    .rpn-reveal__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
  .rpn-reveal__body {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-top: none;
    padding: 25px;
    border-radius: 0 0 12px 12px; }
  .rpn-reveal__code-block {
    min-height: auto;
    max-height: none;
    overflow-y: auto;
    padding: 16px;
    background: var(--panel);
    color: var(--pref-text-color);
    white-space: pre-wrap;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    margin-bottom: 20px; }
    .rpn-reveal__code-block::-webkit-scrollbar {
      width: 8px; }
    .rpn-reveal__code-block::-webkit-scrollbar-track {
      background: var(--pref-bg-color); }
    .rpn-reveal__code-block::-webkit-scrollbar-thumb {
      background: var(--ui-border);
      border-radius: 4px; }
      .rpn-reveal__code-block::-webkit-scrollbar-thumb:hover {
        background: var(--panel-mid); }
    .rpn-reveal__code-block pre {
      margin: 0;
      color: var(--pref-text-color);
      font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
      font-size: 14px;
      line-height: 1.6;
      overflow-x: auto; }
  .rpn-reveal__toggle-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 0 auto 20px;
    background: var(--pref-accent-color);
    color: var(--pref-bg-color);
    border-color: var(--pref-accent-color);
    font-weight: 600;
    font-size: 15px; }
    .rpn-reveal__toggle-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .rpn-reveal__toggle-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .rpn-reveal__toggle-btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .rpn-reveal__toggle-btn {
        height: 44px; } }
    .rpn-reveal__toggle-btn:hover {
      opacity: 0.85;
      transform: scale(1.05); }
  .rpn-reveal__answer {
    display: none;
    background: var(--pref-bg-color);
    border-left: 4px solid var(--pref-accent-color);
    border-radius: 8px;
    padding: 20px;
    animation: rpnSlideDown 0.3s ease; }
    .rpn-reveal__answer h4 {
      color: var(--pref-accent-color);
      margin: 0 0 15px;
      font-size: 16px;
      font-weight: 600; }
  .rpn-reveal__step {
    margin-bottom: 15px;
    padding: 12px;
    background: var(--panel-mid);
    border-radius: 6px; }
    .rpn-reveal__step .step-label {
      color: var(--pref-accent-color);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 6px; }
    .rpn-reveal__step .step-detail {
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.6; }
      .rpn-reveal__step .step-detail code {
        background: var(--pref-bg-color);
        padding: 2px 6px;
        border-radius: 3px;
        color: var(--pref-text-color); }
  .rpn-reveal__key-point {
    padding: 15px;
    margin-bottom: 0;
    border-radius: 8px;
    background: var(--panel);
    border: 0 solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    border-left: 4px solid #38B2AC;
    margin-top: 15px;
    box-shadow: none; }
    .rpn-reveal__key-point h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .rpn-reveal__key-point p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
    .rpn-reveal__key-point .key-title {
      color: #38B2AC;
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 10px; }
    .rpn-reveal__key-point .key-detail {
      color: var(--text-muted);
      line-height: 1.8; }

.rpn-dragdrop {
  max-width: 750px;
  margin: 20px auto 2rem;
  background: var(--pref-accent-color);
  padding: 3px;
  border-radius: 15px; }
  .rpn-dragdrop__inner {
    background: var(--pref-bg-color);
    border-radius: 13px;
    padding: 25px; }
  .rpn-dragdrop__title {
    color: var(--pref-text-color);
    text-align: center;
    margin-bottom: 5px;
    font-size: 1.4em; }
  .rpn-dragdrop__subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 14px; }
  .rpn-dragdrop__area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px; }
    @media (max-width: 600px) {
      .rpn-dragdrop__area {
        grid-template-columns: 1fr; } }
  .rpn-dragdrop__column {
    background: var(--panel-mid);
    border-radius: 10px;
    padding: 15px;
    border: 2px solid var(--ui-border); }
    .rpn-dragdrop__column h4 {
      color: var(--pref-accent-color);
      margin: 0 0 12px;
      font-size: 15px; }
  .rpn-dragdrop__items {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .rpn-dragdrop__item {
    background: var(--pref-bg-color);
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid var(--pref-accent-color);
    cursor: grab;
    transition: all 0.3s ease;
    user-select: none;
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 15px;
    text-align: center; }
    .rpn-dragdrop__item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
    .rpn-dragdrop__item.dragging {
      opacity: 0.4;
      cursor: grabbing; }
  .rpn-dragdrop__slot {
    margin-bottom: 10px; }
    .rpn-dragdrop__slot .slot-label {
      font-weight: bold;
      color: var(--text-muted);
      margin-bottom: 4px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px; }
  .rpn-dragdrop__dropzone {
    background: var(--pref-bg-color);
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px dashed var(--ui-border);
    min-height: 42px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 15px; }
    .rpn-dragdrop__dropzone .placeholder {
      color: var(--text-muted);
      font-style: italic;
      font-size: 13px; }
    .rpn-dragdrop__dropzone.drag-over {
      background: rgba(0, 0, 0, 0.15);
      border-color: var(--pref-accent-color);
      border-style: solid; }
    .rpn-dragdrop__dropzone.filled {
      border-style: solid;
      border-color: var(--pref-accent-color); }
  .rpn-dragdrop__controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap; }
  .rpn-dragdrop__btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-weight: 600; }
    .rpn-dragdrop__btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .rpn-dragdrop__btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .rpn-dragdrop__btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .rpn-dragdrop__btn {
        height: 44px; } }
    .rpn-dragdrop__btn--check {
      background: #4ADE80;
      border-color: #4ADE80;
      color: var(--pref-bg-color); }
      .rpn-dragdrop__btn--check:hover {
        opacity: 0.85; }
    .rpn-dragdrop__btn--reset {
      background: #ED8936;
      border-color: #ED8936;
      color: var(--pref-bg-color); }
      .rpn-dragdrop__btn--reset:hover {
        opacity: 0.85; }
    .rpn-dragdrop__btn--clear {
      background: #E53E3E;
      border-color: #E53E3E;
      color: var(--pref-bg-color); }
      .rpn-dragdrop__btn--clear:hover {
        opacity: 0.85; }
  .rpn-dragdrop__feedback {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pref-text-color); }
    .rpn-dragdrop__feedback--correct {
      display: block;
      background: rgba(74, 222, 128, 0.1);
      border-left: 4px solid #4ADE80; }
    .rpn-dragdrop__feedback--incorrect {
      display: block;
      background: rgba(229, 62, 62, 0.1);
      border-left: 4px solid #E53E3E; }

.rpn-quiz {
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ui-border); }
  .rpn-quiz__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .rpn-quiz__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
    .rpn-quiz__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
  .rpn-quiz__body {
    padding: 25px; }
  .rpn-quiz__question {
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-shadow: none; }
    .rpn-quiz__question h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .rpn-quiz__question p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
    .rpn-quiz__question .q-number {
      color: var(--pref-accent-color);
      font-weight: 700;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px; }
    .rpn-quiz__question .q-text {
      color: var(--pref-text-color);
      font-size: 15px;
      line-height: 1.5;
      margin-bottom: 15px; }
  .rpn-quiz__choices {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .rpn-quiz__choice {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }
    .rpn-quiz__choice:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .rpn-quiz__choice:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .rpn-quiz__choice--correct {
      border-color: #4ADE80 !important;
      background: rgba(74, 222, 128, 0.1) !important; }
    .rpn-quiz__choice--incorrect {
      border-color: #E53E3E !important;
      background: rgba(229, 62, 62, 0.1) !important; }
    .rpn-quiz__choice--disabled {
      pointer-events: none;
      opacity: 0.6; }
  .rpn-quiz__explanation {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pref-text-color); }
    .rpn-quiz__explanation--correct {
      display: block;
      background: rgba(74, 222, 128, 0.1);
      border-left: 4px solid #4ADE80; }
    .rpn-quiz__explanation--incorrect {
      display: block;
      background: rgba(229, 62, 62, 0.1);
      border-left: 4px solid #E53E3E; }
  .rpn-quiz__score {
    text-align: center;
    padding: 20px;
    background: var(--panel-mid);
    border-radius: 10px;
    margin-top: 10px; }
    .rpn-quiz__score .score-label {
      color: var(--text-muted);
      font-size: 14px;
      margin-bottom: 5px; }
    .rpn-quiz__score .score-value {
      color: var(--pref-text-color);
      font-size: 32px;
      font-weight: 700; }
    .rpn-quiz__score .score-bar {
      margin-top: 10px;
      height: 8px;
      background: var(--ui-border);
      border-radius: 4px;
      overflow: hidden; }
      .rpn-quiz__score .score-bar .score-fill {
        height: 100%;
        background: var(--pref-accent-color);
        border-radius: 4px;
        transition: width 0.5s ease; }

.rpn-stack-viz {
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden; }
  .rpn-stack-viz__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .rpn-stack-viz__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
    .rpn-stack-viz__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
  .rpn-stack-viz__body {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-top: none;
    padding: 25px;
    border-radius: 0 0 12px 12px; }
  .rpn-stack-viz__controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap; }
  .rpn-stack-viz__step-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color);
    font-weight: 600; }
    .rpn-stack-viz__step-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .rpn-stack-viz__step-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .rpn-stack-viz__step-btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .rpn-stack-viz__step-btn {
        height: 44px; } }
    .rpn-stack-viz__step-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none; }
    .rpn-stack-viz__step-btn--reset {
      background: var(--panel-mid);
      border-color: var(--ui-border);
      color: var(--pref-text-color); }
  .rpn-stack-viz__display {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap; }
  .rpn-stack-viz__token-stream {
    flex: 1;
    min-width: 200px; }
    .rpn-stack-viz__token-stream h5 {
      color: var(--text-muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 8px; }
  .rpn-stack-viz__token {
    display: inline-block;
    padding: 6px 12px;
    margin: 3px;
    border-radius: 4px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px;
    background: var(--panel-mid);
    color: var(--pref-text-color);
    border: 1px solid var(--ui-border);
    transition: all 0.3s; }
    .rpn-stack-viz__token--active {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      color: var(--pref-bg-color);
      transform: scale(1.1); }
    .rpn-stack-viz__token--processed {
      opacity: 0.3; }
  .rpn-stack-viz__stack-container {
    min-width: 120px; }
    .rpn-stack-viz__stack-container h5 {
      color: var(--text-muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 8px;
      text-align: center; }
  .rpn-stack-viz__stack {
    border: 2px solid var(--pref-accent-color);
    border-radius: 0 0 8px 8px;
    border-top: none;
    min-height: 120px;
    display: flex;
    flex-direction: column-reverse;
    padding: 5px;
    gap: 4px; }
  .rpn-stack-viz__stack-item {
    background: var(--pref-accent-color);
    color: var(--pref-bg-color);
    padding: 6px 12px;
    border-radius: 4px;
    text-align: center;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px;
    animation: rpnSlideDown 0.3s ease; }
  .rpn-stack-viz__narration {
    margin-top: 15px;
    padding: 12px;
    background: var(--panel-mid);
    border-radius: 8px;
    border-left: 3px solid var(--pref-accent-color);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    min-height: 40px; }
    .rpn-stack-viz__narration strong {
      color: var(--pref-accent-color); }

/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
/**
 * Panel Mixins
 * Reusable panel patterns for consistent content containers
 */
/**
 * Base Panel
 * Standard panel with border and background
 *
 * @param {Number} $padding - Inner padding (default: 1.5rem)
 * @param {Number} $border-width - Border width (default: 2px)
 * @param {Number} $margin-bottom - Bottom margin (default: 1rem)
 *
 * @example
 *   .my-panel {
 *     @include panel;
 *   }
 *
 *   .compact-panel {
 *     @include panel(1rem, 1px, 0.5rem);
 *   }
 */
/**
 * Output Panel
 * Panel optimized for code/content display with scrolling
 *
 * @param {Number} $min-height - Minimum height (default: 100px)
 * @param {Number} $max-height - Maximum height (default: 300px)
 *
 * @example
 *   .output-content {
 *     @include output-panel;
 *   }
 *
 *   .tall-content {
 *     @include output-panel(200px, 500px);
 *   }
 */
/**
 * Input Panel
 * Panel for code editors with syntax highlighting (CodeMirror)
 *
 * @example
 *   .CodeMirror {
 *     @include input-panel;
 *   }
 */
/**
 * Control Panel
 * Horizontal bar for controls, buttons, and selects
 *
 * @param {String} $padding - Inner padding (default: 0.75rem 1rem)
 * @param {String} $gap - Gap between items (default: 1rem)
 * @param {String} $border-radius - Border radius (default: 10px 10px 0 0)
 *
 * @example
 *   .control-bar {
 *     @include control-panel;
 *   }
 *
 *   .toolbar {
 *     @include control-panel(0.5rem, 0.5rem, 8px);
 *   }
 */
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
@keyframes frqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes frqPulse {
  0%, 100% {
    transform: scale(1); }
  50% {
    transform: scale(1.03); } }
@keyframes frqShake {
  0%, 100% {
    transform: translateX(0); }
  20%, 60% {
    transform: translateX(-4px); }
  40%, 80% {
    transform: translateX(4px); } }
.frq-popcorn {
  margin-bottom: 2rem;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden; }
  .frq-popcorn__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .frq-popcorn__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
      @media (max-width: 768px) {
        .frq-popcorn__header h3 {
          font-size: 14.4px; } }
    .frq-popcorn__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
      @media (max-width: 768px) {
        .frq-popcorn__header p {
          font-size: 11.2px; } }
  .frq-popcorn__body {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-top: none;
    padding: 30px;
    border-radius: 0 0 12px 12px; }
  .frq-popcorn__options {
    display: flex;
    flex-direction: column;
    gap: 10px; }
  .frq-popcorn__option {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    transition: all 0.2s; }
    .frq-popcorn__option:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .frq-popcorn__option:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .frq-popcorn__option--correct {
      border-color: #4ADE80 !important;
      background: rgba(74, 222, 128, 0.1) !important; }
    .frq-popcorn__option--incorrect {
      border-color: #E53E3E !important;
      background: rgba(229, 62, 62, 0.1) !important; }
    .frq-popcorn__option--disabled {
      pointer-events: none;
      opacity: 0.6; }
  .frq-popcorn__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px; }
    @media (max-width: 768px) {
      .frq-popcorn__grid {
        grid-template-columns: 1fr; } }
  .frq-popcorn__grid-card {
    background: var(--panel-mid);
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s; }
    .frq-popcorn__grid-card code {
      color: var(--pref-text-color);
      font-size: 12px; }
      @media (max-width: 768px) {
        .frq-popcorn__grid-card code {
          font-size: 9.6px; } }
    .frq-popcorn__grid-card:hover {
      transform: translateY(-2px);
      border-color: var(--pref-accent-color);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
    .frq-popcorn__grid-card--correct {
      border-color: #4ADE80 !important;
      background: rgba(74, 222, 128, 0.1) !important; }
    .frq-popcorn__grid-card--incorrect {
      border-color: #E53E3E !important;
      background: rgba(229, 62, 62, 0.1) !important; }
  .frq-popcorn__feedback {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .frq-popcorn__feedback {
        font-size: 9.6px; } }
    .frq-popcorn__feedback--correct {
      display: block;
      background: rgba(74, 222, 128, 0.1);
      border-left: 4px solid #4ADE80;
      animation: frqSlideDown 0.3s ease; }
    .frq-popcorn__feedback--incorrect {
      display: block;
      background: rgba(229, 62, 62, 0.1);
      border-left: 4px solid #E53E3E;
      animation: frqShake 0.4s ease; }

.frq-dragdrop {
  max-width: 740px;
  margin: 20px auto 30px;
  background: var(--pref-accent-color);
  padding: 3px;
  border-radius: 16px; }
  .frq-dragdrop__inner {
    background: var(--pref-bg-color);
    border-radius: calc(16px - 2px);
    padding: 30px; }
  .frq-dragdrop__title {
    color: var(--pref-text-color);
    text-align: center;
    margin-bottom: 6px;
    font-size: 22px;
    font-weight: 700; }
    @media (max-width: 768px) {
      .frq-dragdrop__title {
        font-size: 17.6px; } }
  .frq-dragdrop__subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 14px; }
    @media (max-width: 768px) {
      .frq-dragdrop__subtitle {
        font-size: 11.2px; } }
  .frq-dragdrop__area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px; }
    @media (max-width: 768px) {
      .frq-dragdrop__area {
        grid-template-columns: 1fr; } }
  .frq-dragdrop__column {
    background: var(--panel-mid);
    border-radius: 10px;
    padding: 15px;
    border: 2px solid var(--ui-border); }
    .frq-dragdrop__column h4 {
      color: var(--pref-accent-color);
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: 600; }
      @media (max-width: 768px) {
        .frq-dragdrop__column h4 {
          font-size: 11.2px; } }
  .frq-dragdrop__items {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .frq-dragdrop__item {
    background: var(--pref-bg-color);
    padding: 10px 15px;
    border-radius: 8px;
    border: 2px solid var(--pref-accent-color);
    cursor: grab;
    transition: all 0.3s ease;
    user-select: none;
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px;
    text-align: center; }
    @media (max-width: 768px) {
      .frq-dragdrop__item {
        font-size: 11.2px; } }
    .frq-dragdrop__item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
    .frq-dragdrop__item.dragging {
      opacity: 0.4;
      cursor: grabbing; }
  .frq-dragdrop__slot {
    margin-bottom: 10px; }
    .frq-dragdrop__slot .slot-label {
      font-weight: bold;
      color: var(--text-muted);
      margin-bottom: 4px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px; }
      @media (max-width: 768px) {
        .frq-dragdrop__slot .slot-label {
          font-size: 8px; } }
  .frq-dragdrop__dropzone {
    background: var(--pref-bg-color);
    padding: 10px 15px;
    border-radius: 8px;
    border: 2px dashed var(--ui-border);
    min-height: 42px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pref-text-color);
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px; }
    @media (max-width: 768px) {
      .frq-dragdrop__dropzone {
        font-size: 11.2px; } }
    .frq-dragdrop__dropzone .placeholder {
      color: var(--text-muted);
      font-style: italic;
      font-size: 12px; }
      @media (max-width: 768px) {
        .frq-dragdrop__dropzone .placeholder {
          font-size: 9.6px; } }
    .frq-dragdrop__dropzone.drag-over {
      background: rgba(0, 0, 0, 0.15);
      border-color: var(--pref-accent-color);
      border-style: solid; }
    .frq-dragdrop__dropzone.filled {
      border-style: solid;
      border-color: var(--pref-accent-color); }
  .frq-dragdrop__controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap; }
  .frq-dragdrop__btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    font-weight: 600; }
    .frq-dragdrop__btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .frq-dragdrop__btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .frq-dragdrop__btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .frq-dragdrop__btn {
        height: 44px; } }
    .frq-dragdrop__btn--check {
      background: #4ADE80;
      border-color: #4ADE80;
      color: var(--pref-bg-color); }
      .frq-dragdrop__btn--check:hover {
        opacity: 0.85; }
    .frq-dragdrop__btn--reset {
      background: #ED8936;
      border-color: #ED8936;
      color: var(--pref-bg-color); }
      .frq-dragdrop__btn--reset:hover {
        opacity: 0.85; }
  .frq-dragdrop__feedback {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .frq-dragdrop__feedback {
        font-size: 9.6px; } }
    .frq-dragdrop__feedback--correct {
      display: block;
      background: rgba(74, 222, 128, 0.1);
      border-left: 4px solid #4ADE80;
      animation: frqSlideDown 0.3s ease; }
    .frq-dragdrop__feedback--incorrect {
      display: block;
      background: rgba(229, 62, 62, 0.1);
      border-left: 4px solid #E53E3E;
      animation: frqShake 0.4s ease; }

.frq-viz {
  margin-bottom: 2rem;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden; }
  .frq-viz__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .frq-viz__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
      @media (max-width: 768px) {
        .frq-viz__header h3 {
          font-size: 14.4px; } }
    .frq-viz__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
      @media (max-width: 768px) {
        .frq-viz__header p {
          font-size: 11.2px; } }
  .frq-viz__body {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-top: none;
    padding: 30px;
    border-radius: 0 0 12px 12px; }
  .frq-viz__controls {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap; }
  .frq-viz__input {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    min-width: 200px; }
    .frq-viz__input:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .frq-viz__input:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
  .frq-viz__step-btn {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pref-accent-color);
    border-color: var(--pref-accent-color);
    color: var(--pref-bg-color);
    font-weight: 600; }
    .frq-viz__step-btn:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .frq-viz__step-btn:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .frq-viz__step-btn:hover {
      opacity: 0.9;
      transform: scale(1.05); }
    @media (max-width: 768px) {
      .frq-viz__step-btn {
        height: 44px; } }
    .frq-viz__step-btn--secondary {
      background: var(--panel-mid);
      border-color: var(--ui-border);
      color: var(--pref-text-color); }
    .frq-viz__step-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none; }
  .frq-viz__display {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap; }
  .frq-viz__token-stream {
    flex: 1;
    min-width: 200px; }
    .frq-viz__token-stream h5 {
      color: var(--text-muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 8px; }
      @media (max-width: 768px) {
        .frq-viz__token-stream h5 {
          font-size: 8px; } }
  .frq-viz__token {
    display: inline-block;
    padding: 6px 12px;
    margin: 3px;
    border-radius: 4px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px;
    background: var(--panel-mid);
    color: var(--pref-text-color);
    border: 1px solid var(--ui-border);
    transition: all 0.3s; }
    @media (max-width: 768px) {
      .frq-viz__token {
        font-size: 11.2px; } }
    .frq-viz__token--open {
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      color: var(--pref-bg-color); }
    .frq-viz__token--close {
      background: #ED8936;
      border-color: #ED8936;
      color: var(--pref-bg-color); }
    .frq-viz__token--text {
      opacity: 0.5; }
    .frq-viz__token--active {
      transform: scale(1.15);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
    .frq-viz__token--processed {
      opacity: 0.3; }
  .frq-viz__counter {
    min-width: 140px;
    text-align: center; }
    .frq-viz__counter h5 {
      color: var(--text-muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 8px; }
      @media (max-width: 768px) {
        .frq-viz__counter h5 {
          font-size: 8px; } }
  .frq-viz__counter-bar {
    background: var(--panel-mid);
    border: 2px solid var(--pref-accent-color);
    border-radius: 8px;
    padding: 15px; }
    .frq-viz__counter-bar .counter-value {
      color: var(--pref-text-color);
      font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
      font-size: 32px;
      font-weight: 700; }
    .frq-viz__counter-bar .counter-label {
      color: var(--text-muted);
      font-size: 10px;
      margin-top: 6px; }
      @media (max-width: 768px) {
        .frq-viz__counter-bar .counter-label {
          font-size: 8px; } }
  .frq-viz__narration {
    margin-top: 15px;
    padding: 12px;
    background: var(--panel-mid);
    border-radius: 8px;
    border-left: 3px solid var(--pref-accent-color);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    min-height: 40px; }
    @media (max-width: 768px) {
      .frq-viz__narration {
        font-size: 11.2px; } }
    .frq-viz__narration strong {
      color: var(--pref-accent-color); }
    .frq-viz__narration code {
      background: var(--pref-bg-color);
      padding: 2px 6px;
      border-radius: 3px;
      color: var(--pref-text-color); }

.frq-quiz {
  margin-bottom: 2rem;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ui-border); }
  .frq-quiz__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .frq-quiz__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
      @media (max-width: 768px) {
        .frq-quiz__header h3 {
          font-size: 14.4px; } }
    .frq-quiz__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
      @media (max-width: 768px) {
        .frq-quiz__header p {
          font-size: 11.2px; } }
  .frq-quiz__body {
    padding: 30px; }
  .frq-quiz__question {
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-shadow: none; }
    .frq-quiz__question h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .frq-quiz__question p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
    .frq-quiz__question .q-number {
      color: var(--pref-accent-color);
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px; }
      @media (max-width: 768px) {
        .frq-quiz__question .q-number {
          font-size: 9.6px; } }
    .frq-quiz__question .q-text {
      color: var(--pref-text-color);
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 15px; }
      @media (max-width: 768px) {
        .frq-quiz__question .q-text {
          font-size: 11.2px; } }
  .frq-quiz__choices {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .frq-quiz__choice {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    color: var(--pref-text-color);
    font-family: var(--pref-font-family);
    font-size: var(--pref-font-size);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    transition: all 0.2s; }
    .frq-quiz__choice:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color); }
    .frq-quiz__choice:focus {
      outline: none;
      border-color: var(--pref-accent-color); }
    .frq-quiz__choice--correct {
      border-color: #4ADE80 !important;
      background: rgba(74, 222, 128, 0.1) !important; }
    .frq-quiz__choice--incorrect {
      border-color: #E53E3E !important;
      background: rgba(229, 62, 62, 0.1) !important; }
    .frq-quiz__choice--disabled {
      pointer-events: none;
      opacity: 0.6; }
  .frq-quiz__explanation {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pref-text-color); }
    @media (max-width: 768px) {
      .frq-quiz__explanation {
        font-size: 9.6px; } }
    .frq-quiz__explanation--correct {
      display: block;
      background: rgba(74, 222, 128, 0.1);
      border-left: 4px solid #4ADE80;
      animation: frqSlideDown 0.3s ease; }
    .frq-quiz__explanation--incorrect {
      display: block;
      background: rgba(229, 62, 62, 0.1);
      border-left: 4px solid #E53E3E;
      animation: frqShake 0.4s ease; }
  .frq-quiz__score {
    text-align: center;
    padding: 20px;
    background: var(--panel-mid);
    border-radius: 10px;
    margin-top: 10px; }
    .frq-quiz__score--hidden {
      display: none; }
    .frq-quiz__score .score-label {
      color: var(--text-muted);
      font-size: 14px;
      margin-bottom: 5px; }
      @media (max-width: 768px) {
        .frq-quiz__score .score-label {
          font-size: 11.2px; } }
    .frq-quiz__score .score-value {
      color: var(--pref-text-color);
      font-size: 32px;
      font-weight: 700; }
    .frq-quiz__score .score-bar {
      margin-top: 10px;
      height: 8px;
      background: var(--ui-border);
      border-radius: 4px;
      overflow: hidden; }
      .frq-quiz__score .score-bar .score-fill {
        height: 100%;
        background: var(--pref-accent-color);
        border-radius: 4px;
        transition: width 0.5s ease; }

.frq-game {
  margin-bottom: 2rem;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden; }
  .frq-game__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .frq-game__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
      @media (max-width: 768px) {
        .frq-game__header h3 {
          font-size: 14.4px; } }
    .frq-game__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
      @media (max-width: 768px) {
        .frq-game__header p {
          font-size: 11.2px; } }
  .frq-game__body {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-top: none;
    padding: 30px;
    border-radius: 0 0 12px 12px; }
  .frq-game__canvas-wrap {
    border: 2px solid var(--pref-accent-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    background: var(--pref-bg-color); }
    .frq-game__canvas-wrap canvas {
      display: block;
      width: 100%; }
  .frq-game__status {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; }
    .frq-game__status .status-item {
      background: var(--panel-mid);
      padding: 8px 12px;
      border-radius: 6px;
      border: 1px solid var(--ui-border);
      color: var(--pref-text-color);
      font-size: 12px;
      font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace; }
      @media (max-width: 768px) {
        .frq-game__status .status-item {
          font-size: 9.6px; } }
      .frq-game__status .status-item .status-label {
        color: var(--text-muted); }
      .frq-game__status .status-item .status-value {
        font-weight: 700;
        color: var(--pref-accent-color); }

.frq-info {
  margin-bottom: 2rem;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ui-border); }
  .frq-info__header {
    background: var(--pref-accent-color);
    padding: 20px; }
    .frq-info__header h3 {
      margin: 0;
      color: var(--pref-bg-color);
      font-weight: 600;
      font-size: 18px; }
      @media (max-width: 768px) {
        .frq-info__header h3 {
          font-size: 14.4px; } }
    .frq-info__header p {
      margin: 8px 0 0;
      color: var(--pref-bg-color);
      opacity: 0.85;
      font-size: 14px; }
      @media (max-width: 768px) {
        .frq-info__header p {
          font-size: 11.2px; } }
  .frq-info__body {
    background: var(--pref-bg-color);
    border: 1px solid var(--ui-border);
    border-top: none;
    padding: 30px;
    border-radius: 0 0 12px 12px; }
  .frq-info__step {
    margin-bottom: 15px;
    padding: 12px;
    background: var(--panel-mid);
    border-radius: 6px;
    animation: frqSlideDown 0.3s ease; }
    .frq-info__step .step-label {
      color: var(--pref-accent-color);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 6px; }
      @media (max-width: 768px) {
        .frq-info__step .step-label {
          font-size: 11.2px; } }
    .frq-info__step .step-detail {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.6; }
      @media (max-width: 768px) {
        .frq-info__step .step-detail {
          font-size: 9.6px; } }
      .frq-info__step .step-detail code {
        background: var(--pref-bg-color);
        padding: 2px 6px;
        border-radius: 3px;
        color: var(--pref-text-color); }
  .frq-info__key-point {
    padding: 15px;
    margin-bottom: 0;
    border-radius: 8px;
    background: var(--panel);
    border: 0 solid var(--pref-accent-color);
    color: var(--pref-text-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    border-left: 4px solid #38B2AC;
    margin-top: 15px;
    box-shadow: none; }
    .frq-info__key-point h3 {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.5rem 0;
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--pref-accent-color); }
    .frq-info__key-point p {
      margin: 0;
      line-height: 1.5;
      font-size: 1rem;
      color: var(--pref-text-color);
      opacity: 0.95; }
    .frq-info__key-point .key-title {
      color: #38B2AC;
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px; }
      @media (max-width: 768px) {
        .frq-info__key-point .key-title {
          font-size: 11.2px; } }
    .frq-info__key-point .key-detail {
      color: var(--text-muted);
      line-height: 1.8; }