:root{--ink:#0f1115;--mut:#5b6472;--line:#e6e8ec;--bg:#fff;--acc:#1f5eff;--soft:#f5f7fb}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.flow{position:sticky;top:0;z-index:9;background:#111;color:#bbb;font-size:11px;padding:8px 12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.flow span{padding:3px 8px;border-radius:999px;border:1px solid #333}.flow span.on{background:#fff;color:#111;font-weight:700}.flow em{color:#777;font-style:normal;margin-left:auto}
.phone{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.btn{display:block;width:100%;background:var(--ink);color:#fff;text-decoration:none;text-align:center;border:0;border-radius:10px;padding:14px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.btn.acc{background:var(--acc)}
.note{font-size:11px;color:#a35a00;background:#fff4e5;border:1px solid #ffe2b8;border-radius:8px;padding:6px 10px;margin:10px}

@media(min-width:700px){body{background:#e9eaf0}.phone{max-width:var(--pw,430px);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.06);margin:18px auto;border-radius:12px;overflow:hidden;min-height:auto}.note{max-width:var(--pw,430px);margin:10px auto}}

.framed .flow,.framed .note{display:none!important}.framed .phone{margin:0 auto;box-shadow:none;border-radius:0}