:root{--navy: #1a1a2e;--navy-mid: #16213e;--yellow: #f5d623;--orange: #f5a623;--white: #ffffff;--ink: #1a1a2e;--border: 3px solid #1a1a2e;--shadow: 5px 5px 0px #1a1a2e;--shadow-sm: 3px 3px 0px #1a1a2e;--radius: 10px;--dur-micro: .2s;--dur-enter: .5s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--navy);color:var(--white);font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle,rgba(245,214,35,.07) 1px,transparent 1px);background-size:22px 22px}.page-wrap{max-width:780px;margin:0 auto;padding:0 20px 60px}.hero{text-align:center;padding:64px 0 48px;animation:fadeUp var(--dur-enter) var(--ease-out) both}.hero__icon-wrap{display:inline-block;border:var(--border);border-radius:20px;box-shadow:var(--shadow);margin-bottom:28px;animation:float 3.6s ease-in-out infinite;overflow:hidden}.hero__icon-wrap img{display:block}.hero__badge{display:inline-block;background:var(--orange);color:var(--ink);font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border:2px solid var(--ink);border-radius:30px;box-shadow:var(--shadow-sm);margin-bottom:20px}.hero__title{font-size:clamp(2.4rem,8vw,4rem);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:var(--yellow);text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink);margin-bottom:14px}.hero__tagline{font-size:clamp(1.1rem,3.5vw,1.4rem);font-weight:700;color:var(--orange);margin-bottom:18px}.hero__desc{font-size:clamp(.9rem,2.5vw,1.05rem);color:#ffffffbf;max-width:520px;margin:0 auto;line-height:1.65}.divider{display:flex;align-items:center;gap:14px;margin:44px 0 36px}.divider__line{flex:1;height:3px;background:repeating-linear-gradient(90deg,var(--yellow) 0px,var(--yellow) 8px,transparent 8px,transparent 14px);border-radius:2px}.divider__label{font-size:.75rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);white-space:nowrap}.cards{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:600px){.cards{grid-template-columns:1fr 1fr}}.card{background:var(--navy-mid);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px 22px;animation:fadeUp var(--dur-enter) var(--ease-out) both;transition:transform var(--dur-micro) var(--ease-bounce),box-shadow var(--dur-micro) ease}.card:nth-child(1){animation-delay:.12s}.card:nth-child(2){animation-delay:.22s}.card:hover{transform:translate(-2px,-3px);box-shadow:7px 7px 0 var(--ink)}.card__header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.card__pill{font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border:2px solid var(--ink);border-radius:30px}.card__pill--cli{background:var(--yellow);color:var(--ink)}.card__pill--url{background:var(--orange);color:var(--ink)}.card__title{font-size:1rem;font-weight:800;color:var(--white)}.code-block{background:var(--navy);border:2px solid rgba(245,214,35,.35);border-radius:8px;padding:14px 16px;position:relative;overflow:hidden}.code-block code{display:block;font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:clamp(.67rem,2vw,.8rem);color:#e2e8f0;word-break:break-all;white-space:pre-wrap;line-height:1.6}.code-block:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--yellow);border-radius:8px 0 0 8px}.copy-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 14px;background:var(--yellow);color:var(--ink);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--ink);border-radius:6px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--dur-micro) var(--ease-bounce),box-shadow var(--dur-micro) ease,background var(--dur-micro) ease}.copy-btn:hover{transform:translate(-1px,-2px);box-shadow:4px 4px 0 var(--ink)}.copy-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}.copy-btn.copied{background:#4ade80;animation:pop var(--dur-micro) var(--ease-bounce)}.connector-url{background:var(--navy);border:2px solid rgba(245,166,35,.4);border-radius:8px;padding:14px 16px;position:relative}.connector-url:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange);border-radius:8px 0 0 8px}.connector-url__text{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:clamp(.67rem,2vw,.78rem);color:#f0c060;word-break:break-all}.connector-note{font-size:.78rem;color:#ffffff8c;margin-top:10px;line-height:1.5}.connector-note strong{color:var(--orange);font-weight:700}.footer{text-align:center;margin-top:56px;padding-top:28px;border-top:3px dashed rgba(245,214,35,.25);animation:fadeUp var(--dur-enter) var(--ease-out) .3s both}.footer__gemini{font-size:.8rem;color:#ffffff73;letter-spacing:.06em;margin-bottom:10px}.footer__github{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--yellow);text-decoration:none;border-bottom:2px solid transparent;transition:border-color var(--dur-micro) ease}.footer__github:hover{border-color:var(--yellow)}@keyframes fadeUp{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08) translate(-1px,-2px)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-delay:1ms!important;transition-duration:1ms!important}}