.page {
      margin: 0 auto;
    }

    .page-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    .page-title {
      font-size: 22px;
      font-weight: 500;
      color: var(--text);
    }

    .page-date {
      font-size: 13px;
      color: var(--hint);
      letter-spacing: 0.03em;
    }

    /* ── Timeline ── */
    .timeline {
      position: relative;
      padding-left: 108px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 30px;
      top: 12px;
      bottom: 12px;
      width: 2px;
      background: var(--border);
    }

    .t-item {
      position: relative;
      margin-bottom: 10px;
    }

    .t-time {
      position: absolute;
      left: -72px;
      top: 17px;
      width: 52px;
      text-align: right;
      font-size: 14px;
      font-weight: 500;
      color: var(--hint);
      letter-spacing: 0.04em;
    }

    .t-dot {
      position: absolute;
      left: -89px;
      top: 13px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--surface);
      border: 2px solid #378ADD;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .t-dot::after {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #378ADD;
    }

    .t-dot.color {
      background: #036eb6;
      border-color: #036eb6;
    }

    .t-dot.color::after {
      background: white;
    }

    /* ── Card ── */
    .t-card {
      background: var(--surface);
      border: 0.5px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: border-color 0.2s;
    }

    .t-card:hover {
      border-color: var(--border-hover);
    }

    .t-main {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 14px;
      cursor: pointer;
      user-select: none;
    }

    .t-tag {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 500;
      padding: 3px 9px;
      border-radius: 20px;
      letter-spacing: 0.04em;
    }

    .tag-student-talk   { background: #DAC6E8; color: #8B518C; }
    .tag-invited-talk   { background: #F2D0D3; color: #BF3073; }
    .tag-research-at-ttic   { background: #BBE8F2; color: #2685BF; }
    .tag-break  { background: #D1F2A0; color: #3B7302; }
    .tag-panel  { background: #EEEDFE; color: #3C3489; }
    .tag-remarks  { background: #FFE685; color: #F25C05; }

    .t-text {
      flex: 1;
      min-width: 0;
    }

    .t-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      /*white-space: nowrap;*/
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .t-desc {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
    }

    .t-add {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 0.5px solid var(--border-hover);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--muted);
      transition: background 0.15s;
    }

    .t-add:hover {
      background: var(--bg);
    }

    .t-add svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      transition: transform 0.25s ease;
    }

    .t-add.open svg {
      transform: rotate(45deg);
    }

    /* ── Expand panel ── */
    .t-expand {
      overflow: hidden;
      max-height: 0;
      padding: 0 14px;
      border-top: 0px solid var(--border);
      transition: max-height 0.3s ease, padding 0.3s ease, border-top-width 0.3s;
    }

    .t-expand.open {
      max-height: 800px;
      padding: 14px;
      border-top-width: 0.5px;
    }

    .t-note {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.65;
    }

    .t-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .t-action-btn {
      font-size: 12px;
      font-family: inherit;
      padding: 5px 12px;
      border-radius: var(--radius-md);
      border: 0.5px solid var(--border-hover);
      background: var(--bg);
      color: var(--muted);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

    .t-action-btn:hover {
      background: var(--border);
      color: var(--text);
    }

    /* ── Now indicator ── */
    .now-wrap {
      position: absolute;
      left: -64px;
      right: 0;
      pointer-events: none;
      z-index: 2;
    }

    .now-line {
      height: 1.5px;
      background: #E24B4A;
      border-radius: 2px;
    }

    .now-label {
      position: absolute;
      left: 0;
      top: -9px;
      font-size: 10px;
      font-weight: 500;
      color: #E24B4A;
      letter-spacing: 0.05em;
    }

    /* ── Responsive ── */
    @media (max-width: 480px) {
      body { padding: 28px 12px 60px; }
      .timeline { padding-left: 60px; }
      .timeline::before { left: 22px; }
      .t-time { left: -60px; width: 42px; font-size: 10px; }
      .t-dot { left: -44px; }
    }