/* Perslis Symbols — its own area: gold and mint on warm black (Peel stays teal/blue on navy, Motion violet). */
.peel-site.sy-site { --bg:#0b0a08; --panel:#15130f; --line:#2d2820; --teal:#f2c14e; --blue:#7fd9c9; --muted:#d9d2c4; --dim:#a0978b; --ink:#f7f3ea; background:var(--bg); }
.peel-site.sy-site .peel-header { background:rgba(11,10,8,.94); }
.peel-site.sy-site .peel-button.primary { background:var(--teal); border-color:var(--teal); color:#1a1304; }
.peel-site.sy-site .peel-button.primary:hover { background:#ffd772; border-color:#ffd772; }
.peel-site.sy-site .peel-button:hover { border-color:var(--blue); background:#1a1712; }
.peel-site.sy-site .grad, .sy-grad { background-image:linear-gradient(100deg,#ffd772 0%,#f2c14e 40%,#7fd9c9 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.peel-site.sy-site .peel-mark { color:var(--teal); }
.peel-site.sy-site a:focus-visible, .peel-site.sy-site button:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.peel-site.sy-site .peel-nav .peel-nav-demo { background:var(--teal); color:#1a1304; }
.peel-site.sy-site .peel-nav .peel-nav-demo:hover { background:#ffd772; color:#1a1304; }

/* layout pieces */
.sy-hero h1 { max-width:18ch; }
.sy-lead-narrow { max-width:700px; margin-left:auto; margin-right:auto; }
.sy-flow { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin:1.6rem 0; font-family:ui-monospace,Menlo,monospace; font-size:.82rem; }
.sy-flow b { background:#15130f; border:1px solid #3a3226; border-radius:8px; padding:.5rem .8rem; color:#eee6d6; font-weight:500; white-space:nowrap; }
.sy-flow b.on { border-color:var(--teal); color:#fff4d1; box-shadow:inset 0 0 0 1px rgba(242,193,78,.35); }
.sy-flow b.person { border-color:var(--blue); color:#e0fff8; }
.sy-flow .ar { color:#6d6357; }
.sy-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1.4rem; text-align:left; }
.sy-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin-top:1.2rem; text-align:left; }
.sy-card { background:#15130f; border:1px solid #2d2820; border-radius:14px; padding:1.1rem 1.2rem; }
.sy-card h3, .sy-card h4 { margin:.1rem 0 .5rem; font-size:1.02rem; color:#fff4d1; }
.sy-card p { font-size:.92rem; color:#b9b0a1; margin:0 0 .5rem; }
.sy-card .k { font-family:ui-monospace,Menlo,monospace; font-size:.8rem; color:var(--teal); }
.sy-muted { color:var(--dim); font-size:.9rem; }
.sy-note { color:var(--dim); }
.sy-ok { color:#57e0a2; } .sy-x { color:#ff8a6a; }
.sy-numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.4rem 0; text-align:left; }
.sy-numbers div { background:#15130f; border:1px solid #2d2820; border-radius:12px; padding:.9rem 1rem; }
.sy-numbers b { display:block; font-size:1.5rem; color:var(--teal); font-family:ui-monospace,Menlo,monospace; letter-spacing:-.02em; }
.sy-numbers span { font-size:.84rem; color:#b9b0a1; }
.sy-numbers small { display:block; margin-top:.3rem; font-size:.74rem; color:var(--dim); }
.sy-figure { background:#0e0d0a; border:1px solid #2d2820; border-radius:14px; padding:14px; margin:1.2rem 0; overflow:hidden; }
.sy-figure svg { width:100%; height:auto; display:block; }
.sy-figure figcaption, .sy-caption { font-size:.82rem; color:var(--dim); margin-top:.6rem; text-align:left; }
.sy-figure .box { fill:#15130f; stroke:#3a3226; stroke-width:1.2; }
.sy-figure .box.gold { stroke:var(--teal); } .sy-figure .box.mint { stroke:var(--blue); }
.sy-figure .box.yours { fill:#10130f; stroke:#2f4a3e; }
.sy-figure .zone { fill:none; stroke:#3a3226; stroke-dasharray:6 5; stroke-width:1; }
.sy-figure .lbl { fill:#eee6d6; font:600 13px Inter,system-ui,sans-serif; }
.sy-figure .sub { fill:#a0978b; font:11.5px ui-monospace,Menlo,monospace; }
.sy-figure .zonelbl { fill:#a0978b; font:600 11px Inter,system-ui,sans-serif; letter-spacing:.08em; }
.sy-figure .arrow { stroke:#8b7f6c; stroke-width:1.6; fill:none; marker-end:url(#sy-arrowhead); }
.sy-figure .arrow.gold { stroke:var(--teal); } .sy-figure .arrow.mint { stroke:var(--blue); }
.sy-figure .arrowlbl { fill:#c9c0b0; font:11px ui-monospace,Menlo,monospace; }
.sy-figure .rail { stroke:#8b7f6c; stroke-width:1.5; fill:none; }
.sy-figure .term { fill:#1e2a24; stroke:var(--blue); stroke-width:1.2; rx:14; }
.sy-figure .nonterm { fill:#15130f; stroke:var(--teal); stroke-width:1.2; }
.sy-figure .termlbl { fill:#e0fff8; font:600 12px ui-monospace,Menlo,monospace; }

/* console / code */
.sy-console { background:#070605; border:1px solid #2d2820; border-radius:14px; padding:14px 16px; text-align:left; font-family:ui-monospace,Menlo,monospace; font-size:.84rem; line-height:1.55; color:#e7dfcf; overflow:auto; }
.sy-console .prompt { color:var(--teal); } .sy-console .dim { color:#8b7f6c; }
.sy-console-top { display:flex; justify-content:space-between; font-size:.72rem; letter-spacing:.08em; color:#8b7f6c; margin-bottom:8px; }
.sy-code { background:#070605; border:1px solid #2d2820; border-radius:10px; padding:10px 12px; font:12.5px/1.5 ui-monospace,Menlo,monospace; color:#e7dfcf; overflow:auto; text-align:left; white-space:pre-wrap; word-break:break-word; margin:.4rem 0 .8rem; }
.sy-value { background:#0e0d0a; border:1px solid #3a3226; border-radius:10px; padding:12px 14px; font:15px/1.5 ui-monospace,Menlo,monospace; color:#fff4d1; white-space:pre-wrap; text-align:left; min-height:3.2em; margin:.4rem 0 .6rem; }
.sy-readback { font-size:.9rem; color:#b9b0a1; text-align:left; margin:.3rem 0 .8rem; }
.sy-verdict { font:12.5px ui-monospace,Menlo,monospace; color:var(--dim); text-align:left; padding:.45rem .7rem; border-radius:8px; border:1px solid #2d2820; }
.sy-verdict.ok { color:#57e0a2; border-color:#2c5a54; background:#0e1a17; }
.sy-verdict.bad { color:#ff8a6a; border-color:#5a3a2c; background:#1c1310; }
.sy-verdict.note { color:#f0c674; border-color:#5a4a2c; background:#1c1710; }

/* demos */
.sy-demo { background:#0e0d0a; border:1px solid #2d2820; border-radius:16px; padding:16px; margin:1.2rem 0; text-align:left; }
.sy-demo h4 { margin:.6rem 0 .3rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.sy-demo-top { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-bottom:.6rem; }
.sy-label { font:600 12px Inter,system-ui,sans-serif; color:#c9c0b0; }
.sy-select, .sy-textarea { background:#15130f; color:#f7f3ea; border:1px solid #3a3226; border-radius:8px; padding:.5rem .7rem; font:14px Inter,system-ui,sans-serif; max-width:100%; }
.sy-textarea { width:100%; font:12.5px/1.5 ui-monospace,Menlo,monospace; resize:vertical; box-sizing:border-box; }
.sy-two-col { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.sy-demo-controls { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin:.8rem 0 .4rem; }
.sy-edits-wrap { display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; }
.sy-edits { display:flex; flex-wrap:wrap; gap:.3rem .9rem; }
.sy-edits label { font-size:.86rem; color:#c9c0b0; cursor:pointer; }
.sy-details summary { cursor:pointer; color:var(--dim); font-size:.86rem; margin:.4rem 0; }
.sy-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem; }
.sy-tab { font:12.5px Inter,system-ui,sans-serif; color:#c9c0b0; background:#15130f; border:1px solid #3a3226; border-radius:999px; padding:.45rem .9rem; cursor:pointer; text-align:left; }
.sy-tab.on { border-color:var(--teal); color:#fff4d1; }
.sy-checks { list-style:none; padding:0; margin:.2rem 0; font:12.5px/1.6 ui-monospace,Menlo,monospace; }
.sy-checks li { padding:.2rem 0; border-bottom:1px dashed #2d2820; }
.sy-checks li.pass b { color:#57e0a2; } .sy-checks li.fail b { color:#ff8a6a; }
.sy-checks code { color:#fff4d1; }
.sy-gate-verdict { margin-top:.6rem; font:600 13px ui-monospace,Menlo,monospace; padding:.5rem .7rem; border-radius:8px; }
.sy-gate-verdict.ok { color:#57e0a2; background:#0e1a17; border:1px solid #2c5a54; }
.sy-gate-verdict.bad { color:#ff8a6a; background:#1c1310; border:1px solid #5a3a2c; }
.sy-gate-action { color:#c9c0b0; font-size:.92rem; }

/* calculator */
.sy-calc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.6rem 1rem; text-align:left; }
.sy-calc-field { display:flex; flex-direction:column; gap:.25rem; }
.sy-calc-field label { font-size:.8rem; color:#c9c0b0; }
.sy-calc-field input { background:#15130f; color:#f7f3ea; border:1px solid #3a3226; border-radius:8px; padding:.45rem .6rem; font:14px ui-monospace,Menlo,monospace; }
.sy-calc-out { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.5rem 1.2rem; margin:1.2rem 0 .4rem; text-align:left; }
.sy-calc-row { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dashed #2d2820; padding:.4rem 0; font-size:.9rem; color:#b9b0a1; }
.sy-calc-row b { color:#fff4d1; font-family:ui-monospace,Menlo,monospace; text-align:right; }
.sy-chart .ax { stroke:#3a3226; stroke-width:1; } .sy-chart .tick { fill:#8b7f6c; font:11px ui-monospace,Menlo,monospace; }
.sy-chart polyline.model { fill:none; stroke:#ff8a6a; stroke-width:2.2; } .sy-chart polyline.symbol { fill:none; stroke:var(--blue); stroke-width:2.2; }
.sy-chart line.be { stroke:var(--teal); stroke-dasharray:4 4; } .sy-chart text.lbl { font:600 12px Inter,system-ui,sans-serif; stroke:none; }
.sy-chart text.model { fill:#ff8a6a; } .sy-chart text.symbol { fill:var(--blue); }
.sy-math { background:#0e0d0a; border:1px solid #2d2820; border-radius:12px; padding:.8rem 1rem; margin:.8rem 0; overflow:auto; text-align:left; }
.sy-math math { font-size:1.08rem; color:#fff4d1; }
.sy-math p { margin:.3rem 0; font-size:.88rem; color:#b9b0a1; }

/* the paper */
.sy-paper { max-width:820px; margin:0 auto; text-align:left; counter-reset:sec; }
.sy-paper h2 { counter-increment:sec; font-size:1.45rem; margin:2.2rem 0 .6rem; }
.sy-paper h2::before { content:counter(sec) ". "; color:var(--teal); }
.sy-paper h3 { font-size:1.08rem; margin:1.4rem 0 .4rem; color:#fff4d1; }
.sy-paper p, .sy-paper li { font-size:1rem; line-height:1.65; color:#d9d2c4; }
.sy-paper ul, .sy-paper ol { padding-left:1.3rem; }
.sy-abstract { background:#15130f; border-left:3px solid var(--teal); border-radius:0 12px 12px 0; padding:1rem 1.2rem; margin:1rem 0 1.6rem; }
.sy-abstract p { margin:0; font-size:.98rem; }
.sy-def { margin:.6rem 0; padding:.4rem .9rem; background:#0e0d0a; border:1px solid #2d2820; border-radius:10px; }
.sy-def p { margin:.55rem 0; color:#b9b0a1; font-size:.95rem; } .sy-def p b { color:#fff4d1; }
.sy-table-wrap { overflow:auto; border:1px solid #2d2820; border-radius:12px; margin:.8rem 0; }
.sy-table { width:100%; border-collapse:collapse; font-size:.88rem; text-align:left; }
.sy-table th, .sy-table td { padding:.55rem .7rem; border-bottom:1px solid #2d2820; vertical-align:top; }
.sy-table th { color:var(--teal); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; background:#0e0d0a; }
.sy-table td code { color:#fff4d1; font-size:.84rem; }
.sy-table td { color:#c9c0b0; }
.sy-refs { font-size:.88rem; color:#b9b0a1; } .sy-refs li { margin:.35rem 0; }

/* faq */
.sy-faq { text-align:left; max-width:820px; margin:1rem auto; }
.sy-faq dt { font-weight:700; color:#fff4d1; margin-top:1rem; } .sy-faq dd { margin:.3rem 0 0; color:#b9b0a1; line-height:1.6; }

/* steps + form */
.sy-steps { counter-reset:step; list-style:none; padding:0; text-align:left; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; }
.sy-steps li { background:#15130f; border:1px solid #2d2820; border-radius:12px; padding:.9rem 1rem; }
.sy-steps li::before { counter-increment:step; content:counter(step); display:inline-block; font:700 12px ui-monospace,Menlo,monospace; color:#1a1304; background:var(--teal); border-radius:999px; width:22px; height:22px; line-height:22px; text-align:center; margin-bottom:.4rem; }
.sy-steps b { display:block; color:#fff4d1; margin-bottom:.2rem; } .sy-steps span { font-size:.9rem; color:#b9b0a1; }
.sy-form { text-align:left; background:#0e0d0a; border:1px solid #2d2820; border-radius:16px; padding:1.2rem; max-width:820px; margin:1.2rem auto; }
.sy-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; }
.sy-field { display:flex; flex-direction:column; gap:.3rem; }
.sy-field.wide { grid-column:1 / -1; }
.sy-field label { font-size:.84rem; color:#c9c0b0; }
.sy-field input, .sy-field select, .sy-field textarea { background:#15130f; color:#f7f3ea; border:1px solid #3a3226; border-radius:8px; padding:.55rem .7rem; font:14px Inter,system-ui,sans-serif; width:100%; box-sizing:border-box; }
.sy-field textarea { min-height:6em; resize:vertical; }
.sy-consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:#c9c0b0; margin:.9rem 0; }
.sy-consent input { margin-top:.25rem; }
.sy-honey { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sy-form-status { min-height:1.4em; font-size:.92rem; margin:.7rem 0 0; color:var(--dim); }
.sy-form-status.ok { color:#57e0a2; } .sy-form-status.bad { color:#ff8a6a; } .sy-form-status.wait { color:#f0c674; }
.sy-next { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.6rem; }
.sy-next a { font-family:ui-monospace,Menlo,monospace; font-size:.82rem; color:#c9c0b0; background:#15130f; border:1px solid #3a3226; border-radius:999px; padding:.5rem 1rem; text-decoration:none; }
.sy-next a:hover { border-color:var(--teal); color:#fff4d1; }
.sy-cta { text-align:center; }
.sy-cta .peel-button { margin:.4rem .3rem; }
.sy-src { font-size:.78rem; color:var(--dim); }

@media (max-width: 860px) {
  .sy-two-col, .sy-form-grid { grid-template-columns:1fr; }
  .sy-numbers { grid-template-columns:1fr 1fr; }
  .sy-calc-out { grid-template-columns:1fr; }
}
@media (max-width: 520px) { .sy-numbers { grid-template-columns:1fr; } }