/* CSS reset-ish and theme tokens */
:root {
    --bg: #0f1226;
    --bg-accent: #121638;
    --text: #e7e9ee;
    --muted: #b5bbce;
    --card: #171b3a;
    --border: rgba(255, 255, 255, 0.08);
    --primary: #7c5cff;
    --primary-600: #6847ff;
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
    --radius: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: radial-gradient(1200px 600px at 20% -10%, #2a1b7f55, transparent 65%),
                radial-gradient(1000px 600px at 90% 10%, #0ea5e955, transparent 60%),
                linear-gradient(180deg, var(--bg) 0%, var(--bg-accent) 100%);
    display: grid;
    place-items: center;
    padding: 24px;
    min-height: 100vh;
    min-height: 100svh;
}

.container {
    width: min(720px, 100%);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(16px, 3vw, 32px);
    text-align: center;
    backdrop-filter: blur(6px);
}

/* Typography */
.inter-200 { font-weight: 200; font-optical-sizing: auto; font-variation-settings: "wdth" 100; }
.inter-400 { font-weight: 400; font-optical-sizing: auto; font-variation-settings: "wdth" 100; }
.inter-600 { font-weight: 600; font-optical-sizing: auto; font-variation-settings: "wdth" 100; }

h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4.5vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

p { margin: 0 0 12px; color: var(--muted); font-size: clamp(14px, 2.4vw, 16px); }
.muted { color: var(--muted); }

/* Hero image */
.centered_image_container {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    position: relative;
    margin: 0 auto 16px;
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    border: 1px solid var(--border);
}
.centered_large_image {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    filter: saturate(1.05) contrast(1.02);
}

/* Link styles */
.link-row { margin-top: 8px; }
.cta-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, var(--primary), var(--primary-600));
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 20px rgba(124, 92, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cta-link:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(124, 92, 255, 0.45); }
.cta-link:active { transform: translateY(0); }
.cta-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Reduce motions for accessibility */
@media (prefers-reduced-motion: reduce) {
    .cta-link { transition: none; }
}

/* Responsive tweaks */
@media (max-width: 480px) {
    .container { padding: 20px; }
}

/* Legacy utility blocks preserved (unused on this page but kept for future) */
#main_container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 2rem; box-sizing: border-box; }
.input-group { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
#url { flex: 1; padding: 10px; border: 1px solid #3a3f64; background: #0f1226; color: var(--text); border-radius: 4px 0 0 4px; outline: none; }
#send_button { padding: 10px; border: 1px solid #3a3f64; border-left: none; border-radius: 0 4px 4px 0; background-color: var(--primary); color: #fff; cursor: pointer; outline: none; }
#send_button:hover { background-color: var(--primary-600); }
#output_box { width: 100%; height: 150px; padding: 10px; border: 1px solid #3a3f64; background: #0f1226; color: var(--text); border-radius: 4px; resize: none; outline: none; }