:root {
  --bg: #f4f6f5;
  --panel: #ffffff;
  --ink: #15201c;
  --muted: #607069;
  --line: #d9e0dc;
  --accent: #2c7a4b;
  --accent-strong: #1f6039;
  --warn: #9a6700;
  --bad: #a83a32;
  --good-bg: #e7f4eb;
  --warn-bg: #fff4d6;
  --bad-bg: #fdeae8;
  --shadow: 0 10px 28px rgba(22,40,32,.14);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { overflow: hidden; }
button, input { font: inherit; }
button { min-height: 44px; }
button:disabled { opacity: .48; cursor: not-allowed; }
.app-shell { position: relative; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 20; }
.icon-btn { border: 0; background: transparent; font-size: 32px; line-height: 1; border-radius: 10px; }
.icon-btn:disabled { opacity: .25; }
.icon-btn.return-plan { width: 44px; padding: 0; color: var(--accent-strong); font-size: 13px; font-weight: 850; white-space: nowrap; }
.eyebrow { font-size: 11px; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.screen-title { font-size: 19px; font-weight: 800; }
.account-btn { border: 0; border-radius: 10px; background: #edf2ef; color: var(--accent-strong); padding: 8px 10px; font: inherit; font-weight: 850; font-size: 14px; }
.account-panel { position: fixed; z-index: 40; top: 64px; right: 12px; width: min(420px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 12px 32px rgba(16, 37, 27, .16); }
.account-panel pre { white-space: pre-wrap; font: 12px/1.45 ui-monospace, monospace; }
.main { min-height: 0; overflow: auto; padding: 14px 14px 24px; }
.bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
.nav-item { border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; min-height: 58px; }
.nav-item.active { color: var(--accent-strong); box-shadow: inset 0 3px 0 var(--accent); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 5px rgba(20,40,30,.04); }
.card h2, .card h3 { margin: 0 0 8px; }
.card p { margin: 6px 0; color: var(--muted); }
.hero { padding: 18px; background: linear-gradient(145deg, #f9fffb, #eef7f1); border-color: #bfd7c8; }
.hero h1 { margin: 0 0 6px; font-size: 24px; }
.status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.metric { background: #f7f9f8; border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.metric strong { display: block; font-size: 20px; }
.metric span { font-size: 11px; color: var(--muted); }
.section-label { margin: 18px 2px 8px; font-size: 12px; letter-spacing: .05em; color: var(--muted); font-weight: 800; text-transform: uppercase; }
.task { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.task + .task { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.task-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #edf2ef; font-weight: 800; }
.task-title { font-weight: 800; }
.task-sub { color: var(--muted); font-size: 13px; }
.primary, .secondary, .danger, .ghost { border-radius: 12px; padding: 0 14px; font-weight: 800; }
.primary { border: 0; background: var(--accent); color: white; }
a.primary, a.secondary, a.danger { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; text-decoration: none; }
summary { min-height: 44px; padding: 8px 0; cursor: pointer; }
.secondary { border: 1px solid var(--line); background: white; color: var(--ink); }
.danger { border: 1px solid #e6b6b1; background: var(--bad-bg); color: var(--bad); }
.ghost { border: 0; background: transparent; color: var(--accent-strong); }
.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.button-row.three { grid-template-columns: 1fr 1fr 1fr; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.badge.good { background: var(--good-bg); color: var(--accent-strong); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.plan-shell { height: calc(100dvh - 150px); display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.plan-toolbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.plan-toolbar button { min-width: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-weight: 800; padding: 0 12px; }
.plan-toolbar .active { background: var(--accent); color: white; border-color: var(--accent); }
.placement-label { display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 850; white-space: nowrap; }
.map-viewport { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #e9eceb; touch-action: none; min-height: 0; box-shadow: var(--shadow); }
.map-stage { position: absolute; transform-origin: 0 0; will-change: transform; }
.map-stage img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.pin { position: absolute; transform: translate(-50%, -50%); min-width: 38px; min-height: 38px; border-radius: 999px; border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,.35); font-size: 12px; font-weight: 900; display: grid; place-items: center; padding: 0 8px; color: white; background: #66736d; }
.pin.surveyed { background: #3c7a55; }
.pin.complete { background: #235c3d; }
.pin.blocked { background: #b24a42; }
.pin.pvm { border-radius: 9px; background: #46638a; }
.pin.selected { outline: 4px solid rgba(44,122,75,.25); }
.pin.moved { box-shadow: 0 0 0 3px #f7c948, 0 2px 8px rgba(0,0,0,.35); }
.planned-ghost { background: rgba(102,115,109,.32); color: rgba(255,255,255,.9); border-style: dashed; border-color: rgba(60,78,70,.75); box-shadow: none; pointer-events: none; }
.actual-preview { background: #b26a00; min-width: 58px; border: 3px solid #fff4d6; pointer-events: none; }
.placement-panel { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px; border: 1px solid #c58a13; background: rgba(255,248,230,.97); border-radius: 12px; box-shadow: var(--shadow); z-index: 4; display: grid; gap: 4px; font-size: 13px; }
.placement-panel span { color: #765400; }
.map-hint { position: absolute; left: 12px; bottom: 12px; right: 12px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; font-size: 12px; color: var(--muted); pointer-events: none; }
.list-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.device-title { font-weight: 800; }
.device-meta { font-size: 13px; color: var(--muted); }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(10,20,15,.35); z-index: 40; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78dvh; overflow: auto; background: var(--panel); border-radius: 20px 20px 0 0; padding: 16px 16px calc(22px + env(safe-area-inset-bottom)); z-index: 50; box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
.sheet-handle { width: 46px; height: 5px; border-radius: 99px; background: #cfd7d3; margin: 0 auto 12px; }
.sheet h2 { margin: 0 0 6px; }
.sheet .close { float: right; border: 0; background: #edf2ef; width: 44px; border-radius: 12px; font-size: 20px; }
.hidden { display: none !important; }
.callout { border-left: 4px solid var(--accent); background: #f2f8f4; padding: 12px; border-radius: 8px; margin: 12px 0; }
.callout.warn { border-left-color: #c58a13; background: #fff8e6; }
.callout.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.field { margin: 12px 0; }
.field label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 5px; }
.field input { width: 100%; min-height: 48px; border: 1px solid #bfc9c4; border-radius: 12px; padding: 0 12px; font-size: 18px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.photo-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; }
.photo-card.attached { border-color: #8ebda0; background: var(--good-bg); color: var(--accent-strong); }
.photo-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.photo-card div { padding: 8px; font-size: 12px; font-weight: 800; }
.evidence-stack { display: grid; gap: 10px; margin-top: 10px; }
.evidence-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; min-height: 66px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; cursor: pointer; }
.evidence-card.attached { grid-template-columns: 76px 1fr; border-color: #8ebda0; background: var(--good-bg); cursor: default; }
.evidence-card img { width: 76px; height: 58px; object-fit: cover; border-radius: 8px; }
.evidence-card strong, .evidence-card span { display: block; }
.evidence-card strong { font-size: 14px; }
.evidence-card span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.evidence-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.main input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.evidence-actions { grid-column: 1 / -1; display: flex; gap: 5px; border-top: 1px solid #b9d5c3; padding-top: 6px; }
.evidence-actions .ghost { min-height: 32px; padding: 0 7px; font-size: 12px; }
.danger-text { color: var(--bad); }
.evidence-view { width: 100%; max-height: 52dvh; object-fit: contain; background: #17211c; border-radius: 12px; }
.reference-photo { margin-top: 12px; }
.mock-note, .requirement-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.step-line { color: var(--ink) !important; font-weight: 750; }
.mapping-state { color: var(--accent-strong); font-size: 12px; font-weight: 750; margin-top: 4px; }
.ready-card { background: #f7fbf8; }
.plan-verify { color: var(--warn) !important; font-size: 12px; font-weight: 700; }
.topic-chooser { display: grid; gap: 9px; margin-top: 14px; }
.topic-card { padding-top: 4px; }
.topic-card h3 { margin: 4px 0 8px; font-size: 21px; }
.topic-card p { color: var(--muted); line-height: 1.42; }
.topic-id { color: var(--accent-strong); font-size: 12px; letter-spacing: .06em; font-weight: 900; }
.topic-card figure { margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.topic-card figure img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.topic-card figcaption { padding: 8px 10px; color: var(--muted); font-size: 12px; }
.topic-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.topic-links .ghost { min-height: 36px; padding: 0 8px; font-size: 12px; }
.diagram { margin: 14px 0; padding: 12px; border: 1px solid #b9cbc1; background: #f6fbf7; border-radius: 12px; }
.flow, .map-diagram { display: grid; gap: 7px; margin-top: 10px; }
.flow span, .map-diagram span { padding: 8px; border-radius: 8px; font-weight: 700; font-size: 13px; }
.black { background: #232323; color: white; }.green { background: #dff4e5; color: #155d35; }.power { background: #fff2ce; color: #765400; }
.map-diagram b { background: #e7f0eb; padding: 8px; border-radius: 8px; }.map-diagram em { color: var(--accent-strong); font-weight: 900; text-align: center; }
.pair-diagram { display: grid; grid-template-columns: 44px 44px 1fr; gap: 7px; align-items: center; margin: 10px 0; }.pair-diagram span { padding: 10px; text-align: center; border: 2px solid var(--accent); border-radius: 8px; font-weight: 900; }.pair-diagram b { font-size: 13px; }
.photo-diagram { display: grid; gap: 8px; margin-top: 10px; padding: 12px; min-height: 150px; background: linear-gradient(#e7eef0 0 28%, #fff 28% 68%, #d8d0bd 68%); border-radius: 9px; text-align: center; }.photo-diagram span { font-size: 12px; font-weight: 800; }.photo-diagram b { margin: 14px auto 0; padding: 8px; border-radius: 8px; background: #273b34; color: white; width: max-content; }.photo-diagram i { font-size: 12px; color: #6f5718; }
.reference-return { font-size: 12px; color: var(--muted); }
.reference-row { width: 100%; min-height: 58px; display: flex; justify-content: space-between; align-items: center; text-align: left; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 9px 0; color: var(--ink); }.reference-row span:first-child { display: grid; gap: 2px; }.reference-row b { font-size: 11px; color: var(--accent-strong); }.reference-row strong { font-size: 15px; }
.project-chooser-list { display: grid; gap: 10px; margin-top: 14px; }
.project-chooser-option { width: 100%; display: grid; gap: 4px; text-align: left; min-height: 64px; padding: 14px 16px; border: 2px solid var(--accent-strong, #2c7a4b); border-radius: 12px; background: #f3faf5; color: var(--ink); cursor: pointer; font: inherit; }
.project-chooser-option strong { font-size: 17px; }
.project-chooser-option small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.project-chooser-option .project-chooser-action { margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--accent-strong, #2c7a4b); }
.project-chooser-option:hover, .project-chooser-option:focus { background: #e7f5eb; outline: 2px solid var(--accent-strong, #2c7a4b); outline-offset: 1px; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 12px 14px; background: #17211c; color: white; border-radius: 12px; z-index: 60; text-align: center; font-weight: 700; box-shadow: var(--shadow); }
.filter-row, .toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.filter-row .secondary, .toc .ghost { min-height: 36px; padding: 0 9px; font-size: 12px; }
.filter-row .active { background: var(--accent); color: white; border-color: var(--accent); }
select { width: 100%; min-height: 48px; border: 1px solid #bfc9c4; border-radius: 12px; padding: 0 10px; background: white; }
.camera-glyph { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: white; }
.camera-glyph b { position: relative; z-index: 2; font-size: 12px; line-height: 1; }
.camera-glyph i { position: absolute; width: 26px; height: 3px; background: white; border-radius: 2px; transform: rotate(var(--aim)) translateX(9px); transform-origin: 0 50%; }
.camera-glyph.unverified { width: 30px; height: 30px; border: 2px solid white; border-radius: 999px; }
.power-pin { background: #9a6700; }
.power-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.power-leaders line { stroke: #9a6700; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.power-label { position: absolute; transform: translate(0,-50%); z-index: 2; max-width: 92px; padding: 2px 5px; background: rgba(255,248,230,.95); border: 1px solid #c58a13; border-radius: 5px; color: #765400; font-size: 10px; font-weight: 850; pointer-events: none; white-space: nowrap; }
@media (min-width: 720px) {
  body { display: grid; place-items: center; background: #dfe5e2; }
  .app-shell { width: 430px; height: min(900px, 96dvh); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.22); background: var(--bg); }
}

/* v0.5 plan-editor repair: small world-space glyphs, fixed-size screen editor. */
.plan-repair .plan-toolbar { position: relative; z-index: 5; }
.plan-viewport { isolation: isolate; }
.plan-world { overflow: visible; }
.world-lines { display: none; }
.world-markers { position: absolute; inset: 0; pointer-events: none; }
.world-marker { position: absolute; width: var(--world-size); height: var(--world-size); transform: translate(-50%,-50%); pointer-events: none; z-index: 2; }
.planned-anchor { position:absolute; width:calc(var(--world-size) * .48); height:calc(var(--world-size) * .48); transform:translate(-50%,-50%); border:1px dashed rgba(67,84,75,.75); border-radius:50%; background:rgba(255,255,255,.25); pointer-events:none; }
.camera-symbol, .pvm-symbol, .power-symbol { width: 100%; height: 100%; position: relative; display: block; }
.camera-symbol::before { content: ''; position: absolute; left: 17%; top: 29%; width: 50%; height: 42%; border: max(1px,calc(var(--world-size) * .09)) solid #42544b; border-radius: 22% 28% 28% 22%; background: rgba(255,255,255,.12); }
.camera-symbol::after { content: ''; position: absolute; left: 63%; top: 38%; width: 21%; height: 24%; border: max(1px,calc(var(--world-size) * .08)) solid #42544b; border-left: 0; border-radius: 0 35% 35% 0; }
.camera-symbol i { position: absolute; left: 50%; top: 50%; width: 58%; height: max(1px,calc(var(--world-size) * .08)); background: #42544b; transform-origin: 0 50%; transform: rotate(var(--aim)) translateX(28%); opacity: .82; }
.camera-symbol.unknown i { display: none; }
.camera-symbol.unknown::before { border-style: dashed; }
.camera-symbol b { position: absolute; left: 69%; top: -17%; min-width: max(8px,calc(var(--world-size) * .55)); padding: 0 1px; border-radius: 999px; background: rgba(255,255,255,.92); color: #1e3028; box-shadow: 0 0 0 1px rgba(50,70,60,.35); text-align: center; font-size: max(6px,calc(var(--world-size) * .38)); line-height: max(8px,calc(var(--world-size) * .58)); font-weight: 900; }
.camera-symbol em { position: absolute; right: 0; bottom: 0; width: max(3px,calc(var(--world-size) * .22)); height: max(3px,calc(var(--world-size) * .22)); border-radius: 50%; background: transparent; }
.world-marker.complete .camera-symbol::before, .world-marker.complete .camera-symbol::after, .world-marker.complete .camera-symbol i { border-color: #17743f; background-color: #17743f; }
.world-marker.complete .camera-symbol::before { background: rgba(255,255,255,.1); }
.world-marker.complete .camera-symbol em { background: #1d9b54; box-shadow: 0 0 0 1px white; }
.world-marker.blocked .camera-symbol::before, .world-marker.blocked .camera-symbol::after, .world-marker.blocked .camera-symbol i { border-color: #bf463e; background-color: #bf463e; }
.pvm-symbol i { position: absolute; inset: 19% 8% 28%; border: max(1px,calc(var(--world-size) * .09)) solid #3d5f82; border-radius: 12%; background: rgba(255,255,255,.4); }
.pvm-symbol i::after { content: ''; position: absolute; left: 38%; bottom: -34%; width: 25%; height: 28%; border-left: max(1px,calc(var(--world-size) * .08)) solid #3d5f82; }
.pvm-symbol b { position: absolute; left: 66%; top: -11%; min-width: max(9px,calc(var(--world-size) * .68)); border-radius: 999px; padding: 0 2px; background: rgba(255,255,255,.92); color: #284766; font-size: max(6px,calc(var(--world-size) * .33)); line-height: max(8px,calc(var(--world-size) * .55)); text-align: center; }
.power-symbol { display: grid; place-items: center; color: #946400; font-size: calc(var(--world-size) * .85); text-shadow: 0 0 1px white; }
.power-tag { position: absolute; transform: translate(2px,-50%); padding: 1px 3px; border-radius: 3px; background: rgba(255,252,238,.82); color: #765400; font-size: calc(var(--world-size) * .35); line-height: 1.05; font-weight: 850; white-space: nowrap; }
.power-leader { stroke: #b57a00; stroke-width: .14; vector-effect: non-scaling-stroke; }
.radial-editor { position: absolute; width: 148px; height: 148px; transform: translate(-50%,-50%); z-index: 9; border: 1px solid rgba(25,45,35,.38); border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 10px 26px rgba(0,0,0,.26); pointer-events: auto; }
.radial-core { position: absolute; inset: 40px; display: grid; place-items: center; align-content: center; border-radius: 50%; background: #eaf3ed; color: #1d5133; text-align: center; font-weight: 900; font-size: 14px; }
.radial-core small { margin-top: 2px; font-size: 8px; color: #607069; }
.radial-action { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #b9c9c0; border-radius: 50%; background: white; color: #204a33; box-shadow: 0 2px 6px rgba(0,0,0,.14); font-size: 16px; font-weight: 900; touch-action: none; }
.radial-action.aim-handle { left: 57px; top: 0; transform: rotate(var(--aim)); }.radial-action.move-handle { left: 57px; bottom: 0; }.radial-action.manual-action { left: 2px; top: 31px; }.radial-action.work-action { right: 2px; top: 31px; }.radial-action.issue-action { right: 2px; bottom: 31px; color: #a83a32; }.radial-action.label-handle { left: 2px; bottom: 31px; }.radial-action.reset-label { left: 18px; bottom: -9px; }.radial-action.delete-item { right: 18px; bottom: -9px; color: #a83a32; }
.radial-cable, .radial-association { position: absolute; left: 50%; width: 124px; transform: translateX(-50%); display: grid; grid-template-columns: 34px 1fr; gap: 3px; align-items: center; padding: 3px 6px; border-radius: 7px; background: rgba(255,255,255,.98); color: #486056; font-size: 10px; font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,.12); }
.radial-cable { bottom: -29px; }.radial-association { bottom: -31px; grid-template-columns: 28px 1fr; }
.radial-cable input, .radial-association select { min-width: 0; height: 25px; padding: 1px 4px; border: 1px solid #b9c9c0; border-radius: 5px; background: white; font-size: 11px; }
.add-palette { position: absolute; left: 10px; top: 10px; z-index: 8; display: grid; gap: 6px; width: min(250px,calc(100% - 20px)); padding: 9px; border: 1px solid #bfd0c5; border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
.add-palette button { min-height: 39px; text-align: left; border: 1px solid #cddbd1; border-radius: 8px; background: #f8fbf9; color: #204a33; font-weight: 850; }.add-palette span { color: var(--muted); font-size: 12px; }
.contextual-manual { font-size: 16px; line-height: 1.5; }.contextual-manual .manual-kicker { color: var(--accent-strong); font-size: 12px; font-weight: 850; }
.manual-home { padding-bottom: 20px; }.manual-cover { margin: -14px -14px 16px; padding: 24px 20px 20px; color: white; background: linear-gradient(140deg,#123426,#2c7a4b); }.crosscom-wordmark { font-size: 13px; letter-spacing: .18em; font-weight: 900; }.manual-cover p { margin: 26px 0 2px; color: #d6eadc; font-size: 17px; }.manual-cover h1 { margin: 0; font-size: 29px; line-height: 1.05; }.manual-cover span { display:block; margin-top: 14px; color:#d6eadc; font-size: 13px; }.manual-home-tools { padding: 0 2px 14px; }.manual-home-tools label { display:grid; gap:5px; color:var(--muted); font-size:13px; font-weight:800; }.manual-home-tools input { min-height:46px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font-size:16px; }.manual-group { margin: 18px 0; }.manual-group h2 { margin:0 0 7px; padding-bottom:7px; border-bottom:2px solid #d6e7db; color:#204a33; font-size:15px; letter-spacing:.05em; text-transform:uppercase; }.manual-row { display:flex; width:100%; min-height:52px; align-items:center; justify-content:space-between; padding:9px 2px; border:0; border-bottom:1px solid var(--line); background:white; color:var(--ink); text-align:left; font-size:16px; font-weight:750; }.manual-row b { color:var(--accent-strong); font-size:22px; }.manual-reader { margin:-14px; background:white; min-height:calc(100dvh - 116px); }.manual-sticky { position:sticky; top:0; z-index:8; display:grid; grid-template-columns:88px 1fr 72px; align-items:center; gap:4px; min-height:54px; padding:5px 8px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); backdrop-filter:blur(8px); }.manual-sticky strong { text-align:center; font-size:13px; }.manual-sticky .ghost { min-height:40px; padding:0 4px; font-size:12px; }.manual-reading { max-width:700px; margin:0 auto; padding:20px 18px 36px; font-size:17px; line-height:1.56; }.manual-section-label { margin:0 0 5px; color:var(--accent-strong); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.manual-reading h1 { margin:0 0 16px; font-size:29px; line-height:1.1; }.manual-reading h3 { margin:24px 0 7px; font-size:20px; line-height:1.18; }.manual-reading p { margin:0 0 14px; }.manual-reading ol { margin:10px 0 18px; padding-left:24px; }.manual-reading li { margin:0 0 10px; padding-left:4px; }.manual-callout { display:block; margin:17px 0; padding:12px 13px; border-radius:10px; }.manual-callout.gotcha { border-left:4px solid #bc7a00; background:#fff4d6; color:#624600; }.manual-callout.warning { border-left:4px solid #b24a42; background:#fdeae8; color:#78352f; font-weight:750; }.manual-figure,.manual-diagram { margin:18px 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }.manual-figure img { display:block; width:100%; max-height:280px; object-fit:cover; }.manual-figure figcaption,.manual-diagram figcaption { padding:9px 11px; color:var(--muted); font-size:13px; line-height:1.35; }.signal-diagram,.mapping-diagram { display:grid; gap:7px; padding:13px; }.signal-diagram b { padding:7px; border-radius:7px; background:#e7f0eb; }.signal-diagram span,.mapping-diagram span,.mapping-diagram b { padding:8px; border-radius:7px; font-size:13px; }.manual-nextprev { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:30px; }.manual-drawer-group h3 { margin:18px 0 4px; color:#204a33; font-size:14px; text-transform:uppercase; }.manual-drawer-group .reference-row { font-size:15px; }#moveWork { display:none; }
.demo-banner { margin: 12px 0 16px; padding: 12px 14px; border-left: 4px solid #ae7608; background: #fff3ce; color: #624600; border-radius: 10px; }
.demo-banner strong { display: block; margin-bottom: 4px; }
.plan-demo-banner { margin: 0 10px 8px; }