/* V-Synth Patch Composer — the promotional page.
   Dark, like the app icon and the About window: graphite, with the icon's
   teal-to-violet as the accent (Tools/app-icon/main.swift, concept E). */

:root {
    --bg: #121418;
    --bg-raised: #1b1e24;
    --panel: #20242b;
    --panel-line: #313741;
    --text: #e9eaee;
    --muted: #a3a8b2;
    --faint: #6d7380;
    --teal: #3df0b4;
    --blue: #35b8ff;
    --violet: #7a6bff;
    --accent: #35b8ff;
    --gradient: linear-gradient(90deg, var(--teal), var(--blue), var(--violet));
    --radius: 12px;
    --page: 1100px;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
a:hover { color: #7fd2ff; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: 34px; margin: 0 0 14px; }
h3 { font-size: 19px; margin: 0 0 10px; }

/* The opening: the About window's artwork on the right, the name on the left. */
.hero {
    position: relative;
    overflow: hidden;
    background: #101114;
    min-height: 560px;
    display: flex;
    align-items: center;
}
/* The artwork keeps its 16:9 and fills the opening's height, at the right. */
.hero-art {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 16 / 9;
}
.hero-art img, .hero-art canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-text { position: relative; pointer-events: none; }
/* The words stay selectable; the rest of the block lets the pointer through
   to the artwork's handle beneath it. */
.hero-text > * { pointer-events: auto; }
/* The invisible grab area over the V's bright point (hero.js). */
.hero-handle {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
}
.hero-handle.dragging { cursor: grabbing; }
.hero-text {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: 72px 24px;
}
.hero-text > * { max-width: 520px; }
.hero-icon { width: 96px; height: 96px; display: block; margin-bottom: 18px; }
.hero h1 { font-size: 52px; margin: 0 0 8px; }
.tagline { font-size: 22px; color: var(--muted); margin: 0 0 18px; }
.lead { font-size: 19px; margin: 0 0 26px; }
.store { margin: 0 0 10px; }
.badge-soon {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid var(--panel-line);
    background: var(--bg-raised);
    font-weight: 600;
}
.fineprint { color: var(--faint); font-size: 14px; margin: 0; }

main { max-width: var(--page); margin: 0 auto; padding: 0 24px; }

/* Screenshots open full size in the viewer. */
.shot {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius);
    background: var(--bg-raised);
    overflow: hidden;
    cursor: zoom-in;
}
.shot img { display: block; width: 100%; height: auto; }
.shot:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.showcase { margin: -40px 0 0; position: relative; }
.showcase .shot { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
figcaption { color: var(--muted); font-size: 15px; text-align: center; margin-top: 12px; }

section { padding: 88px 0 0; }
.section-lead { color: var(--muted); font-size: 19px; max-width: 720px; margin: 0 0 32px; }

/* The live drawings. */
.demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.demo {
    background: var(--bg-raised);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
}
.demo canvas {
    display: block;
    width: 100%;
    height: 170px;
    border-radius: 8px;
    background: var(--panel);
    border: 1px solid var(--panel-line);
    touch-action: none;
    cursor: grab;
}
.demo canvas.dragging { cursor: grabbing; }
.hint { color: var(--muted); font-size: 14px; margin: 10px 0 12px; }

.buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.wave-buttons { grid-template-columns: repeat(4, 1fr); }
.buttons button {
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: 6px;
    padding: 4px 2px 3px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.buttons button canvas {
    width: 100%;
    height: 18px;
    border: 0;
    background: none;
    cursor: inherit;
}
.buttons button[aria-pressed="true"] {
    color: #fff;
    border-color: var(--blue);
    background: rgba(53, 184, 255, 0.18);
}
.buttons button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* The rows under a drawing, as in the app: the way in for the keyboard and
   for VoiceOver, and they move with a drag. */
.controls { display: grid; gap: 6px; margin-top: auto; }
.control {
    display: grid;
    grid-template-columns: 92px 1fr 46px;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}
.control output { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.control input[type="range"] { width: 100%; accent-color: var(--blue); }

/* Features: a screenshot beside its words, alternating sides. */
.feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 44px;
    align-items: center;
    margin-bottom: 88px;
}
.feature:nth-of-type(even) .shot { order: 2; }
.feature-text p { color: var(--muted); margin: 0 0 14px; }
.feature h2 { font-size: 30px; }

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.requirements ul { color: var(--muted); padding-left: 22px; max-width: 760px; }
.requirements li { margin-bottom: 8px; }

.links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-bottom: 72px;
}
.link-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: var(--radius);
    border: 1px solid var(--panel-line);
    background: var(--bg-raised);
    text-decoration: none;
    color: var(--text);
}
.link-card span { color: var(--muted); font-size: 14px; word-break: break-word; }
.link-card:hover { border-color: var(--blue); color: var(--text); }

footer {
    border-top: 1px solid var(--panel-line);
    color: var(--faint);
    font-size: 13px;
    padding: 28px 24px 40px;
    text-align: center;
}
footer p { max-width: 760px; margin: 0 auto 8px; }

/* The screenshot viewer. */
.viewer {
    max-width: 96vw;
    max-height: 94vh;
    padding: 0;
    border: 1px solid var(--panel-line);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.viewer::backdrop { background: rgba(0, 0, 0, 0.8); }
.viewer img { display: block; max-width: 96vw; max-height: 94vh; width: auto; height: auto; }
.viewer .close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* Narrow windows and phones. */
@media (max-width: 1000px) {
    .demo-grid { grid-template-columns: 1fr; max-width: 560px; }
    .links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    /* The pad goes above the words, centered and large: the artwork's left
       half is empty (it leaves room for words beside the pad on a wide
       screen), so it is cropped off. --pad is the pad's width, about 80 %
       of the screen and no more than 420 points. The pad is 0.509 of the
       artwork's width, and its center 0.704 across it (the About
       background's own geometry). The small icon would only repeat it. */
    .hero { min-height: 0; --pad: min(80vw, 420px); }
    .hero-art {
        right: auto;
        width: calc(var(--pad) * 1.965);
        height: auto;
        left: calc(50% - var(--pad) * 1.383);
    }
    .hero-text { padding-top: calc(var(--pad) * 1.06 + 28px); }
    .hero-icon { display: none; }
    .feature { grid-template-columns: 1fr; gap: 20px; }
    .feature:nth-of-type(even) .shot { order: 0; }
    .gallery { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .hero h1 { font-size: 38px; }
    .tagline { font-size: 19px; }
    h2 { font-size: 28px; }
    .links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}