:root {
    color-scheme: dark;
    --page: #06050d;
    --surface: rgba(22, 18, 31, .78);
    --surface-strong: rgba(15, 11, 24, .94);
    --ink: #f2f0f9;
    --muted: #9797b8;
    --soft: #726f92;
    --line: #2c2545;
    --brand: #a78bfa;
    --brand-soft: #d8cbff;
    --blue: #60a5fa;
    --green: #34d399;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--page); scroll-behavior: smooth; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--page);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

#stars { position: fixed; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(720px 480px at 12% -8%, rgba(139, 92, 246, .20), transparent 60%),
        radial-gradient(640px 460px at 108% 12%, rgba(96, 165, 250, .14), transparent 60%),
        radial-gradient(900px 620px at 50% 120%, rgba(139, 92, 246, .10), transparent 60%);
}

main { width: min(820px, calc(100% - 32px)); margin: 44px auto 56px; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #f7f4ff;
    font-family: ui-rounded, "SF Pro Rounded", "Helvetica Neue", sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .04em;
    text-decoration: none;
    text-shadow: 0 1px 12px rgba(216, 203, 255, .20);
}

.mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(216, 203, 255, .30);
    border-radius: 12px;
    background: linear-gradient(145deg, #9b6cff, #5b21b6);
    box-shadow: 0 7px 18px rgba(109, 40, 217, .32);
    transition: transform .15s ease, box-shadow .15s ease;
}

.brand:hover .mark { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(109, 40, 217, .44); }
.palm-mark { width: 30px; height: 30px; overflow: visible; }

article {
    margin-top: 20px;
    padding: 42px;
    border: 1px solid rgba(139, 92, 246, .20);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

h1 { margin: 0; color: #f7f4ff; font-size: clamp(30px, 5vw, 42px); line-height: 1.15; letter-spacing: 0; }
h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, #a78bfa, transparent);
}
h2 { margin: 0 0 11px; display: flex; align-items: center; gap: 12px; color: #ede9fe; font-size: 21px; line-height: 1.28; letter-spacing: 0; }
p { margin: 0; color: var(--muted); }
strong { color: var(--ink); }

.meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .22);
    color: var(--brand-soft);
    font-size: 12.5px;
    font-weight: 600;
}
.meta::before { content: "🗓"; font-size: 12px; }
.lead { margin-top: 18px; color: #c5c4dc; font-size: 18px; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.toc a {
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(139, 92, 246, .16);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.toc a:hover { background: rgba(139, 92, 246, .16); color: #fff; border-color: rgba(139, 92, 246, .4); }

section { margin-top: 29px; padding-top: 27px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
section h2::before {
    content: counter(section);
    counter-increment: section;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(145deg, #9b6cff, #5b21b6);
    color: #f7f4ff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(109, 40, 217, .32);
}
article { counter-reset: section; }
ol, ul { list-style: none; margin: 14px 0 0; padding: 0; color: var(--muted); }
li { position: relative; padding-left: 22px; }
li + li { margin-top: 9px; }
li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 6px rgba(167, 139, 250, .5);
}

.notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 17px 19px;
    border: 1px solid rgba(96, 165, 250, .24);
    border-left: 3px solid var(--blue);
    border-radius: 12px;
    background: rgba(30, 58, 95, .28);
    color: #bfdbfe;
}
.notice::before { content: "ℹ️"; flex: none; font-size: 17px; line-height: 1.3; }

nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }
nav a {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .24);
    color: var(--brand-soft);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
nav a:hover { background: rgba(139, 92, 246, .22); color: #fff; transform: translateY(-1px); }

footer { margin: 18px 3px 0; color: var(--soft); font-size: 13px; }

.to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 40;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 18, 31, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, .28);
    color: #d8cbff;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: rgba(139, 92, 246, .28); }

@media (max-width: 560px) {
    main { width: min(100% - 24px, 820px); margin: 25px auto 36px; }
    article { margin-top: 16px; padding: 27px 22px; border-radius: 14px; }
    .brand { font-size: 17px; }
    .mark { width: 38px; height: 38px; border-radius: 11px; }
    .lead { font-size: 17px; }
    h2 { font-size: 19px; }
    h2::before { width: 24px; height: 24px; font-size: 12px; border-radius: 8px; }
    .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}