:root {
    --green: #16864b;
    --green-light: #edf8f2;
    --text: #202422;
    --sub-text: #727873;
    --border: #e2e6e3;
    --background: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--background);
    color: var(--text);
}

.container {
    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    padding:
        24px
        18px
        50px;
}


/* ==============================
   HEADER
============================== */

.site-header {
    padding-bottom: 18px;

    border-bottom:
        1px solid
        var(--border);
}

h1 {
    margin: 0;

    font-size: 23px;
    font-weight: 800;

    letter-spacing: -0.4px;
}

.title-dot {
    color: var(--green);
}

.tool-list {
    margin:
        8px
        0
        0;

    color: var(--sub-text);

    font-size: 12px;
    line-height: 1.7;
}


/* ==============================
   TOOLS
============================== */

.tools {
    border-bottom:
        1px solid
        var(--border);
}

.tool-row {
    min-height: 72px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding:
        15px
        2px;

    border-bottom:
        1px solid
        var(--border);
}

.tool-row:last-child {
    border-bottom: none;
}

.tool-row.active {
    color: var(--text);

    text-decoration: none;
}

.tool-row.active:active {
    background: var(--green-light);
}

.tool-main {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.tool-name {
    font-size: 16px;
    font-weight: 750;
}

.active .tool-name {
    color: var(--green);
}

.tool-description {
    color: var(--sub-text);

    font-size: 12px;
}

.arrow {
    flex-shrink: 0;

    color: var(--green);

    font-size: 20px;
}

.coming {
    opacity: 0.55;
}

.coming-label {
    flex-shrink: 0;

    color: var(--sub-text);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.7px;
}


/* ==============================
   UPDATE LOG
============================== */

.update-section {
    padding-top: 28px;
}

.update-section h2 {
    margin:
        0
        0
        14px;

    color: var(--green);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.update-row {
    display: grid;

    grid-template-columns:
        82px
        minmax(0, 1fr);

    gap: 10px;

    padding:
        9px
        0;

    border-bottom:
        1px solid
        var(--border);
}

.update-row time {
    color: var(--sub-text);

    font-size: 11px;
    line-height: 1.6;
}

.update-row p {
    margin: 0;

    font-size: 12px;
    line-height: 1.6;
}


/* ==============================
   FOOTER
============================== */

footer {
    margin-top: 36px;

    color: #a0a5a1;

    font-size: 10px;

    text-align: center;
}


/* ==============================
   MOBILE
============================== */

@media (max-width: 360px) {

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    h1 {
        font-size: 21px;
    }

    .tool-list {
        font-size: 11px;
    }

}