/* =========================================
   ESTUA LANDING PAGE
   Text lives on the page; panels hold only what you'd see in Studio.
   ========================================= */

:root {
    /* Studio chrome */
    --bg: #1a1916;
    --panel: #242320;
    --panel-hi: #2e2d2a;
    --line: #2c2a26;
    --line-hi: #4a463f;

    /* Text tiers */
    --text: #e8e2d8;
    --dim: #a1988b;
    --faint: #746d63;

    /* Accents */
    --gold: #d49a2c;
    --gold-dim: #a67a22;
    --teal: #50b8bc;

    --mono: "JetBrains Mono", ui-monospace, monospace;
    --r: 6px;
    --r-sm: 3px;
    --gap: 16px;

    /* Headings: Inter Tight; Bricolage Grotesque (700, -.035em, larger sizes) is the alternative */
    --head: "Inter Tight";
    --head-w: 500;
    --head-ls: -.025em;
    --h1: clamp(40px, 5vw, 68px);
    --h2: clamp(28px, 3vw, 40px);
    --h3: 18px;

    /* Figure palette; clip colours follow Studio's OKLCH palette (L 0.55, C 0.12) */
    --fig-a: oklch(.55 .12 250deg);
    --fig-b: oklch(.55 .12 140deg);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 Inter, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

::selection {
    background: var(--gold);
    color: var(--bg);
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

h1,
h2,
h3 {
    font-family: var(--head), sans-serif;
    font-weight: var(--head-w);
    letter-spacing: var(--head-ls);
}

h1 {
    font-size: var(--h1);
    line-height: 1;
}

h2 {
    font-size: var(--h2);
    line-height: 1.08;
}

h3 {
    font-size: var(--h3);
    line-height: 1.25;
}

p,
dd {
    color: var(--dim);
}

.eyebrow {
    display: block;
    font: 500 11px/1 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.panel {
    background: var(--panel);
    border-radius: var(--r);
}

.inline-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--gold-dim);
    text-underline-offset: 3px;
    transition: color .2s;
}

.inline-link:hover {
    color: var(--gold);
}

/* ---- Clip glyphs, after Studio's explorer icons ---- */
[class^="g-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--g) center / contain no-repeat;
    mask: var(--g) center / contain no-repeat;
}

.g-audio {
    --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 7v2M5 4v8M8 2v12M11 5v6M14 7v2'/%3E%3C/svg%3E");
}

.g-notes {
    --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l8-2v9.5a2 2 0 11-1.5-1.9V4.2L7.5 5.4v7.1A2 2 0 116 10.6z'/%3E%3C/svg%3E");
}

.g-seq {
    --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

.g-choice {
    --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h5l6-5m-6 5 6 5M10 3h2v2M10 13h2v-2'/%3E%3C/svg%3E");
}

.g-loop {
    --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9V7a3 3 0 013-3h9m-2-2 2 2-2 2M14 7v2a3 3 0 01-3 3H2m2 2-2-2 2-2'/%3E%3C/svg%3E");
}

.g-stack {
    --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M8 2 2 5l6 3 6-3zM2 8.5l6 3 6-3M2 11.5l6 3 6-3'/%3E%3C/svg%3E");
}

/* ---- Nav ---- */
.nav {
    display: flex;
    align-items: center;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 600 18px var(--head), sans-serif;
    letter-spacing: -.02em;
    color: var(--text);
    text-decoration: none;
}

.mark {
    height: .6em;
    width: auto;
    color: var(--gold);
}

.links {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}

.links a:not(.btn) {
    color: var(--dim);
    text-decoration: none;
    font-size: 14px;
    padding: 7px 11px;
    transition: color .2s;
}

.links a:not(.btn):hover {
    color: var(--text);
}

.btn {
    background: var(--gold);
    color: var(--bg);
    text-decoration: none;
    border-radius: var(--r);
    padding: 7px 13px;
    font-size: 14px;
    font-weight: 500;
    transition: background .2s;
}

.btn:hover {
    color: var(--bg);
    background: var(--gold-dim);
}

/* ---- Hero: text on the page, cropped screenshot in a panel ---- */
.hero {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    padding: 40px 0 88px;
}

.hero-text {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
}

.hero h1 {
    margin-bottom: 22px;
}

.hero h1 em {
    font-style: normal;
    color: var(--gold);
}

.hero .lede {
    font-size: 18px;
    max-width: 33ch;
}

.hero .btn {
    align-self: flex-start;
    margin-top: 28px;
    padding: 11px 18px;
    font-size: 15px;
}

.hero-meta {
    margin-top: auto;
    padding-top: 40px;
    font-size: 13px;
    color: var(--faint);
}

/* Studio's own window is the frame: no panel, running off the right edge of the page and fading out at the bottom */
.hero-shot {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    margin-right: calc(-1 * max(16px, (100vw - 1200px) / 2 + 16px));
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

/* Cropped on purpose: a glimpse of Studio, not a readable screenshot */
.hero-shot img {
    position: absolute;
    left: 0;
    top: 0;
    width: 1150px;
}

/* ---- Sections: hairline, heading row, then content ---- */
.block {
    border-top: 1px solid var(--line);
    padding: 72px 0 80px;
}

.block > .head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    margin-bottom: 36px;
}

.block > .head p {
    font-size: 17px;
    max-width: 46ch;
}

.texts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 24px;
}

.texts.two {
    grid-template-columns: 1fr 1fr;
}

.texts h3 {
    margin-bottom: 6px;
}

/* ---- Clip nesting ---- */
.nest {
    padding: 16px;
}

.nest .clip {
    --c: oklch(.55 .12 calc(var(--h) * 1deg));
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 6px 6px;
    border-radius: var(--r-sm);
    background: color-mix(in oklch, var(--c) 16%, var(--bg));
    border: 1px solid color-mix(in oklch, var(--c) 55%, transparent);
    overflow: hidden;
}

.nest .clip > b {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 -6px;
    padding: 3px 8px;
    background: var(--c);
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
}

.nest .clip > b i {
    font-size: 11px;
}

.nest .clip.leaf {
    min-height: 44px;
}

.nest .row {
    display: flex;
    gap: 6px;
}

.nest .row > * {
    flex: 1;
    min-width: 0;
}

.nest .col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nest .roll {
    position: relative;
    flex: 1;
    min-height: 50px;
}

.nest .roll i {
    position: absolute;
    height: 5px;
    border-radius: 1px;
    background: var(--c);
}

.legend {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin-top: 28px;
}

.legend li {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 10px;
    align-items: baseline;
}

.legend li i {
    font-size: 14px;
    color: var(--gold);
    transform: translateY(2px);
}

.legend b {
    font-weight: 500;
}

.legend span {
    grid-column: 2;
    font-size: 14px;
    line-height: 1.45;
    color: var(--dim);
}

.caption {
    margin-top: 14px;
    font-size: 14px;
    color: var(--faint);
}

/* ---- Strength figures ---- */
.figs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.figs figure {
    min-height: 196px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fig-dovetail svg {
    width: 100%;
    display: block;
}

.fig-dovetail text {
    font-size: 11px;
    fill: #fff;
    font-weight: 500;
}

.fig-dovetail text.m {
    fill: var(--dim);
    font-weight: 400;
    font-size: 10px;
}

.fig-flow {
    align-items: center;
    gap: 4px;
}

.fig-flow .step {
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--panel-hi);
    font-size: 12px;
    white-space: nowrap;
}

.fig-flow .step.gone {
    text-decoration: line-through;
    color: var(--dim);
    background: none;
    border: 1px dashed var(--line-hi);
}

.fig-flow .arrow {
    color: var(--dim);
    font-size: 11px;
    line-height: 1;
}

.fig-files pre {
    font: 11px/1.6 var(--mono);
    color: var(--dim);
    overflow-x: auto;
}

.fig-files .d {
    color: var(--text);
}

.fig-files .ed {
    color: var(--gold);
}

.fig-files .rm {
    color: #d0806e;
}

.fig-files .ad {
    color: #7fbf8a;
}

/* ---- Modulation: one clip opened up ---- */
.modfig {
    position: relative;
    padding: 28px;
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 56px;
    align-items: start;
}

.modfig .lbl {
    display: block;
    font: 500 10.5px/1 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 10px;
}

.modfig .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--line-hi);
    background: var(--panel);
    flex: none;
}

.game {
    margin-top: 44px;
    padding: 14px;
    border: 1px dashed var(--line-hi);
    border-radius: var(--r);
    display: grid;
    gap: 10px;
}

.game code {
    font: 11.5px/1.5 var(--mono);
    color: var(--dim);
}

.game code b {
    color: var(--gold);
    font-weight: 400;
}

.xclip {
    --c: oklch(.55 .12 calc(var(--h) * 1deg));
    border: 1px solid color-mix(in oklch, var(--c) 55%, transparent);
    border-radius: 4px;
    background: color-mix(in oklch, var(--c) 10%, var(--bg));
    overflow: hidden;
}

.xhd {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    background: var(--c);
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}

.xbody {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 64px;
    padding: 18px;
}

.mods {
    display: grid;
    gap: 8px;
    align-content: start;
}

.modu {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 8px;
    padding: 9px 22px 9px 11px;
    border-radius: 4px;
    background: var(--panel-hi);
}

.modu .nm {
    font-size: 13px;
    font-weight: 500;
}

.modu .ty {
    font: 10.5px var(--mono);
    color: var(--faint);
    text-align: right;
}

.modu .bar {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.modu .bar i {
    display: block;
    height: 100%;
    background: var(--teal);
}

.modu:first-of-type .bar i {
    background: var(--gold);
}

.modu > .dot {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -4.5px;
    border-color: var(--teal);
    background: var(--teal);
}

.modu .to {
    grid-column: 1 / -1;
    font-size: 11.5px;
    color: var(--teal);
    margin-top: 4px;
}

.targets {
    display: grid;
    gap: 22px;
    align-content: start;
}

.param {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--dim);
    padding: 3px 0;
}

.param.on {
    color: var(--text);
}

.param.on .dot {
    border-color: var(--teal);
    background: var(--teal);
}

.alts {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.alts span {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 6px 4px;
    border-radius: var(--r-sm);
    background: var(--panel-hi);
    color: var(--faint);
}

.alts span.on {
    background: var(--c);
    color: #fff;
}

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

.dev {
    background: var(--panel-hi);
    border-radius: 4px;
    padding: 8px 10px;
}

.dev b {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

/* ---- Engines ---- */
.engines {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 48px;
    align-items: start;
}

.snippet + .snippet {
    border-top: 1px solid var(--line);
}

.snippet .lbl {
    display: block;
    padding: 16px 24px 0;
    font: 500 11px/1 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
}

.code pre {
    padding: 14px 24px 20px;
    font: 13px/1.8 var(--mono);
    color: var(--text);
    overflow-x: auto;
}

.code .c {
    color: var(--faint);
}

.code .s {
    color: var(--gold);
}

.support > div {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.support > div:first-child {
    border-top: 0;
    padding-top: 4px;
}

.support dt {
    font-weight: 500;
    margin-bottom: 4px;
}

/* ---- FAQ ---- */
.faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
}

.faq > div {
    border-top: 1px solid var(--line);
    padding: 20px 0 24px;
}

.faq dt {
    font-weight: 500;
    margin-bottom: 6px;
}

.faq dd {
    font-size: 15px;
}

/* ---- CTA / waitlist ---- */
.join {
    background: var(--gold);
    color: var(--bg);
    border-radius: var(--r);
    padding: 56px 48px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: end;
}

.join h2 {
    font-size: calc(var(--h2) * 1.2);
}

.join p {
    color: rgba(26, 25, 22, .78);
    margin-top: 14px;
    max-width: 44ch;
}

.signup-form {
    display: grid;
    gap: 6px;
}

.signup-form input {
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(26, 25, 22, .12);
    color: var(--bg);
    outline: none;
    transition: border-color .2s;
}

.signup-form input::placeholder {
    color: rgba(26, 25, 22, .55);
}

.signup-form input:focus {
    border-color: rgba(26, 25, 22, .5);
}

.signup-form button {
    font: 500 15px Inter, sans-serif;
    padding: 12px;
    border: 0;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: transform .15s;
}

.signup-form button:active:not(:disabled) {
    transform: scale(.98);
}

.signup-form button:disabled {
    opacity: .5;
    cursor: default;
}

.join .cta-note {
    font-size: 13px;
    margin-top: 10px;
    color: rgba(26, 25, 22, .6);
}

@keyframes success-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.signup-success {
    font-size: 17px;
    font-weight: 500;
    animation: success-fade-in .5s ease forwards;
}

/* ---- Footer ---- */
.footer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 48px 0 64px;
    font-size: 13px;
    color: var(--faint);
}

.f-brand {
    font: 600 16px var(--head), sans-serif;
    color: var(--text);
}

.f-brand span {
    font: 400 13px Inter, sans-serif;
    color: var(--faint);
    margin-left: 12px;
}

.footer a {
    color: var(--dim);
}

.footer a:hover {
    color: var(--text);
}

.f-note {
    grid-column: 1 / -1;
    color: var(--faint);
}

/* ---- Script enhancements (script.js) ---- */

/* Clip-type hover: everything not of the focused type recedes */
.nest .clip > b,
.nest .wave path,
.nest .roll i {
    transition: filter .15s, opacity .15s;
}

.nest[data-focus] .clip > b {
    filter: saturate(.15) brightness(.55);
}

.nest[data-focus="audio"] [data-k="audio"] > b,
.nest[data-focus="notes"] [data-k="notes"] > b,
.nest[data-focus="seq"] [data-k="seq"] > b,
.nest[data-focus="choice"] [data-k="choice"] > b,
.nest[data-focus="loop"] [data-k="loop"] > b,
.nest[data-focus="stack"] [data-k="stack"] > b {
    filter: none;
}

.nest[data-focus]:not([data-focus="audio"]) .wave path,
.nest[data-focus]:not([data-focus="notes"]) .roll i {
    opacity: .6;
}

.legend li {
    cursor: default;
}

.legend li.on b {
    color: var(--gold);
}

.nest .clip.leaf:has(.wave) {
    min-height: 58px;
}

.nest .wave {
    flex: 1;
    width: 100%;
    min-height: 26px;
    display: block;
}

.nest .wave path {
    fill: var(--c);
}

/* Modulation wires and live values */
.modfig .wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.modfig .wires path {
    fill: none;
    stroke-width: 1.6;
}

.modfig .wires .w-game {
    stroke: var(--gold);
    stroke-dasharray: 4 4;
}

.modfig .wires .w-mod {
    stroke: var(--teal);
}

.danger-slider {
    width: 100%;
    accent-color: var(--gold);
}

.modu .sine {
    grid-column: 1 / -1;
    width: 100%;
    height: 14px;
    margin-top: 2px;
}

.modu .sine path {
    fill: none;
    stroke: var(--teal);
    stroke-width: 1.5;
}

.param em {
    margin-left: auto;
    font: normal 11px var(--mono);
    color: var(--teal);
}

.alts span {
    transition: background .15s, color .15s;
}

@media (min-width: 901px) {
    .modfig.wired .to {
        display: none;
    }
}

/* Engine tabs, styled after Studio's editor/mixer tabs */
.tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
}

.tabs button {
    font: 500 11px Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dim);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 10px 10px;
    cursor: pointer;
}

.tabs button[aria-selected="true"] {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.code.tabbed .snippet {
    border-top: 0;
}

.code.tabbed .snippet .lbl {
    display: none;
}

.code.tabbed pre {
    padding-top: 22px;
}

/* Screenshot lightbox */
.hero-shot.zoomable {
    cursor: zoom-in;
}

.hero-shot.zoomable:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.lightbox {
    border: 0;
    padding: 0;
    background: none;
    max-width: none;
    max-height: none;
    margin: auto;
    cursor: zoom-out;
    outline: none;
}

.lightbox::backdrop {
    background: rgba(10, 10, 9, .92);
}

.lightbox img {
    display: block;
    max-width: 94vw;
    max-height: 92vh;
}

/* Grid children may shrink below their content (code, svg, cropped screenshot) */
.hero > *,
.block > .head > *,
.figs > *,
.texts > *,
.engines > *,
.faq > *,
.join > * {
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .signup-success {
        animation: none;
    }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {

    .hero,
    .block > .head,
    .figs,
    .texts,
    .texts.two,
    .engines,
    .faq,
    .join,
    .modfig,
    .xbody,
    .chain {
        grid-template-columns: 1fr;
    }

    .hero {
        gap: 32px;
        padding-top: 16px;
    }

    .hero-text {
        padding-top: 16px;
    }

    .hero-shot {
        min-height: 300px;
    }

    .hero-shot img {
        width: 760px;
    }

    .block > .head {
        gap: 12px;
    }

    .legend {
        grid-template-columns: 1fr 1fr;
    }

    .nest .row {
        flex-direction: column;
    }

    .links a:not(.btn) {
        display: none;
    }

    .modfig {
        gap: 20px;
        padding: 16px;
    }

    .game {
        margin-top: 0;
    }

    .xbody {
        gap: 20px;
    }

    .join {
        padding: 40px 24px;
        gap: 28px;
    }
}