/**
 * Главная страница.
 *
 * Свой файл, а не кусок app.css: страница одна, стилей у неё много, и они
 * никому больше не нужны — тащить их в общий бандл на все 76 страниц незачем.
 *
 * ПАЛИТРА
 * Тёплая бумага вместо белого и коричневые чернила вместо чёрных. По
 * отдельности разница почти незаметна, но именно из-за неё страница перестаёт
 * выглядеть интерфейсом. Тёмная тема — не инверсия светлой: у неё своя тёплая
 * тёмная бумага и подтянутые под неё цвета разделов, иначе синий с
 * фиолетовым на тёмном проваливаются.
 *
 * ЦВЕТ РАЗДЕЛОВ РАБОТАЕТ, А НЕ УКРАШАЕТ
 * Синий — тем, кто учится; коралловый — тем, кто соревнуется; фиолетовый —
 * третьей дорожке. Плитки ниже берут те же цвета, и человек уже знает, что
 * чьё, не читая подписей.
 */

.ld {
    --paper: #FFFFFF;
    --cream: #FFF9F1;
    --ink: #2E2118;
    --soft: #8A7A6B;
    --line: #EFE3D5;
    --key-bg: #FFF3E2;
    --key-line: #F3DFC4;
    --key-ink: #B39A7C;
    --tint: #FFFCF6;
    --tint2: #FFF6E8;

    --sun: #FFB020;
    --sun-edge: #D98F00;
    --coral: #FF6B4A;
    --coral-edge: #D9482A;
    --mint: #2FBF71;
    --sky: #3B9EFF;
    --grape: #8B5CF6;

    --ok-bg: #E6F8EE;
    --ok-ink: #1F8B52;

    font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--cream);
    color: var(--ink);
    min-height: 100vh;
}

[data-theme="dark"] .ld {
    --paper: #241C16;
    --cream: #1A1410;
    --ink: #FFF3E4;
    --soft: #A8968A;
    --line: #33291F;
    --key-bg: #2E241C;
    --key-line: #3D3025;
    --key-ink: #8B7967;
    --tint: #241C16;
    --tint2: #2A2019;

    --sun: #FFC24D;
    --sun-edge: #C98F14;
    --coral: #FF8264;
    --coral-edge: #C9563A;
    --mint: #3FD183;
    --sky: #5FB0FF;
    --grape: #A583FF;

    --ok-bg: #1F3328;
    --ok-ink: #5FD79A;
}

body.cw-bare { background: #FFF9F1; margin: 0; }
[data-theme="dark"] body.cw-bare { background: #1A1410; }

/*
 * Тот же капкан, что и с ссылками ниже: `.ld p` весит 0-1-1 и выигрывал у
 * `.ld-note` и `.ld-lead` (0-1-0). Все margin-top у абзацев героя молча не
 * применялись — строка про регистрацию прилипала к кнопкам, а подзаголовок
 * к заголовку. :where() обнуляет вес, и любой класс теперь сильнее.
 */
:where(.ld) h1, :where(.ld) h2, :where(.ld) h3, :where(.ld) p { margin: 0; }
/*
 * :where() обнуляет вес селектора, поэтому правило перебивается любым
 * классом. Без него `.ld a` (вес 0-1-1) выигрывал у `.ld-btn--sun`
 * (0-1-0), кнопка брала цвет темы, и на тёмной надпись «Заниматься»
 * оказывалась светлой на светло-янтарном — почти невидимой.
 */
:where(.ld) a { color: inherit; text-decoration: none; }
.ld b, .ld em { font-style: normal; }
.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Каретка — единственное, что мигает на странице постоянно. */
.ld-caret {
    display: inline-block;
    width: .5em;
    height: .9em;
    vertical-align: -.06em;
    border-radius: 3px;
    background: var(--sun);
    animation: ld-blink 1.05s steps(1) infinite;
}
.ld-caret--sm { width: 10px; height: 22px; vertical-align: -3px; }
@keyframes ld-blink { 0%, 52% { opacity: 1 } 53%, 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
    .ld-caret { animation: none; }
}

/* ==========================================================================
   МАСКОТ
   ========================================================================== */

.ld-klava {
    width: var(--s);
    height: var(--s);
    position: relative;
    flex-shrink: 0;
    display: inline-block;
}
.ld-klava__cap {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--s) * .22);
    background: var(--sun);
    box-shadow: 0 calc(var(--s) * .07) 0 var(--sun-edge);
}
.ld-klava__gloss {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 8%;
    height: 34%;
    border-radius: calc(var(--s) * .17);
    background: rgba(255, 255, 255, .34);
}
.ld-klava__eyes {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--s) * .34);
    display: flex;
    justify-content: center;
    gap: calc(var(--s) * .16);
}
.ld-eye {
    width: calc(var(--s) * .11);
    height: calc(var(--s) * .15);
    border-radius: calc(var(--s) * .06);
    background: #2E2118;
    transition: height .08s;
}
.ld-klava__smile {
    position: absolute;
    left: 50%;
    top: calc(var(--s) * .58);
    transform: translateX(-50%);
    width: calc(var(--s) * .2);
    height: calc(var(--s) * .1);
    border-bottom: max(2px, calc(var(--s) * .035)) solid #2E2118;
    border-radius: 0 0 var(--s) var(--s);
}
.ld-klava__crown {
    position: absolute;
    left: 50%;
    top: calc(var(--s) * -.22);
    transform: translateX(-50%);
    width: calc(var(--s) * .52);
    color: var(--sun);
}

/* ==========================================================================
   ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================================== */

/* Кнопка с нижней гранью: предмет сайта вынесен в оформление —
   её хочется нажать, как настоящую клавишу. */
.ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 60px;
    padding: 0 30px;
    border: 0;
    border-radius: 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .09s, box-shadow .09s;
}
.ld-btn--sun {
    background: var(--sun);
    color: #2E2118;
    box-shadow: 0 5px 0 var(--sun-edge), 0 14px 26px -14px var(--sun-edge);
}
.ld-btn--ghost {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 5px 0 var(--line);
    font-size: 17px;
}
.ld-btn--sm { height: 48px; padding: 0 22px; border-radius: 16px; font-size: 16px; }
.ld-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sun-edge); }
.ld-btn--ghost:active { box-shadow: 0 2px 0 var(--line); }

.ld-card {
    background: var(--paper);
    border-radius: 26px;
    box-shadow: 0 3px 0 var(--line), 0 18px 32px -26px rgba(46, 33, 24, .45);
}

.ld-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
}
.ld-chip--sky { background: color-mix(in srgb, var(--sky) 15%, transparent); color: var(--sky); }
.ld-chip--mint { background: color-mix(in srgb, var(--mint) 15%, transparent); color: var(--mint); }
.ld-chip--coral { background: color-mix(in srgb, var(--coral) 15%, transparent); color: var(--coral); }
.ld-chip--grape { background: color-mix(in srgb, var(--grape) 15%, transparent); color: var(--grape); }

.ld-star { fill: var(--line); }
.ld-star.is-on { fill: var(--sun); }
.ld-stars { display: flex; gap: 4px; }

.ld-sec { padding: 0 50px 34px; }
.ld-h2 { font-size: 32px; font-weight: 900; letter-spacing: -.025em; }
.ld-sub { font-size: 16px; font-weight: 600; color: var(--soft); margin-top: 8px; }

/* ==========================================================================
   ШАПКА
   ========================================================================== */

.ld-nav { height: 78px; display: flex; align-items: center; gap: 28px; padding: 0 50px; }
.ld-logo { display: flex; align-items: center; gap: 11px; }
.ld-logo b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.ld-nav__links { display: flex; gap: 26px; }
.ld-nav__links a { font-size: 16px; font-weight: 700; color: var(--soft); }
.ld-nav__links a:hover { color: var(--ink); }

/*
 * «Войти» — кнопка, но тихая: у неё есть форма и грань, как у клавиши, и нет
 * заливки. Рядом стоит «Заниматься» жёлтым — если бы вход выглядел так же,
 * два равных по силе действия спорили бы, и человек не понимал бы, куда
 * нажимать первым.
 */
.ld-nav__login {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    background: var(--key-bg);
    border-bottom: 2px solid var(--key-line);
    color: var(--soft);
    font-size: 15px;
    font-weight: 800;
    transition: color .15s, background .15s, transform .1s, border-bottom-width .1s;
}
.ld-nav__login:hover { background: var(--paper); color: var(--ink); }
.ld-nav__login:active { transform: translateY(1px); border-bottom-width: 1px; }

.ld-theme {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 15px;
    background: var(--key-bg);
    color: var(--soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-theme:hover { color: var(--ink); }
.ld-theme__sun { display: none; }
[data-theme="dark"] .ld-theme__moon { display: none; }
[data-theme="dark"] .ld-theme__sun { display: block; }

/* ==========================================================================
   ГЕРОЙ
   ========================================================================== */

.ld-hero { padding: 18px 50px 40px; display: flex; align-items: center; gap: 50px; }
.ld-hero__text { flex: 1 1 auto; min-width: 0; }

.ld-free {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--ok-bg);
    color: var(--ok-ink);
    font-size: 14px;
    font-weight: 700;
}

.ld-h1 { margin-top: 18px; font-size: 66px; font-weight: 900; letter-spacing: -.035em; line-height: 1.03; }
.ld-h1__accent { color: var(--coral); }

.ld-lead { margin-top: 20px; font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--soft); max-width: 620px; }

.ld-cta { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Отступ крупнее, чем у остальных шагов блока: строка стоит под кнопками
   в 60 px высотой, и при прежних 14 px читалась как их подпись, а не как
   отдельная мысль. */
.ld-note {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--soft);
}
.ld-note svg { color: var(--mint); flex-shrink: 0; }

.ld-hero__demo { width: 500px; flex-shrink: 0; position: relative; }
.ld-demo { padding: 30px 26px 26px; }
.ld-demo__klava { display: flex; justify-content: center; }
.ld-demo__line {
    margin-top: 22px;
    text-align: center;
    font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
    font-size: 22px;
    min-height: 30px;
}
.ld-demo__rest { color: var(--key-ink); }
.ld-demo__foot { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 26px; }
.ld-demo__cpm { text-align: center; }
.ld-demo__cpm b { display: block; font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ld-demo__cpm span { display: block; font-size: 12.5px; font-weight: 700; color: var(--soft); }
.ld-demo__sep { width: 1px; height: 30px; background: var(--line); }

.ld-bubble {
    position: absolute;
    left: -14px;
    top: 24px;
    padding: 9px 14px;
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 3px 0 var(--line);
    font-size: 14px;
    font-weight: 800;
}

/* Клавиатура демонстрации */
.ld-kb { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ld-kb__row { display: flex; gap: 4px; }
.ld-kb__row:nth-child(2) { margin-left: 11px; }
.ld-kb__row:nth-child(3) { margin-left: 22px; }
.ld-key {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--key-line);
    border-bottom-width: 3px;
    border-radius: 10px;
    background: var(--key-bg);
    color: var(--key-ink);
    font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
    font-size: 15px;
    transition: background .14s, color .14s, transform .14s, border-color .14s;
}
.ld-key.is-next {
    background: var(--sun);
    border-color: var(--sun-edge);
    color: #2E2118;
    transform: translateY(-3px);
}

/* ==========================================================================
   ДОРОЖКИ «КОМУ ПОДОЙДЁТ»
   ========================================================================== */

.ld-tracks { margin-top: 20px; display: flex; gap: 18px; }

.ld-track {
    flex: 1;
    min-width: 0;
    border-radius: 26px;
    background: var(--paper);
    box-shadow: 0 3px 0 var(--line), 0 18px 32px -26px rgba(46, 33, 24, .45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.ld-track:hover { transform: translateY(-4px); box-shadow: 0 3px 0 var(--line), 0 26px 40px -26px rgba(46, 33, 24, .55); }

.ld-track--sky { --tone: var(--sky); }
.ld-track--coral { --tone: var(--coral); }
.ld-track--grape { --tone: var(--grape); }

.ld-track__head { height: 104px; background: var(--tone); display: flex; align-items: center; gap: 14px; padding: 0 24px; }
.ld-track__ico {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 17px;
    background: rgba(255, 255, 255, .3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-track__head b { display: block; font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.ld-track__head em { display: block; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .85); margin-top: 1px; }

.ld-track__body { padding: 20px 24px 24px; display: flex; flex-direction: column; }
.ld-track__i { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 15.5px; font-weight: 600; }
.ld-track__i svg { flex-shrink: 0; color: var(--mint); }
.ld-track__go { margin-top: 14px; font-size: 15px; font-weight: 800; color: var(--tone); }

/* ==========================================================================
   ПЛИТКИ РАЗДЕЛОВ
   ========================================================================== */

.ld-tiles { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.ld-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 26px;
    background: var(--paper);
    box-shadow: 0 3px 0 var(--line);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ld-tile:hover { transform: translateY(-3px); }
.ld-tile--sky { --tone: var(--sky); }
.ld-tile--sun { --tone: var(--sun); }
.ld-tile--coral { --tone: var(--coral); }
.ld-tile--grape { --tone: var(--grape); }
.ld-tile--mint { --tone: var(--mint); }

.ld-tile__ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 15px;
    background: color-mix(in srgb, var(--tone) 17%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-tile__ico i { width: 16px; height: 16px; border-radius: 6px; background: var(--tone); }
.ld-tile__t { min-width: 0; }
.ld-tile__t b { display: block; font-size: 17px; font-weight: 800; }
.ld-tile__t em { display: block; font-size: 13.5px; color: var(--soft); margin-top: 1px; }

/* ==========================================================================
   ПРОФИЛЬ ИГРОКА
   ========================================================================== */

.ld-prof { margin-top: 20px; display: flex; overflow: hidden; }

.ld-prof__level { width: 330px; flex-shrink: 0; padding: 28px; border-right: 1px solid var(--line); background: var(--tint); }
.ld-prof__top { display: flex; align-items: center; gap: 16px; }
.ld-prof__ava { position: relative; display: inline-block; }
.ld-prof__ava i {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--coral);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 0 var(--coral-edge);
}
.ld-prof__top em { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.ld-prof__top b { display: block; font-size: 30px; font-weight: 900; line-height: 1.1; }

.ld-xp { margin-top: 20px; }
.ld-xp__head { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; color: var(--soft); }
.ld-xp__track { margin-top: 8px; height: 14px; border-radius: 999px; background: var(--key-bg); overflow: hidden; box-shadow: inset 0 2px 0 var(--key-line); }
.ld-xp__track i { display: block; height: 14px; width: 0; border-radius: 999px; background: var(--sun); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.ld-xp__chips { margin-top: 22px; display: flex; gap: 9px; flex-wrap: wrap; }

.ld-prof__medals { flex: 1 1 auto; min-width: 0; padding: 28px; }
.ld-prof__head { display: flex; align-items: baseline; gap: 10px; }
.ld-prof__head em { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.ld-prof__head span { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; }

.ld-medals { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.ld-medal { width: 86px; text-align: center; }
.ld-medal__box {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 20px;
    background: var(--key-bg);
    color: var(--key-ink);
    box-shadow: 0 3px 0 var(--key-line);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-medal em { display: block; font-size: 12px; font-weight: 700; margin-top: 8px; color: var(--soft); line-height: 1.3; }
.ld-medal.is-got .ld-medal__box { background: var(--tone); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--tone) 60%, #000); }
.ld-medal.is-got em { color: var(--ink); }
.ld-medal--sun { --tone: var(--sun); }
.ld-medal--mint { --tone: var(--mint); }
.ld-medal--coral { --tone: var(--coral); }
.ld-medal--sky { --tone: var(--sky); }
.ld-medal--grape { --tone: var(--grape); }

.ld-prof__side { width: 280px; flex-shrink: 0; padding: 28px; border-left: 1px solid var(--line); background: var(--tint2); display: flex; flex-direction: column; gap: 20px; }
.ld-streak { display: flex; align-items: center; gap: 10px; color: var(--coral); }
.ld-streak b { display: block; font-size: 30px; font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ld-streak em { display: block; font-size: 12.5px; font-weight: 700; color: var(--soft); margin-top: 2px; }
.ld-streak__bars { display: flex; gap: 4px; margin-top: -8px; }
.ld-streak__bars i { flex: 1; height: 8px; border-radius: 3px; background: var(--coral); }

.ld-place { display: flex; align-items: center; gap: 12px; }
.ld-place__n {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 15px;
    background: var(--sun);
    color: #2E2118;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 0 var(--sun-edge);
}
.ld-place b { display: block; font-size: 15px; font-weight: 800; }
.ld-place em { display: block; font-size: 12.5px; font-weight: 700; color: var(--soft); }

/* ==========================================================================
   ЦИФРЫ И ПОДВАЛ
   ========================================================================== */

.ld-figs { display: flex; gap: 14px; }
.ld-fig { flex: 1; padding: 20px 24px; }
.ld-fig b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ld-fig span { display: block; font-size: 13.5px; font-weight: 700; color: var(--soft); margin-top: 5px; }

/* Подвал — самая широкая клавиша нижнего ряда. Всё, что нужно подвалу,
   помещается на пробел; грань в 5 px и нажатие при наведении — та же
   механика, что у кнопок страницы. */
.ld-foot { padding: 0 50px 30px; }

.ld-space {
    height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    border: 1px solid var(--key-line);
    border-bottom-width: 5px;
    border-radius: 16px;
    background: var(--paper);
    transition: transform .12s, border-bottom-width .12s;
}
.ld-space:hover { transform: translateY(2px); border-bottom-width: 3px; }
.ld-space > b { font-size: 15px; font-weight: 900; letter-spacing: -.02em; }

.ld-space__links { display: flex; gap: 24px; flex-wrap: wrap; }
.ld-space__links a { font-size: 14px; font-weight: 700; color: var(--soft); transition: color .15s; }
.ld-space__links a:hover { color: var(--ink); }

/* Подпись клавиши: она и объясняет шутку, и заменяет копирайт-строку. */
.ld-space__hint {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--key-ink);
    white-space: nowrap;
}

/* ==========================================================================
   УЗКИЕ ЭКРАНЫ
   ========================================================================== */

@media (max-width: 1240px) {
    .ld-hero__demo { width: 420px; }
    .ld-h1 { font-size: 54px; }
    .ld-tiles { grid-template-columns: repeat(3, 1fr); }
    .ld-prof__level { width: 290px; }
    .ld-prof__side { width: 240px; }
}

@media (max-width: 1024px) {
    .ld-nav, .ld-hero, .ld-sec, .ld-foot { padding-left: 26px; padding-right: 26px; }
    .ld-hero { flex-direction: column; align-items: stretch; }
    .ld-hero__demo { width: auto; }
    .ld-tracks { flex-direction: column; }
    .ld-prof { flex-direction: column; }
    .ld-prof__level, .ld-prof__side { width: auto; border: 0; border-bottom: 1px solid var(--line); }
    .ld-figs { flex-wrap: wrap; }
    .ld-fig { flex: 1 1 45%; }
}

@media (max-width: 720px) {
    .ld-nav__links { display: none; }
    .ld-h1 { font-size: 38px; }
    .ld-lead { font-size: 17px; }
    .ld-btn { height: 54px; font-size: 16px; padding: 0 22px; }
    .ld-tiles { grid-template-columns: 1fr 1fr; }
    .ld-space { height: auto; padding: 16px 18px; flex-wrap: wrap; gap: 12px 18px; }
    .ld-space__hint { margin-left: 0; }
}