:root {
    --bg: #ebe9e3;
    --panel: #f5f3ed;
    --ink: #171714;
    --muted: #77746c;
    --line: #b8b4aa;
    --land: #23231f;
    --ocean: #d7d4ca;
    --accent: #ff5c35;
    --mixblendmode-tissot: normal;
}


/* ---------------------------------------
   RESET
--------------------------------------- */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    background: var(--bg);
    color: var(--ink);

    font-family: "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
}


button,
input {
    font: inherit;
}


/* ---------------------------------------
   APP
--------------------------------------- */

.app {
    width: min(
            1500px,
            calc(100% - 48px)
    );

    margin: 0 auto;

    padding: 42px 0 60px;
}


/* ---------------------------------------
   HEADER
--------------------------------------- */

.page-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 30px;
}


.eyebrow,
.label,
.toolbar-label,
.fact-label {
    margin: 0;

    font-family: monospace;
    font-size: 11px;
    letter-spacing: 0.14em;

    color: var(--muted);
}


.eyebrow {
    margin-bottom: 8px;
}


h1 {
    margin: 0;

    font-size: clamp(
            56px,
            8vw,
            118px
    );

    font-weight: 500;

    line-height: 0.87;

    letter-spacing: -0.065em;
}


.intro {
    max-width: 650px;

    margin: 28px 0 0;

    font-size: 17px;
    line-height: 1.45;
}


.status {
    flex: 0 0 auto;

    padding: 10px 14px;

    font-family: monospace;
    font-size: 12px;
}


.status[data-state="error"] {
    background: var(--accent);
}


/* ---------------------------------------
   MAIN
--------------------------------------- */

main {
    display: grid;

    gap: 18px;
}


/* ---------------------------------------
   MAP CARD
--------------------------------------- */

.map-card,
.controls-panel {
    background: var(--panel);

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


.map-card {
    min-width: 0;

    overflow: hidden;
}


/* ---------------------------------------
   TOOLBAR
--------------------------------------- */

.map-toolbar {
    display: grid;

    grid-template-columns:
    1fr
    auto
    1fr;

    align-items: center;

    gap: 20px;

    min-height: 64px;

    padding: 10px 14px;

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


/* ---------------------------------------
   MERIDIAN
--------------------------------------- */

.meridian-readout {
    justify-self: start;

    display: flex;

    align-items: baseline;

    gap: 10px;

    font-family: monospace;
}


.meridian-readout strong {
    font-size: 13px;

    font-weight: 500;
}


/* ---------------------------------------
   DRAG CONTROL
--------------------------------------- */

.drag-control {
    justify-self: center;

    display: flex;

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

    gap: 11px;

    padding: 8px 12px;

    border: 1px solid var(--ink);

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 0.1em;

    cursor: ew-resize;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    transition: background 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}


.drag-control * {
    pointer-events: none;

    user-select: none;
    -webkit-user-select: none;
}


.drag-control:hover,
.drag-control:focus-visible,
.drag-control.is-dragging {
    background: var(--ink);

    color: var(--panel);

    outline: none;
}


.drag-control.is-dragging {
    transform: scale(0.98);
}


/* ---------------------------------------
   MOVING ARROWS
--------------------------------------- */

.drag-arrow {
    display: inline-block;

    font-size: 17px;

    line-height: 1;

    letter-spacing: 0;
}


.drag-arrow-left {
    animation: nudge-left 1.6s ease-in-out infinite;
}


.drag-arrow-right {
    animation: nudge-right 1.6s ease-in-out infinite;
}


@keyframes nudge-left {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-5px);
    }

}


@keyframes nudge-right {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }

}


.drag-control.is-dragging
.drag-arrow {
    animation-play-state: paused;
}


/* ---------------------------------------
   RIGHT TOOLBAR
--------------------------------------- */

.toolbar-actions {
    justify-self: end;

    display: flex;

    align-items: center;

    gap: 16px;
}


/* ---------------------------------------
   PROJECTION SWITCH
--------------------------------------- */

.projection-switch {
    display: flex;

    border: 1px solid var(--ink);

    user-select: none;
    -webkit-user-select: none;
}


.projection-button {
    min-height: 32px;

    padding: 0 10px;

    border: 0;

    background: transparent;

    color: var(--ink);

    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.08em;

    cursor: pointer;
}


.projection-button + .projection-button {
    border-left: 1px solid var(--ink);
}


.projection-button.active {
    background: var(--ink);

    color: var(--panel);
}


.projection-button:focus-visible {
    outline: 2px solid var(--accent);

    outline-offset: 3px;
}


/* ---------------------------------------
   DISTORTION TOGGLE
--------------------------------------- */

.distortion-toggle {
    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
}


.distortion-label {
    font-family: monospace;

    font-size: 9px;

    letter-spacing: 0.08em;

    color: var(--muted);
}


.distortion-toggle input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.switch {
    position: relative;

    display: block;

    width: 34px;

    height: 18px;

    border: 1px solid var(--ink);

    background: transparent;

    transition: background 140ms ease;
}


.switch-knob {
    position: absolute;

    top: 3px;
    left: 3px;

    width: 10px;
    height: 10px;

    background: var(--ink);

    transition: transform 140ms ease,
    background 140ms ease;
}


.distortion-toggle
input:checked
+
.switch {
    background: var(--ink);
}


.distortion-toggle
input:checked
+
.switch
.switch-knob {
    background: var(--accent);

    transform: translateX(16px);
}


.distortion-toggle
input:focus-visible
+
.switch {
    outline: 2px solid var(--accent);

    outline-offset: 3px;
}


/* ---------------------------------------
   MAP STAGE
--------------------------------------- */

.map-stage {
    position: relative;

    isolation: isolate;

    overflow: hidden;
}


/* ---------------------------------------
   MAIN MAP
--------------------------------------- */

#map {
    display: block;

    width: 100%;
    height: auto;

    cursor: grab;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


#map.is-dragging {
    cursor: grabbing;
}


/* ---------------------------------------
   MAP GEOMETRY
--------------------------------------- */

.map-sphere {
    fill: var(--ocean);

    stroke: var(--ink);

    stroke-width: 1.2;
}


.map-graticule {
    fill: none;

    stroke: var(--ink);

    stroke-width: 0.5;

    opacity: 0.28;
}


.map-countries path {
    fill: var(--land);

    stroke: var(--panel);

    stroke-width: 0.45;
}


/* ---------------------------------------
   TISSOT — MAIN MAP
--------------------------------------- */

.map-tissot path {
    fill: var(--accent);

    fill-opacity: 0.6;

    stroke: var(--accent);

    stroke-width: 0.7;

    vector-effect: non-scaling-stroke;

    mix-blend-mode: var(--mixblendmode-tissot);


    pointer-events: none;
}


/* ---------------------------------------
   MINI GLOBE
--------------------------------------- */

.globe-wrap {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 168px;

    padding: 9px;

    background: rgba(245, 243, 237, 0.1);

    border: 1px solid var(--line);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


.globe-header {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 4px;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 0.1em;

    color: var(--muted);
}


#globe {
    display: block;

    width: 100%;
    height: auto;

    cursor: ew-resize;

    touch-action: none;

    user-select: none;
    -webkit-user-select: none;

    outline: none;
}


#globe.is-dragging {
    cursor: grabbing;
}


#globe:focus-visible {
    outline: 1px solid var(--ink);

    outline-offset: 3px;
}


/* ---------------------------------------
   GLOBE GEOMETRY
--------------------------------------- */

.globe-sphere {
    fill: var(--ocean);

    stroke: var(--ink);

    stroke-width: 1.2;
}


.globe-graticule {
    fill: none;

    stroke: var(--ink);

    stroke-width: 0.55;

    opacity: 0.25;
}


.globe-countries path {
    fill: var(--land);

    stroke: var(--panel);

    stroke-width: 0.35;
}

.globe-tissot {
}

.globe-tissot path {
    fill: var(--accent);

    fill-opacity: 0.6;

    stroke: var(--accent);

    stroke-width: 0.55;

    mix-blend-mode: var(--mixblendmode-tissot);


    pointer-events: none;
}


/* =======================================
   LAB BELOW MAP
======================================= */

.controls-panel {
    padding: 24px;
}


.projection-controls[hidden] {
    display: none;
}


/* ---------------------------------------
   EQUAL EARTH FORMULAS
--------------------------------------- */

.formula-grid {
    display: grid;

    grid-template-columns:
    repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.formula {
    min-width: 0;
}


.equation {
    margin-top: 8px;

    font-family: Georgia,
    "Times New Roman",
    serif;

    font-size: 20px;

    line-height: 1.35;
}


.equation-small {
    font-size: 17px;
}


.equation-large {
    font-size: clamp(
            24px,
            3vw,
            40px
    );
}


.small {
    margin-top: 7px;

    color: var(--muted);

    font-family: monospace;

    font-size: 11px;
}


/* ---------------------------------------
   COEFFICIENTS
--------------------------------------- */

.coefficient-section {
    margin-top: 26px;

    padding-top: 22px;

    border-top: 1px solid var(--line);
}


.coefficient-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 20px;
}


.coefficient-intro {
    max-width: 620px;

    margin: 7px 0 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.45;
}


/* ---------------------------------------
   SLIDERS
--------------------------------------- */

.sliders {
    display: grid;

    grid-template-columns:
    repeat(4, minmax(0, 1fr));

    gap: 24px;
}


.control {
    display: block;
}


.control > span {
    display: flex;

    justify-content: space-between;

    margin-bottom: 9px;
}


code,
output {
    font-family: monospace;

    font-size: 12px;
}


input[type="range"] {
    width: 100%;

    accent-color: var(--accent);
}


/* ---------------------------------------
   RESET BUTTON
--------------------------------------- */

.reset-button {
    flex: 0 0 auto;

    padding: 9px 12px;

    border: 1px solid var(--ink);

    background: transparent;

    color: inherit;

    font-family: monospace;

    font-size: 10px;

    letter-spacing: 0.08em;

    cursor: pointer;
}


.reset-button:hover {
    background: var(--ink);

    color: var(--panel);
}


.reset-button:focus-visible {
    outline: 2px solid var(--accent);

    outline-offset: 3px;
}


/* ---------------------------------------
   MERCATOR
--------------------------------------- */

.mercator-grid {
    display: grid;

    grid-template-columns:
    repeat(2, minmax(0, 1fr))
    minmax(260px, 0.8fr);

    gap: 30px;
}


.mercator-formula {
    padding-right: 30px;

    border-right: 1px solid var(--line);
}


.formula-copy {
    max-width: 430px;

    margin: 14px 0 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.45;
}


.mercator-facts {
    display: grid;

    gap: 18px;
}


.fact {
    display: grid;

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

    column-gap: 16px;
}


.fact-label {
    grid-row: 1 / span 2;
}


.fact strong {
    font-family: Georgia,
    "Times New Roman",
    serif;

    font-size: 20px;

    font-weight: 400;
}


.fact p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.45;
}


/* ---------------------------------------
   LAB FOOTER
--------------------------------------- */

.lab-footer {
    margin-top: 24px;

    padding-top: 18px;

    border-top: 1px solid var(--line);
}


.tissot-note {
    display: flex;

    align-items: flex-start;

    gap: 9px;
}


.tissot-note p {
    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.45;
}


.tissot-dot {
    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    margin-top: 3px;

    border-radius: 50%;

    background: var(--accent);

    mix-blend-mode: multiply;
}


.mobile-drag-hint {
    display: none;
}


/* ---------------------------------------
   RESPONSIVE
--------------------------------------- */

@media (max-width: 1180px) {

    .map-toolbar {
        grid-template-columns:
      auto
      1fr;

        grid-template-areas:
      "meridian actions"
      "drag drag";

        row-gap: 10px;
    }


    .meridian-readout {
        grid-area: meridian;
    }


    .drag-control {
        grid-area: drag;

        justify-self: center;
    }


    .toolbar-actions {
        grid-area: actions;
    }


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


    .mercator-facts {
        grid-column: 1 / -1;

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


    .fact {
        display: block;
    }


    .fact strong {
        display: block;

        margin-top: 6px;
    }

}


@media (max-width: 850px) {

    .page-header {
        display: block;
    }


    .status {
        display: inline-block;

        margin-top: 24px;
    }


    .formula-grid {
        grid-template-columns: 1fr;
    }


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


    .mercator-grid {
        grid-template-columns: 1fr;
    }


    .mercator-formula {
        padding-right: 0;
        padding-bottom: 20px;

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


    .mercator-facts {
        grid-column: auto;

        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .app {
        width: min(
                100% - 24px,
                1500px
        );

        padding-top: 24px;
    }


    .map-toolbar,
    .toolbar-actions,
    .map-stage {
        display: contents;
    }

    .status {
        display: none;
    }

    .map-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 24px;
        width: calc(100% + 24px);
        margin-left: -12px;
        border-left: 0;
        border-right: 0;
        justify-items: center;
        align-items: center;
    }

    .projection-switch {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
    }

    .projection-button {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        padding: 0 5px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .distortion-toggle {
        grid-column: 1;
        grid-row: 2;
        min-height: 18px;
        gap: 8px;
        justify-content: center;
        position: relative;
    }

    /* Extend the touch target without increasing the visual row height. */
    .distortion-toggle::before {
        content: "";
        position: absolute;
        inset: -13px 0;
    }

    .distortion-label {
        white-space: nowrap;
    }

    .switch {
        flex-shrink: 0;
    }

    .globe-wrap {
        position: static;
        grid-column: 1;
        grid-row: 3;
        width: 100px;
        padding: 0;
        border: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .globe-header,
    .meridian-readout .toolbar-label,
    .drag-control {
        display: none;
    }

    #map {
        grid-column: 1;
        grid-row: 4;
        width: calc(100% + 48px);
        max-width: none;
    }

    .mobile-drag-hint {
        display: flex;
        grid-column: 1;
        grid-row: 5;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        font-family: monospace;
        font-size: 9px;
    }

    .mobile-drag-hint span {
        font-size: 17px;
        line-height: 1;
    }

    .meridian-readout {
        grid-area: auto;
        grid-column: 1;
        grid-row: 6;
        justify-self: center;
    }


    .sliders {
        grid-template-columns: 1fr;
    }


    .coefficient-heading {
        display: block;
    }


    .reset-button {
        margin-top: 14px;
    }

}


/* ---------------------------------------
   REDUCED MOTION
--------------------------------------- */

@media (
prefers-reduced-motion: reduce
) {

    .drag-arrow {
        animation: none;
    }

}


/* Expanded view reuses the live map and its controls. */
.expand-map-button {
    display: block;
    margin: 12px auto;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font: 11px monospace;
    cursor: pointer;
}

.expand-map-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 650px) {
    .expand-map-button {
        grid-column: 1;
        grid-row: 7;
        margin: 0;
    }
}

body:has(#mapDialog[open]) {
    overflow: hidden;
}

#mapDialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--panel);
    color: var(--ink);
}

#mapDialog[open] {
    display: block;
}

.expanded-header {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 1;
}

.expanded-header .reset-button {
    margin: 0;
    min-height: 44px;
    background: var(--panel);
}

#mapDialog .map-card {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

#mapDialog .map-stage {
    display: block;
    width: 100%;
    height: 100%;
}

#mapDialog #map {
    width: 100%;
    height: 100%;
    max-width: none;
}

#mapDialog .map-toolbar,
#mapDialog .globe-wrap,
#mapDialog .mobile-drag-hint,
#mapDialog .expand-map-button {
    display: none;
}


/* Desktop: projection first, expansion at the right, rotation below the map. */
@media (min-width: 651px) {
    .map-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 0 20px;
    }

    .map-toolbar,
    .toolbar-actions {
        display: contents;
    }

    .meridian-readout {
        grid-area: 1 / 1;
        margin: 14px;
    }

    .projection-switch {
        grid-area: 1 / 2;
        justify-self: center;
        margin: 14px 0;
    }

    .expand-map-button {
        grid-area: 1 / 3;
        justify-self: end;
        margin: 14px;
        min-height: 0;
        padding: 9px 12px;
        font: 10px monospace;
        letter-spacing: 0.08em;
    }

    .expand-map-button:hover {
        background: var(--ink);
        color: var(--panel);
    }

    .map-stage {
        grid-area: 2 / 1 / 3 / -1;
        width: 100%;
        border-top: 1px solid var(--line);
    }

    .drag-control {
        grid-area: 3 / 2;
        justify-self: center;
        margin: 14px 0;
    }

    .distortion-toggle {
        grid-area: 3 / 3;
        justify-self: end;
        margin: 14px;
    }
}


/* Keep the mobile shape controls close to the map; explain the maths below. */
@media (max-width: 650px) {
    #equalEarthControls:not([hidden]) {
        display: flex;
        flex-direction: column;
    }

    #equalEarthControls .coefficient-section {
        order: -1;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    #equalEarthControls .coefficient-heading {
        margin-bottom: 12px;
    }

    #equalEarthControls .sliders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
    }

    #equalEarthControls input[type="range"] {
        min-height: 32px;
        margin: 0;
    }

    #equalEarthControls .formula-grid {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
    }
}