/* OS desktop scenes for the install guide: 1600×900, camera-driven like the app replica */
.os { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; overflow: hidden; transform-origin: 0 0; transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1); font: 400 14px/1.45 'Inter', system-ui, sans-serif; color: #e6e6e6; text-align: left; }
.os.no-anim, .ff .os { transition: none !important; }
.os [hidden] { display: none !important; }
.o-wall { position: absolute; inset: 0; }
.os .ic { width: 16px; height: 16px; }
.os .mark { width: 18px; height: 18px; }

.o-win { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: #1f2023; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.o-win:not([hidden]) { animation: oPop 0.28s var(--ease); }
@keyframes oPop { from { transform: scale(0.97); } }
.o-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; flex: none; background: #2a2b2f; color: #cfcfcf; font-size: 13px; }
.o-title { display: inline-flex; align-items: center; gap: 8px; }
.o-title .fi-svg { width: 16px; height: 16px; }
.o-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 8px 8px 0 0; background: #1f2023; color: #eee; }
.o-tab i { font-style: normal; color: #888; margin-left: 8px; }
.wc { margin-left: auto; display: flex; }
.wc i { width: 46px; text-align: center; font-style: normal; color: #ccc; }
.tl { display: flex; gap: 8px; margin-right: 8px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.tl i:nth-child(2) { background: #febc2e; }
.tl i:nth-child(3) { background: #28c840; }
.o-tool { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; flex: none; background: #1f2023; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: #999; }
.o-tool .fw .ic, .o-bar .fw .ic { transform: scaleX(-1); }
.o-url { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; background: #2c2d31; color: #ddd; }
.o-url i { width: 8px; height: 8px; border-radius: 50%; background: #34c759; }
.o-ib { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; transition: background 0.2s; }
.o-tool .o-ib:first-of-type { margin-left: auto; }
.o-ib.hot { background: #3a3d43; color: #fff; }

.o-page { flex: 1; padding: 30px 60px; background: linear-gradient(160deg, #16181c, #0b0c0e); }
.o-page .pn { display: flex; align-items: center; gap: 26px; margin-bottom: 90px; color: #8a8a8a; font-size: 14px; }
.o-page .pn b { display: flex; align-items: center; gap: 8px; margin-right: 20px; color: #eee; }
.o-page h1 { margin: 0; font: 500 50px/1.05 'Inter', sans-serif; letter-spacing: -0.04em; color: #f4f4f4; }
.o-page p { margin: 16px 0 28px; font-size: 17px; color: #8a8a8a; }
.o-cta { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #f2f2f2; color: #111; font-weight: 500; font-size: 15px; }

.o-pop { position: absolute; right: 22px; top: 92px; width: 360px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: #2b2c31; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); z-index: 5; }
.o-pop .ph { padding: 2px 4px 10px; font-weight: 600; color: #eee; }
.pi { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 9px; background: #232428; }
.pi b { display: block; font-weight: 500; color: #eee; }
.pi small { display: block; margin: 2px 0 6px; color: #888; font-size: 12px; }
.pi > div { flex: 1; min-width: 0; }
.pb { display: block; height: 4px; border-radius: 2px; background: #3a3b40; overflow: hidden; }
.pb u { display: block; height: 100%; width: 0; background: #4da3ff; text-decoration: none; transition: width 0.24s linear; }
.pa { padding: 6px 12px; border-radius: 7px; background: #f2f2f2; color: #111; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.fi-svg { width: 30px; height: 30px; color: #9aa4b2; flex: none; }
.fi-svg.exe { color: #4da3ff; }
.fi-svg.zip { color: #e0b252; }
.fi-svg.appimg { color: #9aa0a6; }
.fi { display: grid; place-items: center; }
.o-btn { display: inline-block; padding: 8px 20px; border-radius: 6px; background: #3a3b40; color: #fff; font-weight: 500; font-size: 14px; }

/* Safari on macOS: light */
.o-br.mac { background: #fff; border-color: rgba(0, 0, 0, 0.18); }
.o-bar.mac { height: 52px; gap: 12px; background: #f1f1f2; color: #555; border-bottom: 1px solid #d8d8da; }
.o-br.mac .o-url { margin: 0 auto; background: #e4e4e6; color: #333; max-width: 420px; justify-content: center; }
.o-br.mac .o-ib { color: #666; }
.o-br.mac .o-ib.hot { background: #d6d6d8; color: #111; }
.sb-ic { display: grid; place-items: center; width: 28px; height: 28px; color: #777; }
.sb-ic.fw .ic { transform: scaleX(-1); }
.o-pop.mac { background: #fff; border: 1px solid #d4d4d6; color: #222; top: 58px; }
.o-pop.mac .ph { color: #222; }
.o-pop.mac .pi { background: #f3f3f4; }
.o-pop.mac .pi b { color: #222; }
.o-pop.mac .pb { background: #d9d9dc; }
.o-pop.mac .pa { background: #0a7aff; color: #fff; }

/* Krayton's own sign-in (renderer/auth-modal.js + styles/auth.css) */
.o-sign { z-index: 40; background: #0c0d11; border-radius: 12px; }
.sg-top { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; flex: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(12, 13, 17, 0.95); }
.sg-brand { display: flex; align-items: center; gap: 8px; }
.sg-brand b { font-weight: 500; font-size: 14px; color: #eee; }
.sg-ctl { display: flex; gap: 6px; color: #aaa; }
.sg-ctl i { width: 34px; text-align: center; font-style: normal; }
.sg-center { flex: 1; display: grid; place-items: center; }
.sg-card { width: 410px; padding: 34px 32px; border-radius: 18px; background: linear-gradient(180deg, rgba(22, 24, 32, 0.95), rgba(14, 15, 20, 0.98)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 28px 72px -16px rgba(0, 0, 0, 0.9); color: #f3f4f6; text-align: center; }
.sg-head .mark { width: 34px; height: 34px; }
.sg-head h1 { margin: 12px 0 6px; font: 600 22px 'Inter'; letter-spacing: -0.02em; }
.sg-head p { margin: 0 0 22px; color: #9a9dab; font-size: 13.5px; }
.sg-tabs { display: flex; padding: 3px; margin-bottom: 18px; border-radius: 9px; background: rgba(11, 12, 17, 0.7); border: 1px solid rgba(255, 255, 255, 0.07); }
.sg-tabs span { flex: 1; padding: 7px 10px; border-radius: 6px; color: #7b7e8d; font-size: 12px; font-weight: 500; }
.sg-tabs .on { background: rgba(255, 255, 255, 0.09); color: #fff; }
.sg-f { margin-bottom: 13px; text-align: left; }
.sg-f label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: #a0a3b1; }
.sg-inp { height: 40px; padding: 10px 12px; border-radius: 8px; background: rgba(14, 15, 20, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; }
.sg-inp:empty::before { content: attr(data-ph); color: #5f6270; }
.sg-inp.typing { border-color: rgba(255, 255, 255, 0.4); }
.sg-inp.typing::after { content: ''; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: #fff; animation: blink 0.9s steps(2) infinite; }
.sg-btn { display: block; padding: 11px 16px; margin-top: 8px; border-radius: 9px; background: #fff; color: #0b0c10; font-size: 13.5px; font-weight: 500; }
.sg-btn.hl { margin-top: 16px; }
.sg-card.pay { text-align: left; }
.pw-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 12px; }
.pw-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #ccc; }
.pw-pill i { width: 6px; height: 6px; border-radius: 50%; background: #34c759; }
.pw-out { color: #7b7e8d; }
.sg-card.pay .sg-head { text-align: center; }
.pw-tier { padding: 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); }
.pw-tier h3 { margin: 0; font: 600 15px 'Inter'; }
.pw-tier small { display: block; margin: 4px 0 12px; color: #9a9dab; font-size: 12.5px; }
.pw-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.pw-price b { font: 600 24px 'Inter'; letter-spacing: -0.02em; }
.pw-price span { color: #9a9dab; }
.pw-tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; color: #cfd1da; }
.pw-tier li i { margin-right: 8px; font-style: normal; color: #34c759; }
.pw-note { margin-top: 12px; text-align: center; color: #7b7e8d; font-size: 11.5px; }
.sg-card.ok { padding: 44px 32px; }
.sg-card.ok h2 { margin: 14px 0 6px; font: 600 22px 'Inter'; color: #34c759; }
.sg-card.ok p { margin: 0; color: #9a9dab; font-size: 13.5px; }