:root {
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:#20302c;
    background:#f6f7f5;
    font-synthesis:none;
    font-size:14px
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
main {
    max-width:1120px;
    margin:auto;
    padding:0 40px
}
button,input,textarea {
    font:inherit
}
button,a,input,textarea {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
button:disabled {
    cursor:default;
    opacity:.5
}
a {
    color:inherit;
    text-decoration:none
}
[hidden] {
    display:none!important
}
.topbar {
    height:96px;
    border-bottom:1px solid #dde2dc;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    font-size:23px;
    font-weight:750;
    letter-spacing:-1px
}
.brand-mark {
    width:32px;
    height:32px;
    border-radius:9px;
    background:#1f5545;
    color:#fff;
    text-align:center;
    line-height:29px;
    font-size:25px
}
.brand-divider {
    font-weight:400;
    color:#b9c2ba;
    margin:0 6px
}
.brand-sub {
    font-weight:450;
    letter-spacing:0;
    font-size:13px;
    color:#778078
}
.badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid #dce3da;
    background:#fbfcfa;
    border-radius:20px;
    padding:7px 11px;
    font-size:11px;
    color:#647067;
    white-space:nowrap
}
.dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#5e896b
}
.heading {
    padding:48px 0 30px
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.8px;
    color:#63816c;
    font-weight:750;
    margin-bottom:14px
}
h1 {
    font-size:46px;
    line-height:1.13;
    font-weight:550;
    letter-spacing:-2px;
    margin:0 0 18px
}
p {
    line-height:1.65;
    color:#7a847c;
    margin:8px 0 0
}
.heading p {
    font-size:14px
}
.steps {
    display:flex;
    gap:35px;
    padding:0 0 27px;
    font-size:12px;
    color:#8a938b
}
.steps span {
    display:flex;
    gap:9px;
    align-items:center
}
.steps b {
    font-size:10px;
    font-weight:550;
    display:inline-grid;
    place-items:center;
    width:23px;
    height:23px;
    border:1px solid #dce3d9;
    border-radius:50%
}
.steps .active {
    color:#315e46
}
.steps .active b {
    background:#e7eee2;
    border-color:#d1dfc9
}
.panel {
    background:#fff;
    border:1px solid #dde3db;
    border-radius:12px;
    box-shadow:0 3px 8px #20302c03;
    margin-bottom:22px;
    overflow:hidden
}
.panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 26px
}
.panel-head h2 {
    font-size:16px;
    font-weight:600;
    margin:0;
    letter-spacing:-.3px
}
.panel-head p {
    font-size:12px;
    margin-top:6px
}
.count {
    display:inline-block;
    font-size:10px;
    background:#edf1e9;
    color:#648158;
    padding:3px 7px;
    border-radius:5px;
    margin-left:6px;
    vertical-align:middle
}
.tabs {
    border:1px solid #e4e8df;
    background:#f6f7f3;
    border-radius:7px;
    padding:3px;
    display:flex;
    white-space:nowrap
}
.tabs button {
    border:0;
    border-radius:5px;
    background:none;
    font-size:11px;
    padding:7px 12px;
    color:#7c857d
}
.tabs button[aria-selected=true] {
    background:#fff;
    box-shadow:0 1px 4px #00000012;
    color:#2e4838
}
.table-scroll {
    overflow:auto
}
table {
    border-collapse:collapse;
    width:100%;
    text-align:left
}
th {
    background:#fafbf8;
    color:#838d82;
    font-size:10px;
    letter-spacing:.5px;
    font-weight:550;
    border-top:1px solid #edf0e9;
    border-bottom:1px solid #edf0e9;
    padding:13px 12px
}
td {
    padding:15px 12px;
    border-bottom:1px solid #edf0e9
}
.editor {
    min-width:650px
}
.number,.row-number {
    width:48px;
    text-align:center
}
.row-number {
    font-family:monospace;
    font-size:11px;
    color:#99a195
}
.editor th:nth-child(4) {
    width:140px
}
.editor th:last-child {
    width:48px
}
.editor input {
    width:100%;
    min-width:0;
    border:1px solid #dfe5da;
    border-radius:6px;
    padding:10px 11px;
    outline:0;
    color:#283c30;
    background:#fff;
    font-size:12px
}
.editor input::placeholder {
    color:#b0b6ad
}
.editor input:focus,textarea:focus {
    border-color:#6b8c67;
    box-shadow:0 0 0 3px #6b8c6716
}
.digits {
    font-family:monospace;
    letter-spacing:2px
}
.remove {
    border:0;
    background:none;
    color:#a5ada0;
    font-size:22px;
    padding:2px 6px
}
.remove:hover {
    color:#aa4848
}
.add-button {
    border:0;
    background:none;
    color:#55704c;
    font-size:12px;
    font-weight:550;
    margin:16px 26px;
    padding:3px 0
}
.panel-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:#fcfdfb;
    border-top:1px solid #edf0e9;
    padding:18px 26px
}
.hint {
    font-size:11px;
    color:#8c9588;
    line-height:1.6
}
.primary {
    border:1px solid #25533b;
    border-radius:7px;
    background:#27583e;
    color:white;
    padding:11px 17px;
    font-size:12px;
    font-weight:500;
    box-shadow:0 2px 3px #143f2220;
    white-space:nowrap
}
.primary:hover {
    background:#1f4932
}
.primary span {
    margin-left:16px
}
#json-panel {
    padding:0 26px 22px
}
label {
    display:block;
    font-size:12px;
    margin-bottom:10px
}
textarea {
    display:block;
    width:100%;
    resize:vertical;
    background:#fbfcf9;
    color:#354333;
    border:1px solid #dfe5da;
    border-radius:7px;
    padding:16px;
    font:12px/1.7 ui-monospace,SFMono-Regular,monospace;
    outline:0
}
.info {
    display:flex;
    gap:13px;
    padding:3px 4px 27px;
    color:#75816f;
    max-width:820px
}
.info-icon {
    flex-shrink:0;
    display:grid;
    place-items:center;
    border:1px solid #bdcdb4;
    border-radius:50%;
    width:17px;
    height:17px;
    font:11px Georgia;
    margin-top:1px
}
.info strong {
    font-size:11px;
    font-weight:550;
    color:#5e7057
}
.info p {
    font-size:11px;
    line-height:1.8;
    margin-top:5px
}
code {
    font:11px ui-monospace,SFMono-Regular,monospace;
    color:#617459;
    background:#eef2e9;
    padding:1px 4px;
    border-radius:3px
}
footer {
    border-top:1px solid #dde2dc;
    display:flex;
    justify-content:space-between;
    padding:20px 0 28px;
    color:#9ba394;
    font-size:9px;
    letter-spacing:1px
}
footer span:last-child {
    letter-spacing:0
}
.notice {
    padding:14px 18px;
    margin:0 0 20px;
    border:1px solid;
    border-radius:8px;
    font-size:12px;
    line-height:1.6;
    overflow-wrap:anywhere
}
.error {
    background:#fff5f3;
    border-color:#ebc9c4;
    color:#9b443a
}
.success {
    background:#edf6ed;
    border-color:#bdd7b6;
    color:#326138
}
.review {
    min-width:680px
}
.review td {
    font-size:12px;
    vertical-align:top
}
.review td:first-child,.review th:first-child {
    padding-left:26px
}
.review strong {
    font-size:12px;
    font-weight:550
}
.review small {
    display:block;
    font-size:11px;
    color:#8a9287;
    margin-top:6px
}
.review del {
    color:#969d92;
    font-size:11px
}
.review small.new-owner {
    color:#39704a
}
.extension {
    display:inline-block;
    padding:5px 8px;
    border:1px solid #e0e7da;
    border-radius:5px;
    font-family:monospace;
    background:#f8faf5
}
.preview .eyebrow {
    margin-bottom:8px
}
.preview-actions {
    display:flex;
    align-items:center;
    gap:10px
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
}
button:focus-visible,a:focus-visible {
    outline:2px solid #62875d;
    outline-offset:3px
}
.login-page {
    max-width: 490px;
    padding-top: 80px;
}
.login-page > .brand {
    justify-content: center;
    margin-bottom: 30px;
}
.login-card {
    padding: 32px;
}
.login-card h1 {
    font-size: 30px;
    letter-spacing: -1px;
}
.login-card > p {
    margin: 0 0 26px;
}
.login-card input:not([type=hidden]) {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #dfe5da;
    border-radius: 6px;
    margin-bottom: 20px;
    outline: none;
}
.login-card input:focus {
    border-color: #6b8c67;
    box-shadow: 0 0 0 3px #6b8c6716;
}
.login-card .primary {
    width: 100%;
    margin: 4px 0 20px;
}
.login-card > p.hint {
    margin: 0;
    text-align: center;
}
.logout-form {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sign-out {
    padding: 8px 11px;
    border: 1px solid #dce3da;
    border-radius: 6px;
    color: #315e46;
    background: #fff;
    font-size: 12px;
}
@media(max-width:700px) {
    main {
        padding:0 18px
    }
    .topbar {
        height:75px
    }
    .brand-sub,.brand-divider,.topbar>.badge {
        display:none
    }
    .heading {
        padding-top:34px
    }
    h1 {
        font-size:37px
    }
    .steps {
        gap:15px;
        font-size:10px
    }
    .steps b {
        display:none
    }
    .panel-head {
        padding:20px 16px;
        align-items:flex-start;
        flex-direction:column;
        gap:15px
    }
    .panel-foot {
        padding:16px;
        align-items:flex-start;
        flex-direction:column
    }
    .primary {
        width:100%
    }
    .add-button {
        margin-left:16px
    }
    #json-panel {
        padding:0 16px 18px
    }
    footer {
        gap:20px;
        line-height:1.6
    }
    .info {
        padding-left:0
    }
}