:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b0f0e; color: #e9efe9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(circle at 86% 8%, rgba(95,129,100,.12), transparent 28rem), #0b0f0e; }
button, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid #a2c9a9; outline-offset: 3px; }
.shell { max-width: 1130px; min-height: 100svh; margin: auto; padding: clamp(18px, 4vw, 48px); display: flex; flex-direction: column; }
.masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid #27312b; }
.identity { display: flex; align-items: center; gap: 15px; }
.mark { width: 48px; height: 48px; flex: none; }
.eyebrow, .overline { display: block; text-transform: uppercase; letter-spacing: .18em; font-size: .67rem; font-weight: 700; color: #a2c9a9; }
h1 { font-size: clamp(1.18rem, 3vw, 1.65rem); font-weight: 600; letter-spacing: -.035em; margin: 3px 0 0; }
h2, h3, p { margin-top: 0; }
.text-button { border: 0; background: none; color: #a9b8ab; padding: 9px 0; }
.text-button:hover { color: #fff; }
.welcome { max-width: 650px; margin: auto 0; padding: 72px 0 100px; }
.welcome h2 { font-size: clamp(2.6rem, 9vw, 5.8rem); line-height: 1.03; letter-spacing: -.065em; margin: 18px 0 24px; font-weight: 570; }
.welcome > p:not(.overline) { color: #afbbb0; font-size: 1.05rem; line-height: 1.7; max-width: 570px; }
.primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; text-decoration: none; border: 1px solid #b9d3be; background: #b9d3be; color: #122016; border-radius: 10px; padding: 13px 17px; font-weight: 700; margin: 14px 0 22px; min-width: 220px; }
.primary-button:hover { background: #d9e8dc; }
.welcome .fine { font-size: .8rem !important; color: #7d9180 !important; }
.workspace { padding: 38px 0 80px; flex: 1; }
.intro { margin-bottom: 32px; }
.intro-copy { color: #a6b4a8; font-size: 1rem; }
.columns { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: clamp(24px, 5vw, 68px); }
.section-heading { display: flex; align-items: baseline; gap: 9px; margin-bottom: 17px; }
.section-heading h2 { font-size: .85rem; font-weight: 650; margin: 0; }
.count { font-size: .76rem; color: #809183; }
.question-list { display: grid; gap: 5px; }
.question-item { width: 100%; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #a7b7aa; padding: 13px 12px; line-height: 1.35; }
.question-item:hover { background: #151d18; color: #e5eee6; }
.question-item[aria-current="true"] { background: #19231c; border-color: #3c5842; color: #f0f5f0; }
.question-title { display: block; font-weight: 620; }
.question-meta { display: block; font-size: .72rem; color: #879989; margin-top: 5px; }
.detail-panel { min-width: 0; max-width: 730px; }
.detail-panel h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -.055em; font-weight: 580; margin: 12px 0 18px; }
.question-why { color: #b7c4b9; line-height: 1.65; white-space: pre-wrap; font-size: 1.02rem; }
.source-line { color: #839588; font-size: .75rem; margin-top: 18px; }
.timeline { margin-top: 45px; border-top: 1px solid #27312b; }
.timeline-title { font-size: .83rem; margin: 20px 0; color: #adbcaf; }
.entry { position: relative; border-left: 1px solid #354339; padding: 0 0 29px 21px; margin-left: 7px; }
.entry:before { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a3c7a8; left: -4px; top: 5px; }
.entry.sin:before { background: #c5ad92; }
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: #9dab9f; font-size: .73rem; }
.entry-head strong { color: #dce9de; font-size: .8rem; }
.entry-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; margin: 11px 0 7px; }
.entry-source { font-size: .68rem; color: #788a7b; }
.note-form { border-top: 1px solid #27312b; padding-top: 25px; margin-top: 10px; }
.note-form label { display: block; font-size: .83rem; font-weight: 650; margin-bottom: 10px; }
.note-form textarea { display: block; width: 100%; min-height: 110px; resize: vertical; border: 1px solid #3a483e; border-radius: 9px; background: #121a15; color: #e9efe9; padding: 13px 14px; line-height: 1.5; }
.note-form textarea::placeholder { color: #748679; }
.note-form button { border: 1px solid #617f67; border-radius: 8px; background: #263b2c; color: #e8f2ea; font-weight: 650; padding: 10px 15px; margin-top: 11px; }
.note-form button:hover { background: #33503b; }
.note-form button:disabled { opacity: .5; cursor: default; }
.note-hint { font-size: .72rem; color: #829284; margin-top: 11px; }
.empty { color: #9cac9e; line-height: 1.6; padding: 12px 0; }
.error { color: #ffb8a9; background: #351c1c; padding: 11px 14px; border-radius: 8px; }
footer { display: flex; gap: 12px 30px; flex-wrap: wrap; color: #647568; font-size: .68rem; border-top: 1px solid #27312b; padding-top: 17px; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  .shell { padding: max(18px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
  .masthead { padding-bottom: 18px; }
  .mark { width: 42px; height: 42px; }
  .workspace { padding-top: 30px; }
  .columns { grid-template-columns: 1fr; gap: 31px; }
  .question-list { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; scroll-snap-type: x mandatory; }
  .question-item { flex: 0 0 min(77vw, 245px); scroll-snap-align: start; background: #121a15; border-color: #28382d; }
  .detail-panel h2 { font-size: clamp(2rem, 9vw, 3.2rem); }
  .welcome { padding: 70px 0; }
}