/* Coinly site: the app's tokens (CoinlyColors, CoinlySpacing, CoinlyRadius). Light only. */
:root {
    --blue-50: #EEF5FF;
    --blue-100: #DCEAFF;
    --blue-500: #1F6FEB;
    --blue-600: #1559C9;
    --gray-0: #FFFFFF;
    --gray-25: #F6F8FB;
    --gray-100: #E3E8EF;
    --gray-400: #8893A3;
    --gray-500: #636E7F;
    --gray-900: #121720;
    --green-600: #15804F;
    --navy: 15, 42, 87;
    --radius-md: 14px;
    --radius-card: 24px;
    color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--gray-25);
    color: var(--gray-900);
    font-family: "M PLUS Rounded 1c", ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* Japanese unless join.js found another language (html.en). */
html.en .ja,
html:not(.en) .en { display: none; }

[hidden] { display: none !important; }

.page {
    max-width: 440px;
    margin: 0 auto;
    padding: max(24px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 8px 0 20px;
}

/* The dog: the tail and the body are pictures on the same 6:7 canvas, the tail behind. */
.dog { position: relative; width: 72px; height: 84px; }
.dog img { position: absolute; inset: 0; width: 100%; height: 100%; }

.dog-tail {
    transform-origin: 83% 77.857%;
    animation: cyTail7 0.9s ease-in-out 0.6s 2;
}

@keyframes cyTail7 {
    0% { transform: rotate(0); }
    15% { transform: rotate(-20deg); }
    30% { transform: rotate(0); }
    45% { transform: rotate(-20deg); }
    60% { transform: rotate(0); }
    76% { transform: rotate(-12deg); }
    100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dog-tail { animation: none; }
}

.wordmark {
    margin: 0;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--blue-500);
}

.stack { display: flex; flex-direction: column; gap: 16px; }

h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
}

p { margin: 0; }

.card {
    background: var(--gray-0);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(var(--navy), 0.06);
}

.card p + p { margin-top: 8px; }

.code-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-500);
}

.code {
    width: 100%;
    padding: 12px 8px;
    border-radius: var(--radius-md);
    background: var(--blue-50);
    color: var(--blue-600);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    user-select: all;
    -webkit-user-select: all;
}

.note {
    font-size: 13px;
    color: var(--gray-500);
}

.center { text-align: center; margin-top: -8px; }

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 800;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.button.primary {
    background: var(--blue-500);
    color: #FFFFFF;
    box-shadow: 0 6px 14px rgba(31, 111, 235, 0.30);
}
.button.primary:active { background: var(--blue-600); }

.button.secondary {
    margin-top: 16px;
    background: var(--gray-0);
    color: var(--blue-600);
    border: 1.5px solid var(--blue-100);
}

.button.ghost {
    width: auto;
    min-height: 44px;
    padding: 8px 16px;
    background: transparent;
    color: var(--blue-600);
    font-size: 15px;
}

.button .copied { display: none; color: var(--green-600); }
.button.done .idle { display: none; }
.button.done .copied { display: inline; }

.button:focus-visible { outline: 3px solid var(--blue-100); outline-offset: 2px; }

.steps {
    margin: 0;
    padding-left: 1.4em;
    color: var(--gray-900);
}
.steps li + li { margin-top: 6px; }
.steps b { color: var(--blue-600); letter-spacing: 0.06em; }