diff --git a/page.html b/page.html
new file mode 100644
index 0000000..de6d660
--- /dev/null
+++ b/page.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark">
+<meta name="theme-color" content="#15141a">
+<title>webl — заметки</title>
+<style>
+:root {
+    color-scheme: dark;
+    --bg: #15141a;
+    --bg-2: #121117;
+    --surface: #1e1d24;
+    --surface-2: #26252e;
+    --surface-3: #302f3a;
+    --line: #34333f;
+    --line-strong: #4b4a59;
+    --ink: #f4f4f6;
+    --ink-2: #b8b7c2;
+    --ink-3: #8f8e9b;
+    --accent: #a78bfa;
+    --accent-hover: #bdadff;
+    --accent-soft: color-mix(in srgb, var(--accent) 32%, transparent);
+    --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
+    --on-accent: #171224;
+    --safe: #4fd6a6;
+    --warn: #eec25f;
+    --danger: #ff8a75;
+    --float: 0 16px 40px -16px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .25);
+    --ease: cubic-bezier(.22, 1, .36, 1);
+    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+    margin: 0;
+    min-height: 100dvh;
+    font: 16px/1.6 var(--sans);
+    color: var(--ink);
+    background: radial-gradient(760px 380px at 50% -6%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), var(--bg);
+    -webkit-font-smoothing: antialiased;
+    letter-spacing: .01em;
+}
+::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
+
+.wrap {
+    width: min(100% - 32px, 880px);
+    margin-inline: auto;
+    padding-block: clamp(36px, 7vh, 56px) clamp(48px, 9vh, 84px);
+    padding-top: 20px
+}
+
+.eyebrow {
+    margin: 0 0 8px;
+    font: 600 11px/1.4 var(--mono);
+    letter-spacing: .1em;
+    text-transform: uppercase;
+    color: var(--ink-3);
+}
+.eyebrow--accent { color: var(--accent); }
+
+main { display: grid; gap: 18px; margin-top: 1em; }
+
+.card {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: 18px;
+    box-shadow: var(--float);
+    padding: clamp(20px, 4vw, 28px);
+}
+.card-head {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 20px;
+}
+.card-head h2 { margin: 0; font-size: 1.3rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
+
+label {
+    display: block;
+    margin-bottom: 7px;
+    font: 600 11px/1 var(--mono);
+    letter-spacing: .09em;
+    text-transform: uppercase;
+    color: var(--ink-3);
+}
+textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
+.btn {
+    justify-self: start;
+    font: 650 15px/1 var(--sans);
+    color: var(--on-accent);
+    background: var(--accent);
+    border: 0;
+    border-radius: 12px;
+    padding: 12px 22px;
+    cursor: pointer;
+    transition: background-color .18s var(--ease), transform .18s var(--ease);
+}
+.btn:hover { background: var(--accent-hover); }
+.btn:active { transform: translateY(1px); }
+.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+main { animation: rise .45s var(--ease) .07s both; }
+
+@media (max-width: 560px) {
+    .card-head { align-items: center; }
+    .env-row dt { flex-basis: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
+}
+</style>
+</head>
+<body>
+<div class="wrap">
+    <header class="masthead">
+        <div class="eyebrow eyebrow--accent">WebLab <span class="dash">&middot;</span> заметки</div>
+    </header>
+
+    <main>
+        <section class="card" aria-labelledby="compose-title">
+            <div class="card-head">
+                <div>
+                    <h2 id="compose-title">Кнопка</h2>
+                </div>
+            </div>
+            <div class="field">
+                <label for="title">Клики</label>
+                <div id="clicks">0</div>
+            </div>
+            <p></p>
+          <button class="btn" onclick="
+            const el = document.getElementById('clicks')
+            el.textContent = parseInt(el.textContent)+1
+          ">Клик</button>
+        </section>
+    </main>
+</div>
+</body>
+</html>