/* Scene components. Colours only via brand tokens in app.css. */
.ico.big { width: 84px; height: 84px; }
.ico.xs { width: 24px; height: 24px; flex: none; margin-top: 4px; }
.strk { position: relative; white-space: nowrap; }
.strk i { position: absolute; left: -8px; right: -8px; top: 52%; height: 12px; background: var(--brand-yellow); transform-origin: left; transform: scaleX(0); }
.slip { width: 500px; padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 26px; border: 0; }
.tile { padding: 34px 36px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.tile .h3 { color: var(--grey-1); }
.strike { position: absolute; left: 26px; top: 128px; width: 150px; height: 10px; margin-top: -5px; background: var(--grey-1); border-radius: 5px; transform-origin: left center; transform: scaleX(0); }
.signs { display: flex; flex-direction: column; gap: 16px; }
.sign { display: flex; gap: 24px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; border-left: 8px solid transparent; transition: background-color .2s, border-color .2s; }
.sign .num { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--brand-yellow); color: var(--grey-1); font-family: var(--font-brand); font-weight: 700; font-size: 28px; display: flex; align-items: center; justify-content: center; }
.sign .st { font-family: var(--font-brand); font-weight: 700; font-size: 34px; line-height: 1.15; }
.sign .sd { font-size: 23px; line-height: 1.3; color: var(--grey-3); margin-top: 4px; }
.sign.on { border-left-color: var(--brand-green); background: var(--brand-white); box-shadow: 0 12px 30px -18px rgba(36, 40, 42, .5); }
.dashbox { position: absolute; border: 4px dashed var(--grey-3); border-radius: 10px; pointer-events: none; }
.callout { position: absolute; display: flex; gap: 22px; align-items: center; background: var(--grey-1); color: var(--brand-white); border-radius: 18px; padding: 22px 30px; font-size: 28px; line-height: 1.3; }
.mail .lnk.hov { box-shadow: 0 0 0 5px var(--brand-yellow); }
.mail .att.hl { border-color: var(--brand-yellow); }
.mail .att small { margin-left: 10px; }
.meter { display: flex; gap: 14px; }
.meter i { width: 110px; height: 30px; border-radius: 15px; background: var(--grey-2); transform-origin: bottom; }
.cursor { position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; z-index: 20; }
.cursor svg { position: absolute; left: -8px; top: -6px; }
.cursor .ring { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 5px solid var(--brand-yellow); opacity: 0; }
.client .toolbar { display: flex; gap: 16px; padding: 22px 26px; border-bottom: 2px solid var(--grey-4); }
.tbtn { display: inline-flex; gap: 10px; align-items: center; padding: 12px 22px; border: 2px solid var(--grey-4); border-radius: 30px; font-size: 24px; }
.tbtn.rp { background: var(--brand-green); border-color: var(--brand-green); color: var(--brand-white); font-weight: 700; margin-left: auto; }
.tbtn.rp.on { box-shadow: 0 0 0 5px var(--brand-yellow); }
.inbox .irow { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 30px; height: 104px; border-bottom: 2px solid var(--grey-4); font-size: 24px; overflow: hidden; border-left: 8px solid transparent; }
.inbox .irow b { font-size: 24px; }
.inbox .irow span { color: var(--grey-2); }
.inbox .irow.sus.lit { border-left-color: var(--brand-yellow); }
.inbox .irow.removed { color: var(--grey-3); font-style: italic; height: 80px; border-bottom: 0; }
.dest { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.dest .disc { width: 220px; height: 220px; border-radius: 50%; background: var(--brand-green); display: flex; align-items: center; justify-content: center; }
.dest .disc svg { width: 120px; height: 120px; }
.env { position: absolute; width: 80px; height: 80px; border-radius: 16px; background: var(--brand-white); border: 3px solid var(--brand-green); display: flex; align-items: center; justify-content: center; z-index: 10; }
.env.big { width: 110px; height: 110px; }
.person { position: absolute; width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--grey-4); background: var(--brand-white); display: flex; align-items: center; justify-content: center; }
.nl { fill: none; stroke: var(--grey-4); stroke-width: 5; stroke-dasharray: 1 1; }
.bigbtn { display: inline-flex; align-items: center; gap: 18px; background: var(--brand-green); color: var(--brand-white); font-weight: 700; font-size: 40px; padding: 28px 48px; border-radius: 60px; margin-right: 50px; }
.vcard { padding: 34px 36px; display: flex; flex-direction: column; justify-content: space-between; border-color: var(--brand-green); }
.vcard.wide { flex-direction: row; align-items: center; gap: 30px; justify-content: flex-start; }
.okb { position: absolute; right: -18px; top: -18px; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-green); display: flex; align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 30px; }
.step { display: flex; gap: 28px; align-items: flex-start; padding: 10px 0 10px 20px; border-left: 6px solid var(--grey-4); }
.step .n { font-family: var(--font-cond); font-weight: 800; font-size: 76px; line-height: .9; color: var(--brand-green); flex: none; width: 50px; }
.step .body { font-size: 32px; }
.step.on { border-left-color: var(--brand-yellow); }
.tick { gap: 24px; align-items: center; }
.tick .tk { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-green); }
.tick.no .tk { background: var(--grey-3); }
.tick.no > span:last-child { color: var(--grey-2); }
.sticky { position: absolute; background: var(--brand-yellow); box-shadow: 0 16px 30px -16px rgba(36, 40, 42, .6); display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--grey-1); letter-spacing: .1em; overflow: hidden; border-radius: 4px; }
.lvl { display: flex; flex-direction: column; align-items: stretch; }
.lvl .fold { height: 150px; object-fit: contain; align-self: center; margin-bottom: 14px; }
.lcard { flex: 1; border-radius: 22px; padding: 26px 26px; display: flex; flex-direction: column; gap: 12px; border: 3px solid var(--grey-4); background: var(--brand-white); border-top-width: 12px; }
.lvl.l1 .lcard { border-top-color: var(--brand-green); }
.lvl.l2 .lcard { background: var(--brand-green); border-color: var(--brand-green); color: var(--brand-white); }
.lvl.l3 .lcard { background: var(--gradient); border-color: var(--gradient-dark); color: var(--brand-white); }
.lvl.on .lcard { border-top-color: var(--brand-yellow); }
.lcard .ln { font-family: var(--font-brand); font-weight: 700; font-size: 50px; line-height: 1; }
.lcard .lw { font-size: 23px; line-height: 1.3; min-height: 60px; }
.lcard .lex { display: flex; flex-wrap: wrap; gap: 8px; min-height: 104px; align-content: flex-start; }
.lchip { font-size: 20px; padding: 8px 14px; border-radius: 20px; border: 2px solid currentColor; white-space: nowrap; }
.lvl.l0 .lchip, .lvl.l1 .lchip { border-color: var(--grey-4); }
.lcard .lh { font-family: var(--font-brand); font-weight: 700; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-3); margin-top: 8px; }
.lvl.l2 .lh, .lvl.l3 .lh { color: var(--accent-green); }
.lcard .li { display: flex; gap: 10px; font-size: 22px; line-height: 1.3; margin-bottom: 8px; }
.stamp { position: absolute; font-family: var(--font-brand); font-weight: 700; font-size: 64px; color: var(--brand-white); background: var(--brand-green); padding: 16px 40px; border-radius: 14px; border: 5px solid var(--accent-green); }
.frame { overflow: hidden; border-radius: 26px; }
.frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: 40% 50%; }
.swapbox { position: relative; min-height: 180px; }
.swapbox > * { position: absolute; left: 0; top: 0; width: 100%; }
.flow { display: flex; gap: 14px; align-items: stretch; }
.fstep { flex: 1; font-size: 25px; line-height: 1.25; padding: 20px 18px; border-radius: 16px; display: flex; align-items: center; }
.fstep.q { background: var(--brand-white); border: 3px solid var(--grey-4); }
.fstep.do { background: var(--brand-green); color: var(--brand-white); font-weight: 700; }
.bubble { display: flex; flex-direction: column; gap: 6px; background: var(--grey-1); color: var(--brand-white); border-radius: 24px 24px 24px 6px; padding: 18px 26px; margin-bottom: 18px; font-size: 26px; line-height: 1.3; width: fit-content; max-width: 820px; }
.bubble b { color: var(--accent-green); font-family: var(--font-brand); font-size: 22px; letter-spacing: .04em; }
.bubble.on { box-shadow: 0 0 0 4px var(--brand-yellow); }
.mode { display: flex; align-items: center; gap: 34px; padding: 0 44px; }
.contact { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 30px; row-gap: 8px; padding: 0 40px; }
.contact .ci { grid-row: 1 / 3; width: 130px; height: 130px; border-radius: 50%; background: var(--brand-green); display: flex; align-items: center; justify-content: center; }
.contact .cv { color: var(--brand-green); font-size: 52px; }
.contact .tag247 { color: var(--grey-1); font-size: 34px; font-family: var(--font-ui); margin-left: 16px; }

/* Knowledge-check specifics */
.kmail { position: relative; }
.kmail .from .hot { color: var(--grey-2); }
.krow { display: flex; gap: 20px; align-items: center; margin-top: 30px; }
.hint { font-size: 24px; color: var(--grey-3); }
.statusbar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: var(--grey-4); color: var(--grey-1); font-size: 24px; display: flex; align-items: center; padding: 0 22px; gap: 12px; transition: opacity .2s; }
.opts { display: flex; flex-direction: column; gap: 18px; }
.opts.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card-opt { flex-direction: column; align-items: stretch; padding: 16px; gap: 14px; }
.card-opt img { height: 190px; object-fit: contain; }
.card-opt .ct { display: flex; gap: 16px; align-items: flex-start; font-size: 25px; }
.card-opt .why, .opt .why { display: none; }
.answered .why { display: block; }
.opt .ot { flex: 1; }
.opt .ot .why { font-size: 22px; color: var(--grey-2); margin-top: 8px; }
.toolbar.k { margin-bottom: 20px; }
.act { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 24px; border-radius: 18px; border: 3px solid var(--grey-4); background: var(--brand-white); color: var(--grey-1); cursor: pointer; font-size: 26px; font-weight: 700; }
.act small { font-weight: 400; font-size: 20px; color: var(--grey-3); }
.act:hover:not([disabled]) { border-color: var(--brand-green); }
.act.right { border-color: var(--brand-green); box-shadow: inset 0 0 0 3px var(--brand-green); }
.act.wrong { border-color: var(--grey-3); color: var(--grey-3); }
.act .ai { display: flex; gap: 10px; align-items: center; }
.callui { width: 520px; border-radius: 48px; background: var(--grey-1); color: var(--brand-white); padding: 40px 36px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.callui .av { width: 140px; height: 140px; border-radius: 50%; background: var(--grey-2); display: flex; align-items: center; justify-content: center; }
.speech { background: var(--grey-1); color: var(--brand-white); border-radius: 26px 26px 26px 6px; padding: 22px 30px; font-size: 30px; line-height: 1.35; max-width: 760px; }
.speech.me { background: var(--brand-green); border-radius: 26px 26px 6px 26px; align-self: flex-end; }
.routes .opt .ico { flex: none; }
.imgbox { position: absolute; }
.mail.xl .subj { font-size: 40px; }
.mail.xl .from { font-size: 30px; }
.mail.xl .bd { font-size: 33px; }
.mail.xl .att { font-size: 27px; }
.kimg { height: 330px; align-self: flex-start; object-fit: contain; }
.card-opt img { height: 250px; }
.card-opt .ct { font-size: 28px; }
.item { font-size: 28px; }
.bin h4 { font-size: 36px; }
.krow .kbtn { flex: none; }
.hint { font-size: 26px; }
.big .chip { font-size: 40px; padding: 20px 34px; }
.lvl .fold { height: 130px; }
.lcard .ln { font-size: 54px; }
.lcard .lw { font-size: 26px; min-height: 68px; }
.lcard .lex { min-height: 118px; }
.lchip { font-size: 22px; }
.lcard .lh { font-size: 21px; }
.lcard .li { font-size: 24px; }
.fstep { font-size: 32px; padding: 26px 28px; }
.bubble { font-size: 32px; padding: 20px 30px; }
.bubble b { font-size: 24px; }
.contact .cs { font-size: 30px; }
.kc .main > * { flex-shrink: 0; }
.kc .main { gap: 22px; }
.opt { padding: 24px 32px; }
body.review .fb, body.review .statusbar { transition: none !important; }

.ill.outlined { filter: drop-shadow(0 0 1.5px #7c7f80) drop-shadow(0 0 1px #7c7f80); }
.tip.left::after { left: -10px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-left: 0; border-right-color: var(--grey-1); }
.mail.xl .att small { font-size: 24px; }
.tile .ti { height: 110px; }
#rotate { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 50; background: var(--gradient); color: var(--brand-white); flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px; text-align: center; font-size: 18px; line-height: 1.4; }
  #rotate b { font-family: var(--font-brand); font-size: 30px; }
}
@media (max-height: 500px) {
  #app { grid-template-rows: 1fr auto; }
  #topbar, #captions, #ccbtn { display: none; }
  #controls { padding: 6px 10px; }
  .cbtn { height: 38px; min-width: 38px; }
}