.tutorials-container{color:var(--panel-text,#102b46);gap:1.25rem;font-family:inherit;display:grid}.tutorials-modal-header{border-bottom:1px solid #e2edf6;justify-content:space-between;align-items:center;padding-bottom:1rem;display:flex}.modal-title-box{align-items:center;gap:.75rem;display:flex}.modal-title-box h3{color:#102b46;margin:0;font-size:1.15rem;font-weight:850}.modal-title-box p{color:#647a8e;margin:.2rem 0 0;font-size:.78rem}.modal-close-btn{color:#556b7f;cursor:pointer;background:#fff;border:1px solid #dbe8f2;border-radius:10px;place-items:center;width:36px;height:36px;transition:all .2s;display:grid}.modal-close-btn:hover{color:#112d46;background:#f1f6fa}.protocol-selector-tabs{grid-template-columns:repeat(2,1fr);gap:.85rem;display:grid}.protocol-selector-tabs .tab-btn{color:#4b6379;cursor:pointer;background:#fff;border:1.5px solid #dbe8f3;border-radius:16px;justify-content:center;align-items:center;gap:.65rem;padding:.9rem 1rem;font-size:.85rem;font-weight:800;transition:all .2s;display:flex}.protocol-selector-tabs .tab-btn:hover{color:#0878f9;border-color:#9ac2e9}.protocol-selector-tabs .tab-btn.active{color:#0762cf;background:#edf6ff;border-color:#0878f9;box-shadow:0 4px 14px #0878f91f}.badge-status{border-radius:99px;padding:.22rem .55rem;font-size:.65rem;font-weight:800}.badge-status.ready{color:#0a8e66;background:#eafaf3}.badge-status.coming-soon{color:#64748b;background:#f1f5f9;border:1px solid #cbd5e1}.notice-banner{border-radius:15px;align-items:flex-start;gap:.85rem;padding:1rem 1.15rem;font-size:.82rem;line-height:1.8;display:flex}.warning-banner{color:#92400e;background:#fffbeb;border:1px solid #fde68a}.security-banner{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.notice-banner strong{margin-bottom:.2rem;font-size:.88rem;display:block}.notice-banner p{margin:0}.compatibility-matrix{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.matrix-column{background:#fff;border:1px solid #e1ecf5;border-radius:16px;padding:1.2rem}.matrix-column.supported{border-top:4px solid #10b981}.matrix-column.unsupported{border-top:4px solid #ef4444}.matrix-column h4{color:#102a45;align-items:center;gap:.45rem;margin:0 0 .8rem;font-size:.88rem;display:flex}.matrix-column ul{color:#556c80;gap:.75rem;margin:0;padding:0;font-size:.77rem;line-height:1.8;list-style:none;display:grid}.matrix-column li b{color:#15334d}.matrix-note{color:#7b8f9f;margin-top:.8rem;font-size:.7rem;display:block}.guide-card{background:#fff;border:1px solid #e1ecf4;border-radius:18px;padding:1.35rem;box-shadow:0 4px 18px #12365508}.guide-header{border-bottom:1px solid #eef4f9;align-items:center;gap:.85rem;margin-bottom:1.2rem;padding-bottom:.85rem;display:flex}.guide-header h3{color:#102b46;margin:0;font-size:1.05rem}.guide-header p{color:#6d8296;margin:.25rem 0 0;font-size:.76rem}.step-list{gap:1.15rem;margin:0;padding:0;list-style:none;display:grid}.step-list li{border-bottom:1px dashed #e8f0f6;align-items:flex-start;gap:.95rem;padding-bottom:1.1rem;display:flex}.step-list li:last-child{border-bottom:0;padding-bottom:0}.step-num{color:#0878f9;background:#edf5fe;border-radius:10px;flex-shrink:0;place-items:center;width:32px;height:32px;font-size:.88rem;font-weight:900;display:grid}.step-list li strong{color:#163653;margin-bottom:.25rem;font-size:.85rem;display:block}.step-list li p{color:#5b7185;margin:0;font-size:.79rem;line-height:1.8}.copy-value-row{background:#f6f9fc;border:1px solid #e1edf5;border-radius:9px;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.45rem;padding:.45rem .75rem;font-size:.78rem;display:flex}.copy-value-row code{color:#0866cf;background:#fff;border:1px solid #d5e5f0;border-radius:6px;padding:.2rem .5rem;font-weight:700}.copy-btn-sm{color:#2b4f6e;cursor:pointer;background:#fff;border:1px solid #d0e0ed;border-radius:7px;align-items:center;gap:.35rem;margin-right:auto;padding:.3rem .65rem;font-size:.72rem;font-weight:800;transition:all .15s;display:inline-flex}.copy-btn-sm:hover{color:#0878f9;background:#edf6ff;border-color:#a4cefa}.advanced-accordion{background:#fff;border:1px solid #dbe8f3;border-radius:15px;overflow:hidden}.accordion-trigger{color:#163652;cursor:pointer;text-align:right;background:#fbfdff;border:0;justify-content:space-between;align-items:center;width:100%;padding:1rem 1.25rem;font-size:.84rem;font-weight:800;display:flex}.accordion-trigger>div{align-items:center;gap:.6rem;display:flex}.accordion-chevron{transition:transform .25s}.accordion-chevron.open{transform:rotate(180deg)}.accordion-body{background:#fff;border-top:1px solid #e7f0f6;gap:1.1rem;padding:1.25rem;display:grid}.field-explanation strong{color:#173753;margin-bottom:.3rem;font-size:.85rem;display:block}.field-explanation p{color:#556c80;margin:0;font-size:.79rem;line-height:1.85}.field-explanation .danger-text{color:#c02626;margin-bottom:.35rem;font-weight:800}.code-block{color:#e2eef9;background:#0f2438;border-radius:12px;margin:.75rem 0;padding:1rem 1.2rem;position:relative;overflow-x:auto}.code-block pre{white-space:pre-wrap;word-break:break-all;margin:0;font-family:Consolas,Monaco,monospace;font-size:.78rem;line-height:1.7}.code-block .copy-btn-sm{color:#fff;background:#ffffff1f;border-color:#fff3;margin-top:.75rem}.code-block .copy-btn-sm:hover{color:#fff;background:#0878f9}.guide-bullet-list{color:#556c80;margin:.8rem 0 0;padding-right:1.25rem;font-size:.79rem;line-height:1.85}.wireguard-intro-card{color:#fff;background:linear-gradient(140deg,#075fcf,#088ee8);border-radius:20px;padding:1.6rem;box-shadow:0 10px 30px #0878f92e}.intro-badge{background:#ffffff2e;border-radius:99px;align-items:center;gap:.45rem;margin-bottom:.9rem;padding:.35rem .7rem;font-size:.72rem;font-weight:800;display:inline-flex}.wireguard-intro-card h3{margin:0 0 .6rem;font-size:1.35rem}.intro-lead{color:#e0f0ff;margin:0;font-size:.88rem;line-height:1.95}.disclaimer-alert{color:#ffefc2;background:#00000038;border-radius:13px;align-items:flex-start;gap:.75rem;margin-top:1.1rem;padding:.9rem 1.1rem;font-size:.78rem;line-height:1.8;display:flex}.disclaimer-alert strong{color:#fff;margin-bottom:.2rem;display:block}.disclaimer-alert p{margin:0}.usecases-grid{grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1.25rem;display:grid}.usecases-grid>div{color:#12304d;background:#fffffff0;border-radius:14px;gap:.2rem;padding:.95rem;display:grid}.usecases-grid strong{margin-top:.25rem;font-size:.82rem}.usecases-grid span{color:#647b90;font-size:.68rem;line-height:1.6}.status-callout{color:#fff;background:#ffffff26;border-radius:11px;align-items:center;gap:.55rem;margin-top:1.1rem;padding:.65rem .9rem;font-size:.78rem;display:flex}.platform-nav{gap:.6rem;display:grid}.platform-label{color:#6d8296;font-size:.76rem;font-weight:800}.platform-buttons{gap:.45rem;padding-bottom:.35rem;display:flex;overflow-x:auto}.platform-buttons button{color:#4b647b;cursor:pointer;background:#fff;border:1px solid #dce8f3;border-radius:11px;flex-shrink:0;align-items:center;gap:.4rem;padding:.55rem .85rem;font-size:.76rem;font-weight:800;transition:all .15s;display:flex}.platform-buttons button:hover{color:#0878f9;border-color:#9ac4ec}.platform-buttons button.active{color:#fff;background:#0878f9;border-color:#0878f9;box-shadow:0 4px 12px #0878f933}.platform-card{background:#fff;border:1px solid #dce8f2;border-radius:18px;gap:1.25rem;padding:1.4rem;display:grid}.platform-step-guide h4{color:#12304c;margin:0 0 1rem;font-size:1rem}.console-solutions{gap:.5rem;margin-top:1rem;font-size:.79rem;line-height:1.85;display:grid}.console-solutions ul{color:#4f697f;gap:.6rem;margin:0;padding-right:1.25rem;display:grid}.config-integrity-notice{color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:13px;align-items:flex-start;gap:.75rem;padding:.95rem 1.1rem;font-size:.77rem;line-height:1.8;display:flex}.config-integrity-notice strong{color:#0f172a;margin-bottom:.2rem;display:block}.config-integrity-notice p{margin:0}.text-primary{color:#0878f9}.text-success{color:#10b981}.text-danger{color:#ef4444}.tutorials-modal-backdrop{z-index:1000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#07182e99;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.tutorials-modal-dialog{background:#f8fbfe;border-radius:24px;width:min(860px,100%);max-height:90vh;padding:24px;overflow-y:auto;box-shadow:0 25px 70px #03143040}@media (max-width:768px){.compatibility-matrix{grid-template-columns:1fr}.usecases-grid{grid-template-columns:1fr 1fr}.protocol-selector-tabs{grid-template-columns:1fr}}