:root {
    --bg: #ffffff;
    --ink: #1f1f2c;
    --muted: #b7bccc;
    --accent: #6e7aab;
    --accent-strong: #4a557e;
    --slider: #c8e4f7;
    --slider-rail: #ebeef3;
    --field-border: #e3e6ee;
    --shadow: 0 1px 2px rgba(31, 31, 44, 0.06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Helvetica Neue", Arial, sans-serif;
}

/* ---------- animation page ---------- */

body.animation {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    transform: translateZ(0);
    animation-iteration-count: infinite;
    animation-fill-mode: none;
}

.particle.cascade {
    top: -10vh;
    animation-name: cascade;
    animation-timing-function: linear;
}

.particle.pop {
    animation-name: pop;
    animation-timing-function: ease-in-out;
}

.particle.glide {
    left: 0;
    top: 0;
    animation-timing-function: linear;
}

@keyframes cascade {
    0%   { transform: translateY(0); }
    100% { transform: translateY(120vh); }
}

@keyframes pop {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-1 * var(--hop, 25vh))); }
}

.message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.5rem 1.25rem;
    font-size: clamp(1.75rem, 6vw, 4.5rem);
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    pointer-events: none;
}

.edit-link {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--accent-strong);
    text-decoration: none;
    font-size: 0.85rem;
    box-shadow: var(--shadow);
}

.edit-link:hover { background: #fff; }

/* ---------- configuration page ---------- */

body.config main, body.share main {
    max-width: 640px;
    margin: 2rem auto;
    padding: 1.5rem 1.25rem 3rem;
}

body.config h1, body.share h1 {
    font-size: 1.75rem;
    margin: 0 0 1.5rem;
    font-weight: 500;
}

.field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--field-border);
    border-radius: 0.5rem;
    margin: 0.75rem 0;
    background: #fff;
    box-shadow: var(--shadow);
}

.field .icon {
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
}

.field input[type="text"] {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 1rem;
    background: transparent;
    color: var(--ink);
    min-width: 0;
}

.field input::placeholder { color: var(--muted); }

.field .remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
}

.field .remove:hover { color: var(--accent-strong); }

.slider {
    display: block;
    margin: 1.5rem 0;
    color: var(--muted);
}

.slider > span {
    display: block;
    margin-left: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.slider input[type="range"] {
    width: 100%;
    accent-color: var(--slider);
}

.characters {
    margin-top: 1.5rem;
}

.suggestions {
    margin-top: 1.5rem;
}

.suggestions-label {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.animation-style {
    margin-top: 1.5rem;
}

.style-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.style-btn {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--field-border);
    border-radius: 999px;
    background: #fff;
    color: var(--accent-strong);
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.style-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.style-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.category-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.category-btn {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--field-border);
    border-radius: 999px;
    background: #fff;
    color: var(--accent-strong);
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.category-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.category-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.suggestion-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.pick {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--field-border);
    border-radius: 0.45rem;
    background: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.pick:hover {
    border-color: var(--accent);
    background: #fafbff;
}

.hint {
    margin: 0.5rem 0;
    color: var(--muted);
    font-size: 1.25rem;
    text-align: center;
}

.actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.add {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: #fff;
    color: var(--accent);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.add:hover { background: var(--accent); color: #fff; }

.share {
    padding: 1rem 2.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.share:hover { background: var(--accent-strong); }

/* ---------- share page ---------- */

.url-box {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--field-border);
    border-radius: 0.5rem;
    font-size: 0.95rem;
    color: var(--ink);
    background: #fafbff;
}

.button {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
}

.button:hover { background: var(--accent-strong); }

.button.secondary {
    background: #fff;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.button.secondary:hover {
    background: var(--accent);
    color: #fff;
}