/* Flow 1a slides: f1, pass-is-file, need, anatomy, passjson */

/* f1 */
.fa-steps .row { grid-template-columns: 64px 1fr; padding: 25px 0; }
.fa-steps .row h3 { font-size: 34px; }
.fa-steps .row .n { font-size: 19px; }

/* pass-is-file */
.fa-col { display: flex; flex-direction: column; height: 100%; }
.fa-file { flex: 1; display: grid; grid-template-columns: 1fr 64px 212px 288px; gap: 26px; align-items: center; }
.fa-tab { width: max-content; padding: 11px 20px 9px; background: var(--panel); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.fa-body { background: var(--panel); padding: 20px; display: grid; gap: 10px; }
.fa-doc { display: grid; grid-template-columns: 58px 1fr; gap: 20px; align-items: center; min-height: 94px; background: #fff; border: 1px solid var(--line); padding: 13px 22px; }
.fa-slot { outline: 1px dashed #c4c4c4; outline-offset: -1px; }
.fa-slot:has(> .shown) { outline-color: transparent; }
.fa-doc svg, .fa-pk svg { display: block; }
.fa-fn { font-family: var(--mono); font-size: 21px; font-weight: 600; color: var(--ink); word-spacing: .5em; }
.fa-doc p, .fa-pk p { font-size: 20px; line-height: 1.3; margin-top: 4px; }
.fa-pk svg { margin-bottom: 18px; }
#fa-file-pass { zoom: .9; }

/* need */
.fa-need { display: grid; grid-template-columns: 1fr 384px; gap: 60px; align-items: start; margin-top: 34px; }
.fa-need .row { grid-template-columns: 52px 1fr 296px; gap: 24px; padding: 22px 0; }
.fa-need .row h3 { font-size: 28px; }
.fa-need .row p { font-size: 21px; margin-top: 7px; }
.fa-need .row .fa-fact { font-size: 19px; line-height: 1.4; text-wrap: balance; margin: 0; }
.fa-need .note { font-size: 24px; margin-top: 22px; }
.fa-need .note + .note strong { display: block; margin-bottom: 4px; }
.fa-need .note + .note { margin-top: 40px; }
.fa-nb { white-space: nowrap; }

/* anatomy */
.fa-seg { position: absolute; right: 96px; top: 46px; display: flex; }
.fa-seg button { height: 46px; padding: 0 18px; margin-left: -1px; border: 1px solid #bdbdbd; background: #fff; font-size: 18px; cursor: pointer; }
.fa-seg button.on { position: relative; background: var(--blue); border-color: var(--blue); color: #fff; }
.fa-an { position: relative; height: 532px; margin-top: 22px; }
.fa-card { position: absolute; left: 50%; top: 0; width: 320px; margin-left: -160px; transform: scale(1.35); transform-origin: 50% 0; perspective: 1400px; }
.fa-flip { position: relative; transform-style: preserve-3d; transition: transform .5s; }
.fa-flip.fa-turned { transform: rotateY(180deg); }
.fa-front, .fa-back, .fa-flap { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fa-back { position: absolute; inset: 0; transform: rotateY(180deg); cursor: pointer; }
.fa-back .pass { width: 100%; height: 100%; }
.fa-back .pass .f .l { font-size: 10px; }
.fa-back .pass .f .v { font-size: 15px; line-height: 1.36; white-space: pre-line; margin-top: 2px; }
.fa-flap { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; padding: 0; border: 0; border-top-left-radius: 5px; cursor: pointer; background: linear-gradient(to bottom right, var(--fa-flap, #bfe3d0) 50%, #fff 50%); }
.fa-lab { position: absolute; width: 388px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; transition: opacity .2s; }
.fa-lab.fa-l { left: 0; text-align: right; }
.fa-lab.fa-r { right: 0; }
.fa-lab[data-n="6"] { bottom: 0; }
.fa-lab b { display: flex; align-items: center; gap: 12px; height: 30px; font-size: 25px; letter-spacing: -.02em; white-space: nowrap; }
.fa-lab.fa-l b { flex-direction: row-reverse; }
.fa-lab i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--ink); font-style: normal; font-size: 16px; letter-spacing: 0; transition: background .2s, color .2s, border-color .2s; }
.fa-lab span { display: block; margin-top: 8px; font-size: 20px; line-height: 1.35; color: var(--grey); text-wrap: pretty; visibility: hidden; opacity: 0; transition: opacity .25s; }
.fa-lab.fa-l span { padding-right: 42px; }
.fa-lab.fa-r span { padding-left: 42px; }
.fa-lab.on span { visibility: visible; opacity: 1; }
.fa-lab.on i { background: var(--blue); border-color: var(--blue); color: #fff; }
.fa-lab.dim { opacity: .3; }
.fa-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fa-lines g { transition: opacity .2s; }
.fa-lines path { fill: none; stroke: #9a9a9a; stroke-width: 1.5; }
.fa-lines circle { fill: #9a9a9a; stroke: #fff; stroke-width: 2; }
.fa-lines .on path { stroke: var(--blue); }
.fa-lines .on circle { fill: var(--blue); }
.fa-lines .off { opacity: 0; }
.fa-an .hotspot { z-index: 1; }
.fa-an .hotspot, .fa-mini .hotspot { background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.hotspot.fa-whole { background: none; border-radius: 20px; }
.fa-turning .hotspot, .fa-turning .fa-lines { animation: fa-wait .5s; }
@keyframes fa-wait { 0%, 80% { opacity: 0; } }
.fa-rules { display: flex; align-items: baseline; gap: 44px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 20px; color: var(--grey); }
.fa-rules-h { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }

/* passjson */
.fa-pj { display: grid; grid-template-columns: 1006px 1fr; gap: 40px; height: 603px; margin-top: 22px; }
.fa-json { margin: 0; padding: 14px 0; font-size: 16.5px; line-height: 21.4px; }
.fa-json .ln { width: max-content; min-width: 100%; padding: 0 20px; }
.fa-json .ln:empty { height: 10.7px; }
.fa-json .ln[data-g] { cursor: pointer; }
.fa-side { display: flex; flex-direction: column; }
.fa-nums { display: flex; }
.fa-nums button { width: 46px; height: 46px; margin-right: -1px; border: 1px solid #bdbdbd; background: #fff; font-size: 19px; cursor: pointer; }
.fa-nums button.on { position: relative; background: var(--blue); border-color: var(--blue); color: #fff; }
.fa-ex { height: 176px; margin-top: 20px; }
.fa-ex > div { display: none; }
.fa-ex > div.on { display: block; }
.fa-ex h3 { font-size: 29px; }
.fa-ex p { font-size: 21px; margin-top: 10px; }
.fa-mini { position: relative; width: 320px; zoom: .88; margin-top: auto; transition: opacity .25s; }
.fa-mini.fa-off { opacity: .32; }