/* MathSnapAI — "pebble slate" exercise-book sheet. Palette from MathStyle (paper/ink/teal/sage/amber). */
:root{--paper:#f7f5ee;--ink:#173f42;--teal:#26716a;--sage:#e9f0e6;--amber:#e8b85c;--card:#fcfaf4;--rule:rgba(38,113,106,.13)}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:17px/1.62 "Iowan Old Style","Palatino Linotype",Georgia,serif;
 background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
 background-size:22px 22px;background-position:-1px -1px}
a{color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px}
.binding{position:fixed;left:0;top:0;bottom:0;width:30px;background:repeating-radial-gradient(circle at 15px 22px,#d8d3c4 0 5px,transparent 6px) 0 0/30px 44px,var(--sage);border-right:2px solid #e3a4a0}
.sheet{max-width:780px;margin:0 auto;padding:28px 22px 60px 52px}
.problem{display:flex;gap:16px;align-items:center;margin:8px 0 26px}
.pebble{width:62px;height:50px;flex:none;border-radius:52% 48% 46% 54%/58% 52% 48% 42%;background:radial-gradient(circle at 34% 30%,#4d968d,var(--teal) 60%,#1d5752);box-shadow:inset -4px -5px 0 rgba(0,0,0,.12),0 3px 0 rgba(23,63,66,.18);position:relative}
.pebble:after{content:"√x";position:absolute;inset:0;display:grid;place-items:center;color:var(--paper);font:700 17px/1 Georgia,serif;font-style:italic}
.problem h1{margin:0;font-size:1.95rem;line-height:1.15}
.problem .given{margin:2px 0 0;font:600 .82rem/1.3 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:var(--teal)}
nav.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
nav.tabs a{font:600 .88rem/1 -apple-system,system-ui,sans-serif;padding:9px 13px;border-radius:999px;background:var(--card);border:1.5px solid var(--teal);text-decoration:none}
nav.tabs a[aria-current]{background:var(--teal);color:var(--paper)}
.step{background:var(--card);border-radius:18px;padding:16px 20px 14px 58px;margin:0 0 16px;position:relative;box-shadow:0 1px 0 rgba(23,63,66,.08),0 8px 20px -14px rgba(23,63,66,.35)}
.step h2{margin:0 0 6px;font-size:1.15rem}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--sage);border:1.5px solid var(--teal);display:grid;place-items:center;font:700 .85rem/1 -apple-system,system-ui,sans-serif}
main{counter-reset:step}
.step.ai{border-left:6px solid var(--amber)}
mark{background:linear-gradient(transparent 55%,rgba(232,184,92,.55) 55%);color:inherit;padding:0 2px}
table{width:100%;border-collapse:collapse;font-size:.93rem;margin:8px 0}
th,td{text-align:left;padding:7px 8px;border-bottom:1px dashed var(--rule);vertical-align:top}
th{font:700 .78rem/1.2 -apple-system,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.where{display:inline-block;font:700 .72rem/1 -apple-system,system-ui,sans-serif;padding:5px 8px;border-radius:7px;white-space:nowrap}
.where.dev{background:var(--sage);color:var(--teal)}.where.ai{background:#fbecc9;color:#7a5413}.where.none{background:#eee;color:#555}
.answer{border:2px solid var(--ink);border-radius:4px;padding:10px 14px;margin:18px 0;background:var(--paper);font-style:italic}
.answer b{font-style:normal}
footer{margin-top:34px;font:.85rem/1.5 -apple-system,system-ui,sans-serif;opacity:.85}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.grid a.step{text-decoration:none;color:inherit;display:block}
@media(max-width:560px){.sheet{padding-left:42px}.binding{width:22px}.step{padding-left:52px}}
@media(prefers-color-scheme:dark){:root{--paper:#11262a;--ink:#e9efe7;--card:#183338;--sage:#21433f;--rule:rgba(233,240,230,.08)}.where.ai{background:#4a3a17;color:#f6dca2}.where.none{background:#2a3a3c;color:#ccd}.answer{border-color:#e9efe7}}