.shell {
      width: min(var(--page-width), calc(100% - var(--page-gutter)));
      min-height: 820px;
      margin: auto; border: 1px solid var(--line); border-radius: 24px;
      background: rgba(14, 21, 23, .72); overflow: hidden;
    }

    .eyebrow { margin: 0 0 12px; color: #687064; font: 500 var(--type-label) var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

    .workspace { min-width: 0; padding: 34px clamp(24px, 5vw, 72px) 56px; }
    .topbar { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: clamp(38px, 7vh, 80px); }
    h1 { margin: 0; font-size: var(--type-program-title); letter-spacing: -.04em; }
    .button {
      gap: 9px;
      font-weight: 700;
    }
    .button:disabled { pointer-events: none; }
    .button.icon-action { width: 44px; min-width: 44px; padding: 0; }
    .button.icon-action svg { width: 18px; height: 18px; }
    .editor { width: min(100%, 1030px); margin: auto; }

    .board-shell {
      overflow: hidden;
      padding: clamp(20px, 3.7vw, 48px);
      box-shadow: 0 35px 80px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08);
    }
    .led { cursor: crosshair; }
    .led:hover { z-index: 2; }

    .control-title { font-size: var(--type-body-large); font-weight: 700; line-height: 1.2; }
    .editor-status {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    select, .design-name-field input, .duration-field input { height: 42px; border: 1px solid #2A3442; border-radius: 9px; background: #0c1417; color: var(--ink); font: var(--type-button) var(--font-mono); }
    select:focus, .design-name-field input:focus, .duration-field input:focus { outline: 2px solid rgba(52,211,153,.32); outline-offset: 1px; }
    select { min-width: 270px; padding: 0 38px 0 12px; }
    .design-frame-controls { min-width: 230px; flex: 1 1 420px; display: grid; gap: 8px; }
    .design-name-field { display: grid; gap: 5px; color: var(--muted); font: var(--type-label) var(--font-mono); text-transform: uppercase; }
    .design-name-field input { width: 100%; padding: 0 12px; text-transform: none; }
    .animation-editor { margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(19, 26, 34, .82); }
    .animation-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .animation-header h2 { margin: 0; }
    .timeline-title-button { min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-family: inherit; text-align: left; }
    .timeline-title-button:hover { color: var(--lime); }
    .timeline-title-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 3px; }
    .animation-header .eyebrow { margin-bottom: 5px; }
    .animation-header-actions { display: flex; flex: 0 0 auto; gap: 8px; }
    .timeline-toggle[aria-expanded="false"] { border-color: var(--lime); background: rgba(52,211,153,.12); color: var(--lime); box-shadow: 0 0 0 1px rgba(52,211,153,.12); }
    .timeline-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
    .animation-timeline-body[hidden] { display: none; }
    .animation-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
    .duration-field { display: grid; gap: 5px; color: var(--muted); font: var(--type-label) var(--font-mono); text-transform: uppercase; }
    .duration-field input { width: 90px; padding: 0 9px; }
    .frame-edit-actions, .preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .frame-action-button { padding: 0 12px; gap: 7px; white-space: nowrap; }
    .preview-actions { flex: 1 1 160px; justify-content: center; padding-top: 17px; }
    .frame-list { display: flex; gap: 8px; margin-top: 14px; padding: 3px 0 4px; overflow-x: auto; }
    .frame-tab { min-width: 76px; min-height: 52px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: #0c1417; color: var(--muted); cursor: pointer; text-align: left; }
    .frame-tab strong, .frame-tab span { display: block; }
    .frame-tab strong { color: var(--ink); font: 600 var(--type-button) var(--font-mono); }
    .frame-tab span { margin-top: 3px; font: var(--type-label) var(--font-mono); }
    .frame-tab[aria-pressed="true"] { border-color: var(--lime); background: rgba(52,211,153,.1); box-shadow: inset 0 0 0 1px rgba(52,211,153,.15); }

    details { padding: 20px 0; border-bottom: 1px solid var(--line); }
    summary { cursor: pointer; font-weight: 700; font-size: var(--type-card-title); }
    details p { color: var(--muted); font-size: var(--type-body); line-height: 1.7; }
    details a { color: var(--lime); }
    @media (max-width: 800px) {
      .shell { display: block; width: calc(100% - 20px); }
      .workspace { padding: 24px 14px 30px; }
      .topbar { align-items: flex-end; margin-bottom: 34px; }
      .board-shell { padding: 28px 14px; border-radius: 16px; }
      .animation-toolbar { align-items: stretch; }
      .design-frame-controls, .design-name-field { width: 100%; }
      .duration-field { width: 100%; margin-left: 0; }
      .duration-field input { min-width: 120px; }
      .preview-actions { width: 100%; margin-left: 0; padding-top: 0; }
      .preview-actions .button.primary { width: 100%; }
      select { width: 100%; min-width: 0; }
    }