#tw {
      --ink: #071a2a;
      --ink-2: #0d2340;
      --panel: #081f31;
      --panel-2: #0c2740;
      --panel-3: #102d44;
      --line: rgba(126, 173, 230, 0.34);
      --blue: #4daafc;
      --blue-2: #2c7fe8;
      --green: #23c988;
      --green-2: #1ea86f;
      --red: #ef4d5f;
      --purple: #8e66ff;
      --amber: #f0c75d;
      --soft: #ecf8ff;
      --text: #eaf4ff;
      --muted: #9bb8d9;
      max-width: 1180px;
      margin: 2rem auto;
      background: linear-gradient(180deg, #081a2d, #071823);
      border: 1px solid rgba(122, 175, 227, 0.42);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 18px 40px rgba(4, 11, 21, 0.55);
      line-height: 1.4;
      text-align: left;
      color: var(--text);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    #tw * { box-sizing: border-box; }

    #tw .tw-top {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 12px 16px;
      background: linear-gradient(180deg, #071a2d, #0b2138);
      border-bottom: 1px solid rgba(121, 163, 207, 0.28);
      color: #fff;
    }

    #tw .tw-top b {
      font-size: 15px;
      letter-spacing: .2px;
      color: #edf7ff;
    }

    #tw .tw-lv {
      display: flex;
      gap: 6px;
      flex: 1;
      flex-wrap: wrap;
    }

    #tw button {
      font: inherit;
      cursor: pointer;
    }

    #tw .tw-chip {
      border: 0;
      border-radius: 99px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      background: rgba(255,255,255,.08);
      color: #eaf5ff;
      border: 1px solid rgba(150, 184, 224, 0.2);
    }

    #tw .tw-chip.on {
      background: linear-gradient(180deg, #ffe38f, #f9c84d);
      color: #12263c;
      border-color: #f9ca53;
    }

    #tw .tw-chip:disabled { opacity: .5; cursor: not-allowed; }

    #tw .tw-sc {
      font-weight: 700;
      font-size: 14px;
      color: #ffd56b;
    }

    #tw .tw-bar {
      height: 5px;
      background: rgba(155, 189, 217, 0.15);
    }

    #tw .tw-bar i {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--green), #24d28a);
      transition: width .35s;
    }

    #tw .tw-wrap { position: relative; }

    #tw .tw-stage {
      position: relative;
      min-height: 670px;
      background: linear-gradient(180deg, #071a2d 0%, #081d31 100%);
      cursor: pointer;
      overflow: hidden;
      user-select: none;
      padding: 14px 14px 10px;
      border-bottom: 1px solid rgba(124, 186, 255, 0.18);
    }

    #tw .tw-stage.sh { animation: tw-sh .3s; }

    @keyframes tw-sh {
      25% { transform: translateX(-6px); }
      75% { transform: translateX(6px); }
    }

    #tw .app-shell {
      position: relative;
      width: 100%;
      min-height: 620px;
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(12, 30, 48, 0.88), rgba(7, 21, 31, 0.96));
      border: 1px solid rgba(127, 183, 236, 0.34);
      box-shadow: inset 0 0 0 1px rgba(151, 194, 251, 0.12);
      overflow: hidden;
    }

    #tw .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px 7px;
      background: rgba(4, 15, 25, 0.85);
      border-bottom: 1px solid rgba(121, 161, 209, 0.23);
      font-size: 12px;
      color: #dfefff;
    }

    #tw .app-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      letter-spacing: .1px;
    }

    #tw .app-brand .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: linear-gradient(180deg, #38d79a, #1db274);
      box-shadow: 0 0 16px rgba(63, 225, 165, 0.6);
    }

    #tw .window-controls {
      display: flex;
      gap: 12px;
      align-items: center;
      color: #a7d2ff;
      font-size: 16px;
      padding-right: 4px;
    }

    #tw .window-controls span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid rgba(155, 188, 255, 0.4);
      opacity: .8;
    }

    #tw .top-tabs {
      display: flex;
      gap: 14px;
      padding: 0 16px;
      border-bottom: 1px solid rgba(126, 174, 226, 0.18);
      background: rgba(10, 22, 35, 0.55);
    }

    #tw .top-tabs .tab {
      padding: 14px 6px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #d7ebff;
      opacity: .85;
      text-transform: uppercase;
      letter-spacing: .2px;
      border-bottom: 2px solid transparent;
    }

    #tw .top-tabs .tab.active {
      opacity: 1;
      color: #f5fbff;
      border-color: #4fa8ff;
      background: linear-gradient(180deg, rgba(68, 126, 191, 0.12), transparent);
    }

    #tw .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 12px 14px;
      background: rgba(8, 24, 36, 0.76);
      border-bottom: 1px solid rgba(120, 166, 216, 0.22);
    }

    #tw .tool-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 82px;
      min-height: 62px;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(15, 34, 52, 0.86);
      border: 1px solid rgba(127, 170, 211, 0.32);
      color: #eaf5ff;
      font-size: 11px;
      line-height: 1.1;
      box-shadow: inset 0 0 0 1px rgba(197, 220, 255, 0.06);
    }

    #tw .tool-btn .icon {
      font-size: 19px;
      line-height: 1;
    }

    #tw .tool-btn.primary {
      background: rgba(255, 86, 87, 0.14);
      border-color: rgba(255, 100, 115, 0.42);
    }

    #tw .tool-btn.gold {
      background: rgba(255, 198, 86, 0.1);
      border-color: rgba(255, 198, 86, 0.38);
    }

    #tw .toolbar-spacer { flex: 1; }

    #tw .user-box {
      min-width: 160px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      background: rgba(13, 31, 46, 0.9);
      border: 1px solid rgba(134, 188, 238, 0.32);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 11px;
      color: #dff3ff;
    }

    #tw .user-box .premium {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      padding: 6px 8px;
      border-radius: 8px;
      background: linear-gradient(180deg, #ff6e62, #ff4a5e);
      font-weight: 700;
      color: #fff;
      border: 1px solid rgba(255,255,255,.2);
    }

    #tw .status-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: rgba(8, 22, 34, 0.8);
      border-bottom: 1px solid rgba(120, 164, 216, 0.23);
      padding: 10px 14px;
      font-size: 12px;
    }

    #tw .status-pill {
      border-radius: 9px;
      padding: 7px 10px;
      color: #edf8ff;
      border: 1px solid rgba(139, 190, 255, 0.28);
      background: rgba(13, 35, 54, 0.7);
      display: inline-flex;
      gap: 8px;
      align-items: center;
    }

    #tw .status-pill .mini-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #52d78b;
      box-shadow: 0 0 12px rgba(110, 225, 173, 0.7);
      display: inline-block;
    }

    #tw .status-pill.red .mini-dot { background: #ff6070; }
    #tw .status-pill.yellow .mini-dot { background: #ffd15b; }
    #tw .status-pill.blue .mini-dot { background: #63a9ff; }

    #tw .status-pill strong { font-weight: 800; color: #ffd978; }

    #tw .main-panel {
      display: grid;
      grid-template-columns: 1.65fr .85fr;
      gap: 12px;
      padding: 12px 14px 10px;
    }

    #tw .panel {
      background: linear-gradient(180deg, rgba(11, 28, 42, 0.94), rgba(9, 22, 33, 0.96));
      border: 1px solid rgba(123, 169, 217, 0.24);
      border-radius: 10px;
      overflow: hidden;
    }

    #tw .left-panel {
      display: flex;
      flex-direction: column;
      min-height: 470px;
    }

    #tw .inventory-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 12px 10px;
      border-bottom: 1px solid rgba(124, 167, 219, 0.18);
      background: rgba(8, 21, 32, 0.7);
    }

    #tw .inventory-header .search-wrap {
      flex: 1;
      min-height: 40px;
      display: flex;
      align-items: center;
      border-radius: 10px;
      background: rgba(17, 37, 57, 0.8);
      border: 1px solid rgba(120, 171, 225, 0.36);
      padding: 0 14px;
      color: #a9c8ee;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .2px;
    }

    #tw .inventory-header .new-product-btn {
      min-height: 40px;
      padding: 0 16px;
      border-radius: 10px;
      background: linear-gradient(180deg, #24c87d, #1c9c68);
      color: white;
      border: 1px solid rgba(120, 229, 170, 0.6);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .2px;
    }

    #tw .inventory-toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 12px;
      border-bottom: 1px solid rgba(110, 157, 208, 0.18);
      background: rgba(7, 20, 33, 0.6);
    }

    #tw .small-btn {
      min-height: 30px;
      border-radius: 8px;
      padding: 0 10px;
      background: rgba(21, 41, 62, 0.9);
      border: 1px solid rgba(133, 181, 236, 0.32);
      color: #edf8ff;
      font-size: 11px;
      font-weight: 700;
    }

    #tw .small-btn.primary {
      background: linear-gradient(180deg, rgba(64, 142, 255, 0.28), rgba(30, 64, 116, 0.8));
      border-color: rgba(135, 183, 250, 0.45);
    }

    #tw .small-btn.red { background: linear-gradient(180deg, rgba(255, 92, 105, 0.22), rgba(116, 31, 44, 0.8)); }
    #tw .small-btn.green { background: linear-gradient(180deg, rgba(29, 187, 120, 0.2), rgba(24, 90, 60, 0.8)); }

    #tw .table-wrap {
      flex: 1;
      overflow: hidden;
      background: rgba(8, 21, 33, 0.7);
    }

    #tw .table-head,
    #tw .table-row {
      display: grid;
      grid-template-columns: 36px minmax(120px, 2.2fr) minmax(80px, .8fr) minmax(80px, .8fr) minmax(82px, .8fr) minmax(82px, .8fr) minmax(82px, .8fr) minmax(78px, .8fr);
      gap: 10px;
      padding: 0 12px;
      align-items: center;
      min-height: 42px;
    }

    #tw .table-head {
      background: rgba(11, 27, 42, 0.8);
      color: #d8ebff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .2px;
      border-bottom: 1px solid rgba(127, 172, 226, 0.18);
      text-transform: uppercase;
    }

    #tw .table-row {
      font-size: 12px;
      color: #dfefff;
      border-bottom: 1px solid rgba(123, 160, 210, 0.14);
      background: rgba(8, 23, 35, 0.18);
    }

    #tw .table-row:nth-child(even) { background: rgba(12, 28, 42, 0.12); }

    #tw .checkbox {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1px solid rgba(138, 188, 244, 0.6);
      background: rgba(15, 25, 38, 0.8);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #dff4ff;
    }

    #tw .concept {
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1.2;
    }

    #tw .concept strong {
      font-size: 13px;
      color: #eaf5ff;
      letter-spacing: .1px;
    }

    #tw .concept span {
      font-size: 11px;
      color: #93b5d8;
    }

    #tw .price {
      color: #eaf8ff;
      font-weight: 700;
    }

    #tw .status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 20px;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      background: rgba(35, 146, 104, 0.2);
      border: 1px solid rgba(41, 188, 120, 0.35);
      color: #7ee5b6;
    }

    #tw .table-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 12px 10px;
      border-top: 1px solid rgba(126, 170, 220, 0.18);
      background: rgba(9, 20, 31, 0.75);
      color: #dfefff;
      font-size: 12px;
    }

    #tw .toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(15, 31, 45, 0.9);
      border: 1px solid rgba(125, 176, 233, 0.28);
      border-radius: 99px;
      padding: 6px 10px;
      font-size: 11px;
      color: #ebf7ff;
    }

    #tw .toggle .switch {
      width: 34px;
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, #4ca0ff, #2b76d6);
      position: relative;
      border: 1px solid rgba(140, 188, 255, 0.5);
    }

    #tw .toggle .switch::after {
      content: '';
      position: absolute;
      top: 2px;
      right: 3px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fff;
    }

    #tw .right-panel {
      display: flex;
      flex-direction: column;
      padding: 10px;
      gap: 10px;
      background: rgba(8, 22, 34, 0.75);
    }

    #tw .right-panel .switches {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      background: rgba(16, 34, 50, 0.9);
      border-radius: 12px;
      padding: 8px;
      border: 1px solid rgba(128, 177, 233, 0.25);
    }

    #tw .switches .switch-btn {
      min-height: 34px;
      border-radius: 9px;
      background: rgba(20, 39, 58, 0.9);
      border: 1px solid rgba(128, 177, 233, 0.24);
      color: #eef8ff;
      font-size: 11px;
      font-weight: 700;
    }

    #tw .switches .switch-btn.active {
      background: linear-gradient(180deg, rgba(77, 118, 227, 0.35), rgba(20, 38, 61, 0.94));
    }

    #tw .product-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(90px, 1fr));
      gap: 8px;
    }

    #tw .p-card {
      min-height: 108px;
      border-radius: 10px;
      border: 1px solid rgba(146, 188, 236, 0.2);
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #f3fbff;
      font-weight: 700;
    }

    #tw .p-card.red { background: linear-gradient(180deg, rgba(130, 31, 47, 0.7), rgba(41, 13, 19, 0.8)); }
    #tw .p-card.blue { background: linear-gradient(180deg, rgba(36, 108, 162, 0.72), rgba(18, 39, 55, 0.84)); }
    #tw .p-card.green { background: linear-gradient(180deg, rgba(26, 120, 78, 0.66), rgba(12, 44, 31, 0.8)); }
    #tw .p-card.orange { background: linear-gradient(180deg, rgba(128, 90, 26, 0.7), rgba(44, 29, 7, 0.8)); }

    #tw .p-card .heart { align-self: flex-end; opacity: .9; }
    #tw .p-card .name { font-size: 12px; line-height: 1.2; margin-top: 12px; }
    #tw .p-card .price { font-size: 18px; }

    #tw .right-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 4px;
    }

    #tw .right-total {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: #d8ebff;
      font-size: 12px;
      opacity: .9;
    }

    #tw .amount {
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 800;
      letter-spacing: -1px;
      color: #effaff;
      text-align: right;
      line-height: 1;
    }

    #tw .pay-btn {
      min-height: 46px;
      border: 0;
      border-radius: 10px;
      background: linear-gradient(180deg, #2ecf89, #1ea76d);
      color: #fff;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: .4px;
      box-shadow: 0 7px 18px rgba(44, 191, 125, 0.24);
    }

    #tw .tw-hl {
      position: absolute;
      border: .5cqw solid #ffd661;
      border-radius: 1cqw;
      box-shadow: 0 0 0 200vmax rgba(4, 16, 25, 0.62);
      pointer-events: none;
      animation: tw-p 1.1s infinite;
      z-index: 40;
    }

    @keyframes tw-p { 50% { border-color: #fff; } }

    #tw .tw-x {
      position: absolute;
      width: 42px;
      height: 42px;
      margin: -21px 0 0 -21px;
      border-radius: 50%;
      border: 4px solid #ff5b5b;
      pointer-events: none;
      animation: tw-f .6s forwards;
      z-index: 41;
    }

    #tw .tw-x.ok {
      border-color: #3ade7f;
      background: rgba(58, 222, 127, 0.18);
    }

    @keyframes tw-f {
      to { transform: scale(1.8); opacity: 0; }
    }

    #tw .tw-ins {
      padding: 14px 18px 6px;
      min-height: 84px;
      background: rgba(6, 17, 27, 0.9);
      border-top: 1px solid rgba(128, 169, 216, 0.15);
    }

    #tw .tw-n {
      font-size: 12px;
      color: #a7bedf;
      font-weight: 600;
    }

    #tw .tw-t {
      font-size: 17px;
      font-weight: 700;
      margin-top: 2px;
      color: #edf8ff;
    }

    #tw .tw-h {
      font-size: 13px;
      color: #8ec1ff;
      margin-top: 4px;
      min-height: 18px;
    }

    #tw .tw-ft {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px 18px 16px;
      font-size: 13px;
      background: rgba(7, 17, 27, 0.95);
      border-top: 1px solid rgba(128, 169, 216, 0.12);
    }

    #tw .tw-ft label {
      margin-right: auto;
      display: flex;
      gap: 6px;
      align-items: center;
      cursor: pointer;
      color: #dfeeff;
    }

    #tw .tw-b {
      border: 1px solid rgba(129, 169, 219, 0.34);
      background: rgba(18, 35, 54, 0.8);
      color: var(--text);
      border-radius: 10px;
      padding: 7px 12px;
      font-size: 13px;
      font-weight: 600;
    }

    #tw .tw-b.p {
      background: linear-gradient(180deg, #4ea3ff, #306fdc);
      border-color: rgba(145, 182, 255, 0.7);
      color: #fff;
    }

    #tw .tw-end {
      position: absolute;
      inset: 0;
      background: rgba(5, 15, 23, 0.88);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      padding: 16px;
      z-index: 50;
    }

    #tw .tw-end[hidden] { display: none; }

    #tw .tw-st {
      font-size: 38px;
      letter-spacing: 4px;
      color: #ffd76d;
    }

    #tw .tw-end h3 {
      margin: 0;
      font-size: 20px;
    }

    #tw .tw-end p {
      margin: 0;
      color: #dfefff;
      font-size: 14px;
    }

    #tw .tw-end div {
      display: flex;
      gap: 8px;
    }

    #tw {
      max-width: 1400px;
      background: #080d18;
      border-color: #178fd0;
      font-family: "Segoe UI", Arial, sans-serif;
    }

    #tw .tw-top { background: #101827; }
    #tw .tw-lv { flex: 1 1 360px; }
    #tw .tw-stage {
      min-height: 0;
      padding: 0;
      background: #080d18;
    }
    #tw .app-shell {
      min-height: 0;
      border: 0;
      border-radius: 0;
      background: #0e1728;
      box-shadow: none;
    }
    #tw .app-header {
      height: 28px;
      padding: 0 10px;
      background: #202124;
      color: #f4f6fa;
      font-size: 11px;
    }
    #tw .app-brand .dot { background: #08a9d8; box-shadow: none; }
    #tw .window-controls span { border: 0; border-radius: 0; }
    #tw .home-screen[hidden],
    #tw .inventory-screen[hidden],
    #tw .article-screen[hidden],
    #tw .tutorial-chooser[hidden] { display: none !important; }
    #tw .tutorial-chooser {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px;
      padding: 10px 14px;
      background: #101b2c;
      border-bottom: 1px solid #1b8dcc;
      color: #d7e6f7;
      font-size: 13px;
    }
    #tw .tutorial-chooser strong { color: #fff; margin-right: 4px; }
    #tw .tutorial-choice,
    #tw .sim-button {
      border: 1px solid #168fd0;
      border-radius: 9px;
      background: #162339;
      color: #eaf4ff;
      padding: 8px 12px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    #tw .tutorial-choice.active,
    #tw .sim-button.blue { background: #1478d4; color: #fff; }
    #tw .sim-button.green { background: #11964e; border-color: #20c36c; color: #fff; }
    #tw .sim-button.red { background: #c91f2a; border-color: #f14b55; color: #fff; }
    #tw .sim-button.purple { background: #8545df; border-color: #a76aff; color: #fff; }
    #tw .home-screen,
    #tw .inventory-screen,
    #tw .article-screen {
      background: #0e1728;
      color: #e5edf8;
    }
    #tw .main-menu {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 4px;
      padding: 7px 10px;
      border-bottom: 1px solid #16263d;
      color: #d3dbe8;
      font-size: 12px;
      font-weight: 700;
    }
    #tw .main-menu span { padding: 4px 7px; }
    #tw .home-toolbar {
      display: grid;
      grid-template-columns: repeat(14, minmax(64px, 1fr));
      gap: 5px;
      padding: 9px 10px;
    }
    #tw .home-tool {
      min-height: 62px;
      border: 1px solid #078fd0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: #1a2538;
      color: #f3f6fb;
      font-size: 10px;
      font-weight: 700;
      text-align: center;
      line-height: 1.1;
    }
    #tw .home-tool .tool-icon { font-size: 20px; line-height: 1; }
    #tw .home-tool.alert { background: #f13a3d; }
    #tw .home-tool.premium { background: #b48900; }
    #tw .home-status {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 16px;
      min-height: 48px;
      padding: 6px 12px;
      background: #111d30;
      border-top: 1px solid #152d49;
      border-bottom: 1px solid #192b45;
      color: #3ba9ff;
      font-size: 11px;
      font-weight: 700;
    }
    #tw .home-status b { color: #dbe6f3; }
    #tw .sales-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 290px;
      gap: 10px;
      padding: 9px 10px 12px;
      min-height: 500px;
    }
    #tw .sale-left { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
    #tw .scan-label { color: #93c6ed; font-size: 9px; font-weight: 800; text-transform: uppercase; }
    #tw .scan-row { display: flex; gap: 6px; }
    #tw .scan-field {
      flex: 1;
      height: 38px;
      border: 2px solid #197be8;
      border-radius: 10px;
      background: #101a2c;
    }
    #tw .quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    #tw .quick-actions .sim-button { min-height: 38px; border-radius: 12px; font-size: 12px; }
    #tw .ticket {
      flex: 1;
      min-height: 285px;
      border: 1px solid #087fc0;
      border-radius: 14px;
      background: #101827;
      position: relative;
    }
    #tw .ticket-head {
      display: grid;
      grid-template-columns: 24px 1fr 44px 48px 70px 80px;
      gap: 5px;
      padding: 8px 12px;
      border-bottom: 1px solid #172538;
      color: #98a8bf;
      font-size: 10px;
      font-weight: 800;
    }
    #tw .cart-brand {
      position: absolute;
      inset: 38px 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: clamp(26px, 4vw, 44px);
      font-weight: 300;
      letter-spacing: 2px;
      text-shadow: 0 2px #178fd0, 2px 0 #178fd0, -2px 0 #178fd0;
    }
    #tw .cart-logo {
      width: 130px;
      height: 130px;
      display: grid;
      place-items: center;
      margin-bottom: 5px;
      border: 3px solid #e8f5ff;
      border-radius: 50%;
      background: radial-gradient(circle at 65% 30%, #02afcf, #006284 70%);
      font-size: 65px;
      text-shadow: none;
    }
    #tw .sale-shortcuts {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      color: #9aaac0;
      font-size: 11px;
    }
    #tw .sale-shortcuts b { color: #ff6169; }
    #tw .sale-right { display: flex; flex-direction: column; gap: 8px; }
    #tw .receipt-box,
    #tw .frequent-box {
      padding: 10px;
      border: 1px solid #078fd0;
      border-radius: 16px;
      background: #101a2c;
    }
    #tw .frequent-box { min-height: 220px; }
    #tw .frequent-tabs { display: flex; gap: 14px; color: #7bbcff; font-size: 11px; font-weight: 800; }
    #tw .product-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
    #tw .mini-product { height: 104px; padding: 8px; background: #142239; border-radius: 9px; color: #38b5ff; font-size: 11px; font-weight: 800; }
    #tw .mini-product:nth-child(odd) { background: #263046; color: #f2a3b1; }
    #tw .mini-product strong { display: block; margin-top: 5px; color: #dfe9f7; }
    #tw .receipt-box { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }
    #tw .amount { color: white; font-size: 42px; text-align: center; }
    #tw .sim-screen {
      min-height: 590px;
      background: #080d18;
      color: #e4ecf8;
      position: relative;
      padding: 0 14px 14px;
    }
    #tw .inventory-tabs {
      display: flex;
      align-items: center;
      gap: 18px;
      overflow: auto;
      padding: 10px 6px;
      color: #99a9bf;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      white-space: nowrap;
    }
    #tw .inventory-tabs .selected { color: #41aaff; background: #112b4a; border: 1px solid #183f67; border-radius: 10px; padding: 8px 12px; }
    #tw .inventory-actions,
    #tw .inventory-filters,
    #tw .column-options,
    #tw .inventory-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 7px 0; }
    #tw .inventory-actions .sim-button { padding: 7px 11px; font-size: 11px; }
    #tw .inventory-filters { border: 1px solid #137db5; border-radius: 10px; padding: 8px; background: #101a2b; }
    #tw .filter-input { flex: 1; min-width: 110px; height: 30px; border: 1px solid #147bb2; border-radius: 10px; background: #0e1727; }
    #tw .filter-chip { color: #c8d5e6; border: 1px solid #25364e; border-radius: 10px; padding: 6px 9px; font-size: 10px; }
    #tw .column-options { gap: 12px; color: #bcc8d8; font-size: 10px; }
    #tw .inventory-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      border: 1px solid #1186c6;
      color: #dbe5f1;
      font-size: 11px;
    }
    #tw .inventory-table th,
    #tw .inventory-table td { padding: 7px 5px; text-align: left; border-bottom: 1px solid #1b2b42; overflow: hidden; text-overflow: ellipsis; }
    #tw .inventory-table th { color: #98a9bf; font-weight: 800; background: #0d1523; }
    #tw .inventory-table td strong { display: block; color: #e2eaf6; font-size: 12px; }
    #tw .inventory-table td small { color: #8394aa; }
    #tw .inventory-table td.price { color: #39a6ff; font-size: 11px; font-weight: 700; }
    #tw .added-row.complete { background: rgba(24, 152, 87, .2); outline: 2px solid #22c879; }
    #tw .inventory-footer { justify-content: space-between; border: 1px solid #1186c6; border-radius: 10px; margin-top: 8px; padding: 8px 10px; color: #9bacc2; font-size: 11px; }
    #tw .mass-edit { border: 1px solid #1688c8; border-radius: 10px; padding: 9px; margin-top: 8px; color: #d9e4f2; font-size: 11px; }
    #tw .article-screen { min-height: 590px; padding-bottom: 12px; }
    #tw .article-header {
      min-height: 72px;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 10px 16px;
      background: #0e1728;
      border-bottom: 1px solid #1385be;
    }
    #tw .back-button { border-radius: 14px; padding: 8px 12px; border: 1px solid #138dcc; color: #e9f2fc; background: #111b2c; font-weight: 700; }
    #tw .article-title { font-size: 19px; font-weight: 800; color: #f5f7fb; }
    #tw .article-title span { display: block; font-size: 20px; font-weight: 400; }
    #tw .article-form { display: grid; grid-template-columns: 255px minmax(0,1fr); gap: 12px; padding: 12px 14px; }
    #tw .photo-panel { min-height: 315px; border: 1px solid #158ac5; border-radius: 8px; background: #131e32; display: grid; place-items: center; color: #7d8da4; font-size: 12px; }
    #tw .form-main { min-width: 0; }
    #tw .form-section { border: 1px solid #1488c5; border-radius: 16px; padding: 10px 12px; margin-bottom: 8px; background: #0e1728; }
    #tw .form-section h4 { margin: 0 0 7px; color: #e3ebf7; font-size: 12px; text-transform: uppercase; }
    #tw .form-fields { display: grid; grid-template-columns: 1fr .7fr .7fr 1.4fr; gap: 8px; }
    #tw .form-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: #40aaff; font-size: 11px; font-weight: 800; }
    #tw .form-field input { width: 100%; height: 34px; padding: 6px 8px; background: #101a2c; border: 1px solid #25354d; border-radius: 9px; color: #f3f7fc; font: inherit; }
    #tw .form-field input:focus { outline: 2px solid #168ee0; }
    #tw .form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 10px; }
    #tw .price-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    #tw .price-fields .form-field { color: #d2dce9; font-size: 12px; }
    #tw .price-fields .cost-label { color: #ef777b; }
    #tw .price-fields .stock-label { color: #d2dce9; }
    #tw .store-price { margin-top: 9px; border: 1px solid #8759f1; color: #ad80ff; border-radius: 9px; padding: 8px; font-size: 11px; }
    #tw .night-panel { min-height: 175px; border: 1px solid #138bc8; border-radius: 16px; padding: 10px; background: #101a2a; }
    #tw .lower-form { display: grid; grid-template-columns: .9fr 1fr 265px; gap: 10px; padding: 0 14px; }
    #tw .lower-panel { min-height: 125px; border: 1px solid #138bc8; border-radius: 14px; padding: 10px; background: #0e1728; }
    #tw .lower-panel h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; }
    #tw .form-actions { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
    #tw .form-actions button { min-height: 39px; }
    #tw .saved-notice { display: none; color: #73e8a7; padding: 0 14px; font-size: 12px; }
    #tw .saved-notice.visible { display: block; }
    #tw .tw-hl { border: 3px solid #ffda58; border-radius: 9px; box-shadow: 0 0 0 200vmax rgba(0, 5, 12, .46), 0 0 22px #ffd857; }
    #tw .tw-ins { background: #0d1625; }
    #tw .tw-t { font-size: 15px; }
    #tw .sim-screen button,
    #tw .home-screen button,
    #tw .article-screen button { cursor: pointer; }
    @media (max-width: 560px) {
      #tw .inventory-table { min-width: 820px; }
      #tw .inventory-screen { overflow-x: auto; }
      margin-top: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    #tw [hidden] { display: none !important; }

    #tw .academy-catalog { padding: 22px; }
    #tw .academy-catalog-hero {
      min-height: 235px;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      align-items: center;
      gap: 20px;
      overflow: hidden;
      position: relative;
      padding: 26px 34px;
      border: 1px solid rgba(110, 202, 255, .3);
      border-radius: 18px;
      background: radial-gradient(ellipse at 84% 30%, rgba(24, 158, 202, .32), transparent 38%), linear-gradient(120deg, #102e4d, #0c233a 72%);
    }
    #tw .catalog-eyebrow,
    #tw .catalog-list-heading > div > span {
      color: #68dbe0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.4px;
    }
    #tw .catalog-hero-copy h3 { max-width: 490px; margin: 8px 0; color: #f4faff; font-size: clamp(23px, 4vw, 36px); line-height: 1.15; }
    #tw .catalog-hero-copy p { max-width: 440px; margin: 0; color: #b6cee3; font-size: 14px; }
    #tw .catalog-hero-art { min-height: 180px; display: grid; place-items: center; position: relative; }
    #tw .hero-art-window { width: min(100%, 330px); padding: 9px; border: 1px solid rgba(117, 203, 255, .56); border-radius: 10px; background: rgba(5, 17, 30, .86); box-shadow: 0 16px 38px rgba(0, 0, 0, .3); transform: perspective(700px) rotateY(-10deg) rotateX(3deg); }
    #tw .hero-art-toolbar { display: flex; gap: 4px; padding: 1px 0 7px; }
    #tw .hero-art-toolbar i { width: 6px; height: 6px; border-radius: 50%; background: #f27883; }
    #tw .hero-art-toolbar i:nth-child(2) { background: #f5c85e; }
    #tw .hero-art-toolbar i:nth-child(3) { background: #4ed7a2; }
    #tw .hero-art-menu { display: flex; justify-content: space-between; gap: 5px; padding: 9px; border-radius: 5px; background: #102d47; color: #7eacc9; font-size: 7px; }
    #tw .hero-art-menu b { color: #f0f8ff; font-size: 8px; }
    #tw .hero-art-content { display: flex; align-items: center; gap: 15px; min-height: 75px; padding: 12px; }
    #tw .hero-art-cart { display: grid; width: 54px; height: 48px; place-items: center; border: 1px solid rgba(80, 184, 241, .5); border-radius: 8px; background: #0e3552; font-size: 26px; }
    #tw .hero-art-lines { flex: 1; display: grid; gap: 8px; }
    #tw .hero-art-lines i { display: block; height: 5px; border-radius: 5px; background: #1d4867; }
    #tw .hero-art-lines i:first-child { width: 88%; background: #267ca4; }
    #tw .hero-art-lines i:last-child { width: 58%; }
    #tw .hero-art-spark { position: absolute; color: #61e0de; text-shadow: 0 0 15px #44c5eb; }
    #tw .spark-one { top: 16px; right: 19px; font-size: 25px; }
    #tw .spark-two { bottom: 9px; left: 5px; font-size: 20px; }
    #tw .catalog-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 27px 2px 13px; }
    #tw .catalog-list-heading h4 { margin: 2px 0 0; color: #f1f7ff; font-size: 19px; }
    #tw .catalog-count { padding: 6px 10px; border: 1px solid rgba(112, 171, 218, .28); border-radius: 99px; color: #a9c4df; font-size: 11px; }
    #tw .tutorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    #tw .tutorial-card {
      min-width: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0;
      border: 1px solid rgba(114, 165, 209, .25);
      border-radius: 13px;
      background: linear-gradient(155deg, #0e2942, #0a1d30);
      color: #ebf5ff;
      text-align: left;
    }
    #tw button.tutorial-card { transition: border-color .18s, transform .18s, box-shadow .18s; }
    #tw button.tutorial-card:hover { transform: translateY(-3px); border-color: #35addd; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
    #tw .tutorial-art { height: 126px; display: grid; place-items: center; position: relative; overflow: hidden; }
    #tw .product-art { background: radial-gradient(ellipse at 50% 120%, #246e9d 0, transparent 64%), linear-gradient(125deg, #153b5e, #172849); }
    #tw .sales-art { background: radial-gradient(ellipse at 70% 130%, #895339 0, transparent 62%), linear-gradient(125deg, #3a2d47, #182442); }
    #tw .stock-art { background: radial-gradient(ellipse at 50% 120%, #32755e 0, transparent 62%), linear-gradient(125deg, #143f4b, #172b3f); }
    #tw .client-art { background: radial-gradient(ellipse at 50% 120%, #6559a0 0, transparent 62%), linear-gradient(125deg, #292e5a, #152b46); }
    #tw .art-window { width: 145px; height: 76px; display: flex; align-items: center; gap: 7px; position: relative; padding: 18px 12px 9px; border: 1px solid rgba(162, 216, 255, .65); border-radius: 7px; background: rgba(6, 21, 36, .92); box-shadow: 0 9px 20px rgba(0, 0, 0, .3); }
    #tw .art-window i { position: absolute; top: 7px; left: 9px; width: 5px; height: 5px; border-radius: 50%; background: #54d6a5; }
    #tw .art-window i:nth-child(2) { left: 18px; background: #fac45f; }
    #tw .art-window i:nth-child(3) { left: 27px; background: #f17d85; }
    #tw .art-window b { color: #a6c7df; font-size: 9px; letter-spacing: .7px; }
    #tw .art-window > span { margin-left: auto; color: #57d7b1; font-size: 27px; font-weight: 700; }
    #tw .art-badge { position: absolute; top: 10px; right: 12px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(124, 216, 244, .45); border-radius: 50%; background: rgba(8, 31, 49, .7); color: #9aeaf1; font-size: 10px; font-weight: 800; }
    #tw .tutorial-card-body { display: flex; flex: 1; flex-direction: column; padding: 13px 15px 14px; }
    #tw .tutorial-label { color: #6bcbd9; font-size: 9px; font-weight: 800; letter-spacing: .9px; }
    #tw .tutorial-card-body > strong { margin-top: 5px; color: #f1f7ff; font-size: 15px; }
    #tw .tutorial-description { min-height: 38px; margin-top: 5px; color: #a7bed3; font-size: 11px; line-height: 1.5; }
    #tw .tutorial-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: #90a9c0; font-size: 10px; }
    #tw .tutorial-launch { color: #7ce6c1; font-size: 11px; font-weight: 800; }
    #tw .tutorial-launch b { padding-left: 4px; font-size: 15px; }
    #tw .art-receipt { display: grid; width: 58px; height: 72px; justify-items: center; align-content: start; gap: 7px; padding-top: 7px; border: 1px solid rgba(237, 191, 135, .65); border-radius: 5px; background: rgba(29, 27, 43, .9); color: #f3be75; font-size: 18px; transform: rotate(-7deg); box-shadow: 0 8px 19px rgba(0, 0, 0, .28); }
    #tw .art-receipt i { width: 34px; height: 3px; border-radius: 4px; background: #987b72; }
    #tw .art-coin { position: absolute; margin: 34px 0 0 69px; display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid #f0bc62; border-radius: 50%; background: #634c42; color: #ffdc83; font-weight: 800; }
    #tw .art-boxes { display: flex; align-items: end; gap: 5px; color: #a0ead0; font-size: 31px; text-shadow: 0 5px 14px rgba(0, 0, 0, .35); }
    #tw .art-boxes i:nth-child(2) { margin-bottom: 16px; color: #6cc9bc; }
    #tw .art-boxes i:nth-child(3) { color: #83a5ca; }
    #tw .art-plus { position: absolute; margin: -28px 0 0 77px; color: #a7f0c5; font-size: 23px; font-weight: 800; }
    #tw .art-person { color: #aca4ff; font-size: 45px; }
    #tw .art-person.second { margin: -20px 0 0 45px; color: #68d0dd; font-size: 34px; }
    #tw .art-card-icon { position: absolute; margin: 36px 0 0 55px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #5dcbba; color: #102b41; font-weight: 800; }
    #tw .coming-soon { color: #9ab0c6; font-size: 8px; font-weight: 800; letter-spacing: .5px; }
    #tw .tw-back-catalog { padding: 6px 10px; border: 1px solid rgba(130, 184, 225, .35); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #c7e0f4; font-size: 11px; font-weight: 700; }

    #tw .mobile-academy-notice {
      display: none;
      gap: 3px;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(103, 183, 229, .22);
      background: #102942;
      color: #bdd3e6;
      font-size: 11px;
    }
    #tw .mobile-academy-notice strong { color: #7de3db; font-size: 12px; }
    #tw .tw-stage {
      display: grid;
      grid-template-columns: minmax(185px, .62fr) minmax(0, 2.62fr);
      align-items: center;
      gap: 12px;
      min-height: 0;
      position: relative;
      overflow: hidden;
      padding: 10px 12px;
      touch-action: pan-x pan-y;
    }
    #tw .simulation-viewport {
      display: flex;
      min-width: 0;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      overflow: auto;
      overscroll-behavior: contain;
    }
    #tw .simulation-scroll-content { position: relative; }
    #tw .simulation-canvas { width: 1200px; transform-origin: top left; }
    #tw .app-shell { width: 1200px; }
    #tw .tw-hl { pointer-events: none; }
    #tw .stage-guidance {
      position: relative;
      z-index: 60;
      align-self: end;
      width: 100%;
      max-height: 100%;
      overflow: auto;
      border: 1px solid rgba(132, 185, 231, .48);
      border-radius: 12px;
      background: rgba(6, 17, 29, .84);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    #tw .simulation-tools {
      position: absolute;
      z-index: 61;
      top: 12px;
      right: 12px;
      border: 1px solid rgba(132, 185, 231, .36);
      border-radius: 12px;
      padding: 5px;
      background: rgba(6, 17, 29, .88);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    }
    #tw .toggle-maximize {
      min-height: 34px;
      padding: 6px 10px;
      border: 1px solid rgba(125, 178, 223, .42);
      border-radius: 8px;
      background: #142b40;
      color: #e8f5ff;
      font-size: 11px;
      font-weight: 700;
    }
    #tw .toggle-maximize:hover { background: #1b3a56; }
    #tw .stage-guidance .tw-ins {
      min-height: 0;
      padding: 11px 14px 5px;
      border: 0;
      background: transparent;
    }
    #tw .stage-guidance .tw-t { font-size: 14px; line-height: 1.35; }
    #tw .stage-guidance .tw-h { min-height: 0; }
    #tw .stage-guidance .tw-ft {
      gap: 7px;
      padding: 7px 10px 9px;
      border: 0;
      background: transparent;
      font-size: 11px;
    }
    #tw .stage-guidance .tw-ft label { font-size: 10px; }
    #tw .stage-guidance .tw-b { padding: 6px 9px; font-size: 11px; }

    @media (max-width: 720px) {
      #tw .academy-catalog { padding: 14px; }
      #tw .academy-catalog-hero { grid-template-columns: 1fr; gap: 0; padding: 22px; }
      #tw .catalog-hero-art { min-height: 135px; }
      #tw .hero-art-window { width: min(100%, 290px); }
      #tw .tutorial-grid { gap: 10px; }
      #tw .mobile-academy-notice { display: flex; flex-direction: column; }
      #tw .tw-top { gap: 8px; }
      #tw .tw-top b { flex: 1 1 100%; }
    }
    @media (max-width: 500px) {
      #tw .academy-catalog { padding: 10px; }
      #tw .academy-catalog-hero { padding: 18px; }
      #tw .catalog-list-heading { align-items: flex-start; flex-direction: column; }
      #tw .tutorial-grid { grid-template-columns: 1fr; }
      #tw .tutorial-art { height: 112px; }
      #tw .tw-back-catalog { order: 5; }
    }

    body.academy-tutorial-active { overflow: hidden; }
    body.academy-tutorial-active .site-footer { display: none; }
    body.academy-tutorial-active .academia-main {
      display: flex;
      width: min(1400px, 96%);
      height: calc(100vh - var(--academy-site-header-height, 74px));
      height: calc(100dvh - var(--academy-site-header-height, 74px));
      min-height: 0;
      flex-direction: column;
      padding: 8px 0;
    }
    body.academy-tutorial-active .academia-main .page-heading { display: none; }
    body.academy-tutorial-active #tw {
      display: flex;
      width: 100%;
      max-width: none;
      min-height: 0;
      flex: 1 1 0;
      flex-direction: column;
      margin: 0 auto;
    }
    #tw .tutorial-workspace {
      display: flex;
      min-height: 0;
      flex: 1 1 0;
      flex-direction: column;
    }
    #tw .tutorial-workspace[hidden] { display: none !important; }
    #tw .tw-top,
    #tw .tw-bar,
    #tw .mobile-academy-notice { flex: 0 0 auto; }
    #tw .tw-wrap { display: flex; min-height: 0; flex: 1 1 0; }
    #tw .tw-stage { width: 100%; flex: 1 1 0; }

    @media (min-width: 821px) {
      #tw .tutorial-workspace > .tw-top,
      #tw .tutorial-workspace > .tw-bar { display: none; }
      #tw .stage-guidance {
        display: flex;
        align-self: stretch;
        flex-direction: column;
        justify-content: space-between;
      }
      #tw .stage-guidance { max-width: 340px; }
      #tw .stage-guidance-heading { display: grid; gap: 8px; padding: 12px; }
      #tw .stage-guidance-heading > strong { color: #edf7ff; font-size: 13px; line-height: 1.3; }
      #tw .stage-guidance-heading .tw-chip { width: fit-content; white-space: normal; text-align: left; }
      #tw .stage-guidance-heading .tw-back-catalog { justify-self: start; max-width: 100%; white-space: normal; }
      #tw .stage-progress { flex: 0 0 5px; }
      #tw .stage-guidance .tw-ins { margin-top: auto; }
    }

    @media (max-width: 820px) {
      #tw .stage-guidance-heading,
      #tw .stage-progress { display: none; }
      #tw .tw-stage { display: block; padding: 0; }
      #tw .simulation-viewport { position: absolute; inset: 0; }
      #tw .stage-guidance {
        position: absolute;
        z-index: 60;
        left: 7px;
        bottom: 7px;
        width: min(420px, calc(100% - 14px));
        max-height: 48%;
      }
      #tw .simulation-tools {
        position: absolute;
        z-index: 61;
        top: 7px;
        right: 7px;
      }
    }
    @media (max-width: 600px) {
      #tw .stage-guidance { left: 7px; bottom: 7px; width: calc(100% - 14px); max-height: 48%; }
      #tw .stage-guidance .tw-ins { padding: 8px 10px 3px; }
      #tw .stage-guidance .tw-t { font-size: 12px; }
      #tw .stage-guidance .tw-ft { gap: 5px; padding: 5px 7px 7px; }
      #tw .stage-guidance .tw-ft label { flex: 1 1 100%; }
      #tw .stage-guidance .tw-b { padding: 5px 7px; }
    }
    #tw .tutorial-workspace:fullscreen,
    #tw .tutorial-workspace.is-maximized {
      position: fixed;
      z-index: 2000;
      inset: 0;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-width: none;
      min-height: 0;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: #071823;
      display: flex;
      flex-direction: column;
    }
    #tw .tutorial-workspace:fullscreen .tw-wrap,
    #tw .tutorial-workspace.is-maximized .tw-wrap { min-height: 0; }