* { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 1rem; }
body { min-height: 100vh; margin: 0; color: var(--rl-foam); background: linear-gradient(180deg, var(--rl-deep), var(--rl-abyss) 48rem); font-family: var(--rl-font-body); font-size: 1rem; line-height: 1.75; }
a { color: inherit; }
button, select { font: inherit; }
button { min-height: 48px; padding: .65rem 1.25rem; border: 1px solid var(--rl-boundary); border-radius: var(--rl-radius-small); font-weight: 700; cursor: pointer; }
button:hover { filter: brightness(.94); }
:focus-visible { outline: 3px solid var(--rl-sun); outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: .75rem 1rem; background: var(--rl-abyss); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.app-shell { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem 3rem; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 2rem 0 4rem; }
.intro { grid-column: 1 / -1; }
h1 { margin: 0; font: 800 clamp(1.75rem, 2.6vw, 2.25rem)/1.5 var(--rl-font-display); letter-spacing: -.035em; }
.lead { margin: .5rem 0 0; color: var(--rl-surface); font-size: .9375rem; }
.tool-panel { min-width: 0; }
.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.select-label { grid-column: 1 / -1; font-size: .875rem; font-weight: 700; }
select { width: 100%; min-width: 0; min-height: 48px; padding: .5rem .75rem; border: 1px solid var(--rl-boundary); border-radius: var(--rl-radius-small); color: var(--rl-ink); background: var(--rl-tool-surface); }
.primary-button { color: var(--rl-on-selected); background: var(--rl-selected); border-color: var(--rl-selected); }
.deck-card { display: grid; grid-template-rows: auto minmax(auto, 1fr) auto auto; gap: 1rem; min-height: 24rem; padding: 2rem; border-top: 4px solid var(--rl-wave); border-radius: var(--rl-radius); color: var(--rl-ink); background: var(--rl-paper); box-shadow: 0 6px 0 #0e728a; overflow-wrap: anywhere; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.category-pill { font-size: .875rem; color: var(--rl-action); font-weight: 700; }
.topic-text { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.55; letter-spacing: -.025em; }
.follow-group { padding-top: 1rem; border-top: 1px solid var(--rl-divider); }
.follow-label { margin: 0 0 .25rem; color: var(--rl-muted); font-size: .8125rem; }
.follow-text { margin: 0; font-size: 1rem; line-height: 1.8; }
.mood-tag { color: var(--rl-muted); font-size: .8125rem; }
.deck-card.is-drawing { animation: draw-card 160ms ease-out; }
.actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-top: 1.5rem; }
.again-button { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--rl-on-selected); background: var(--rl-selected); border-color: var(--rl-selected); }
.share-actions { display: flex; gap: .5rem; }
.share-actions button { padding-inline: .875rem; color: var(--rl-foam); background: var(--rl-abyss); }
.status-line { min-height: 1.75rem; margin: .875rem 0 0; color: var(--rl-foam); font-size: .875rem; }
.history-panel { align-self: start; min-width: 0; margin-top: 1.85rem; padding: 1.5rem; color: var(--rl-ink); background: var(--rl-tool-surface); }
.history-panel h2 { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.5; }
.history-list { max-height: 29rem; overflow-y: auto; margin: 0; padding: 0 .5rem 0 0; list-style: none; scrollbar-width: thin; }
.history-list:focus-visible, .history-clear:focus-visible { outline-color: var(--rl-action); }
.history-list li { padding: .875rem 0; border-bottom: 1px solid var(--rl-divider); }
.history-list li:first-child { padding-top: 0; }
.history-list li:last-child { border: 0; }
.history-category { display: block; color: var(--rl-muted); font-size: .75rem; }
.history-topic { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.75; overflow-wrap: anywhere; }
.empty-history { color: var(--rl-muted); font-size: .875rem; }
.history-clear { width: 100%; margin-top: 1.5rem; color: var(--rl-danger); background: transparent; font-size: .875rem; }
@keyframes draw-card { from { opacity: .75; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: minmax(0, 1fr) 16rem; gap: 2rem; }
  .actions { grid-template-columns: 1fr; }
  .share-actions { justify-content: flex-end; }
}
@media (max-width: 820px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
  .history-panel { margin: 0; }
  .history-list { max-height: none; padding-right: 0; }
}
@media (max-width: 480px) {
  .app-shell { width: calc(100% - 32px); padding-top: 1.5rem; gap: 1.5rem; }
  .controls { gap: .5rem .75rem; }
  .primary-button { padding-inline: 1rem; }
  .deck-card { padding: 1.5rem; }
  .share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-actions button { padding-inline: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .deck-card.is-drawing { animation: none; } }

body { --rl-paper: #faf5e9; --rl-selected: #e8b99d; --rl-on-selected: #493529; --rl-action: #326467; }
.deck-card { border: 0; border-radius: 8px; background: linear-gradient(115deg, #fffaf0, #f3ecd9); box-shadow: 0 18px 45px #021c3338, 3px 4px 0 #e4e0d4; }
.topic-text { font-weight: 650; line-height: 1.65; }
.category-pill { font-weight: 600; }
.primary-button { border-color: #e8b99d; }
.history-panel { border-color: #b8d5d13b; }

@media(min-width:1600px) { .app-shell { width: 1280px; grid-template-columns: minmax(0,1fr) 20rem; } .lead,.select-label,.history-topic,.empty-history { font-size: 1rem; } .deck-card { min-height: 25rem; padding: 2.5rem; } .topic-text { font-size: 2rem; } }

.history-card-button { display: block; width: 100%; padding: .375rem .5rem; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.history-card-button:hover { background: #cce7e51f; }
.history-card-button:focus-visible { outline: 2px solid var(--rl-focus); outline-offset: 2px; }