@charset "UTF-8";
/* Scenes: one illustration per phase or topic, drawn at 480 x 360 and scaled to fit. Shared by index.html and the solution pages. */
.bi { position: absolute; left: 0; top: 0; width: 480px; height: 360px; z-index: 1; font-family: var(--sg); font-size: 12px; line-height: 1.35; color: var(--black); }
.bi .card { position: absolute; background: #fff; border-radius: 10px; padding: 11px 13px 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05); }
.bi .lab { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #777; margin-bottom: 7px; }
.bi .q { font-size: 13px; font-weight: 500; line-height: 1.3; }
.bi .row { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: #333; font-size: 12px; }
.bi .row em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11px; color: #666; }
.bi .row i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #C9C9C9; flex: none; position: relative; }
.bi .row i.ok { background: var(--teal); border-color: var(--teal); }
.bi .row i.ok::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.bi .row i.no { border-color: #E0452C; } .bi .row i.no::after { content: "×"; position: absolute; left: 2px; top: -4px; color: #E0452C; font-size: 12px; }
.bi .row i.av { border: 0; background: #B85A00; color: #fff; font-style: normal; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.bi .kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid #EEE; color: #666; font-size: 11.5px; }
.bi .kv:first-of-type { border-top: 0; }
.bi .kv b { font-weight: 500; color: var(--black); text-align: right; white-space: nowrap; }
.bi .kv b.cite { font-family: var(--mono); font-size: 10px; background: #E7EEEE; color: #2B776E; padding: 1px 6px; border-radius: 4px; }
.bi .g { color: var(--teal) !important; } .bi .bad { color: #E0452C !important; }
.bi .mono { font-family: var(--mono); font-size: 10.5px; font-weight: 400; background: #F3F4F6; padding: 1px 5px; border-radius: 4px; }
.bi .pb { margin-top: 8px; background: var(--black); color: #fff; text-align: center; border-radius: 8px; padding: 7px 10px; font-weight: 500; font-size: 12px; }
.bi .pb.g { background: var(--teal); color: #fff !important; } .bi .pb.ghost { background: #fff; color: var(--black); border: 1px solid #DDD; }
.bi .btnrow { position: absolute; display: flex; gap: 8px; } .bi .btnrow .pb { margin: 0; min-width: 84px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.bi .chip { display: inline-block; margin: 5px 4px 0 0; white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; border: 1px solid #E5E7EB; border-radius: 999px; padding: 3px 8px; color: #555; }
.bi .sw { display: flex; gap: 5px; margin-bottom: 8px; } .bi .sw i { width: 18px; height: 18px; border-radius: 5px; }
.bi .funnel { display: flex; gap: 10px; align-items: flex-end; height: 110px; padding-top: 6px; }
.bi .funnel > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.bi .funnel i { display: block; height: var(--h); background: var(--teal); border-radius: 4px 4px 0 0; }
.bi .funnel .bad i { background: #E0452C; }
.bi .funnel b { font-family: var(--mono); font-size: 9.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-top: 5px; } .bi .funnel em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--black); }
.bi .note { position: absolute; width: 180px; padding: 10px 12px; border-radius: 6px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); font-size: 12px; transform: rotate(-1.5deg); }
.bi .note.lav { background: #E3D3FF; } .bi .note.mint { background: #CFF1EA; transform: rotate(1.2deg); }
.bi .note b { display: block; font-weight: 600; line-height: 1.25; margin-bottom: 4px; } .bi .note span { font-family: var(--mono); font-size: 10px; color: #444; }
.bi .phone { position: absolute; width: 94px; height: 200px; background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; padding: 24px 8px 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.4); }
.bi .phone > span { position: absolute; left: 8px; top: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: #666; white-space: nowrap; }
.bi .phone.sel { border-color: #5E79DA; box-shadow: 0 0 0 3px rgba(94,121,218,.25), 0 18px 40px -18px rgba(0,0,0,.4); }
.bi .phone.sel > span { color: #5E79DA; }
.bi .ph-h { height: 10px; width: 70%; background: var(--black); border-radius: 3px; } .bi .ph-l { height: 18px; border: 1px solid #DDD; border-radius: 4px; } .bi .ph-card { height: 26px; border: 1px solid #DDD; border-radius: 6px; background: #F7F8F9; } .bi .ph-b { margin-top: auto; height: 20px; background: var(--black); border-radius: 5px; }
.bi .code { position: absolute; background: #1E1F1F; color: #EDEDED; border-radius: 10px; padding: 10px 12px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); }
.bi .code .lab { color: #9A9A9A; } .bi .code pre { margin: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.55; }
.bi .code .add { color: #7FD1C6; font-style: normal; } .bi .code .del { color: #F08C7A; font-style: normal; }
.bi .chart { display: block; width: 100%; height: 110px; }
.bi .legend { display: flex; gap: 12px; align-items: center; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: #555; } .bi .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .bi .legend b { margin-left: auto; font-weight: 500; }
.bi .stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.bi .stages > div { border: 1px solid #E5E7EB; border-radius: 8px; padding: 8px 6px; text-align: center; } .bi .stages b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; } .bi .stages span { font-family: var(--mono); font-size: 9.5px; color: #666; }
.bi .stages .done { background: #E7EEEE; border-color: #E7EEEE; color: #2B776E; } .bi .stages .now { background: var(--black); border-color: var(--black); color: #fff; } .bi .stages .now span { color: #BBB; }
.bi .cur { position: absolute; z-index: 5; width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
/* scaled wrapper used outside the bucket rail */
.scene { position: relative; overflow: hidden; }
.scene > .bi { transform-origin: 0 0; }
.scene .lab { font-family: var(--mono); }

/* simple-scene primitives */
.bi .big { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 2px 0 10px; }
.bi .hb { display: grid; grid-template-columns: 150px 1fr 40px; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; color: #333; }
.bi .hb i { display: block; height: 12px; border-radius: 3px; background: #E5E7EB; width: var(--w); }
.bi .hb.top i { background: var(--teal); } .bi .hb.bad i { background: #E0452C; }
.bi .hb b { font-family: var(--mono); font-size: 11px; font-weight: 500; text-align: right; }
.bi .stages.three { grid-template-columns: repeat(3, 1fr); }
.bi .stages .alert { background: #FFF1EE; border-color: #F5C6BC; color: #A32E1A; }
.bi .msg { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 12px; line-height: 1.35; color: #333; }
.bi .msg .av { width: 20px; height: 20px; border-radius: 50%; background: #B85A00; color: #fff; font-style: normal; font-size: 9px; font-weight: 700; display: grid; place-items: center; flex: none; }
.bi .msg b { font-weight: 600; color: var(--black); margin-right: 4px; } .bi .msg .at { color: #5E79DA; }
.bi .quote { margin-top: 10px; padding: 10px 12px; background: #F7F8F9; border-left: 3px solid var(--teal); border-radius: 4px; font-size: 12.5px; line-height: 1.35; font-style: italic; }
.bi .quote span { display: block; margin-top: 4px; font-style: normal; font-family: var(--mono); font-size: 10px; color: #666; }

/* topic scenes */
.bi .ph { position: absolute; background: #fff; border-radius: 14px; border: 1px solid #E5E7EB; padding: 30px 12px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.4); font-size: 11.5px; }
.bi .ph.sel { border-color: #5E79DA; box-shadow: 0 0 0 3px rgba(94,121,218,.25), 0 18px 40px -18px rgba(0,0,0,.4); }
.bi .ph-tag { position: absolute; left: 10px; top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #5E79DA; white-space: nowrap; } .bi .ph-tag.bad { color: #E0452C; } .bi .ph-tag.g { color: #2B776E; }
.bi .ph-t { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.bi .ph-sec { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #777; margin-top: 2px; }
.bi .ph-item { display: flex; justify-content: space-between; align-items: center; border: 1px solid #E5E7EB; border-radius: 7px; padding: 7px 9px; color: #333; } .bi .ph-item.on { border-color: var(--black); } .bi .ph-item em { font-style: normal; font-weight: 600; color: #2B776E; }
.bi .ph-in { height: 26px; border: 1px solid #DDD; border-radius: 6px; padding: 0 8px; display: flex; align-items: center; font-size: 10.5px; color: #555; } .bi .ph-in.err { border-color: #E0452C; background: #FFF1EE; } .bi .ph-in.ok { border-color: #2B776E; background: #EEF7F5; }
.bi .ph-btn { text-align: center; border-radius: 7px; padding: 7px; font-weight: 500; border: 1px solid #191919; margin-top: auto; } .bi .ph-btn.dark { background: var(--black); color: #fff; }
.bi .tiers { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; margin: 4px 0 10px; }
.bi .tiers > div { border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; } .bi .tiers > div.hi { border-color: var(--black); box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); }
.bi .tiers b { font-weight: 600; } .bi .tiers span { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .bi .tiers span small { font-size: 10px; font-weight: 400; color: #666; } .bi .tiers i { font-style: normal; font-size: 10.5px; color: #666; } .bi .tiers .ph-btn { margin-top: 6px; padding: 5px; font-size: 11px; }
.bi .tbl > div { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid #EEE; font-size: 12px; } .bi .tbl > div.th { border-top: 0; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #777; }
.bi .tbl i { width: 14px; height: 14px; border-radius: 50%; justify-self: center; } .bi .tbl i.y { background: #2B776E; } .bi .tbl i.n { border: 1.5px solid #E0452C; box-sizing: border-box; }
.bi .arrow { position: absolute; font-size: 28px; color: var(--black); } .bi .arrows { position: absolute; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: #333; white-space: nowrap; }
.bi .mini { border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; margin: 4px 0 10px; } .bi .mini-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #F3F4F6; } .bi .mini-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D1D5DB; } .bi .mini-bar span { margin-left: 6px; font-family: var(--mono); font-size: 9.5px; color: #666; }
.bi .mini-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .bi .mini-body.center { align-items: center; text-align: center; padding: 18px 24px; } .bi .mini-body .ph-btn { margin-top: 4px; align-self: stretch; } .bi .small { font-size: 11.5px; color: #555; line-height: 1.35; max-width: 30ch; }
.bi .flag { display: grid; grid-template-columns: 110px 1fr 28px 70px; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #EEE; font-size: 11.5px; } .bi .flag:first-of-type { border-top: 0; } .bi .flag b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; } .bi .flag span { color: #666; } .bi .flag i { width: 26px; height: 14px; border-radius: 7px; background: #D1D5DB; position: relative; } .bi .flag i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; } .bi .flag i.on { background: #2B776E; } .bi .flag i.on::after { left: 14px; } .bi .flag em { font-style: normal; font-family: var(--mono); font-size: 10px; text-align: right; color: #333; }
.bi .fr { height: 44px; border: 1px solid #E5E7EB; border-radius: 6px; background: #F7F8F9; margin-bottom: 6px; } .bi .fr.small { height: 22px; } .bi .fr.sel { border-color: #5E79DA; box-shadow: 0 0 0 2px rgba(94,121,218,.25); }
.bi .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 11.5px; } .bi .crumbs span { border: 1px solid #E5E7EB; border-radius: 6px; padding: 4px 8px; background: #F7F8F9; } .bi .crumbs span.on { background: var(--black); color: #fff; border-color: var(--black); } .bi .crumbs i { font-style: normal; color: #999; }
.bi .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 10px; } .bi .grid2 > div { border: 1px solid #E5E7EB; border-radius: 7px; padding: 7px 9px; } .bi .grid2 b { display: block; font-weight: 600; font-size: 12px; } .bi .grid2 span { font-family: var(--mono); font-size: 10px; color: #555; }
.bi .dial { display: grid; grid-template-columns: 64px 1fr 110px; align-items: center; gap: 10px; padding: 7px 0; font-size: 11.5px; } .bi .dial .track { position: relative; height: 4px; background: #E6E6E6; border-radius: 2px; } .bi .dial .track i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 2px solid #5E79DA; } .bi .dial b { font-weight: 500; text-align: right; font-size: 11px; }
.bi .appr { display: grid; grid-template-columns: 22px 1fr 60px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #EEE; } .bi .appr:first-of-type { border-top: 0; } .bi .appr i { font-style: normal; font-size: 14px; } .bi .appr b { display: block; font-weight: 600; font-size: 12px; } .bi .appr span { font-size: 11px; color: #666; } .bi .appr em { font-style: normal; text-align: center; background: var(--black); color: #fff; border-radius: 6px; padding: 5px 0; font-size: 11px; font-weight: 500; }
.bi .tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .bi .tools span { border: 1px solid #E5E7EB; border-radius: 999px; padding: 5px 10px; font-size: 11.5px; }
.bi .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 4px 0 10px; } .bi .steps > div { border: 1px solid #E5E7EB; border-radius: 7px; padding: 7px 4px; text-align: center; } .bi .steps b { display: block; font-size: 11px; font-weight: 600; } .bi .steps span { font-family: var(--mono); font-size: 9px; color: #666; } .bi .steps .done { background: #E7EEEE; border-color: #E7EEEE; color: #2B776E; } .bi .steps .now { background: var(--black); border-color: var(--black); color: #fff; } .bi .steps .now span { color: #BBB; }
.bi .loop { display: grid; grid-template-columns: 90px 1fr 100px; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #EEE; font-size: 11.5px; } .bi .loop:first-of-type { border-top: 0; } .bi .loop b { font-weight: 600; } .bi .loop span { color: #666; } .bi .loop em { font-style: normal; font-family: var(--mono); font-size: 10px; text-align: right; }
.bi .blocks { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin: 4px 0 10px; font-size: 11px; white-space: nowrap; } .bi .blocks span { border: 1px solid #191919; border-radius: 6px; padding: 4px 7px; } .bi .blocks span.on { background: #2B776E; border-color: #2B776E; color: #fff; } .bi .blocks i { font-style: normal; color: #999; }

/* less is more: scene text becomes bars; only labels, chips and one accent value keep their text */
.bi .tx { display: inline-block; color: transparent; background: #E3E6E8; border-radius: 3px; height: .62em; line-height: .62em; max-width: 100%; overflow: hidden; vertical-align: middle; -webkit-text-fill-color: transparent; user-select: none; }
.bi .kv .tx, .bi .row .tx, .bi .hb .tx { height: .58em; }
.bi .big .tx, .bi .q .tx, .bi .em-h .tx, .bi .ph-t .tx, .bi h5 .tx { background: #191919; height: .55em; border-radius: 4px; }
.bi .pb .tx, .bi .ph-btn.dark .tx, .bi .appr em .tx, .bi .stages .now .tx, .bi .steps .now .tx { background: rgba(255,255,255,.28); height: .5em; }
.bi .pb.ghost .tx, .bi .ph-btn:not(.dark) .tx { background: #E3E6E8; }
.bi .code .tx { background: rgba(255,255,255,.22); height: .5em; }
.bi .note .tx { background: rgba(0,0,0,.18); }
.bi .quote .tx { background: #DDE1E4; }
.bi .stages .done .tx, .bi .steps .done .tx { background: rgba(43,119,110,.35); }
.bi .legend .tx { height: .5em; }
.bi .tools .tx, .bi .crumbs .tx, .bi .blocks .tx { height: .55em; }

.bcard .fig.scene > .bi { transform-origin: 0 0; }

/* engine board on the home page: same treatment */
.eboard .tx { display: inline-block; color: transparent; background: #E3E6E8; border-radius: 3px; height: .6em; line-height: .6em; max-width: 100%; overflow: hidden; vertical-align: middle; -webkit-text-fill-color: transparent; }
.eboard .em-h .tx { background: var(--black); height: .55em; border-radius: 4px; }
.eboard .em-btn .tx { background: rgba(255,255,255,.28); height: .5em; }
.eboard .em-flag .tx { background: rgba(224,69,44,.3); }
.eboard .em-funnel b .tx, .eboard .em-ab span .tx { height: .5em; }
.eboard .em-chip .tx { height: .55em; }

/* with real words, chains wrap and variant labels stay inside their phone */
.bi .blocks { flex-wrap: wrap; row-gap: 6px; white-space: normal; }
.bi .blocks span { white-space: nowrap; }
.bi .ph-tag { max-width: calc(100% - 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82em; letter-spacing: 0; }
.bi .phone { padding-top: 32px; }
.bi .phone > span { right: 6px; white-space: normal; line-height: 1.2; font-size: 8.5px; letter-spacing: .02em; }