:root {
      color-scheme: light;
      --bg: #f3f0e8;
      --bg-elevated: #faf8f3;
      --card: #fffcf7;
      --fg: #1a2332;
      --muted: #5a6a78;
      --border: #d5cfc2;
      --border-strong: #b8b0a0;
      --accent: #0b5f66;
      --accent-hover: #084a50;
      --accent-soft: #dceced;
      --accent-ink: #063a3f;
      --error: #9b2c2c;
      --success: #1f6b45;
      --success-soft: #e3f2ea;
      --axis-bg: var(--accent);
      --axis-border: #0a4f55;
      --paradigm-fill: rgba(176, 122, 48, 0.12);
      --paradigm-border: rgba(148, 98, 32, 0.42);
      --paradigm-export-fill: #f1e9dc;
      --paradigm-export-border: #cfb99a;
      --paradigm-accent: #a67c2e;
      --paradigm-ink: #5c3f12;
      --adjustment-accent: #5f8f72;
      --adjustment-ink: #315340;
      --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.05);
      --shadow-md: 0 8px 28px rgba(26, 35, 50, 0.08);
      --header-h: auto;
      --radius: 8px;
      --font-sans: Arial, Helvetica, sans-serif;
      --font-serif: Arial, Helvetica, sans-serif;
    }

    * {
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      margin: 0;
      font-family: var(--font-sans);
      background:
        radial-gradient(1200px 500px at 10% -10%, rgba(11, 95, 102, 0.07), transparent 55%),
        radial-gradient(900px 420px at 100% 0%, rgba(140, 110, 60, 0.06), transparent 50%),
        var(--bg);
      color: var(--fg);
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }

    .widget {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .chrome {
      flex: 0 0 auto;
      padding: 0.75rem 1.25rem 0.65rem;
      border-bottom: 1px solid var(--border);
      background: rgba(255, 252, 247, 0.92);
      backdrop-filter: blur(10px);
      transition: opacity 0.28s ease, transform 0.32s ease, max-height 0.36s ease, padding 0.32s ease, border-color 0.28s ease;
      max-height: 240px;
      overflow: hidden;
    }

    .widget-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.5rem;
    }

    .brand {
      min-width: 0;
    }

    .brand-kicker {
      margin: 0 0 0.15rem;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .widget-title {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--fg);
      line-height: 1.2;
    }

    .widget-subtitle {
      margin: 0.2rem 0 0;
      font-size: 0.8rem;
      color: var(--muted);
      max-width: 42rem;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .button {
      border: 1px solid var(--border-strong);
      background: var(--card);
      color: var(--fg);
      border-radius: 6px;
      padding: 0.42rem 0.8rem;
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    }

    .button:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--accent-ink);
    }

    .button:active {
      transform: translateY(1px);
    }

    .button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
    }

    .button.success {
      border-color: #7cbc98;
      background: var(--success-soft);
      color: var(--success);
    }

    .button.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #f7fffe;
    }

    .button.primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      color: #fff;
    }

    .toolbar-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .tabs-bar {
      display: inline-flex;
      gap: 0.2rem;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.18rem;
      margin: 0;
    }

    .tab {
      text-align: center;
      border: none;
      background: transparent;
      color: var(--muted);
      border-radius: 6px;
      padding: 0.4rem 0.95rem;
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .tab:hover {
      color: var(--fg);
      background: rgba(255, 255, 255, 0.55);
    }

    .tab.active {
      background: var(--accent);
      color: #f7fffe;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--accent);
    }

    .status {
      min-height: 1.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--muted);
      font-size: 0.78rem;
      margin: 0;
      flex: 1;
      min-width: 12rem;
    }

    .status.error {
      color: var(--error);
    }

    .zoom-controls {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      margin-left: auto;
    }

    .zoom-btn {
      min-width: 2rem;
      min-height: 2rem;
      padding: 0.28rem 0.55rem;
      font-size: 0.9rem;
      line-height: 1.2;
      font-weight: 600;
    }

    .zoom-btn.icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.28rem 0.45rem;
    }

    .zoom-btn.icon-btn svg {
      width: 0.95rem;
      height: 0.95rem;
      display: block;
    }

    .floating-controls {
      display: none;
    }

    .mobile-only {
      display: none;
    }

    .mobile-chrome {
      display: none;
    }

    .burger-menu {
      display: none;
    }

    .mobile-zoom-floating {
      display: none;
    }

    .mobile-chrome {
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.6rem;
      padding: 0.65rem 0.85rem 0.6rem;
      background: rgba(255, 252, 247, 0.92);
      backdrop-filter: blur(10px);
      flex: 0 0 auto;
    }

    .mobile-brand {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      min-width: 0;
      height: 100%;
    }

    .mobile-title {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--fg);
      line-height: 1.2;
    }

    .mobile-subtitle {
      margin: 0.2rem 0 0;
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .mobile-actions {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      flex-shrink: 0;
      padding-top: 0.1rem;
    }

    .mobile-icon-btn {
      min-width: 2.1rem;
      height: 2.1rem;
      padding: 0.3rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-icon-btn svg {
      width: 1.05rem;
      height: 1.05rem;
      display: block;
    }

    .mobile-icon-btn.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #f7fffe;
    }

    .mobile-icon-btn.primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      color: #fff;
    }

    .mobile-zoom-floating {
      position: fixed;
      left: 0.65rem;
      bottom: 0.85rem;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.94);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(10px);
      z-index: 40;
    }

    .mobile-zoom-floating .button {
      box-shadow: none;
    }

    .widget.is-fullscreen .chrome {
      opacity: 0;
      transform: translateY(-12px);
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-bottom-color: transparent;
      pointer-events: none;
    }

    .widget.is-fullscreen .timeline-stage {
      border-top-color: transparent;
    }

    .widget.is-fullscreen .floating-controls {
      display: flex;
      position: fixed;
      top: 0.85rem;
      right: 0.85rem;
      z-index: 40;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: rgba(255, 252, 247, 0.94);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(10px);
      animation: floatIn 0.28s ease;
    }

    .widget.is-fullscreen .floating-controls .button {
      box-shadow: none;
    }

    .widget.is-fullscreen .floating-controls .button.primary {
      box-shadow: var(--shadow-sm);
    }

    @media (max-width: 768px) {
      .widget.is-fullscreen .floating-controls {
        display: none;
      }
    }

    .fs-enter .timeline-stage,
    .fs-exit .timeline-stage {
      transition: flex-basis 0.32s ease, min-height 0.32s ease;
    }

    @keyframes floatIn {
      from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .spinner {
      width: 0.9rem;
      height: 0.9rem;
      border: 2px solid #c9c2b4;
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex: 0 0 auto;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .timeline-stage {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 0;
      width: 100%;
      position: relative;
      background: var(--card);
      border-top: 1px solid transparent;
    }

    .timeline-title {
      flex: 0 0 auto;
      margin: 0;
      padding: 0.8rem 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--card);
      color: var(--fg);
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: 700;
      line-height: 1.25;
      text-align: center;
    }

    .timeline-chart-area {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-gutter: auto;
      align-items: flex-start;
    }

    .timeline-label-rail {
      flex: 0 0 40px;
      width: 40px;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: var(--card);
      border-right: 1px solid var(--border);
      box-sizing: border-box;
      color: var(--fg);
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-align: center;
      flex-shrink: 0;
      height: var(--chart-content-height, 100%);
    }

    .timeline-stage.is-exporting-image .timeline-label-rail {
      flex: 0 0 72px;
      width: 72px;
      font-size: 2rem;
    }

    .timeline-stage.is-exporting-image .timeline-part-label.time {
      font-size: 2rem;
      flex-basis: 54px;
      height: 54px;
    }

    .timeline-stage.is-exporting-image .timeline-chart-area {
      overflow: visible;
    }

    .export-secondary-time-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .export-secondary-time-grid-line {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background-color: #e5e7eb;
    }

    .timeline-stage.is-exporting-image .timeline-part-label.trends {
      flex-basis: calc(var(--trend-label-height, 108px) - 54px);
      height: calc(var(--trend-label-height, 108px) - 54px);
    }

    .timeline-stage.is-exporting-image .timeline-part-label.adjustments {
      flex-basis: calc(var(--adjustment-label-height, 116px) - 54px);
      height: calc(var(--adjustment-label-height, 116px) - 54px);
    }

    .timeline-part-label {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      overflow: hidden;
    }

    .timeline-part-label.vertical span {
      white-space: nowrap;
      transform: rotate(-90deg);
    }

    .timeline-part-label.trends {
      flex: 0 0 calc(var(--trend-label-height, 68px) - 34px);
      height: calc(var(--trend-label-height, 68px) - 34px);
      background: var(--bg-elevated);
    }

    .timeline-part-label.time {
      flex: 0 0 34px;
      height: 34px;
      background: var(--bg-elevated);
      padding: 0 4px;
    }

    .timeline-part-label.paradigms {
      flex: 0 0 var(--paradigm-label-height, 30px);
      height: var(--paradigm-label-height, 30px);
      background: var(--bg-elevated);
    }

    .timeline-part-label.adjustments {
      flex: 0 0 calc(var(--adjustment-label-height, 78px) - 34px);
      height: calc(var(--adjustment-label-height, 78px) - 34px);
      background: var(--bg-elevated);
    }

    .timeline-chart-content {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      height: var(--chart-content-height, auto);
    }

    .timeline-shell {
      border: none;
      border-radius: 0;
      overflow: visible;
      background: var(--card);
      width: 100%;
    }

    #timelineTop .vis-panel.vis-center > .vis-content,
    #timelineBottom .vis-panel.vis-center > .vis-content,
    #timelineAdjustments .vis-panel.vis-center > .vis-content {
      padding-top: 8px;
      box-sizing: border-box;
    }

    #timelineBottom .vis-panel.vis-center > .vis-content,
    #timelineAdjustments .vis-panel.vis-center > .vis-content {
      padding-bottom: 8px;
    }

    .timeline-top-shell {
      flex: 0 0 auto;
      min-height: 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-direction: column;
    }

    .timeline-bottom-shell {
      flex: 0 0 auto;
      min-height: 0;
      background:
        linear-gradient(180deg, rgba(166, 124, 46, 0.06), transparent 48px),
        var(--bg-elevated);
      border-top: 1px solid var(--border);
      overflow: hidden;
    }

    #timelineTop {
      width: 100%;
      flex: 1 1 0;
      min-height: 0;
      min-width: 0;
    }

    #timelineBottom {
      width: 100%;
    }

    .timeline-adjustment-shell {
      flex: 0 0 auto;
      min-height: 0;
      background: var(--bg-elevated);
      border-top: 1px solid var(--border);
      overflow: hidden;
    }

    #timelineAdjustments {
      width: 100%;
    }

    .hidden {
      display: none !important;
    }

    div.vis-time-axis.vis-foreground {
      background: var(--accent);
      border-top: 1px solid var(--axis-border);
      border-bottom: 1px solid var(--axis-border);
      height: 32px !important;
    }

    div.vis-time-axis.vis-foreground .vis-text {
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: #f7fffe;
      border-right: 1px solid rgba(255, 255, 255, 0.28);
      box-sizing: border-box;
      padding: 7px 6px;
      overflow: visible;
      white-space: nowrap;
    }

    .timeline-stage.is-exporting-image div.vis-time-axis.vis-foreground .vis-text {
      font-size: 2rem;
      padding-top: 9px;
      padding-bottom: 9px;
    }

    .timeline-stage.is-exporting-image div.vis-time-axis.vis-foreground {
      height: 52px !important;
    }

    .vis-panel.vis-top,
    .vis-panel.vis-bottom {
      border-color: var(--border) !important;
      background: var(--card);
    }

    .vis-item.vis-range {
      border-color: var(--border-strong);
      background: var(--bg-elevated);
      color: var(--fg);
      border-radius: 6px;
      font-size: 0.72rem;
      line-height: 1.1;
      min-height: 14px;
    }

    .vis-item.vis-dot {
      display: none;
    }

    .vis-item.vis-range .vis-item-content {
      padding: 1px 6px;
      line-height: 1.1;
    }

    .vis-item.paradigm-range {
      --trend-line: var(--paradigm-accent);
      --trend-line-center-y: 18px;
      color: var(--paradigm-ink);
      font-family: var(--font-serif);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.3;
      min-height: 28px;
      overflow: visible !important;
      cursor: pointer;
    }

    .vis-item.paradigm-range .vis-item-content {
      position: static !important;
      display: block;
      width: 100%;
      min-height: 28px;
      height: 28px;
      padding: 4px 6px;
      white-space: nowrap;
      overflow: visible;
      z-index: 2;
    }

    .paradigm-title-text {
      position: absolute;
      top: -2px;
      left: 6px;
      white-space: nowrap;
      transform: translateX(var(--paradigm-title-left, 0px));
      z-index: 2;
    }

    .timeline-stage.is-exporting-image .vis-item.paradigm-range {
      font-size: 1.8rem;
      min-height: 48px;
      overflow: visible !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none;
    }

    .timeline-stage.is-exporting-image .vis-item.paradigm-range .vis-item-content {
      position: static !important;
      display: block;
      width: 100%;
      min-height: 48px;
      height: 48px;
      padding: 0 20px;
      background-color: transparent !important;
      transform: none !important;
    }

    .timeline-stage.is-exporting-image .paradigm-title-text {
      position: absolute;
      bottom: calc(100% - var(--trend-line-center-y) + 6px);
      left: 20px;
      line-height: 1.1;
    }

    .timeline-stage.is-exporting-image .vis-item.paradigm-range .vis-item-overflow {
      background-color: transparent !important;
    }

    .timeline-stage.is-exporting-image .timeline-bottom-shell,
    .timeline-stage.is-exporting-image #timelineBottom,
    .timeline-stage.is-exporting-image #timelineBottom .vis-timeline,
    .timeline-stage.is-exporting-image #timelineBottom .vis-panel,
    .timeline-stage.is-exporting-image #timelineBottom .vis-content,
    .timeline-stage.is-exporting-image #timelineBottom .vis-itemset,
    .timeline-stage.is-exporting-image #timelineBottom .vis-group {
      background-color: var(--bg-elevated) !important;
    }

    .vis-item.trend-range.trend-color-0 {
      --trend-line: #0b5f66;
      color: #063a3f;
    }

    .vis-item.trend-range.trend-color-1 {
      --trend-line: #2f6f4e;
      color: #1a4630;
    }

    .vis-item.trend-range.trend-color-2 {
      --trend-line: #a65d3f;
      color: #6b3420;
    }

    .vis-item.trend-range.trend-color-3 {
      --trend-line: #b0892c;
      color: #6b5114;
    }

    .vis-item.trend-range.trend-color-4 {
      --trend-line: #4f6fa8;
      color: #2c4068;
    }

    .vis-item.trend-range.trend-color-5 {
      --trend-line: #3d7a8c;
      color: #1f4b57;
    }

    .vis-item.trend-range.trend-color-6 {
      --trend-line: #8b5a6b;
      color: #5a3544;
    }

    .vis-item.trend-range.trend-color-7 {
      --trend-line: #6b7280;
      color: #374151;
    }

    .vis-item.trend-range,
    .vis-item.paradigm-range {
      --trend-line-center-y: 18px;
      background: linear-gradient(var(--trend-line), var(--trend-line)) no-repeat center calc(var(--trend-line-center-y) - 1.25px) / 100% 2.5px,
                  transparent !important;
      border: none !important;
      border-color: transparent !important;
      overflow: visible !important;
      min-height: 28px !important;
      cursor: pointer;
      transition: filter 0.15s ease, opacity 0.15s ease;
    }

    .vis-item.trend-range:hover,
    .vis-item.paradigm-range:hover {
      filter: brightness(0.92) saturate(1.15);
    }

    .range-click-target {
      position: absolute;
      left: -6px;
      right: -8px;
      display: block;
      background: transparent;
      cursor: pointer;
      pointer-events: auto;
      z-index: 1;
    }

    .vis-item.trend-range > .range-click-target {
      top: -2px;
      bottom: -2px;
    }

    .vis-item.paradigm-range > .range-click-target,
    .vis-item.adjustment-range > .range-click-target {
      top: -4px;
      bottom: -4px;
    }

    .timeline-stage.is-exporting-image .range-click-target {
      display: none !important;
    }

    .timeline-stage.is-exporting-image .vis-item.trend-range,
    .timeline-stage.is-exporting-image .vis-item.paradigm-range {
      --trend-line-center-y: 36px;
      background-image: none !important;
      min-height: 48px !important;
    }

    .trend-export-line {
      display: none;
    }

    .timeline-stage.is-exporting-image .trend-export-line {
      display: block;
      position: absolute;
      top: calc(var(--trend-line-center-y) - 1.25px);
      left: 0;
      width: 100%;
      height: 2.5px;
      background-color: var(--trend-line);
      pointer-events: none;
    }

    .paradigm-export-start-dot,
    .paradigm-export-end-dot,
    .range-export-arrowhead {
      display: none;
    }

    .timeline-stage.is-exporting-image .vis-item.trend-range.arrow-right::after,
    .timeline-stage.is-exporting-image .vis-item.paradigm-range.dot-left::before,
    .timeline-stage.is-exporting-image .vis-item.paradigm-range.dot-right::after,
    .timeline-stage.is-exporting-image .vis-item.paradigm-range.arrow-right::after {
      display: none !important;
    }

    .timeline-stage.is-exporting-image .paradigm-export-start-dot,
    .timeline-stage.is-exporting-image .paradigm-export-end-dot {
      display: block;
      position: absolute;
      top: var(--trend-line-center-y);
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      box-sizing: content-box;
      border: 1px solid #d1d5db;
      border-radius: 50%;
      background-color: var(--trend-line);
      z-index: 3;
    }

    .timeline-stage.is-exporting-image .paradigm-export-start-dot {
      left: -5px;
    }

    .timeline-stage.is-exporting-image .paradigm-export-end-dot {
      right: -5px;
    }

    .timeline-stage.is-exporting-image .range-export-arrowhead {
      display: block;
      position: absolute;
      right: -5px;
      top: var(--trend-line-center-y);
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid var(--trend-line);
      z-index: 3;
    }

    .vis-item.trend-range .vis-item-content {
      position: static;
      padding: 4px 6px !important;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.01em;
      overflow: visible;
      width: 100%;
      height: 28px;
    }

    .timeline-stage.is-exporting-image .vis-item.trend-range .vis-item-content {
      position: static;
      padding: 0 20px !important;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 1.8rem;
      letter-spacing: 0.01em;
      overflow: visible;
      width: 100%;
      height: 48px;
    }

    .trend-title-text {
      position: absolute;
      top: -2px;
      left: 6px;
      white-space: nowrap;
      transform: translateX(var(--trend-title-left, 0px));
      z-index: 2;
    }

    .timeline-stage.is-exporting-image .trend-title-text {
      position: absolute;
      top: auto;
      bottom: calc(100% - var(--trend-line-center-y) + 6px);
      left: 20px;
      line-height: 1.1;
      transform: none;
    }

    .trend-start-year,
    .trend-end-year {
      position: absolute;
      top: var(--trend-line-center-y);
      transform: translateY(-50%);
      color: var(--trend-line);
      font-size: 0.78rem;
      font-weight: 700;
      white-space: nowrap;
      padding-right: 4px;
    }

    .trend-start-year {
      right: calc(100% + 10px);
    }

    .trend-end-year {
      top: var(--trend-line-center-y);
      right: auto;
      bottom: auto;
      left: calc(100% + 12px);
      transform: translateY(-50%);
      z-index: 2;
    }

    .timeline-stage.is-exporting-image .trend-start-year,
    .timeline-stage.is-exporting-image .trend-end-year {
      font-size: 1.8rem;
    }

    .timeline-stage.is-exporting-image .timeline-title {
      font-size: 3rem;
    }

    .timeline-stage.is-exporting-image .vis-shadow {
      display: none !important;
    }

    .timeline-stage.is-exporting-image .timeline-bottom-shell {
      min-height: 0;
      background-image: none !important;
      background-color: var(--bg-elevated);
      box-shadow: inset 0 48px 48px -48px rgba(166, 124, 46, 0.06);
    }

    .vis-item.trend-range.dot-left::before,
    .vis-item.paradigm-range.dot-left::before {
      content: "";
      position: absolute;
      left: -5px;
      top: var(--trend-line-center-y);
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      box-sizing: content-box;
      border-radius: 50%;
      border: 1px solid #d1d5db;
      background: var(--trend-line);
      box-shadow: none;
      z-index: 1;
    }

    .vis-item.trend-range.arrow-right::after,
    .vis-item.paradigm-range.arrow-right::after {
      content: "";
      position: absolute;
      right: -5px;
      top: calc(var(--trend-line-center-y) - 5px);
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid var(--trend-line);
    }

    .vis-item.trend-range.dot-right::after,
    .vis-item.paradigm-range.dot-right::after {
      content: "";
      position: absolute;
      right: -5px;
      top: var(--trend-line-center-y);
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      box-sizing: content-box;
      border-radius: 50%;
      border: 1px solid #d1d5db;
      background: var(--trend-line);
      box-shadow: none;
      z-index: 1;
    }

    .vis-item.adjustment-range {
      --trend-line: var(--adjustment-accent);
      --trend-line-center-y: 18px;
      color: var(--adjustment-ink);
      font-family: var(--font-serif);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.3;
      min-height: 28px !important;
      overflow: visible !important;
      cursor: pointer;
      background: linear-gradient(var(--trend-line), var(--trend-line)) no-repeat center calc(var(--trend-line-center-y) - 1.25px) / 100% 2.5px,
                  transparent !important;
      border: none !important;
      transition: filter 0.15s ease, opacity 0.15s ease;
    }

    .vis-item.adjustment-range:hover {
      filter: brightness(0.92) saturate(1.15);
    }

    .vis-item.adjustment-range .vis-item-content {
      position: static !important;
      display: block;
      width: 100%;
      min-height: 28px;
      height: 28px;
      padding: 4px 6px;
      white-space: nowrap;
      overflow: visible;
      z-index: 2;
    }

    .vis-item.adjustment-range.dot-left::before,
    .vis-item.adjustment-range.dot-right::after {
      content: "";
      position: absolute;
      top: var(--trend-line-center-y);
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      box-sizing: content-box;
      border: 1px solid #d1d5db;
      border-radius: 50%;
      background: var(--trend-line);
      box-shadow: none;
      z-index: 1;
    }

    .vis-item.adjustment-range.dot-left::before {
      left: -5px;
    }

    .vis-item.adjustment-range.dot-right::after {
      right: -5px;
    }

    .vis-item.adjustment-range.arrow-right::after {
      content: "";
      position: absolute;
      right: -5px;
      top: calc(var(--trend-line-center-y) - 5px);
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid var(--trend-line);
    }

    .timeline-stage.is-exporting-image .vis-item.adjustment-range {
      --trend-line-center-y: 36px;
      min-height: 48px !important;
      font-size: 1.8rem;
      overflow: visible !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none;
    }

    .timeline-stage.is-exporting-image .vis-item.adjustment-range .vis-item-content {
      position: static !important;
      display: block;
      width: 100%;
      min-height: 48px;
      height: 48px;
      padding: 0 20px;
      background-color: transparent !important;
      transform: none !important;
    }

    .timeline-stage.is-exporting-image .vis-item.adjustment-range.dot-left::before,
    .timeline-stage.is-exporting-image .vis-item.adjustment-range.dot-right::after,
    .timeline-stage.is-exporting-image .vis-item.adjustment-range.arrow-right::after {
      display: none !important;
    }

    .timeline-stage.is-exporting-image .timeline-adjustment-shell,
    .timeline-stage.is-exporting-image #timelineAdjustments,
    .timeline-stage.is-exporting-image #timelineAdjustments .vis-timeline,
    .timeline-stage.is-exporting-image #timelineAdjustments .vis-panel,
    .timeline-stage.is-exporting-image #timelineAdjustments .vis-content,
    .timeline-stage.is-exporting-image #timelineAdjustments .vis-itemset,
    .timeline-stage.is-exporting-image #timelineAdjustments .vis-group {
      background-color: var(--bg-elevated) !important;
      background-image: none !important;
    }

    .timeline-stage.is-exporting-image.is-mobile-export .vis-item.trend-range.dot-left::before,
    .timeline-stage.is-exporting-image.is-mobile-export .vis-item.trend-range.dot-right::after,
    .timeline-stage.is-exporting-image.is-mobile-export .vis-item.paradigm-range.dot-left::before,
    .timeline-stage.is-exporting-image.is-mobile-export .vis-item.paradigm-range.dot-right::after {
      top: var(--trend-line-center-y);
    }

    .timeline-stage.is-exporting-image.is-mobile-export .vis-item.trend-range.arrow-right::after,
    .timeline-stage.is-exporting-image.is-mobile-export .vis-item.paradigm-range.arrow-right::after {
      top: calc(var(--trend-line-center-y) - 5px);
    }

    .vis-item.vis-background {
      background: rgba(11, 95, 102, 0.08);
      border-color: rgba(11, 95, 102, 0.2);
      color: var(--accent-ink);
    }

    .vis-item.vis-point {
      background: var(--accent);
      border-color: var(--accent-hover);
      min-height: 14px;
      height: 14px;
      width: 14px;
      border-width: 2px;
      border-radius: 999px;
      display: none;
    }

    .vis-item.vis-point .vis-item-content {
      font-size: 0.72rem;
      font-weight: bold;
      line-height: 1.1;
      padding: 1px 6px;
      white-space: nowrap;
    }

    /* Paradigms keep the labeled axis hidden but retain its background grid. */
    .timeline-bottom-shell .vis-time-axis.vis-foreground,
    .timeline-bottom-shell .vis-panel.vis-top,
    .timeline-bottom-shell .vis-panel.vis-bottom {
      display: none;
    }

    .timeline-bottom-shell .vis-time-axis.vis-background {
      display: block;
    }

    .vis-panel.vis-left.vis-vertical-scroll {
      min-width: 22px;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26, 35, 50, 0.48);
      align-items: center;
      justify-content: center;
      z-index: 1000;
      backdrop-filter: blur(3px);
      padding: 1rem;
    }

    .modal-overlay:not(.hidden) {
      display: flex;
      animation: fadeIn 0.18s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--shadow-md);
      width: min(92vw, 540px);
      max-height: min(80vh, 720px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalIn 0.2s ease;
    }

    @keyframes modalIn {
      from { opacity: 0; transform: translateY(8px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.95rem 1.15rem;
      border-bottom: 1px solid var(--border);
      background: var(--bg-elevated);
    }

    .modal-title {
      margin: 0;
      font-family: var(--font-serif);
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.3;
    }

    .modal-title-meta {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .modal-close {
      border: 1px solid transparent;
      background: transparent;
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      color: var(--muted);
      padding: 0.2rem 0.4rem;
      border-radius: 6px;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .modal-close:hover {
      background: var(--card);
      border-color: var(--border);
      color: var(--fg);
    }

    .modal-body {
      padding: 1.15rem 1.25rem 1.35rem;
      overflow-y: auto;
      background: var(--card);
    }

    .event-timeline {
      position: relative;
      padding-left: 1.75rem;
    }

    .event-timeline::before {
      content: "";
      position: absolute;
      left: calc(0.5rem + 4px);
      top: 0.35rem;
      bottom: 0.35rem;
      width: 4px;
      background: var(--border);
      border-radius: 1px;
    }

    .event-node {
      position: relative;
      padding-bottom: 1rem;
    }

    .event-node:last-child {
      padding-bottom: 0;
    }

    .event-node::before {
      content: "";
      position: absolute;
      left: -1.3rem;
      top: 0.75rem;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--card);
      box-shadow: 0 0 0 2px var(--accent);
      z-index: 1;
    }

    .event-card {
      position: relative;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 0.65rem 0.8rem;
      margin-left: 0.4rem;
      box-shadow: var(--shadow-sm);
      transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }

    .event-card:hover {
      border-color: var(--border-strong);
      box-shadow: 0 3px 12px rgba(26, 35, 50, 0.08);
    }

    .event-card:hover::before {
      border-right-color: var(--border-strong);
    }

    .event-card::before {
      content: "";
      position: absolute;
      left: -6px;
      top: 12px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 6px solid var(--border);
    }

    .event-card::after {
      content: "";
      position: absolute;
      left: -5px;
      top: 12px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 6px solid var(--card);
    }

    .event-card-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .event-card-date {
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--fg);
    }

    .event-card-badge {
      font-size: 0.65rem;
      font-weight: 500;
      border-radius: 4px;
      padding: 1px 6px;
      white-space: nowrap;
    }

    .event-card-body {
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.45;
    }

    .event-empty {
      color: var(--muted);
      font-size: 0.88rem;
      text-align: center;
      padding: 1rem 0;
    }

    .skeleton-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      background: var(--card);
    }

    .export-loading-overlay {
      position: absolute;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 252, 247, 0.92);
      backdrop-filter: blur(4px);
    }

    .skeleton-loader {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      padding: 2rem;
    }

    .skeleton-spinner {
      width: 2.5rem;
      height: 2.5rem;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.9s linear infinite;
      box-sizing: border-box;
    }

    .skeleton-text {
      margin: 0;
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.01em;
    }

    @media (max-width: 768px) {
      .chrome {
        padding: 0;
        border-bottom: 1px solid var(--border);
        max-height: none;
      }

      .brand-kicker {
        display: none;
      }

      .widget-header,
      .status,
      .zoom-controls.chrome-zoom-controls {
        display: none;
      }

      .toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.4rem 0.75rem;
      }

      .tabs-bar {
        width: 100%;
      }

      .tab {
        flex: 1;
      }

      .mobile-only.mobile-chrome {
        display: flex;
      }

      .mobile-only.mobile-zoom-floating {
        display: flex;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 -6px 24px rgba(26, 35, 50, 0.12);
      }

      .mobile-zoom-floating .button {
        flex: 1 1 0;
        min-width: 0;
        border: 0;
      }

      .timeline-stage {
        padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
      }

      .widget.is-fullscreen .chrome,
      .widget.is-fullscreen .mobile-chrome {
        opacity: 0;
        transform: translateY(-12px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-color: transparent;
        pointer-events: none;
        overflow: hidden;
      }

      .timeline-top-shell,
      #timelineTop {
        min-height: 0;
      }

      .timeline-bottom-shell,
      #timelineBottom,
      .timeline-adjustment-shell,
      #timelineAdjustments {
        min-height: 0;
      }

      .timeline-title {
        font-size: 0.8rem;
        padding: 0.45rem 0.65rem;
      }

      .vis-item.trend-range .vis-item-content {
        padding: 4px 6px !important;
        font-size: 0.6rem;
      }

      .trend-start-year,
      .trend-end-year {
        font-size: 0.45rem;
      }

      .vis-item.trend-range {
        --trend-line-center-y: 14px;
      }

      .timeline-label-rail {
        flex-basis: 32px;
        width: 32px;
      }

      .timeline-part-label.time {
        flex-basis: 30px;
        height: 30px;
      }

      .timeline-part-label.trends {
        flex-basis: calc(var(--trend-label-height, 60px) - 30px);
        height: calc(var(--trend-label-height, 60px) - 30px);
      }

      .timeline-part-label.adjustments {
        flex-basis: calc(var(--adjustment-label-height, 68px) - 30px);
        height: calc(var(--adjustment-label-height, 68px) - 30px);
      }

      div.vis-time-axis.vis-foreground {
        height: 28px !important;
      }

      div.vis-time-axis.vis-foreground .vis-text {
        font-size: 11px;
        padding: 6px 4px;
        letter-spacing: 0;
      }
    }