.craftytalks-studio-root * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    #craftytalks-studio-box {
      background: #ffffff;
      border: 3.5px solid #0f172a;
      border-radius: 24px;
      box-shadow: 6px 8px 0 #0f172a;
      overflow: hidden;
      margin: 24px 0 32px 0;
      font-family: 'Fredoka', 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
      position: relative;
    }

    /* Top Bar */
    .cts-topbar {
      background: #0f172a;
      color: #ffffff;
      padding: 12px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      border-bottom: 3px solid #0f172a;
    }
    .cts-badge {
      background: #10e57a;
      color: #052e16;
      font-weight: 800;
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: 1.5px solid #052e16;
    }

    /* Neon Green Button Style */
    .cts-btn-neon {
      background: #10e57a;
      color: #052e16;
      font-weight: 800;
      font-size: 13px;
      border: 2px solid #052e16;
      border-radius: 12px;
      padding: 7px 14px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 2px 2.5px 0 #052e16;
      transition: all 0.12s ease;
      font-family: 'Fredoka', sans-serif;
      text-decoration: none;
    }
    .cts-btn-neon:hover:not(:disabled) {
      transform: translate(-1px, -1px);
      box-shadow: 3px 4px 0 #052e16;
      background: #22f88a;
      color: #052e16;
    }
    .cts-btn-neon:active:not(:disabled) {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0 #052e16;
    }
    .cts-btn-neon:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* Secondary Topbar Button (Animal Switcher) */
    .cts-btn-secondary {
      background: #334155;
      color: #f8fafc;
      font-weight: 700;
      font-size: 12.5px;
      border: 2px solid #475569;
      border-radius: 12px;
      padding: 7px 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      font-family: 'Fredoka', sans-serif;
    }
    .cts-btn-secondary:hover {
      background: #475569;
      color: #ffffff;
      border-color: #10e57a;
      transform: translate(-1px, -1px);
    }

    .cts-btn-ghost-toggle {
      background: #1e293b;
      color: #e2e8f0;
      font-weight: 700;
      font-size: 12px;
      border: 2px solid #334155;
      border-radius: 12px;
      padding: 7px 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.15s ease;
      font-family: 'Fredoka', sans-serif;
    }
    .cts-btn-ghost-toggle.active {
      background: #052e16;
      border-color: #10e57a;
      color: #10e57a;
      box-shadow: 0 0 12px rgba(16, 229, 122, 0.4);
    }

    /* Main Workspace Layout */
    .cts-workspace {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      transition: all 0.3s ease;
    }

    /* Step Reference Section (Left on Desktop) */
    .cts-step-section {
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #fafaf9;
      border-right: 2px solid #f1f5f9;
      transition: all 0.25s ease;
    }

    .cts-step-pill {
      background: #10e57a;
      color: #052e16;
      font-weight: 800;
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1.5px solid #052e16;
      display: inline-block;
    }

    /* Step Dots Indicator */
    .cts-step-dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .cts-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: 1.5px solid #0f172a;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .cts-dot.active {
      background: #10e57a;
      transform: scale(1.25);
      box-shadow: 0 0 0 2px #052e16;
    }

    .cts-ref-stage {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 250px;
      margin: 14px 0;
      position: relative;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);
      cursor: zoom-in;
    }

    .cts-ref-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background: #0f172a;
      color: #ffffff;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      pointer-events: none;
    }

    .cts-step-title {
      margin: 0 0 8px 0;
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      font-family: 'Fredoka', sans-serif;
    }

    .cts-step-desc {
      margin: 0 0 12px 0;
      font-size: 14px;
      line-height: 1.6;
      color: #475569;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
    }

    .cts-step-tipbox {
      background: #ecfdf5;
      border: 2px solid #a7f3d0;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 13px;
      color: #065f46;
      margin-bottom: 16px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
    }

    .cts-step-nav {
      display: flex;
      gap: 10px;
      border-top: 2px solid #e2e8f0;
      padding-top: 14px;
    }

    /* Drawing Deck (Right on Desktop) */
    .cts-drawing-deck {
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #ffffff;
    }

    /* Clean Segmented Dock for Tools */
    .cts-dock-container {
      margin-bottom: 10px;
      position: relative;
    }
    .cts-dock {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 6px 8px;
      flex-wrap: wrap;
    }
    .cts-dock-group {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .cts-tool-btn {
      padding: 6px 11px;
      font-size: 12.5px;
      font-weight: 700;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      background: #ffffff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
      font-family: 'Fredoka', sans-serif;
      color: #334155;
    }
    .cts-tool-btn:hover:not(:disabled) {
      border-color: #10e57a;
      color: #052e16;
    }
    .cts-tool-btn.active {
      background: #10e57a;
      color: #052e16;
      border-color: #052e16;
      box-shadow: 2px 2px 0 #052e16;
    }
    .cts-tool-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Shapes Dropdown Sheet / Popover */
    #cts-shapes-menu {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 110px;
      background: #ffffff;
      border: 2.5px solid #0f172a;
      border-radius: 14px;
      box-shadow: 4px 6px 0 #0f172a;
      padding: 6px;
      gap: 4px;
      z-index: 100;
    }
    #cts-shapes-menu.open {
      display: flex;
    }
    .cts-shape-opt {
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: 'Fredoka', sans-serif;
      color: #334155;
      transition: all 0.12s ease;
    }
    .cts-shape-opt:hover {
      background: #ecfdf5;
      border-color: #10e57a;
      color: #065f46;
    }
    .cts-shape-opt.active {
      background: #10e57a;
      color: #052e16;
      border-color: #052e16;
    }

    .cts-tool-divider {
      width: 1px;
      height: 22px;
      background: #cbd5e1;
      margin: 0 2px;
    }

    /* Color Swatches & Slider */
    .cts-palette-row {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 6px 10px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .cts-color-swatch {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      box-shadow: 0 0 0 2px #cbd5e1;
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    .cts-color-swatch:hover {
      transform: scale(1.15);
    }
    .cts-color-swatch.active {
      transform: scale(1.25);
      box-shadow: 0 0 0 2.5px #052e16;
    }

    /* Canvas Frame */
    .cts-canvas-box {
      position: relative;
      background: #ffffff;
      border: 3px dashed #94a3b8;
      border-radius: 18px;
      height: 330px;
      overflow: hidden;
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);
      transition: height 0.3s ease;
    }

    #cts-main-canvas {
      touch-action: none;
      cursor: crosshair;
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
      z-index: 2;
    }

    #cts-full-trace-img {
      position: absolute;
      inset: 0;
      margin: auto;
      max-height: 300px;
      max-width: 92%;
      object-fit: contain;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      z-index: 1;
    }

    .cts-watermark {
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      pointer-events: none;
      z-index: 3;
      font-family: 'Fredoka', sans-serif;
    }

    /* Modals / Lightboxes */
    #cts-export-modal, #cts-zoom-modal, #cts-switcher-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(5px);
      z-index: 999999;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .cts-modal-card {
      background: #ffffff;
      border: 3px solid #0f172a;
      border-radius: 24px;
      box-shadow: 8px 10px 0 #0f172a;
      max-width: 520px;
      width: 100%;
      padding: 26px;
      position: relative;
      text-align: center;
      font-family: 'Fredoka', sans-serif;
    }
    .cts-modal-close {
      position: absolute;
      top: 14px;
      right: 16px;
      background: none;
      border: none;
      font-size: 22px;
      font-weight: 800;
      cursor: pointer;
      color: #94a3b8;
      transition: color 0.15s ease;
    }
    .cts-modal-close:hover {
      color: #0f172a;
    }

    /* Animal Switcher Cards */
    .cts-switcher-card {
      max-width: 560px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      text-align: left;
      padding: 24px;
    }
    .cts-switcher-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      margin: 14px 0 10px 0;
      padding-right: 4px;
    }
    .cts-animal-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      background: #f8fafc;
      text-decoration: none;
      color: inherit;
      transition: all 0.15s ease;
      cursor: pointer;
    }
    .cts-animal-item:hover {
      border-color: #10e57a;
      background: #f0fdf4;
      transform: translateX(3px);
    }
    .cts-animal-item.current {
      border-color: #10e57a;
      background: #ecfdf5;
      pointer-events: none;
      opacity: 0.85;
    }
    .cts-animal-icon {
      font-size: 28px;
      line-height: 1;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border-radius: 12px;
      border: 1.5px solid #e2e8f0;
      flex-shrink: 0;
    }
    .cts-animal-info {
      flex: 1;
      min-width: 0;
    }
    .cts-animal-title {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 2px 0;
    }
    .cts-animal-sub {
      font-size: 12px;
      color: #64748b;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cts-tip-btn-mobile {
      display: none;
    }

    /* Floating PIP Step Guide (Active during Mobile Focus Mode) */
    .cts-pip-guide {
      display: none;
      position: absolute;
      top: 10px;
      right: 10px;
      background: #ffffff;
      border: 2px solid #0f172a;
      border-radius: 12px;
      box-shadow: 2px 3px 0 #0f172a;
      padding: 4px;
      z-index: 10;
      width: 75px;
      height: 75px;
      cursor: pointer;
    }
    .cts-pip-guide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* ==========================================================================
       MOBILE RESPONSIVE LAYOUT (<= 768px):
       Clean, Non-overflowing, Step & Canvas on same screen
       ========================================================================== */
    @media (max-width: 768px) {
      #craftytalks-studio-box {
        border-radius: 18px;
        border-width: 2.5px;
        box-shadow: 4px 6px 0 #0f172a;
        margin: 16px 0 24px 0;
      }
      .cts-topbar {
        padding: 8px 12px;
        gap: 6px;
      }
      .cts-topbar strong {
        font-size: 13.5px !important;
      }
      .cts-topbar .cts-btn-ghost-toggle {
        display: none; /* Moved into dock on mobile */
      }
      .cts-btn-neon {
        font-size: 11.5px;
        padding: 5px 10px;
      }
      .cts-btn-secondary {
        font-size: 11px;
        padding: 5px 8px;
      }

      .cts-workspace {
        display: flex;
        flex-direction: column;
      }

      /* Compact Step Reference on Mobile (Side-by-side, max ~100px height) */
      .cts-step-section {
        padding: 10px 12px;
        background: #f8fafc;
        border-right: none;
        border-bottom: 2px solid #e2e8f0;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
      }

      /* When Focus / Expanded Canvas Mode is ON */
      .cts-workspace.focus-mode .cts-step-section {
        display: none; /* Hidden to give 100% space to drawing canvas */
      }
      .cts-workspace.focus-mode .cts-canvas-box {
        height: 380px !important;
      }
      .cts-workspace.focus-mode .cts-pip-guide {
        display: block; /* Show floating PIP reference guide */
      }

      .cts-ref-stage {
        width: 88px;
        height: 88px;
        min-width: 88px;
        margin: 0;
        padding: 4px;
        border-radius: 12px;
        border: 2px solid #cbd5e1;
        background: #ffffff;
        box-shadow: 2px 2px 0 #cbd5e1;
        flex-shrink: 0;
        cursor: pointer;
      }
      .cts-ref-stage img {
        max-height: 78px !important;
        max-width: 100% !important;
      }
      .cts-ref-tag {
        display: none;
      }

      .cts-step-details {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .cts-step-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2px;
      }

      .cts-step-pill {
        font-size: 10px;
        padding: 2px 7px;
        border-width: 1px;
      }

      .cts-step-dots {
        gap: 4px;
      }
      .cts-dot {
        width: 7px;
        height: 7px;
      }

      .cts-tip-btn-mobile {
        display: inline-flex;
        align-items: center;
        background: #ecfdf5;
        border: 1px solid #10e57a;
        color: #065f46;
        font-size: 10px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 6px;
        cursor: pointer;
        font-family: 'Fredoka', sans-serif;
      }

      .cts-step-title {
        font-size: 13px;
        font-weight: 800;
        margin: 0 0 2px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .cts-step-desc {
        font-size: 11px;
        line-height: 1.35;
        margin: 0 0 4px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #475569;
      }

      .cts-step-tipbox {
        display: none;
        margin: 0 0 4px 0;
        padding: 4px 8px;
        font-size: 10.5px;
        line-height: 1.35;
      }
      .cts-step-tipbox.show-mobile {
        display: block;
      }

      .cts-step-nav {
        display: flex;
        gap: 6px;
        border-top: none;
        padding-top: 0;
      }
      .cts-step-nav button {
        padding: 3px 6px;
        font-size: 11px;
        border-radius: 8px;
        flex: 1;
        justify-content: center;
        white-space: nowrap;
      }

      /* Drawing Deck on Mobile */
      .cts-drawing-deck {
        padding: 8px 10px 10px 10px;
      }

      /* Tool Dock on Mobile */
      .cts-dock {
        padding: 4px 6px;
        gap: 3px;
      }
      .cts-tool-btn {
        padding: 4px 6px;
        font-size: 11px;
        border-radius: 8px;
      }
      #cts-shapes-menu {
        left: 60px;
      }

      .cts-palette-row {
        padding: 4px 6px;
        margin-bottom: 6px;
      }
      .cts-color-swatch {
        width: 17px;
        height: 17px;
      }
      #cts-brush-slider {
        width: 45px !important;
      }

      /* Canvas fits comfortably without scrolling */
      .cts-canvas-box {
        height: 260px;
        border-radius: 14px;
      }
      #cts-full-trace-img {
        max-height: 240px;
      }
      .cts-deck-footer {
        display: none;
      }
    }