: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}.f8{position:relative;width:100%;height:100%;overflow:hidden;background:#050505;color:#fff;font-family:Inter,system-ui,sans-serif;isolation:isolate}.f8__grain{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.09;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")}.f8__head{position:absolute;top:40px;left:100px;right:100px;z-index:2}.f8__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;letter-spacing:-.005em;color:#ffffffeb}.f8__eyebrow svg{width:18px;height:18px}.f8__title{margin:24px 0 0;font-family:Inter Tight,Inter,sans-serif;font-size:46px;font-weight:700;line-height:1.16;letter-spacing:-.03em;color:#fdfdfd}.f8__title em{font-family:"Instrument Serif",Georgia,serif;font-size:50px;font-style:italic;font-weight:400;letter-spacing:-.01em;color:#ffffff80}.f8__lede{margin:18px 0 0;font-size:13.5px;font-weight:400;line-height:1.6;letter-spacing:-.002em;color:#ffffff75}.f8__grid{position:absolute;top:262px;left:100px;right:100px;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:312px 272px;gap:16px}.f8__card[data-card=workflow],.f8__card[data-card=focus],.f8__card[data-card=progress]{grid-column:span 2}.f8__card[data-card=speed],.f8__card[data-card=connected]{grid-column:span 3}.f8__card{position:relative;display:flex;flex-direction:column;padding:24px;border-radius:20px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(162deg,#ffffff0d,#ffffff05 44%,#ffffff02);box-shadow:0 24px 60px #0000008c,inset 0 1px #ffffff0e;overflow:hidden}.f8__stage{position:relative;flex:1;min-height:0;margin:-4px -8px 0}.f8__shot{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}.f8__cardTitle{margin:16px 0 0;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.015em;color:#f4f4f5}.f8__cardBody{margin:8px 0 0;font-size:13px;font-weight:400;line-height:1.6;letter-spacing:-.002em;color:#ffffff70}.f8__v{position:absolute;top:0;right:0;bottom:0;left:0}.f8__noteCard{position:absolute;top:6%;left:30%;width:62%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,#ffffff17,#ffffff06);transform:rotate(-2deg)}.f8__noteDots{position:absolute;top:12px;right:12px;display:flex;gap:3px}.f8__noteDots i{width:3px;height:3px;border-radius:50%;background:#fff6}.f8__noteTitle{display:block;font-size:11px;font-weight:600;letter-spacing:-.01em;color:#ffffffb8}.f8__noteLine{display:block;height:4px;margin-top:7px;border-radius:2px;background:#ffffff21}.f8__noteLine--short{width:58%}.f8__dropdown{position:absolute;top:16%;left:6%;width:56%}.f8__dropTrigger{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#ffffff24,#ffffff0d);font-size:11px;font-weight:500;letter-spacing:-.01em;color:#ffffffdb}.f8__dropTrigger svg{width:12px;height:12px}.f8__dropList{margin:8px 0 0;padding:6px;list-style:none;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,#262628f5,#141416f5);box-shadow:0 22px 44px #000000a6}.f8__dropList li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:11px;font-weight:500;letter-spacing:-.01em;color:#fffc}.f8__dropList li:nth-child(2){background:#ffffff12}.f8__dropList svg{width:14px;height:14px;color:#ffffff8c}.f8__cursor{position:absolute;top:56%;left:56%;width:22px;height:22px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}.f8__v--focus{display:grid;place-items:center;perspective:760px}.f8__beam{position:absolute;top:-30%;left:50%;width:46%;height:90%;transform:translate(-50%);background:radial-gradient(50% 50% at 50% 0%,#ffffff29,#fff0 72%);filter:blur(6px)}.f8__board{width:78%;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#ffffff12,#ffffff05);transform:rotateX(20deg) rotate(-6deg);box-shadow:0 30px 60px #0009}.f8__boardBar{display:flex;gap:4px;margin-bottom:9px}.f8__boardBar i{width:4px;height:4px;border-radius:50%;background:#ffffff47}.f8__boardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.f8__tile{display:grid;align-content:center;gap:4px;height:34px;padding:0 7px;border-radius:7px;border:1px solid rgba(255,255,255,.05);background:#ffffff09}.f8__tile i{display:block;height:3px;border-radius:2px;background:#fff3}.f8__tile .f8__short{width:56%}.f8__tile--hero{place-items:center;border-color:#fff6;background:linear-gradient(160deg,#ffffff38,#ffffff12);box-shadow:0 0 26px #ffffff52}.f8__tile--hero i{width:74%;height:5px;background:#fff;box-shadow:0 0 12px #fffc}.f8__tile--add{place-items:center;font-size:13px;color:#ffffff59}.f8__stack{position:absolute;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:#ffffff09}.f8__stack--back{top:18%;left:6%;width:76%;height:52%;transform:rotate(-3deg)}.f8__stack--mid{top:22%;left:10%;width:78%;height:52%;transform:rotate(-1deg)}.f8__taskCard{position:absolute;top:26%;left:14%;width:82%;padding:12px 14px 14px;border-radius:13px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,#2e2e30f5,#161618f5);box-shadow:0 24px 48px #000000a8}.f8__taskHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.f8__taskTitle{font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:#ffffffeb}.f8__taskDue{font-size:9.5px;font-weight:500;letter-spacing:.005em;color:#ffffff6b}.f8__taskPct{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.005em;color:#ffffff6b}.f8__taskBar{display:block;height:5px;margin-top:10px;border-radius:3px;background:#ffffff1a;overflow:hidden}.f8__taskBar i{display:block;width:87%;height:100%;border-radius:3px;background:linear-gradient(90deg,#ffffff73,#fff);box-shadow:0 0 14px #fff9}.f8__taskPill{display:inline-block;margin-top:12px;padding:4px 9px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.09);background:#ffffff0f;font-size:9px;font-weight:500;letter-spacing:.01em;color:#ffffff9e}.f8__spinner{position:absolute;top:4%;left:56%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#2c2c2ef2,#121214f2);color:#fff;box-shadow:0 12px 30px #0009}.f8__spinner svg{width:22px;height:22px}.f8__v--gauge{display:grid;place-items:end center}.f8__gaugePill{position:absolute;top:2%;left:50%;transform:translate(-50%);padding:6px 15px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,#ffffff29,#ffffff0d);font-size:12px;font-weight:600;letter-spacing:-.01em;color:#fffffff2;white-space:nowrap}.f8__gaugeSvg{width:74%;max-height:84%}.f8__glint{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px #fffc}.f8__glint--a{top:34%;left:16%}.f8__glint--b{top:28%;left:76%}.f8__glint--c{top:54%;left:88%}.f8__nodeLines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.f8__node{position:absolute;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,#343436eb,#141416eb);color:#ffffffd1;box-shadow:0 10px 24px #0009}.f8__node svg{width:18px;height:18px}.f8__coreRing{position:absolute;top:50%;left:50%;width:108px;height:108px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.13)}.f8__core{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:74px;height:74px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 38% 30%,#4a4a4d,#1c1c1f 52%,#0b0b0d);box-shadow:inset 0 1px #ffffff24,0 0 46px #ffffff2e,0 14px 30px #000000b3}.f8__core svg{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(255,255,255,.75))}