ltcai 3.0.1 → 3.2.0

package/static/css/tokens.5a595671.css

@@ -0,0 +1,260 @@
+/* ============================================================================
+ * Lattice AI — Design Tokens (Single Source of Truth)  v3.1.0
+ *
+ * 이 파일이 색·면·테두리·그림자·포커스의 단일 출처다.
+ *   :root                      → 라이트 테마 값
+ *   :root[data-lt-theme="dark"] → 동일 토큰명의 다크 값
+ *   @media (prefers-color-scheme: dark) → 사용자가 명시 선택 안 했을 때 OS 추종
+ *
+ * 컴포넌트 CSS 는 항상 var(--token) 만 사용한다. 따라서 이 파일의 값만 바꾸면
+ * 전체 UI 가 자연스럽게 전환된다. (컴포넌트별 다크 오버라이드 / !important 금지)
+ *
+ * 토큰 카테고리(요청 범위): background · surface · card · sidebar · modal · table ·
+ *   graph · text · muted-text · border · accent · success · warning · danger ·
+ *   input · overlay · shadow · focus-ring
+ * ========================================================================== */
+
+:root {
+  color-scheme: light;
+
+  /* ── Brand raw scale (불변, 테마 무관 기준점) ───────────────────────────── */
+  --lt-color-primary-100: #dbeafe;
+  --lt-color-primary-200: #bfdbfe;
+  --lt-color-primary-400: #60a5fa;
+  --lt-color-primary-600: #2563eb;
+  --lt-color-primary-800: #1e3a8a;
+  --lt-color-ink-900: #111827;
+  --lt-color-accent-cyan:  #0891b2;
+  --lt-color-accent-green: #0f9f8f;
+  --lt-color-accent-amber: #b7791f;
+  --lt-color-accent-pink:  #b83280;
+
+  /* ╔══════════════════════════════════════════════════════════════════════╗
+     ║  SEMANTIC TOKENS — LIGHT (neutral workspace palette)                 ║
+     ╚══════════════════════════════════════════════════════════════════════╝ */
+
+  /* background / surfaces */
+  --bg:          #f6f8f7;
+  --bg-soft:     #eef3f2;
+  --surface:     #ffffff;
+  --surface-2:   #f0f5f4;
+  --surface-3:   #e4ecea;
+  --surface-muted: #edf3f2;
+  --surface-elevated: rgba(255, 255, 255, 0.94);
+  --card:        rgba(255, 255, 255, 0.92);
+  --sidebar:     rgba(255, 255, 255, 0.94);
+  --modal:       rgba(255, 255, 255, 0.98);
+  --table:       rgba(255, 255, 255, 0.78);
+  --input:       rgba(255, 255, 255, 0.86);
+  --overlay:     rgba(15, 23, 42, 0.44);
+  --overlay-scrim: var(--overlay);
+  --app-bg:
+    linear-gradient(180deg, #f8faf9 0%, #eef4f2 54%, #f7faf9 100%);
+
+  /* text */
+  --text:        #24223d;
+  --muted:       #475569;   /* muted-text */
+  --faint:       #70818f;
+  --text-muted:  var(--muted);
+
+  /* border / line */
+  --border:        rgba(15, 23, 42, 0.12);
+  --border-strong: rgba(15, 23, 42, 0.22);
+  --line:          rgba(15, 23, 42, 0.10);
+  --line-strong:   rgba(15, 23, 42, 0.18);
+
+  /* accent */
+  --accent:       #2563eb;
+  --accent-2:     #0f9f8f;
+  --accent-3:     #b7791f;
+  --accent-pink:  #b83280;
+  --accent-soft:  rgba(37, 99, 235, 0.10);
+  --accent-deep:  #1d4ed8;
+
+  /* status */
+  --success: #0f8f6d;
+  --warning: #a16207;
+  --danger:  #c2410c;
+
+  /* graph */
+  --graph-bg:   #f8faf9;
+  --graph-grid: rgba(12, 92, 115, 0.08);
+  --graph-pill: rgba(255, 255, 255, 0.92);
+
+  /* shadow */
+  --shadow:    0 18px 50px rgba(15, 23, 42, 0.10);
+  --shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.08);
+
+  /* focus ring */
+  --focus-ring: rgba(37, 99, 235, 0.55);
+
+  /* ── 구조 토큰(색 아님) ─────────────────────────────────────────────── */
+  --radius:    14px;
+  --radius-sm: 8px;
+  --content-width: 900px;
+
+  /* ── 레거시/별칭 — 코드가 참조하는 모든 변수를 의미 토큰으로 매핑 ──────── */
+  --ink:        var(--text);
+  --blue:       var(--accent);
+  --green:      var(--success);
+  --amber:      var(--warning);
+  --red:        var(--danger);
+  --pink:       var(--accent-pink);
+  --ok:         var(--success);
+  --warn:       var(--warning);
+  --err:        var(--danger);
+  --panel:      var(--surface);
+  --panel-2:    var(--surface-2);
+  --panel-3:    var(--surface-3);
+  --panel-strong: var(--surface);
+  --glow-green: 0 0 34px rgba(15, 159, 143, 0.14);
+  --glow-blue:  0 0 34px rgba(37, 99, 235, 0.14);
+  /* PPT reference 스킨 별칭 */
+  --ref-purple:   var(--accent);
+  --ref-purple-2: var(--accent-2);
+  --ref-indigo:   #2563eb;
+  --ref-ink:      var(--text);
+  --ref-muted:    var(--muted);
+  --ref-faint:    var(--faint);
+  --ref-line:     var(--border);
+  --ref-soft:     var(--surface);
+  --ref-card:     var(--card);
+  --ref-shadow:   var(--shadow);
+
+  /* ── --lt-* 별칭 (workspace.css / platform.css 가 참조) — LIGHT ──────────
+     순환참조를 피하려 구체값으로 둔다(소비자가 --bg 등을 --lt-* 로 재정의해도 안전). */
+  --lt-bg:        #f6f8f7;
+  --lt-surface:   #ffffff;
+  --lt-surface-2: #f0f5f4;
+  --lt-input:     rgba(255, 255, 255, 0.86);
+  --lt-ink:       #24223d;
+  --lt-ink-soft:  #475569;
+  --lt-muted:     #70818f;
+  --lt-line:      rgba(15, 23, 42, 0.12);
+  --lt-accent:    #2563eb;
+  --lt-accent-2:  #0f9f8f;
+  --lt-shadow-md: 0 18px 50px rgba(15, 23, 42, 0.10);
+
+  /* ── 모션 / 타이포 ─────────────────────────────────────────────────── */
+  --lt-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ╔════════════════════════════════════════════════════════════════════════╗
+   ║  SEMANTIC TOKENS — DARK (값만 교체, 같은 토큰명)                          ║
+   ╚════════════════════════════════════════════════════════════════════════╝ */
+:root[data-lt-theme="dark"] {
+  color-scheme: dark;
+
+  --bg:          #101418;
+  --bg-soft:     #151b20;
+  --surface:     #1b2328;
+  --surface-2:   #202b31;
+  --surface-3:   #29363d;
+  --surface-muted: #151d22;
+  --surface-elevated: #253139;
+  --card:        rgba(255, 255, 255, 0.055);
+  --sidebar:     #11191d;
+  --modal:       rgba(27, 35, 40, 0.98);
+  --table:       rgba(255, 255, 255, 0.045);
+  --input:       rgba(255, 255, 255, 0.065);
+  --overlay:     rgba(0, 0, 0, 0.64);
+  --overlay-scrim: var(--overlay);
+  --app-bg:
+    linear-gradient(180deg, #101418 0%, #151d22 54%, #101418 100%);
+
+  --text:        #edf3f2;
+  --muted:       #b8c5c2;
+  --faint:       #849894;
+  --text-muted:  var(--muted);
+
+  --border:        rgba(196, 213, 208, 0.18);
+  --border-strong: rgba(196, 213, 208, 0.30);
+  --line:          rgba(196, 213, 208, 0.14);
+  --line-strong:   rgba(196, 213, 208, 0.24);
+
+  --accent:       #0284c7;
+  --accent-2:     #0f766e;
+  --accent-3:     #facc15;
+  --accent-pink:  #f0abfc;
+  --accent-soft:  rgba(2, 132, 199, 0.20);
+  --accent-deep:  #0369a1;
+
+  --success: #34d399;
+  --warning: #fbbf24;
+  --danger:  #fb923c;
+
+  --graph-bg:   #0f1518;
+  --graph-grid: rgba(94, 234, 212, 0.08);
+  --graph-pill: rgba(27, 35, 40, 0.92);
+
+  --shadow:    0 18px 54px rgba(0, 0, 0, 0.50);
+  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.42);
+
+  --focus-ring: rgba(125, 211, 252, 0.70);
+
+  --lt-bg:        #101418;
+  --lt-surface:   #1b2328;
+  --lt-surface-2: #202b31;
+  --lt-input:     rgba(255, 255, 255, 0.065);
+  --lt-ink:       #edf3f2;
+  --lt-ink-soft:  #b8c5c2;
+  --lt-muted:     #849894;
+  --lt-line:      rgba(196, 213, 208, 0.18);
+  --lt-accent:    #0284c7;
+  --lt-accent-2:  #0f766e;
+  --lt-shadow-md: 0 18px 54px rgba(0, 0, 0, 0.50);
+
+  --ref-indigo: #93c5fd;
+  --glow-green: 0 0 34px rgba(94, 234, 212, 0.18);
+  --glow-blue:  0 0 34px rgba(125, 211, 252, 0.18);
+}
+
+/* OS 다크 추종 — 사용자가 명시적으로 라이트를 고르지 않은 경우에만 */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-lt-theme="light"]):not([data-lt-theme="dark"]) {
+    color-scheme: dark;
+    --bg: #101418; --bg-soft: #151b20;
+    --surface: #1b2328; --surface-2: #202b31; --surface-3: #29363d;
+    --surface-muted: #151d22; --surface-elevated: #253139;
+    --card: rgba(255,255,255,0.055); --sidebar: #11191d;
+    --modal: rgba(27,35,40,0.98); --table: rgba(255,255,255,0.045);
+    --input: rgba(255,255,255,0.065); --overlay: rgba(0,0,0,0.64); --overlay-scrim: var(--overlay);
+    --app-bg:
+      linear-gradient(180deg, #101418 0%, #151d22 54%, #101418 100%);
+    --text: #edf3f2; --muted: #b8c5c2; --faint: #849894; --text-muted: var(--muted);
+    --border: rgba(196,213,208,0.18); --border-strong: rgba(196,213,208,0.30);
+    --line: rgba(196,213,208,0.14); --line-strong: rgba(196,213,208,0.24);
+    --accent: #0284c7; --accent-2: #0f766e; --accent-3: #facc15;
+    --accent-pink: #f0abfc; --accent-soft: rgba(2,132,199,0.20); --accent-deep: #0369a1;
+    --success: #34d399; --warning: #fbbf24; --danger: #fb923c;
+    --graph-bg: #0f1518; --graph-grid: rgba(94,234,212,0.08); --graph-pill: rgba(27,35,40,0.92);
+    --shadow: 0 18px 54px rgba(0,0,0,0.50); --shadow-sm: 0 8px 24px rgba(0,0,0,0.42);
+    --focus-ring: rgba(125,211,252,0.70);
+    --lt-bg: #101418; --lt-surface: #1b2328; --lt-surface-2: #202b31; --lt-input: rgba(255,255,255,0.065);
+    --lt-ink: #edf3f2; --lt-ink-soft: #b8c5c2; --lt-muted: #849894;
+    --lt-line: rgba(196,213,208,0.18); --lt-accent: #0284c7; --lt-accent-2: #0f766e;
+    --lt-shadow-md: 0 18px 54px rgba(0,0,0,0.50);
+  }
+}
+
+/* ── 전역 폴리시 ───────────────────────────────────────────────────────── */
+::selection { background: var(--accent-soft); color: var(--text); }
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.001ms;
+    scroll-behavior: auto;
+  }
+}

package/static/css/tokens.css

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Lattice AI — Design Tokens (Single Source of Truth)  v3.0.0
+ * Lattice AI — Design Tokens (Single Source of Truth)  v3.1.0
  *
  * 이 파일이 색·면·테두리·그림자·포커스의 단일 출처다.
  *   :root                      → 라이트 테마 값

package/static/graph.html

@@ -4,18 +4,18 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
   <title>Lattice AI - 지식 그래프</title>
-  <script src="/static/scripts/ux.js?v=3.0.0"></script>
+  <script src="/static/scripts/ux.js"></script>
       <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
-  <link rel="stylesheet" href="/static/css/tokens.css?v=3.0.0">
-  <link rel="stylesheet" href="/static/css/reference/base.css?v=3.0.0">
-  <link rel="stylesheet" href="/static/css/reference/account.css?v=3.0.0">
-  <link rel="stylesheet" href="/static/css/reference/admin.css?v=3.0.0">
-  <link rel="stylesheet" href="/static/css/reference/graph.css?v=3.0.0">
-  <link rel="stylesheet" href="/static/css/reference/chat.css?v=3.0.0">
-  <link rel="stylesheet" href="/static/css/responsive.css?v=3.0.0">
+  <link rel="stylesheet" href="/static/css/tokens.css">
+  <link rel="stylesheet" href="/static/css/reference/base.css">
+  <link rel="stylesheet" href="/static/css/reference/account.css">
+  <link rel="stylesheet" href="/static/css/reference/admin.css">
+  <link rel="stylesheet" href="/static/css/reference/graph.css">
+  <link rel="stylesheet" href="/static/css/reference/chat.css">
+  <link rel="stylesheet" href="/static/css/responsive.css">
 </head>
 <body class="lattice-ref-graph">
   <div class="sidebar-overlay" onclick="closeGraphNav&&closeGraphNav()"></div>
@@ -119,6 +119,6 @@
 
   <div id="tooltip"></div>
 
-    <script src="/static/scripts/graph.js?v=3.0.0"></script>
+    <script src="/static/scripts/graph.js"></script>
 </body>
 </html>

package/static/plugins.html

@@ -4,10 +4,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Plugin SDK — Lattice AI</title>
-  <script src="/static/scripts/ux.js?v=3.0.0"></script>
-  <link rel="stylesheet" href="/static/css/tokens.css?v=3.0.0" />
-  <link rel="stylesheet" href="/static/platform.css?v=3.0.0" />
-  <link rel="stylesheet" href="/static/css/responsive.css?v=3.0.0" />
+  <script src="/static/scripts/ux.js"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css" />
+  <link rel="stylesheet" href="/static/platform.css" />
+  <link rel="stylesheet" href="/static/css/responsive.css" />
 </head>
 <body>
   <main>

package/static/sw.js

@@ -1,9 +1,11 @@
 // Lattice AI Service Worker — enables PWA install on Android/iOS
 // Strategy: network-first for API, cache-first for static assets.
-const CACHE = "ltcai-v226";
+const CACHE = "ltcai-v310";
 const STATIC = [
   "/",
+  "/app",
   "/workspace",
+  "/static/v3/asset-manifest.json",
   "/static/css/tokens.css",
   "/static/css/reference/base.css",
   "/static/css/reference/chat.css",

package/static/v3/asset-manifest.json

@@ -0,0 +1,55 @@
+{
+  "version": "3.2.0",
+  "generated_at": "deterministic",
+  "entrypoints": {
+    "app": "/static/v3/js/app.a5adc0f3.js",
+    "styles": [
+      "/static/css/tokens.5a595671.css",
+      "/static/v3/css/lattice.tokens.c597ff81.css",
+      "/static/v3/css/lattice.base.e4cdd05d.css",
+      "/static/v3/css/lattice.components.011e988b.css",
+      "/static/v3/css/lattice.shell.4920f42d.css",
+      "/static/v3/css/lattice.views.3ee19d4e.css"
+    ]
+  },
+  "assets": {
+    "static/css/tokens.css": "/static/css/tokens.5a595671.css",
+    "static/v3/css/lattice.tokens.css": "/static/v3/css/lattice.tokens.c597ff81.css",
+    "static/v3/css/lattice.base.css": "/static/v3/css/lattice.base.e4cdd05d.css",
+    "static/v3/css/lattice.components.css": "/static/v3/css/lattice.components.011e988b.css",
+    "static/v3/css/lattice.shell.css": "/static/v3/css/lattice.shell.4920f42d.css",
+    "static/v3/css/lattice.views.css": "/static/v3/css/lattice.views.3ee19d4e.css",
+    "static/v3/js/app.js": "/static/v3/js/app.a5adc0f3.js",
+    "static/v3/js/core/api.js": "/static/v3/js/core/api.603b978f.js",
+    "static/v3/js/core/components.js": "/static/v3/js/core/components.4c83e0a9.js",
+    "static/v3/js/core/dom.js": "/static/v3/js/core/dom.a2773eb0.js",
+    "static/v3/js/core/router.js": "/static/v3/js/core/router.584570f2.js",
+    "static/v3/js/core/routes.js": "/static/v3/js/core/routes.07ad6696.js",
+    "static/v3/js/core/shell.js": "/static/v3/js/core/shell.ea0b9ae5.js",
+    "static/v3/js/core/store.js": "/static/v3/js/core/store.34ebd5e6.js",
+    "static/v3/js/views/admin-audit.js": "/static/v3/js/views/admin-audit.660a1fb1.js",
+    "static/v3/js/views/admin-permissions.js": "/static/v3/js/views/admin-permissions.a7ae5f09.js",
+    "static/v3/js/views/admin-policies.js": "/static/v3/js/views/admin-policies.3658fd86.js",
+    "static/v3/js/views/admin-private-vpc.js": "/static/v3/js/views/admin-private-vpc.7d342d36.js",
+    "static/v3/js/views/admin-security.js": "/static/v3/js/views/admin-security.07c66b72.js",
+    "static/v3/js/views/admin-users.js": "/static/v3/js/views/admin-users.03bac88c.js",
+    "static/v3/js/views/agents.js": "/static/v3/js/views/agents.c373d48c.js",
+    "static/v3/js/views/chat.js": "/static/v3/js/views/chat.718144ce.js",
+    "static/v3/js/views/files.js": "/static/v3/js/views/files.4935197e.js",
+    "static/v3/js/views/home.js": "/static/v3/js/views/home.cdde3b32.js",
+    "static/v3/js/views/hooks.js": "/static/v3/js/views/hooks.f3edebca.js",
+    "static/v3/js/views/hybrid-search.js": "/static/v3/js/views/hybrid-search.b22b97e0.js",
+    "static/v3/js/views/knowledge-graph.js": "/static/v3/js/views/knowledge-graph.a14ea7e7.js",
+    "static/v3/js/views/marketplace.js": "/static/v3/js/views/marketplace.ab0583d4.js",
+    "static/v3/js/views/mcp.js": "/static/v3/js/views/mcp.99b5c6a7.js",
+    "static/v3/js/views/memory.js": "/static/v3/js/views/memory.d2ed7a7c.js",
+    "static/v3/js/views/models.js": "/static/v3/js/views/models.a1ffa147.js",
+    "static/v3/js/views/my-computer.js": "/static/v3/js/views/my-computer.1b2ff621.js",
+    "static/v3/js/views/pipeline.js": "/static/v3/js/views/pipeline.c522f1ce.js",
+    "static/v3/js/views/planning.js": "/static/v3/js/views/planning.9ac3e313.js",
+    "static/v3/js/views/settings.js": "/static/v3/js/views/settings.4f777210.js",
+    "static/v3/js/views/skills.js": "/static/v3/js/views/skills.c6c2f965.js",
+    "static/v3/js/views/tools.js": "/static/v3/js/views/tools.e4f11276.js",
+    "static/v3/js/views/workflows.js": "/static/v3/js/views/workflows.26c57290.js"
+  }
+}

package/static/v3/css/lattice.base.e4cdd05d.css

@@ -0,0 +1,128 @@
+/* ============================================================================
+ * Lattice AI v3 — Base layer (reset + element defaults + lattice backdrop)
+ * Token-native: no themed hex values, everything via var(--*).
+ * ========================================================================== */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  font-family: var(--lt3-font-sans);
+  font-size: var(--lt3-text-md);
+  line-height: var(--lt3-leading-normal);
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow: hidden;            /* shell owns scroll regions */
+}
+
+/* The signature lattice backdrop — a faint structural mesh of nodes+edges.
+   Sits behind the whole app; reinforces the "lattice" identity without noise. */
+.lt3-app::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at center, var(--lt3-mesh-node) 0.9px, transparent 1.1px),
+    linear-gradient(var(--lt3-mesh-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--lt3-mesh-line) 1px, transparent 1px),
+    var(--app-bg);
+  background-size:
+    var(--lt3-mesh-size) var(--lt3-mesh-size),
+    var(--lt3-mesh-size) var(--lt3-mesh-size),
+    var(--lt3-mesh-size) var(--lt3-mesh-size),
+    cover;
+  background-position: center;
+  mask-image: radial-gradient(ellipse 120% 90% at 50% -10%, #000 55%, transparent 100%);
+  opacity: 0.9;
+}
+
+h1, h2, h3, h4, p, figure { margin: 0; }
+
+a { color: inherit; text-decoration: none; }
+
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+input, select, textarea { font: inherit; color: inherit; }
+
+textarea { resize: vertical; }
+
+img, svg { display: block; max-width: 100%; }
+
+code, pre, kbd, samp { font-family: var(--lt3-font-mono); }
+
+:root[data-lt-icons="fallback"] .ti {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1em;
+  min-height: 1em;
+  font-family: var(--lt3-font-mono);
+  font-size: 0.72em;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+:root[data-lt-icons="fallback"] .ti::before {
+  content: attr(data-fallback);
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--lt3-radius-xs);
+}
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--border-strong) 60%, transparent);
+  border-radius: 99px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
+
+/* Accessible visually-hidden utility */
+.lt3-sr {
+  position: absolute !important;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0,0,0,0);
+  white-space: nowrap; border: 0;
+}
+
+.lt3-skip {
+  position: fixed;
+  top: var(--lt3-space-3);
+  left: var(--lt3-space-3);
+  z-index: var(--lt3-z-toast);
+  padding: var(--lt3-space-2) var(--lt3-space-4);
+  background: var(--accent);
+  color: #fff;
+  border-radius: var(--lt3-radius-sm);
+  transform: translateY(-200%);
+  transition: transform var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-skip:focus { transform: translateY(0); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}