Add GET API KEY button to setup screen, enlarge demo mode link

- Add secondary .btn-s (cyan outline) button above ENTER VIDFLOW that opens the API key guide modal
- Simplify the hint text — the button makes the action self-evident
- Increase .sp-skip font-size 11px → 13px, brighten demo mode link color
- Wire #get-key-btn in initApiGuide() alongside existing #api-guide-btn

Co-Authored-By: claude-flow <ruv@ruv.net>

vidflow.html

@@ -36,13 +36,15 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil
 .sp-hint a{color:var(--accent2);text-decoration:none}
 .sp-hint a:hover{text-decoration:underline}
 .btn-p{width:100%;background:var(--accent);color:#fff;border:none;font-family:var(--font-d);font-size:22px;letter-spacing:3px;padding:14px;cursor:pointer;transition:.15s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
+.btn-s{width:100%;background:transparent;color:var(--accent2);border:1px solid rgba(0,212,255,.35);font-family:var(--font-d);font-size:18px;letter-spacing:3px;padding:11px;cursor:pointer;transition:.15s;margin-bottom:10px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
+.btn-s:hover{background:rgba(0,212,255,.09);border-color:var(--accent2)}
 .btn-p:hover{background:#ff4422;transform:translateY(-1px)}
 .btn-p:active{transform:translateY(0)}
 .btn-p:disabled{opacity:.5;cursor:default;transform:none}
 .sp-err{color:#ff6644;font-size:11px;margin-top:10px;min-height:16px;text-align:center;letter-spacing:1px}
-.sp-skip{text-align:center;margin-top:14px;font-size:11px;color:var(--dim);letter-spacing:.5px}
+.sp-skip{text-align:center;margin-top:16px;font-size:13px;color:var(--dim);letter-spacing:.3px}
-.sp-skip a{color:rgba(255,255,255,.28);cursor:pointer;text-decoration:underline}
+.sp-skip a{color:rgba(255,255,255,.45);cursor:pointer;text-decoration:underline}
-.sp-skip a:hover{color:var(--dim)}
+.sp-skip a:hover{color:var(--text)}
 
 /* ── APP ── */
 #app{position:fixed;inset:0;display:none;flex-direction:column}
@@ -283,11 +285,8 @@ body.idle .gt,body.idle .gb,body.idle .gr,body.idle .gl{opacity:0;transition:opa
     <div class="sp-sub">Music Video Television</div>
     <div class="sp-label">YouTube Data API v3 Key</div>
     <input id="api-in" class="sp-input" type="text" placeholder="AIzaSy..." autocomplete="off" spellcheck="false">
-    <div class="sp-hint">
+    <div class="sp-hint">A free YouTube API key lets VidFlow search playlists. Takes about 60 seconds to get.</div>
-      A free YouTube API key lets VidFlow search playlists.<br>
+    <button class="btn-s" id="get-key-btn">&#128273; GET API KEY</button>
-      <a href="https://console.cloud.google.com/marketplace/product/google/youtube.googleapis.com" target="_blank" rel="noopener">Get your key here</a> &mdash;
-      <a id="api-guide-btn" style="cursor:pointer;color:var(--accent2);text-decoration:underline">What's an API key?</a>
-    </div>
     <button class="btn-p" id="setup-btn">ENTER VIDFLOW</button>
     <div class="sp-err" id="sp-err"></div>
     <div class="sp-skip">No key? <a id="skip-btn">Demo mode</a> (search disabled, add by URL works)</div>
@@ -914,6 +913,8 @@ function initApiGuide(){
   const hide=()=>{ guide.style.display='none'; };
   const btn=qs('#api-guide-btn');
   if(btn) btn.onclick=show;
+  const getKeyBtn=qs('#get-key-btn');
+  if(getKeyBtn) getKeyBtn.onclick=show;
   qs('#api-guide-close').onclick=hide;
   qs('#api-guide-close2').onclick=hide;
   guide.onclick=e=>{ if(e.target===guide) hide(); };