.record-list{display:flex;flex-direction:column;gap:var(--space-6)}.story{border:1px solid var(--color-border);background:var(--color-bg);padding:var(--space-6);transition:border-color var(--duration-fast) var(--ease)}.story:hover{border-color:var(--color-border-strong)}.story-head{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.story-num{font-size:var(--text-2xl);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--color-text-muted);line-height:1}.story-title{flex:1;font-size:var(--text-xl);font-weight:700;letter-spacing:var(--tracking-wide);color:var(--color-text);line-height:var(--leading-tight)}.story-meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);color:var(--color-text-muted);text-transform:uppercase}.story-body{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-text);white-space:pre-line;margin-bottom:var(--space-5)}.story-colors{display:flex;gap:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.story-color-chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}.story-color-block{width:var(--space-4);height:var(--space-4);border-radius:var(--radius-sm);flex-shrink:0}.story-color-name{color:var(--color-text)}.story-color-hsl{font-family:var(--font-mono);color:var(--color-text-muted)}@media (max-width: 768px){.story{padding:var(--space-5)}.story-head{flex-wrap:wrap}.story-meta{align-items:flex-start}.story-num{font-size:var(--text-xl)}}