example.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<title>8 ball · a complete example of the paired reading</title>
<meta name="description" content="A complete example of the 8ball paired reading — two fixed synthetic sheets read beside each other with the relation layer between them. The dyad is free.">
<meta name="robots" content="index,follow">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32.png">
<link rel="canonical" href="https://the-eight-ball.netlify.app/example">
<link rel="stylesheet" href="/ui/shell.css">
<link rel="stylesheet" href="/ui/experience.css">
<style>
  .example-banner { border: 1px solid var(--rule, #444); padding: 10px 12px; margin: 12px 16px 0; font-size: 0.78rem; letter-spacing: 0.02em; opacity: 0.9; }
  .example-banner strong { font-weight: 600; }
  .example-foot { margin: 8px 16px 24px; }
</style>
</head>
<body>

<header class="topbar">
  <a class="wordmark" href="/" aria-label="8 ball — back to the sheet">8 ball</a>
</header>

<main class="stage">
  <p class="example-banner" id="example-banner" role="note"><strong>example</strong> · a fixed pair, not yours · your own pair opens free</p>
  <h1 class="visually-hidden" id="example-title">a complete example of the paired reading</h1>
  <!-- the paired-reading screen is injected here by ui/dyad.js, exactly as on the sheet -->
  <div class="result-controls rail-group example-foot" id="rail-read" role="group" aria-label="the dyad"></div>
  <p class="example-banner" role="note">example · a fixed pair, not yours · your own pair opens free</p>
  <p class="example-foot"><a class="text-link" href="/">← back to the sheet</a></p>
</main>

<script type="module">
import { initExamplePage } from './ui/example.js';
initExamplePage({ stage: document.querySelector('.stage'), controls: document.getElementById('rail-read') });
</script>
</body>
</html>