/* Muted field colours; the slider shifts accents, keeping text neutral. */
:root{color-scheme:light;--ink:#303936;--muted:#50584f;--paper:#e8e2d3;--line:#b7b6a4;--green:hsl(calc(76 + var(--hue-shift)) 19% 80%);--accent:hsl(calc(43 + var(--hue-shift)) 32% 80%);--surface:#f2eee3;--header:#e4e2d5;--button:#4d583e;--button-text:#fffdf5;--focus:#776022;--slate:#c1c8c5}
body{background:radial-gradient(ellipse at 12% 5%,var(--green),transparent 50%),radial-gradient(ellipse at 100% 25%,var(--slate),transparent 55%),var(--paper);background-attachment:fixed}
header,footer,.draft{background:var(--header);color:var(--muted);border-color:var(--line)}
.brand,h1,h2,h3,summary{color:var(--ink)}
.hero-copy,.journey-step,.journey-step:last-child,.reading-guide,.article-layout article,.participant-document,.profile,.companion-portrait,.questions details,.path-card,.handover,.limit-strip,.side-nav nav{background:var(--surface);border-color:var(--line)}
.hero-copy{background:linear-gradient(130deg,var(--accent),var(--surface))}
.journey-step:last-child,.approach{background:linear-gradient(130deg,var(--green),var(--surface));border-color:var(--line)}
.notice{background:var(--accent)}
.button,.header-action,.logo{background:var(--button);color:var(--button-text)}
.button:hover,.header-action:hover{background:var(--ink);color:var(--paper)}
.external-note,.persona-kicker,.conversation-head small,.limit-strip>span{color:var(--muted)}
.human,.companion,.hero-copy .eyebrow,.skip{background:var(--surface);color:var(--ink)}
.path-card:hover{background:var(--green)}
.footer-bottom,.profile-prompt{border-color:var(--line)}
.colour-controls{grid-template-columns:auto minmax(120px,350px) auto auto}
.colour-controls button{color:var(--ink);background:var(--surface);border-color:var(--line);min-height:44px}
.colour-controls button[aria-pressed=true]{background:var(--button);color:var(--button-text)}
.colour-controls input::-webkit-slider-runnable-track{background:linear-gradient(90deg,#858d69,#75918b,#858099,#aa8973,#858d69)}
.colour-controls input::-moz-range-track{background:linear-gradient(90deg,#858d69,#75918b,#858099,#aa8973,#858d69)}
a:focus-visible,summary:focus-visible,.colour-controls input:focus-visible,.colour-controls button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
:root[data-theme=night]{color-scheme:dark;--ink:#eee9dc;--muted:#c7c9bb;--paper:#1c2425;--line:#596158;--green:hsl(calc(76 + var(--hue-shift)) 15% 23%);--accent:hsl(calc(43 + var(--hue-shift)) 22% 25%);--surface:#293130;--header:#222a29;--button:#c7bd8c;--button-text:#222a24;--focus:#dfca80;--slate:#2b383e}
@media(max-width:800px){.colour-controls{grid-template-columns:1fr auto auto}.colour-controls label{grid-column:1/-1}}
@media(max-width:400px){.colour-controls{grid-template-columns:1fr 1fr}.colour-controls input{grid-column:1/-1}}
/* Compact appearance controls immediately below the introductory guide. */
main > .colour-controls{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 12px;width:auto;margin:12px 0 0;padding:0 6px;border:0}
main > .colour-controls label{font-size:12px;gap:6px}
main > .colour-controls .colour-icon{font-size:17px}
main > .colour-controls input{width:120px;height:28px;flex:0 0 120px}
main > .colour-controls button{font-size:12px;min-height:30px;padding:4px 10px;border-radius:8px}
main > .colour-controls small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
main > .colour-controls input::-webkit-slider-runnable-track{height:5px}
main > .colour-controls input::-webkit-slider-thumb{width:16px;height:16px;border-width:2px;margin-top:-5.5px}
main > .colour-controls input::-moz-range-track{height:5px}
main > .colour-controls input::-moz-range-thumb{width:12px;height:12px;border-width:2px}
@media(max-width:400px){main > .colour-controls{gap:6px 8px}main > .colour-controls input{width:90px;flex-basis:90px}}