/* Keeps the supplied guide layout, but makes it visually part of InstaTelly. */
.source-guide-page { padding: 46px 5vw 88px; background: #f7f8fb; }
.instatelly-tutorials { max-width: 1180px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid #e4e8ef; border-radius: 24px !important; background: #fff !important; color: #19191b !important; box-shadow: 0 20px 60px rgba(20, 35, 63, .08); }
.tt-header { margin: 0 !important; padding: 62px 24px 56px; background: radial-gradient(circle at 78% 22%, rgba(255,255,255,.22), transparent 21%), linear-gradient(135deg, #0757c7, #1680f0); }
.tt-header h1 { margin: 0 0 13px !important; color: #fff !important; font-size: clamp(36px, 5vw, 62px) !important; letter-spacing: -.07em; line-height: .95; }
.tt-header p { max-width: 530px; margin: auto !important; color: #e7f1ff !important; font-size: 16px !important; }
.tt-device-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; margin: 0 !important; padding: 28px !important; background: #fff; border-bottom: 1px solid #e7e9ee; }
.tt-card { min-height: 142px; border: 1px solid #dfe5ee !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 5px 15px rgba(25, 37, 57, .04); }
.tt-card:hover, .tt-card.active { border-color: #0869e8 !important; background: #f2f7ff !important; box-shadow: 0 10px 26px rgba(8, 105, 232, .13) !important; }
.tt-card-title { color: #19191b !important; }.tt-card-desc { color: #777982 !important; }.tt-card .tt-ico { color: #0869e8 !important; }.tt-logo { filter: none !important; }
.tt-badge-recommended { background: #0869e8 !important; box-shadow: 0 5px 12px rgba(8,105,232,.22) !important; }
#tutorial-container { padding: 54px 28px 30px; background: #fafbfe; }
.tt-tutorial-section { max-width: 860px !important; }.tt-tut-title { color: #19191b !important; border-color: #e2e6ed !important; font-size: clamp(26px, 3vw, 38px) !important; letter-spacing: -.055em; padding-bottom: 18px !important; }.tt-tut-sub { color: #777982 !important; }
.tlv-step-card { border-color: #e0e5ed !important; border-radius: 15px !important; background: #fff !important; box-shadow: 0 4px 14px rgba(22, 36, 60, .035); }.tlv-step-card:hover { border-color: #0869e8 !important; box-shadow: 0 10px 24px rgba(8,105,232,.09) !important; }.tlv-step-icon { border-color: #d7e4fa !important; background: #edf4ff !important; color: #0869e8 !important; border-radius: 10px !important; }.tlv-step-card:hover .tlv-step-icon { background: #0869e8 !important; color: #fff !important; }.tlv-step-text { color: #696d78 !important; }.tlv-step-text strong { color: #19191b !important; }.tlv-code-highlight { background: #0869e8 !important; border-radius: 7px !important; box-shadow: 0 5px 12px rgba(8,105,232,.18); }
.tlv-note-box { color: #596274 !important; background: #edf4ff !important; border-left-color: #0869e8 !important; border-radius: 0 14px 14px 0 !important; }.tlv-note-box strong { color: #1b365d !important; }.tlv-free-note { color: #2c6f51 !important; background: #eefaf4 !important; border-left-color: #55bd87 !important; }.tlv-free-note strong { color: #14633f !important; }
.tt-help { background: #f1f6ff !important; border-color: #d5e5ff !important; }.tt-help h3 { color: #19191b !important; }.tt-help p { color: #6b7180 !important; }.tt-btn-primary { background: #0869e8 !important; border-radius: 999px !important; }.tt-btn-ghost { color: #526071 !important; border-color: #d8dee8 !important; border-radius: 999px !important; }
@media (max-width: 850px) { .source-guide-page { padding: 20px 12px 54px; }.instatelly-tutorials { border-radius: 18px !important; }.tt-header { padding: 46px 20px 42px; }.tt-device-grid { grid-template-columns: repeat(2, 1fr) !important; padding: 16px !important; }.tt-card { min-height: 132px; }.tt-card:last-child:nth-child(odd) { grid-column: span 2; }.tt-device-grid .tt-card:nth-child(3) { grid-column: auto; } #tutorial-container { padding: 36px 16px 22px; }.tlv-step-card { align-items: flex-start !important; }.tlv-step-icon { min-width: 36px !important; height: 36px !important; margin-right: 12px !important; } }