Initial commit

web/src/App.jsx

@@ -0,0 +1,431 @@
+import { startTransition, useEffect, useState } from "react";
+
+const LEVEL_FALLBACKS = [
+  {
+    id: 1,
+    title: "Level 1",
+    description: "Базовый агент без дополнительных проверок.",
+  },
+  {
+    id: 2,
+    title: "Level 2",
+    description: "Ответ агента проверяется защитным фильтром.",
+  },
+  {
+    id: 3,
+    title: "Level 3",
+    description: "Фильтр проверяет и запрос, и ответ агента.",
+  },
+  {
+    id: 4,
+    title: "Level 4",
+    description: "Уровень 3 с ограничением на астрономические темы.",
+  },
+];
+
+const MAX_MESSAGE_LENGTH = 2000;
+const BLOCKED_PREFIX = "Ответ скрыт защитным фильтром";
+
+function createUuid7() {
+  const timestamp = BigInt(Date.now());
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+
+  bytes[0] = Number((timestamp >> 40n) & 0xffn);
+  bytes[1] = Number((timestamp >> 32n) & 0xffn);
+  bytes[2] = Number((timestamp >> 24n) & 0xffn);
+  bytes[3] = Number((timestamp >> 16n) & 0xffn);
+  bytes[4] = Number((timestamp >> 8n) & 0xffn);
+  bytes[5] = Number(timestamp & 0xffn);
+  bytes[6] = (bytes[6] & 0x0f) | 0x70;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+
+  const hex = Array.from(bytes, (value) => value.toString(16).padStart(2, "0")).join("");
+  return [
+    hex.slice(0, 8),
+    hex.slice(8, 12),
+    hex.slice(12, 16),
+    hex.slice(16, 20),
+    hex.slice(20, 32),
+  ].join("-");
+}
+
+function buildConfettiPieces(seed) {
+  const colors = ["#ea552b", "#1f6d77", "#f4b860", "#22313f", "#d84f2a", "#7aa6ad"];
+  return Array.from({ length: 18 }, (_, index) => {
+    const hue = colors[index % colors.length];
+    const left = (seed * 17 + index * 11) % 96;
+    const delay = (index % 6) * 60;
+    const duration = 900 + ((seed + index * 29) % 500);
+    const rotate = (seed * 13 + index * 37) % 360;
+    return {
+      id: `${seed}-${index}`,
+      style: {
+        left: `${left}%`,
+        background: hue,
+        animationDelay: `${delay}ms`,
+        animationDuration: `${duration}ms`,
+        transform: `rotate(${rotate}deg)`,
+      },
+    };
+  });
+}
+
+function looksBlocked(text) {
+  return text.trim().startsWith(BLOCKED_PREFIX);
+}
+
+function levelBadge(levelId) {
+  switch (levelId) {
+    case 1:
+      return "Intro";
+    case 2:
+      return "Social Engineer";
+    case 3:
+      return "Context Shift";
+    case 4:
+      return "Red Team";
+    default:
+      return "Unknown";
+  }
+}
+
+function statusTone({ loading, error, blocked, success }) {
+  if (loading) return "status-pending";
+  if (error) return "status-error";
+  if (success) return "status-success";
+  if (blocked) return "status-blocked";
+  return "status-ready";
+}
+
+export default function App() {
+  const [levels, setLevels] = useState(LEVEL_FALLBACKS);
+  const [levelsError, setLevelsError] = useState("");
+  const [selectedLevelId, setSelectedLevelId] = useState(LEVEL_FALLBACKS[0].id);
+  const [sessionId, setSessionId] = useState(() => createUuid7());
+  const [message, setMessage] = useState("");
+  const [hardMode, setHardMode] = useState(false);
+  const [responseText, setResponseText] = useState("Выберите уровень и попробуйте выманить пароль у агента.");
+  const [lastUserMessage, setLastUserMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [apiError, setApiError] = useState("");
+  const [lastLatencyMs, setLastLatencyMs] = useState(null);
+  const [lastStatusCode, setLastStatusCode] = useState(null);
+  const [sessionRotated, setSessionRotated] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [confettiSeed, setConfettiSeed] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadLevels() {
+      try {
+        const response = await fetch("/api/v1/levels");
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        const data = await response.json();
+        if (!cancelled && Array.isArray(data) && data.length > 0) {
+          setLevels(data);
+          setSelectedLevelId((current) => {
+            if (data.some((level) => level.id === current)) {
+              return current;
+            }
+            return data[0].id;
+          });
+          setLevelsError("");
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setLevelsError("Не удалось загрузить уровни. Использую локальное описание.");
+        }
+      }
+    }
+
+    loadLevels();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const selectedLevel = levels.find((level) => level.id === selectedLevelId) ?? levels[0];
+  const blocked = looksBlocked(responseText);
+  const toneClassName = statusTone({ loading, error: apiError, blocked, success });
+  const confettiPieces = buildConfettiPieces(confettiSeed);
+
+  function resetSessionForLevel(levelId) {
+    setSelectedLevelId(levelId);
+    setSessionId(createUuid7());
+    setMessage("");
+    setResponseText("Новая сессия готова. Отправьте сообщение агенту.");
+    setLastUserMessage("");
+    setApiError("");
+    setSessionRotated(false);
+    setSuccess(false);
+    setLastStatusCode(null);
+    setLastLatencyMs(null);
+  }
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const trimmed = message.trim();
+    if (!trimmed || loading) {
+      return;
+    }
+
+    setLoading(true);
+    setApiError("");
+    setSessionRotated(false);
+
+    const startedAt = performance.now();
+
+    try {
+      const response = await fetch(`/api/v1/levels/query/${selectedLevelId}/`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          session_id: sessionId,
+          text: trimmed,
+          hard_mode: hardMode,
+        }),
+      });
+
+      setLastStatusCode(response.status);
+
+      if (!response.ok) {
+        const errorPayload = await response.json().catch(() => null);
+        const detail = errorPayload?.detail ?? `HTTP ${response.status}`;
+        throw new Error(typeof detail === "string" ? detail : JSON.stringify(detail));
+      }
+
+      const payload = await response.json();
+      const latency = Math.round(performance.now() - startedAt);
+
+      startTransition(() => {
+        setLastLatencyMs(latency);
+        setLastUserMessage(trimmed);
+        setResponseText(payload.response_text);
+        setSessionRotated(Boolean(payload.session_rotated));
+        setSessionId(payload.session_id);
+        setSuccess(Boolean(payload.success));
+        setMessage("");
+        if (payload.success) {
+          setConfettiSeed((current) => current + 1);
+        }
+      });
+    } catch (error) {
+      setApiError(error instanceof Error ? error.message : "Неизвестная ошибка запроса.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleCopySession() {
+    try {
+      await navigator.clipboard.writeText(sessionId);
+    } catch {
+      setApiError("Не удалось скопировать session_id в буфер обмена.");
+    }
+  }
+
+  return (
+    <div className="app-shell">
+      <div className="page-noise" aria-hidden="true" />
+      <header className="hero">
+        <div className="hero-mark">
+          <div className="beaker-icon" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </div>
+          <div>
+            <p className="hero-kicker">Secret Stress Lab</p>
+            <h1>Проверь, сможет ли человек вытянуть секрет у LLM-агента.</h1>
+          </div>
+        </div>
+        <aside className="hero-note">
+          <p className="hero-note-label">Lab Notes</p>
+          <p>
+            У каждого уровня есть скрытый пароль. Выбирай уровень, включай hard mode и смотри,
+            где защита ломается.
+          </p>
+        </aside>
+      </header>
+
+      <main className="layout">
+        <section className="panel panel-left">
+          <div className="panel-header">
+            <h2>Выбор уровня</h2>
+            <span className="panel-tag">4 сценария</span>
+          </div>
+
+          <div className="level-grid">
+            {levels.map((level) => {
+              const active = level.id === selectedLevelId;
+              return (
+                <button
+                  key={level.id}
+                  type="button"
+                  className={`level-card ${active ? "is-active" : ""}`}
+                  onClick={() => resetSessionForLevel(level.id)}
+                >
+                  <span className="level-number">{level.id}</span>
+                  <span className="level-name">{levelBadge(level.id)}</span>
+                  <span className="level-description">{level.description}</span>
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="session-box">
+            <div>
+              <p className="eyebrow">Session ID</p>
+              <p className="session-value">{sessionId}</p>
+            </div>
+            <button type="button" className="ghost-button" onClick={handleCopySession}>
+              Скопировать
+            </button>
+          </div>
+
+          <div className="toggle-row">
+            <div>
+              <p className="eyebrow danger">Hard Mode</p>
+              <p className="toggle-copy">
+                Пароль будет ротироваться каждые несколько запросов. Фронтенд принимает новый
+                <code>session_id</code> из ответа сервера.
+              </p>
+            </div>
+            <label className="switch">
+              <input
+                type="checkbox"
+                checked={hardMode}
+                onChange={(event) => setHardMode(event.target.checked)}
+              />
+              <span className="switch-track" />
+            </label>
+          </div>
+
+          <div className="level-explainer">
+            <p className="eyebrow accent">Текущий уровень</p>
+            <h3>
+              {selectedLevel.title} · {levelBadge(selectedLevel.id)}
+            </h3>
+            <p>{selectedLevel.description}</p>
+            {levelsError ? <p className="helper-warning">{levelsError}</p> : null}
+          </div>
+
+          <form className="composer" onSubmit={handleSubmit}>
+            <label className="composer-label" htmlFor="message">
+              Сообщение агенту
+            </label>
+            <textarea
+              id="message"
+              value={message}
+              maxLength={MAX_MESSAGE_LENGTH}
+              placeholder="Напишите вопрос, инструкцию или попытку обхода правил…"
+              onChange={(event) => setMessage(event.target.value)}
+            />
+            <div className="composer-footer">
+              <p className="message-limit">
+                {message.length} / {MAX_MESSAGE_LENGTH}
+              </p>
+              <button type="submit" className="primary-button" disabled={loading || !message.trim()}>
+                {loading ? "Отправка…" : "Send Message"}
+              </button>
+            </div>
+          </form>
+        </section>
+
+        <section className={`panel panel-right ${toneClassName}`}>
+          <div className="panel-header">
+            <h2>Ответ агента</h2>
+            <span className="panel-tag live-tag">{loading ? "live" : "ready"}</span>
+          </div>
+
+          <div className="response-box">
+            <div className="response-gutter" aria-hidden="true">
+              <span>01</span>
+              <span>02</span>
+              <span>03</span>
+              <span>04</span>
+              <span>05</span>
+            </div>
+            <div className="response-content">
+              <p>{responseText}</p>
+            </div>
+          </div>
+
+          <div className="status-grid">
+            <article className={`status-card ${blocked ? "is-alert" : ""}`}>
+              <p className="eyebrow">Filter Status</p>
+              <strong>{blocked ? "Сработал" : selectedLevelId > 1 ? "Активен" : "Выключен"}</strong>
+              <p>
+                {blocked
+                  ? "Ответ заменён защитной заглушкой."
+                  : selectedLevelId > 1
+                    ? "Дополнительный LLM-фильтр следит за запросом и ответом."
+                    : "На первом уровне дополнительных фильтров нет."}
+              </p>
+            </article>
+
+            <article className={`status-card ${success ? "is-success" : ""}`}>
+              <p className="eyebrow">Mission State</p>
+              <strong>{success ? "Пароль угадан" : "Атака продолжается"}</strong>
+              <p>
+                {success
+                  ? "Сервер подтвердил успех и вернул победный статус."
+                  : "Пробуй другие формулировки, роли и обходные сценарии."}
+              </p>
+            </article>
+          </div>
+
+          <div className="status-strip">
+            <div>
+              <p className="eyebrow">API status</p>
+              <strong>{apiError ? "Ошибка" : loading ? "Запрос…" : "Готов"}</strong>
+            </div>
+            <div>
+              <p className="eyebrow">HTTP</p>
+              <strong>{lastStatusCode ?? "—"}</strong>
+            </div>
+            <div>
+              <p className="eyebrow">Latency</p>
+              <strong>{lastLatencyMs ? `${lastLatencyMs} ms` : "—"}</strong>
+            </div>
+            <div>
+              <p className="eyebrow">Rotation</p>
+              <strong>{sessionRotated ? "New session" : "Stable"}</strong>
+            </div>
+          </div>
+
+          <div className="transcript">
+            <div className="transcript-card">
+              <p className="eyebrow">Последний запрос</p>
+              <p>{lastUserMessage || "Пока пусто. Первый ход за вами."}</p>
+            </div>
+            <div className="transcript-card">
+              <p className="eyebrow">Системное сообщение</p>
+              <p>
+                {apiError
+                  ? apiError
+                  : sessionRotated
+                    ? "Сервер ротировал сессию и прислал новый идентификатор."
+                    : "Сессия активна. Следующий запрос пойдёт в текущий контекст."}
+              </p>
+            </div>
+          </div>
+
+          {success ? (
+            <div className="confetti-layer" aria-hidden="true">
+              {confettiPieces.map((piece) => (
+                <span key={piece.id} className="confetti-piece" style={piece.style} />
+              ))}
+            </div>
+          ) : null}
+        </section>
+      </main>
+    </div>
+  );
+}

web/src/main.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

web/src/styles.css

@@ -0,0 +1,702 @@
+@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@500;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap");
+
+:root {
+  color-scheme: light;
+  --bg: #f8f3e9;
+  --bg-strong: #f2e7d4;
+  --paper: rgba(255, 251, 244, 0.82);
+  --paper-strong: rgba(255, 249, 239, 0.94);
+  --ink: #1f2d37;
+  --muted: #5f6d75;
+  --line: rgba(65, 84, 96, 0.2);
+  --accent: #e85a2d;
+  --accent-strong: #ca431b;
+  --teal: #1f6d77;
+  --teal-soft: rgba(31, 109, 119, 0.12);
+  --success: #23835f;
+  --danger: #b44526;
+  --shadow: 0 30px 80px rgba(99, 73, 45, 0.15);
+  --radius-xl: 28px;
+  --radius-lg: 22px;
+  --radius-md: 16px;
+  --radius-sm: 12px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background:
+    radial-gradient(circle at top left, rgba(232, 90, 45, 0.12), transparent 28%),
+    radial-gradient(circle at top right, rgba(31, 109, 119, 0.1), transparent 24%),
+    linear-gradient(180deg, #fbf8f2 0%, var(--bg) 100%);
+  color: var(--ink);
+  font-family: "Manrope", sans-serif;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+.app-shell {
+  position: relative;
+  width: min(1400px, calc(100% - 32px));
+  margin: 18px auto;
+  padding: 28px;
+  border: 1px solid rgba(115, 88, 58, 0.18);
+  border-radius: 32px;
+  background: rgba(255, 250, 242, 0.82);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.page-noise {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(177, 150, 120, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(177, 150, 120, 0.08) 1px, transparent 1px);
+  background-size: 22px 22px;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.hero,
+.layout,
+.panel,
+.response-box,
+.status-card,
+.status-strip,
+.transcript-card,
+.session-box,
+.toggle-row,
+.level-explainer,
+.composer {
+  position: relative;
+  z-index: 1;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: 1.5fr minmax(240px, 360px);
+  gap: 20px;
+  align-items: start;
+  margin-bottom: 22px;
+}
+
+.hero-mark {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+}
+
+.beaker-icon {
+  position: relative;
+  width: 86px;
+  height: 86px;
+  flex: 0 0 auto;
+  border: 2px solid rgba(31, 45, 55, 0.12);
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255, 251, 245, 0.95), rgba(248, 237, 223, 0.95));
+}
+
+.beaker-icon::before,
+.beaker-icon::after,
+.beaker-icon span {
+  position: absolute;
+  display: block;
+  content: "";
+}
+
+.beaker-icon::before {
+  left: 30px;
+  top: 10px;
+  width: 24px;
+  height: 16px;
+  border: 4px solid var(--ink);
+  border-bottom: 0;
+  border-radius: 10px 10px 0 0;
+}
+
+.beaker-icon::after {
+  left: 18px;
+  top: 24px;
+  width: 48px;
+  height: 42px;
+  border: 4px solid var(--ink);
+  border-top: 0;
+  border-radius: 0 0 18px 18px;
+  background:
+    linear-gradient(180deg, transparent 0 42%, rgba(232, 90, 45, 0.92) 42% 100%);
+}
+
+.beaker-icon span:nth-child(1) {
+  left: 24px;
+  bottom: 16px;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #fff7f1;
+}
+
+.beaker-icon span:nth-child(2) {
+  left: 42px;
+  bottom: 20px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #fff7f1;
+}
+
+.beaker-icon span:nth-child(3) {
+  left: 56px;
+  bottom: 14px;
+  width: 5px;
+  height: 5px;
+  border-radius: 999px;
+  background: #fff7f1;
+}
+
+.hero-kicker,
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--teal);
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.85rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  margin: 0;
+  max-width: 820px;
+  font-family: "Alegreya", serif;
+  font-size: clamp(2.5rem, 5vw, 4.8rem);
+  line-height: 0.92;
+  letter-spacing: 0.02em;
+}
+
+.hero-note {
+  padding: 22px 24px;
+  border: 1px solid rgba(115, 88, 58, 0.18);
+  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(247, 236, 220, 0.92));
+}
+
+.hero-note-label {
+  margin: 0 0 10px;
+  color: var(--accent-strong);
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.98rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.hero-note p:last-child {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(420px, 0.95fr) minmax(460px, 1.05fr);
+  gap: 18px;
+}
+
+.panel {
+  position: relative;
+  padding: 24px;
+  border: 1px solid rgba(115, 88, 58, 0.2);
+  border-radius: var(--radius-xl);
+  background: linear-gradient(180deg, var(--paper-strong), var(--paper));
+  backdrop-filter: blur(10px);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.panel-header h2 {
+  margin: 0;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 1.2rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.panel-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 74px;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid rgba(115, 88, 58, 0.2);
+  border-radius: 999px;
+  background: rgba(255, 251, 245, 0.9);
+  color: var(--accent-strong);
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.82rem;
+  text-transform: uppercase;
+}
+
+.live-tag {
+  color: var(--ink);
+}
+
+.level-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.level-card {
+  text-align: left;
+  padding: 18px;
+  border: 1px solid rgba(115, 88, 58, 0.18);
+  border-radius: 22px;
+  background: rgba(255, 252, 247, 0.82);
+  color: inherit;
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.level-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(232, 90, 45, 0.4);
+  box-shadow: 0 14px 30px rgba(113, 83, 55, 0.1);
+}
+
+.level-card.is-active {
+  border-color: rgba(232, 90, 45, 0.7);
+  box-shadow: inset 0 0 0 1px rgba(232, 90, 45, 0.24);
+}
+
+.level-number {
+  display: block;
+  margin-bottom: 12px;
+  font-family: "Alegreya", serif;
+  font-size: 2.7rem;
+  line-height: 1;
+}
+
+.level-name {
+  display: block;
+  margin-bottom: 8px;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 1rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.level-description {
+  display: block;
+  color: var(--muted);
+  font-size: 0.96rem;
+  line-height: 1.45;
+}
+
+.session-box,
+.toggle-row,
+.level-explainer,
+.composer,
+.status-card,
+.status-strip,
+.transcript-card {
+  border: 1px solid rgba(115, 88, 58, 0.18);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 251, 244, 0.9);
+}
+
+.session-box,
+.toggle-row,
+.level-explainer {
+  padding: 18px 20px;
+  margin-bottom: 16px;
+}
+
+.session-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.session-value {
+  margin: 0;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 1rem;
+  word-break: break-all;
+}
+
+.ghost-button,
+.primary-button {
+  border: 0;
+  border-radius: 14px;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    opacity 160ms ease,
+    background 160ms ease;
+}
+
+.ghost-button {
+  padding: 12px 16px;
+  background: var(--teal-soft);
+  color: var(--teal);
+  font-weight: 700;
+}
+
+.ghost-button:hover,
+.primary-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.toggle-copy,
+.level-explainer p,
+.status-card p,
+.transcript-card p,
+.response-content p {
+  line-height: 1.6;
+}
+
+.danger {
+  color: var(--danger);
+}
+
+.accent {
+  color: var(--accent-strong);
+}
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.switch-track {
+  position: relative;
+  width: 72px;
+  height: 40px;
+  border-radius: 999px;
+  background: rgba(31, 45, 55, 0.2);
+  transition: background 160ms ease;
+}
+
+.switch-track::after {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #fff9f2;
+  box-shadow: 0 8px 18px rgba(31, 45, 55, 0.16);
+  transition: transform 160ms ease;
+}
+
+.switch input:checked + .switch-track {
+  background: rgba(232, 90, 45, 0.6);
+}
+
+.switch input:checked + .switch-track::after {
+  transform: translateX(32px);
+}
+
+.level-explainer h3 {
+  margin: 0 0 10px;
+  font-family: "Alegreya", serif;
+  font-size: 1.7rem;
+}
+
+.helper-warning {
+  color: var(--danger);
+}
+
+.composer {
+  padding: 18px;
+}
+
+.composer-label {
+  display: block;
+  margin-bottom: 10px;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.92rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.composer textarea {
+  width: 100%;
+  min-height: 170px;
+  resize: vertical;
+  padding: 18px 20px;
+  border: 1px solid rgba(115, 88, 58, 0.24);
+  border-radius: 18px;
+  background: rgba(255, 253, 248, 0.88);
+  color: var(--ink);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.composer textarea:focus {
+  outline: 2px solid rgba(232, 90, 45, 0.28);
+  border-color: rgba(232, 90, 45, 0.5);
+}
+
+.composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 14px;
+}
+
+.message-limit {
+  margin: 0;
+  color: var(--muted);
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.9rem;
+}
+
+.primary-button {
+  min-width: 184px;
+  padding: 14px 22px;
+  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
+  color: #fff8f2;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 0.96rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  box-shadow: 0 16px 28px rgba(202, 67, 27, 0.28);
+}
+
+.primary-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.panel-right {
+  min-height: 100%;
+}
+
+.response-box {
+  display: grid;
+  grid-template-columns: 66px 1fr;
+  min-height: 340px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  border: 1px solid rgba(115, 88, 58, 0.2);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 250, 242, 0.92);
+}
+
+.response-gutter {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 18px 0;
+  background: #222830;
+  color: rgba(255, 247, 238, 0.72);
+  font-family: "IBM Plex Mono", monospace;
+  align-items: center;
+}
+
+.response-content {
+  padding: 28px;
+}
+
+.response-content p {
+  margin: 0;
+  white-space: pre-wrap;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: 1rem;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.status-card {
+  padding: 18px 20px;
+}
+
+.status-card strong,
+.status-strip strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 1.15rem;
+}
+
+.status-card.is-alert {
+  border-color: rgba(180, 69, 38, 0.44);
+}
+
+.status-card.is-success {
+  border-color: rgba(35, 131, 95, 0.38);
+  background: rgba(241, 255, 247, 0.92);
+}
+
+.status-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 18px 20px;
+  margin-bottom: 14px;
+}
+
+.transcript {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.transcript-card {
+  padding: 18px 20px;
+}
+
+.status-ready {
+  box-shadow: inset 0 0 0 1px rgba(31, 109, 119, 0.08);
+}
+
+.status-pending {
+  box-shadow: inset 0 0 0 1px rgba(244, 184, 96, 0.3);
+}
+
+.status-error {
+  box-shadow: inset 0 0 0 1px rgba(180, 69, 38, 0.24);
+}
+
+.status-blocked {
+  box-shadow: inset 0 0 0 1px rgba(180, 69, 38, 0.22);
+}
+
+.status-success {
+  box-shadow: inset 0 0 0 1px rgba(35, 131, 95, 0.2);
+}
+
+.confetti-layer {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.confetti-piece {
+  position: absolute;
+  top: -14px;
+  width: 12px;
+  height: 24px;
+  border-radius: 4px;
+  opacity: 0;
+  animation-name: confetti-fall;
+  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+  animation-fill-mode: forwards;
+}
+
+@keyframes confetti-fall {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(16px, 540px, 0) rotate(520deg);
+  }
+}
+
+@media (max-width: 1080px) {
+  .hero,
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .status-strip,
+  .transcript,
+  .status-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    width: calc(100% - 16px);
+    margin: 8px auto;
+    padding: 16px;
+    border-radius: 24px;
+  }
+
+  .hero-mark {
+    align-items: flex-start;
+  }
+
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .panel {
+    padding: 16px;
+  }
+
+  .level-grid,
+  .status-grid,
+  .status-strip,
+  .transcript {
+    grid-template-columns: 1fr;
+  }
+
+  .session-box,
+  .toggle-row,
+  .composer-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .response-box {
+    grid-template-columns: 54px 1fr;
+  }
+
+  .primary-button,
+  .ghost-button {
+    width: 100%;
+  }
+}