/* Open Sans, self-hosted: the guide's typeface without a request to
   Google — required by font-src 'self' and better for privacy. */
/* cyrillic-ext 400 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic 400 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext 400 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin 400 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* cyrillic-ext 600 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic 600 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext 600 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin 600 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* cyrillic-ext 700 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic 700 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext 700 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin 700 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* cyrillic-ext 800 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-800-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
/* cyrillic 800 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-800-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* latin-ext 800 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin 800 */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/static/fonts/open-sans-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ServerDale — RDP connection guide.
   Ported from the standalone PHP page; visuals unchanged. Self-hosted
   Open Sans and no inline styles, so it runs under the site's CSP. */
:root{
    --bg:#f4f5f6; --card:#ffffff; --ink:#333333; --muted:#7c7c7c;
    --line:#e8e8e8; --brand:#fc9400; --brand-dark:#ed8406; --brand-light:#fca63f;
    --brand-soft:#fff3e2; --dark:#333333; --ok:#3d9c3a;
    --shadow:0 14px 34px -16px rgba(51,51,51,.28);
    --radius:16px; --maxw:1060px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family:'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background:
      radial-gradient(1100px 460px at 88% -8%, rgba(252,148,0,.14), transparent 60%),
      radial-gradient(900px 420px at 2% -6%, rgba(252,148,0,.10), transparent 58%),
      var(--bg);
    color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

  /* ---------- top bar ---------- */
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
  .brand{display:flex; align-items:center; text-decoration:none}
  .brand .logo{height:50px; width:auto; display:block}
  .lang{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:0 4px 14px -9px rgba(51,51,51,.4)}
  .lang button{appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; color:var(--muted); padding:7px 15px; border-radius:999px; transition:.18s}
  .lang button.active{background:var(--brand); color:#fff; box-shadow:0 6px 14px -6px rgba(252,148,0,.7)}

  /* ---------- hero ---------- */
  .hero{text-align:center; padding:20px 0 30px}
  .hero h1{font-size:clamp(26px,4.4vw,42px); line-height:1.12; margin:8px 0 10px; letter-spacing:-.6px; color:var(--ink)}
  .hero p{font-size:clamp(15px,2vw,18px); color:var(--muted); margin:0 auto; max-width:640px}
  .pill{display:inline-flex; align-items:center; gap:7px; background:var(--brand-soft); color:var(--brand-dark); font-weight:700; font-size:12.5px; padding:6px 14px; border-radius:999px; margin-bottom:8px}
  .pill svg{width:14px;height:14px}

  /* ---------- device chooser ---------- */
  .device-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:8px 0 40px}
  @media(max-width:820px){.device-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:430px){.device-grid{grid-template-columns:1fr}}
  .device{position:relative; appearance:none; font-family:inherit; text-align:left; cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px 22px; box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s, border-color .18s; overflow:hidden}
  .device:hover,.device:focus-visible{transform:translateY(-6px); box-shadow:0 24px 42px -20px rgba(252,148,0,.55); border-color:transparent; outline:none}
  .device::after{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--brand)}
  .device .ico{width:84px; height:84px; border-radius:18px; display:grid; place-items:center; margin-bottom:16px; background:var(--brand-soft); color:var(--brand-dark)}
  .device .ico svg{width:46px;height:46px}
  .device h3{margin:0 0 3px; font-size:18px; letter-spacing:-.2px; color:var(--ink)}
  .device .sub{margin:0; color:var(--muted); font-size:13.5px}
  .device .go{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:700; font-size:13.5px; color:var(--brand-dark)}
  .device .go svg{width:15px;height:15px; transition:transform .18s}
  .device:hover .go svg{transform:translateX(4px)}

  /* ---------- guide ---------- */
  .guide{padding-bottom:60px}
  .hidden{display:none !important}
  .back{display:inline-flex; align-items:center; gap:8px; font-family:inherit; background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:14px; padding:10px 16px; border-radius:999px; cursor:pointer; box-shadow:0 4px 14px -9px rgba(51,51,51,.4); transition:.15s}
  .back:hover{transform:translateX(-3px); border-color:var(--brand)}
  .back svg{width:16px;height:16px}

  .ghead{display:flex; align-items:center; gap:18px; margin:22px 0 6px}
  .ghead .ico{width:70px;height:70px; border-radius:18px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-dark); flex:none; box-shadow:var(--shadow)}
  .ghead .ico svg{width:40px;height:40px}
  .ghead h2{margin:0; font-size:clamp(22px,3vw,30px); letter-spacing:-.5px; color:var(--ink)}
  .ghead .sub{margin:2px 0 0; color:var(--muted)}

  .layout{display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:start; margin-top:24px}
  @media(max-width:880px){.layout{grid-template-columns:1fr}}

  .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
  .panel h3.sec{margin:0 0 16px; font-size:14px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted)}

  /* connection data card */
  .data{background:linear-gradient(150deg,#3c3c3c,#2a2a2a); color:#fff; border:0}
  .data h3.sec{color:var(--brand-light)}
  .data .row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1)}
  .data .row:last-child{border-bottom:0; padding-bottom:0}
  .data .row:first-of-type{padding-top:0}
  .data .k{color:#b9b9b9; font-size:13px}
  .data .v{display:flex; align-items:center; gap:10px; font-weight:700; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; word-break:break-all}
  .data .v.placeholder{font-family:inherit; font-weight:600; color:#d5d5d5; font-size:13.5px; font-style:italic}
  .copy{appearance:none; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#eee; width:30px;height:30px; border-radius:9px; cursor:pointer; display:grid; place-items:center; flex:none; transition:.15s}
  .copy:hover{background:var(--brand); border-color:var(--brand)}
  .copy svg{width:15px;height:15px}
  .copy.done{background:var(--ok); border-color:var(--ok); color:#fff}
  .data .hint{margin:16px 0 0; font-size:12.5px; color:#aeaeae; display:flex; gap:8px}
  .data .hint svg{width:15px;height:15px;flex:none;margin-top:2px}

  /* steps */
  .steps{list-style:none; margin:0; padding:0; counter-reset:s}
  .steps li{position:relative; padding:0 0 26px 56px}
  .steps li:last-child{padding-bottom:0}
  .steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:-2px; width:38px; height:38px; border-radius:50%; background:linear-gradient(150deg,var(--brand-light),var(--brand-dark)); color:#fff; font-weight:800; display:grid; place-items:center; box-shadow:0 6px 14px -6px var(--brand)}
  .steps li:not(:last-child)::after{content:""; position:absolute; left:18px; top:40px; bottom:8px; width:2px; background:var(--line)}
  .steps h4{margin:6px 0 4px; font-size:16px; color:var(--ink)}
  .steps p{margin:0; color:#5e5e5e; font-size:14.5px}
  .steps code{background:#f4f5f6; border:1px solid var(--line); border-radius:6px; padding:1px 7px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:var(--ink); font-weight:600}
  kbd{background:#fff; border:1px solid #cfcfcf; border-bottom-width:2px; border-radius:6px; padding:1px 7px; font-family:inherit; font-size:12.5px; font-weight:700; box-shadow:0 1px 0 #cfcfcf; color:#333}

  /* screenshots */
  figure.shot{margin:14px 0 4px}
  figure.shot .shotimg{max-width:450px; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 12px 26px -16px rgba(51,51,51,.5); background:#fff}
  figure.shot.phone .shotimg{max-width:236px}
  figure.shot .shotimg svg{display:block; width:100%; height:auto}
  figure.shot figcaption{margin:8px 0 0; font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px}
  figure.shot figcaption svg{width:13px;height:13px;flex:none}

  /* quick-connect (.rdp) callout */
  .quick{display:flex; gap:14px; align-items:flex-start; background:var(--brand-soft); border:1px solid #ffd9a8; border-radius:14px; padding:16px 18px; margin-bottom:22px}
  .quick-ic{width:42px;height:42px;border-radius:11px;background:linear-gradient(150deg,var(--brand-light),var(--brand));color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 8px 16px -8px var(--brand)}
  .quick-ic svg{width:22px;height:22px}
  .quick-body{flex:1;min-width:0}
  .quick-body h4{margin:0 0 4px;font-size:15.5px;color:var(--ink)}
  .quick-body p{margin:0 0 13px;font-size:13.5px;color:#8a5a1e;line-height:1.5}
  .quick-note{display:flex;gap:7px;align-items:flex-start;margin:0 0 9px !important;font-size:13px;font-weight:700;color:var(--brand-dark) !important}
  .quick-note svg{width:15px;height:15px;flex:none;margin-top:2px}
  .dlbtn.rdp{display:inline-flex;width:auto}

  .badge-builtin{display:flex; gap:11px; align-items:flex-start; background:#f0f8ef; border:1px solid #cfe8cd; color:#2f7a2c; border-radius:14px; padding:14px 16px; margin-bottom:22px; font-size:14px; font-weight:600}
  .badge-builtin svg{width:20px;height:20px;flex:none}

  .tip{display:flex; gap:11px; align-items:flex-start; background:var(--brand-soft); border:1px solid #ffdcae; color:#9a5a00; border-radius:14px; padding:13px 16px; margin-top:24px; font-size:13.5px}
  .tip svg{width:18px;height:18px;flex:none;margin-top:1px}

  /* download / qr */
  .dlbtn{display:flex; align-items:center; gap:12px; width:100%; text-decoration:none; background:linear-gradient(150deg,var(--brand-light),var(--brand)); color:#fff; padding:14px 18px; border-radius:14px; font-weight:700; box-shadow:0 12px 24px -12px var(--brand); transition:transform .15s, box-shadow .15s}
  .dlbtn:hover{transform:translateY(-2px); box-shadow:0 18px 30px -14px var(--brand)}
  .dlbtn .store-ico{width:26px;height:26px;flex:none}
  .dlbtn .lbl{display:flex; flex-direction:column; line-height:1.2}
  .dlbtn .lbl small{font-weight:600; font-size:11px; opacity:.9}
  .dlbtn .lbl span{font-size:15px}
  .dlbtn.secondary{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none}
  .dlbtn.secondary:hover{border-color:var(--brand); color:var(--brand-dark)}

  .qrcard{text-align:center; margin-top:18px}
  .qrcard .qrbox{width:184px; height:184px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:var(--shadow)}
  .qrcard .qrbox img{width:100%; height:100%; display:block}
  .qrcard p{margin:14px auto 0; max-width:230px; font-size:13px; color:var(--muted)}

  .help{margin-top:34px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
  .help h4{margin:0 0 4px; font-size:18px; color:var(--ink)}
  .help p{margin:0 0 14px; color:var(--muted); font-size:14.5px}
  .help a.support{display:inline-flex; align-items:center; gap:9px; text-decoration:none; background:linear-gradient(150deg,var(--brand-light),var(--brand)); color:#fff; font-weight:700; padding:12px 22px; border-radius:999px; box-shadow:0 12px 24px -12px var(--brand)}
  .help a.support svg{width:17px;height:17px}

  .sitefoot{text-align:center; color:var(--muted); font-size:13px; padding:26px 0 34px}

  .noscript{max-width:560px;margin:30px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;color:var(--muted)}
  @media(prefers-reduced-motion:reduce){*{transition:none !important}}

/* --------------------------------------------------------------------------
   Replacements for the inline style="" attributes the original page used
   inside its SVG mock screenshots. The site's CSP forbids inline styles, so
   they became classes; the rendering is identical.
   -------------------------------------------------------------------------- */
.ui-win   { font-family: 'Segoe UI', system-ui, sans-serif; }
.ui-mac   { font-family: -apple-system, 'SF Pro Text', Helvetica, sans-serif; }
.ui-droid { font-family: Roboto, system-ui, sans-serif; }
.mt-20    { margin-top: 20px; }