: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}.i5{position:relative;width:100%;height:100%;overflow:hidden;background:#04060a;color:#fff;font-family:Manrope,Inter,system-ui,sans-serif;isolation:isolate}.i5__photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.i5__glow{position:absolute;top:-420px;left:50%;width:1500px;height:900px;transform:translate(-50%);background:radial-gradient(50% 50% at 50% 50%,#a4dc2c3d,#68941c1f 38%,#0000 70%);filter:blur(20px)}.i5__glowCard{position:absolute;top:300px;left:60px;width:640px;height:620px;background:radial-gradient(50% 50% at 50% 50%,#b4e52838,#78a01a17 44%,#0000 72%);filter:blur(50px)}.i5__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")}.i5__title{position:absolute;top:92px;left:0;right:0;z-index:2;margin:0;text-align:center;font-size:64px;font-weight:700;line-height:1.2;letter-spacing:-.032em;color:#f4f7f0}.i5__title em{font-style:normal;font-weight:700;color:#b4e528;text-shadow:0 0 44px rgba(180,229,40,.35)}.i5__cards{position:absolute;top:268px;left:80px;right:80px;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.i5__card{position:relative;display:flex;flex-direction:column;height:540px;padding:38px 34px 32px;border-radius:28px;overflow:hidden}.i5__card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:radial-gradient(124% 68% at 14% -6%,#ffffff2e,#fff0 56%)}.i5__card[data-tone=glass]{border:1px solid rgba(255,255,255,.09);background:linear-gradient(158deg,#ffffff14,#ffffff08 46%,#ffffff03);-webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);box-shadow:0 34px 80px #0000008c,inset 0 1px #ffffff21,inset 0 -1px #ffffff08}.i5__card[data-tone=lime]{border:1px solid rgba(228,255,152,.6);background:linear-gradient(158deg,#c9f74cf2,#b0e72ae6 46%,#94cb1cdb);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);box-shadow:0 34px 90px #a3e63542,0 12px 34px #0000006b,inset 0 1px #ffffff80;color:#0d1806}.i5__card[data-tone=lime]:before{background:radial-gradient(124% 68% at 14% -6%,#ffffff70,#fff0 58%)}.i5__cardTitle{position:relative;margin:0;font-size:30px;font-weight:700;line-height:1.18;letter-spacing:-.028em}.i5__cardBody{position:relative;margin:18px 0 0;max-width:340px;font-size:15px;font-weight:400;line-height:1.65;letter-spacing:-.002em;color:#fff9}.i5__card[data-tone=lime] .i5__cardBody{color:#0b1a03b8}.i5__chartWrap{position:relative;margin-top:auto;padding-top:24px}.i5__chart{display:block;overflow:visible}.i5__chart--donut{margin:0 auto}.i5__legend{display:flex;justify-content:center;gap:30px;margin:22px 0 0;padding:0;list-style:none}.i5__legend li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;letter-spacing:.005em;color:#ffffffbd}.i5__dot{width:9px;height:9px;border-radius:50%}.i5__dot--done{background:#b4e528;box-shadow:0 0 14px #b4e5288c}.i5__dot--pending{background:#59636a}