/* same palette and type as wildmann.org (website/style.css) */
:root {
--bg: #1f1e1d;
--panel: #272624;
--line: #3d3c39;
--text: #d8d5ca;
--bright: #faf9f5;
--dim: #9c9a92;
--accent: #d97757;
--good: #8fbf7f;
--bad: #e06c6c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
margin: 0;
color: var(--text);
font: 15px/1.6 ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
background: var(--bg);
}
main { max-width: 52rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
::selection { background: var(--accent); color: var(--bg); }

a { color: var(--bright); text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 .8rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* welcome box */
.welcome {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
padding: 1.1rem 1.5rem; border: 1px solid var(--accent); border-radius: 12px;
}
.welcome img { width: 80px; height: 80px; border-radius: 16px; flex: none; }
.welcome .meta { min-width: 0; }
.star { color: var(--accent); }
.title { margin: 0 0 .15rem; color: var(--bright); font-weight: 600; }
.hero { margin: 0; color: var(--accent); font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.sub { margin: .35rem 0 0; color: var(--dim); font-size: .85rem; }
.cursor {
display: inline-block; width: .55em; height: 1.05em; margin-left: .25em;
vertical-align: text-bottom; background: var(--accent);
animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* prompt + response */
section { margin-top: 2rem; }
h2 {
margin: 0 0 .9rem; padding: .5rem .9rem;
font-size: 1rem; font-weight: 400; color: var(--bright);
background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.chev { margin-right: .6rem; color: var(--accent); font-weight: 700; }
.resp { position: relative; padding-left: 1.6rem; }
.resp::before { content: "\25CF"; position: absolute; left: 0; top: 0; color: var(--accent); }
.resp > :last-child { margin-bottom: 0; }
.hint { color: var(--dim); font-size: .85rem; }
.errors { color: var(--bad); font-size: .85rem; white-space: pre-line; }
strong { color: var(--bright); font-weight: 600; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn {
font: inherit; color: var(--text); background: var(--panel);
padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--bright); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { border-color: var(--accent); color: var(--bright); }
.btn.primary:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.btn.small { padding: .15rem .6rem; font-size: .85rem; }

/* chart: one bar per area */
.chart li { display: grid; grid-template-columns: 9rem 1fr 3.5rem; align-items: center; gap: .75rem; padding: .2rem 0; }
.chart .label { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart .pct { color: var(--bright); text-align: right; font-size: .85rem; }
.track { height: .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--accent); }

/* topic tree */
.topics details { margin-left: 1rem; }
.topics > details { margin-left: 0; }
.topics summary { cursor: pointer; padding: .15rem 0; color: var(--dim); }
.topics summary::marker { color: var(--accent); }
.topic { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.topic .go {
font: inherit; color: var(--bright); background: none; border: 0; padding: 0; cursor: pointer;
text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.topic .go:hover { color: var(--accent); }
.topic .meta { color: var(--dim); font-size: .8rem; }
.topic .meta.done { color: var(--good); }
.leaf { margin-left: 2.1rem; padding: .15rem 0; }

/* question view: sized to one screen, no scrolling */
.bar { display: flex; align-items: center; gap: .75rem; color: var(--dim); font-size: .85rem; }
.crumb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { color: var(--bright); }
.progress { height: 3px; margin: .6rem 0 1.25rem; background: var(--line); border-radius: 2px; }
.progress div { height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .2s; }
.q { font-size: 1.05rem; line-height: 1.5; }
.options { display: grid; gap: .5rem; }
.options button {
display: flex; gap: .75rem; width: 100%; text-align: left;
font: inherit; color: var(--text); background: none; cursor: pointer;
padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 8px;
}
.options button:hover:not(:disabled) { border-color: var(--accent); color: var(--bright); }
.options button:disabled { cursor: default; }
.options .key { color: var(--accent); flex: none; }
.options button.right { border-color: var(--good); color: var(--bright); }
.options button.right .key { color: var(--good); }
.options button.wrong { border-color: var(--bad); }
.options button.wrong .key { color: var(--bad); }
.feedback { margin-top: 1rem; padding: .75rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.verdict { margin: 0 0 .3rem; font-weight: 600; }
.verdict.ok { color: var(--good); }
.verdict.no { color: var(--bad); }
.explain { color: var(--text); font-size: .9rem; }
.keys { margin-top: 1rem; color: var(--dim); font-size: .75rem; }

#results .actions { margin-top: 1.5rem; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .85rem; }
footer p { margin: 0; }

@media (max-width: 36rem) {
.hero { font-size: 1.3rem; }
.chart li { grid-template-columns: 6.5rem 1fr 3rem; }
main { padding-top: 1rem; }
}