:root {
    --bg: #0b0c10;
    --card: #111317;
    --ink: #e9eef2;
    --muted: #9aa4ad;
    --accent: #4a8cff;
    --line: #1e2228;
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: var(--font-sans-serif);
    background: var(--bg);
    font-size: 16px;
    color: var(--ink)
}

.bt {
    display: inline-block;
    user-select: none;
    text-decoration: none;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-sans-serif);
    border: 1px solid var(--line);
    padding: 8px;
    background: #0f1217;
    font-size: 16px;
    outline: 0;
    margin: 0;
    border-radius: 4px;
}

.bt.bt-success {
    background: var(--success);
}

.container {
    width: 1000px;
    max-width: 100%;
    min-width: 200px;
    padding: 16px;
    margin: auto;
}

.drop {
    border-radius: 4px;
    user-select: none;
    border: 1px solid var(--line);
    padding: 16px;
    background: #0f1217;
}

.controls {
    margin: 8px;
    gap: 8px;
    flex-wrap: wrap;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}

header h1 {
    margin: 0;
}

header input[type="text"] {
    padding: 8px 16px;
    font-size: 16px;
    border-radius: 4px;
    background: #0f1217;
    flex: 1;
    font-family: var(--font-sans-serif);
    color: var(--ink);
    outline: 0;
    border: 1px solid var(--line);
}

.grid {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.grid img {
    width: 100%;
}