:root{--canvas-w: 1600px;--canvas-h: 900px;--ink: #0b0b0b;--ink-2: #1a1a1a;--muted: #8b8b8b;--muted-2: #6f6f6f;--panel: #f6f6f6;--field: #ebebeb;--field-2: #e4e4e4;--line: #e6e6e6;--page: #ffffff;--r-pill: 999px;--r-panel: 20px;--r-field: 10px;--r-media: 26px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;background:#0e0f11}.demo{box-sizing:border-box;max-width:1600px;margin:0 auto;padding:clamp(16px,4vw,48px)}.frame{position:relative;width:100%;aspect-ratio:1600 / 900;overflow:hidden}.frame__canvas{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform}:where(.frame),:where(.frame) *,:where(.frame) *:before,:where(.frame) *:after{box-sizing:border-box}:where(.frame){font-family:Inter,system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;color:var(--ink)}:where(.frame) button,:where(.frame) input,:where(.frame) select,:where(.frame) textarea{font:inherit;color:inherit}.f6{position:relative;width:100%;height:100%;overflow:hidden;background:#08090a;color:#fff;font-family:Manrope,Inter,system-ui,sans-serif;isolation:isolate}.f6__photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.45}.f6__glow{position:absolute;top:-360px;left:50%;width:1400px;height:900px;transform:translate(-50%);background:radial-gradient(50% 50% at 50% 50%,#f9731624,#a046100f 40%,#0000 72%);filter:blur(30px)}.f6__grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.1;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}.f6__head{position:absolute;top:46px;left:0;right:0;z-index:2;text-align:center}.f6__title{margin:0;font-size:50px;font-weight:600;line-height:1.2;letter-spacing:-.03em;color:#f6f6f7}.f6__lede{margin:18px auto 0;max-width:640px;font-size:15px;font-weight:400;line-height:1.62;letter-spacing:-.002em;color:#ffffff70}.f6__grid{position:absolute;top:190px;left:88px;right:88px;z-index:2;display:grid;grid-template-columns:repeat(100,1fr);grid-template-rows:290px 320px;row-gap:20px}.f6__card[data-card=scheduling]{grid-column:1 / 46;grid-row:1;margin-right:10px}.f6__card[data-card=gateway]{grid-column:46 / 101;grid-row:1;margin-left:10px}.f6__card[data-card=limits]{grid-column:1 / 36;grid-row:2;margin-right:10px}.f6__card[data-card=tracking]{grid-column:36 / 101;grid-row:2;margin-left:10px}.f6__card{position:relative;display:flex;flex-direction:column;padding:26px 28px 24px;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,#ffffff0b,#ffffff05 44%,#ffffff02);box-shadow:0 26px 60px #00000080,inset 0 1px #ffffff0f;overflow:hidden}.f6__cardTitle{margin:0;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.022em;color:#f4f4f5}.f6__cardBody{margin:10px 0 0;max-width:330px;font-size:13px;font-weight:400;line-height:1.62;letter-spacing:-.002em;color:#fff6}.f6__visual{position:relative;flex:1;min-height:0;margin-top:16px;overflow:hidden}.f6__wall{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.f6__keys{display:grid;grid-template-columns:repeat(5,92px);gap:8px;-webkit-mask-image:radial-gradient(76% 88% at 50% 46%,#000 24%,rgba(0,0,0,0) 82%);mask-image:radial-gradient(76% 88% at 50% 46%,#000 24%,#0000 82%)}.f6__key{display:grid;place-items:center;height:46px;border-radius:9px;border:1px solid rgba(255,255,255,.05);background:#ffffff07;color:#ffffff57}.f6__key svg{width:44px;height:18px}.f6__appIcon{position:absolute;display:grid;place-items:center;width:62px;height:62px;border-radius:17px;background:linear-gradient(160deg,#fb923c,#f97316 46%,#ea580c);box-shadow:0 0 0 1px #ffffff2e inset,0 10px 26px #f9731680,0 0 70px #f9731666}.f6__appIcon svg{width:34px;height:34px}.f6__net{position:absolute;top:0;right:0;bottom:0;left:0}.f6__netLines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.f6__avatar{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.16);font-size:12px;font-weight:700;letter-spacing:.01em;color:#ffffffeb}.f6__avatar[data-tone=a]{background:linear-gradient(150deg,#f0a15a,#c2622a)}.f6__avatar[data-tone=b]{background:linear-gradient(150deg,#8f6b52,#4d3527)}.f6__avatar[data-tone=c]{background:linear-gradient(150deg,#6f8fa8,#33475a)}.f6__avatar[data-tone=d]{background:linear-gradient(150deg,#7c9a6d,#3c5233)}.f6__hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(160deg,#fb923c,#f97316,#ea580c);box-shadow:inset 0 0 0 1px #fff3,0 8px 24px #f9731673,0 0 60px #f9731657}.f6__hub svg{width:26px;height:26px}.f6__list{display:flex;flex-direction:column;gap:8px;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000,#000 66%,#0000)}.f6__row{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:#ffffff08}.f6__rowAvatar{position:relative;overflow:hidden;display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;font-size:11px;font-weight:700;color:#ffffffeb}.f6__rowAvatar[data-tone=a]{background:linear-gradient(150deg,#6f8fa8,#33475a)}.f6__rowAvatar[data-tone=b]{background:linear-gradient(150deg,#f0a15a,#c2622a)}.f6__rowAvatar[data-tone=c]{background:linear-gradient(150deg,#8f6b52,#4d3527)}.f6__rowAvatar[data-tone=d]{background:linear-gradient(150deg,#7c9a6d,#3c5233)}.f6__avatarImg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.f6__rowText{display:flex;flex-direction:column;gap:3px;min-width:0}.f6__rowName{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#ffffffe6}.f6__rowMail{font-size:10.5px;letter-spacing:.002em;color:#ffffff59}.f6__pill{margin-left:auto;padding:4px 10px;border-radius:var(--r-pill);font-size:10px;font-weight:600;letter-spacing:.01em}.f6__pill[data-state=in]{background:#22c55e24;color:#4ade80}.f6__pill[data-state=out]{background:#ef444424;color:#f87171}.f6__pl{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:14px 16px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:#ffffff07}.f6__plHead{display:flex;align-items:center;justify-content:space-between}.f6__plTitle{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#ffffffd1}.f6__plLegend{display:flex;gap:14px}.f6__legendItem{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;letter-spacing:.01em;color:#ffffff80}.f6__legendDot{width:7px;height:7px;border-radius:50%}.f6__legendDot[data-tone=out]{background:#f97316}.f6__legendDot[data-tone=in]{background:#fff6}.f6__plChart{position:relative;flex:1;min-height:0;margin-top:10px}.f6__plSvg{width:100%;height:100%;display:block}.f6__plMarker{position:absolute;top:0;bottom:0;left:54.2%;width:1px;background:linear-gradient(180deg,#f9731600,#f9731699 30%,#f9731600)}.f6__tooltip{position:absolute;top:-4px;left:46%;display:flex;flex-direction:column;gap:4px;padding:9px 12px;border-radius:10px;background:linear-gradient(160deg,#fb923c,#f97316 60%,#ea580c);box-shadow:0 10px 28px #f973166b;color:#fff}.f6__tipDate{font-size:9.5px;font-weight:600;letter-spacing:.01em;opacity:.86}.f6__tipRow{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:-.005em}.f6__tipRow i{width:6px;height:6px;border-radius:50%;background:#ffffff8c}.f6__tipRow i[data-tone=out]{background:#fff}.f6__plAxis{display:flex;justify-content:space-between;margin-top:8px;font-size:9.5px;font-weight:500;letter-spacing:.02em;color:#ffffff52}