/* OPENROUTER & AI VOICE STORY GENERATOR DRAWER */
    .ai-story-drawer {
      position: fixed;
      bottom: clamp(60px, 8dvh, 72px);
      left: 72px;
      right: clamp(288px, 23vw, 356px);
      background: rgba(14, 16, 11, 0.98);
      backdrop-filter: blur(14px);
      border: 1px solid var(--orange);
      border-bottom: 0;
      padding: 10px 14px;
      z-index: 36;
      display: none;
      flex-direction: column;
      gap: 7px;
      box-shadow: 0 -8px 24px rgba(0,0,0,0.85);
      animation: slide-up 0.15s ease-out;
    }
    .ai-story-drawer.open {
      display: flex;
    }
    .story-drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--line-subtle);
      padding-bottom: 5px;
    }
    .story-drawer-title {
      font: 900 11px var(--font-mono);
      color: var(--orange);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .story-chips-row {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .story-chip {
      font: 700 8px var(--font-mono);
      background: var(--bg-surface-3);
      border: 1px solid var(--line-subtle);
      color: var(--text-muted);
      padding: 2px 6px;
      cursor: pointer;
      transition: all 0.1s ease;
    }
    .story-chip:hover {
      color: #fff;
      border-color: var(--orange);
    }
    .story-prompt-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .story-prompt-input {
      flex: 1;
      background: var(--bg-surface-2);
      border: 1px solid var(--line-bright);
      color: #fff;
      font: 600 10px var(--font-mono);
      padding: 5px 8px;
      outline: none;
    }
    .story-prompt-input:focus {
      border-color: var(--orange);
      box-shadow: 0 0 8px rgba(255, 120, 72, 0.35);
    }
    .story-bottom-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: stretch;
    }
    .story-output-box {
      background: #080907;
      border: 1px solid var(--line-subtle);
      padding: 6px 10px;
      font: 600 9px var(--font-mono);
      color: var(--acid);
      max-height: 60px;
      overflow-y: auto;
      line-height: 1.4;
      border-radius: 2px;
    }
    .story-controls-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 4px;
      background: var(--bg-surface-2);
      border: 1px solid var(--line-subtle);
      padding: 5px 8px;
    }
    .story-toggle-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font: 800 8px var(--font-mono);
      color: var(--text-main);
      cursor: pointer;
    }
    .story-voice-style-group {
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .story-voice-btn {
      font: 800 7px var(--font-mono);
      background: var(--bg-surface-3);
      border: 1px solid var(--line-subtle);
      color: var(--text-muted);
      padding: 2px 5px;
      cursor: pointer;
    }
    .story-voice-btn.active {
      background: var(--orange);
      color: #000;
      font-weight: 900;
      border-color: var(--orange);
    }

    /* HARDWARE CHEAT-SHEET MODAL */
    .hw-cheat-modal {
      position: fixed;
      inset: 0;
      background: rgba(4, 5, 3, 0.94);
      backdrop-filter: blur(8px);
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .hw-cheat-card {
      width: min(900px, 94vw);
      max-height: 88vh;
      background: var(--bg-surface-1);
      border: 2px solid var(--acid);
      display: flex;
      flex-direction: column;
      padding: 16px;
      gap: 12px;
      overflow-y: auto;
    }
    .hw-cheat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--line-subtle);
      padding-bottom: 8px;
    }
    .hw-cheat-sec {
      background: var(--bg-deep);
      border: 1px solid var(--line-subtle);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .hw-sec-title {
      font: 900 11px var(--font-mono);
      letter-spacing: 1px;
    }
    .hw-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      font: 500 10px var(--font-mono);
      line-height: 1.5;
      color: var(--text-muted);
    }

    /* START / UNLOCK OVERLAY */
    .start-overlay {
      position: fixed;
      inset: 0;
      background: rgba(7, 8, 6, 0.98);
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      z-index: 9999;
    }

    /* TECHNO CANON 100 MODAL */
    .canon-modal {
      position: fixed;
      inset: 20px;
      max-width: 1200px;
      max-height: 85vh;
      margin: auto;
      background: var(--bg-surface-1);
      border: 1px solid var(--orange);
      box-shadow: 0 0 35px rgba(255, 120, 72, 0.35);
      z-index: 10000;
      display: flex;
      flex-direction: column;
      padding: 20px;
    }
    .canon-track-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      border-bottom: 1px solid var(--line-subtle);
      font: 400 11px var(--font-mono);
      color: var(--text-main);
      transition: background 0.1s;
    }
    .canon-track-row:hover {
      background: var(--bg-surface-2);
    }