:root {
  --ink: #252524;
  --muted: #696861;
  --cream: #fffbe5;
  --paper: #fffef8;
  --line: #dedbc9;
  --yellow: #ffd936;
  --orange: #ff7a3d;
  --purple: #7657e8;
  --blue: #2a75e8;
  --green: #15966a;
  --shadow: 0 14px 34px rgba(49, 45, 28, .1);
}

* { box-sizing: border-box; }
html { width: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { width: 100%; min-width: 0; margin: 0; color: var(--ink); background: var(--cream); font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; line-height: 1.75; overflow-x: hidden; }
main, section { display: block; width: 100%; min-width: 0; }
img, svg, video, iframe { max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; transform: translateY(-150%); background: #111; color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }

.site-header { height: 74px; padding: 0 clamp(18px, 4vw, 64px); display: flex; align-items: center; gap: 36px; position: fixed; inset: 0 0 auto; z-index: 100; background: rgba(255,255,255,.95); backdrop-filter: blur(13px); border-bottom: 1px solid rgba(37,37,36,.1); box-shadow: 0 3px 14px rgba(0,0,0,.05); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; line-height: 1.1; margin-right: auto; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; color: #fff; font-size: 19px; font-weight: 900; background: linear-gradient(135deg, var(--orange), var(--purple)); border-radius: 12px 5px 12px 5px; transform: rotate(-4deg); }
.brand strong { display: block; font-size: 15px; letter-spacing: .03em; }
.brand small { display: block; color: #777; font-size: 10px; margin-top: 5px; letter-spacing: .06em; }
.header-nav { display: flex; gap: 28px; }
.header-nav a { font-size: 13px; font-weight: 700; text-decoration: none; }
.header-nav a:hover { color: var(--purple); }
.back-home{min-height:38px;padding:7px 12px;display:inline-flex;align-items:center;color:#44423d;background:#f6f3e7;border:1px solid #d8d3c3;border-radius:9px;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap;transition:background .2s,border-color .2s}.back-home:hover{background:#fff5c3;border-color:#d7b937}
.header-cta { background: var(--ink); color: #fff; padding: 9px 18px; font-weight: 800; font-size: 13px; text-decoration: none; border-radius: 9px; }

.hero { min-height: 690px; padding: 150px max(6vw, 24px) 90px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); align-items: center; gap: 5vw; border-bottom: 1px solid var(--line); background-image: linear-gradient(rgba(122,111,71,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(122,111,71,.07) 1px, transparent 1px); background-size: 32px 32px; }
.hero::after { content: ""; position: absolute; width: 500px; height: 500px; right: -190px; top: -180px; border: 90px solid rgba(255,217,54,.32); border-radius: 50%; }
.hero-inner { width: 100%; max-width: 720px; min-width: 0; position: relative; z-index: 2; }
.eyebrow, .kicker { margin: 0 0 18px; color: var(--orange); font-size: 13px; font-weight: 900; letter-spacing: .13em; }
.eyebrow span { padding: 6px 10px; margin-right: 8px; color: #fff; background: var(--orange); border-radius: 5px; letter-spacing: .04em; }
.hero h1 { max-width: 100%; min-width: 0; margin: 0; font-size: clamp(40px, 5vw, 70px); line-height: 1.2; letter-spacing: -.045em; overflow-wrap: anywhere; }
.hero h1 em { font-style: normal; background: linear-gradient(95deg, #f15c30, #8252e8 65%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { max-width: 660px; margin: 25px 0 30px; color: #53514b; font-size: clamp(15px, 1.3vw, 18px); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 52px; padding: 12px 22px; display: inline-flex; justify-content: center; align-items: center; gap: 14px; border-radius: 10px; font-weight: 900; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--yellow); }
.button-secondary { background: #fff; border: 1px solid #c9c5ae; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 30px 0 0; list-style: none; color: #5f5d55; font-size: 12px; font-weight: 700; }
.hero-notes span { color: var(--green); font-weight: 900; }
.hero-visual { height: 430px; max-width: 570px; width: 100%; min-width: 0; justify-self: center; position: relative; z-index: 2; }
.mini-window { position: absolute; width: 76%; height: 290px; left: 12%; top: 25px; background: #fff; border: 2px solid var(--ink); border-radius: 15px; box-shadow: 14px 16px 0 rgba(37,37,36,.12); overflow: hidden; transform: rotate(1.5deg); }
.window-bar { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 14px; color: #7d7b73; font-size: 10px; background: #f4f2e8; border-bottom: 1px solid #ddd9c5; }
.window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b5c; }.window-bar i:nth-child(2){background:#ffd23f}.window-bar i:nth-child(3){background:#55c988}.window-bar span{margin:auto}
.window-content { height: calc(100% - 42px); padding: 48px 20%; background: radial-gradient(circle at 80% 20%, #eadfff, transparent 40%), #fff; }
.demo-badge { width: max-content; margin: 0 auto 22px; padding: 4px 9px; border: 1px solid #805bec; color: #805bec; border-radius: 20px; font-size: 8px; font-weight: 900; }
.demo-title { height: 12px; margin: 8px auto; background: #333; border-radius: 9px; }.demo-title.short{width:70%}.demo-button{width:82px;height:30px;margin:25px auto;background:#7856e8;border-radius:6px}
.service-pill { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 4px 5px 0 rgba(37,37,36,.13); line-height: 1.15; font-size: 9px; }
.service-pill b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 16px; color: #fff; }.service-pill strong{font-size:12px}.ai-pill{left:0;bottom:44px}.ai-pill b{background:linear-gradient(135deg,#3984f5,#da4ae7)}.git-pill{left:38%;bottom:5px}.git-pill b{background:#24292f}.vercel-pill{right:0;bottom:54px}.vercel-pill b{background:#000}
.flow-arrow { position: absolute; bottom: 66px; font-weight: 900; color: #85827a; }.arrow-one{left:31%}.arrow-two{right:26%;bottom:70px}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); }.orb-one{width:20px;height:20px;background:var(--purple);left:46%;top:135px}.orb-two{width:13px;height:13px;background:var(--orange);right:7%;bottom:80px}

.section { padding: 100px max(5vw, 22px); }
.section-heading { max-width: 720px; margin: 0 auto 52px; }.centered{text-align:center}.section-heading h2,.final-card h2{margin:0 0 12px;font-size:clamp(30px,4vw,48px);line-height:1.25;letter-spacing:-.035em}.section-heading>p:last-child{color:var(--muted);margin:0}.section-heading .kicker{margin-bottom:12px}
.overview { background: #fff; }
.role-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: center; }
.role-card { height: 100%; position: relative; padding: 30px; border: 1px solid #d8d4c5; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }.role-card::before{content:"";position:absolute;inset:0 0 auto;height:7px}.role-ai::before{background:linear-gradient(90deg,#4385ef,#d34cd9)}.role-git::before{background:#24292f}.role-vercel::before{background:linear-gradient(90deg,#111,#777)}
.role-number { position: absolute; right: 20px; top: 17px; color: #e1ded3; font-size: 35px; font-weight: 900; }.role-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:13px;color:#fff;font-size:25px;margin-bottom:19px}.role-ai .role-icon{background:linear-gradient(135deg,#4385ef,#d34cd9)}.role-git .role-icon{background:#24292f}.role-vercel .role-icon{background:#111}.role-label{margin:0;color:var(--orange);font-size:11px;font-weight:900;letter-spacing:.12em}.role-card h3{margin:3px 0 10px;font-size:21px}.role-card>p:last-child{color:var(--muted);font-size:14px;margin:0}.role-connector{text-align:center;font-size:26px;color:#a09c8d;font-weight:900}
.analogy { max-width: 980px; margin: 38px auto 0; padding: 20px 26px; display: flex; gap: 15px; align-items: flex-start; background: #fff8d5; border: 1px solid #efd66a; border-radius: 12px; }.analogy p{margin:0;font-size:14px}

.guide { background: var(--cream); }
.guide-layout { width: 100%; max-width: 1200px; min-width: 0; margin: auto; display: grid; grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); align-items: start; }
.step-nav { position: sticky; top: 98px; padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 22px rgba(47,42,23,.07); }.step-nav-title{margin:0;font-weight:900}.progress-track{height:7px;background:#e9e6d9;border-radius:9px;margin:13px 0 7px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--orange),var(--purple));transition:width .3s}.progress-text{margin:0;color:var(--muted);font-size:11px}.progress-text strong{color:var(--purple);font-size:15px}.step-nav ol{list-style:none;padding:0;margin:20px 0 0}.step-nav li{border-top:1px solid #ebe8dc}.step-nav a{display:flex;align-items:center;gap:11px;padding:13px 2px;text-decoration:none}.step-nav a>span{width:28px;height:28px;display:grid;place-items:center;flex:none;border:1px solid #cbc7b8;border-radius:50%;font-size:11px;font-weight:900}.step-nav em{font-style:normal;font-size:13px;font-weight:900;line-height:1.35}.step-nav small{display:block;color:#99958a;font-size:9px;font-weight:500}.step-nav li.is-done a>span{background:var(--green);border-color:var(--green);color:#fff}.step-nav li.is-active a>span{background:var(--ink);border-color:var(--ink);color:#fff}
.steps-content { width: 100%; max-width: 100%; min-width: 0; }
.step-card { width: 100%; max-width: 100%; min-width: 0; scroll-margin-top: 96px; margin-bottom: 30px; padding: clamp(24px, 4vw, 48px); background: #fff; border: 1px solid var(--line); border-radius: 19px; box-shadow: var(--shadow); overflow: hidden; }.step-card.featured{border:2px solid var(--purple);box-shadow:0 16px 38px rgba(92,65,190,.14)}
.step-head { display: flex; gap: 20px; align-items: center; padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #e8e4d8; }.step-badge{width:70px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;color:#fff;background:var(--ink);border-radius:15px 5px 15px 5px;font-size:9px;line-height:1}.featured .step-badge{background:linear-gradient(145deg,var(--purple),#4f2db8)}.step-badge b{font-size:29px;margin-top:5px}.step-head p{margin:0;color:var(--orange);font-size:11px;font-weight:900;letter-spacing:.08em}.step-head h3{margin:2px 0 0;font-size:clamp(22px,3vw,32px);line-height:1.3}.step-intro{color:#5d5b55}
.account-list{display:grid;gap:10px;margin:25px 0}.account-list a{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #dcd8ca;border-radius:11px;text-decoration:none;transition:.2s}.account-list a:hover{transform:translateX(4px);border-color:#9f94d2}.account-logo{width:43px;height:43px;display:grid;place-items:center;flex:none;border-radius:10px;color:#fff;font-weight:900}.ai-bg{background:linear-gradient(135deg,#4385ef,#d34cd9)}.git-bg{background:#24292f}.vercel-bg{background:#000}.account-list b{display:block;font-size:14px}.account-list small{display:block;color:var(--muted);font-size:11px}.account-list i{margin-left:auto;font-style:normal;color:var(--purple);font-size:11px;font-weight:900}
.callout { margin: 22px 0; padding: 17px 19px; display: flex; align-items: flex-start; gap: 13px; border-radius: 10px; font-size: 13px; }.callout>span{flex:none;padding:2px 7px;border-radius:4px;font-size:9px;font-weight:900;letter-spacing:.05em}.callout p{margin:0}.tip{background:#fff7cb;border-left:4px solid #efc31f}.tip>span{background:#efc31f}.warning{background:#fff0ed;border-left:4px solid #f26342}.warning>span{background:#f26342;color:#fff}.check{background:#eaf8f2;border-left:4px solid var(--green)}.check>span{background:var(--green);color:#fff}.neutral{background:#f3f1f9;border-left:4px solid #8e7ad4}.neutral>span{background:#8e7ad4;color:#fff}
.done-check{margin-top:30px;padding:17px 18px;display:flex;align-items:center;gap:11px;border:1px dashed #a7a294;background:#faf9f3;border-radius:10px;cursor:pointer;font-size:13px;font-weight:900}.done-check input{position:absolute;opacity:0}.done-check>span{width:23px;height:23px;display:grid;place-items:center;background:#fff;border:2px solid #a9a597;border-radius:6px}.done-check input:checked+span{background:var(--green);border-color:var(--green)}.done-check input:checked+span::after{content:"✓";color:#fff;font-size:14px}.done-check:has(input:checked){background:#edfaf4;border-color:var(--green);color:#117651}
.instruction-list{width:100%;min-width:0;list-style:none;padding:0;margin:0}.instruction-list>li{width:100%;min-width:0;display:grid;grid-template-columns:37px minmax(0,1fr);gap:15px;padding:22px 0;border-bottom:1px solid #eeeade}.instruction-list>li>div{min-width:0}.instruction-list>li:last-child{border-bottom:0}.instruction-no{width:34px;height:34px;display:grid;place-items:center;color:#fff;background:var(--orange);border-radius:50%;font-size:13px;font-weight:900}.instruction-list h4{margin:1px 0 7px;font-size:17px}.instruction-list p{margin:0;color:#5d5b55;font-size:14px;overflow-wrap:anywhere}.instruction-list code,.callout code,.fine-print code{padding:2px 6px;background:#eeeaf8;color:#6042b7;border-radius:4px;font-family:Consolas,monospace;font-size:.92em;overflow-wrap:anywhere}
.mock-screen{max-width:420px;margin:19px 0 5px;border:1px solid #bdb8aa;border-radius:10px;overflow:hidden;box-shadow:5px 6px 0 #e7e4d8}.mock-top{height:29px;padding:0 11px;display:flex;align-items:center;gap:9px;background:#ece9df;color:#817d70;font-size:9px}.mock-top i{width:8px;height:8px;background:#ff725f;border-radius:50%}.mock-body{text-align:center;padding:26px;background:#fdfcff}.mock-app{color:var(--purple);font-size:10px;font-weight:900}.mock-line{height:8px;width:65%;margin:12px auto 0;background:#444;border-radius:9px}.mock-line.short{width:40%;margin-top:6px}.mock-body button{margin-top:16px;padding:6px 22px;border:0;border-radius:5px;background:var(--purple);color:#fff;font-size:9px}
.route-label{margin:0 0 12px;padding:10px 13px;background:#f1edff;border-radius:7px;color:#56409f;font-size:12px;font-weight:900}.route-label span{padding:3px 7px;margin-right:7px;background:var(--purple);color:#fff;border-radius:4px;font-size:9px}.name-example{max-width:460px;margin-top:17px;padding:15px;background:#f7f6f1;border:1px solid #d7d3c5;border-radius:9px}.name-example span,.name-example small{display:block;color:#777368;font-size:10px}.name-example b{display:block;margin:5px 0;padding:8px 10px;background:#fff;border:1px solid #bbb7a9;border-radius:5px;font:14px Consolas,monospace}.name-example small{color:var(--green)}
.sub-route{margin:20px 0;border:1px solid #d9d5c7;border-radius:10px;overflow:hidden}.sub-route summary{padding:15px 18px;background:#f8f7f1;cursor:pointer;font-size:13px;font-weight:900}.sub-route>div{padding:4px 18px 16px;color:#5d5b55;font-size:13px}.sub-route p{margin:13px 0 0}
.important-detail{border-color:#e5bc4c}.important-detail summary{background:#fff6d5}.mini-steps{padding-left:20px;margin:13px 0 0}.mini-steps li{padding:4px 0}.prompt-box{margin:18px 0 4px;border:1px solid #bcb3e2;border-radius:11px;overflow:hidden;background:#fbfaff}.prompt-box>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;background:#eee9ff;color:#5d43b6;font-size:11px;font-weight:900}.prompt-box>p{padding:15px 17px;margin:0!important;color:#45434c!important;font-size:12px!important;line-height:1.9}.copy-button.light{background:#fff;color:#5d43b6;border-color:#b7a9eb;white-space:nowrap}.idea-chips{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.idea-chips span{padding:6px 9px;background:#f1eefb;border:1px solid #d6cff0;border-radius:20px;color:#604b9c;font-size:10px;font-weight:700}
.api-decision{margin:26px 0;border:1px solid #cfc9bb;border-radius:13px;overflow:hidden;background:#fff}.api-decision-head{padding:20px 22px;text-align:center;background:#f6f3e9}.api-decision-head>span{padding:3px 8px;background:var(--ink);color:#fff;border-radius:4px;font-size:9px;font-weight:900}.api-decision-head h4{margin:7px 0 3px;font-size:20px}.api-decision-head p{margin:0;color:#666258;font-size:12px}.api-route-grid{display:grid;grid-template-columns:1fr 1fr}.api-route{width:auto!important;padding:22px!important;min-height:100%;background:#fff}.api-route+.api-route{border-left:1px solid #ddd8ca}.api-route.no-api{background:#f4fcf8}.api-route.uses-api{background:#fbf9ff}.api-route .route-tag{width:max-content;margin:0 0 9px;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:900}.no-api .route-tag{background:#ccefe0;color:#08734d}.uses-api .route-tag{background:#e5defd;color:#5d40b7}.api-route h5{margin:0 0 11px;font-size:15px}.api-route ul{margin:0;padding-left:19px;color:#5f5c54;font-size:11px}.api-route li{padding:2px 0}.route-result{margin:16px 0 0;padding:11px;background:#fff;border-radius:7px;font-size:11px}.route-result>span{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:5px;border-radius:50%;color:#fff;font-weight:900}.no-api .route-result>span{background:var(--green)}.uses-api .route-result>span{background:var(--purple)}.route-result code{padding:2px 5px;background:#eeeafa;color:#5c40b5;border-radius:3px}
.accordion-guide{margin:25px 0 8px;color:#706d63;font-size:12px;font-weight:700}.accordion-guide span{color:var(--orange);margin-right:5px}.signup-accordion{margin:10px 0;border-color:#cec9b9;box-shadow:0 3px 10px rgba(43,39,23,.05)}.signup-accordion summary{position:relative;display:flex;align-items:center;gap:13px;padding:15px 50px 15px 16px;list-style:none;background:#fff;transition:background .2s}.signup-accordion summary::-webkit-details-marker{display:none}.signup-accordion summary::after{content:"＋";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:25px;height:25px;display:grid;place-items:center;background:#eeeae0;border-radius:50%;font-size:15px}.signup-accordion[open] summary{background:#f8f6ed;border-bottom:1px solid #dfdacb}.signup-accordion[open] summary::after{content:"−"}.signup-accordion summary>span:last-of-type{min-width:0;line-height:1.4}.signup-accordion summary b{display:block;color:var(--ink);font-size:14px}.signup-accordion summary small{display:block;margin-top:2px;color:#827e73;font-size:10px;font-weight:500}.signup-service{width:39px;height:39px;display:grid;place-items:center;flex:0 0 39px;color:#fff;border-radius:9px;font-size:16px;font-weight:900}.signup-content{padding:22px!important}.signup-lead{margin:0 0 18px!important;padding:13px 15px;background:#f5f3eb;border-radius:8px;color:#56544e!important}.registration-steps{margin:0;padding:0;list-style:none}.registration-steps>li{display:grid;grid-template-columns:31px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid #ebe7da}.registration-steps>li:last-child{border-bottom:0}.registration-steps>li>span{width:29px;height:29px;display:grid;place-items:center;background:var(--orange);color:#fff;border-radius:50%;font-size:11px;font-weight:900}.registration-steps b{display:block;margin-bottom:4px;color:#363530;font-size:14px}.registration-steps p{margin:0!important;color:#66635b;font-size:12px;line-height:1.75}.registration-steps a{color:#5d43b6;font-weight:900}.input-example{width:max-content;max-width:100%;margin-top:9px;padding:6px 10px;background:#f1eefb;border-radius:6px}.input-example span{margin-right:7px;color:#7b7390;font-size:9px}.input-example code{color:#5c41b3;font:12px Consolas,monospace}.signup-success{display:flex;align-items:flex-start;gap:11px;margin-top:18px;padding:14px 16px;background:#eaf9f2;border:1px solid #91d5b8;border-radius:9px}.signup-success>span{width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;background:var(--green);color:#fff;border-radius:50%;font-weight:900}.signup-success p{margin:0!important;color:#315e4d;font-size:12px}.signup-alt{margin-top:12px;border:1px solid #d8d2e8;border-radius:8px;background:#faf9ff}.signup-alt summary{padding:11px 35px 11px 13px!important;background:transparent!important;color:#604b9c;font-size:11px;font-weight:900}.signup-alt summary::after{right:10px;width:20px;height:20px;background:#ece8f8;font-size:12px}.signup-alt[open] summary{border-bottom:1px solid #e1dced}.signup-alt p{padding:11px 13px;margin:0!important;color:#666078;font-size:11px}.signup-content>.callout{margin-bottom:0}
.env-box{width:100%;max-width:560px;min-width:0;margin:18px 0 10px;padding:7px 16px;background:#222;color:#fff;border-radius:10px;box-shadow:5px 6px 0 #ded9cb;overflow:hidden}.env-box>div{min-height:63px;display:grid;grid-template-columns:minmax(72px,110px) minmax(0,1fr) auto;align-items:center;gap:10px;border-bottom:1px solid #444}.env-box>div:last-child{border-bottom:0}.env-box span{color:#aaa;font-size:10px}.env-box code{min-width:0;background:transparent;color:#ffd96a;padding:0;font:13px Consolas,monospace;overflow-wrap:anywhere}.env-box small{font-size:9px;color:#aaa}.copy-button{padding:5px 9px;color:#fff;background:#5f4bbb;border:1px solid #8b77df;border-radius:5px;font-size:9px;cursor:pointer}.secret-value{letter-spacing:2px}.fine-print{font-size:11px!important;color:#777!important}
.env-choice{margin:15px 0;padding:16px 18px;border-radius:10px}.env-choice>span{display:inline-block;margin-bottom:7px;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:900}.env-choice>p{font-size:13px!important}.no-key-choice{background:#edf9f3;border:1px solid #9fd6bc}.no-key-choice>span{background:var(--green);color:#fff}.key-choice{background:#faf8ff;border:1px solid #c8bcec}.key-choice>span{background:var(--purple);color:#fff}.key-choice .env-box{margin-bottom:14px}
.success-panel{margin:25px 0;display:flex;align-items:center;gap:17px;padding:23px;background:linear-gradient(135deg,#e8fff3,#f6fffb);border:1px solid #73cfa9;border-radius:13px}.success-icon{width:50px;height:50px;display:grid;place-items:center;flex:none;background:var(--green);color:#fff;border-radius:50%;font-size:24px;font-weight:900}.success-panel p{margin:0;color:var(--green);font-size:11px;font-weight:900}.success-panel h4{margin:1px 0;font:700 clamp(14px,2vw,19px) Consolas,monospace}.success-panel h4 span{color:#888;font-weight:400}.success-panel small{color:#5c655f;font-size:10px}
.update-flow{width:100%;min-width:0;margin:10px 0 28px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}.update-flow>div{min-width:0;min-height:96px;padding:17px 10px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;background:#f7f5ec;border:1px solid #d9d5c7;border-radius:10px;font-size:12px;font-weight:900}.update-flow b{width:27px;height:27px;display:grid;place-items:center;flex:0 0 27px;background:var(--orange);color:#fff;border-radius:50%}.update-flow span{min-width:0;overflow-wrap:anywhere}.update-flow i{color:#999484;font-style:normal;font-weight:900}

.trouble{background:#fff}.faq-list{max-width:900px;margin:auto}.faq-list details{border-bottom:1px solid #dcd8c9}.faq-list summary{padding:21px 4px;display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;font-weight:900}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"＋";margin-left:auto;color:var(--purple);font-size:20px}.faq-list details[open] summary::after{content:"−"}.faq-list summary span{color:#b0aa98;font-size:12px}.faq-list details>div{padding:0 45px 22px;color:#5d5b55;font-size:14px}.faq-list p{margin:0}.faq-list ul{margin-bottom:0}.faq-list code{padding:2px 5px;background:#f0edf9;border-radius:3px}
.error-prompt{margin:16px 0;padding:15px;background:#f5f2ff;border-left:4px solid var(--purple);border-radius:7px}.error-prompt span{color:var(--purple);font-size:10px;font-weight:900}.error-prompt p{margin-top:5px!important;font-size:12px}.privacy-note{padding:9px 12px;background:#fff4df;border-radius:6px;font-size:11px}
.final-check{padding-top:70px;padding-bottom:70px;background:linear-gradient(110deg,#fff1d0,#eee8ff)}.final-card{max-width:1050px;margin:auto;padding:45px 55px;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;background:var(--ink);color:#fff;border-radius:22px;box-shadow:10px 12px 0 rgba(37,37,36,.14)}.final-card p{color:#c7c3b8;margin:0}.final-card .kicker{color:var(--yellow);margin-bottom:8px}.final-card ul{padding:0;margin:0;list-style:none}.final-card li{padding:10px 0;border-bottom:1px solid #494946;font-size:13px}.final-card li:last-child{border:0}.final-card li span{width:22px;height:22px;display:inline-grid;place-items:center;margin-right:10px;background:var(--green);border-radius:50%;font-size:11px;font-weight:900}
footer{padding:48px max(5vw,22px) 25px;background:#151515;color:#fff}.footer-inner{max-width:1180px;margin:auto;display:flex;justify-content:space-between;gap:30px}.footer-inner strong{font-size:17px}.footer-inner p{margin:3px 0;color:#888;font-size:11px}.official-links{display:flex;gap:18px;align-items:center;font-size:11px}.official-links span{color:#777}.official-links a{color:#ddd;text-decoration:none}.official-links a:hover{color:var(--yellow)}.footer-note{max-width:1180px;margin:35px auto 0;padding-top:18px;border-top:1px solid #333;color:#777;font-size:10px}
.toast{position:fixed;left:50%;bottom:25px;z-index:200;transform:translate(-50%,120px);padding:10px 18px;background:#191919;color:#fff;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.25);font-size:12px;transition:.25s}.toast.show{transform:translate(-50%,0)}

@media (max-width: 1050px){
  .header-nav{display:none}.hero{min-height:auto;grid-template-columns:1fr;padding-top:125px}.hero-inner{text-align:center;margin:auto}.hero-actions,.hero-notes{justify-content:center}.hero-visual{max-width:560px}.role-grid{grid-template-columns:1fr;gap:15px}.role-connector{transform:rotate(90deg)}.guide-layout{grid-template-columns:1fr}.step-nav{position:relative;top:auto}.step-nav ol{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.step-nav li{border:0}.step-nav a{justify-content:center}.step-nav em{display:none}.final-card{grid-template-columns:1fr}.footer-inner{flex-direction:column}
}
@media (max-width: 600px){
  .site-header{height:66px;padding:0 15px}.brand-mark{width:34px;height:34px}.brand strong{font-size:13px}.brand small{display:none}.header-cta{display:none}.hero{padding:108px 18px 58px}.hero>*{min-width:0}.hero h1{font-size:clamp(32px,9.5vw,37px);letter-spacing:-.04em}.hero h1 br{display:none}.hero h1 em{display:inline}.hero-lead{font-size:14px;overflow-wrap:anywhere}.hero-actions{display:grid}.button{width:100%}.hero-notes{gap:8px 14px}.hero-visual{width:100%;max-width:100%;height:310px}.mini-window{width:90%;left:5%;height:210px}.window-content{padding:25px 20%}.service-pill{padding:7px;transform:scale(.9)}.service-pill b{width:25px;height:25px}.ai-pill{left:0;bottom:28px;transform-origin:left center}.git-pill{bottom:0;left:50%;transform:translateX(-50%) scale(.9);transform-origin:center}.vercel-pill{right:0;bottom:32px;transform-origin:right center}.flow-arrow{display:none}.section{padding:70px 16px}.section-heading{margin-bottom:35px}.role-card{padding:25px}.analogy{padding:16px}.step-card{padding:22px 17px;border-radius:14px}.step-head{gap:13px}.step-badge{width:57px;height:57px}.step-badge b{font-size:23px}.instruction-list>li{grid-template-columns:30px minmax(0,1fr);gap:10px}.instruction-no{width:29px;height:29px}.env-box{padding:5px 10px}.env-box>div{grid-template-columns:minmax(64px,80px) minmax(0,1fr) auto;gap:5px}.env-box small{display:none}.update-flow{align-items:stretch;gap:5px}.update-flow>div{min-height:115px;flex-direction:column;font-size:10px}.update-flow i{align-self:center}.final-card{padding:30px 22px;gap:25px}.official-links{align-items:flex-start;flex-direction:column;gap:8px}.faq-list details>div{padding-left:10px}.done-check{font-size:12px}
}
@media (max-width: 430px){
  .header-cta{display:none}.brand{max-width:100%}.back-home{margin-left:auto;padding:6px 9px}.hero h1{font-size:32px}.service-pill{gap:5px;padding:6px}.service-pill b{width:22px;height:22px;font-size:12px}.service-pill strong{font-size:10px}.section{padding-left:12px;padding-right:12px}.step-nav{padding:17px}.step-nav ol{gap:2px}.step-nav a>span{width:25px;height:25px}.step-card{padding:20px 14px}.step-head h3{font-size:20px}.step-head{align-items:flex-start}.prompt-box>div{align-items:flex-start;flex-direction:column}.env-box>div{grid-template-columns:1fr auto;padding:10px 0}.env-box>div span{grid-column:1/-1}.env-box>div small{display:none}.update-flow{grid-template-columns:1fr}.update-flow i{transform:rotate(90deg);justify-self:center}.update-flow>div{width:100%;min-height:76px;flex-direction:row}.success-panel{align-items:flex-start;padding:17px}.success-panel h4{overflow-wrap:anywhere}.callout{padding:14px;gap:8px}.account-list a{gap:9px}.account-list i{display:none}
}
@media (max-width: 680px){
  .api-route-grid{grid-template-columns:1fr}.api-route+.api-route{border-left:0;border-top:1px solid #ddd8ca}.api-decision-head{padding:18px 14px}.api-route{padding:18px!important}.env-choice{padding:14px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}