:root {
            --bg: #faf6ef;
            --card: #fff;
            --ink: #1c2a44;
            --mute: #5d6678;
            --line: #e6dfd2;
            --amber: #e8a03a;
            --green: #0f7a45;
            --foot: #1c2a44;
            box-sizing: border-box;
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px)
        }

        @media (prefers-color-scheme:dark) {
            :root:not([data-theme="light"]) {
                --bg: #141b2b;
                --card: #1c2538;
                --ink: #eee8dc;
                --mute: #9aa3b5;
                --line: #2c3750;
                --foot: #0e1420
            }
        }

        :root[data-theme="dark"] {
            --bg: #141b2b;
            --card: #1c2538;
            --ink: #eee8dc;
            --mute: #9aa3b5;
            --line: #2c3750;
            --foot: #0e1420
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-padding-top: env(safe-area-inset-top, 0px)
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font: 400 16px/1.6 "Source Sans 3", system-ui, sans-serif
        }

        a {
            color: inherit;
            text-underline-offset: 3px
        }

        header {
            background: var(--card);
            border-bottom: 1px solid var(--line)
        }

        .bar {
            max-width: 1000px;
            margin: auto;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap
        }

        .logo {
            font: 800 17px "Barlow Condensed", sans-serif;
            letter-spacing: .06em;
            text-decoration: none;
            margin-right: auto
        }

        .logo b {
            color: var(--amber)
        }

        nav {
            display: flex;
            gap: 18px;
            font-size: 14px
        }

        nav a {
            text-decoration: none
        }

        .btn {
            padding: 9px 16px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 14px;
            text-decoration: none;
            color: #1c2a44;
            background: var(--amber)
        }

        .btn.g {
            background: var(--green);
            color: #fff
        }

        main {
            max-width: 620px;
            margin: 0 0 0 max(20px, calc((100vw - 1120px)/2));
            padding: 30px 20px 60px 0
        }

        @media(max-width:700px) {
            main {
                margin: 0;
                padding: 20px
            }
        }

        .crumb {
            font-size: 13px;
            color: var(--mute)
        }

        h1 {
            font: 800 40px/1.1 "Barlow Condensed", sans-serif;
            margin: 28px 0 6px
        }

        .upd {
            font-size: 13px;
            color: var(--mute);
            margin: 0 0 18px
        }

        .short {
            background: var(--card);
            border: 1px solid var(--line);
            border-left: 4px solid var(--amber);
            border-radius: 10px;
            padding: 16px 20px;
            margin: 22px 0 28px
        }

        .short h2 {
            font: 700 12px "Source Sans 3", sans-serif;
            letter-spacing: .12em;
            color: #9a6a12;
            margin: 0 0 8px
        }

        .short ul {
            margin: 0;
            padding-left: 20px;
            font-size: 14.5px
        }

        .short li {
            margin: 6px 0
        }

        .short p {
            font-size: 12px;
            color: var(--mute);
            margin: 10px 0 0
        }

        h2.s {
            font: 700 26px/1.2 "Barlow Condensed", sans-serif;
            margin: 44px 0 12px
        }

        ol {
            list-style: none;
            margin: 0;
            padding: 0
        }

        ol li {
            display: grid;
            grid-template-columns: 32px 1fr;
            margin: 0 0 12px;
            font-size: 15.5px
        }

        ol li span {
            color: var(--mute);
            font-size: 14px
        }

        .legal {
            border-top: 1px solid var(--line);
            margin-top: 44px;
            padding-top: 14px;
            font-size: 13px;
            color: var(--mute)
        }

        .see {
            border-top: 1px solid var(--line);
            margin-top: 28px;
            padding-top: 14px;
            font-size: 14px
        }

        .see h3 {
            font: 600 11px "Source Sans 3", sans-serif;
            letter-spacing: .14em;
            color: var(--mute);
            margin: 0 0 8px
        }

        .see p {
            margin: 6px 0
        }

        footer {
            background: var(--foot);
            color: #d9dde6;
            padding: 32px 20px;
            font-size: 14px
        }

        .fw {
            max-width: 1000px;
            margin: auto;
            display: flex;
            gap: 40px;
            flex-wrap: wrap
        }

        .fw>div {
            flex: 1 1 180px
        }

        .fw h4 {
            margin: 0 0 8px;
            color: var(--amber);
            font-size: 13px
        }

        .fw a {
            display: block;
            margin: 6px 0;
            text-decoration: none
        }