* {
        box-sizing: border-box;
      }

      body {
        margin: 0;

        min-height: 100vh;

        display: flex;

        font-family:
          "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

        color: #cccccc;

        background: #1e1e1e;
      }

      .preview-sidebar {
        width: 300px;

        padding: 16px;

        border-right: 1px solid rgba(80, 80, 80, 0.3);

        background: rgba(37, 37, 38, 0.95);

        backdrop-filter: blur(16px);

        display: flex;

        flex-direction: column;
        gap: 10px;
      }

      .preview-sidebar h1 {
        font-size: 18px;

        margin: 0;

        font-weight: 600;
      }

      .preview-sidebar section {
        display: flex;

        flex-direction: column;

        gap: 6px;
      }

      .section-header {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;
      }

      .usage-btn {
        width: auto;

        padding-inline: 10px;

        font-size: 11px;
      }

      .selector-row {
        display: grid;

        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);

        align-items: left;

        gap: 6px 10px;
      }

      .preview-sidebar label {
        font-size: 11px;

        letter-spacing: 0.35px;

        text-transform: uppercase;

        color: rgba(226, 232, 240, 0.64);
      }

      .info-table {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 6px 10px;

        font-size: 12px;
      }

      .info-table div {
        padding: 4px 6px;

        background: rgba(148, 163, 184, 0.08);

        border-radius: 6px;
      }

      .info-table div span {
        display: block;

        font-size: 10px;

        text-transform: uppercase;

        letter-spacing: 0.3px;

        color: rgba(226, 232, 240, 0.48);

        margin-bottom: 3px;
      }

      .info-table div strong {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .info-table .warning {
        color: #f87171;
      }

      select option.invalid-animation-option {
        color: #f87171;
      }

      .preview-sidebar label.warning {
        color: #f87171;
      }

      select,
      input[type="range"],
      input[type="number"],
      button {
        width: 100%;

        font-size: 12px;

        font-family: inherit;

        border-radius: 6px;

        border: 1px solid rgba(80, 80, 80, 0.4);

        background: rgba(37, 37, 38, 0.64);

        color: inherit;

        padding: 6px 8px;

        outline: none;

        transition:
          border-color 0.2s ease,
          background 0.2s ease;
      }

      select:focus,
      input[type="range"]:focus,
      input[type="number"]:focus,
      button:focus {
        border-color: rgba(96, 165, 250, 0.8);

        background: rgba(30, 41, 59, 0.9);
      }

      button {
        cursor: pointer;

        font-weight: 500;
      }

      .control-grid {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
      }

      .control-grid label {
        grid-column: 1 / -1;
      }

      .range-wrapper {
        display: flex;

        align-items: center;

        gap: 6px;
      }

      .range-wrapper input[type="number"] {
        width: 60px;

        padding: 6px;
      }

      .background-section {
        display: flex;

        flex-direction: column;

        gap: 6px;
      }

      .toggle-row {
        grid-column: 1 / -1;
      }

      .toggle-row label {
        display: flex;

        align-items: center;

        gap: 8px;

        margin: 0;

        font-size: 13px;

        letter-spacing: 0.2px;

        text-transform: none;

        color: #cccccc;

        cursor: pointer;
      }

      .toggle-row input[type="checkbox"] {
        width: auto;

        height: 16px;

        cursor: pointer;
      }

      .scale-section {
        display: flex;

        flex-direction: column;

        gap: 6px;
      }

      .scale-row {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;
      }

      .scale-display {
        font-size: 19px;

        font-weight: 600;

        letter-spacing: 0.5px;

        color: #cccccc;
      }

      .scale-actions {
        display: flex;

        gap: 6px;
      }

      .scale-actions button {
        flex: 1;
      }

      .multi-track-section,
      .debug-section {
        display: flex;

        flex-direction: column;

        gap: 8px;
      }

      .multi-track-grid,
      .export-settings {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px 12px;
      }

      .multi-track-grid label,
      .export-settings label {
        font-size: 11px;

        text-transform: uppercase;

        letter-spacing: 0.2px;

        color: rgba(226, 232, 240, 0.6);
      }

      .multi-track-actions {
        display: flex;

        gap: 8px;
      }

      .multi-track-actions button {
        flex: 1;
      }

      .track-status-list {
        max-height: 140px;

        overflow-y: auto;

        border: 1px solid rgba(80, 80, 80, 0.3);

        border-radius: 6px;

        padding: 8px;

        font-size: 12px;

        background: rgba(37, 37, 38, 0.5);
      }

      .track-status-list div {
        padding: 4px 0;

        border-bottom: 1px solid rgba(80, 80, 80, 0.3);
      }

      .track-status-list div:last-child {
        border-bottom: none;
      }

      .debug-actions {
        display: flex;

        gap: 8px;
      }

      .debug-actions button {
        flex: 1;

        padding-inline: 12px;
      }

      .debug-panels {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;
      }

      .log-panel {
        display: flex;

        flex-direction: column;

        gap: 4px;
      }

      .log-panel span {
        font-size: 11px;

        text-transform: uppercase;

        letter-spacing: 0.2px;

        color: rgba(226, 232, 240, 0.6);
      }

      .log-area {
        min-height: 120px;

        max-height: 200px;

        overflow-y: auto;

        border: 1px solid rgba(80, 80, 80, 0.3);

        border-radius: 6px;

        padding: 8px;

        font-size: 12px;

        background: rgba(37, 37, 38, 0.5);

        line-height: 1.4;
      }

      .log-area p {
        margin: 0 0 4px 0;
      }

      .debug-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .debug-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 10px;
        border: 1px solid rgba(80, 80, 80, 0.3);
        border-radius: 8px;
        background: rgba(37, 37, 38, 0.6);
        font-size: 13px;
        color: #cccccc;
      }

      .debug-toggle input[type="checkbox"] {
        width: auto;
        height: 16px;
      }

      .export-settings {
        margin-top: 8px;

        padding: 8px 12px;

        border: 1px solid rgba(80, 80, 80, 0.3);

        border-radius: 8px;

        background: rgba(37, 37, 38, 0.5);
      }

      .bounds-overlay {
        position: absolute;

        border: 1px dashed rgba(94, 234, 212, 0.9);

        box-shadow: 0 0 12px rgba(94, 234, 212, 0.4);

        pointer-events: none;

        z-index: 3;
      }

      .canvas-toolbar {
        position: absolute;
        top: 8px;
        left: 8px;
        display: flex;
        gap: 6px;
        z-index: 5;
      }

      .canvas-toolbar button {
        width: auto;
        padding: 4px 10px;
        font-size: 12px;
        background: rgba(37, 37, 38, 0.8);
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 6px;
        color: #cccccc;
        cursor: pointer;
      }

      .canvas-toolbar button:hover {
        background: rgba(30, 41, 59, 0.9);
      }

      .grid-preview {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 8px;
        padding: 40px 8px 8px;
        overflow-y: auto;
        background: transparent;
        z-index: 4;
        pointer-events: none;
      }

      .grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 2px 6px 6px;
        border-radius: 8px;
        background: rgba(37, 37, 38, 0.55);
        border: 1px solid rgba(80, 80, 80, 0.3);
        cursor: pointer;
        transition: border-color 0.2s ease;
        pointer-events: auto;
      }

      .grid-item:hover {
        border-color: rgba(96, 165, 250, 0.6);
      }

      .grid-canvas-placeholder {
        width: 100%;
        height: 160px;
        border-radius: 4px;
        background: transparent;
      }

      .grid-item-label {
        font-size: 13px;
        color: rgba(226, 232, 240, 0.8);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }

      .preview-main {
        flex: 1;

        position: relative;

        display: flex;

        flex-direction: column;

        min-height: 0;

        overflow: hidden;
      }

      .canvas-shell {
        position: relative;

        flex: 1;

        background: #1e1e1e;

        overflow: hidden;
      }

      canvas {
        width: 100%;

        height: 100%;

        display: block;
      }

      .drop-overlay {
        position: absolute;

        inset: 0;

        border: 2px dashed rgba(148, 163, 184, 0.5);

        background: rgba(30, 30, 30, 0.85);

        color: rgba(200, 200, 200, 0.92);

        font-size: 18px;

        letter-spacing: 0.8px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        padding: 32px;

        pointer-events: none;

        opacity: 0;

        transition: opacity 0.25s ease;

        z-index: 5;
      }

      .drop-overlay.visible {
        opacity: 1;
      }

      .anchor-marker {
        position: absolute;

        width: 10px;

        height: 10px;

        background: #ff004d;

        border: 2px solid rgba(255, 255, 255, 0.8);

        border-radius: 50%;

        transform: translate(-50%, -50%);

        pointer-events: none;

        box-shadow: 0 0 6px rgba(255, 0, 77, 0.65);

        z-index: 4;
      }

      .timeline-shell {
        padding: 12px 32px;

        display: flex;

        flex-direction: column;

        gap: 6px;

        background: #252526;

        flex-shrink: 0;

        border-top: 1px solid rgba(80, 80, 80, 0.3);
      }

      .timeline-info {
        display: flex;

        justify-content: space-between;

        font-size: 12px;

        color: rgba(226, 232, 240, 0.7);

        letter-spacing: 0.4px;
      }

      .timeline-control {
        display: flex;

        align-items: center;

        gap: 12px;
      }

      .timeline-control button {
        width: auto;

        padding-inline: 16px;

        background: #3c3c3c;

        border: 1px solid #555;

        color: #cccccc;

        flex-shrink: 0;
      }

      .timeline-range-wrapper {
        position: relative;

        flex: 1;

        height: 10px;

        border-radius: 5px;

        background: #888888;

        overflow: hidden;
      }

      .range-fill {
        position: absolute;

        left: 0;

        top: 0;

        height: 100%;

        width: 0%;

        background: #007acc;

        border-radius: 5px;

        pointer-events: none;

        transition: width 50ms linear;
      }

      .timeline-range-wrapper input[type="range"] {
        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        margin: 0;

        padding: 0;

        -webkit-appearance: none;

        appearance: none;

        background: transparent;

        outline: none;

        border: none;
      }

      .timeline-range-wrapper input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;

        width: 18px;

        height: 18px;

        border-radius: 50%;

        background: #ffffff;

        cursor: pointer;

        margin-top: -4px;

        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
      }

      .timeline-range-wrapper input[type="range"]::-moz-range-thumb {
        width: 18px;

        height: 18px;

        border-radius: 50%;

        background: #ffffff;

        cursor: pointer;

        border: none;

        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
      }

      .timeline-range-wrapper input[type="range"]:disabled {
        opacity: 1;
      }

      .usage-modal {
        position: fixed;

        inset: 0;

        background: rgba(0, 0, 0, 0.7);

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 24px;

        z-index: 20;
      }

      .usage-modal__content,
      .toolbox-modal__content {
        width: min(440px, 100%);

        background: rgba(37, 37, 38, 0.96);

        border: 1px solid rgba(148, 163, 184, 0.3);

        border-radius: 16px;

        box-shadow: 0 24px 60px rgba(2, 6, 23, 0.6);

        padding: 24px;

        display: flex;

        flex-direction: column;

        gap: 16px;
      }

      .usage-modal h2 {
        margin: 0;

        font-size: 20px;
      }

      .usage-modal p {
        margin: 0;

        line-height: 1.6;

        color: rgba(226, 232, 240, 0.82);
      }

      .usage-list {
        margin: 0;

        padding-left: 18px;

        display: flex;

        flex-direction: column;

        gap: 6px;

        color: rgba(226, 232, 240, 0.78);

        font-size: 14px;

        line-height: 1.6;
      }

      .usage-modal__actions {
        display: flex;

        justify-content: flex-end;
      }

      .usage-modal__actions button {
        width: auto;

        padding-inline: 20px;
      }

      .toolbox-modal {
        position: fixed;

        top: 80px;

        width: min(640px, calc(100vw - 48px));

        min-width: 420px;

        max-height: 80vh;

        overflow: hidden;

        border: 1px solid rgba(148, 163, 184, 0.35);

        border-radius: 12px;

        background: rgba(7, 11, 20, 0.95);

        box-shadow: 0 20px 50px rgba(2, 6, 23, 0.7);

        z-index: 25;

        display: flex;

        flex-direction: column;

        gap: 0;

        cursor: default;
      }

      .toolbox-modal.hidden {
        display: none;
      }

      .toolbox-modal__content {
        display: flex;

        flex-direction: column;

        gap: 16px;

        padding: 16px;

        overflow-y: auto;

        cursor: default;
        width: 100%;
        box-sizing: border-box;
      }

      .toolbox-modal__header {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 12px;

        padding: 12px 16px;

        border-bottom: 1px solid rgba(80, 80, 80, 0.3);

        cursor: default;

        background: rgba(37, 37, 38, 0.9);
      }

      .toolbox-modal__header h2 {
        margin: 0;

        font-size: 18px;
      }

      .toolbox-modal__sections {
        display: flex;

        flex-direction: column;

        gap: 16px;
      }

      .toolbox-close-btn {
        width: auto;

        padding-inline: 16px;
      }

      .convert-section {
        display: flex;

        flex-direction: column;

        gap: 8px;
      }

      .convert-grid {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px 12px;
      }

      .convert-log {
        font-size: 12px;

        padding: 8px 12px;

        border: 1px solid rgba(80, 80, 80, 0.3);

        border-radius: 6px;

        background: rgba(37, 37, 38, 0.5);

        color: rgba(226, 232, 240, 0.82);
      }

      .hidden {
        display: none !important;
      }