/*
 * GenUI Kit hero phone (/resources/genui-kit/). The composed phone from the
 * Kit carve, UNCHANGED: every rule below is copied from the carve's exp.css
 * and only scoped under .gk-demo. Its screen is painted by the same rotator
 * the guide runs (/resources/genui/demos.js). Page chrome lives in
 * src/styles/genui-kit.css.
 */
.gk-demo img{ max-width:100%; }
.gk-demo{font-family:'Host Grotesk','Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:rgba(255,255,255,0.94)}
:where(.gk-demo) *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:where(.gk-demo) button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.gk-demo .kit{ --kit-scale: 1;

  
  --kit-accent:        #2A48DE;                    
  --kit-accent-ink:    #1b2f9e;                    
  --kit-accent-soft:   rgba(42,72,222,0.12);       
  --kit-on-accent:     #ffffff;
  --kit-pos:           #1FA567;                     
  --kit-neg:           #E0353B;                     
  --kit-bg:            #ffffff;
  --kit-bg-2:          #f5f4f2;                     
  --kit-fill:          rgba(128,126,125,0.12);      
  --kit-fill-strong:   rgba(128,126,125,0.20);
  --kit-ink:           #191817;                     
  --kit-ink-2:         rgba(67,66,66,0.78);         
  --kit-ink-3:         rgba(67,66,66,0.56);         
  --kit-line:          rgba(67,66,66,0.10);         
  --kit-glass:         rgba(255,255,255,0.60);      
  --kit-scrim:         linear-gradient(to top,rgba(6,12,26,.95) 2%,rgba(6,12,26,.82) 32%,rgba(6,12,26,.55) 56%,rgba(6,12,26,.28) 80%,rgba(6,12,26,.06) 100%);

  
  --kit-font:  'Host Grotesk','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --kit-mono:  'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;
  --kit-fs-display: calc(32px * var(--kit-scale));  
  --kit-fs-title:   calc(20px * var(--kit-scale));  
  --kit-fs-feature: calc(22px * var(--kit-scale));  
  --kit-fs-body:    calc(16px * var(--kit-scale));  
  --kit-fs-label:   calc(14px * var(--kit-scale));  
  --kit-fs-micro:   calc(12px * var(--kit-scale));  
  --kit-track:      -0.02em;                        
  --kit-w-light:    300;
  --kit-w-regular:  400;
  --kit-w-medium:   500;
  --kit-w-semibold: 600;

  
  --kit-s1: calc(4px  * var(--kit-scale));
  --kit-s2: calc(8px  * var(--kit-scale));
  --kit-s3: calc(12px * var(--kit-scale));
  --kit-s4: calc(16px * var(--kit-scale));
  --kit-s5: calc(20px * var(--kit-scale));
  --kit-s6: calc(24px * var(--kit-scale));
  --kit-s8: calc(32px * var(--kit-scale));

  
  --kit-r-card:  calc(28px * var(--kit-scale));
  --kit-r-chip:  calc(14px * var(--kit-scale));
  --kit-r-pill:  999px;

  
  --kit-shadow-sm:      0 1px 4px rgba(16,24,40,.10);                                          
  --kit-shadow-card:    0 1px 3px rgba(16,24,40,.05), 0 10px 26px -10px rgba(20,30,60,.16);    
  --kit-shadow-feature: 0 20px 44px -18px rgba(16,24,40,.34);                                  
  --kit-shadow-glass:   0 6px 40px rgba(0,0,0,0.14);                                           
  --kit-shadow:         0 4px 48px rgba(0,0,0,0.08);                                           

  font-family: var(--kit-font);
  color: var(--kit-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }
.gk-demo .kit *{ box-sizing:border-box }
.gk-demo .kit-section{ display:flex;align-items:center;justify-content:space-between;gap:var(--kit-s3);min-height:calc(38px * var(--kit-scale));margin-bottom:var(--kit-s2) }
.gk-demo .kit-section-t h3{ margin:0;font-size:var(--kit-fs-title);line-height:1.2;letter-spacing:var(--kit-track);font-weight:var(--kit-w-medium) }
.gk-demo .kit-section-t s{ display:block;text-decoration:none;margin-top:calc(2px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);font-weight:var(--kit-w-regular) }
.gk-demo .kit-chevron{ flex:none;width:calc(44px * var(--kit-scale));height:calc(44px * var(--kit-scale));border:0;cursor:pointer;border-radius:var(--kit-r-pill);background:var(--kit-fill);color:var(--kit-ink);display:flex;align-items:center;justify-content:center }
.gk-demo .kit-chevron svg{ width:calc(18px * var(--kit-scale));height:calc(18px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2.2 }
.gk-demo .kit-h1{ margin:0;font-size:var(--kit-fs-display);line-height:1.12;letter-spacing:var(--kit-track);font-weight:var(--kit-w-light) }
.gk-demo .kit-h1 s{ display:block;text-decoration:none;margin-top:calc(7px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);font-weight:var(--kit-w-regular) }
.gk-demo .kit-avatar{ flex:none;width:calc(46px * var(--kit-scale));height:calc(46px * var(--kit-scale));border-radius:var(--kit-r-pill);object-fit:cover;box-shadow:0 0 0 2.5px var(--kit-bg),0 0 0 4.5px var(--kit-accent),0 4px 14px -5px rgba(16,24,40,.3) }
.gk-demo .kit-card{ background:var(--kit-fill);border-radius:var(--kit-r-card);padding:var(--kit-s5);overflow:hidden;box-shadow:var(--kit-shadow-card) }
.gk-demo .kit-card.is-elevated{ background:var(--kit-bg);box-shadow:var(--kit-shadow) }
.gk-demo .kit-card.is-pad-0{ padding:0 }
.gk-demo .kit-row{ display:flex;align-items:center;gap:var(--kit-s4);min-height:calc(56px * var(--kit-scale));padding:calc(6px * var(--kit-scale)) 0 }
.gk-demo .kit-row + .kit-row{ border-top:1px solid var(--kit-line) }
.gk-demo .kit-row-lead{ flex:none;width:calc(46px * var(--kit-scale));height:calc(46px * var(--kit-scale));border-radius:var(--kit-r-chip);object-fit:cover;background:var(--kit-fill) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--kit-ink-2);box-shadow:0 2px 8px -3px rgba(16,24,40,.22) }
.gk-demo .kit-row-lead svg{ width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2 }
.gk-demo .kit-row-body{ flex:1;min-width:0 }
.gk-demo .kit-row-body b{ display:block;font-size:var(--kit-fs-body);line-height:1.25;letter-spacing:var(--kit-track);font-weight:var(--kit-w-medium);color:var(--kit-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.gk-demo .kit-row-body s{ display:block;text-decoration:none;margin-top:1px;font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:var(--kit-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.gk-demo .kit-row-meta{ flex:none;font-family:var(--kit-mono);font-size:calc(13px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-ink-2) }
.gk-demo .kit-chip{ display:inline-flex;align-items:center;gap:var(--kit-s2);background:var(--kit-fill);color:var(--kit-ink);border-radius:var(--kit-r-pill);padding:calc(7px * var(--kit-scale)) calc(14px * var(--kit-scale));font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);white-space:nowrap }
.gk-demo .kit-chip.is-accent{ background:var(--kit-accent);color:var(--kit-on-accent) }
.gk-demo .kit-chip-dot{ width:calc(7px * var(--kit-scale));height:calc(7px * var(--kit-scale));border-radius:50%;background:var(--kit-accent) }
.gk-demo .kit-chip.is-accent .kit-chip-dot{ background:var(--kit-on-accent) }
.gk-demo .kit-metric{ flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:calc(3px * var(--kit-scale));background:var(--kit-fill);background:color-mix(in srgb, var(--kit-accent) 10%, var(--kit-bg));border-radius:var(--kit-r-chip);padding:var(--kit-s3) var(--kit-s4);min-width:0 }
.gk-demo .kit-metric b{ font-family:var(--kit-mono);font-size:var(--kit-fs-body);font-weight:var(--kit-w-medium);color:var(--kit-accent-ink) }
.gk-demo .kit-metric s{ text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-micro);color:var(--kit-ink-2) }
.gk-demo .kit-stat{ flex:1;text-align:center }
.gk-demo .kit-stat b{ display:block;font-family:var(--kit-mono);font-size:calc(26px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-accent) }
.gk-demo .kit-stat s{ text-decoration:none;font-size:var(--kit-fs-micro);letter-spacing:var(--kit-track);color:var(--kit-ink-2) }
.gk-demo .kit-feature{ position:relative;overflow:hidden;border-radius:var(--kit-r-card);background:var(--kit-fill) center/cover no-repeat }
.gk-demo .kit-feature::after{ content:"";position:absolute;inset:0;background:var(--kit-scrim) }
.gk-demo .kit-feature-ov{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--kit-s4) var(--kit-s5) var(--kit-s5);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6) }
.gk-demo .kit-feature-eyebrow{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);font-weight:var(--kit-w-medium);letter-spacing:.01em;color:rgba(255,255,255,.92);margin-bottom:calc(7px * var(--kit-scale)) }
.gk-demo .kit-feature-ov h3{ margin:0;font-size:var(--kit-fs-feature);line-height:1.15;letter-spacing:var(--kit-track);font-weight:var(--kit-w-semibold) }
.gk-demo .kit-feature-sub{ margin-top:calc(4px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.3;letter-spacing:var(--kit-track);color:rgba(255,255,255,.82) }
.gk-demo .kit-timeline{ position:relative;height:calc(30px * var(--kit-scale));margin-bottom:var(--kit-s2) }
.gk-demo .kit-timeline-line{ position:absolute;top:calc(5px * var(--kit-scale));left:3px;right:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.35) }
.gk-demo .kit-timeline-line i{ position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--kit-accent) }
.gk-demo .kit-timeline-dot{ position:absolute;top:0;width:calc(12px * var(--kit-scale));height:calc(12px * var(--kit-scale));border-radius:50%;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 3px rgba(6,12,26,.35) }
.gk-demo .kit-timeline-dot.is-on{ width:calc(16px * var(--kit-scale));height:calc(16px * var(--kit-scale));top:calc(-2px * var(--kit-scale));background:var(--kit-accent);box-shadow:0 0 0 4px rgba(42,72,222,.32) }
.gk-demo .kit-timeline-lab{ position:absolute;top:calc(16px * var(--kit-scale));transform:translateX(-50%);font-family:var(--kit-mono);font-size:calc(10.5px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:.02em;color:rgba(255,255,255,.92) }
.gk-demo .kit-stack{ position:relative;flex:none;display:flex;align-items:center;height:calc(58px * var(--kit-scale)) }
.gk-demo .kit-stack img{ position:absolute;width:calc(48px * var(--kit-scale));height:calc(48px * var(--kit-scale));border-radius:var(--kit-r-chip);border:2px solid var(--kit-bg);box-shadow:var(--kit-shadow);object-fit:cover }
.gk-demo .kit-nav{ display:flex;gap:var(--kit-s2) }
.gk-demo .kit-nav-wrap{ flex:1;display:flex;align-items:center;padding:4px;background:var(--kit-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:var(--kit-shadow-glass) }
.gk-demo .kit-nav-item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(3px * var(--kit-scale));padding:calc(7px * var(--kit-scale)) 0;border-radius:var(--kit-r-pill);text-decoration:none;color:var(--kit-ink-2) }
.gk-demo .kit-nav-item.is-on{ background:var(--kit-fill);color:var(--kit-accent) }
.gk-demo .kit-nav-item svg{ width:calc(23px * var(--kit-scale));height:calc(23px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2 }
.gk-demo .kit-nav-item span{ font-size:var(--kit-fs-micro);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track) }
.gk-demo .kit-nav-solo{ flex:none;width:calc(56px * var(--kit-scale));display:flex;align-items:center;justify-content:center;background:var(--kit-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:var(--kit-shadow-glass);color:var(--kit-ink) }
.gk-demo .kit-nav-solo svg{ width:calc(23px * var(--kit-scale));height:calc(23px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2 }
.gk-demo .kit-phone{ width:min(402px,94vw);background:var(--kit-bg);border-radius:calc(51px * var(--kit-scale, 1));box-shadow:0 30px 80px -24px rgba(20,30,60,.4),0 0 0 10px #0c0e12,0 0 0 11px #2a2d34;overflow:hidden;position:relative;text-align:left }
.gk-demo .kit-phone-island{ position:absolute;top:calc(13px * var(--kit-scale, 1));left:50%;transform:translateX(-50%);width:calc(96px * var(--kit-scale, 1));height:calc(30px * var(--kit-scale, 1));background:#0c0e12;border-radius:calc(20px * var(--kit-scale, 1));z-index:5 }
.gk-demo .kit-statusbar{ display:flex;align-items:center;justify-content:space-between;padding:calc(16px * var(--kit-scale, 1)) calc(28px * var(--kit-scale, 1)) 0;color:var(--kit-ink) }
.gk-demo .kit-statusbar .time{ font-size:calc(16px * var(--kit-scale, 1));font-weight:var(--kit-w-semibold);letter-spacing:-.01em }
.gk-demo .kit-statusbar .sysicons{ display:flex;align-items:center;gap:calc(6px * var(--kit-scale, 1)) }
.gk-demo .kit-statusbar .sysicons svg{ display:block;fill:currentColor }
.gk-demo .kit-statusbar .sig{ width:calc(18px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1)) }
.gk-demo .kit-statusbar .wifi{ width:calc(16px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1)) }
.gk-demo .kit-statusbar .batt{ width:calc(25px * var(--kit-scale, 1));height:calc(12px * var(--kit-scale, 1)) }
.gk-demo .kit-screen{ padding:24px 16px 0 }
.gk-demo .kit-screen-in{ background:var(--kit-bg);overflow:hidden }
.gk-demo .kit-tablet{ position:relative;background:#0c0e12;border-radius:32px;padding:14px;box-shadow:0 30px 70px -30px rgba(20,30,60,.5),0 0 0 2px #2a2d34 }
.gk-demo .kit-tablet::before{ content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#2a2d34;z-index:2 }
.gk-demo .kit-tablet .kit-screen-in{ border-radius:19px }
.gk-demo .kit-laptop-lid{ background:#0c0e12;border-radius:14px 14px 3px 3px;padding:11px 11px 0;box-shadow:0 26px 60px -32px rgba(20,30,60,.55) }
.gk-demo .kit-laptop-lid .kit-screen-in{ border-radius:8px 8px 0 0 }
.gk-demo .kit-laptop-base{ position:relative;height:14px;width:116%;margin-left:-8%;background:linear-gradient(180deg,#dfe3eb,#b3b9c7);border-radius:0 0 14px 14px;box-shadow:inset 0 2px 2px rgba(255,255,255,.55) }
.gk-demo .kit-laptop-base::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:6px;background:#9aa0b0;border-radius:0 0 8px 8px }
.gk-demo .kit-tv-set{ background:#0c0e12;border-radius:12px;padding:9px;box-shadow:0 30px 70px -30px rgba(20,30,60,.55),0 0 0 2px #2a2d34 }
.gk-demo .kit-tv-set .kit-screen-in{ border-radius:5px }
.gk-demo .kit-tv-stand{ width:14%;height:15px;margin:0 auto;background:linear-gradient(180deg,#2a2d34,#16181d);border-radius:0 0 3px 3px }
.gk-demo .kit-tv-foot{ width:40%;height:6px;margin:2px auto 0;background:#16181d;border-radius:5px }
.gk-demo .kit-car{ position:relative;background:#0a0c10;border-radius:calc(30px * var(--kit-scale,1));padding:calc(11px * var(--kit-scale,1));box-shadow:0 36px 90px -34px rgba(8,14,32,.62),0 0 0 2px #23262d }
.gk-demo .kit-car-screen{ position:relative;display:flex;overflow:hidden;border-radius:calc(20px * var(--kit-scale,1));background:#0b0d12;aspect-ratio:16/9 }
.gk-demo .kit-car-main{ position:relative;flex:1;min-width:0;overflow:hidden }
.gk-demo .kit-car-map{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block }
.gk-demo .kit-car-main::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,24,.28) 0%,transparent 24% 50%,rgba(8,12,24,.68) 100%) }
.gk-demo .kit-car-ai{ position:absolute;top:calc(15px * var(--kit-scale,1));left:calc(15px * var(--kit-scale,1));z-index:2;display:inline-flex;align-items:center;gap:calc(10px * var(--kit-scale,1));padding:calc(7px * var(--kit-scale,1)) calc(15px * var(--kit-scale,1)) calc(7px * var(--kit-scale,1)) calc(7px * var(--kit-scale,1));background:rgba(11,15,25,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--kit-r-pill);box-shadow:0 8px 24px -10px rgba(0,0,0,.55) }
.gk-demo .kit-car-orb{ width:calc(30px * var(--kit-scale,1));height:calc(30px * var(--kit-scale,1));border-radius:50%;flex:none;background:radial-gradient(circle at 32% 28%,#9fbcff,#2A48DE 62%,#16236F);box-shadow:0 0 14px rgba(94,134,255,.6) }
.gk-demo .kit-car-ai b{ display:block;font-size:calc(13px * var(--kit-scale,1));font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);color:#fff;line-height:1.1 }
.gk-demo .kit-car-ai s{ display:block;text-decoration:none;font-family:var(--kit-mono);font-size:calc(9px * var(--kit-scale,1));letter-spacing:.07em;color:rgba(255,255,255,.6);margin-top:1px }
.gk-demo .kit-car-widgets{ position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:calc(10px * var(--kit-scale,1));padding:calc(13px * var(--kit-scale,1));align-items:stretch }
.gk-demo .kit-car-widgets > *{ flex:1;min-width:0 }
.gk-demo .kit-car-widgets .kit-card{ background:rgba(16,20,30,.74);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 12px 30px -16px rgba(0,0,0,.6);color:#fff;padding:calc(13px * var(--kit-scale,1));display:flex;flex-direction:column;gap:calc(9px * var(--kit-scale,1)) }
.gk-demo .kit-car-widgets .kit-card .k{ font-family:var(--kit-mono);font-size:calc(9px * var(--kit-scale,1));letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.56) }
.gk-demo .kit-car-widgets .kit-card b{ font-size:calc(14px * var(--kit-scale,1));font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);color:#fff }
.gk-demo .kit-car-widgets .kit-card s{ text-decoration:none;font-size:calc(11px * var(--kit-scale,1));color:rgba(255,255,255,.62) }
.gk-demo .kit-car-widgets .kit-progress{ background:rgba(255,255,255,.16) }
.gk-demo .kit-car-widgets .kit-map{ box-shadow:none;border-radius:calc(10px * var(--kit-scale,1)) }
.gk-demo .kit-car-rail{ flex:none;width:calc(94px * var(--kit-scale,1));background:#070809;display:flex;flex-direction:column;justify-content:center;gap:calc(2px * var(--kit-scale,1));padding:calc(10px * var(--kit-scale,1)) 0 }
.gk-demo .kit-car-nav-item{ display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--kit-scale,1));padding:calc(13px * var(--kit-scale,1)) 0;color:rgba(255,255,255,.5);cursor:pointer;position:relative }
.gk-demo .kit-car-nav-item .kit-ic{ font-size:calc(24px * var(--kit-scale,1)) }
.gk-demo .kit-car-nav-item span{ font-size:calc(10px * var(--kit-scale,1));font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track) }
.gk-demo .kit-car-nav-item.is-on{ color:#fff }
.gk-demo .kit-car-nav-item.is-on::before{ content:"";position:absolute;left:0;top:calc(9px * var(--kit-scale,1));bottom:calc(9px * var(--kit-scale,1));width:calc(3px * var(--kit-scale,1));border-radius:0 3px 3px 0;background:var(--kit-accent) }
.gk-demo .kit-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--kit-s2);border:0;cursor:pointer;font-family:var(--kit-font);font-size:var(--kit-fs-body);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);padding:calc(11px * var(--kit-scale)) var(--kit-s6);min-height:calc(44px * var(--kit-scale));border-radius:var(--kit-r-pill);background:var(--kit-accent);color:var(--kit-on-accent);box-shadow:var(--kit-shadow-card);white-space:nowrap }
.gk-demo .kit-btn.is-light{ background:var(--kit-bg);color:var(--kit-accent) }
.gk-demo .kit-btn.is-ghost{ background:var(--kit-fill);color:var(--kit-ink);box-shadow:none }
.gk-demo .kit-field{ display:flex;align-items:center;gap:var(--kit-s3);background:var(--kit-fill);border-radius:var(--kit-r-pill);padding:calc(13px * var(--kit-scale)) var(--kit-s5);color:var(--kit-ink-3) }
.gk-demo .kit-field svg{ flex:none;width:calc(18px * var(--kit-scale));height:calc(18px * var(--kit-scale));fill:none;stroke:currentColor;stroke-width:2 }
.gk-demo .kit-field input, .gk-demo .kit-field .kit-field-ph{ flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--kit-font);font-size:var(--kit-fs-body);letter-spacing:var(--kit-track);color:var(--kit-ink-2) }
.gk-demo .kit-seg{ display:inline-flex;gap:2px;padding:4px;background:var(--kit-fill);border-radius:var(--kit-r-pill) }
.gk-demo .kit-seg button{ border:0;cursor:pointer;font-family:var(--kit-font);font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);color:var(--kit-ink-2);padding:calc(8px * var(--kit-scale)) var(--kit-s5);border-radius:var(--kit-r-pill);background:none }
.gk-demo .kit-seg button.is-on{ background:var(--kit-bg);color:var(--kit-ink);box-shadow:var(--kit-shadow-card) }
.gk-demo .kit-tile-row{ display:flex;gap:var(--kit-s4);overflow-x:auto;scrollbar-width:none;padding:0 0 0 var(--kit-screen-pad,12px);margin:0 calc(-1 * var(--kit-screen-pad,12px));scroll-padding-left:var(--kit-screen-pad,12px) }
.gk-demo .kit-tile-row::-webkit-scrollbar{ display:none }
.gk-demo .kit-tile{ flex:0 0 calc(150px * var(--kit-scale));background:var(--kit-fill);background:color-mix(in srgb, var(--kit-accent) 10%, var(--kit-bg));border-radius:var(--kit-r-card);overflow:hidden }
.gk-demo .kit-tile-img{ aspect-ratio:1;background:var(--kit-fill) center/cover no-repeat }
.gk-demo .kit-tile-info{ padding:var(--kit-s4) }
.gk-demo .kit-tile-info b{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);color:var(--kit-ink) }
.gk-demo .kit-tile-info s{ display:block;text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-micro);color:var(--kit-accent-ink);margin-top:calc(3px * var(--kit-scale)) }
.gk-demo .kit-tier-row{ display:flex;gap:var(--kit-s3) }
.gk-demo .kit-tier{ flex:1;text-align:center;background:var(--kit-fill);border-radius:var(--kit-r-chip);padding:var(--kit-s4) var(--kit-s3) }
.gk-demo .kit-tier.is-on{ background:var(--kit-accent);color:var(--kit-on-accent);box-shadow:var(--kit-shadow-card) }
.gk-demo .kit-tier b{ display:block;font-size:var(--kit-fs-body);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track) }
.gk-demo .kit-tier s{ display:block;text-decoration:none;font-family:var(--kit-mono);font-size:var(--kit-fs-label);margin-top:calc(4px * var(--kit-scale));opacity:.72 }
.gk-demo .kit-chat{ display:flex;flex-direction:column;gap:var(--kit-s2) }
.gk-demo .kit-bubble{ max-width:80%;padding:calc(10px * var(--kit-scale)) calc(15px * var(--kit-scale));font-size:var(--kit-fs-label);line-height:1.35;letter-spacing:var(--kit-track);border-radius:calc(20px * var(--kit-scale)) }
.gk-demo .kit-bubble.is-them{ align-self:flex-start;background:var(--kit-fill);color:var(--kit-ink);border-bottom-left-radius:calc(6px * var(--kit-scale)) }
.gk-demo .kit-bubble.is-me{ align-self:flex-end;background:var(--kit-accent);color:var(--kit-on-accent);border-bottom-right-radius:calc(6px * var(--kit-scale)) }
.gk-demo .kit-pass{ display:flex;align-items:stretch;background:var(--kit-accent);color:var(--kit-on-accent);border-radius:var(--kit-r-card);overflow:hidden;box-shadow:var(--kit-shadow-card) }
.gk-demo .kit-pass-main{ flex:1;padding:var(--kit-s5) }
.gk-demo .kit-pass-main .k{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);opacity:.72;letter-spacing:.04em }
.gk-demo .kit-pass-main b{ display:block;font-size:var(--kit-fs-title);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);margin-top:calc(4px * var(--kit-scale)) }
.gk-demo .kit-pass-stub{ display:flex;align-items:center;padding:0 var(--kit-s4);border-left:2px dashed rgba(255,255,255,.45) }
.gk-demo .kit-pass-bars{ width:calc(8px * var(--kit-scale));height:58%;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px);opacity:.85 }
.gk-demo .kit-banner{ display:flex;align-items:center;justify-content:space-between;gap:var(--kit-s4);background:var(--kit-accent);color:var(--kit-on-accent);border-radius:var(--kit-r-card);padding:var(--kit-s6);box-shadow:var(--kit-shadow-card) }
.gk-demo .kit-banner b{ flex:1;min-width:0;font-size:var(--kit-fs-title);font-weight:var(--kit-w-semibold);letter-spacing:var(--kit-track);line-height:1.2;text-wrap:balance }
.gk-demo .kit-banner .kit-btn{ flex:none }
.gk-demo .kit-chip.is-ok{ background:var(--kit-accent-soft);color:var(--kit-accent-ink) }
.gk-demo .kit-chip.is-ok .kit-chip-dot{ background:var(--kit-accent) }
.gk-demo .kit-chip.is-warn{ background:rgba(176,113,12,.14);color:#8a5a0c }
.gk-demo .kit-chip.is-warn .kit-chip-dot{ background:#b0710c }
.gk-demo .kit-toast{ display:inline-flex;align-items:center;gap:var(--kit-s3);background:var(--kit-ink);color:#fff;border-radius:var(--kit-r-pill);padding:calc(10px * var(--kit-scale)) var(--kit-s5);font-size:var(--kit-fs-label);font-weight:var(--kit-w-medium);letter-spacing:var(--kit-track);box-shadow:var(--kit-shadow-card) }
.gk-demo .kit-toast .kit-chip-dot{ background:var(--kit-accent) }
.gk-demo .kit-map{ border-radius:var(--kit-r-chip);overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.1) }
.gk-demo .kit-map svg{ display:block;width:100%;height:auto }
.gk-demo .kit-label{ border:1.5px dashed var(--kit-line);border-radius:calc(12px * var(--kit-scale));padding:var(--kit-s3);background:var(--kit-bg) }
.gk-demo .kit-label-h{ display:flex;justify-content:space-between;font-family:var(--kit-mono);font-size:calc(11px * var(--kit-scale));font-weight:var(--kit-w-semibold);letter-spacing:.12em;color:var(--kit-ink) }
.gk-demo .kit-barcode{ height:calc(40px * var(--kit-scale));margin:var(--kit-s2) 0;border-radius:2px;background:repeating-linear-gradient(90deg,#15151c 0 2px,#fff 2px 4px,#15151c 4px 7px,#fff 7px 9px,#15151c 9px 11px,#fff 11px 15px) }
.gk-demo .kit-label-tn{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);letter-spacing:.1em;color:var(--kit-ink);text-align:center }
.gk-demo .kit-label-a{ font-size:calc(10.5px * var(--kit-scale));color:var(--kit-ink-3);text-align:center;margin-top:calc(4px * var(--kit-scale)) }
.gk-demo .kit-balance{ position:relative;overflow:hidden;border-radius:var(--kit-r-card);padding:var(--kit-s6);color:#fff;background:linear-gradient(150deg,#2A48DE 0%,#16236F 62%,#0A1530 100%);box-shadow:var(--kit-shadow-feature) }
.gk-demo .kit-balance-lab{ font-family:var(--kit-mono);font-size:var(--kit-fs-micro);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.68) }
.gk-demo .kit-balance-amt{ font-family:var(--kit-mono);font-size:calc(34px * var(--kit-scale));font-weight:var(--kit-w-medium);letter-spacing:-.01em;margin-top:calc(4px * var(--kit-scale)) }
.gk-demo .kit-balance-delta{ display:inline-flex;align-items:center;gap:calc(5px * var(--kit-scale));margin-top:var(--kit-s3);font-family:var(--kit-mono);font-size:var(--kit-fs-label);color:#7BE6AE }
.gk-demo .kit-spark{ display:block;width:100%;height:calc(54px * var(--kit-scale)) }
.gk-demo .kit-spark .area{ stroke:none }
.gk-demo .kit-spark .line{ fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round }
.gk-demo .kit-spark.on-dark .area{ fill:rgba(255,255,255,.16) }
.gk-demo .kit-spark.on-dark .line{ stroke:#fff }
.gk-demo .kit-spark.on-light .area{ fill:var(--kit-accent-soft) }
.gk-demo .kit-spark.on-light .line{ stroke:var(--kit-accent) }
.gk-demo .kit-gauge{ position:relative;width:calc(116px * var(--kit-scale));height:calc(116px * var(--kit-scale));flex:none }
.gk-demo .kit-gauge svg{ width:100%;height:100%;transform:rotate(-90deg) }
.gk-demo .kit-gauge .track{ fill:none;stroke:var(--kit-fill-strong);stroke-width:11 }
.gk-demo .kit-gauge .val{ fill:none;stroke:var(--kit-accent);stroke-width:11;stroke-linecap:round }
.gk-demo .kit-gauge-ctr{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px }
.gk-demo .kit-gauge-ctr b{ font-family:var(--kit-mono);font-size:calc(24px * var(--kit-scale));font-weight:var(--kit-w-medium);color:var(--kit-ink);letter-spacing:0 }
.gk-demo .kit-gauge-ctr s{ text-decoration:none;font-size:var(--kit-fs-micro);color:var(--kit-ink-3) }
.gk-demo .kit-bars{ display:flex;align-items:flex-end;gap:var(--kit-s2);height:calc(76px * var(--kit-scale)) }
.gk-demo .kit-bar{ flex:1;min-height:4px;background:var(--kit-fill-strong);border-radius:calc(6px * var(--kit-scale)) calc(6px * var(--kit-scale)) 2px 2px }
.gk-demo .kit-bar.is-on{ background:var(--kit-accent) }
.gk-demo .kit-bars-x{ display:flex;gap:var(--kit-s2);margin-top:var(--kit-s2) }
.gk-demo .kit-bars-x span{ flex:1;text-align:center;font-family:var(--kit-mono);font-size:calc(10px * var(--kit-scale));color:var(--kit-ink-3) }
.gk-demo .kit-progress{ height:calc(8px * var(--kit-scale));background:var(--kit-fill-strong);border-radius:var(--kit-r-pill);overflow:hidden }
.gk-demo .kit-progress i{ display:block;height:100%;border-radius:var(--kit-r-pill);background:var(--kit-accent) }
.gk-demo .kit-amt{ font-family:var(--kit-mono);font-weight:var(--kit-w-medium);letter-spacing:0;color:var(--kit-ink) }
.gk-demo .kit-amt.is-neg{ color:var(--kit-neg) }
.gk-demo .kit-amt.is-pos{ color:var(--kit-pos) }
.gk-demo .kit-ic{ display:inline-flex;align-items:center;justify-content:center;flex:none;width:1em;height:1em;line-height:0 }
.gk-demo .kit-ic svg{ width:100%;height:100%;display:block;fill:currentColor;stroke:none }
.gk-demo .kit-nav-item .kit-ic, .gk-demo .kit-nav-solo .kit-ic{ font-size:calc(24px * var(--kit-scale)) }
.gk-demo .kit-chevron .kit-ic{ font-size:calc(19px * var(--kit-scale)) }
.gk-demo .kit-field .kit-ic{ font-size:calc(19px * var(--kit-scale)) }
.gk-demo .kit-row-lead .kit-ic{ font-size:calc(22px * var(--kit-scale));color:var(--kit-ink-2) }
@keyframes gtw1{ 0%,100%{ fill:#5E86FF } 50%{ fill:#9DB6F8 } }
@keyframes gtw2{ 0%,100%{ fill:#2A48DE } 50%{ fill:#5E86FF } }
@keyframes gtw3{ 0%,100%{ fill:#7FA8FF } 50%{ fill:#3E63F0 } }
@keyframes kh-shimmer{ to{ transform:translateX(100%); } }
.gk-demo .kh-vis{ position:relative; display:flex; justify-content:center; }
.gk-demo .kh-peek{ position:relative; width:290px; }
.gk-demo .kh-peek-tag{ position:absolute; z-index:6; top:-14px; left:-16px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    padding:6px 12px; border-radius:999px; background:linear-gradient(135deg,#5E86FF,#2A48DE); color:#fff;
    font-family:'Host Grotesk','Poppins',system-ui,sans-serif; font-size:9.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
    box-shadow:0 8px 22px -6px rgba(42,72,222,0.7); }
.gk-demo .kh-peek-tag svg{ width:11px; height:11px; flex:none; }
@media (max-width:980px){
  .gk-demo .kh-vis{ justify-content:center; }
}
.gk-demo .kh-peek .kit-phone{ box-shadow:0 30px 70px -22px rgba(0,0,0,.62),0 0 60px rgba(94,134,255,.22),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
.gk-demo .kh-vis .kh-peek .kit-phone{ height:548px; }
.gk-demo .kh-vis .kh-peek .kit-screen{ -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 62px),transparent calc(100% - 10px)); mask-image:linear-gradient(180deg,#000 calc(100% - 62px),transparent calc(100% - 10px)); }
@media (max-width:980px){
  .gk-demo .kh-vis .kh-peek .kit-phone{ height:600px; }
}
.gk-demo .cp-pic .kit-ic{ display:flex; }
.gk-demo .cl-hero2.compare .cl-duo-front .kit-nav{ position:relative; }
.gk-demo .cl-hero2.compare .cl-duo-front .kit-nav::after{ content:'The head · hand-built'; position:absolute; z-index:2; top:-10px; left:50%; transform:translateX(-50%); font-family:'Host Grotesk','Poppins',system-ui,sans-serif; font-size:8.5px; font-weight:700; letter-spacing:0.06em; padding:3px 8px; border-radius:999px; background:#fff; border:1px solid rgba(12,20,48,0.22); color:rgba(12,20,48,0.6); box-shadow:0 4px 10px -4px rgba(12,20,48,0.25); white-space:nowrap; }
.gk-demo .cl-duo .kit-phone, .gk-demo .kh-peek .kit-phone{ width:290px; height:620px; --kit-scale:0.72; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.gk-demo .cl-duo .kit-phone-island, .gk-demo .kh-peek .kit-phone-island{ width:76px; height:24px; top:11px; }
.gk-demo .cl-duo .kit-statusbar, .gk-demo .kh-peek .kit-statusbar{ flex:none; padding:13px 19px 0; }
.gk-demo .cl-duo .kit-statusbar .time, .gk-demo .kh-peek .kit-statusbar .time{ font-size:13px; }
.gk-demo .cl-duo .kit-screen, .gk-demo .kh-peek .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
.gk-demo .cl-duo .kit-screen > *, .gk-demo .kh-peek .kit-screen > *{ flex:none; }
.gk-demo .cl-duo .kit-nav, .gk-demo .kh-peek .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
.gk-demo .cl-duo-back .kit-phone{ box-shadow:0 18px 50px -20px rgba(8,14,32,.6),0 0 0 7px #0c0e12,0 0 0 8px #23262d; }
.gk-demo .cl-duo-front .kit-phone{ box-shadow:0 30px 70px -22px rgba(0,0,0,.62),0 0 60px rgba(94,134,255,.22),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
.gk-demo .hs-top{ display:flex; align-items:center; gap:10px; flex:none; }
.gk-demo .hs-top .kit-avatar{ width:calc(55px * var(--kit-scale)); height:calc(55px * var(--kit-scale)); }
.gk-demo .hs-top b{ font-size:calc(19.5px * var(--kit-scale)); font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
.gk-demo .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:calc(14px * var(--kit-scale)); color:var(--kit-ink-2); margin-top:2px; }
.gk-demo .hs-gav{ width:40px; height:40px; border-radius:50%; background:var(--kit-fill-strong); display:grid; place-items:center; color:var(--kit-ink-3); flex:none; }
.gk-demo .hs-gav .kit-ic{ font-size:21px; }
.gk-demo .hs-lab{ font-family:var(--kit-mono); font-size:calc(14px * var(--kit-scale)); letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); flex:none; }
.gk-demo .hs-metrics{ display:flex; gap:calc(7px * var(--kit-scale)); }
.gk-demo .cl-duo .kit-feature, .gk-demo .kh-peek .kit-feature{ height:124px; flex:none; }
.gk-demo .cl-duo .kit-feature.is-tall, .gk-demo .kh-peek .kit-feature.is-tall{ height:138px; }
.gk-demo .cl-duo .kit-tile, .gk-demo .kh-peek .kit-tile{ flex-basis:calc(124px * var(--kit-scale)); }
.gk-demo .cl-duo .kit-tile-img, .gk-demo .kh-peek .kit-tile-img{ aspect-ratio:1.35; }
.gk-demo .ct-genui .kit-phone{ width:206px; height:424px; --kit-scale:0.5; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 64px -22px rgba(10,20,50,.5), 0 0 50px rgba(94,134,255,.2), 0 0 0 6px #0c0e12, 0 0 0 7px #2a2d34; }
.gk-demo .ct-genui .kit-phone-island{ width:54px; height:17px; top:8px; }
.gk-demo .ct-genui .kit-statusbar{ flex:none; padding:9px 14px 0; }
.gk-demo .ct-genui .kit-statusbar .time{ font-size:10px; }
.gk-demo .ct-genui .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:8px 9px 4px; overflow:hidden; position:relative; }
.gk-demo .ct-genui .kit-screen > *{ flex:none; }
.gk-demo .ct-genui .kit-feature{ height:86px; }
.gk-demo .ct-genui .kit-feature.is-tall{ height:100px; }
.gk-demo .ct-genui .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:4px 8px 9px; }
@keyframes pkDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(34px,22px,0) scale(1.07); } }
@keyframes sweepMove{ from{ transform:translateX(-115%); } to{ transform:translateX(215%); } }
.gk-demo .cl-phonewrap .kit-phone{ width:300px; height:624px; --kit-scale:0.74; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px -22px rgba(0,0,0,.62),0 0 64px rgba(94,134,255,.24),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
.gk-demo .cl-phonewrap .kit-phone-island{ width:78px; height:24px; top:11px; }
.gk-demo .cl-phonewrap .kit-statusbar{ flex:none; padding:13px 19px 0; }
.gk-demo .cl-phonewrap .kit-statusbar .time{ font-size:13px; }
.gk-demo .cl-phonewrap .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
.gk-demo .cl-phonewrap .kit-screen > *{ flex:none; }
.gk-demo .cl-phonewrap .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
.gk-demo .cl-phonewrap .hs-top{ display:flex; align-items:center; gap:10px; }
.gk-demo .cl-phonewrap .hs-top .kit-avatar{ width:40px; height:40px; }
.gk-demo .cl-phonewrap .hs-top b{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
.gk-demo .cl-phonewrap .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:10px; color:var(--kit-ink-2); margin-top:2px; }
.gk-demo .cl-phonewrap .hs-gav{ width:40px; height:40px; border-radius:50%; background:var(--kit-fill-strong); display:grid; place-items:center; color:var(--kit-ink-3); flex:none; }
.gk-demo .cl-phonewrap .hs-gav .kit-ic{ font-size:21px; }
.gk-demo .cl-phonewrap .hs-lab{ font-family:var(--kit-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); }
.gk-demo .cl-phonewrap .hs-metrics{ display:flex; gap:calc(7px * var(--kit-scale)); }
.gk-demo .cl-phonewrap .kit-feature{ height:124px; }
.gk-demo .cl-phonewrap .kit-feature.is-tall{ height:138px; }
.gk-demo .cl-phonewrap .kit-tile{ flex-basis:calc(124px * var(--kit-scale)); }
.gk-demo .cl-phonewrap .kit-tile-img{ aspect-ratio:1.35; }
@keyframes cdArrowPop{ 0%{ transform:translateY(-50%) scale(0); opacity:0; } 55%{ transform:translateY(-50%) scale(1.16); opacity:1; } 78%{ transform:translateY(-50%) scale(.94); } 100%{ transform:translateY(-50%) scale(1); opacity:1; } }
.gk-demo .cd-tv-act .kit-ic{ font-size:22px; }
.gk-demo .cd-nav .kit-ic{ font-size:18px; }
.gk-demo .cd-search .kit-ic{ font-size:16px; }
.gk-demo .cd-phone-wrap .kit-phone{ width:300px; height:624px; --kit-scale:0.74; position:relative; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 70px -22px rgba(0,0,0,.5),0 0 0 7px #0c0e12,0 0 0 8px #2a2d34; }
.gk-demo .cd-phone-wrap .kit-phone-island{ width:78px; height:24px; top:11px; }
.gk-demo .cd-phone-wrap .kit-statusbar{ flex:none; padding:13px 19px 0; }
.gk-demo .cd-phone-wrap .kit-statusbar .time{ font-size:13px; }
.gk-demo .cd-phone-wrap .kit-screen{ flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(14px * var(--kit-scale)); padding:11px 12px 4px; overflow:hidden; position:relative; }
.gk-demo .cd-phone-wrap .kit-screen > *{ flex:none; }
.gk-demo .cd-phone-wrap .kit-nav{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:5px 11px 12px; }
.gk-demo .cd-phone-wrap .hs-top{ display:flex; align-items:center; gap:10px; }
.gk-demo .cd-phone-wrap .hs-top .kit-avatar{ width:40px; height:40px; }
.gk-demo .cd-phone-wrap .hs-top b{ font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--kit-ink); display:block; line-height:1.2; }
.gk-demo .cd-phone-wrap .hs-top s{ display:block; text-decoration:none; font-family:var(--kit-mono); font-size:10px; color:var(--kit-ink-2); margin-top:2px; }
.gk-demo .cd-phone-wrap .hs-lab{ font-family:var(--kit-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--kit-ink-2); margin:calc(7px * var(--kit-scale)) 0 calc(-2px * var(--kit-scale)); }
.gk-demo .cd-phone-wrap .kit-feature{ height:124px; }
.gk-demo .cd-phone-wrap .kit-feature.is-tall{ height:138px; }
@keyframes ucFront{ from{ opacity:0; } to{ opacity:1; } }
.gk-demo .uc-body.uc-kit .kit-balance{ box-shadow:0 10px 24px -12px rgba(10,21,48,.45); margin-bottom:10px; padding:10px 12px; }
.gk-demo .uc-body.uc-kit .kit-balance-amt{ font-size:15px; margin-top:2px; }
.gk-demo .uc-body.uc-kit .kit-balance-delta{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:4px; }
.gk-demo .uc-body.uc-kit .kit-balance-delta svg{ margin-right:3px; vertical-align:-1px; }
.gk-demo .uc-body.uc-kit .hs-metrics{ margin-bottom:12px; }
.gk-demo .uc-body.uc-kit .kit-metric{ padding:7px 5px 6px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kit-accent) 12%, transparent); }
.gk-demo .uc-body.uc-kit .kit-metric s{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gk-demo .uc-body.uc-kit .kit-metric b, .gk-demo .uc-body.uc-kit .kit-metric s{ white-space:nowrap; text-align:center; align-self:center; }
.gk-demo .uc-body.uc-kit .kit-metric s{ text-transform:uppercase; letter-spacing:.04em; font-size:6.5px; margin-top:2px; }
.gk-demo .uc-body.uc-kit .kit-card{ padding:10px 12px 0; margin-bottom:12px; background:color-mix(in srgb, var(--kit-accent) 6%, var(--kit-bg)); }
.gk-demo .uc-body.uc-kit .kit-card .hs-lab{ display:flex; justify-content:space-between; align-items:baseline; }
.gk-demo .uc-body.uc-kit .kit-spark{ height:46px; margin:5px -12px 0; width:calc(100% + 24px); }
.gk-demo .uc-body.uc-kit .kit-row{ padding:5px 0; }
.gk-demo .uc-body.uc-kit .kit-row-lead{ background:color-mix(in srgb, var(--kit-accent) 8%, var(--kit-bg)); color:var(--kit-accent-ink); }
.gk-demo .uc-body.uc-kit .kit-row-lead .kit-ic{ font-size:12px; }
.gk-demo .uc-body.uc-kit .hs-lab{ font-size:7px; letter-spacing:.1em; }
@keyframes tmOrb{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(36%,32%) scale(1.18); }
  }
.gk-demo .uc-body.uc-kit .kit-feature{ height:80px; flex:none; margin-bottom:12px; }
.gk-demo .uc-body.uc-kit .kit-feature.is-tall{ height:120px; }
.gk-demo .uc-body.uc-kit .kit-feature-ov{ padding:9px 11px 10px; }
.gk-demo .uc-body.uc-kit .kit-feature-ov h3{ font-size:12.5px; }
.gk-demo .uc-body.uc-kit .kit-feature-sub{ font-size:7.5px; margin-top:3px; }
.gk-demo .uc-body.uc-kit .kit-timeline{ height:24px; margin:7px 0 3px; }
.gk-demo .uc-body.uc-kit .kit-timeline-line{ top:4px; }
.gk-demo .uc-body.uc-kit .kit-timeline-dot{ width:7px; height:7px; top:1px; box-shadow:0 0 0 2px rgba(6,12,26,.35); }
.gk-demo .uc-body.uc-kit .kit-timeline-dot.is-on{ width:9px; height:9px; top:0; }
.gk-demo .uc-body.uc-kit .kit-timeline-lab{ font-size:6.5px; top:12px; letter-spacing:.03em; }
.gk-demo .uc-body.uc-kit .kit-tile-row{ --kit-screen-pad:14px; margin-bottom:12px; }
.gk-demo .uc-body.uc-kit .kit-tile{ flex-basis:96px; }
.gk-demo .uc-body.uc-kit .kit-tile-img{ aspect-ratio:1.5; }
.gk-demo .uc-body.uc-kit .kit-tile-info{ padding:7px 8px 8px; }
.gk-demo .uc-body.uc-kit .kit-pass{ margin-bottom:12px; }
.gk-demo .uc-body.uc-kit .kit-pass-main{ padding:11px 12px; }
.gk-demo .uc-body.uc-kit .kit-pass-main b{ font-size:13px; margin-top:3px; }
.gk-demo .uc-body.uc-kit .kit-pass-bars{ width:5px; }
.gk-demo .uc-body.uc-kit .kit-tier-row{ margin-bottom:12px; }
.gk-demo .uc-body.uc-kit .kit-tier{ padding:9px 6px; }
.gk-demo .uc-body.uc-kit .hs-lab{ margin:0 0 7px; }
@keyframes amIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }