:root { --black: #0d0e12; --black-2: #15161b; --paper: #f0f0e9; --paper-2: #e5e5dc; --lime: #d7f36a; --orange: #ff7048; --blue: #8ca9ff; --muted: #878881; --ink-muted: #5f615d; --line: rgba(13,14,18,.16); --line-dark: rgba(240,240,233,.17); --mono: "DM Mono", monospace; --sans: "Manrope", sans-serif; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--black); font-family: var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; } h1,h2,h3,p { margin: 0; } .section-wrap { padding-left: clamp(24px, 7.2vw, 116px); padding-right: clamp(24px, 7.2vw, 116px); } .micro-label, .kicker, .section-top, .version, .ticker, .feature-index, .install-note, .stage-label, .player-bar, .ui-heading, .side-item, .side-tool, .song, .player-keys, .now-title small, .command-strip, .footer { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }

.header { height: 82px; padding: 0 clamp(24px, 7.2vw, 116px); display: flex; align-items: center; justify-content: space-between; background: var(--paper); border-bottom: 1px solid var(--line); } .logo { display: inline-flex; align-items: center; gap: 10px; font: 500 17px var(--mono); letter-spacing: -.07em; }.logo-wave { height: 19px; display: flex; align-items: center; gap: 3px; }.logo-wave i { display: block; width: 4px; background: var(--orange); }.logo-wave i:nth-child(1) { height: 9px; }.logo-wave i:nth-child(2) { height: 18px; }.logo-wave i:nth-child(3) { height: 13px; }.logo-wave i:nth-child(4) { height: 6px; }.nav { display: flex; gap: 35px; margin-left: auto; margin-right: 55px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); }.nav a,.github-link,.footer a { transition: color .2s ease; }.nav a:hover,.github-link:hover,.footer a:hover { color: var(--orange); }.header-end { display: flex; align-items: center; gap: 29px; }.version { font-size: 9px; color: var(--ink-muted); }.version b { color: var(--orange); font-weight: 400; margin: 0 5px; }.github-link { font-size: 11px; font-weight: 700; }.github-link span { color: var(--orange); margin-left: 5px; }.menu-button { display: none; border: 0; background: none; padding: 6px; }.menu-button i { width: 22px; height: 1px; display: block; margin: 5px 0; background: var(--black); }

.install-dock { color: var(--paper); background: var(--black); border-bottom: 1px solid #2c2d32; }.install-dock-inner { min-height: 125px; padding: 25px clamp(24px, 7.2vw, 116px); display: grid; grid-template-columns: .65fr 1.6fr auto; gap: 48px; align-items: center; }.micro-label { display: block; font-size: 9px; color: var(--orange); }.install-intro strong { display: block; margin-top: 9px; color: var(--paper); font-size: 17px; line-height: 1.04; letter-spacing: -.05em; }.install-control { min-width: 0; }.install-tabs { display: flex; gap: 23px; border-bottom: 1px solid #3a3b40; }.install-tab { padding: 0 0 10px; color: #787a76; border: 0; border-bottom: 2px solid transparent; background: none; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }.install-tab.active { color: var(--lime); border-color: var(--lime); }.install-command { display: flex; gap: 10px; align-items: center; min-width: 0; margin-top: 14px; color: #d5d7ce; font: 11px var(--mono); }.install-command .prompt { color: var(--lime); }.install-command code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.copy-button { flex: 0 0 auto; border: 0; color: #8c8e88; background: none; font: 9px var(--mono); cursor: pointer; }.copy-button:hover { color: var(--lime); }.copy-button span { color: var(--orange); margin-left: 5px; }.install-note { color: #9ca099; font-size: 8px; white-space: nowrap; }.green-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #a6d98b; }

.hero { color: var(--paper); background: var(--black); padding: 87px clamp(24px, 7.2vw, 116px) 92px; }.hero-grid { display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: clamp(45px, 9vw, 145px); max-width: 1400px; margin: auto; }.kicker { display: flex; align-items: center; gap: 9px; color: var(--orange); font-size: 9px; }.orange-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,112,72,.14); }.hero h1 { margin: 26px 0 25px; color: var(--paper); font-size: clamp(57px, 7.3vw, 113px); line-height: .88; letter-spacing: -.095em; font-weight: 700; }.hero h1 span { color: var(--lime); }.hero-text { max-width: 420px; color: #a6a8a1; font-size: 16px; line-height: 1.55; letter-spacing: -.03em; }.hero-actions { display: flex; align-items: center; gap: 13px; margin-top: 35px; }.button { min-height: 47px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid transparent; font-size: 11px; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease; }.button span { font-size: 16px; font-weight: 400; }.button:hover { transform: translateY(-2px); }.button-lime { color: var(--black); background: var(--lime); }.button-lime:hover { background: #efff9a; }.button-dark { color: var(--paper); border-color: #505159; }.button-dark:hover { border-color: var(--orange); color: var(--orange); }.hero-assurance { display: flex; flex-direction: column; gap: 9px; margin-top: 63px; color: #777a75; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.hero-assurance b { display: inline-block; width: 22px; color: var(--orange); font-weight: 400; }

.player-stage { position: relative; padding: 30px 13px 24px; }.player-stage:before, .player-stage:after { content: ""; position: absolute; background: #33353a; }.player-stage:before { width: 1px; top: 0; bottom: 0; left: 0; }.player-stage:after { height: 1px; top: 0; right: 0; left: 0; }.stage-label { display: flex; justify-content: space-between; color: #777a75; font-size: 8px; }.stage-label-top { position: absolute; top: -1px; right: 0; left: 14px; transform: translateY(-50%); }.stage-label b { color: var(--orange); font-weight: 400; }.stage-label-bottom { position: absolute; right: 0; bottom: 0; left: 14px; }.player-window { overflow: hidden; background: #191a1f; border: 1px solid #55575c; box-shadow: 13px 14px 0 #202126; }.player-bar { height: 35px; display: flex; justify-content: center; align-items: center; position: relative; border-bottom: 1px solid #36373c; color: #858781; font-size: 8px; }.window-dots { display: flex; gap: 5px; position: absolute; left: 13px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #56585b; }.window-dots i:first-child { background: var(--orange); }.player-bar b { display: flex; align-items: center; gap: 3px; position: absolute; right: 13px; color: #9ba097; font-size: 7px; font-weight: 400; }.player-body { display: grid; grid-template-columns: .78fr 1.6fr; gap: 11px; padding: 14px 15px 11px; }.player-sidebar { border-right: 1px solid #35363b; padding-right: 13px; }.ui-heading { color: var(--orange); font-size: 8px; }.ui-heading small { margin-left: 4px; color: #7d7f7a; font-size: 7px; }.side-item { color: #8e918b; font-size: 8px; line-height: 2.65; white-space: nowrap; }.side-item small { float: right; color: #666963; font-size: 7px; }.side-item.active { margin-left: -7px; padding-left: 7px; color: var(--black); background: var(--lime); }.side-item.active small { color: #535a34; }.sidebar-line { height: 1px; margin: 15px 0 9px; background: #35363b; }.side-tool { color: #6f726c; font-size: 8px; line-height: 2.5; }.side-tool small { float: right; color: var(--orange); }.playlist { position: relative; min-width: 0; padding-bottom: 31px; }.playlist-head { min-height: 33px; display: flex; justify-content: space-between; }.playlist-head small { display: block; margin-top: 5px; color: #696b67; font: 7px var(--mono); }.cat { color: var(--lime); text-align: center; font: 10px/.8 var(--mono); }.cat b { color: #858781; font-weight: 400; }.song { display: grid; grid-template-columns: 21px 16px 1fr auto; gap: 5px; align-items: center; color: #92958e; font-size: 9px; line-height: 2.8; }.song > span { color: #666963; }.song b { color: transparent; font-size: 8px; }.song.active { color: var(--paper); }.song.active > span, .song.active b { color: var(--orange); }.song strong { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }.song small { color: #666963; font-size: 7px; }.bars { height: 29px; display: flex; align-items: end; gap: 3px; position: absolute; right: 0; bottom: 0; left: 0; border-bottom: 1px solid #404146; }.bars i { flex: 1; min-width: 2px; height: 20%; background: var(--orange); opacity: .75; }.bars i:nth-child(2n) { height: 45%; }.bars i:nth-child(3n) { height: 75%; }.bars i:nth-child(5n) { height: 55%; }.bars i:nth-child(7n) { height: 90%; }.player-now { display: flex; align-items: center; gap: 10px; padding: 0 15px; }.cover { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border: 1px solid #5d5e60; color: var(--orange); background: #27252a; font-size: 23px; }.now-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.now-title small { color: var(--orange); font-size: 7px; }.now-title strong { overflow: hidden; color: var(--paper); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }.now-title span { color: #787b75; font: 8px var(--mono); }.now-time { margin-left: auto; color: #a5a79f; font: 9px var(--mono); white-space: nowrap; }.now-time em { color: #666963; font-style: normal; }.player-progress { height: 2px; margin: 13px 15px 10px; background: #46484c; }.player-progress span { display: block; width: 27%; height: 100%; position: relative; background: var(--lime); }.player-progress span:after { content: ""; width: 6px; height: 6px; position: absolute; top: -2px; right: -2px; border-radius: 50%; background: var(--lime); }.player-keys { display: flex; justify-content: space-between; gap: 7px; padding: 0 15px 13px; color: #71746e; font-size: 7px; }.player-keys b { color: var(--lime); font-weight: 400; }

.ticker { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 clamp(24px, 7.2vw, 116px); color: #797c76; background: var(--lime); font-size: 9px; }.ticker div { display: flex; gap: 11px; }.ticker i { color: #77833d; font-style: normal; }.ticker div:nth-child(2) { color: var(--black); }.ticker div:last-child { justify-content: flex-end; }

.section-top { min-height: 31px; display: flex; align-items: center; gap: 14px; color: var(--orange); font-size: 9px; }.section-number { color: var(--orange); }.section-rule { height: 1px; flex: 1; background: var(--line); }.section-side { color: var(--ink-muted); font-size: 8px; }.why { padding-top: 120px; padding-bottom: 128px; }.why-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 55px; margin-top: 40px; }.why-heading h2, .features-heading h2, .closing h2 { font-size: clamp(47px, 6.2vw, 93px); line-height: .91; letter-spacing: -.09em; font-weight: 700; }.why-heading h2 span, .features-heading h2 span { color: #93958e; }.why-heading p { margin-top: 17px; color: var(--orange); font: 500 14px var(--mono); }.why-copy { max-width: 375px; padding-top: 8px; }.why-copy p { margin-bottom: 18px; color: #60635d; font-size: 15px; line-height: 1.55; letter-spacing: -.02em; }.text-link { display: inline-flex; gap: 17px; margin-top: 12px; padding-bottom: 5px; border-bottom: 1px solid var(--orange); font-size: 11px; font-weight: 700; }.text-link span { color: var(--orange); }.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 90px; }.trust-card { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; position: relative; background: var(--paper-2); }.trust-card-dark { color: var(--paper); background: var(--black); }.trust-icon { color: var(--orange); font-size: 23px; }.trust-card small { display: block; margin-bottom: 14px; color: var(--orange); font: 9px var(--mono); }.trust-card h3 { max-width: 190px; margin-bottom: 10px; font-size: 22px; line-height: 1; letter-spacing: -.06em; }.trust-card p { max-width: 225px; color: #6a6d66; font-size: 12px; line-height: 1.45; }.trust-card-dark p { color: #9b9e96; }.trust-card > b { position: absolute; top: 22px; right: 22px; color: #a6a8a0; font: 9px var(--mono); font-weight: 400; }.trust-card-dark > b { color: #777a74; }

.features { padding-top: 0; padding-bottom: 124px; }.features-heading { display: flex; justify-content: space-between; align-items: end; margin-top: 40px; }.features-heading p { max-width: 160px; margin-bottom: 5px; color: #72756e; font: 10px var(--mono); text-transform: uppercase; line-height: 1.45; }.feature-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 11px; margin-top: 53px; }.feature { min-height: 300px; padding: 22px; position: relative; background: var(--paper-2); }.feature-index { display: flex; justify-content: space-between; color: var(--orange); font-size: 9px; }.feature-index span { color: #898c84; }.feature h3 { margin-top: 53px; margin-bottom: 13px; font-size: 29px; line-height: .94; letter-spacing: -.07em; }.feature p { max-width: 265px; color: #676a63; font-size: 12px; line-height: 1.5; }.feature-search { color: var(--paper); background: var(--black); }.feature-search .feature-index span, .feature-search p { color: #92958e; }.feature-search h3 { color: var(--paper); }.feature-lua { grid-column: 1 / 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 256px; }.feature-lua h3 { margin-top: 26px; }.feature-lua p { max-width: 235px; }.feature-stats { min-height: 256px; }.feature-stats h3 { margin-top: 26px; }.keycaps { position: absolute; bottom: 22px; left: 22px; display: flex; gap: 5px; }.keycaps kbd { min-width: 27px; padding: 6px 7px; color: #696c65; border: 1px solid #caccc2; background: #f2f2e9; font: 9px var(--mono); text-align: center; }.search-line { position: absolute; right: 22px; bottom: 26px; left: 22px; padding-bottom: 8px; border-bottom: 1px solid #3c3e43; color: #d7d9d2; font: 10px var(--mono); }.search-line span { margin-right: 7px; color: var(--lime); }.search-line i { float: right; color: var(--orange); font-style: normal; }.lua-lines { width: 245px; margin-left: auto; padding-top: 26px; color: #6b6e67; font: 10px/2 var(--mono); }.lua-lines span { display: block; border-bottom: 1px solid #cdd0c6; }.lua-lines b { color: var(--orange); font-weight: 400; }.stats-chart { height: 50px; display: flex; align-items: end; gap: 6px; position: absolute; right: 22px; bottom: 25px; left: 22px; border-bottom: 1px solid #c9cbc1; }.stats-chart i { flex: 1; background: var(--orange); }.stats-chart i:nth-child(1) { height: 30%; }.stats-chart i:nth-child(2) { height: 52%; }.stats-chart i:nth-child(3) { height: 42%; }.stats-chart i:nth-child(4) { height: 79%; }.stats-chart i:nth-child(5) { height: 62%; }.stats-chart i:nth-child(6) { height: 91%; }.stats-chart i:nth-child(7) { height: 68%; }

.command-strip { min-height: 79px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 clamp(24px, 7.2vw, 116px); color: var(--paper); background: var(--orange); font-size: 10px; }.command-strip div { display: flex; align-items: center; gap: 9px; }.command-strip .orange-dot { background: var(--black); box-shadow: none; }.command-strip small { font-size: 8px; }.command-strip code { color: var(--black); font-size: 13px; }.command-strip code b { font-weight: 400; }.command-strip a { justify-self: end; border-bottom: 1px solid var(--black); padding-bottom: 4px; color: var(--black); font-size: 10px; }.command-strip a span { margin-left: 10px; font-size: 15px; }.closing { padding: 113px clamp(24px, 7.2vw, 116px) 119px; color: var(--paper); background: var(--black); }.closing-inner { max-width: 1400px; margin: auto; }.closing .section-rule { background: var(--line-dark); }.closing h2 { margin: 58px 0 27px; }.closing h2 span { color: var(--lime); }.closing p { margin-bottom: 31px; color: #969991; font: 12px var(--mono); }.footer { min-height: 88px; padding: 0 clamp(24px, 7.2vw, 116px); display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #747770; background: var(--black); border-top: 1px solid #2c2d32; font-size: 9px; }.footer .logo { color: var(--paper); }.footer > div { display: flex; gap: 22px; color: #a3a59e; }

@media (max-width: 900px) { .install-dock-inner { grid-template-columns: .7fr 1.3fr; gap: 30px; }.install-note { display: none; }.hero-grid { grid-template-columns: 1fr; gap: 63px; }.hero-copy { max-width: 650px; }.player-stage { max-width: 700px; width: 100%; }.why-grid { grid-template-columns: 1fr .8fr; }.ticker { font-size: 8px; }.ticker div:last-child { display: none; } }
@media (max-width: 620px) { .header { height: 72px; }.nav,.header-end { display: none; }.menu-button { display: block; }.header.menu-open { position: relative; z-index: 10; background: var(--paper); }.header.menu-open .nav { display: flex; flex-direction: column; gap: 20px; position: absolute; top: 71px; right: 0; left: 0; margin: 0; padding: 23px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }.install-dock-inner { display: block; padding-top: 30px; padding-bottom: 31px; }.install-intro strong { font-size: 25px; }.install-control { margin-top: 25px; }.install-tabs { gap: 14px; overflow-x: auto; }.install-tab { flex: 0 0 auto; font-size: 8px; }.install-command { gap: 7px; font-size: 9px; }.copy-button { font-size: 8px; }.hero { padding-top: 62px; padding-bottom: 71px; }.hero h1 { font-size: clamp(57px, 16vw, 83px); }.hero-text { font-size: 14px; }.hero-actions { flex-direction: column; align-items: stretch; }.button { width: fit-content; }.hero-assurance { margin-top: 43px; }.player-stage { padding: 28px 8px 23px; }.player-window { box-shadow: 7px 8px 0 #202126; }.player-body { grid-template-columns: .75fr 1.6fr; padding: 11px 10px 8px; gap: 7px; }.player-sidebar { padding-right: 7px; }.side-item,.side-tool,.ui-heading,.song { font-size: 7px; }.song { grid-template-columns: 16px 12px 1fr; line-height: 2.9; }.song small { display: none; }.player-bar { font-size: 7px; }.player-bar b { font-size: 6px; }.now-title strong { font-size: 8px; }.now-title span { font-size: 7px; }.player-keys { gap: 3px; padding-right: 10px; padding-left: 10px; font-size: 5px; }.player-now { padding: 0 10px; }.player-progress { margin-right: 10px; margin-left: 10px; }.ticker { min-height: 61px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 9px; padding-bottom: 9px; font-size: 7px; }.ticker div { flex-wrap: wrap; gap: 6px; }.ticker div:nth-child(2) { justify-content: flex-end; text-align: right; }.why { padding-top: 79px; padding-bottom: 84px; }.why-grid { display: block; margin-top: 32px; }.why-heading h2,.features-heading h2,.closing h2 { font-size: 52px; }.why-heading p { font-size: 11px; }.why-copy { padding-top: 33px; }.why-copy p { font-size: 14px; }.trust-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 54px; }.trust-card { min-height: 215px; }.features { padding-bottom: 83px; }.features-heading { display: block; margin-top: 31px; }.features-heading p { margin-top: 19px; }.feature-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 37px; }.feature,.feature-lua,.feature-stats { grid-column: auto; min-height: 285px; }.feature-lua,.feature-stats { min-height: 260px; }.lua-lines { width: 100%; margin-top: 22px; padding-top: 0; }.command-strip { min-height: 145px; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 17px; }.command-strip code { font-size: 11px; }.command-strip a { align-self: end; }.closing { padding-top: 77px; padding-bottom: 84px; }.closing h2 { margin-top: 49px; }.footer { min-height: 145px; flex-wrap: wrap; align-content: center; padding-top: 25px; padding-bottom: 25px; }.footer > span { order: 3; width: 100%; }.footer > div { gap: 13px; } }