.guide{align-self:stretch;max-height:calc(100vh - 48px);overflow:auto;background:#efeeeb;color:#171717;border:1px solid #a6a39d;padding:20px}
.guide h1{margin:0 0 8px;font-size:22px;line-height:1.15;font-weight:680;letter-spacing:-.02em}
.guide h2{margin:22px 0 8px;font-size:14px;font-weight:650}
.guide p,.guide li{font-size:13px;line-height:1.55;color:#484643}
.guide button{width:100%;min-height:40px;border:1px solid #181818;background:#fff;border-radius:6px;padding:0 10px;text-align:left;font-weight:600;margin-bottom:8px}
.guide button.active{border-color:#6558e8;background:#ebe9ff;color:#4f43cc}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.guide-grid button{text-align:center}
.route{background:#171717;color:#fff;font:11px/1.4 var(--mono);padding:8px 10px;margin:12px 0}
.statebox{border:1px solid #aaa;background:#fff;padding:10px;font:11px/1.5 var(--mono);white-space:pre-wrap}
.phone{position:relative;width:100%;height:min(880px,calc(100vh - 48px));min-height:700px;border:2px solid #111;border-radius:28px;overflow:hidden;background:var(--bg);box-shadow:0 14px 40px rgba(0,0,0,.18);display:flex;flex-direction:column}
.statusbar{height:28px;flex:0 0 auto;padding:6px 18px 0;display:flex;justify-content:space-between;background:var(--surface);font:600 10px/1 var(--mono);letter-spacing:.05em}
.app{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--bg)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateX(10px);transition:.16s ease}
.screen.active{opacity:1;pointer-events:auto;transform:none}
.topbar{min-height:64px;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px var(--pad);border-bottom:1px solid var(--line);background:var(--surface)}
.topbar-copy{flex:1;min-width:0}.topbar h1{margin:0;font-size:22px;line-height:1.15;font-weight:680;letter-spacing:-.018em}
.context{display:block;margin-bottom:3px;color:var(--muted);font:600 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.icon{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.icon svg,.nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.content{flex:1;min-height:0;overflow:auto;padding:var(--pad) var(--pad) calc(var(--nav) + 24px)}
.detail .content,.flow .content{padding-bottom:30px}
.section{margin-bottom:24px}.section:last-child{margin-bottom:0}
.bottom-nav.hidden{display:none}.nav{min-height:58px;border:0;border-radius:6px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:600}
.nav.active{color:var(--accent);background:var(--accent-soft)}.nav.register{transform:translateY(-12px);color:#fff}.register-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--accent)}.nav.register span:last-child{color:var(--ink)}
.sheet-bg,.dialog-bg{position:absolute;inset:0;z-index:30;background:rgba(0,0,0,.48);display:none}.sheet-bg.open{display:flex;align-items:flex-end}.dialog-bg.open{display:flex;align-items:center;justify-content:center;padding:20px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Clean runtime: no prototype guide, no legacy page frame. */
body { background: var(--bg); }
.kd-runtime { width: 100%; height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; margin: 0 auto; }
@media (min-width: 821px) {
  body { display: grid; place-items: center; background: #d7d6d3; min-height: 100vh; }
  .kd-runtime { width: 430px; height: min(900px, 100vh); min-height: 700px; border: 1px solid #111; border-radius: 24px; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
}