:root{--gg-mist: #4FA3B5;--gg-lavender: #7D74D4;--gg-mauve: #A673B8;--gg-coral: #D0708E;--gg-paper: #EFECE6;--gg-night: #121119;--gg-orange: var(--gg-coral);--gg-violet: var(--gg-lavender);--gg-signal: var(--gg-coral);--color-success: #4E9C7E;--color-warning: #C9913F;--color-danger: #C85A74;--color-info: #4FA3B5;--font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-sans: var(--font-body);--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, Menlo, monospace;--font-pixel: "Silkscreen", "JetBrains Mono", monospace;--font-jp: "Noto Sans JP", sans-serif;--tracking-display: -.03em;--tracking-tight: -.02em;--tracking-mono: .06em;--tracking-jp: .14em;--tracking-eyebrow: .12em;--text-display: 64px;--text-h1: 44.8px;--text-h2: 28px;--text-h3: 22px;--text-h4: 18px;--text-lead: 18px;--text-body-size: 15px;--text-sm: 13px;--text-mono: 12.5px;--text-mono-sm: 11px;--text-pixel: 10px;--text-hud: 64px;--leading-display: 1.05;--leading-heading: 1.2;--leading-body: 1.6;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-extrabold: 800;--weight-black: 900;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-24: 96px;--content-max: 1200px;--content-max-width: 1200px;--dock-width: 78px;--dock-offset: 116px;--dock-height: 56px;--grid-gap: 20px;--grid-cell: 24px;--radius-xs: 2px;--radius-sm: 4px;--radius-icon: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-bento: 10px;--radius-dock: 12px;--radius-full: 9999px;--px: 2px;--blur-glass: 0px;--blur-dock: 0px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out-sine: cubic-bezier(.45, 0, .55, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-whip: cubic-bezier(.7, 0, .2, 1);--ease-in-expo: cubic-bezier(.7, 0, .84, 0);--ease-pixel: steps(6, end);--ease-pixel-fine: steps(12, end);--dur-fast: .15s;--dur-base: .3s;--dur-reveal: .7s;--dur-whip: .5s;--dur-morph: .7s;--dur-stack: 1.2s;--stagger: 60ms;--blur-motion: 14px;--perspective-stage: 1100px}:root,html.light-mode,.light-mode{--bg: #EFECE6;--surface: #F8F6F2;--surface-2: #E7E3DC;--surface-glass: rgba(248, 246, 242, .94);--surface-hover: #FFFFFF;--ink: #1B1A22;--ink-2: #5A5866;--ink-3: #7E7B8A;--ink-mute: #9C99A6;--line: rgba(27, 26, 34, .11);--line-strong: rgba(27, 26, 34, .19);--line-accent: rgba(125, 116, 212, .42);--c1: #4FA3B5;--c2: #7D74D4;--cx: #A673B8;--c3: #D0708E;--accent: #7D74D4;--accent-hover: #6A60C4;--accent-ink: #5B52B0;--accent-glow: rgba(125, 116, 212, .22);--on-accent: #FFFFFF;--grid-line: rgba(27, 26, 34, .055);--shadow-card: 0 1px 0 rgba(27, 26, 34, .06), 4px 4px 0 rgba(27, 26, 34, .07);--shadow-dock: 0 0 0 2px var(--line-strong), 4px 4px 0 var(--line);--shadow-glow: 0 0 0 3px var(--accent-glow);--shadow-logo: none;--shadow-btn: 3px 3px 0 color-mix(in oklch, var(--ink) 18%, transparent);--shadow-modal: 6px 6px 0 color-mix(in oklch, var(--ink) 14%, transparent), 0 0 0 1px var(--line-strong);--shadow-pixel: 4px 4px 0 var(--line-strong);--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);--gradient-accent: linear-gradient(90deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);--gradient-logo: var(--gradient-accent);--gradient-filament: linear-gradient(90deg, var(--c1), var(--c2), var(--cx), var(--c3));--gradient-banded: linear-gradient(90deg, #4FA3B5 0 12.5%, #5D95BE 0 25%, #6B87C8 0 37.5%, #7D74D4 0 50%, #9173C6 0 62.5%, #A673B8 0 75%, #BB71A3 0 87.5%, #D0708E 0);--glow-flow: linear-gradient(90deg, var(--c1), var(--c2), var(--cx), var(--c3), var(--cx), var(--c2), var(--c1));--scanline-opacity: 0;color-scheme:light;--bg-color: var(--bg);--bg-elev: var(--surface-2);--bg-card: var(--surface);--bg-card-glass: var(--surface-glass);--bg-card-hover: var(--surface-hover);--border-color: var(--line);--border-highlight: var(--line-accent);--text-primary: var(--ink);--text-secondary: var(--ink-2);--text-muted: var(--ink-mute);--accent-solid: var(--accent);--accent-solid-accessible: var(--accent-ink);--accent-secondary: var(--c1);--accent-signal: var(--c3);--accent-gradient: var(--gradient-accent);--card-shadow: var(--shadow-card)}html.dark-mode,.dark-mode{--bg: #121119;--surface: #1B1A25;--surface-2: #23212F;--surface-glass: rgba(27, 26, 37, .94);--surface-hover: #22202D;--ink: #ECE9F2;--ink-2: #A9A6B8;--ink-3: #86839A;--ink-mute: #6E6B7E;--line: rgba(236, 233, 242, .11);--line-strong: rgba(236, 233, 242, .19);--line-accent: rgba(149, 140, 235, .45);--c1: #6CC0CF;--c2: #958CEB;--cx: #BC8ACD;--c3: #E58AA6;--accent: #958CEB;--accent-hover: #A9A1F2;--accent-ink: #ADA5F5;--accent-glow: rgba(149, 140, 235, .28);--on-accent: #121119;--grid-line: rgba(236, 233, 242, .045);--shadow-card: 0 1px 0 rgba(0, 0, 0, .4), 4px 4px 0 rgba(0, 0, 0, .35);--shadow-dock: 0 0 0 2px var(--line-strong), 4px 4px 0 rgba(0, 0, 0, .45);--shadow-glow: 0 0 0 3px var(--accent-glow);--shadow-btn: 3px 3px 0 rgba(0, 0, 0, .5);--shadow-modal: 6px 6px 0 rgba(0, 0, 0, .5), 0 0 0 1px var(--line-strong);--shadow-pixel: 4px 4px 0 var(--line-strong);--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);--gradient-banded: linear-gradient(90deg, #6CC0CF 0 12.5%, #78B0D9 0 25%, #859FE2 0 37.5%, #958CEB 0 50%, #A88BDC 0 62.5%, #BC8ACD 0 75%, #D08ABA 0 87.5%, #E58AA6 0);--gradient-accent: linear-gradient(90deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);--gradient-logo: var(--gradient-accent);--gradient-filament: linear-gradient(90deg, var(--c1), var(--c2), var(--cx), var(--c3));--glow-flow: linear-gradient(90deg, var(--c1), var(--c2), var(--cx), var(--c3), var(--cx), var(--c2), var(--c1));--scanline-opacity: .18;color-scheme:dark;--bg-color: var(--bg);--bg-elev: var(--surface-2);--bg-card: var(--surface);--bg-card-glass: var(--surface-glass);--bg-card-hover: var(--surface-hover);--border-color: var(--line);--border-highlight: var(--line-accent);--text-primary: var(--ink);--text-secondary: var(--ink-2);--text-muted: var(--ink-mute);--accent-solid: var(--accent);--accent-solid-accessible: var(--accent-ink);--accent-secondary: var(--c1);--accent-signal: var(--c3);--accent-gradient: var(--gradient-accent);--card-shadow: var(--shadow-card)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--bg);background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font-family:var(--font-body);line-height:1.6;overflow-x:hidden;min-height:100vh;position:relative;padding-bottom:max(100px,calc(80px + env(safe-area-inset-bottom,20px)))}html.dark-mode body:after,.dark-mode .lab-bg:after,.dark-mode.lab-bg:after,.scanlines:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,rgba(0,0,0,var(--scanline-opacity, .16)) 0 1px,transparent 1px 3px)}a{color:var(--accent-ink);text-decoration:none}a:hover{color:var(--c3)}::selection{background:var(--accent-glow);color:var(--ink)}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.font-pixel{font-family:var(--font-pixel)}.font-jp{font-family:var(--font-jp)}.lab-bg,.noir-bg{background-color:var(--bg);background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);position:relative}.dot-grid{background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);background-size:12px 12px}.px-frame{clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 6px),0 calc(100% - 6px),0 6px,2px 6px,2px 2px,6px 2px)}.px-card,.glass-card{background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 6px),0 calc(100% - 6px),0 6px,2px 6px,2px 2px,6px 2px)}.glass-card-hover{transition:background var(--dur-fast) steps(2)}.glass-card-hover:hover{background:var(--surface-hover);box-shadow:inset 0 0 0 2px var(--line-accent)}.glass-dock{background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 6px),0 calc(100% - 6px),0 6px,2px 6px,2px 2px,6px 2px)}.gg-logo{display:inline-block;width:44px;height:17px;background:url(/brand/gjg-pixel.svg) center / contain no-repeat;image-rendering:pixelated}html.dark-mode .gg-logo,.dark-mode .gg-logo,.dark-mode.gg-logo{background-image:url(/brand/gjg-pixel-dark.svg)}.gradient-text{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.fuse{background:var(--gradient-accent)}.fuse-banded{background:var(--gradient-banded)}.dither{--dither-size: 4px;background-color:var(--dither-b, var(--c2));background-image:conic-gradient(var(--dither-a, var(--c1)) 25%,transparent 0 50%,var(--dither-a, var(--c1)) 0 75%,transparent 0);background-size:calc(var(--dither-size) * 2) calc(var(--dither-size) * 2);image-rendering:pixelated}.dashed-filament,.px-rule{border:0;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 4px,transparent 4px 8px)}.telemetry{font:500 11px var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink-mute)}.jp-label{font:400 11px var(--font-jp);letter-spacing:var(--tracking-jp);color:var(--ink-mute)}.hud{font-family:var(--font-pixel);line-height:.8;letter-spacing:.01em}.px-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;font:400 10px var(--font-pixel);line-height:1;white-space:nowrap;text-transform:uppercase;background:color-mix(in oklch,var(--ink) 7%,transparent);color:var(--ink-2)}.px-badge:before{content:"";width:6px;height:6px;background:currentColor;flex-shrink:0}.px-badge.mist{background:color-mix(in oklch,var(--c1) 16%,transparent);color:color-mix(in oklch,var(--c1) 60%,var(--ink))}.px-badge.lavender{background:color-mix(in oklch,var(--c2) 16%,transparent);color:color-mix(in oklch,var(--c2) 60%,var(--ink))}.px-badge.coral{background:color-mix(in oklch,var(--c3) 16%,transparent);color:color-mix(in oklch,var(--c3) 60%,var(--ink))}.px-badge.fuse{background:var(--gradient-accent);color:var(--on-accent)}.px-badge.fuse:before{display:none}.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:0!important;background:var(--c1);box-shadow:0 0 0 3px color-mix(in oklch,var(--c1) 22%,transparent);animation:pxBlink 1.2s steps(1) infinite}@keyframes pxBlink{50%{opacity:.35}}.laser-sweep{position:relative;overflow:hidden}.laser-sweep:after{display:none!important}.glow-orb,.labs-glow-orb{display:none!important}.gg-rise{animation:ggRise .7s var(--ease-out-expo) both;animation-delay:calc(var(--i, 0) * var(--stagger))}@keyframes ggRise{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.gg-step-in{animation:ggStepIn .6s var(--ease-pixel) both;animation-delay:calc(var(--i, 0) * var(--stagger))}@keyframes ggStepIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.gg-hop{animation:ggHop 1.8s steps(1,end) infinite;animation-delay:calc(var(--i, 0) * .6s)}@keyframes ggHop{0%,45%,to{transform:translateY(0)}9%{transform:translateY(-10px)}18%{transform:translateY(-16px)}27%{transform:translateY(-10px)}36%{transform:translateY(-4px)}}.gg-caret:after{content:"";display:inline-block;width:.08em;height:.9em;margin-left:.04em;background:currentColor;vertical-align:-.08em;animation:ggCaret .9s steps(1) infinite}@keyframes ggCaret{50%{opacity:0}}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex="0"]:focus-visible{outline:none!important;box-shadow:var(--focus-ring)!important;border-radius:var(--radius-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.card-cover-wrapper:after,.laser-sweep:after,.pulse-dot{animation:none!important}}:root{--badge-bg: color-mix(in oklch, var(--c2) 14%, transparent);--badge-text: var(--accent-ink)}body{background-color:var(--bg);color:var(--ink);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;position:relative;padding-left:var(--dock-offset, 116px)}@media(max-width:900px){body{padding-left:0;padding-bottom:80px}}header{position:relative;z-index:10;max-width:1400px;margin:0 auto;padding:40px 20px;display:flex;justify-content:space-between;align-items:center}.logo{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-decoration:none}.logo span{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.theme-label{font-family:var(--font-pixel);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-ink);border:1px solid var(--line-accent);padding:4px 10px;border-radius:0;background:color-mix(in oklch,var(--c2) 14%,transparent)}main{position:relative;z-index:10;max-width:1400px;margin:0 auto;padding:0 20px}.hero{margin:60px 0 80px;text-align:center}.badge{display:inline-flex;align-items:center;gap:6px;background:var(--badge-bg);color:var(--badge-text);padding:4px 12px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:var(--tracking-mono);text-transform:uppercase;margin-bottom:20px;border:1px solid var(--line-accent)}.hero h1{font-family:var(--font-display);font-size:56px;font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-bottom:24px}.gradient-text{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero p{font-size:17px;color:var(--ink-2);max-width:650px;margin:0 auto;line-height:1.65}.section-title{font-family:var(--font-display);font-size:28px;font-weight:800;margin-top:80px;margin-bottom:32px;letter-spacing:-.02em;border-left:4px solid var(--accent);padding-left:16px}.grid-components{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-bottom:80px}.card{background-color:var(--surface);border:none;border-radius:0;padding:32px;transition:background var(--dur-fast) steps(2),box-shadow var(--dur-fast) steps(2),transform var(--dur-fast) steps(2);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 2px var(--line);clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 6px),0 calc(100% - 6px),0 6px,2px 6px,2px 2px,6px 2px)}.card:hover{transform:translateY(-3px);background-color:var(--surface-hover);box-shadow:inset 0 0 0 2px var(--line-accent)}.card-badge{font-family:var(--font-mono);font-size:11px;color:var(--accent-ink);text-transform:uppercase;letter-spacing:var(--tracking-mono);margin-bottom:12px;display:block;font-weight:600}.card h3{font-family:var(--font-display);font-size:22px;margin-bottom:12px;font-weight:800;color:var(--ink)}.card p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin-bottom:24px;flex-grow:1}.tech-stack{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.tech-tag{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);padding:4px 10px;border-radius:var(--radius-xs);color:var(--ink-2);border:1px solid var(--line-strong)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gradient-accent);color:var(--on-accent);font-family:var(--font-display);font-weight:700;padding:12px 24px;border-radius:var(--radius-sm);text-decoration:none;font-size:14px;transition:all .12s steps(2,end);border:none;cursor:pointer;width:100%;text-align:center;box-shadow:var(--shadow-btn)}.btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line-strong)}.btn-outline{background:var(--surface);border:2px solid var(--line-strong);color:var(--ink);box-shadow:var(--shadow-btn)}.btn-outline:hover{background:var(--surface-hover);border-color:var(--accent);color:var(--accent-ink)}footer{text-align:center;padding:60px 20px;border-top:2px dashed var(--line-strong);color:var(--ink-mute);font-family:var(--font-mono);font-size:12px;margin-top:100px}
