/* SmmPanelUS · #spu-si (signin landing) — extracted stylesheet. Pure CSS, scoped to #spu-si. Uses theme CSS vars from layout. Safe to host externally / on a CDN. */ #spu-si{ --bg:var(--spu-bg);--surface:var(--spu-surface);--surface2:var(--spu-surface-2); --line:var(--spu-line);--line2:var(--spu-line-strong);--ink:var(--spu-text); --muted:var(--spu-muted);--faint:var(--spu-faint);--brass:var(--spu-brass); --brass-deep:var(--spu-brass-deep);--up:var(--spu-up);--ui:var(--spu-ui);--mono:var(--spu-mono); max-width:74rem;margin:0 auto;color:var(--ink);font-family:var(--ui) } #spu-si *{box-sizing:border-box} #spu-si a{text-decoration:none} #spu-si a:hover,#spu-si a:focus{text-decoration:none!important} #spu-si a{color:var(--brass-deep);text-decoration:none} #spu-si svg{display:block} #spu-si .spu-si-rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} #spu-si .spu-si-rv.in{opacity:1;transform:none} /* hero */ #spu-si .spu-si-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin-top:.4rem} #spu-si .spu-si-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9} #spu-si .spu-si-bg .gw{stroke:var(--brass);fill:none} #spu-si .spu-si-mono{color:var(--brass);animation:spuSiBreathe 6s ease-in-out infinite} @keyframes spuSiBreathe{0%,100%{opacity:.4}50%{opacity:.58}} #spu-si .spu-si-grid{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px;-webkit-mask-image:radial-gradient(120% 80% at 72% 0%,#000,transparent 62%);mask-image:radial-gradient(120% 80% at 72% 0%,#000,transparent 62%);opacity:.45} #spu-si .spu-si-hin{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:3rem;align-items:center;padding:3.4rem 2.2rem} #spu-si .spu-si-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep)} #spu-si .spu-si-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--up)} #spu-si .spu-si-h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.05;letter-spacing:-.025em;font-weight:800;margin:1rem 0 0} #spu-si .spu-si-h1 .br{color:var(--brass-deep)} #spu-si .spu-si-lede{margin:1.1rem 0 0;font-size:1.06rem;line-height:1.55;color:var(--muted);max-width:33em} #spu-si .spu-si-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem} #spu-si .spu-si-chip{display:inline-flex;align-items:center;gap:.42rem;font-family:var(--mono);font-size:.72rem;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:.34rem .72rem;background:color-mix(in srgb,var(--surface) 55%,transparent)} #spu-si .spu-si-chip b{color:var(--ink);font-weight:600} #spu-si .spu-si-chip--up{color:var(--up);border-color:color-mix(in srgb,var(--up) 38%,var(--line2))} #spu-si .spu-si-chip .d{width:7px;height:7px;border-radius:50%;background:var(--up)} /* sign-in card */ #spu-si .spu-si-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.6rem;box-shadow:0 1px 2px rgba(0,0,0,.04),0 26px 50px -32px rgba(0,0,0,.45)} #spu-si .spu-si-seal{position:absolute;top:1.25rem;right:1.25rem;color:var(--brass);transition:transform .45s cubic-bezier(.2,.7,.2,1)} #spu-si .spu-si-card:hover .spu-si-seal{transform:rotate(9deg)} #spu-si .spu-si-cardh{font-size:1.32rem;font-weight:800;letter-spacing:-.01em;margin:0} #spu-si .spu-si-cards{font-size:.85rem;color:var(--faint);margin:.28rem 0 1.3rem} #spu-si .spu-si-fld{margin-bottom:1rem} #spu-si .spu-si-fldtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem} #spu-si .spu-si-fld label,#spu-si .spu-si-fld .control-label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.01em;margin:0} #spu-si .spu-si-forgot{font-size:.74rem;color:var(--brass-deep);font-weight:600} #spu-si .spu-si-inp{position:relative} #spu-si .spu-si-inp .form-control,#spu-si .spu-si-inp input{width:100%;height:auto;padding:.74rem .85rem .74rem 2.5rem;font-size:.95rem;font-family:var(--ui);color:var(--ink);background:var(--surface2);border:1px solid var(--line2);border-radius:10px;box-shadow:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s} #spu-si .spu-si-inp input::placeholder{color:var(--faint)} #spu-si .spu-si-inp input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(184,150,90,.18)} #spu-si .spu-si-inp .ic{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint);pointer-events:none} #spu-si .spu-si-inp input:focus ~ .ic{color:var(--brass-deep)} #spu-si .spu-si-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.2rem 0 1.15rem} #spu-si .spu-si-rem{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);cursor:pointer;user-select:none;margin:0;font-weight:400} #spu-si .spu-si-rem input{width:1rem;height:1rem;accent-color:var(--brass);cursor:pointer;margin:0} #spu-si .spu-si-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.84rem 1rem;font-size:.95rem;font-weight:700;color:#fff;background:var(--brass);border:1px solid var(--brass-deep);border-radius:10px;cursor:pointer;transition:background .15s} #spu-si .spu-si-btn:hover{background:var(--brass-deep);color:#fff} #spu-si .spu-si-btn svg{width:16px;height:16px} #spu-si .spu-si-sep{display:flex;align-items:center;gap:.7rem;margin:1.05rem 0;color:var(--faint);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase} #spu-si .spu-si-sep::before,#spu-si .spu-si-sep::after{content:"";flex:1;height:1px;background:var(--line)} #spu-si .spu-si-gwrap{min-height:44px} #spu-si .spu-si-terms{font-size:.77rem;color:var(--faint);text-align:center;margin:1rem 0 0;line-height:1.45} #spu-si .spu-si-terms a{color:var(--brass-deep);border-bottom:1px solid currentColor} #spu-si .spu-si-altl{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted);text-align:center} #spu-si .spu-si-altl a{color:var(--brass-deep);font-weight:700} #spu-si .spu-si-alert{display:flex;align-items:flex-start;gap:.55rem;border:1px solid;border-radius:10px;padding:.7rem .85rem;font-size:.86rem;margin-bottom:1rem} #spu-si .spu-si-alert .close{margin-left:auto;background:none;border:0;font-size:1.1rem;line-height:1;color:inherit;opacity:.55;cursor:pointer} #spu-si .spu-si-alert--err{color:#8a2e27;background:#fbeae8;border-color:#efc9c4} #spu-si .spu-si-alert--ok{color:#1c6b48;background:#e8f4ee;border-color:#bfe2cf} /* platform pulse */ #spu-si .spu-si-pulse{display:flex;align-items:center;gap:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:.5rem 1rem;margin-top:1.4rem} #spu-si .spu-si-pulse-lbl{flex:none;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} #spu-si .spu-si-pulse-lbl .d{width:7px;height:7px;border-radius:50%;background:var(--up)} #spu-si .spu-si-pulse-vp{position:relative;flex:1;height:34px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} #spu-si .spu-si-pulse-cv{display:block;width:100%;height:100%} /* sections */ #spu-si .spu-si-sec{padding:3.6rem 0} #spu-si .spu-si-band{border:1px solid var(--line);border-radius:18px;background:var(--surface2);padding:2.8rem 2.2rem} #spu-si .spu-si-shead{max-width:42rem;margin:0 0 2.1rem} #spu-si .spu-si-shead--c{margin-left:auto;margin-right:auto;text-align:center} #spu-si .spu-si-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep)} #spu-si .spu-si-h2{font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:.55rem 0 0} #spu-si .spu-si-sub{color:var(--muted);margin:.7rem 0 0;font-size:1.02rem;line-height:1.55} #spu-si .spu-si-prose{max-width:48rem;margin:0 auto} #spu-si .spu-si-prose h2{font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:0 0 .2rem} #spu-si .spu-si-prose h3{font-size:1.1rem;font-weight:700;margin:1.8rem 0 .4rem} #spu-si .spu-si-prose p{color:var(--muted);line-height:1.72;font-size:1.02rem;margin:1rem 0} #spu-si .spu-si-prose strong,#spu-si .spu-si-prose b{color:var(--ink);font-weight:600} /* steps */ #spu-si .spu-si-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} #spu-si .spu-si-step{position:relative;border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.4rem;background:var(--surface);overflow:hidden} #spu-si .spu-si-step-n{font-family:var(--mono);font-size:.8rem;color:var(--brass-deep);font-weight:600} #spu-si .spu-si-step-bg{position:absolute;top:-.4rem;right:.4rem;font-family:var(--mono);font-size:4.4rem;font-weight:700;color:var(--ink);opacity:.04;line-height:1} #spu-si .spu-si-step-ic{width:34px;height:34px;color:var(--brass-deep);margin:.7rem 0 .5rem} #spu-si .spu-si-step h3{font-size:1.05rem;font-weight:700;margin:.4rem 0 .35rem} #spu-si .spu-si-step p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5} /* audience */ #spu-si .spu-si-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} #spu-si .spu-si-acard{border:1px solid var(--line);border-radius:14px;padding:1.6rem;background:var(--surface);transition:border-color .2s,transform .2s} #spu-si .spu-si-acard:hover{border-color:var(--brass);transform:translateY(-3px)} #spu-si .spu-si-acard--feat{border-color:color-mix(in srgb,var(--brass) 45%,var(--line));background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--brass) 5%,var(--surface)))} #spu-si .spu-si-acard-ic{width:30px;height:30px;color:var(--brass-deep);margin-bottom:.9rem} #spu-si .spu-si-acard h3{font-size:1.12rem;font-weight:800;margin:0 0 .2rem} #spu-si .spu-si-acard-k{font-family:var(--mono);font-size:.7rem;color:var(--faint);letter-spacing:.05em} #spu-si .spu-si-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.85rem 0} #spu-si .spu-si-tag{font-family:var(--mono);font-size:.68rem;color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:.18rem .5rem} #spu-si .spu-si-acard p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5} /* principles */ #spu-si .spu-si-prin{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden} #spu-si .spu-si-prin>div{background:var(--surface);padding:1.6rem 1.5rem} #spu-si .spu-si-prin-ic{width:26px;height:26px;color:var(--brass-deep);margin-bottom:.7rem} #spu-si .spu-si-prin h3{font-size:1rem;font-weight:700;margin:0 0 .3rem} #spu-si .spu-si-prin p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5} /* telemetry */ #spu-si .spu-si-tel{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem;align-items:stretch} #spu-si .spu-si-telgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} #spu-si .spu-si-telgrid>div{background:var(--surface);padding:1.3rem 1.4rem} #spu-si .spu-si-telv{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--ink);letter-spacing:-.01em} #spu-si .spu-si-telv .u{color:var(--up)} #spu-si .spu-si-tell{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:.25rem} #spu-si .spu-si-winbox{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:1.3rem 1.4rem;display:flex;flex-direction:column} #spu-si .spu-si-winh{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:auto} #spu-si .spu-si-win{position:relative;height:10px;border-radius:999px;background:var(--line);margin:1.1rem 0 .55rem} #spu-si .spu-si-win-open{position:absolute;top:0;bottom:0;left:41.667%;width:54.167%;border-radius:999px;background:color-mix(in srgb,var(--brass) 55%,var(--surface))} #spu-si .spu-si-win-now{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--ink);transition:left 1s linear} #spu-si .spu-si-win-now::after{content:"";position:absolute;top:-3px;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--up)} #spu-si .spu-si-wincap{font-family:var(--mono);font-size:.7rem;color:var(--faint)} /* questions */ #spu-si .spu-si-faq{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} #spu-si .spu-si-qc{border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;background:var(--surface);transition:border-color .2s} #spu-si .spu-si-qc:hover{border-color:var(--brass)} #spu-si .spu-si-qc-h{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem} #spu-si .spu-si-qc-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--brass-deep);background:color-mix(in srgb,var(--brass) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--brass) 28%,var(--line2))} #spu-si .spu-si-qc-ic svg{width:18px;height:18px} #spu-si .spu-si-qc h3{font-size:1rem;font-weight:700;margin:0;line-height:1.25} #spu-si .spu-si-qc p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.55} #spu-si .spu-si-qc p b{color:var(--ink);font-weight:600} #spu-si .spu-si-authtext{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem;line-height:1.6} #spu-si .spu-si-authtext :where(h1,h2,h3){color:var(--ink)} @media(max-width:900px){ #spu-si .spu-si-hin{grid-template-columns:1fr;gap:2.2rem;padding:2.6rem 1.6rem} #spu-si .spu-si-lede{max-width:none} #spu-si .spu-si-steps,#spu-si .spu-si-aud,#spu-si .spu-si-prin,#spu-si .spu-si-tel,#spu-si .spu-si-faq{grid-template-columns:1fr} #spu-si .spu-si-prin,#spu-si .spu-si-telgrid{border-radius:14px} #spu-si .spu-si-band{padding:2rem 1.4rem} } @media(max-width:560px){ #spu-si .spu-si-telgrid{grid-template-columns:1fr 1fr} #spu-si .spu-si-card{padding:1.4rem 1.2rem} } #spu-si .spu-si-num,#spu-si .spu-si-wincap,#spu-si #spu-si-sgt{unicode-bidi:isolate} @media(prefers-reduced-motion:reduce){ #spu-si .spu-si-mono{animation:none}#spu-si .spu-si-rv{transition:none} }