<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

    body {
      padding: 12px;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .workflow-container {
      width: 100%;
      max-width: 640px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Workspace layout: Document + Margin (No outer card background or border) */
    .editor-layout {
      position: relative;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 24px;
      align-items: center;
      background: transparent;
      padding: 4px 0;
    }

    @media (max-width: 520px) {
      .editor-layout {
        grid-template-columns: 1fr;
        gap: 28px;
      }
    }

    /* Document Sheet (Left) */
    .doc-page {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 16px 14px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      position: relative;
      font-size: 14px;
      line-height: 1.7;
      color: #334155;
      z-index: 2;
    }

    .doc-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }

    .doc-bullet {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #94a3b8;
    }

    .doc-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    /* Tracked Changes Typography */
    .del-text {
      color: #dc2626;
      text-decoration: line-through;
      background: #fee2e2;
      padding: 2px 4px;
      border-radius: 3px;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .ins-text {
      color: #16a34a;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      background: #dcfce7;
      padding: 2px 4px;
      border-radius: 3px;
      font-weight: 600;
      transition: all 0.3s ease;
      display: inline-block;
    }

    /* Suggestion Card (Right Margin) */
    .margin-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 2;
    }

    .suggestion-card {
      background: #ffffff;
      border: 1.5px solid #3b82f6;
      border-radius: 10px;
      padding: 12px 14px;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
      transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }

    .suggestion-card.accepted {
      border-color: #16a34a;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
      background: #f0fdf4;
    }

    .suggestion-card.rejected {
      border-color: #dc2626;
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.12);
      background: #fef2f2;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #3b82f6;
      color: white;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .author-meta {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    .author-name {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .author-time {
      font-size: 11px;
      color: #64748b;
    }

    .card-body {
      font-size: 12px;
      color: #475569;
      margin-bottom: 10px;
      line-height: 1.4;
    }

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

    .action-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      outline: none;
      transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    .btn-accept {
      background: #16a34a;
      color: #ffffff;
    }

    .btn-accept:hover {
      background: #15803d;
    }

    .btn-reject {
      background: #ef4444;
      color: #ffffff;
    }

    .btn-reject:hover {
      background: #dc2626;
    }

    .status-badge {
      display: none;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      padding: 6px;
      border-radius: 6px;
    }

    .status-badge.show {
      display: block;
    }

    .status-badge.accepted {
      color: #16a34a;
      background: #dcfce7;
    }

    .status-badge.rejected {
      color: #dc2626;
      background: #fee2e2;
    }

    /* Reset button */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 4px;
    }

    .reset-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.2s, border-color 0.2s;
    }

    .reset-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    /* Connector line overlay */
    .connector-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }
  </style>
</head>
<body>

  <div class="workflow-container">
    <div class="editor-layout" id="workspace">
      
      <div class="doc-page" id="docPage">
        <div class="doc-header">
          <div class="doc-bullet"></div>
          <div class="doc-title">Document View</div>
        </div>
        <p id="docText">
          The team is 
          <span id="delSpan" class="del-text">growing fast</span>
          <span id="insSpan" class="ins-text">rapidly expanding</span> 
          across regions.
        </p>
      </div>

      
      <div class="margin-panel" id="marginPanel">
        <div class="suggestion-card" id="card">
          <div class="card-header">
            <div class="avatar">SM</div>
            <div class="author-meta">
              <span class="author-name">Sarah M.</span>
              <span class="author-time">Just now</span>
            </div>
          </div>
          
          <div class="card-body" id="cardSummary">
            Replace: <b>"rapidly expanding"</b>
          </div>

          <div class="card-actions" id="actionsRow">
            <button class="action-btn btn-accept" id="acceptBtn" title="Accept revision">
              ✓ Accept
            </button>
            <button class="action-btn btn-reject" id="rejectBtn" title="Reject revision">
              ✗ Reject
            </button>
          </div>

          <div class="status-badge" id="statusBadge"></div>
        </div>
      </div>

      
      <svg class="connector-svg" id="svgCanvas">
        <path id="guidePath" d="" fill="none" stroke="#3b82f6" stroke-width="2" stroke-dasharray="4,4" opacity="0.85"/>
        <circle id="startDot" cx="0" cy="0" r="3.5" fill="#3b82f6" opacity="0"/>
        <circle id="endDot" cx="0" cy="0" r="3.5" fill="#3b82f6" opacity="0"/>
      </svg>
    </div>

    
    <div class="controls">
      <button class="reset-btn" id="resetBtn">
        ↺ Reset Suggestion
      </button>
    </div>
  </div>

  <script>
    const delSpan = document.getElementById('delSpan');
    const insSpan = document.getElementById('insSpan');
    const card = document.getElementById('card');
    const acceptBtn = document.getElementById('acceptBtn');
    const rejectBtn = document.getElementById('rejectBtn');
    const resetBtn = document.getElementById('resetBtn');
    const actionsRow = document.getElementById('actionsRow');
    const statusBadge = document.getElementById('statusBadge');
    const guidePath = document.getElementById('guidePath');
    const startDot = document.getElementById('startDot');
    const endDot = document.getElementById('endDot');
    const workspace = document.getElementById('workspace');

    function updateConnector() {
      if (card.classList.contains('accepted') || card.classList.contains('rejected')) {
        guidePath.setAttribute('d', '');
        startDot.setAttribute('opacity', '0');
        endDot.setAttribute('opacity', '0');
        return;
      }

      const wsRect = workspace.getBoundingClientRect();
      const insRect = insSpan.getBoundingClientRect();
      const cardRect = card.getBoundingClientRect();

      const isStacked = cardRect.top > insRect.bottom + 8;

      let startX, startY, endX, endY, pathD;

      if (isStacked) {
        // Mobile / stacked layout: connect bottom of insSpan to top center of suggestion card
        startX = insRect.left + (insRect.width / 2) - wsRect.left;
        startY = insRect.bottom - wsRect.top;
        endX = cardRect.left + (cardRect.width / 2) - wsRect.left;
        endY = cardRect.top - wsRect.top;

        const midY = (startY + endY) / 2;
        pathD = `M ${startX} ${startY} C ${startX} ${midY}, ${endX} ${midY}, ${endX} ${endY}`;
      } else {
        // Side-by-side layout: connect right of insSpan to left of suggestion card
        startX = insRect.right - wsRect.left;
        startY = insRect.top + (insRect.height / 2) - wsRect.top;
        endX = cardRect.left - wsRect.left;
        endY = cardRect.top + (cardRect.height / 2) - wsRect.top;

        const midX = (startX + endX) / 2;
        pathD = `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`;
      }

      guidePath.setAttribute('d', pathD);
      startDot.setAttribute('cx', startX);
      startDot.setAttribute('cy', startY);
      startDot.setAttribute('opacity', '1');

      endDot.setAttribute('cx', endX);
      endDot.setAttribute('cy', endY);
      endDot.setAttribute('opacity', '1');
    }

    function applyAccept() {
      delSpan.style.display = 'none';
      insSpan.style.textDecoration = 'none';
      insSpan.style.background = 'transparent';
      insSpan.style.color = '#1e2945';
      insSpan.style.fontWeight = 'normal';

      card.className = 'suggestion-card accepted';
      actionsRow.style.display = 'none';
      statusBadge.textContent = 'Accepted ✓';
      statusBadge.className = 'status-badge show accepted';
      updateConnector();
    }

    function applyReject() {
      insSpan.style.display = 'none';
      delSpan.style.textDecoration = 'none';
      delSpan.style.background = 'transparent';
      delSpan.style.color = '#1e2945';

      card.className = 'suggestion-card rejected';
      actionsRow.style.display = 'none';
      statusBadge.textContent = 'Rejected ✗';
      statusBadge.className = 'status-badge show rejected';
      updateConnector();
    }

    function applyReset() {
      delSpan.style.display = 'inline';
      delSpan.style.textDecoration = 'line-through';
      delSpan.style.background = '#fee2e2';
      delSpan.style.color = '#dc2626';

      insSpan.style.display = 'inline-block';
      insSpan.style.textDecoration = 'underline';
      insSpan.style.background = '#dcfce7';
      insSpan.style.color = '#16a34a';
      insSpan.style.fontWeight = '600';

      card.className = 'suggestion-card';
      actionsRow.style.display = 'flex';
      statusBadge.className = 'status-badge';
      statusBadge.textContent = '';
      updateConnector();
    }

    acceptBtn.addEventListener('click', applyAccept);
    rejectBtn.addEventListener('click', applyReject);
    resetBtn.addEventListener('click', applyReset);

    window.addEventListener('resize', updateConnector);
    window.addEventListener('load', updateConnector);
    setTimeout(updateConnector, 50);
  </script>
</body>
</html>

Collaborative Cloud Drafting and Peer Revision Workflows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 16px;
      min-height: 100vh;
    }

    .workflow-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Status Bar */
    .status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 20px;
      background: #e0f2fe;
      color: #0284c7;
      transition: background-color 0.25s ease, color 0.25s ease;
    }
    .status-badge.resolved {
      background: #dcfce7;
      color: #16a34a;
    }

    .thread-title {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    /* Thread Stream */
    .thread-stream {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Thread Connector Line */
    .thread-connector {
      position: absolute;
      left: 17px;
      top: 36px;
      bottom: 40px;
      width: 2px;
      background: #cbd5e1;
      border-radius: 2px;
      transition: background-color 0.25s ease;
    }

    .thread-stream.is-resolved .thread-connector {
      background: #86efac;
    }

    /* Comment Rows */
    .comment-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      position: relative;
      z-index: 1;
    }

    .comment-row.reply {
      margin-left: 20px;
    }

    .comment-row.reply::before {
      content: "";
      position: absolute;
      left: -20px;
      top: 16px;
      width: 14px;
      height: 14px;
      border-left: 2px solid #cbd5e1;
      border-bottom: 2px solid #cbd5e1;
      border-bottom-left-radius: 8px;
      pointer-events: none;
    }

    .thread-stream.is-resolved .comment-row.reply::before {
      border-color: #86efac;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      color: #ffffff;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .avatar-jordan {
      background: #6366f1;
    }
    .avatar-alex {
      background: #0ea5e9;
    }

    .bubble {
      flex: 1;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      transition: border-color 0.25s ease, background-color 0.25s ease;
    }

    .thread-stream.is-resolved .bubble {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }

    .comment-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }

    .author-name {
      font-weight: 600;
      color: #0f172a;
      font-size: 14px;
    }

    .timestamp {
      font-size: 12px;
      color: #94a3b8;
    }

    .comment-text {
      font-size: 14px;
      line-height: 1.45;
      color: #334155;
    }

    .mention {
      color: #2563eb;
      font-weight: 600;
      background: #eff6ff;
      padding: 1px 6px;
      border-radius: 4px;
      display: inline-block;
    }

    /* Action Toolbar */
    .actions-row {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      padding-top: 4px;
    }

    .btn-resolve {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #2563eb;
      color: #ffffff;
      border: none;
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-resolve:hover {
      background: #1d4ed8;
      box-shadow: 0 2px 6px rgba(29, 78, 216, 0.35);
    }

    .btn-resolve.resolved {
      background: #16a34a;
      box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
    }

    .btn-resolve.resolved:hover {
      background: #15803d;
    }

    .menu-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #475569;
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .menu-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
      border-color: #94a3b8;
    }

    /* Interactive hint */
    .hint {
      text-align: center;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      margin-top: -4px;
    }

    @media (max-width: 400px) {
      .comment-row.reply {
        margin-left: 12px;
      }
      .bubble {
        padding: 10px 12px;
      }
      .comment-text {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="workflow-container">
    <div class="status-bar">
      <div id="statusBadge" class="status-badge">
        <span>●</span> Active Thread
      </div>
      <span class="thread-title">Discussion #104</span>
    </div>

    <div id="threadStream" class="thread-stream">
      <div class="thread-connector" aria-hidden="true"></div>

      
      <div class="comment-row">
        <div class="avatar avatar-jordan" aria-label="Jordan's Avatar">J</div>
        <div class="bubble">
          <div class="comment-header">
            <span class="author-name">Jordan</span>
            <span class="timestamp">10m ago</span>
          </div>
          <div class="comment-text">
            Can we back this claim with our lab data? <span class="mention">@Alex</span>
          </div>
        </div>
      </div>

      
      <div class="comment-row reply">
        <div class="avatar avatar-alex" aria-label="Alex's Avatar">A</div>
        <div class="bubble">
          <div class="comment-header">
            <span class="author-name">Alex</span>
            <span class="timestamp">2m ago</span>
          </div>
          <div class="comment-text">
            Added the citation to Fig 3! Ready to close.
          </div>
        </div>
      </div>
    </div>

    
    <div class="actions-row">
      <button id="resolveBtn" class="btn-resolve" aria-label="Resolve comment thread">
        <span id="resolveIcon">✓</span>
        <span id="resolveText">Resolve</span>
      </button>
      <button class="menu-btn" title="More options" aria-label="More options">⋮</button>
    </div>

    <div class="hint" id="actionHint">Click "Resolve" to mark this thread as resolved</div>
  </div>

  <script>
    const resolveBtn = document.getElementById('resolveBtn');
    const resolveText = document.getElementById('resolveText');
    const statusBadge = document.getElementById('statusBadge');
    const threadStream = document.getElementById('threadStream');
    const actionHint = document.getElementById('actionHint');

    let isResolved = false;

    resolveBtn.addEventListener('click', () => {
      isResolved = !isResolved;
      if (isResolved) {
        resolveBtn.classList.add('resolved');
        resolveText.textContent = 'Resolved';
        statusBadge.classList.add('resolved');
        statusBadge.innerHTML = '<span>✓</span> Resolved';
        threadStream.classList.add('is-resolved');
        actionHint.textContent = 'Thread resolved and verified';
      } else {
        resolveBtn.classList.remove('resolved');
        resolveText.textContent = 'Resolve';
        statusBadge.classList.remove('resolved');
        statusBadge.innerHTML = '<span>●</span> Active Thread';
        threadStream.classList.remove('is-resolved');
        actionHint.textContent = 'Click "Resolve" to mark this thread as resolved';
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      user-select: none;
    }

    .banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px 14px;
      margin-bottom: 12px;
    }
    .banner-title {
      font-size: 14px;
      font-weight: 600;
      color: #1e40af;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .restore-btn {
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.08);
      transition: background 0.2s ease, opacity 0.2s ease;
    }
    .restore-btn:hover { background: #1d4ed8; }
    .restore-btn:active { opacity: 0.85; }

    .workspace {
      display: flex;
      gap: 12px;
      min-height: 290px;
    }

    /* Left: Document Canvas */
    .canvas {
      flex: 1.3;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .doc-header {
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #334155;
    }
    .doc-content {
      font-size: 14px;
      line-height: 1.6;
      color: #475569;
    }

    ins {
      background: #dcfce7;
      color: #15803d;
      text-decoration: none;
      padding: 2px 4px;
      border-radius: 4px;
      font-weight: 600;
    }
    del {
      background: #fee2e2;
      color: #b91c1c;
      text-decoration: line-through;
      padding: 2px 4px;
      border-radius: 4px;
      font-weight: 600;
    }

    .diff-legend {
      margin-top: auto;
      display: flex;
      gap: 12px;
      padding-top: 10px;
      border-top: 1px dashed #e2e8f0;
      font-size: 12px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .legend-tag {
      padding: 1px 6px;
      border-radius: 3px;
    }

    /* Right: Version History Sidebar */
    .sidebar {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .sidebar-header {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }

    .timeline {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      margin-top: 4px;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 14px;
      top: 12px;
      bottom: 12px;
      width: 2px;
      background: #e2e8f0;
      z-index: 1;
    }

    .snapshot {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 10px;
      background: #f8fafc;
      border: 1px solid rgba(0,0,0,0);
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    .snapshot:hover {
      background: #f1f5f9;
    }
    .snapshot.active {
      background: #eff6ff;
      box-shadow: 0 0 0 2px #2563eb;
    }

    .snap-node {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #94a3b8;
      margin-top: 5px;
      flex-shrink: 0;
    }
    .snapshot.active .snap-node {
      background: #2563eb;
    }

    .snap-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .snap-title {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .snap-time {
      font-size: 12px;
      color: #64748b;
    }

    @media (max-width: 520px) {
      .workspace { flex-direction: column; }
      .timeline::before { left: 14px; }
    }
  </style>
</head>
<body>

  <div class="banner">
    <div class="banner-title">
      <span>🕒</span> <span id="bannerText">Milestone: Final Draft 1</span>
    </div>
    <button class="restore-btn" id="restoreBtn" onclick="restoreVersion()">Restore this version</button>
  </div>

  <div class="workspace">
    
    <div class="canvas">
      <div class="doc-header">
        <span>📄</span> <span>Project Scope</span>
      </div>
      <div class="doc-content" id="canvasBody">
        
      </div>
      <div class="diff-legend">
        <div class="legend-item">
          <span class="legend-tag" style="background:#fee2e2; color:#b91c1c;">— Deletion</span>
        </div>
        <div class="legend-item">
          <span class="legend-tag" style="background:#dcfce7; color:#15803d;">+ Addition</span>
        </div>
      </div>
    </div>

    
    <div class="sidebar">
      <div class="sidebar-header">Version History</div>
      <div class="timeline">
        <div class="snapshot" id="snap-0" onclick="selectSnapshot(0)">
          <div class="snap-node"></div>
          <div class="snap-meta">
            <div class="snap-title">Current Draft</div>
            <div class="snap-time">10:45 AM</div>
          </div>
        </div>

        <div class="snapshot active" id="snap-1" onclick="selectSnapshot(1)">
          <div class="snap-node"></div>
          <div class="snap-meta">
            <div class="snap-title">🏷️ Final Draft 1</div>
            <div class="snap-time">Yesterday, 4:15 PM</div>
          </div>
        </div>

        <div class="snapshot" id="snap-2" onclick="selectSnapshot(2)">
          <div class="snap-node"></div>
          <div class="snap-meta">
            <div class="snap-title">Initial Brainstorm</div>
            <div class="snap-time">Oct 12</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const snapshots = [
      {
        banner: 'Current Draft (10:45 AM)',
        html: '<p>The team will adopt <ins>real-time cloud branches</ins> to coordinate peer reviews.</p><p><ins>Edits merge automatically without file conflicts.</ins></p>'
      },
      {
        banner: 'Milestone: Final Draft 1 (Yesterday, 4:15 PM)',
        html: '<p>The team will adopt <del>email attachments</del> <ins>real-time cloud branches</ins> to coordinate peer reviews.</p>'
      },
      {
        banner: 'Initial Brainstorm (Oct 12)',
        html: '<p>The team will adopt email attachments to coordinate peer reviews.</p>'
      }
    ];

    let currentIndex = 1;

    function renderView() {
      const data = snapshots[currentIndex];
      document.getElementById('bannerText').textContent = data.banner;
      document.getElementById('canvasBody').innerHTML = data.html;

      for (let i = 0; i < 3; i++) {
        const el = document.getElementById('snap-' + i);
        if (i === currentIndex) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      }
    }

    function selectSnapshot(index) {
      currentIndex = index;
      renderView();
    }

    function restoreVersion() {
      const btn = document.getElementById('restoreBtn');
      btn.textContent = 'Restored ✓';
      btn.style.background = '#15803d';
      setTimeout(() => {
        btn.textContent = 'Restore this version';
        btn.style.background = '#2563eb';
      }, 1500);
    }

    renderView();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Collaborative Lifecycle Flowchart</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .flowchart-wrapper {
      width: 100%;
      max-width: 680px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Top summary header */
    .flow-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

    .flow-title {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .flow-title span.badge {
      background: #e0e7ff;
      color: #3730a3;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
    }

    /* Horizontal Flow Container */
    .flowchart-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      position: relative;
    }

    /* Individual Flow Stage Card */
    .stage-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 175px;
      position: relative;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }

    .stage-card:hover {
      border-color: #94a3b8;
      background: #f8fafc;
    }

    .stage-card.active {
      border-color: var(--accent);
      background: #ffffff;
      box-shadow: 0 0 0 2px var(--accent-light);
    }

    /* Stage Header */
    .stage-top {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }

    .stage-num {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--accent);
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .stage-title {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1.2;
    }

    /* Visual Content Box */
    .stage-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 8px 6px;
      gap: 6px;
    }

    /* Theme colors */
    .card-1 { --accent: #2563eb; --accent-light: #bfdbfe; }
    .card-2 { --accent: #d97706; --accent-light: #fde68a; }
    .card-3 { --accent: #7c3aed; --accent-light: #ddd6fe; }
    .card-4 { --accent: #059669; --accent-light: #a7f3d0; }

    /* Flow Connectors */
    .connector-arrow {
      position: absolute;
      top: 50%;
      right: -10px;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      font-size: 9px;
      font-weight: 900;
      color: #64748b;
    }

    /* Stage 1 Content */
    .cursor-pill {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 9px;
      font-weight: 700;
      color: #ffffff;
      padding: 1px 4px;
      border-radius: 3px;
      vertical-align: middle;
    }
    .pill-blue { background: #2563eb; }
    .pill-green { background: #059669; }

    .code-line {
      font-family: monospace;
      font-size: 10.5px;
      line-height: 1.35;
      color: #1e293b;
    }

    /* Stage 2 Content */
    .diff-del {
      text-decoration: line-through;
      color: #991b1b;
      background: #fee2e2;
      padding: 0 2px;
      border-radius: 2px;
      font-weight: 700;
    }

    .diff-ins {
      color: #065f46;
      background: #a7f3d0;
      padding: 0 2px;
      border-radius: 2px;
      font-weight: 800;
    }

    .tag-mention {
      display: inline-block;
      background: #fef3c7;
      border: 1px solid #f59e0b;
      color: #78350f;
      font-weight: 800;
      font-size: 9.5px;
      padding: 1px 4px;
      border-radius: 4px;
    }

    .comment-preview {
      font-size: 9.5px;
      color: #78350f;
      line-height: 1.2;
      background: #fffbeb;
      border-left: 2px solid #f59e0b;
      padding: 3px 5px;
      border-radius: 0 4px 4px 0;
    }

    /* Stage 3 Content */
    .thread-msg {
      font-size: 9.5px;
      padding: 4px 6px;
      border-radius: 5px;
      line-height: 1.2;
    }
    .thread-alex {
      background: #ede9fe;
      border-left: 2px solid #7c3aed;
      color: #4c1d95;
    }
    .thread-sam {
      background: #f3e8ff;
      border-left: 2px solid #9333ea;
      color: #581c87;
    }

    /* Stage 4 Content */
    .milestone-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: #d1fae5;
      border: 1px solid #059669;
      color: #065f46;
      padding: 3px 6px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 800;
      text-align: center;
    }

    .final-line {
      font-size: 10px;
      font-weight: 700;
      color: #0f172a;
      text-align: center;
      line-height: 1.3;
    }

    /* Bottom Info & Controls Bar */
    .detail-card {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .detail-text {
      font-size: 11.5px;
      color: #334155;
      line-height: 1.4;
      flex: 1;
    }

    .detail-text b {
      color: #0f172a;
    }

    .controls-panel {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e293b;
      border-radius: 16px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s, border-color 0.15s;
    }

    .ctrl-btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    /* Responsive Design for smaller screens */
    @media (max-width: 540px) {
      .flowchart-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      .stage-card {
        min-height: 145px;
      }
      .connector-arrow {
        display: none;
      }
      .detail-card {
        flex-direction: column;
        align-items: stretch;
      }
      .controls-panel {
        justify-content: space-between;
      }
    }
  </style>
</head>
<body>

  <div class="flowchart-wrapper">
    
    <div class="flow-header">
      <div class="flow-title">
        <span>Collaborative Document Lifecycle</span>
        <span class="badge">4-Stage Workflow</span>
      </div>
    </div>

    
    <div class="flowchart-grid">
      
      <div class="stage-card card-1 active" data-step="0">
        <div class="stage-top">
          <div class="stage-num">1</div>
          <div class="stage-title">Draft</div>
        </div>
        <div class="stage-body">
          <div class="code-line">
            <span>Global winds</span>
            <span class="cursor-pill pill-blue">Alex |</span>
          </div>
          <div class="code-line">
            <span>shift coastal</span>
            <span class="cursor-pill pill-green">Sam |</span>
          </div>
        </div>
        <div class="connector-arrow">→</div>
      </div>

      
      <div class="stage-card card-2" data-step="1">
        <div class="stage-top">
          <div class="stage-num">2</div>
          <div class="stage-title">Suggest</div>
        </div>
        <div class="stage-body">
          <div class="code-line">
            <span class="diff-del">shift</span>
            <span class="diff-ins">accelerate</span>
          </div>
          <div class="comment-preview">
            <span class="tag-mention">@Sam</span> Stronger verb choice?
          </div>
        </div>
        <div class="connector-arrow">→</div>
      </div>

      
      <div class="stage-card card-3" data-step="2">
        <div class="stage-top">
          <div class="stage-num">3</div>
          <div class="stage-title">Dialogue</div>
        </div>
        <div class="stage-body">
          <div class="thread-msg thread-alex">
            <b>Alex:</b> Check velocity data?
          </div>
          <div class="thread-msg thread-sam">
            <b>Sam:</b> Agreed, matches source. 👍
          </div>
        </div>
        <div class="connector-arrow">→</div>
      </div>

      
      <div class="stage-card card-4" data-step="3">
        <div class="stage-top">
          <div class="stage-num">4</div>
          <div class="stage-title">Merge</div>
        </div>
        <div class="stage-body">
          <div class="milestone-badge">
            ✓ v1.0 Milestone
          </div>
          <div class="final-line">
            "Global winds accelerate coastal..."
          </div>
        </div>
      </div>
    </div>

    
    <div class="detail-card">
      <div class="detail-text" id="detailText">
        <b>Stage 1 · Draft:</b> Direct typing with real-time colored author presence and live cursor tracking.
      </div>
      <div class="controls-panel">
        <button class="ctrl-btn" id="prevBtn" title="Previous step">◀ Prev</button>
        <button class="ctrl-btn" id="nextBtn" title="Next step">Next ▶</button>
        <button class="ctrl-btn" id="playBtn" title="Toggle autoplay">⏸ Auto</button>
      </div>
    </div>
  </div>

  <script>
    const descriptions = [
      "<b>Stage 1 · Draft:</b> Direct typing with multi-author presence, live colored cursors, and simultaneous drafting.",
      "<b>Stage 2 · Suggest & Annotate:</b> Switch to Suggesting mode to track insertions/deletions and tag teammates with @mentions.",
      "<b>Stage 3 · Dialogue:</b> Discuss changes in threaded inline comments to evaluate rationale and reach team consensus.",
      "<b>Stage 4 · Merge & Milestone:</b> Accept/reject suggestions, resolve open comment threads, and tag a named milestone version."
    ];

    const cards = document.querySelectorAll('.stage-card');
    const detailText = document.getElementById('detailText');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function setStep(idx) {
      currentStep = (idx + 4) % 4;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === currentStep);
      });
      detailText.innerHTML = descriptions[currentStep];
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        setStep(currentStep + 1);
      }, 3000);
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
    }

    cards.forEach(card => {
      card.addEventListener('click', () => {
        setStep(parseInt(card.dataset.step, 10));
      });
    });

    prevBtn.addEventListener('click', () => {
      setStep(currentStep - 1);
    });

    nextBtn.addEventListener('click', () => {
      setStep(currentStep + 1);
    });

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.innerHTML = '⏸ Auto';
        startTimer();
      } else {
        playBtn.innerHTML = '▶ Auto';
        stopTimer();
      }
    });

    startTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Editor Toolbar Header */
    .editor-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
    }

    .doc-info {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }

    .doc-icon {
      color: #22b7ff;
      font-size: 16px;
    }

    .avatar-stack {
      display: flex;
      align-items: center;
      gap: -4px;
    }

    .avatar-badge {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      border: 2px solid #ffffff;
      margin-left: -6px;
      cursor: pointer;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .avatar-badge:first-child { margin-left: 0; }
    .avatar-badge:hover { transform: translateY(-2px); }

    .bg-maya { background: #7c3aed; }
    .bg-leo { background: #059669; }
    .bg-sam { background: #d97706; }

    /* Workspace Layout */
    .workspace {
      display: grid;
      grid-template-columns: 1fr 100px;
      gap: 10px;
      min-height: 250px;
    }

    @media (max-width: 440px) {
      .workspace {
        grid-template-columns: 1fr 80px;
      }
    }

    /* Main Document Canvas */
    .doc-canvas {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    .section-block {
      border: 1px dashed #cbd5e1;
      border-radius: 6px;
      padding: 10px;
      position: relative;
      background: #fafafa;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .section-block.active-maya {
      background: #f5f3ff;
      border-color: #c4b5fd;
    }

    .section-block.active-leo {
      background: #ecfdf5;
      border-color: #a7f3d0;
    }

    .section-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
    }

    /* Simulated Content Lines */
    .line-skeleton {
      height: 7px;
      border-radius: 4px;
      background: #e2e8f0;
      margin-bottom: 6px;
    }
    .line-skeleton.w-75 { width: 75%; }
    .line-skeleton.w-90 { width: 90%; }
    .line-skeleton.w-60 { width: 60%; }

    /* Collaborative Cursors */
    .cursor-wrap {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      pointer-events: none;
      z-index: 10;
      transition: all 0.4s ease;
    }

    .cursor-tag {
      font-size: 10px;
      font-weight: 700;
      color: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
      margin-bottom: -1px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

    .cursor-caret {
      width: 2px;
      height: 16px;
      animation: blink 1s step-start infinite;
    }

    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    /* Comments Margin */
    .margin-sidebar {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .comment-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px;
      position: relative;
      font-size: 11px;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .comment-card.active-sam {
      background: #fffbeb;
      border-color: #fde68a;
    }

    .comment-meta {
      font-weight: 700;
      color: #d97706;
      font-size: 10px;
      margin-bottom: 4px;
    }

    /* Bottom Role Nav */
    .role-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .role-btn {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .role-btn:hover {
      background: #f1f5f9;
    }

    .role-btn.active {
      color: #0f172a;
      border-color: #94a3b8;
      background: #e2e8f0;
    }

    .role-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
  </style>
</head>
<body>

  
  <div class="editor-top">
    <div class="doc-info">
      <span class="doc-icon">📄</span>
      <span>Team Draft</span>
    </div>
    <div class="avatar-stack">
      <div class="avatar-badge bg-maya" title="Maya">M</div>
      <div class="avatar-badge bg-leo" title="Leo">L</div>
      <div class="avatar-badge bg-sam" title="Sam">S</div>
    </div>
  </div>

  
  <div class="workspace">
    
    <div class="doc-canvas">
      
      
      <div class="section-block active-maya" id="secMaya">
        <div class="section-label">Section 1</div>
        <div class="line-skeleton w-90"></div>
        <div class="line-skeleton w-60"></div>
        
        
        <div class="cursor-wrap" style="top: 24px; left: 62%;">
          <div class="cursor-tag bg-maya">Maya</div>
          <div class="cursor-caret bg-maya"></div>
        </div>
      </div>

      
      <div class="section-block active-leo" id="secLeo">
        <div class="section-label">Section 2</div>
        <div class="line-skeleton w-75"></div>
        <div class="line-skeleton w-90"></div>
        
        
        <div class="cursor-wrap" style="top: 36px; left: 45%;">
          <div class="cursor-tag bg-leo">Leo</div>
          <div class="cursor-caret bg-leo"></div>
        </div>
      </div>

    </div>

    
    <div class="margin-sidebar">
      <div class="comment-card active-sam" id="cardSam">
        <div class="comment-meta">Sam</div>
        <div class="line-skeleton w-90"></div>
        <div class="line-skeleton w-75"></div>

        
        <div class="cursor-wrap" style="bottom: 8px; right: 8px;">
          <div class="cursor-tag bg-sam">Sam</div>
          <div class="cursor-caret bg-sam"></div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="role-bar">
    <button class="role-btn active" onclick="focusUser('all')">
      <span>●</span> All Live
    </button>
    <button class="role-btn" onclick="focusUser('maya')">
      <span class="role-indicator bg-maya"></span> Maya (Sec 1)
    </button>
    <button class="role-btn" onclick="focusUser('leo')">
      <span class="role-indicator bg-leo"></span> Leo (Sec 2)
    </button>
    <button class="role-btn" onclick="focusUser('sam')">
      <span class="role-indicator bg-sam"></span> Sam (Margin)
    </button>
  </div>

  <script>
    function focusUser(user) {
      const btns = document.querySelectorAll('.role-btn');
      btns.forEach(b => b.classList.remove('active'));

      const secMaya = document.getElementById('secMaya');
      const secLeo = document.getElementById('secLeo');
      const cardSam = document.getElementById('cardSam');

      if (user === 'all') {
        btns[0].classList.add('active');
        secMaya.classList.add('active-maya');
        secLeo.classList.add('active-leo');
        cardSam.classList.add('active-sam');
        secMaya.style.opacity = '1';
        secLeo.style.opacity = '1';
        cardSam.style.opacity = '1';
      } else if (user === 'maya') {
        btns[1].classList.add('active');
        secMaya.classList.add('active-maya');
        secLeo.classList.remove('active-leo');
        cardSam.classList.remove('active-sam');
        secMaya.style.opacity = '1';
        secLeo.style.opacity = '0.4';
        cardSam.style.opacity = '0.4';
      } else if (user === 'leo') {
        btns[2].classList.add('active');
        secMaya.classList.remove('active-maya');
        secLeo.classList.add('active-leo');
        cardSam.classList.remove('active-sam');
        secMaya.style.opacity = '0.4';
        secLeo.style.opacity = '1';
        cardSam.style.opacity = '0.4';
      } else if (user === 'sam') {
        btns[3].classList.add('active');
        secMaya.classList.remove('active-maya');
        secLeo.classList.remove('active-leo');
        cardSam.classList.add('active-sam');
        secMaya.style.opacity = '0.4';
        secLeo.style.opacity = '0.4';
        cardSam.style.opacity = '1';
      }
    }
  </script>
</body>
</html>

Examining Complex Ideas Clearly and Accurately

Including Relevant Facts, Definitions, and Details

Drafting Complex Procedural and Scientific Explanations

Writing Scientific Reports for a Specific Purpose

Using Headings, Graphics, and Callouts in Technical Documents

Writing Conclusions That Support Informational Explanations

Technical, Scientific, and Explanatory Exposition

Updating Individual and Shared Writing Products

Publishing Multimodal Texts with Visual Features

Integrating Hyperlinks and Interactive Source Annotations

Publishing Ethical and Accessible Digital Content

Digital Composition, Hypermedia, and Collaborative Publishing

Planning Literary Texts for Purpose and Audience

Experimenting with Text Structures in Creative Writing

Using Literary Devices in Original Writing

Creating Hybrid Text Forms

Editing Literary Texts for Effect

Creating Literary Texts

Planning Informative Texts

Planning Persuasive Texts

Planning Analytical and Critical Texts

Selecting Text Structures for Purpose

Selecting Language Features for Purpose

Planning and Structuring Texts for Different Purposes

Using Technology to Produce, Publish, and Update Shared Writing Products

Linking Written Analysis to Dynamic Digital Information Sources

Displaying Social Studies Information Flexibly and Dynamically

Collaborating Digitally on Joint Civic and Policy Projects

Integrating Multimedia Elements Into High School Digital Essays

Developing a Comprehensive High School Editing and Polishing Routine

Publishing and Disseminating Research to Authentic Public Audiences

social-studies

Digital Collaboration, Multimedia, and Publishing in Social Studies (Grades 9-10)

Organising and Expanding Ideas in Writing

Editing for Clarity and Precision

Publishing Multimodal Texts

Creating Reflective Texts

Comparing Text Structures Across Texts on the Same Topic

Refining, Publishing and Extending Texts

Using the Internet to Produce Writing

Publishing Writing Online

Using Hyperlinks and Dynamic Display in Digital Writing

Writing Routinely in Short Time Frames

Writing Routinely Over Extended Time Frames

Writing for a Range of Tasks, Purposes, and Audiences

Digital Publishing and Routine Writing

Using Technology to Produce Discipline Writing

Using the Internet for Discipline Writing

Publishing Discipline Writing Digitally

Using Digital Formatting Tools Effectively in Discipline Writing

Linking to Other Information in Digital Discipline Writing

Updating Shared Writing Products

Using Technology to Publish Discipline Writing

Caracterización y cobertura de los medios masivos tradicionales y digitales

Audiencias, segmentación y canales de difusión mediática

Recursos técnicos, códigos y participación del usuario en los medios

Organización y almacenamiento digital de fuentes

Estrategias de búsqueda y recuperación en hemerotecas y bases digitales

Criterios de selección de información mediática según el propósito comunicativo

Contrastación entre la información de los medios y la realidad comunitaria

Análisis de la intención comunicativa en discursos informativos y persuasivos

Revelación de intereses políticos e ideológicos en la prensa y la televisión

Análisis crítico de la estereotipación y la representación social en medios

Taller de investigación mediática: monitoreo y triangulación de fuentes

Medios de comunicación masiva: análisis discursivo e investigación

OGE.10.W.6

OGE.10.W.6

Aligned learning resources

Related diagrams