/* Know Your City: visual building blocks for step lessons */
.visual{flex:1;min-height:0;position:relative;overflow:hidden;padding:0}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fit{width:min(600px,100%);padding:0 8px;display:flex;flex-direction:column;align-items:center;gap:12px;transform-origin:center center;animation:in .5s cubic-bezier(.3,.9,.3,1)}
@keyframes in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes pop{0%{opacity:0;scale:.6}70%{scale:1.06}100%{opacity:1;scale:1}}
.pop{opacity:0;animation:pop .5s cubic-bezier(.3,1.4,.5,1) forwards}
.row{display:flex;align-items:center;gap:clamp(5px,1.6vw,12px);justify-content:center;flex-wrap:wrap}
.box{border-radius:12px;padding:10px 14px;text-align:center;font-weight:600;line-height:1.2;font-size:15px;max-width:260px}
.box b{display:block;font:800 24px/1.1 var(--num)}
.box small{display:block;font-weight:600;font-size:13px;color:var(--muted);margin-top:3px}
.b-blue{background:var(--blue-soft);color:var(--blue)} .b-or{background:var(--orange-soft);color:#a8500c}
.b-green{background:var(--green-soft);color:var(--green)} .b-red{background:var(--red-soft);color:var(--red)}
.b-gray{background:#eef0f5;color:var(--ink)} .b-dash{border:2px dashed #c9a400;background:#fffbea;color:#7a5d00}
.b-navy{background:var(--blue);color:#fff} .b-navy small{color:#c9d3ea}
.arrow{font:800 24px var(--num);color:var(--muted)}
.vh{font:700 13px var(--num);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.vh.or{color:var(--orange)}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:560px}
.chip2{border-radius:999px;padding:6px 12px;font-weight:700;font-size:14.5px;white-space:nowrap}
.c-blue{background:var(--blue-soft);color:var(--blue)} .c-or{background:var(--orange-soft);color:#a8500c}
.c-green{background:var(--green-soft);color:var(--green)} .c-gray{background:#eef0f5;color:var(--ink)}
.split{display:flex;width:100%;height:84px;border-radius:12px;overflow:hidden;gap:2px;animation:in .6s}
.seg2{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#dfe5f2;color:var(--ink);padding:2px;text-align:center;transition:flex .8s}
.seg2 b{font:800 20px/1 var(--num)} .seg2 span{font-size:12px;font-weight:700;line-height:1.1;margin-top:3px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.seg2.hl{background:var(--orange);color:#fff}
.seg2.s-navy{background:var(--blue);color:#fff} .seg2.s-blue{background:var(--blue-2);color:#fff} .seg2.s-gray{background:#c7cfdf}
.seg2.s-green{background:var(--green);color:#fff}
.splitcap{font-size:13.5px;color:var(--muted);font-weight:600;text-align:center}
.check{width:100%;display:flex;flex-direction:column;gap:7px}
.check div{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.3;opacity:0;animation:in .45s forwards}
.check i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:#fff}
.ok{background:var(--green)} .q{background:var(--orange)} .nx{background:var(--blue)} .no{background:var(--red)}
.t2{border-collapse:collapse;font-size:15px;width:100%;max-width:520px}
.t2 th{font:700 12px var(--num);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:4px 8px;border-bottom:2px solid var(--line)}
.t2 td{padding:5px 8px;border-bottom:1px solid var(--line)}
.t2 tr.hl td{background:var(--orange-soft);font-weight:700}
.paper{width:100%;max-width:500px;background:#fffef7;border:1px solid #e3dccb;border-radius:6px;padding:12px 16px;box-shadow:0 2px 0 #e9e2d0,0 6px 14px rgba(0,0,0,.06);font:15px/1.4 Georgia,serif;color:#222}
.paper h4{margin:0 0 6px;font:800 15px var(--num);letter-spacing:.08em;text-align:center}
.paper mark{background:#ffe2b8;padding:0 2px;border-radius:2px}
.callout{font-weight:700;font-size:16px;color:var(--blue);text-align:center;max-width:500px}
.callout.or{color:#a8500c}
@media (max-width:420px){
  .box{padding:8px 9px;font-size:13.5px} .box b{font-size:20px} .box small{font-size:11.5px}
  .arrow{font-size:18px} .check div{font-size:14px} .chip2{font-size:13px;padding:5px 10px}
  .seg2 b{font-size:16px} .seg2 span{font-size:10.5px} .split{height:70px}
  .t2{font-size:13.5px} .paper{font-size:13.5px;padding:10px 12px}
}