/* =========================================================
   Whitespace Counter
   File: whitespace-counter.css
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
}

.footer {
    width: 100%;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   MAIN PAGE
   ========================================================= */

.whitespace-counter-main {
    width: 100%;
}

.whitespace-counter-section {
    width: 100%;
    padding: 9.5rem 2rem 6rem;
}


/* =========================================================
   MAIN CONTENT + SIDEBAR
   ========================================================= */

.whitespace-counter-layout {
    display: grid;
    grid-template-columns: minmax(0, 900px) 300px;
    justify-content: center;
    align-items: start;

    gap: 2.5rem;

    width: 100%;
    max-width: 1230px;

    margin: 0 auto;
}

.whitespace-main-column {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   RAPTIVE / ADTHRIVE SIDEBAR
   ========================================================= */

.instagram-sidebar {
    width: 300px;
    min-width: 300px;

    align-self: stretch;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
}

.sidebar-ad {
    width: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
}


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

.tool-header {
    width: 100%;

    margin-bottom: 1.7rem;

    text-align: center;
}

.tool-header h1 {
    margin: 0 0 0.7rem;

    color: #222;

    font-size: 3.4rem;
    line-height: 1.2;

    font-weight: 700;
}

.tool-intro {
    max-width: 760px;

    margin: 0 auto;

    color: #555;

    font-size: 1.7rem;
    line-height: 1.55;

    font-weight: 400;
}


/* =========================================================
   CORE STATS
   ========================================================= */

.core-stats-section {
    width: 100%;

    margin-bottom: 0.9rem;
}

.core-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.8rem;

    width: 100%;
}

.core-stat-card {
    display: flex;
    flex-direction: column;

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

    min-width: 0;
    min-height: 105px;

    padding: 1rem 0.8rem;

    border: 1px solid #cfcfcf;
    border-radius: 7px;

    background: #fff;

    text-align: center;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.045);
}

.core-stat-label {
    display: flex;

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

    min-height: 30px;

    margin-bottom: 0.25rem;

    color: #444;

    font-size: 1.45rem;
    line-height: 1.3;

    font-weight: 600;
}

.core-stat-value {
    color: #1a73e8;

    font-size: 3.4rem;
    line-height: 1.05;

    font-weight: 600;

    overflow-wrap: anywhere;
}

.core-stat-details {
    min-height: 18px;

    margin-top: 0.25rem;

    color: #777;

    font-size: 1.18rem;
    line-height: 1.3;

    font-weight: 400;
}


/* =========================================================
   TEXT INPUT SECTION
   ========================================================= */

.text-input-section {
    width: 100%;

    margin-bottom: 0.35rem;
}


/* =========================================================
   TEXTAREA WRAPPER
   ========================================================= */

.textarea-wrapper {
    position: relative;

    width: 100%;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.whitespace-textarea {
    display: block;

    width: 100%;

    height: 280px;
    min-height: 140px;

    padding: 1.5rem 1.5rem 5.4rem;

    border: 2px solid #c7c7c7;
    border-radius: 8px;

    background: #fff;
    color: #222;

    font-family: inherit;

    font-size: 1.7rem;
    line-height: 1.6;

    resize: vertical;
    overflow-y: scroll;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.whitespace-textarea:hover {
    border-color: #999;
}

.whitespace-textarea:focus {
    border-color: #222;

    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.055);
}

.whitespace-textarea::placeholder {
    color: #888;
}


/* =========================================================
   COPY / CLEAR / UNDO
   ========================================================= */

.textarea-actions {
    position: absolute;

    right: 12px;
    bottom: 12px;

    display: flex;

    align-items: center;

    gap: 7px;

    z-index: 3;
}

.textarea-action-button {
    appearance: none;

    border: none;
    border-radius: 5px;

    padding: 0.72rem 1.15rem;

    background: rgba(0, 0, 0, 0.63);

    color: #fff;

    font-family: inherit;

    font-size: 1.32rem;
    line-height: 1;

    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.textarea-action-button:hover {
    background: rgba(0, 0, 0, 0.82);
}

.textarea-action-button:active {
    transform: translateY(1px);
}

.textarea-action-button:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

.textarea-action-button.undo-active {
    background: rgba(26, 115, 232, 0.84);
}

.textarea-action-button.undo-active:hover {
    background: rgba(26, 115, 232, 1);
}


/* =========================================================
   CHARACTER LIMIT MESSAGE
   ========================================================= */

.character-limit-message {
    margin: 0.45rem 0 0;

    padding: 0.9rem 1.1rem;

    border-radius: 6px;

    background: #fff3cd;
    color: #725900;

    font-size: 1.4rem;
    line-height: 1.45;
}


/* =========================================================
   LOWER WHITESPACE STATISTICS
   ========================================================= */

.whitespace-metrics-section {
    width: 100%;

    margin-top: 0;
    margin-bottom: 2rem;
}

.metrics-grid {
    display: grid;

    width: 100%;

    gap: 0.65rem;
}

.whitespace-statistics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   METRIC CARDS
   ========================================================= */

.metric-card {
    display: flex;

    flex-direction: column;

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

    min-width: 0;
    min-height: 88px;

    padding: 0.7rem;

    border: 1px solid #d1d1d1;
    border-radius: 7px;

    background: #fff;

    text-align: center;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.04);

    overflow: visible;
}

.metric-label {
    display: flex;

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

    min-height: 32px;

    margin-bottom: 0.2rem;

    color: #444;

    font-size: 1.36rem;
    line-height: 1.22;

    font-weight: 600;
}

.metric-value {
    color: #1a73e8;

    font-size: 2.3rem;
    line-height: 1.05;

    font-weight: 600;

    overflow-wrap: anywhere;
}


/* =========================================================
   METRIC INFO BUTTON
   ========================================================= */

.metric-info-wrapper {
    position: relative;

    display: inline-flex;

    align-items: center;

    margin-left: 0.45rem;

    flex-shrink: 0;
}

.metric-info-button {
    display: inline-flex;

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

    width: 17px;
    height: 17px;

    min-width: 17px;

    margin: 0;
    padding: 0;

    border: 1px solid #999;
    border-radius: 50%;

    background: transparent;
    color: #666;

    font-family: Arial, sans-serif;

    font-size: 1.05rem;
    line-height: 1;

    font-weight: 600;

    text-align: center;

    appearance: none;

    cursor: help;

    vertical-align: middle;

    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease;
}

.metric-info-button:hover,
.metric-info-button:focus {
    border-color: #1a73e8;

    background: #f4f8ff;
    color: #1a73e8;

    outline: none;
}

.metric-info-button:focus-visible {
    box-shadow:
        0 0 0 2px rgba(26, 115, 232, 0.16);
}


/* =========================================================
   METRIC TOOLTIPS
   ========================================================= */

.metric-tooltip {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 9px);

    z-index: 50;

    width: 230px;

    padding: 0.75rem 0.85rem;

    border: 1px solid #d2d2d2;
    border-radius: 6px;

    background: #fff;
    color: #444;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.13);

    font-size: 1.18rem;
    line-height: 1.45;

    font-weight: 400;

    text-align: left;

    white-space: normal;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(3px);

    transition:
        opacity 0.14s ease,
        visibility 0.14s ease,
        transform 0.14s ease;
}


/* Tooltip arrow */

.metric-tooltip::before {
    content: "";

    position: absolute;

    top: 100%;
    left: 50%;

    margin-left: -6px;

    border-width: 6px;
    border-style: solid;

    border-color:
        #d2d2d2
        transparent
        transparent
        transparent;
}

.metric-tooltip::after {
    content: "";

    position: absolute;

    top: 100%;
    left: 50%;

    margin-top: -1px;
    margin-left: -5px;

    border-width: 5px;
    border-style: solid;

    border-color:
        #fff
        transparent
        transparent
        transparent;
}


/* =========================================================
   SHOW TOOLTIP
   ========================================================= */

.metric-info-wrapper:hover .metric-tooltip,
.metric-info-wrapper:focus-within .metric-tooltip {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   DESKTOP LEFT COLUMN TOOLTIP
   ========================================================= */

.whitespace-statistics-grid
.metric-card:nth-child(3n + 1)
.metric-tooltip {
    right: auto;
    left: 0;

    transform:
        translateX(0)
        translateY(3px);
}

.whitespace-statistics-grid
.metric-card:nth-child(3n + 1)
.metric-info-wrapper:hover
.metric-tooltip,
.whitespace-statistics-grid
.metric-card:nth-child(3n + 1)
.metric-info-wrapper:focus-within
.metric-tooltip {
    transform:
        translateX(0)
        translateY(0);
}

.whitespace-statistics-grid
.metric-card:nth-child(3n + 1)
.metric-tooltip::before,
.whitespace-statistics-grid
.metric-card:nth-child(3n + 1)
.metric-tooltip::after {
    right: auto;
    left: 9px;

    margin-left: 0;
}


/* =========================================================
   DESKTOP RIGHT COLUMN TOOLTIP
   ========================================================= */

.whitespace-statistics-grid
.metric-card:nth-child(3n)
.metric-tooltip {
    right: 0;
    left: auto;

    transform:
        translateX(0)
        translateY(3px);
}

.whitespace-statistics-grid
.metric-card:nth-child(3n)
.metric-info-wrapper:hover
.metric-tooltip,
.whitespace-statistics-grid
.metric-card:nth-child(3n)
.metric-info-wrapper:focus-within
.metric-tooltip {
    transform:
        translateX(0)
        translateY(0);
}

.whitespace-statistics-grid
.metric-card:nth-child(3n)
.metric-tooltip::before,
.whitespace-statistics-grid
.metric-card:nth-child(3n)
.metric-tooltip::after {
    right: 9px;
    left: auto;

    margin-left: 0;
}


/* =========================================================
   INVISIBLE CHARACTER NOTICE
   ========================================================= */

.invisible-character-notice {
    width: 100%;

    margin: 0 0 2rem;

    padding: 1.15rem 1.3rem;

    border: 1px solid #f0c36d;
    border-radius: 7px;

    background: #fff8e6;
    color: #4d3b12;

    font-size: 1.45rem;
    line-height: 1.55;
}

.invisible-character-notice[hidden] {
    display: none;
}

.invisible-character-notice strong {
    display: block;

    margin-bottom: 0.25rem;

    color: #33270d;

    font-weight: 600;
}

.invisible-character-notice a {
    color: #1a73e8;

    text-decoration: none;
}

.invisible-character-notice a:hover {
    text-decoration: underline;
}


/* =========================================================
   WHITESPACE VISUALIZATION
   ========================================================= */

.whitespace-visualization-section {
    width: 100%;

    margin-bottom: 3rem;
}

.visualization-header {
    width: 100%;

    margin-bottom: 0.9rem;
}

.whitespace-output-title {
    margin: 0 0 0.35rem;

    color: #222;

    font-size: 2rem;
    line-height: 1.35;

    font-weight: 600;
}

.visualization-description,
.breakdown-description {
    margin: 0;

    color: #666;

    font-size: 1.4rem;
    line-height: 1.5;
}


/* =========================================================
   VISUALIZATION LEGEND
   ========================================================= */

.whitespace-legend {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 0.7rem 1.4rem;

    width: 100%;

    margin-bottom: 0.8rem;

    padding: 0.85rem 1rem;

    border: 1px solid #dedede;
    border-radius: 7px;

    background: #fafafa;
}

.legend-item {
    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    color: #555;

    font-size: 1.25rem;
    line-height: 1.35;

    white-space: nowrap;
}

.legend-marker {
    display: inline-flex;

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

    min-width: 25px;
    min-height: 23px;

    padding: 0.15rem 0.4rem;

    border-radius: 4px;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 1.15rem;
    line-height: 1;

    font-weight: 700;
}


/* Normal Space */

.legend-space {
    background: #dcecff;
    color: #1558a6;
}


/* Tab */

.legend-tab {
    background: #dff3e4;
    color: #26733b;
}


/* Line Break */

.legend-line-break {
    background: #fde2e2;
    color: #a12d2d;
}


/* Non-Breaking Space */

.legend-nbsp {
    background: #eee3ff;
    color: #6736a6;
}


/* Other Unicode Whitespace */

.legend-other {
    background: #ffe9d3;
    color: #9a5300;
}


/* =========================================================
   VISUALIZATION OUTPUT
   ========================================================= */

.whitespace-visualization {
    width: 100%;

    min-height: 160px;
    max-height: 500px;

    padding: 1.4rem 1.5rem;

    overflow: auto;

    border: 1px solid #d0d0d0;
    border-radius: 8px;

    background: #fff;
    color: #222;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 1.55rem;
    line-height: 1.75;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.045);

    outline: none;
}

.whitespace-visualization:focus-visible {
    border-color: #1a73e8;

    box-shadow:
        0 0 0 2px rgba(26, 115, 232, 0.1);
}

.visualization-placeholder {
    color: #888;

    font-family: inherit;

    font-style: italic;
}


/* =========================================================
   WHITESPACE MARKERS GENERATED BY JAVASCRIPT
   ========================================================= */

.whitespace-marker {
    display: inline;

    border-radius: 3px;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-weight: 600;
}


/* Ordinary Space */

.whitespace-space {
    padding: 0 0.08rem;

    background: #dcecff;
    color: #1558a6;
}


/* Tab */

.whitespace-tab {
    display: inline-block;

    min-width: 2.2rem;

    margin: 0 0.05rem;

    padding: 0 0.2rem;

    background: #dff3e4;
    color: #26733b;

    text-align: center;
}


/* Line Break */

.whitespace-line-break {
    display: inline-block;

    margin-left: 0.15rem;

    padding: 0 0.22rem;

    background: #fde2e2;
    color: #a12d2d;
}


/* Non-Breaking Space */

.whitespace-nbsp {
    display: inline-block;

    margin: 0 0.04rem;

    padding: 0 0.28rem;

    background: #eee3ff;
    color: #6736a6;

    font-size: 0.84em;
    line-height: 1.35;

    vertical-align: baseline;
}


/* Other Unicode Whitespace */

.whitespace-other {
    display: inline-block;

    margin: 0 0.04rem;

    padding: 0 0.28rem;

    background: #ffe9d3;
    color: #9a5300;

    font-size: 0.84em;
    line-height: 1.35;

    vertical-align: baseline;
}


/* Optional invisible-character marker */

.invisible-non-whitespace {
    display: inline-block;

    margin: 0 0.04rem;

    padding: 0 0.28rem;

    border: 1px dashed #c48300;
    border-radius: 3px;

    background: #fff6dc;
    color: #8a5800;

    font-size: 0.82em;
    line-height: 1.35;

    vertical-align: baseline;
}


/* =========================================================
   WHITESPACE BREAKDOWN
   ========================================================= */

.whitespace-breakdown-section {
    width: 100%;

    margin-bottom: 2.4rem;
}

.whitespace-breakdown-section .breakdown-description {
    margin-bottom: 0.85rem;
}


/* =========================================================
   TABLE CONTAINER
   ========================================================= */

.whitespace-table-container {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #d5d5d5;
    border-radius: 8px;

    background: #fff;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   TABLE
   ========================================================= */

.whitespace-table {
    width: 100%;

    border-collapse: collapse;

    background: #fff;

    color: #333;

    font-size: 1.45rem;
    line-height: 1.4;
}

.whitespace-table thead {
    background: #f7f7f7;
}

.whitespace-table th {
    padding: 1rem 1.2rem;

    border-bottom: 1px solid #d5d5d5;

    color: #333;

    font-size: 1.35rem;
    line-height: 1.35;

    font-weight: 600;

    text-align: left;
}

.whitespace-table td {
    padding: 1rem 1.2rem;

    border-bottom: 1px solid #ececec;

    vertical-align: middle;
}

.whitespace-table tbody tr:last-child td {
    border-bottom: none;
}

.whitespace-table tbody tr:hover {
    background: #fafafa;
}

.whitespace-table th:nth-child(2),
.whitespace-table td:nth-child(2) {
    color: #666;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 1.3rem;
}

.whitespace-table .count-column {
    width: 100px;

    color: #1a73e8;

    font-weight: 600;

    text-align: right;
}


/* =========================================================
   DYNAMIC OTHER-WHITESPACE TABLE ROWS
   ========================================================= */

.whitespace-table .dynamic-whitespace-row td:first-child {
    font-weight: 500;
}

.whitespace-table .dynamic-whitespace-row .count-column {
    color: #1a73e8;
}


/* =========================================================
   ADDITIONAL WHITESPACE MESSAGE
   ========================================================= */

.additional-whitespace-message {
    margin: 0.7rem 0 0;

    color: #777;

    font-size: 1.25rem;
    line-height: 1.45;
}

.additional-whitespace-message[hidden] {
    display: none;
}


/* =========================================================
   RELATED TOOL CALLOUT
   ========================================================= */

.related-tool-callout {
    width: 100%;

    margin: 0 0 4rem;

    padding: 1.15rem 1.35rem;

    border: 1px solid #d5d5d5;
    border-radius: 7px;

    background: #f8f9fa;
}

.related-tool-callout p {
    margin: 0;

    color: #444;

    font-size: 1.5rem;
    line-height: 1.55;
}

.related-tool-callout strong {
    color: #333;

    font-weight: 600;
}

.related-tool-callout a {
    color: #1a73e8;

    font-weight: 600;

    text-decoration: none;
}

.related-tool-callout a:hover {
    text-decoration: underline;
}


/* =========================================================
   INFORMATIONAL CONTENT
   ========================================================= */

.whitespace-counter-content {
    width: 100%;

    padding-top: 0.5rem;
}

.whitespace-counter-content h2 {
    margin: 3rem 0 1rem;

    color: #222;

    font-size: 2.35rem;
    line-height: 1.35;

    font-weight: 700;
}

.whitespace-counter-content h2:first-child {
    margin-top: 0;
}

.whitespace-counter-content h3 {
    margin: 2rem 0 0.65rem;

    color: #2b2b2b;

    font-size: 1.85rem;
    line-height: 1.4;

    font-weight: 650;
}

.whitespace-counter-content p {
    margin: 0 0 1.5rem;

    color: #444;

    font-size: 1.7rem;
    line-height: 1.72;

    font-weight: 300;
}

.whitespace-counter-content a {
    color: #1a73e8;

    text-decoration: none;
}

.whitespace-counter-content a:hover {
    text-decoration: underline;
}

.whitespace-counter-content strong {
    font-weight: 600;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.whitespace-textarea::-webkit-scrollbar,
.whitespace-visualization::-webkit-scrollbar,
.whitespace-table-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.whitespace-textarea::-webkit-scrollbar-track,
.whitespace-visualization::-webkit-scrollbar-track,
.whitespace-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.whitespace-textarea::-webkit-scrollbar-thumb,
.whitespace-visualization::-webkit-scrollbar-thumb,
.whitespace-table-container::-webkit-scrollbar-thumb {
    background: #b7b7b7;

    border-radius: 6px;

    border: 2px solid #f1f1f1;
}

.whitespace-textarea::-webkit-scrollbar-thumb:hover,
.whitespace-visualization::-webkit-scrollbar-thumb:hover,
.whitespace-table-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}


/* =========================================================
   FIREFOX SCROLLBARS
   ========================================================= */

.whitespace-textarea,
.whitespace-visualization,
.whitespace-table-container {
    scrollbar-width: auto;
    scrollbar-color: #b7b7b7 #f1f1f1;
}


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media screen and (max-width: 1100px) {

    .whitespace-counter-layout {
        grid-template-columns: minmax(0, 900px);

        max-width: 900px;
    }

    .instagram-sidebar {
        display: none;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 800px) {

    .whitespace-counter-section {
        padding:
            8.5rem
            1.5rem
            5rem;
    }

    .tool-header h1 {
        font-size: 3rem;
    }

    .tool-intro {
        font-size: 1.6rem;
    }

    .whitespace-statistics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Reset desktop tooltip positioning */

    .whitespace-statistics-grid
    .metric-card:nth-child(n)
    .metric-tooltip {
        right: auto;
        left: 50%;

        transform:
            translateX(-50%)
            translateY(3px);
    }

    .whitespace-statistics-grid
    .metric-card:nth-child(n)
    .metric-info-wrapper:hover
    .metric-tooltip,
    .whitespace-statistics-grid
    .metric-card:nth-child(n)
    .metric-info-wrapper:focus-within
    .metric-tooltip {
        transform:
            translateX(-50%)
            translateY(0);
    }

    .whitespace-statistics-grid
    .metric-card:nth-child(n)
    .metric-tooltip::before,
    .whitespace-statistics-grid
    .metric-card:nth-child(n)
    .metric-tooltip::after {
        right: auto;
        left: 50%;

        margin-left: -6px;
    }

    .whitespace-statistics-grid
    .metric-card:nth-child(n)
    .metric-tooltip::after {
        margin-left: -5px;
    }


    /* Left column */

    .whitespace-statistics-grid
    .metric-card:nth-child(odd)
    .metric-tooltip {
        right: auto;
        left: 0;

        transform:
            translateX(0)
            translateY(3px);
    }

    .whitespace-statistics-grid
    .metric-card:nth-child(odd)
    .metric-info-wrapper:hover
    .metric-tooltip,
    .whitespace-statistics-grid
    .metric-card:nth-child(odd)
    .metric-info-wrapper:focus-within
    .metric-tooltip {
        transform:
            translateX(0)
            translateY(0);
    }

    .whitespace-statistics-grid
    .metric-card:nth-child(odd)
    .metric-tooltip::before,
    .whitespace-statistics-grid
    .metric-card:nth-child(odd)
    .metric-tooltip::after {
        right: auto;
        left: 9px;

        margin-left: 0;
    }


    /* Right column */

    .whitespace-statistics-grid
    .metric-card:nth-child(even)
    .metric-tooltip {
        right: 0;
        left: auto;

        transform:
            translateX(0)
            translateY(3px);
    }

    .whitespace-statistics-grid
    .metric-card:nth-child(even)
    .metric-info-wrapper:hover
    .metric-tooltip,
    .whitespace-statistics-grid
    .metric-card:nth-child(even)
    .metric-info-wrapper:focus-within
    .metric-tooltip {
        transform:
            translateX(0)
            translateY(0);
    }

    .whitespace-statistics-grid
    .metric-card:nth-child(even)
    .metric-tooltip::before,
    .whitespace-statistics-grid
    .metric-card:nth-child(even)
    .metric-tooltip::after {
        right: 9px;
        left: auto;

        margin-left: 0;
    }

}


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

@media screen and (max-width: 600px) {

    .whitespace-counter-section {
        padding:
            8rem
            1rem
            4rem;
    }


    /* Header */

    .tool-header {
        margin-bottom: 1.35rem;
    }

    .tool-header h1 {
        margin-bottom: 0.55rem;

        font-size: 2.65rem;
        line-height: 1.18;
    }

    .tool-intro {
        max-width: 100%;

        font-size: 1.48rem;
        line-height: 1.5;
    }


    /* Main Stats */

    .core-stats-grid {
        gap: 0.6rem;
    }

    .core-stat-card {
        min-height: 92px;

        padding: 0.8rem 0.5rem;
    }

    .core-stat-label {
        min-height: 34px;

        font-size: 1.25rem;
        line-height: 1.25;
    }

    .core-stat-value {
        font-size: 2.8rem;
    }

    .core-stat-details {
        font-size: 1.05rem;
    }


    /* Textarea */

    .whitespace-textarea {
        height: 250px;
        min-height: 120px;

        padding:
            1.2rem
            1.2rem
            5rem;

        font-size: 1.6rem;
        line-height: 1.55;
    }

    .textarea-actions {
        right: 9px;
        bottom: 9px;

        gap: 6px;
    }

    .textarea-action-button {
        padding: 0.68rem 1rem;

        font-size: 1.25rem;
    }


    /* Lower Metrics */

    .whitespace-statistics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.55rem;
    }

    .metric-card {
        min-height: 82px;

        padding: 0.65rem 0.45rem;
    }

    .metric-label {
        min-height: 31px;

        font-size: 1.2rem;
    }

    .metric-value {
        font-size: 2.1rem;
    }


    /* Metric Info */

    .metric-info-wrapper {
        margin-left: 0.35rem;
    }

    .metric-info-button {
        width: 18px;
        height: 18px;

        min-width: 18px;

        font-size: 1.05rem;
    }

    .metric-tooltip {
        width: 205px;

        padding: 0.7rem 0.8rem;

        font-size: 1.12rem;
        line-height: 1.42;
    }


    /* Invisible Notice */

    .invisible-character-notice {
        padding: 1rem 1.1rem;

        font-size: 1.35rem;
    }


    /* Visualization */

    .whitespace-output-title {
        font-size: 1.85rem;
    }

    .visualization-description,
    .breakdown-description {
        font-size: 1.3rem;
    }

    .whitespace-legend {
        gap: 0.6rem 1rem;

        padding: 0.75rem 0.8rem;
    }

    .legend-item {
        font-size: 1.16rem;
    }

    .legend-marker {
        min-width: 23px;
        min-height: 21px;

        font-size: 1.05rem;
    }

    .whitespace-visualization {
        min-height: 140px;
        max-height: 420px;

        padding: 1.15rem;

        font-size: 1.42rem;
        line-height: 1.7;
    }


    /* Breakdown Table */

    .whitespace-table {
        min-width: 500px;

        font-size: 1.3rem;
    }

    .whitespace-table th {
        padding: 0.9rem 1rem;

        font-size: 1.25rem;
    }

    .whitespace-table td {
        padding: 0.9rem 1rem;
    }

    .whitespace-table th:nth-child(2),
    .whitespace-table td:nth-child(2) {
        font-size: 1.2rem;
    }


    /* Related Tool */

    .related-tool-callout {
        margin-bottom: 3rem;

        padding: 1rem 1.1rem;
    }

    .related-tool-callout p {
        font-size: 1.4rem;
    }


    /* Content */

    .whitespace-counter-content h2 {
        margin-top: 2.6rem;

        font-size: 2.1rem;
    }

    .whitespace-counter-content h3 {
        margin-top: 1.8rem;

        font-size: 1.72rem;
    }

    .whitespace-counter-content p {
        font-size: 1.58rem;
        line-height: 1.68;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {

    .whitespace-counter-section {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .tool-header h1 {
        font-size: 2.45rem;
    }


    /* Main Stats */

    .core-stat-card {
        min-height: 88px;
    }

    .core-stat-label {
        font-size: 1.17rem;
    }

    .core-stat-value {
        font-size: 2.55rem;
    }

    .core-stat-details {
        font-size: 1rem;
    }


    /* Lower Metrics */

    .metric-label {
        font-size: 1.13rem;
    }

    .metric-value {
        font-size: 1.95rem;
    }

    .metric-info-wrapper {
        margin-left: 0.3rem;
    }

    .metric-info-button {
        width: 17px;
        height: 17px;

        min-width: 17px;

        font-size: 1rem;
    }

    .metric-tooltip {
        width: 185px;

        font-size: 1.08rem;
    }


    /* Visualization */

    .whitespace-legend {
        align-items: flex-start;
    }

}