@layer base{:root{color-scheme:light;--ink:#12263d;--muted:#526174;--blue:#075bb4;--cyan:#087486;--paper:#fff;--line:#dce5ed;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;line-height:1.65}a{color:var(--blue);text-underline-offset:.25em}a:hover{text-decoration-thickness:2px}a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}h1,h2,h3,p{margin-block:0}h1,h2,h3{letter-spacing:-.045em;overflow-wrap:anywhere;line-height:1.15}h1,h2{text-wrap:balance}h2{font-size:clamp(1.8rem,1.2rem + 2dvw,2.6rem)}h3{letter-spacing:-.025em;font-size:1.25rem}p{text-wrap:pretty}::selection{color:var(--ink);background:#c8edf1}}@layer layout{.container{width:min(100% - 3rem,74rem);margin-inline:auto}.site-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.35rem;display:flex}.header-shell{border-bottom:1px solid var(--line)}nav ul{flex-wrap:wrap;align-items:center;gap:.5rem 1.7rem;margin:0;padding:0;list-style:none;display:flex}nav a{min-block-size:44px;color:var(--muted);align-items:center;font-size:.9rem;text-decoration:none;display:inline-flex}nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:.65em;font-weight:700}.hero{grid-template-columns:1.12fr 1fr;align-items:center;gap:3rem;padding-block:5.75rem 5rem;display:grid}.section{padding-block:5rem}.section-heading{justify-content:space-between;align-items:end;gap:2rem;display:flex}.topic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2.2rem;display:grid}.tool-section{background:#f0f7fa;border:1px solid #d8e8ec;border-radius:1.4rem;grid-template-columns:.8fr 1fr;align-items:center;gap:4rem;padding:3.5rem;display:grid}.closing{text-align:center;padding-block:5.5rem}.footer-shell{border-top:1px solid var(--line);background:#f6f8fb}.footer-top{justify-content:space-between;align-items:center;gap:2rem;padding-block:2.5rem;display:flex}.footer-bottom{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:1.2rem;font-size:.8rem;display:flex}.inner-page{min-height:58dvh;padding-block:4rem 5rem}.inner-page>p{max-width:65ch;color:var(--muted);margin-bottom:1.5rem}.page-heading{margin-bottom:1.5rem}.page-heading h1{font-size:clamp(2rem,1.5rem + 3dvw,3.5rem)}.legal-copy{max-width:48rem}.legal-copy h2{margin-top:2.2rem;margin-bottom:.7rem;font-size:1.4rem}.legal-copy p{color:var(--muted);margin-bottom:1rem}.legal-copy a{font-weight:650}}@layer components{.brand{color:var(--ink);letter-spacing:-.05em;align-items:center;gap:.7rem;font-size:1.55rem;font-weight:800;line-height:1.2;text-decoration:none;display:inline-flex}.brand small{letter-spacing:.025em;color:var(--muted);margin-top:.3rem;font-size:.65rem;font-weight:500;display:block}.brand-hn{color:var(--cyan)}.brand-logo{object-fit:cover;border-radius:.7rem;flex:none;width:3.25rem;height:3.25rem;box-shadow:0 6px 18px #075bb420}.channel-link{border:1px solid var(--line);color:var(--ink);border-radius:.5rem;padding:.55rem .9rem;font-size:.8rem;font-weight:600;text-decoration:none}.channel-link span{margin-left:.6rem}.eyebrow{letter-spacing:.08em;color:var(--cyan);margin-bottom:1rem;font-size:.75rem;font-weight:700}.eyebrow span{background:var(--cyan);border-radius:50%;width:.45rem;height:.45rem;margin-right:.5rem;display:inline-block}.hero h1{margin-bottom:1.5rem;font-size:clamp(2.6rem,1.4rem + 3.5dvw,4.6rem);line-height:1.08}.hero h1 em{color:var(--blue);font-style:normal}.hero-description{color:var(--muted);max-width:48ch;font-size:1.05rem}.actions{flex-wrap:wrap;gap:.85rem;margin-top:2rem;display:flex}.button{border:1px solid #0000;border-radius:.55rem;justify-content:center;align-items:center;gap:1rem;min-block-size:48px;padding:.85rem 1.1rem;font-size:.9rem;font-weight:650;text-decoration:none;display:inline-flex}.primary{background:var(--blue);color:#fff}.primary:hover{background:#064c96}.secondary{color:var(--ink);background:#fff;border-color:#b8c8d8}.hero-note{color:var(--muted);margin-top:1.3rem;font-size:.75rem}.hero-art{min-width:0;padding:3rem .75rem;position:relative}.art-grid{background:radial-gradient(#e3f4f6 15%,#0000 70%);border-radius:50%;position:absolute;inset:0}.terminal-card{background:#11263d;border:1px solid #2f4c67;border-radius:.9rem;position:relative;transform:rotate(-2deg);box-shadow:0 22px 45px -20px #163d6860}.terminal-top{border-bottom:1px solid #2e425a;align-items:center;gap:.35rem;padding:.9rem 1rem;display:flex}.terminal-dot{background:#8699ac;border-radius:50%;width:.45rem;height:.45rem}.terminal-dot:first-child{background:#f29b95}.terminal-dot:nth-child(2){background:#e9c47c}.terminal-dot:nth-child(3){background:#83cdb8}.terminal-name{color:#b7c7d8;margin-left:auto;font-size:.65rem}.terminal-body{color:#e7eef6;padding:1.5rem;font:.8rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace}.terminal-body p{margin-bottom:.65rem}.terminal-prompt{color:#7fe0d8}.terminal-muted{color:#afc1d3;margin-bottom:1.4rem!important}.terminal-end{margin-top:1.4rem}.cursor{color:#7fe0d8}.art-label{background:#fff;border:1px solid #d9e5ed;border-radius:.55rem;padding:.65rem .9rem;font-size:.75rem;font-weight:650;position:absolute;box-shadow:0 8px 25px #12263d0d}.label-code{top:1rem;right:0}.label-check{color:var(--cyan);bottom:1.5rem;left:-.75rem}.art-caption{color:var(--muted);font-size:.7rem;position:absolute;bottom:-.5rem;right:.75rem}.topic-strip{border-block:1px solid var(--line);background:#f7f9fc}.topic-strip>div{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.2rem;display:flex}.topic-strip p{color:var(--muted);font-size:.75rem}.topic-strip ul{flex-wrap:wrap;gap:1rem 2.3rem;margin:0;padding:0;font-size:.85rem;font-weight:650;list-style:none;display:flex}.text-link{align-items:center;gap:.75rem;min-block-size:44px;font-size:.85rem;font-weight:700;text-decoration:none;display:inline-flex}.text-link:hover{text-decoration:underline}.section-intro{color:var(--muted);max-width:66ch;margin-top:1rem;font-size:.95rem}.topic-card{border:1px solid var(--line);background:#fff;border-radius:.9rem;overflow:hidden}.topic-visual{border-bottom:1px solid var(--line);flex-direction:column;justify-content:end;min-height:10rem;padding:1.5rem;display:flex;position:relative;overflow:hidden}.phone{color:#166659;background:#edf7f5}.terminal{color:#35578f;background:#eef2fb}.window{color:#23698d;background:#eff7fc}.visual-number{letter-spacing:-.1em;opacity:.7;font-size:6rem;font-weight:800;line-height:1.2;position:absolute;top:-.6rem;right:1rem}.visual-code{margin-bottom:1rem;font:.9rem ui-monospace,monospace;position:relative}.visual-category{letter-spacing:.1em;font-size:.7rem;font-weight:700}.topic-content{padding:1.5rem}.category{color:var(--cyan);margin-bottom:.7rem;font-size:.7rem;font-weight:700}.topic-content>p:not(.category){color:var(--muted);margin-top:.85rem;font-size:.9rem}.status-label{color:var(--muted);border:1px solid var(--line);border-radius:1rem;margin-top:1.5rem;padding:.2rem .6rem;font-size:.7rem;display:inline-block}.tool-illustration{min-height:17rem;position:relative}.image-frame{aspect-ratio:1.35;border:2px solid #8fb5c6;border-radius:.8rem;width:70%;position:absolute}.image-back{background:#dfedf3;top:10%;left:5%;transform:rotate(-12deg)}.image-front{color:var(--cyan);background:#fff;place-items:center;display:grid;top:20%;left:20%;transform:rotate(5deg);box-shadow:0 12px 30px #124a6515}.image-front svg{width:80%}.image-format{color:var(--cyan);font:700 .75rem ui-monospace,monospace;position:absolute;bottom:.7rem;left:20%}.tool-copy>p:not(.eyebrow){color:var(--muted);margin-top:1.25rem;font-size:.95rem}.tool-detail{color:var(--muted);gap:.7rem;margin-block:1.2rem .7rem;font-size:.8rem;display:flex}.tool-detail>span{color:var(--cyan);font-size:1.3rem}.tool-copy .availability{margin-top:.7rem!important;font-size:.7rem!important}.closing p:not(.eyebrow){max-width:60ch;color:var(--muted);margin:1.4rem auto .7rem;font-size:.95rem}.footer-top p{color:var(--muted);margin-top:.8rem;font-size:.85rem}.skip-link{z-index:10;background:#fff;padding:.75rem;position:absolute;inset-block-start:.5rem;inset-inline-start:1rem;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}}@layer responsive{@media (width<=62rem){.channel-link{display:none}.hero{gap:1.5rem;padding-block:4rem}.terminal-body{padding:1rem;font-size:.7rem}.topic-grid{gap:1rem}.tool-section{gap:2rem;padding:2.5rem}}@media (width<=45rem){.container{width:min(100% - 2rem,74rem)}.site-header{justify-content:center;gap:.8rem;padding-block:1rem}.channel-link{align-items:center;min-block-size:44px;display:inline-flex}nav ul{justify-content:center;gap:.3rem 1.2rem}nav a{font-size:.8rem}.hero{grid-template-columns:1fr;gap:1.5rem;padding-block:3rem}.hero-art{width:100%;max-width:30rem;margin-inline:auto}.terminal-body{padding:1.5rem;font-size:.8rem}.label-check{left:0}.hero h1{font-size:clamp(2.6rem,1.8rem + 3.5dvw,4rem)}.topic-strip>div{text-align:center;justify-content:center}.topic-strip ul{justify-content:center;gap:.75rem 1.3rem}.section{padding-block:3rem}.section-heading{flex-direction:column;align-items:start;gap:.6rem}.topic-grid{grid-template-columns:1fr}.topic-visual{min-height:9rem}.tool-section{grid-template-columns:1fr;gap:1rem;padding:1.7rem}.tool-illustration{width:100%;max-width:22rem;margin-inline:auto}.closing{padding-block:3.5rem}.footer-top{flex-direction:column;align-items:start}.footer-top nav ul{justify-content:start}.inner-page{padding-block:3rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important}}@media (forced-colors:active){:root{--ink:CanvasText;--muted:CanvasText;--blue:LinkText;--cyan:LinkText;--paper:Canvas;--line:CanvasText}.button,.art-label,.terminal-card,.image-frame,.topic-card{border:1px solid canvastext}.primary{color:linktext;background:canvas}}}.tools-list{gap:1.8rem;margin-top:2rem;display:grid}.tool-preview-card{border:1px solid var(--line);background:#fff;border-radius:1rem;grid-template-columns:minmax(22rem,46%) minmax(0,1fr);min-height:20rem;display:grid;overflow:hidden;box-shadow:0 8px 28px #12263d0a}.tool-preview-media{color:#fff;min-height:20rem;position:relative;overflow:hidden}.tool-preview-media--compressor{background:linear-gradient(135deg,#083d5c 0%,#0b7490 58%,#15aab7 100%)}.tool-preview-brand{z-index:2;flex-direction:column;justify-content:center;width:42%;display:flex;position:absolute;inset:2rem auto 2rem 2rem}.tool-preview-kicker{color:#9cf1ec;letter-spacing:.08em;margin-bottom:.7rem;font-size:.72rem;font-weight:800}.tool-preview-brand strong{letter-spacing:-.055em;font-size:2.45rem;line-height:1}.tool-preview-brand p{color:#f3fbfc;margin-top:.85rem;font-size:1rem;line-height:1.35}.tool-preview-brand small{color:#d8eef1;margin-top:1.4rem;font-size:.78rem}.tool-compressor-graphic{grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;width:53%;display:grid;position:absolute;top:50%;right:1.6rem;transform:translateY(-50%)}.compressor-file{min-height:8.8rem;color:var(--ink);text-align:center;background:#f8fbfd;border:6px solid #0e2435;border-radius:.8rem;flex-direction:column;justify-content:center;align-items:center;padding:.7rem;display:flex;box-shadow:0 18px 35px #03142445}.compressor-file--after{background:#eefaef}.compressor-file-tag{color:#0a5670;background:#dcebf3;border-radius:999px;margin-bottom:.5rem;padding:.22rem .45rem;font-size:.6rem;font-weight:800;display:inline-flex}.compressor-file--after .compressor-file-tag{color:#237451;background:#d7f2e2}.compressor-file strong{font-size:1.15rem}.compressor-file small{color:var(--muted);margin-top:.25rem;font-size:.62rem}.compressor-arrow{color:#fff;font-size:1.55rem;font-weight:800}.compressor-saving{color:#137258;background:#fff;border-radius:999px;padding:.25rem .55rem;font-size:.68rem;font-weight:800;position:absolute;bottom:-2rem;right:.2rem;box-shadow:0 6px 18px #03142425}.tool-preview-body{flex-direction:column;justify-content:center;padding:2rem 2.2rem;display:flex}.tool-preview-body h2{margin-bottom:.8rem;font-size:1.75rem}.tool-preview-body>p:not(.category){color:var(--muted);max-width:62ch;font-size:.96rem}.tool-preview-meta{color:var(--muted);flex-wrap:wrap;gap:.5rem 1.2rem;margin-block:1.1rem 1.35rem;font-size:.8rem;display:flex}.compressor-intro{max-width:52rem;margin-bottom:2rem}.compressor-intro>p:last-child{color:var(--muted);font-size:1rem}.tool-kicker{color:var(--cyan);letter-spacing:.06em;margin-bottom:.55rem;font-size:.75rem;font-weight:800}.compressor-app{margin-bottom:3.5rem}.compressor-app.has-result{grid-template-columns:minmax(0,1fr) minmax(18rem,.6fr);align-items:start;gap:1.5rem;display:grid}.compressor-panel,.result-panel{border:1px solid var(--line);background:#fff;border-radius:1rem;padding:1.5rem}.compressor-panel{max-width:52rem}.compressor-app.has-result .compressor-panel{max-width:none}.compressor-panel h2,.result-panel h2{margin-bottom:1.1rem;font-size:1.45rem}.drop-zone{text-align:center;cursor:pointer;background:#f8fbfd;border:2px dashed #b7c9d8;border-radius:.9rem;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;min-height:12rem;padding:1.5rem;transition:border-color .15s,background .15s;display:flex}.drop-zone:hover,.drop-zone.drag-active{border-color:var(--blue);background:#f0f7ff}.drop-zone:focus-within{outline:3px solid var(--blue);outline-offset:4px}.drop-zone span{color:var(--muted)}.drop-zone small{color:var(--muted);margin-top:.35rem}.drop-icon{background:#e8f3fb;border-radius:50%;place-items:center;width:3rem;height:3rem;margin-bottom:.4rem;font-size:1.4rem;font-weight:800;display:grid;color:var(--blue)!important}.visually-hidden{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.compressor-workspace{grid-template-columns:minmax(0,.9fr) minmax(16rem,1fr);gap:1.5rem;margin-top:1.5rem;display:grid}.preview-card{min-width:0}.preview-card img{object-fit:contain;border:1px solid var(--line);background:#f4f7f9;border-radius:.8rem;width:100%;max-height:28rem;display:block}.file-meta{flex-direction:column;gap:.15rem;min-width:0;margin-top:.75rem;display:flex}.file-meta strong{overflow-wrap:anywhere}.file-meta span{color:var(--muted);font-size:.8rem}.compressor-controls{flex-direction:column;gap:1.15rem;display:flex}.control-group{min-width:0}.control-group label,.resize-fieldset legend{color:var(--ink);margin-bottom:.4rem;font-size:.82rem;font-weight:700;display:block}.control-group select,.control-group input[type=number]{width:100%;min-height:44px;color:var(--ink);font:inherit;background:#fff;border:1px solid #b9c9d8;border-radius:.55rem;padding:.65rem .75rem}.control-group input[type=range]{width:100%;accent-color:var(--blue)}.control-label-row{justify-content:space-between;align-items:center;gap:1rem;display:flex}.control-label-row output{color:var(--blue);font-size:.85rem;font-weight:800}.resize-fieldset{border:0;min-width:0;margin:0;padding:0}.field-help{color:var(--muted);margin-bottom:.7rem;font-size:.75rem}.dimension-grid{grid-template-columns:1fr 1fr;gap:.8rem;display:grid}.input-suffix{background:#fff;border:1px solid #b9c9d8;border-radius:.55rem;align-items:center;display:flex;overflow:hidden}.input-suffix input{min-width:0;border:0!important;border-radius:0!important}.input-suffix span{color:var(--muted);padding-right:.75rem;font-size:.8rem}.compressor-submit{cursor:pointer;width:100%;margin-top:.2rem}.result-panel{background:#f4f9fc}.result-comparison{grid-template-columns:repeat(3,1fr);gap:.65rem;margin-block:1rem;display:grid}.result-comparison>div{border:1px solid var(--line);background:#fff;border-radius:.7rem;min-width:0;padding:.8rem}.result-comparison span{color:var(--muted);margin-bottom:.15rem;font-size:.7rem;display:block}.result-comparison strong{overflow-wrap:anywhere;font-size:1rem;display:block}.result-dimensions{color:var(--muted);margin-bottom:1rem;font-size:.82rem}.result-actions{flex-wrap:wrap;gap:.7rem;display:flex}.result-actions .button{flex:10rem}.tool-explanation{border-top:1px solid var(--line);max-width:52rem;margin-bottom:1rem;padding-top:2.5rem}.tool-explanation h2{margin-bottom:.8rem;font-size:1.6rem}.tool-explanation p{color:var(--muted)}@media (width<=62rem){.compressor-app.has-result{grid-template-columns:1fr}.result-panel{order:2}}@media (width<=45rem){.tool-preview-card{grid-template-columns:1fr;min-height:0}.tool-preview-media{min-height:15rem}.tool-preview-brand{width:43%;inset:1.4rem auto 1.4rem 1.4rem}.tool-preview-brand strong{font-size:2rem}.tool-preview-brand p{font-size:.86rem}.tool-compressor-graphic{width:54%;right:1rem}.compressor-file{border-width:5px;min-height:7rem}.compressor-file strong{font-size:.9rem}.compressor-file small{font-size:.52rem}.compressor-saving{bottom:-1.5rem}.tool-preview-body{padding:1.35rem}.compressor-workspace,.dimension-grid,.result-comparison{grid-template-columns:1fr}.compressor-panel,.result-panel{padding:1.1rem}}.tutorial-list{gap:1.8rem;margin-top:2rem;display:grid}.tutorial-card{border:1px solid var(--line);background:#fff;border-radius:1rem;grid-template-columns:minmax(22rem,46%) minmax(0,1fr);min-height:20rem;display:grid;overflow:hidden;box-shadow:0 8px 28px #12263d0a}.tutorial-card-media{color:#fff;min-height:20rem;position:relative;overflow:hidden}.tutorial-card-media--pihole{background:linear-gradient(135deg,#073456 0%,#075f7d 58%,#0aa9b5 100%)}.tutorial-card-media--cloudflare{background:linear-gradient(135deg,#0f2942 0%,#0b3a6b 68%,#5e3412 100%)}.tutorial-card-brand{z-index:2;flex-direction:column;justify-content:center;width:43%;display:flex;position:absolute;inset:2rem auto 2rem 2rem}.tutorial-card-brand-kicker{color:#8fe8ee;letter-spacing:.08em;margin-bottom:.7rem;font-size:.72rem;font-weight:800}.tutorial-card-brand strong{letter-spacing:-.055em;font-size:2.55rem;line-height:1}.tutorial-card-brand p{color:#f3f8fb;margin-top:.85rem;font-size:1rem;line-height:1.35}.tutorial-card-brand small{color:#d4e1ec;margin-top:1.4rem;font-size:.78rem}.tutorial-card-screen{background:#fff;border:10px solid #0d1c2c;border-radius:.8rem 0 0 .8rem;width:58%;height:calc(100% - 4.4rem);position:absolute;top:2.2rem;right:-1.4rem;overflow:hidden;box-shadow:0 18px 35px #03142455}.tutorial-card-screen img{object-fit:cover;object-position:left top;width:100%;height:100%;display:block}.tutorial-tunnel-graphic{width:52%;position:absolute;top:50%;right:1.7rem;transform:translateY(-50%)}.tunnel-window{color:var(--ink);background:#f7fafc;border:8px solid #101c2a;border-radius:.8rem;overflow:hidden;box-shadow:0 18px 35px #03142455}.tunnel-window-title{color:#fff;background:#152838;padding:.7rem .85rem;font-size:.82rem;font-weight:700;display:block}.tunnel-row{grid-template-columns:auto 1fr auto;align-items:center;gap:.45rem;padding:1rem .9rem .85rem;font-size:.72rem;display:grid}.tunnel-row strong{color:#217a57;background:#dff5e9;border-radius:999px;padding:.2rem .45rem;font-size:.65rem}.tunnel-dot{background:#20a66a;border-radius:50%;width:.55rem;height:.55rem}.tunnel-route{color:#2c536c;text-align:center;background:#eaf4fb;border-radius:.6rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;margin:.15rem .9rem 1rem;padding:.75rem;font:600 .62rem ui-monospace,monospace;display:grid}.tunnel-route b{color:#f48120;font-size:1rem}.tutorial-card-body{flex-direction:column;justify-content:center;padding:2rem 2.2rem;display:flex}.tutorial-card-body h2{margin-bottom:.8rem;font-size:1.75rem}.tutorial-card-body>p:not(.category){color:var(--muted);max-width:62ch;font-size:.96rem}.tutorial-card-meta{color:var(--muted);flex-wrap:wrap;gap:.5rem 1.2rem;margin-block:1.1rem 1.35rem;font-size:.8rem;display:flex}.tutorial-article{max-width:52rem}.tutorial-header{margin-bottom:2rem}.tutorial-badge,.step-label{color:var(--cyan);letter-spacing:.07em;text-transform:uppercase;font-size:.72rem;font-weight:800;display:inline-block}.tutorial-lead{color:var(--muted);max-width:48rem;margin-top:.8rem;font-size:1.08rem}.tutorial-meta{color:var(--muted);flex-wrap:wrap;gap:.45rem 1.1rem;margin-top:1rem;font-size:.76rem;display:flex}.tutorial-summary{background:#f3f9fa;border:1px solid #d8e8ec;border-radius:.75rem;margin-top:1.5rem;padding:1.1rem 1.2rem}.tutorial-summary ul{margin:.55rem 0 0;padding-left:1.2rem}.tutorial-index{border:1px solid var(--line);background:#f8fafc;border-radius:.8rem;margin-block:2rem 3rem;padding:1.25rem}.tutorial-index strong{margin-bottom:.5rem;display:block}.tutorial-index ol{columns:2;column-gap:2rem;margin:0;padding-left:1.3rem}.tutorial-index li{break-inside:avoid;margin:.32rem 0}.tutorial-index a{font-size:.9rem;text-decoration:none}.tutorial-index a:hover{text-decoration:underline}.tutorial-article section{margin-block:0 3.5rem;scroll-margin-top:1.5rem}.tutorial-article section h2{margin:.35rem 0 1rem;font-size:clamp(1.7rem,1.25rem + 1.5vw,2.3rem)}.tutorial-article section h3{margin:1.7rem 0 .7rem}.tutorial-article section>p{color:var(--muted);margin-bottom:1rem}.tutorial-article ul,.tutorial-article ol{padding-left:1.4rem}.tutorial-article li{margin:.45rem 0}.tutorial-article code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em}.tutorial-article p code,.tutorial-article li code{color:#18354e;background:#eef3f7;border-radius:.3rem;padding:.1rem .32rem}.tutorial-article pre{color:#edf5fb;background:#10273d;border:1px solid #29445c;border-radius:.7rem;margin:1rem 0 1.25rem;padding:1rem 1.1rem;line-height:1.6;overflow-x:auto}.tutorial-article pre code{color:inherit;white-space:pre;background:0 0;padding:0}.tutorial-code-block{background:#10273d;border:1px solid #29445c;border-radius:.7rem;margin:1rem 0 1.25rem;overflow:hidden}.tutorial-code-actions{background:#0b1f31;border-bottom:1px solid #29445c;justify-content:flex-end;align-items:center;min-height:2.8rem;padding:.38rem .55rem;display:flex}.tutorial-copy-button{color:#f4fbff;cursor:pointer;touch-action:manipulation;background:#173b57;border:1px solid #4a718e;border-radius:.4rem;min-block-size:2rem;min-inline-size:4.8rem;padding:.35rem .75rem;font:700 .75rem/1.2 Inter,ui-sans-serif,system-ui,sans-serif}.tutorial-copy-button:hover{background:#20516f;border-color:#78a7c3}.tutorial-copy-button:focus-visible{outline-offset:2px;outline:3px solid #5fd2e3}.tutorial-code-block pre{border:0;border-radius:0;margin:0}.tutorial-figure{margin:1.5rem 0}.tutorial-figure img{border:1px solid var(--line);background:#edf2f6;border-radius:.75rem;width:100%;height:auto;display:block}.tutorial-figure figcaption{color:var(--muted);margin-top:.6rem;font-size:.82rem;line-height:1.5}.tutorial-note,.tutorial-warning,.tutorial-success{background:#f5f9fb;border-left:4px solid #5c91aa;border-radius:.3rem .7rem .7rem .3rem;margin:1.25rem 0;padding:1rem 1.1rem}.tutorial-note strong,.tutorial-warning strong,.tutorial-success strong{margin-bottom:.25rem;display:block}.tutorial-note p,.tutorial-warning p,.tutorial-success p{color:var(--muted);margin:0}.tutorial-warning{background:#fff8ee;border-left-color:#bc7c24}.tutorial-success{background:#eff9f5;border-left-color:#2e826c}.tutorial-warning pre,.tutorial-warning .tutorial-code-block{margin-bottom:0}.tutorial-steps{counter-reset:tutorial-step;gap:.75rem;list-style:none;display:grid;padding:0!important}.tutorial-steps li{counter-increment:tutorial-step;border:1px solid var(--line);border-radius:.7rem;margin:0;padding:1rem 1rem 1rem 3.2rem;position:relative}.tutorial-steps li:before{content:counter(tutorial-step);width:1.45rem;height:1.45rem;color:var(--blue);background:#e9f3fb;border-radius:50%;place-items:center;font-size:.72rem;font-weight:800;display:grid;position:absolute;top:1rem;left:1rem}.tutorial-finish{background:#f2faf6;border:1px solid #cfe4dc;border-radius:.9rem;padding:1.4rem}.tutorial-sources{border-top:1px solid var(--line);padding-top:2rem}.tutorial-sources h2{font-size:1.4rem!important}.tutorial-sources ul{padding-left:1.2rem}@media (width<=45rem){.tutorial-card{grid-template-columns:1fr;min-height:0}.tutorial-card-media{min-height:15rem}.tutorial-card-brand{width:44%;inset:1.4rem auto 1.4rem 1.4rem}.tutorial-card-brand strong{font-size:2rem}.tutorial-card-brand p{font-size:.86rem}.tutorial-card-screen{border-width:7px;width:57%;height:calc(100% - 3rem);top:1.5rem;right:-1.2rem}.tutorial-tunnel-graphic{width:53%;right:1rem}.tutorial-card-body{padding:1.35rem}.tutorial-index ol{columns:1}.tutorial-meta{flex-direction:column;gap:.2rem}.tutorial-article pre{padding:.9rem;font-size:.82rem}.tutorial-code-actions{padding-inline:.45rem}.tutorial-copy-button{min-block-size:2.5rem;padding-inline:.9rem}}.tutorial-card-media--windows{background:linear-gradient(135deg,#0d2339 0%,#183e68 65%,#315e8d 100%)}.tutorial-vm-graphic{width:52%;position:absolute;top:50%;right:1.7rem;transform:translateY(-50%)}.vm-monitor{background:#0b1724;border:8px solid #0b1724;border-radius:.85rem;overflow:hidden;box-shadow:0 18px 35px #03142455}.vm-monitor-top{background:#172a3c;align-items:center;gap:.3rem;min-height:2rem;padding:.45rem .65rem;display:flex}.vm-monitor-top span{background:#6d8295;border-radius:50%;width:.42rem;height:.42rem}.vm-monitor-top span:first-child{background:#ef8c87}.vm-monitor-top span:nth-child(2){background:#e9c46f}.vm-monitor-top span:nth-child(3){background:#7fc9b8}.vm-monitor-top b{color:#c8d6e2;margin-left:auto;font-size:.65rem;font-weight:600}.vm-screen{color:#fff;background:linear-gradient(160deg,#0e4b85,#1379be);flex-direction:column;justify-content:center;align-items:center;gap:.45rem;min-height:8.8rem;display:flex}.vm-screen strong{font-size:1.05rem}.vm-screen small{color:#d8ecfa;font-size:.65rem}.windows-mark{grid-template-rows:repeat(2,1.55rem);grid-template-columns:repeat(2,1.55rem);gap:.2rem;display:grid;transform:skewY(-3deg)}.windows-mark span{opacity:.95;background:#fff;display:block}.vm-badges{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.7rem;display:flex}.vm-badges span{color:#17446b;background:#ffffffeb;border-radius:999px;padding:.28rem .5rem;font-size:.6rem;font-weight:800;box-shadow:0 5px 15px #03142430}@media (width<=45rem){.tutorial-vm-graphic{width:53%;right:1rem}.vm-monitor{border-width:6px}.vm-screen{min-height:7.2rem}.windows-mark{grid-template-rows:repeat(2,1.2rem);grid-template-columns:repeat(2,1.2rem)}.vm-badges span{padding:.22rem .4rem;font-size:.54rem}}.tutorial-card-media--rclone{background:linear-gradient(135deg,#0b2d3d 0%,#0e596f 60%,#1596a8 100%)}.tutorial-rclone-graphic{width:52%;position:absolute;top:50%;right:1.6rem;transform:translateY(-50%)}.rclone-cloud-panel{min-height:8rem;color:var(--ink);text-align:center;background:#f7fbfd;border:8px solid #0d1d29;border-radius:.85rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;padding:1rem;font-weight:800;display:grid;box-shadow:0 18px 35px #03142455}.rclone-cloud-panel b{color:#1596a8;font-size:1.6rem}.rclone-tags{flex-wrap:wrap;justify-content:center;gap:.35rem;margin-top:.7rem;display:flex}.rclone-tags span{color:#0b6071;background:#ffffffeb;border-radius:999px;padding:.25rem .45rem;font-size:.56rem;font-weight:800}.rclone-use-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.2rem 0;display:grid}.rclone-use-grid article{border:1px solid var(--line);background:#f8fafc;border-radius:.7rem;padding:1rem}.rclone-use-grid article strong{margin-bottom:.3rem;display:block}.rclone-use-grid article p{color:var(--muted);font-size:.86rem}.rclone-provider-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:1rem 0 1.2rem;display:grid}.rclone-provider-grid span{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:.6rem;padding:.7rem .8rem;font-size:.82rem;font-weight:650}.rclone-choice-list{gap:.65rem;margin:1.1rem 0 1.3rem;display:grid}.rclone-choice-list>div{border:1px solid var(--line);background:#fff;border-radius:.65rem;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;display:flex}.rclone-choice-list strong{font-size:.9rem}.rclone-choice-list code{white-space:nowrap}@media (width<=45rem){.tutorial-rclone-graphic{width:53%;right:1rem}.rclone-cloud-panel{border-width:6px;min-height:6.8rem;padding:.65rem;font-size:.72rem}.rclone-tags span{font-size:.48rem}.rclone-use-grid{grid-template-columns:1fr}.rclone-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rclone-choice-list>div{flex-direction:column;align-items:flex-start}}.tutorial-card-media--rclone-backup{background:linear-gradient(135deg,#112d43 0%,#145b74 62%,#1a8d96 100%)}.tutorial-rclone-backup-graphic{width:53%;position:absolute;top:50%;right:1.5rem;transform:translateY(-50%)}.backup-stack{grid-template-columns:1fr auto 1fr;align-items:center;gap:.45rem;display:grid}.backup-source,.backup-target{min-height:8rem;color:var(--ink);text-align:center;background:#f7fafc;border:6px solid #0c1f2d;border-radius:.8rem;flex-direction:column;justify-content:center;align-items:center;padding:.7rem;display:flex;box-shadow:0 18px 35px #03142445}.backup-source span,.backup-target span{color:var(--muted);margin-bottom:.25rem;font-size:.62rem}.backup-source strong,.backup-target strong{font-size:.86rem}.backup-target{background:#eaf8ef}.backup-target strong{color:#237451}.backup-flow{color:#fff;font-size:1.5rem;font-weight:800}.backup-status{justify-content:center;gap:.35rem;margin-top:.65rem;display:flex}.backup-status span{color:#126274;background:#ffffffeb;border-radius:999px;padding:.25rem .45rem;font-size:.54rem;font-weight:800}@media (width<=45rem){.tutorial-rclone-backup-graphic{width:54%;right:1rem}.backup-source,.backup-target{border-width:5px;min-height:6.8rem;padding:.45rem}.backup-source strong,.backup-target strong{font-size:.7rem}.backup-status span{font-size:.46rem}}.tutorial-card-media--pihole-article{background:linear-gradient(135deg,#073456 0%,#0a6678 64%,#18aab1 100%)}.article-dns-graphic{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.3rem;width:54%;display:grid;position:absolute;top:50%;right:1.2rem;transform:translateY(-50%)}.article-dns-graphic>div{min-height:6.7rem;color:var(--ink);text-align:center;background:#f7fafc;border:5px solid #0c2130;border-radius:.7rem;flex-direction:column;justify-content:center;align-items:center;padding:.5rem;display:flex;box-shadow:0 12px 25px #03142435}.article-dns-graphic>div span{color:var(--muted);font-size:.55rem}.article-dns-graphic>div b{margin-top:.2rem;font-size:.72rem}.article-dns-graphic>div.blocked{background:#fff0ef}.article-dns-graphic>div.blocked b{color:#b4443f}.article-dns-graphic>strong{color:#fff}.pihole-flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.6rem;margin:1.2rem 0;display:grid}.pihole-flow>div{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:.7rem;flex-direction:column;justify-content:center;min-height:6rem;padding:1rem;display:flex}.pihole-flow span{color:var(--muted);margin-top:.3rem;font-size:.78rem}.pihole-flow>b{color:var(--cyan);font-size:1.2rem}@media (width<=45rem){.article-dns-graphic{width:55%;right:.8rem}.article-dns-graphic>div{border-width:4px;min-height:5.7rem}.pihole-flow{grid-template-columns:1fr}.pihole-flow>b{justify-self:center;transform:rotate(90deg)}}.tutorial-card-media--cf-vs-ports{background:linear-gradient(135deg,#102c45 0%,#154e72 58%,#f07b20 140%)}.cf-vs-ports-graphic{grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;width:50%;display:grid;position:absolute;top:50%;right:1.8rem;transform:translateY(-50%)}.cf-vs-ports-graphic div{color:#a83e36;text-align:center;background:#fff0ee;border:6px solid #0e1f2d;border-radius:.8rem;align-content:center;place-items:center;min-height:7rem;font-size:1.2rem;font-weight:900;display:grid;box-shadow:0 14px 28px #03142440}.cf-vs-ports-graphic div.tunnel{color:#087486;background:#eaf8f7}.cf-vs-ports-graphic small{letter-spacing:.06em;font-size:.52rem}.cf-vs-ports-graphic b{color:#fff}.network-methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0;display:grid}.network-methods div{border:1px solid var(--line);background:#f8fafc;border-radius:.7rem;padding:1rem}.network-methods span{color:var(--muted);margin-top:.35rem;font-size:.84rem;display:block}.article-compare{border:1px solid var(--line);background:var(--line);border-radius:.7rem;gap:1px;margin:1rem 0;display:grid;overflow:hidden}.article-compare>div{background:#fff;grid-template-columns:1.1fr 1fr 1fr;display:grid}.article-compare>div>*{padding:.7rem .8rem}.article-compare>div:first-child{background:#f3f7fa}.article-compare span,.article-compare b{font-size:.82rem}.article-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0;display:grid}.article-choice-grid article{border:1px solid var(--line);background:#f8fafc;border-radius:.7rem;padding:1rem}.article-choice-grid ul{margin-bottom:0}@media (width<=45rem){.cf-vs-ports-graphic{width:52%;right:1rem}.cf-vs-ports-graphic div{border-width:5px;min-height:5.8rem}.network-methods,.article-choice-grid{grid-template-columns:1fr}.article-compare{overflow-x:auto}.article-compare>div{min-width:38rem}}.tutorial-card-media--kvm-vbox{background:linear-gradient(135deg,#17293c 0%,#275279 60%,#6c77a8 100%)}.kvm-vbox-graphic{grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;width:52%;display:grid;position:absolute;top:50%;right:1.6rem;transform:translateY(-50%)}.kvm-vbox-graphic div{min-height:7.5rem;color:var(--ink);background:#f7fafc;border:6px solid #0d1d2b;border-radius:.8rem;flex-direction:column;justify-content:center;align-items:center;display:flex;box-shadow:0 14px 28px #03142440}.kvm-vbox-graphic div b{font-size:1.15rem}.kvm-vbox-graphic div span{color:var(--muted);margin-top:.25rem;font-size:.6rem}.kvm-vbox-graphic>strong{color:#fff;font-size:.75rem}@media (width<=45rem){.kvm-vbox-graphic{width:53%;right:1rem}.kvm-vbox-graphic div{border-width:5px;min-height:6rem}}.tutorial-card-media--tailscale{background:linear-gradient(135deg,#171b2c 0%,#303a69 62%,#6274d4 100%)}.tailscale-card-graphic{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.3rem;width:55%;display:grid;position:absolute;top:50%;right:1.2rem;transform:translateY(-50%)}.tailscale-card-graphic div{color:#253056;background:#f7f8fc;border:5px solid #101525;border-radius:.7rem;place-items:center;min-height:5.4rem;font-size:.65rem;font-weight:800;display:grid;box-shadow:0 12px 24px #080d1d40}.tailscale-card-graphic span{color:#fff;font-weight:900}.tailscale-flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.6rem;margin:1rem 0;display:grid}.tailscale-flow div{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:.7rem;padding:1rem;font-weight:700}.tailscale-flow b{color:var(--cyan)}@media (width<=45rem){.tailscale-card-graphic{width:56%;right:.8rem}.tailscale-card-graphic div{border-width:4px;min-height:4.7rem}.tailscale-flow{grid-template-columns:1fr}.tailscale-flow b{justify-self:center;transform:rotate(90deg)}}.tutorial-card-media--local-dns{background:linear-gradient(135deg,#12364d 0%,#0b6a7a 62%,#21a8a5 100%)}.local-dns-graphic{gap:.45rem;width:53%;display:grid;position:absolute;top:50%;right:1.2rem;transform:translateY(-50%)}.local-dns-graphic div{color:var(--ink);background:#f7fbfc;border:4px solid #0d2431;border-radius:.6rem;justify-content:space-between;align-items:center;padding:.65rem .8rem;font:.72rem ui-monospace,monospace;display:flex;box-shadow:0 10px 20px #03142435}.local-dns-graphic small{color:var(--muted);font-size:.55rem}.dns-name-example{grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;margin:1rem 0;display:grid}.dns-name-example code{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:.6rem;padding:.7rem}.dns-name-example b{color:var(--cyan)}@media (width<=45rem){.local-dns-graphic{width:54%;right:.8rem}.dns-name-example{grid-template-columns:1fr}.dns-name-example b{justify-self:center;transform:rotate(90deg)}}.tutorial-card-media--home-server{background:linear-gradient(135deg,#172a3a 0%,#244f65 60%,#3e8790 100%)}.home-server-graphic{width:50%;position:absolute;top:50%;right:1.6rem;transform:translateY(-50%)}.server-box{background:#eaf0f3;border:7px solid #0c1c27;border-radius:.8rem;flex-direction:column;gap:.55rem;min-height:8rem;padding:1.1rem;display:flex;position:relative;box-shadow:0 15px 30px #03142440}.server-box span{background:#6a8795;border-radius:.2rem;height:.55rem}.server-box b{color:#24717a;font-size:.72rem;position:absolute;bottom:.55rem;right:.7rem}.server-services{justify-content:center;gap:.3rem;margin-top:.6rem;display:flex}.server-services i{color:#27596a;background:#fff;border-radius:999px;padding:.22rem .4rem;font-size:.5rem;font-style:normal;font-weight:800}@media (width<=45rem){.home-server-graphic{width:52%;right:1rem}.server-box{border-width:5px;min-height:6.5rem}}.tutorial-card-media--ssd-nvme{background:linear-gradient(135deg,#152837 0%,#315465 60%,#5ca4a8 100%)}.ssd-nvme-graphic{grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;width:52%;display:grid;position:absolute;top:50%;right:1.6rem;transform:translateY(-50%)}.ssd-nvme-graphic div{min-height:7rem;color:var(--ink);background:#f7fafc;border:6px solid #0d1e28;border-radius:.8rem;flex-direction:column;justify-content:center;align-items:center;display:flex;box-shadow:0 14px 28px #03142440}.ssd-nvme-graphic div.fast{background:#e8f7f5}.ssd-nvme-graphic span{color:var(--muted);margin-top:.25rem;font-size:.6rem}.ssd-nvme-graphic>strong{color:#fff;font-size:.7rem}@media (width<=45rem){.ssd-nvme-graphic{width:53%;right:1rem}.ssd-nvme-graphic div{border-width:5px;min-height:5.8rem}}.tutorial-card-media--reverse-proxy{background:linear-gradient(135deg,#132a3b 0%,#245b73 60%,#2d98a6 100%)}.reverse-card-graphic{color:#fff;text-align:center;grid-template-columns:.8fr auto 1fr auto 1fr;align-items:center;gap:.25rem;width:56%;font-size:.55rem;font-weight:800;display:grid;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.reverse-card-graphic>div,.reverse-card-graphic section span{min-height:4rem;color:var(--ink);background:#f7fafc;border:4px solid #0c1e2a;border-radius:.55rem;place-items:center;display:grid}.reverse-card-graphic .rp{color:#087486;background:#e4f4f4}.reverse-card-graphic section{gap:.3rem;display:grid}.reverse-flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.6rem;margin:1rem 0;display:grid}.reverse-flow div{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:.7rem;padding:1rem;font-weight:700}.reverse-flow div.proxy{background:#edf8f7}.reverse-flow small{color:var(--muted);margin-top:.25rem;display:block}.reverse-flow b{color:var(--cyan)}@media (width<=45rem){.reverse-card-graphic{width:58%;right:.6rem}.reverse-flow{grid-template-columns:1fr}.reverse-flow b{justify-self:center;transform:rotate(90deg)}}.tutorial-card-media--cf-explainer{background:linear-gradient(135deg,#102943 0%,#174d7d 63%,#e26c1b 135%)}.cf-explainer-graphic{color:#fff;text-align:center;grid-template-columns:.8fr auto 1.25fr auto 1.1fr;align-items:center;gap:.25rem;width:58%;font-size:.5rem;font-weight:800;display:grid;position:absolute;top:50%;right:.9rem;transform:translateY(-50%)}.cf-explainer-graphic div{min-height:4.9rem;color:var(--ink);background:#f7fafc;border:4px solid #0d1d2b;border-radius:.55rem;place-items:center;padding:.3rem;display:grid}.cf-explainer-graphic .daemon{color:#087486;background:#eaf7f8}.cf-explainer-graphic .cloud{color:#bf5818;background:#fff2e7}.cloudflare-tunnel-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:.45rem;margin:1rem 0;display:grid}.cloudflare-tunnel-flow div{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:.65rem;padding:.8rem;font-size:.84rem;font-weight:700}.cloudflare-tunnel-flow div.cf{background:#fff5eb}.cloudflare-tunnel-flow small{color:var(--muted);margin-top:.2rem;font-size:.66rem;display:block}.cloudflare-tunnel-flow b{color:var(--cyan)}@media (width<=45rem){.cf-explainer-graphic{width:60%;right:.5rem}.cloudflare-tunnel-flow{grid-template-columns:1fr}.cloudflare-tunnel-flow b{justify-self:center;transform:rotate(90deg)}}.tutorial-card-media--mesh-vpn{background:linear-gradient(135deg,#171b31 0%,#34436f 62%,#6478d1 100%)}.mesh-card-graphic{color:#fff;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.3rem;width:55%;display:grid;position:absolute;top:50%;right:1.2rem;transform:translateY(-50%)}.mesh-card-graphic div{z-index:1;aspect-ratio:1;color:#2e3a70;background:#f8f9fc;border:5px solid #12172a;border-radius:50%;place-items:center;max-width:5rem;font-weight:900;display:grid;position:relative}.mesh-card-graphic span{font-weight:900}.mesh-card-graphic i{z-index:0;border-top:2px dashed #c4ccff;position:absolute;top:50%;left:15%;right:12%}.vpn-topology,.mesh-diagram{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.55rem;margin:1rem 0;display:grid}.vpn-topology div,.mesh-diagram div{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:.7rem;padding:1rem;font-weight:700}.vpn-topology div.hub{background:#eef0fb}.vpn-topology b,.mesh-diagram span{color:#5369c8;font-weight:900}@media (width<=45rem){.mesh-card-graphic{width:56%;right:.8rem}.mesh-card-graphic div{border-width:4px}.vpn-topology,.mesh-diagram{grid-template-columns:1fr}.vpn-topology b,.mesh-diagram span{justify-self:center;transform:rotate(90deg)}}.tutorial-card-media--backup-sync-snapshot{background:linear-gradient(135deg,#173044 0%,#285e73 62%,#4a9e91 100%)}.bss-card-graphic{grid-template-columns:repeat(3,1fr);gap:.35rem;width:56%;display:grid;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.bss-card-graphic div{min-height:6.6rem;color:var(--ink);background:#f8fafc;border:5px solid #0c1f2c;border-radius:.65rem;flex-direction:column;justify-content:center;align-items:center;font-size:.7rem;font-weight:900;display:flex;box-shadow:0 12px 24px #03142435}.bss-card-graphic small{color:var(--muted);margin-top:.25rem;font-size:.45rem}.recovery-scenarios{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1rem 0;display:grid}.recovery-scenarios article{border:1px solid var(--line);background:#f8fafc;border-radius:.7rem;padding:1rem}.recovery-scenarios p{color:var(--muted);margin-top:.3rem;font-size:.82rem}.backup-layers{gap:.4rem;margin:1rem 0;display:grid}.backup-layers div{border:1px solid var(--line);background:#f8fafc;border-radius:.65rem;padding:.85rem 1rem}.backup-layers span{color:var(--muted);margin-top:.2rem;font-size:.8rem;display:block}.backup-layers b{color:var(--cyan);justify-self:center}@media (width<=45rem){.bss-card-graphic{width:58%;right:.6rem}.bss-card-graphic div{border-width:4px;min-height:5.4rem}.recovery-scenarios{grid-template-columns:1fr}}.tutorial-card-media--ssd-nvme .tutorial-card-brand{width:37%}.tutorial-card-media--ssd-nvme .tutorial-card-brand strong{font-size:2.15rem;line-height:1.04}.tutorial-card-media--ssd-nvme .ssd-nvme-graphic{width:47%;right:1.15rem}.tutorial-card-media--backup-sync-snapshot .tutorial-card-brand{width:39%}.tutorial-card-media--backup-sync-snapshot .tutorial-card-brand strong{font-size:1.9rem;line-height:1.08}.tutorial-card-media--backup-sync-snapshot .bss-card-graphic{width:49%;right:.8rem}@media (width<=45rem){.tutorial-card-media--ssd-nvme .tutorial-card-brand{width:40%}.tutorial-card-media--ssd-nvme .tutorial-card-brand strong{font-size:1.55rem}.tutorial-card-media--ssd-nvme .ssd-nvme-graphic{width:48%;right:.75rem}.tutorial-card-media--backup-sync-snapshot .tutorial-card-brand{width:41%}.tutorial-card-media--backup-sync-snapshot .tutorial-card-brand strong{font-size:1.36rem;line-height:1.08}.tutorial-card-media--backup-sync-snapshot .bss-card-graphic{width:48%;right:.65rem}}.tools-context{border:1px solid var(--line);background:#f8fafc;border-radius:1rem;max-width:52rem;margin:2rem 0 0;padding:1.4rem 1.5rem}.tools-context h2{margin:.2rem 0 .55rem;font-size:1.15rem}.tools-context h2:not(:first-child){margin-top:1.25rem}.tools-context p{color:var(--muted);font-size:.92rem}