.hallmark/log.json

@@ -0,0 +1,9 @@
+[
+  {
+    "date": "2026-07-26",
+    "macrostructure": "Workbench",
+    "theme": "Garden",
+    "enrichment": "none",
+    "brief": "Personal read-only research client with a soft, deliberate workspace"
+  }
+]

.hallmark/preflight.json

@@ -0,0 +1,9 @@
+{
+  "date": "2026-07-26",
+  "font_stack": "Inter / Noto Sans JP / system sans declared in src/styles.css",
+  "palette": "CSS custom properties with muted teal hex values",
+  "motion": "motion-cut; no motion library",
+  "spacing": "no named scale",
+  "framework": "React 19 + TanStack Start + Vite 8",
+  "preserve": ["routes", "information architecture", "read-only behavior"]
+}

src/components/app-shell.tsx

@@ -10,7 +10,7 @@ export function AppShell({
   return (
     <main className="app">
       <header className="app-header">
-        <p className="brand">TWITTER LITE</p>
+        <p className="brand">Twitter Lite</p>
         <nav aria-label="閲覧方法" className="tabs">
           <Link aria-current={active === 'user' ? 'page' : undefined} to="/">
             ユーザー

src/routes/i.lists.tsx

@@ -31,7 +31,7 @@ export function ListPage({ listId = '' }: { listId?: string }) {
 
   return (
     <AppShell active="list">
-      <h1>どのリストを読みますか？</h1>
+      <h1 className="reader-title-long">どのリストを読みますか？</h1>
       <p className="intro">
         自分のリストを選ぶか、リストURLを入力してください。
       </p>

src/styles.css

@@ -1,18 +1,25 @@
+/* Hallmark · genre: editorial · macrostructure: Workbench · theme: Garden · enrichment: none
+ * tone: soft · anchor: leaf-green · nav: N3 · footer: none (app shell)
+ * contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49–57)
+ */
+/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
+@import "../tokens.css";
+
 :root {
-  --canvas: #dfe7e9;
+  --canvas: var(--color-canvas);
-  --surface: #f8faf9;
+  --surface: var(--color-paper-2);
-  --paper: #fff;
+  --paper: var(--color-paper);
-  --ink: #1e3238;
+  --ink: var(--color-ink);
-  --secondary: #506970;
+  --secondary: var(--color-muted);
-  --accent: #255f6e;
+  --accent: var(--color-accent);
-  --accent-hover: #194d59;
+  --accent-hover: var(--color-accent-hover);
-  --border: #c1cfd2;
+  --border: var(--color-rule);
-  --control-border: #748b91;
+  --control-border: var(--color-control-rule);
-  --error: #8a3034;
+  --error: var(--color-error);
   color: var(--ink);
   background: var(--canvas);
   color-scheme: light;
-  font-family: Inter, "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-body);
   font-synthesis: none;
 }
 
@@ -22,12 +29,14 @@
 
 html {
   min-width: 320px;
+  overflow-x: clip;
   background: var(--canvas);
 }
 
 body {
   min-height: 100vh;
   margin: 0;
+  overflow-x: clip;
 }
 
 button,
@@ -40,9 +49,19 @@ a {
   text-underline-offset: 0.18em;
 }
 
+a:active {
+  color: var(--accent-hover);
+}
+
+a[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
 :focus-visible {
-  outline: 3px solid var(--accent);
+  outline: var(--rule-active) solid var(--color-focus);
-  outline-offset: 3px;
+  outline-offset: var(--space-2xs);
 }
 
 .app {
@@ -53,7 +72,7 @@ a {
   border: 1px solid var(--border);
   border-radius: 1.15rem;
   background: var(--surface);
-  box-shadow: 0 1.2rem 3rem rgb(30 50 56 / 10%);
+  box-shadow: 0 var(--space-lg) var(--space-2xl) var(--color-shadow);
 }
 
 .app-header {
@@ -163,7 +182,7 @@ a {
 
 .list-choices a[aria-current="page"] {
   border-color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
+  background: color-mix(in oklch, var(--accent) 7%, var(--paper));
   box-shadow: inset 3px 0 var(--accent);
 }
 
@@ -191,7 +210,7 @@ a {
   padding: 1rem;
   border: 1px solid var(--border);
   border-radius: 0.9rem;
-  background: color-mix(in srgb, var(--canvas) 45%, var(--surface));
+  background: color-mix(in oklch, var(--canvas) 45%, var(--surface));
 }
 
 .field {
@@ -352,7 +371,7 @@ a {
 
 .current-post {
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 25%, transparent);
 }
 
 .post-header {
@@ -401,7 +420,7 @@ a {
   margin-top: 0.8rem;
   overflow: hidden;
   border-radius: 0.75rem;
-  background: color-mix(in srgb, var(--canvas) 45%, var(--surface));
+  background: color-mix(in oklch, var(--canvas) 45%, var(--surface));
 }
 
 .media-grid > :only-child {
@@ -412,7 +431,7 @@ a {
   display: block;
   width: 100%;
   max-height: 32rem;
-  background: color-mix(in srgb, var(--canvas) 45%, var(--surface));
+  background: color-mix(in oklch, var(--canvas) 45%, var(--surface));
 }
 
 img.media {
@@ -503,7 +522,7 @@ video.media {
     transparent 100%
   );
   content: "";
-  animation: rail 1.1s ease-in-out infinite;
+  animation: rail 1.1s var(--ease-in-out) infinite;
 }
 
 @keyframes rail {
@@ -585,7 +604,7 @@ video.media {
   }
 
   .media-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
 
   .post-footer {
@@ -603,3 +622,561 @@ video.media {
     animation: none;
   }
 }
+
+/* Workbench layout: the routes are tools on a quiet side rail. */
+.app {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: 100%;
+  min-height: 100svh;
+  margin: 0;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: var(--paper);
+  box-shadow: none;
+}
+
+.app-header {
+  display: grid;
+  align-items: start;
+  gap: var(--space-lg);
+  padding: var(--space-lg) var(--space-md) 0;
+  border-bottom: var(--rule-hairline) solid var(--border);
+  background: var(--paper);
+  color: var(--ink);
+}
+
+.brand {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-size: var(--text-md);
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.reader > .reader-title-long {
+  font-size: var(--text-display-long);
+  white-space: nowrap;
+}
+
+.tabs {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+}
+
+.tabs a {
+  min-height: 2.75rem;
+  justify-content: center;
+  padding: var(--space-sm) var(--space-xs);
+  border-bottom: var(--rule-active) solid transparent;
+  color: var(--secondary);
+  font-size: var(--text-sm);
+  font-weight: 700;
+  white-space: nowrap;
+  transition:
+    color var(--dur-short) var(--ease-out),
+    background-color var(--dur-short) var(--ease-out);
+}
+
+.tabs a[aria-current="page"] {
+  border-bottom-color: var(--accent);
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.reader {
+  width: 100%;
+  min-width: 0;
+  padding: var(--space-xl) var(--space-md) var(--space-2xl);
+}
+
+.reader > h1 {
+  max-width: 18ch;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-size: var(--text-display-s);
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: -0.035em;
+  line-height: 1.2;
+}
+
+.intro {
+  max-width: 46ch;
+  margin: var(--space-sm) 0 var(--space-xl);
+  color: var(--secondary);
+  font-size: var(--text-base);
+  line-height: 1.7;
+}
+
+.intent-form {
+  gap: var(--space-md);
+  align-items: end;
+  padding: var(--space-lg);
+  border: 0;
+  border-block: var(--rule-hairline) solid var(--border);
+  border-radius: 0;
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.field {
+  gap: 0;
+  grid-template-rows: auto auto minmax(1lh, auto);
+  color: var(--secondary);
+  font-size: var(--text-sm);
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.field > span:first-child {
+  margin-bottom: var(--space-xs);
+}
+
+.field input {
+  min-height: 2.75rem;
+  padding: var(--space-sm) var(--space-md);
+  border: var(--rule-hairline) solid var(--control-border);
+  border-radius: var(--radius-sm);
+  outline: var(--rule-active) solid transparent;
+  outline-offset: var(--space-3xs);
+  background: var(--paper);
+  color: var(--ink);
+  transition: background-color var(--dur-short) var(--ease-out);
+}
+
+.field input::placeholder {
+  color: var(--secondary);
+}
+
+.field input:focus-visible {
+  border-color: var(--control-border);
+  outline-color: var(--color-focus);
+}
+
+.field input[aria-invalid="true"] {
+  border-color: var(--error);
+}
+
+.field input:disabled {
+  border-color: var(--border);
+  background: var(--color-paper-3);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.field-error {
+  min-height: 1lh;
+  margin-top: var(--space-2xs);
+  color: var(--error);
+  font-size: var(--text-sm);
+}
+
+.intent-form button,
+.list-picker-state button,
+.state button {
+  min-height: 2.75rem;
+  padding: var(--space-sm) var(--space-lg);
+  border: var(--rule-hairline) solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: var(--paper);
+  color: var(--accent);
+  cursor: pointer;
+  font-weight: 700;
+  white-space: nowrap;
+  transition:
+    background-color var(--dur-short) var(--ease-out),
+    color var(--dur-short) var(--ease-out),
+    transform var(--dur-instant) var(--ease-out);
+}
+
+.intent-form button:active,
+.list-picker-state button:active,
+.state button:active {
+  transform: translateY(var(--rule-hairline));
+}
+
+button:disabled,
+button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+button[aria-busy="true"] {
+  cursor: progress;
+  opacity: 0.7;
+}
+
+button[data-state="error"] {
+  border-color: var(--error);
+  color: var(--error);
+}
+
+button[data-state="success"] {
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+.segmented {
+  gap: var(--space-xs);
+}
+
+.segmented legend {
+  margin-bottom: var(--space-xs);
+  color: var(--secondary);
+  font-size: var(--text-sm);
+  letter-spacing: 0;
+}
+
+.segmented label {
+  min-height: 2.75rem;
+  padding: var(--space-sm) var(--space-md);
+  border: var(--rule-hairline) solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--paper);
+  color: var(--ink);
+  font-size: var(--text-sm);
+  transition:
+    background-color var(--dur-short) var(--ease-out),
+    color var(--dur-short) var(--ease-out);
+}
+
+.segmented label:has(input:checked) {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--color-accent-ink);
+}
+
+.segmented label:has(input:focus-visible) {
+  outline: var(--rule-active) solid var(--color-focus);
+  outline-offset: var(--space-3xs);
+}
+
+.segmented label:active {
+  background: var(--color-paper-3);
+}
+
+.segmented label:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.check {
+  min-height: 2.75rem;
+  gap: var(--space-xs);
+  color: var(--ink);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+}
+
+.list-picker {
+  margin-bottom: var(--space-xl);
+  padding: var(--space-lg);
+  border: 0;
+  border-block: var(--rule-hairline) solid var(--border);
+  border-radius: 0;
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.list-picker h2 {
+  margin: 0 0 var(--space-md);
+  font-family: var(--font-display);
+  font-size: var(--text-md);
+  font-style: normal;
+  letter-spacing: -0.02em;
+}
+
+.list-picker-state {
+  color: var(--secondary);
+  font-size: var(--text-sm);
+}
+
+.list-choices {
+  gap: 0;
+}
+
+.list-choices a {
+  gap: var(--space-2xs);
+  padding: var(--space-md) var(--space-sm);
+  border: 0;
+  border-bottom: var(--rule-hairline) solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink);
+}
+
+.list-choices li:first-child a {
+  border-top: var(--rule-hairline) solid var(--border);
+}
+
+.list-choices a[aria-current="page"] {
+  border-color: var(--border);
+  background: var(--color-paper-3);
+  box-shadow: inset var(--rule-active) 0 var(--accent);
+}
+
+.list-choices small,
+.list-choices p {
+  color: var(--secondary);
+  font-size: var(--text-sm);
+}
+
+.focal-post,
+.feed {
+  gap: 0;
+  margin-top: var(--space-xl);
+}
+
+.focal-label {
+  margin: 0 0 var(--space-sm);
+  color: var(--accent);
+  font-size: var(--text-sm);
+  letter-spacing: 0;
+}
+
+.feed {
+  border-top: var(--rule-hairline) solid var(--border);
+}
+
+.post {
+  min-width: 0;
+  padding: var(--space-lg) 0;
+  border: 0;
+  border-bottom: var(--rule-hairline) solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink);
+}
+
+.current-post {
+  padding-inline: var(--space-lg);
+  border: var(--rule-hairline) solid var(--accent);
+  background: var(--paper);
+  box-shadow: none;
+}
+
+.post-header {
+  gap: var(--space-sm);
+}
+
+.avatar {
+  border-radius: 50%;
+}
+
+.handle,
+.post-header time {
+  color: var(--secondary);
+  font-size: var(--text-sm);
+}
+
+.post-text {
+  margin: var(--space-md) 0;
+  font-size: var(--text-base);
+  line-height: 1.8;
+}
+
+.media-grid {
+  gap: var(--space-xs);
+  margin-top: var(--space-md);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+}
+
+.media {
+  background: var(--surface);
+}
+
+.article-card,
+.quote {
+  margin-top: var(--space-md);
+  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
+  border: 0;
+  border-left: var(--rule-active) solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink);
+}
+
+.article-card p {
+  color: var(--secondary);
+}
+
+.post-footer {
+  gap: var(--space-sm) var(--space-lg);
+  margin-top: var(--space-lg);
+  color: var(--secondary);
+  font-size: var(--text-sm);
+}
+
+.post-footer a {
+  min-height: 2.75rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.state {
+  margin: var(--space-xl) 0 0;
+  padding: var(--space-lg);
+  color: var(--secondary);
+}
+
+.loading-rail {
+  padding: var(--space-md);
+  color: var(--secondary);
+  font-size: var(--text-sm);
+}
+
+.loading-rail::after {
+  height: var(--rule-active);
+  background: var(--accent);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tabs a:hover {
+    background: var(--surface);
+    color: var(--accent-hover);
+  }
+
+  .field input:hover {
+    background: var(--surface);
+  }
+
+  .intent-form button:hover,
+  .list-picker-state button:hover,
+  .state button:hover {
+    border-color: var(--accent-hover);
+    background: var(--accent);
+    color: var(--color-accent-ink);
+  }
+
+  .segmented label:hover {
+    border-color: var(--control-border);
+    background: var(--surface);
+  }
+
+  .segmented label:has(input:checked):hover {
+    border-color: var(--accent-hover);
+    background: var(--accent-hover);
+    color: var(--color-accent-ink);
+  }
+
+  .list-choices a:hover {
+    border-color: var(--border);
+    background: var(--color-paper-3);
+    color: var(--ink);
+  }
+}
+
+@media (min-width: 40rem) {
+  .intent-form {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .intent-form:has(.segmented) {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+  }
+
+  .intent-form:has(.segmented) .field {
+    grid-column: 1 / -1;
+  }
+
+  .intent-form:not(:has(.segmented)) > button {
+    align-self: start;
+    margin-top: calc(1lh + var(--space-xs));
+  }
+
+  .media-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .post-header {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .post-header time {
+    grid-column: auto;
+    text-align: right;
+  }
+
+  .post-footer {
+    align-items: center;
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 52rem) {
+  body {
+    padding-block: var(--space-lg);
+    padding-inline: var(--space-xl);
+  }
+
+  .app {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 13.5rem minmax(0, 1fr);
+    width: min(74rem, 100%);
+    min-height: calc(100svh - (var(--space-lg) * 2));
+    margin: 0 auto;
+    border: var(--rule-hairline) solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 var(--space-lg) var(--space-2xl) var(--color-shadow);
+  }
+
+  .app-header {
+    position: sticky;
+    top: var(--space-lg);
+    grid-row: 1;
+    grid-column: 1;
+    align-self: start;
+    gap: var(--space-xl);
+    padding: var(--space-xl) var(--space-lg);
+    border-right: var(--rule-hairline) solid var(--border);
+    border-bottom: 0;
+    border-radius: var(--radius-lg) 0 0 0;
+  }
+
+  .tabs {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .tabs a {
+    justify-content: flex-start;
+    padding-inline: var(--space-md);
+    border-bottom: 0;
+    border-left: var(--rule-active) solid transparent;
+  }
+
+  .tabs a[aria-current="page"] {
+    border-bottom: 0;
+    border-left-color: var(--accent);
+    background: var(--surface);
+  }
+
+  .reader {
+    grid-row: 1 / span 2;
+    grid-column: 2;
+    max-width: none;
+    padding: var(--space-2xl) clamp(var(--space-xl), 6vw, var(--space-2xl))
+      var(--space-3xl);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tabs a,
+  .field input,
+  .intent-form button,
+  .list-picker-state button,
+  .state button,
+  .segmented label {
+    transition-duration: var(--dur-instant);
+    transition-property: opacity;
+  }
+}

tokens.css

@@ -0,0 +1,57 @@
+/* Hallmark · macrostructure: Workbench · tone: soft · anchor hue: leaf-green */
+/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
+:root {
+  --color-canvas: oklch(93% 0.018 125);
+  --color-paper: oklch(98% 0.01 100);
+  --color-paper-2: oklch(95% 0.018 115);
+  --color-paper-3: oklch(90% 0.026 125);
+  --color-ink: oklch(23% 0.025 145);
+  --color-ink-2: oklch(32% 0.03 145);
+  --color-muted: oklch(42% 0.026 145);
+  --color-accent: oklch(38% 0.09 145);
+  --color-accent-hover: oklch(31% 0.085 145);
+  --color-accent-ink: oklch(98% 0.01 100);
+  --color-rule: oklch(80% 0.025 125);
+  --color-control-rule: oklch(55% 0.035 135);
+  --color-focus: oklch(45% 0.15 65);
+  --color-error: oklch(42% 0.13 25);
+  --color-success: oklch(38% 0.1 145);
+  --color-shadow: oklch(23% 0.025 145 / 10%);
+
+  --font-display:
+    "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", ui-serif, serif;
+  --font-body:
+    "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", ui-sans-serif, sans-serif;
+
+  --space-3xs: 0.125rem;
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2.5rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-md: 1.25rem;
+  --text-lg: 1.5625rem;
+  --text-xl: 1.9531rem;
+  --text-display-s: clamp(1.75rem, 7.4vw + 0.25rem, 2.75rem);
+  --text-display-long: clamp(1.5rem, 5.5vw + 0.4rem, 2.75rem);
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-instant: 100ms;
+  --dur-short: 200ms;
+  --dur-medium: 420ms;
+
+  --rule-hairline: 1px;
+  --rule-active: 2px;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 1rem;
+}