/* Introductory Code SYN guide, shared by the owner and blue site previews. */
.syn-guide-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px;margin-top:27px}
.syn-layered-theme .front-preview .syn-guide-actions .syn-guide-trigger{margin-top:0}
.syn-guide-signup{display:flex;align-items:center;justify-content:center;gap:13px;min-height:70px;padding:14px 18px;border:1px solid #7eb9df70;border-radius:17px;background:linear-gradient(120deg,#1d4c6d,#123a59);color:#fff;box-shadow:inset 0 1px #ffffff12;transition:background .2s,border-color .2s}
.syn-guide-signup img{width:62px;height:34px;object-fit:contain}
.syn-guide-signup strong{font-size:14px;font-weight:800;line-height:1.4}
.syn-guide-signup>svg{flex-shrink:0;color:#b8dfff}
.syn-guide-signup:hover{background:#225578;border-color:#aad8f5}
.syn-guide-signup:focus-visible{outline:3px solid #ffe5a6;outline-offset:4px}
@media(max-width:600px){.syn-guide-actions{flex-direction:column;margin-top:22px}.syn-layered-theme .front-preview .syn-guide-actions .syn-guide-trigger{width:100%}.syn-guide-signup{min-height:60px;justify-content:flex-start}.syn-guide-signup>svg{margin-left:auto}}
.syn-layered-theme .front-preview .syn-guide-trigger{position:relative;isolation:isolate;display:flex;align-items:center;gap:13px;width:fit-content;max-width:100%;min-height:70px;margin-top:27px;padding:12px 17px 12px 12px;border:1px solid #edca768a;border-radius:17px;color:#fff;background:radial-gradient(ellipse at 0 0,#239eff80,transparent 75%),linear-gradient(115deg,#0864cc,#12478f);box-shadow:inset 0 1px #ffffff25,0 6px 24px #0068e536;cursor:pointer;text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s}
.syn-guide-trigger-icon{display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;border:1px solid #f6d98e70;border-radius:13px;background:linear-gradient(145deg,#f5d889,#dcae4e);color:#152c45;box-shadow:0 3px 10px #00152d40}
.syn-guide-trigger small{display:block;margin-bottom:3px;color:#ffe5a6;font-size:10px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:1.3px}
.syn-guide-trigger strong{display:block;font-size:14px;font-weight:800;line-height:1.4}
.syn-guide-trigger-arrow{flex-shrink:0;margin-left:8px;color:#ffe5a6;transition:transform .2s}
.syn-layered-theme .front-preview .syn-guide-trigger:hover{transform:translateY(-2px);border-color:#ffde87;box-shadow:inset 0 1px #ffffff36,0 9px 30px #0076ff55}
.syn-guide-trigger:hover .syn-guide-trigger-arrow{transform:translateX(3px)}
.syn-guide-trigger:focus-visible{outline:3px solid #ffe5a6;outline-offset:4px}
body:has(.syn-code-guide) [data-slot="dialog-overlay"]{z-index:79;background:#021222cf;backdrop-filter:blur(7px)}
body .syn-code-guide[data-slot="dialog-content"]{z-index:80;display:block;width:calc(100vw - 32px);max-width:760px!important;max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:28px;border:1px solid #4b82aa91!important;border-radius:25px!important;background:radial-gradient(ellipse at 100% 0,#145a9c38,transparent 55%),linear-gradient(145deg,#10324e,#081f34)!important;box-shadow:0 28px 100px #0009,inset 0 1px #aad5ff12;color:#f3f8ff;font-family:StakePreview,Arial,sans-serif}
body .syn-code-guide [data-slot="dialog-close"]{top:16px;right:16px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #78a7cc50;border-radius:10px;background:#0a2136;color:#c6def3;opacity:1}
body .syn-code-guide [data-slot="dialog-close"]:hover{background:#214b6d}
.syn-guide-heading{padding-right:24px}
.syn-guide-heading>p:first-child{margin:0 0 8px;color:#8cd1ff;font-size:10px;font-weight:800;letter-spacing:1.5px}
.syn-guide-heading [data-slot="dialog-title"]{margin:0;font-size:27px;line-height:1.2;font-weight:800;letter-spacing:-.5px;color:#fff}
.syn-guide-heading [data-slot="dialog-description"]{margin:8px 0 0;font-size:14px;line-height:1.5;color:#b2c9df}
.syn-guide-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.syn-guide-benefit{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid #689acb30;border-radius:16px;background:#17405b55;min-width:0}
.syn-guide-leaderboards{background:linear-gradient(110deg,#18496d88,#163a544f)}
.syn-guide-icon{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#73bcff12;color:#f5d380}
.syn-guide-benefit h3{font-size:14px;font-weight:800;line-height:1.35;margin:0 0 5px;color:#fff}
.syn-guide-benefit p{margin:0;font-size:12px;line-height:1.55;color:#b7cce0}
.syn-guide-benefit small{display:block;margin-top:6px;font-size:10px;line-height:1.4;color:#91acc5}
.syn-guide-benefit a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:#8fd2ff;font-size:11px;font-weight:700;line-height:1.4}
.syn-guide-benefit a:hover{text-decoration:underline;color:#ccecff}
.syn-guide-board-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.syn-guide-board-links a{color:#ffdf96}
.syn-guide-start{margin-top:21px;padding-top:18px;border-top:1px solid #6f9dbe35}
.syn-guide-start h3{margin:0 0 12px;font-size:16px;font-weight:800;color:#fff}
.syn-guide-start ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.syn-guide-start a{display:flex;align-items:center;gap:8px;height:100%;min-height:66px;padding:10px;border:1px solid #7db0d638;border-radius:12px;background:#11334c;color:#e8f4ff;transition:background .15s,border-color .15s}
.syn-guide-start li:first-child a{background:linear-gradient(120deg,#078dff,#0759df);border-color:#72beff60}
.syn-guide-start li:last-child a{border-color:#d6ba7060;background:#baa1580c}
.syn-guide-start a:hover{border-color:#b8dfff;background:#20516f}
.syn-guide-start a>span{flex-shrink:0;color:#83cfff;font-size:10px;font-weight:800}
.syn-guide-start a>strong{flex:1;font-size:11px;line-height:1.4;font-weight:700}
.syn-guide-start a small{display:block;margin-top:2px;font-size:10px;font-weight:400;color:#aac6dc}
.syn-guide-start a>svg{flex-shrink:0;color:#aed7f6}
.syn-guide-start li:first-child a :is(span,svg){color:#fff}
.syn-guide-note{margin:13px 0 0;font-size:10px;line-height:1.6;color:#8eabc3}
.syn-code-guide a:focus-visible{outline:2px solid #ffdf96;outline-offset:3px;border-radius:5px}
@media(max-width:600px){body .syn-code-guide[data-slot="dialog-content"]{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:23px 17px;border-radius:21px!important}.syn-guide-heading [data-slot="dialog-title"]{font-size:24px}.syn-guide-benefits{grid-template-columns:1fr;margin-top:19px}.syn-guide-leaderboards{grid-column:auto}.syn-guide-benefit{padding:14px}.syn-guide-start ol{grid-template-columns:repeat(2,minmax(0,1fr))}.syn-guide-start a{min-height:62px}.syn-guide-start a>strong{font-size:12px}.syn-guide-trigger strong{font-size:13px}.syn-layered-theme .front-preview .syn-guide-trigger{gap:10px;padding:11px;min-height:66px;margin-top:22px}.syn-guide-trigger-arrow{margin-left:0}.syn-guide-trigger-icon{width:37px;height:40px}}
@media(prefers-reduced-motion:reduce){.syn-layered-theme .front-preview .syn-guide-trigger,.syn-guide-trigger-arrow{transition:none!important;transform:none!important}.syn-code-guide[data-state]{animation:none!important}}