<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debate | Dialectical Reasoning by Maslow AI</title>
<!-- Maslow AI Typography: Manrope + JetBrains Mono -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* =====================================================
MASLOW AI DESIGN SYSTEM
Skills Applied: maslow-brand, accessibility-design, frontend-design
===================================================== */
:root {
/* Maslow Core Palette (constant) */
--maslow-teal: #6DC4AD;
--maslow-pink: #EE7BB3;
--maslow-purple: #401877;
--maslow-blue: #469DBB;
--maslow-orange: #F3A326;
--maslow-purple-light: #A070A6;
/* Debate Tool Color */
--debate: #A070A6;
--debate-light: #F5F0F5;
/* Dialectical Colors */
--thesis: #469DBB;
--antithesis: #D52C2C;
--synthesis: #A070A6;
/* Typography - Manrope (maslow-brand) */
--font-display: 'Manrope', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Spacing Scale (maslow-brand) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
/* Accent Line (maslow-brand signature) */
--accent-line: 3px;
}
/* ===== LIGHT MODE (Default) ===== */
[data-theme="light"] {
--bg: #E6EAF3;
--surface: #FFFFFF;
--surface-alt: #EEEEEE;
--text: #333333;
--text-secondary: #666666;
--text-muted: #A5A5A5;
--border: #D0D5E0;
--nav-bg: rgba(255, 255, 255, 0.9);
--code-bg: #F5F7FA;
--selection-bg: #F5F0F5;
}
/* ===== DARK MODE ===== */
[data-theme="dark"] {
--bg: #121D35;
--surface: #1A2847;
--surface-alt: #243356;
--text: #FFFFFF;
--text-secondary: #B8C4D9;
--text-muted: #7A8BA8;
--border: #3A4A6B;
--nav-bg: rgba(18, 29, 53, 0.95);
--code-bg: #243356;
--selection-bg: rgba(160, 112, 166, 0.15);
}
/* ===== RESET ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
background: var(--bg);
color: var(--text-secondary);
transition: background-color 0.4s ease, color 0.4s ease;
-webkit-font-smoothing: antialiased;
}
::selection {
background: var(--selection-bg);
color: var(--text);
}
/* ===== ACCESSIBILITY (accessibility-design skill) ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
:focus-visible {
outline: 2px solid var(--maslow-teal);
outline-offset: 2px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--text);
font-weight: 800;
line-height: 1.1;
}
.headline-bold {
font-weight: 800;
color: var(--text);
}
.headline-light {
font-weight: 300;
color: var(--text-muted);
}
/* ===== LAYOUT ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
/* ===== NAVIGATION ===== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--nav-bg);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
transition: background-color 0.4s ease, border-color 0.4s ease;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.nav-brand {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
}
.nav-logo {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--maslow-pink), var(--maslow-purple-light), var(--maslow-teal));
border-radius: var(--radius-md);
}
.nav-wordmark {
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-title {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
color: var(--text);
letter-spacing: 0.02em;
}
.nav-subtitle {
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.nav-links {
display: flex;
align-items: center;
gap: var(--space-8);
list-style: none;
}
.nav-link {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
.nav-link:hover {
color: var(--text);
}
.nav-actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
/* Theme Toggle */
.theme-toggle {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
color: var(--text-secondary);
transition: all 0.2s ease;
}
.theme-toggle:hover {
border-color: var(--debate);
color: var(--debate);
}
.theme-toggle svg {
width: 20px;
height: 20px;
}
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }
[data-theme="light"] .icon-sun { display: block; }
[data-theme="light"] .icon-moon { display: none; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
border: none;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-primary {
background: var(--debate);
color: #FFFFFF;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(160, 112, 166, 0.3);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.btn-ghost:hover {
border-color: var(--text-muted);
color: var(--text);
}
/* ===== HERO SECTION ===== */
.hero {
padding-top: 160px;
padding-bottom: var(--space-24);
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.hero-content {
position: relative;
z-index: 2;
}
/* Accent line (maslow-brand signature) */
.accent-line {
width: 60px;
height: var(--accent-line);
background: var(--debate);
margin-bottom: var(--space-6);
animation: lineGrow 0.6s ease-out;
}
@keyframes lineGrow {
from { width: 0; }
to { width: 60px; }
}
.hero-eyebrow {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--debate);
margin-bottom: var(--space-4);
animation: fadeUp 0.6s ease-out 0.1s both;
}
.hero-title {
font-size: clamp(48px, 8vw, 72px);
margin-bottom: var(--space-6);
animation: fadeUp 0.6s ease-out 0.2s both;
}
.hero-description {
font-size: 18px;
line-height: 1.7;
max-width: 480px;
margin-bottom: var(--space-8);
animation: fadeUp 0.6s ease-out 0.3s both;
}
.hero-actions {
display: flex;
gap: var(--space-4);
animation: fadeUp 0.6s ease-out 0.4s both;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hero Visual */
.hero-visual {
position: relative;
height: 480px;
animation: fadeIn 0.8s ease-out 0.3s both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Dialectic Diagram */
.dialectic-diagram {
position: relative;
width: 100%;
height: 100%;
}
.dialect-box {
position: absolute;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
width: 140px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dialect-box:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.dialect-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: white;
margin-bottom: var(--space-3);
}
.dialect-icon.thesis { background: var(--thesis); }
.dialect-icon.antithesis { background: var(--antithesis); }
.dialect-icon.synthesis { background: var(--synthesis); }
.dialect-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
margin-bottom: 2px;
}
.dialect-desc {
font-size: 11px;
color: var(--text-muted);
}
.box-thesis { top: 40px; left: 10%; animation: cardFloat 0.6s ease-out 0.4s both; }
.box-antithesis { top: 40px; right: 10%; animation: cardFloat 0.6s ease-out 0.5s both; }
.box-synthesis { bottom: 60px; left: 50%; transform: translateX(-50%); animation: cardFloat 0.6s ease-out 0.6s both; }
.box-synthesis:hover { transform: translateX(-50%) translateY(-4px); }
@keyframes cardFloat {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Connection lines */
.connections {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.connections svg {
width: 100%;
height: 100%;
}
.connections path {
fill: none;
stroke: var(--border);
stroke-width: 2;
stroke-dasharray: 8 4;
}
.connections path.active {
stroke: var(--debate);
stroke-dasharray: none;
}
/* ===== FEATURES SECTION ===== */
.features {
padding: var(--space-24) 0;
background: var(--surface);
transition: background-color 0.4s ease;
}
.section-header {
text-align: center;
margin-bottom: var(--space-16);
}
.section-eyebrow {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--debate);
margin-bottom: var(--space-4);
}
.section-title {
font-size: clamp(32px, 5vw, 48px);
margin-bottom: var(--space-4);
}
.section-description {
font-size: 18px;
color: var(--text-secondary);
max-width: 560px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
.feature-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
transition: all 0.3s ease;
position: relative;
}
/* Maslow hover state: left border reveal */
.feature-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: var(--debate);
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
transition: width 0.3s ease;
}
.feature-card:hover::before {
width: var(--accent-line);
}
.feature-card:hover {
border-color: var(--debate);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.feature-icon {
width: 48px;
height: 48px;
background: var(--debate-light);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-5);
color: var(--debate);
}
[data-theme="dark"] .feature-icon {
background: rgba(160, 112, 166, 0.15);
}
.feature-icon svg {
width: 24px;
height: 24px;
}
.feature-title {
font-size: 20px;
font-weight: 700;
margin-bottom: var(--space-3);
}
.feature-text {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ===== DARK BAND SECTION (maslow-brand pattern) ===== */
.dark-band {
background: #121D35;
color: #FFFFFF;
padding: var(--space-24) 0;
}
.dark-band .section-eyebrow {
color: var(--maslow-teal);
}
.dark-band .section-title {
color: #FFFFFF;
}
.dark-band .section-description {
color: #B8C4D9;
}
/* Demo Toggle */
.demo-toggle {
display: flex;
justify-content: center;
margin-bottom: var(--space-12);
}
.toggle-group {
display: inline-flex;
background: rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
padding: 4px;
}
.toggle-btn {
padding: var(--space-3) var(--space-6);
background: transparent;
border: none;
color: #B8C4D9;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
}
.toggle-btn.active {
background: #FFFFFF;
color: #121D35;
}
.toggle-btn:not(.active):hover {
color: #FFFFFF;
}
/* Demo Grid */
.demo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
.demo-panel {
background: #1A2847;
border: 1px solid #3A4A6B;
border-radius: var(--radius-lg);
overflow: hidden;
}
.demo-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
background: #243356;
border-bottom: 1px solid #3A4A6B;
}
.demo-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #7A8BA8;
}
.demo-badge {
background: var(--debate);
color: #FFFFFF;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
}
.demo-content {
padding: var(--space-6);
}
.demo-content pre {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.7;
color: #B8C4D9;
overflow-x: auto;
}
.json-key { color: var(--debate); }
.json-string { color: var(--maslow-teal); }
.json-number { color: var(--maslow-orange); }
.json-boolean { color: var(--maslow-blue); }
/* Card View Styling */
.card-view {
display: block;
}
.card-view.hidden {
display: none;
}
.json-view {
display: none;
}
.json-view.active {
display: block;
}
/* Argument Card */
.argument-card {
background: #1A2847;
border: 1px solid #3A4A6B;
border-radius: var(--radius-lg);
overflow: hidden;
}
.argument-header {
padding: var(--space-5);
border-bottom: 1px solid #3A4A6B;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.argument-type-tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 10px;
background: rgba(70, 157, 187, 0.2);
color: var(--thesis);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
border-radius: 20px;
margin-bottom: var(--space-3);
}
.argument-claim {
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
max-width: 400px;
}
.confidence-gauge {
text-align: center;
}
.confidence-ring {
position: relative;
width: 64px;
height: 64px;
}
.confidence-ring svg {
transform: rotate(-90deg);
}
.confidence-bg {
fill: none;
stroke: #3A4A6B;
stroke-width: 4;
}
.confidence-fill {
fill: none;
stroke: var(--thesis);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 75 100;
}
.confidence-value {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: var(--thesis);
}
.confidence-label {
font-size: 10px;
color: #7A8BA8;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: var(--space-1);
}
.argument-premises {
padding: var(--space-5);
border-bottom: 1px solid #3A4A6B;
}
.premises-title {
font-size: 11px;
font-weight: 600;
color: #7A8BA8;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.premise-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.premise-num {
width: 18px;
height: 18px;
background: rgba(70, 157, 187, 0.2);
color: var(--thesis);
font-size: 11px;
font-weight: 600;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.premise-text {
font-size: 13px;
color: #B8C4D9;
}
.argument-conclusion {
padding: var(--space-5);
background: rgba(70, 157, 187, 0.1);
border-bottom: 1px solid #3A4A6B;
}
.conclusion-title {
font-size: 11px;
font-weight: 600;
color: var(--thesis);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-2);
}
.conclusion-text {
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
}
.argument-meta {
display: grid;
grid-template-columns: 1fr 1fr;
}
.meta-col {
padding: var(--space-5);
}
.meta-col:first-child {
border-right: 1px solid #3A4A6B;
}
.meta-title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.meta-title.strengths { color: var(--maslow-teal); }
.meta-title.weaknesses { color: var(--maslow-orange); }
.meta-item {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: 12px;
color: #B8C4D9;
margin-bottom: var(--space-2);
}
.meta-bullet.strengths { color: var(--maslow-teal); }
.meta-bullet.weaknesses { color: var(--maslow-orange); }
/* ===== API SECTION ===== */
.api {
padding: var(--space-24) 0;
background: var(--bg);
transition: background-color 0.4s ease;
}
.api-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
}
.api-table th {
text-align: left;
padding: var(--space-4) var(--space-5);
background: var(--surface-alt);
font-size: 13px;
font-weight: 600;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.api-table td {
padding: var(--space-4) var(--space-5);
font-size: 14px;
color: var(--text-secondary);
border-bottom: 1px solid var(--border);
}
.api-table tr:last-child td {
border-bottom: none;
}
.api-table code {
font-family: var(--font-mono);
font-size: 13px;
color: var(--debate);
}
.badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 4px 8px;
border-radius: var(--radius-sm);
}
.badge-type {
background: rgba(109, 196, 173, 0.15);
color: var(--maslow-teal);
}
.badge-required {
background: rgba(243, 163, 38, 0.15);
color: var(--maslow-orange);
}
.badge-optional {
background: var(--surface-alt);
color: var(--text-muted);
}
/* ===== FOOTER ===== */
.footer {
padding: var(--space-12) 0;
border-top: 1px solid var(--border);
text-align: center;
background: var(--bg);
transition: background-color 0.4s ease, border-color 0.4s ease;
}
.footer-text {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: 12px;
font-weight: 500;
color: var(--maslow-purple-light);
padding: var(--space-2) var(--space-4);
background: rgba(64, 24, 119, 0.08);
border-radius: 20px;
}
[data-theme="dark"] .footer-badge {
background: rgba(160, 112, 166, 0.15);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero-description {
margin-left: auto;
margin-right: auto;
}
.hero-actions {
justify-content: center;
}
.hero-visual {
display: none;
}
.features-grid {
grid-template-columns: 1fr;
}
.demo-grid {
grid-template-columns: 1fr;
}
.argument-meta {
grid-template-columns: 1fr;
}
.meta-col:first-child {
border-right: none;
border-bottom: 1px solid #3A4A6B;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero-title {
font-size: 40px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav" role="navigation" aria-label="Main navigation">
<div class="container nav-inner">
<a href="#" class="nav-brand" aria-label="Maslow AI Home">
<div class="nav-logo" aria-hidden="true"></div>
<div class="nav-wordmark">
<span class="nav-title">MASLOW | AI</span>
<span class="nav-subtitle">think-mcp</span>
</div>
</a>
<ul class="nav-links">
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#demo" class="nav-link">Demo</a></li>
<li><a href="#api" class="nav-link">API</a></li>
</ul>
<div class="nav-actions">
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
<svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
<svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>
</button>
<a href="#" class="btn btn-primary">Get Started</a>
</div>
</div>
</nav>
<main role="main">
<!-- Hero Section -->
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<div class="hero-grid">
<div class="hero-content">
<div class="accent-line" aria-hidden="true"></div>
<p class="hero-eyebrow">Debate Tool</p>
<h1 id="hero-title">
<span class="headline-bold">Challenge</span><br>
<span class="headline-light">your ideas through<br>dialectical reasoning</span>
</h1>
<p class="hero-description">
Stress-test your ideas through structured argumentation. Build thesis, confront with antithesis, and synthesize stronger conclusions.
</p>
<div class="hero-actions">
<a href="#demo" class="btn btn-primary">Try the Demo</a>
<a href="#api" class="btn btn-ghost">View API</a>
</div>
</div>
<div class="hero-visual" aria-hidden="true">
<div class="dialectic-diagram">
<div class="connections">
<svg viewBox="0 0 400 500">
<path d="M100 120 Q200 200 200 280" class="active"/>
<path d="M300 120 Q200 200 200 280"/>
</svg>
</div>
<div class="dialect-box box-thesis">
<div class="dialect-icon thesis">T</div>
<p class="dialect-title">Thesis</p>
<p class="dialect-desc">Initial position with premises</p>
</div>
<div class="dialect-box box-antithesis">
<div class="dialect-icon antithesis">A</div>
<p class="dialect-title">Antithesis</p>
<p class="dialect-desc">Opposing argument</p>
</div>
<div class="dialect-box box-synthesis">
<div class="dialect-icon synthesis">S</div>
<p class="dialect-title">Synthesis</p>
<p class="dialect-desc">Integrate both perspectives</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="features" aria-labelledby="features-title">
<div class="container">
<header class="section-header">
<p class="section-eyebrow">Features</p>
<h2 id="features-title" class="section-title">Why Use Debate?</h2>
<p class="section-description">
Find weaknesses in arguments before someone else does.
</p>
</header>
<div class="features-grid">
<article class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3 class="feature-title">Thesis Construction</h3>
<p class="feature-text">
Build well-structured arguments with clear premises, conclusions, and confidence levels.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
</svg>
</div>
<h3 class="feature-title">Antithesis Generation</h3>
<p class="feature-text">
Systematically challenge your position with opposing viewpoints and counter-arguments.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="feature-title">Synthesis Integration</h3>
<p class="feature-text">
Combine insights from both sides into stronger, more nuanced conclusions.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
</div>
<h3 class="feature-title">Argument Tracking</h3>
<p class="feature-text">
Track relationships between arguments - what supports, contradicts, or responds to what.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<h3 class="feature-title">Strength Analysis</h3>
<p class="feature-text">
Identify and document both strengths and weaknesses in each argument.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"/>
</svg>
</div>
<h3 class="feature-title">Confidence Scoring</h3>
<p class="feature-text">
Assign and track confidence levels as arguments evolve through the debate.
</p>
</article>
</div>
</div>
</section>
<!-- Demo Section (Dark Band) -->
<section id="demo" class="dark-band" aria-labelledby="demo-title">
<div class="container">
<header class="section-header">
<p class="section-eyebrow">Demo</p>
<h2 id="demo-title" class="section-title">See It in Action</h2>
<p class="section-description">
A remote work debate with structured argumentation
</p>
</header>
<div class="demo-toggle">
<div class="toggle-group" role="tablist" aria-label="View toggle">
<button class="toggle-btn active" data-view="cards" role="tab" aria-selected="true">Card View</button>
<button class="toggle-btn" data-view="json" role="tab" aria-selected="false">JSON View</button>
</div>
</div>
<!-- Card View -->
<div class="card-view" id="cardView" role="tabpanel">
<div class="argument-card">
<div class="argument-header">
<div>
<div class="argument-type-tag">Thesis</div>
<h3 class="argument-claim">Remote-first companies outperform hybrid companies in employee productivity and retention</h3>
</div>
<div class="confidence-gauge">
<div class="confidence-ring">
<svg width="64" height="64" viewBox="0 0 36 36">
<circle class="confidence-bg" cx="18" cy="18" r="15.5"/>
<circle class="confidence-fill" cx="18" cy="18" r="15.5"/>
</svg>
<div class="confidence-value">75%</div>
</div>
<span class="confidence-label">Confidence</span>
</div>
</div>
<div class="argument-premises">
<h4 class="premises-title">Premises</h4>
<div class="premise-item">
<span class="premise-num">1</span>
<p class="premise-text">Studies show remote workers report 13% higher productivity</p>
</div>
<div class="premise-item">
<span class="premise-num">2</span>
<p class="premise-text">Remote companies have access to global talent pool</p>
</div>
<div class="premise-item">
<span class="premise-num">3</span>
<p class="premise-text">Employees save 2+ hours daily on commute</p>
</div>
</div>
<div class="argument-conclusion">
<h4 class="conclusion-title">Conclusion</h4>
<p class="conclusion-text">Companies should adopt remote-first policies to maximize productivity</p>
</div>
<div class="argument-meta">
<div class="meta-col">
<h4 class="meta-title strengths">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
</svg>
Strengths
</h4>
<div class="meta-item">
<span class="meta-bullet strengths">+</span>
Backed by productivity studies
</div>
<div class="meta-item">
<span class="meta-bullet strengths">+</span>
Proven by GitLab, Zapier
</div>
</div>
<div class="meta-col">
<h4 class="meta-title weaknesses">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"/>
</svg>
Weaknesses
</h4>
<div class="meta-item">
<span class="meta-bullet weaknesses">-</span>
Not all industries applicable
</div>
<div class="meta-item">
<span class="meta-bullet weaknesses">-</span>
Junior mentorship concerns
</div>
</div>
</div>
</div>
</div>
<!-- JSON View -->
<div class="json-view" id="jsonView" role="tabpanel">
<div class="demo-grid">
<div class="demo-panel">
<div class="demo-header">
<span class="demo-label">Input</span>
<span class="demo-badge">Thesis</span>
</div>
<div class="demo-content">
<pre><code>{
<span class="json-key">"claim"</span>: <span class="json-string">"Remote-first outperforms hybrid"</span>,
<span class="json-key">"premises"</span>: [
<span class="json-string">"13% higher productivity"</span>,
<span class="json-string">"Global talent pool access"</span>,
<span class="json-string">"2+ hours saved on commute"</span>
],
<span class="json-key">"argumentType"</span>: <span class="json-string">"thesis"</span>,
<span class="json-key">"confidence"</span>: <span class="json-number">0.75</span>,
<span class="json-key">"nextArgumentNeeded"</span>: <span class="json-boolean">true</span>
}</code></pre>
</div>
</div>
<div class="demo-panel">
<div class="demo-header">
<span class="demo-label">Output</span>
</div>
<div class="demo-content">
<pre><code>{
<span class="json-key">"argumentId"</span>: <span class="json-string">"thesis-001"</span>,
<span class="json-key">"strengths"</span>: [
<span class="json-string">"Backed by studies"</span>,
<span class="json-string">"Proven by GitLab"</span>
],
<span class="json-key">"weaknesses"</span>: [
<span class="json-string">"Not all industries"</span>,
<span class="json-string">"Mentorship concerns"</span>
],
<span class="json-key">"suggestedNextTypes"</span>: [<span class="json-string">"antithesis"</span>],
<span class="json-key">"nextArgumentNeeded"</span>: <span class="json-boolean">true</span>
}</code></pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- API Section -->
<section id="api" class="api" aria-labelledby="api-title">
<div class="container">
<header class="section-header">
<p class="section-eyebrow">Reference</p>
<h2 id="api-title" class="section-title">API Parameters</h2>
</header>
<table class="api-table">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Type</th>
<th scope="col">Required</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>claim</code></td>
<td><span class="badge badge-type">string</span></td>
<td><span class="badge badge-required">Required</span></td>
<td>Main assertion being made</td>
</tr>
<tr>
<td><code>premises</code></td>
<td><span class="badge badge-type">string[]</span></td>
<td><span class="badge badge-required">Required</span></td>
<td>Supporting reasons for the claim</td>
</tr>
<tr>
<td><code>argumentType</code></td>
<td><span class="badge badge-type">enum</span></td>
<td><span class="badge badge-required">Required</span></td>
<td>thesis | antithesis | synthesis | objection | rebuttal</td>
</tr>
<tr>
<td><code>confidence</code></td>
<td><span class="badge badge-type">number</span></td>
<td><span class="badge badge-required">Required</span></td>
<td>0-1 belief level in the argument</td>
</tr>
<tr>
<td><code>nextArgumentNeeded</code></td>
<td><span class="badge badge-type">boolean</span></td>
<td><span class="badge badge-required">Required</span></td>
<td>Whether another argument is needed</td>
</tr>
<tr>
<td><code>respondsTo</code></td>
<td><span class="badge badge-type">string</span></td>
<td><span class="badge badge-optional">Optional</span></td>
<td>ID of argument being responded to</td>
</tr>
<tr>
<td><code>contradicts</code></td>
<td><span class="badge badge-type">string[]</span></td>
<td><span class="badge badge-optional">Optional</span></td>
<td>IDs of arguments this opposes</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container">
<p class="footer-text">think-mcp Debate Tool — Dialectical Reasoning</p>
<div class="footer-badge">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
Powered by Maslow AI
</div>
</div>
</footer>
<!-- Theme Toggle Script -->
<script>
(function() {
const html = document.documentElement;
const toggle = document.getElementById('themeToggle');
// Check saved preference or system preference
const saved = localStorage.getItem('maslow-theme');
if (saved) {
html.setAttribute('data-theme', saved);
} else {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
html.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
}
toggle.addEventListener('click', function() {
const current = html.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', next);
localStorage.setItem('maslow-theme', next);
// Screen reader announcement
const announcement = document.createElement('div');
announcement.setAttribute('role', 'status');
announcement.setAttribute('aria-live', 'polite');
announcement.className = 'sr-only';
announcement.textContent = `Switched to ${next} mode`;
document.body.appendChild(announcement);
setTimeout(() => announcement.remove(), 1000);
});
// View Toggle
const toggleBtns = document.querySelectorAll('.toggle-btn');
const cardView = document.getElementById('cardView');
const jsonView = document.getElementById('jsonView');
toggleBtns.forEach(btn => {
btn.addEventListener('click', function() {
toggleBtns.forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-selected', 'false');
});
this.classList.add('active');
this.setAttribute('aria-selected', 'true');
const view = this.getAttribute('data-view');
if (view === 'json') {
cardView.classList.add('hidden');
jsonView.classList.add('active');
} else {
cardView.classList.remove('hidden');
jsonView.classList.remove('active');
}
});
});
})();
</script>
</body>
</html>
