/* Styles for the Instructions page of any project. */
:root{color-scheme:light;--bg:#eef0ec;--ink:#1f2a28;--muted:#5b6862;--line:#c9cfc9;--panel:#f7f8f5;--ember:#d4531c;--chip:#e3e7e2;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#151a19;--ink:#dce3df;--muted:#97a39d;--line:#2d3634;--panel:#1c2221;--ember:#ec6a32;--chip:#26302e;}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#151a19;--ink:#dce3df;--muted:#97a39d;--line:#2d3634;--panel:#1c2221;--ember:#ec6a32;--chip:#26302e;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 "IBM Plex Sans",system-ui,sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:28px 16px 48px}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;text-wrap:balance;margin:0}
h1{font-size:2.2rem;font-weight:700;line-height:1.05}
h2{font-size:1.35rem;font-weight:600;margin:28px 0 8px;padding-top:10px;border-top:1px solid var(--line)}
h3{font-size:1.1rem;font-weight:600;margin:14px 0 4px}
p{margin:8px 0}
ul,ol{margin:6px 0;padding-left:22px}
li{margin:4px 0}
a{color:var(--ember)}
code,.id{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.85em}
.sub{color:var(--muted);max-width:68ch}
.chip{display:inline-block;background:var(--chip);border-radius:3px;padding:1px 8px;font:600 .75rem "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);vertical-align:middle}
.head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:10px}
.box{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:10px 14px}
.box h3{margin-top:0}
.box ul{padding-left:18px}
.src{color:var(--muted);font-size:.85rem}
ol.steps>li{padding-left:4px}
.call{font-weight:600}
.call::before{content:"▸ ";color:var(--ember)}
.note{color:var(--muted);font-weight:400}
.tree{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.82rem;line-height:1.5;background:var(--panel);border:1px solid var(--line);padding:10px 14px;overflow-x:auto;white-space:pre}
.list .group{margin-top:18px}
.list li{margin:2px 0}
.err{border-left:4px solid var(--ember);background:var(--panel);padding:10px 14px;white-space:pre-wrap}
.safety li::marker{color:var(--ember)}

/* A material's picture search: small and quiet, for when it's needed. */
a.photos{font-size:.78rem;color:var(--muted)}
a.photos:hover{color:var(--ember)}