:root { color-scheme: dark; --bg: #18111d; --text: #f8eef5; --muted: #c9bbcd; --line: #48384c; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 5%, #2c1c31, transparent 62%), var(--bg); color: var(--text); font: 1rem/1.6 system-ui, sans-serif; }
.shell { width: min(100% - 2.25rem, 62rem); margin-inline: auto; }
.top { padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; color: inherit; font-weight: 650; text-decoration: none; }
.intro { text-align: center; padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); }
.label { margin: 0; color: var(--accent, #ddbdde); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, serif; font-weight: 400; line-height: 1.04; margin: 0; }
h1 { font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -.055em; margin-block: .7rem 1.2rem; }
h1 em { color: #e0b5d9; }
.intro > :last-child { max-width: 31rem; margin: auto; color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); }
.apps { display: grid; gap: 1rem; }
.app { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 1.4rem; overflow: hidden; }
.hellos { --accent: #d8c5fa; background: #21182e; }
.ever { --accent: #f2bcac; background: #271a21; }
.art { display: grid; place-items: center; height: 9rem; color: var(--accent); background: radial-gradient(ellipse at center, #ffffff13, transparent 70%); border-bottom: 1px solid var(--line); }
.art svg { width: min(100%, 20rem); height: 100%; }
.content { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: clamp(1.2rem, 4vw, 1.8rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-top: .45rem; }
.content > p:nth-of-type(2) { flex: 1; color: var(--muted); margin: .6rem 0 1.15rem; }
.content a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 46px; padding: .5rem .85rem; border: 1px solid var(--accent); border-radius: .6rem; color: var(--accent); text-decoration: none; font-weight: 650; }
.content a:hover { background: var(--accent); color: var(--bg); }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .35rem 1rem; margin-top: 2.4rem; padding-block: 1.2rem 1.6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
@media (min-width: 42rem) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }