:root {
    --desktop: #185b7a;
    --desktop-deep: #104964;
    --window: #f5f5f5;
    --panel: #ffffff;
    --panel-soft: #f8f8f8;
    --ink: #1f1f1f;
    --muted: #686868;
    --line: #dddddd;
    --accent: #0067c0;
    --success: #107c10;
    --max: 980px;
    font-family: "Segoe UI", SegoeUI, Arial, sans-serif;
    color: var(--ink);
    background: var(--desktop);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    min-height: 100dvh;
    margin: 0;
    background: var(--desktop);
    color: var(--ink);
    line-height: 1.5;
}
.windows-desktop { position: relative; min-height: 100dvh; padding: clamp(24px, 5vw, 68px) 0 25px; overflow: hidden; }
.desktop-wallpaper,
.desktop-wallpaper::before,
.desktop-wallpaper::after { position: absolute; pointer-events: none; content: ""; }
.desktop-wallpaper { inset: 0; z-index: 0; background: var(--desktop); }
.desktop-wallpaper::before { inset: -20% -10%; background: linear-gradient(137deg, transparent 0 49%, rgba(255,255,255,.05) 49.2% 50%, transparent 50.2%), linear-gradient(42deg, transparent 0 67%, rgba(0,0,0,.1) 67.2% 69%, transparent 69.2%), radial-gradient(circle at 65% 32%, rgba(51, 177, 213, .28), transparent 26%); transform: rotate(-8deg); }
.desktop-wallpaper::after { right: 10%; bottom: 10%; width: 30vw; height: 30vw; max-width: 410px; max-height: 410px; border: 1px solid rgba(255,255,255,.07); transform: rotate(45deg); }
a { color: inherit; text-decoration: none; }
.app-window { position: relative; z-index: 1; width: min(calc(100% - 40px), var(--max)); margin-inline: auto; border: 1px solid rgba(0,0,0,.28); background: var(--window); box-shadow: 0 28px 65px rgba(0,0,0,.3); }
.window-titlebar { display: flex; align-items: center; justify-content: space-between; height: 47px; padding-left: 17px; background: rgba(255,255,255,.97); }
.window-app-name { display: flex; align-items: center; gap: 9px; color: #303030; font-size: 13px; }
.app-icon { display: grid; place-items: center; width: 20px; height: 20px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; }
.window-controls { display: flex; align-self: stretch; }
.window-controls span { display: grid; place-items: center; width: 46px; color: #333; font-size: 15px; font-weight: 300; }
.window-controls span:last-child { font-size: 21px; }
.window-controls span:hover { background: #e5e5e5; }
.window-controls span:last-child:hover { background: #c42b1c; color: #fff; }
.window-commandbar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 26px; border-top: 1px solid #ededed; border-bottom: 1px solid #d8d8d8; background: #fafafa; color: var(--muted); font-size: 12px; }
.command-location b { padding: 0 7px; color: #aaa; font-size: 16px; font-weight: 400; vertical-align: -1px; }
.command-state { color: var(--success); font-size: 11px; }
.command-state i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--success); }
.window-content { padding: 35px 52px 44px; background: var(--window); }
.content-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 23px; }
h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.05; }
.content-time { color: var(--muted); font-size: 11px; line-height: 1.35; text-align: right; }
.content-time strong { color: var(--ink); font-size: 12px; font-weight: 600; }
.info-panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr); border: 1px solid #d5d5d5; background: var(--panel); }
.ip-primary { padding: 30px 34px 34px; border-right: 1px solid var(--line); background: var(--panel-soft); }
.field-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.field-label span { display: inline-block; margin-right: 8px; font-size: 16px; vertical-align: -1px; }
.ip-display { display: block; margin-top: 50px; color: #1d1d1d; font-family: "Segoe UI Light", "Segoe UI", Arial, sans-serif; font-size: clamp(3.2rem, 6vw, 4.6rem); font-weight: 300; letter-spacing: -.09em; line-height: .9; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.detail-list { margin: 0; padding: 17px 30px 18px; }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; border-bottom: 1px solid var(--line); }
.detail-row:last-child { border-bottom: 0; }
.detail-row dt { display: flex; align-items: center; color: var(--muted); font-size: 13px; }
.detail-row dt span { width: 23px; margin-right: 7px; font-size: 16px; text-align: center; }
.detail-row dd { max-width: 61%; margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.detail-row dd small { margin-left: 6px; color: var(--accent); font-size: 10px; letter-spacing: .08em; }
.notice { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding: 10px 12px; border: 1px solid #e2b99f; background: #fff8f2; color: #7e4d2c; font-size: 12px; }
.notice span { font-size: 15px; }
.banner-carousel { margin-top: 30px; padding-top: 17px; border-top: 1px solid var(--line); }
.carousel-heading, .carousel-footer, .carousel-navigation { display: flex; align-items: center; justify-content: space-between; }
.carousel-heading { color: var(--ink); font-size: 13px; font-weight: 650; }
.carousel-heading small, .carousel-footer { color: var(--muted); font-size: 10px; font-weight: 400; }
.banner-viewport { margin-top: 10px; }
.banner-slide { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 118px; padding: 19px 23px; border: 1px solid #c9d8e7; background: #eaf3ff; color: #16395f; transition: box-shadow .2s ease, transform .2s ease; }
.banner-slide[hidden] { display: none; }
.banner-slide:hover, .banner-slide:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0, 0, 0, .12); }
.banner-violet { border-color: #d7cce8; background: #f2edfb; color: #49326d; }
.banner-indigo { border-color: #c9d4ec; background: #edf2ff; color: #28436f; }
.banner-orange { border-color: #e7d0b8; background: #fff3e5; color: #6b431f; }
.banner-symbol { font-size: 29px; text-align: center; }
.banner-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.banner-copy small { margin-bottom: 3px; color: currentColor; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.banner-copy strong { color: currentColor; font-size: 19px; font-weight: 650; line-height: 1.15; }
.banner-copy > span { margin-top: 3px; color: currentColor; font-size: 12px; opacity: .8; }
.banner-cta { color: currentColor; font-size: 12px; font-weight: 650; white-space: nowrap; }
.banner-cta b { margin-left: 5px; font-size: 17px; font-weight: 400; vertical-align: -1px; }
.carousel-footer { margin-top: 10px; }
.carousel-navigation { gap: 10px; }
.carousel-button { display: grid; place-items: center; width: 27px; height: 25px; padding: 0; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: inherit; font-size: 15px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.carousel-button:hover, .carousel-button:focus-visible { border-color: var(--accent); background: #f0f6fb; }
.carousel-button:active { transform: translateY(1px); }
.carousel-counter { color: var(--muted); font-size: 10px; }
.carousel-counter b { color: var(--ink); font-weight: 700; }
.network-sites { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.partners-heading { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--ink); font-size: 13px; font-weight: 600; }
.partners-heading small { color: var(--muted); font-size: 10px; font-weight: 400; text-transform: uppercase; }
.network-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.network-link { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.network-link:hover, .network-link:focus-visible { border-color: #b8cde0; background: #f0f6fb; transform: translateY(-1px); }
.network-mark { display: grid; flex: 0 0 27px; place-items: center; width: 27px; height: 27px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.network-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.network-copy strong { color: var(--ink); font-size: 12px; font-weight: 650; }
.network-copy span { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.network-arrow { color: var(--accent); font-size: 17px; }
.window-statusbar { display: flex; justify-content: space-between; min-height: 27px; padding: 5px 13px; border-top: 1px solid #d8d8d8; background: #f1f1f1; color: #666; font-size: 10px; }
.desktop-footer { display: flex; position: relative; z-index: 1; width: min(calc(100% - 40px), var(--max)); align-items: center; justify-content: space-between; gap: 14px; margin: 14px auto 0; color: rgba(255,255,255,.72); font-size: 10px; }
.footer-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.affiliate-disclosure { max-width: 650px; color: rgba(255,255,255,.68); line-height: 1.35; }
.privacy-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.privacy-links a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 2px; }
.privacy-links a:hover, .privacy-links a:focus-visible { color: #fff; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 10; padding: 8px 12px; transform: translateY(-160%); background: #fff; color: var(--accent); font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 800px) {
    .section-wrap { width: min(calc(100% - 28px), var(--max)); }
    .app-window { width: min(calc(100% - 24px), var(--max)); }
    .window-commandbar { padding-inline: 16px; }
    .window-content { padding: 27px 24px 34px; }
    .info-panel { grid-template-columns: 1fr; }
    .ip-primary { border-right: 0; border-bottom: 1px solid var(--line); }
    .detail-list { padding-inline: 24px; }
    .desktop-footer { width: min(calc(100% - 24px), var(--max)); }
}
@media (max-width: 520px) {
    .windows-desktop { padding-top: 12px; }
    .window-titlebar { height: 43px; padding-left: 12px; }
    .window-app-name { font-size: 12px; }
    .window-controls span { width: 38px; }
    .window-commandbar { min-height: 38px; font-size: 11px; }
    .command-state { display: none; }
    .window-content { padding: 23px 15px 27px; }
    .content-heading { align-items: flex-start; flex-direction: column; gap: 9px; margin-bottom: 18px; }
    .content-time { text-align: left; }
    h1 { font-size: 2rem; }
    .ip-primary { padding: 24px 20px 29px; }
    .ip-display { margin-top: 38px; font-size: clamp(2.55rem, 14vw, 4.1rem); }
    .detail-list { padding: 10px 20px 12px; }
    .detail-row { min-height: 56px; gap: 12px; }
    .detail-row dd { max-width: 56%; }
    .banner-slide { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; min-height: 116px; padding: 17px 15px; }
    .banner-symbol { font-size: 25px; }
    .banner-cta { grid-column: 2; grid-row: 2; }
    .carousel-footer { align-items: flex-start; gap: 12px; }
    .network-list { grid-template-columns: 1fr; }
    .desktop-footer { flex-direction: column; text-align: center; }
    .footer-copy { align-items: center; }
    .privacy-links { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}