:root { color-scheme: light dark; --canvas: #f6f8f6; --card: #fff; --ink: #10291c; --muted: #546159; --green: #55b685; --line: #dbe6de; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
main { width: min(100% - 40px, 600px); margin: 56px auto 28px; }
header { display: flex; gap: 14px; align-items: center; margin-bottom: 36px; }
header img { border-radius: 13px; }
header strong, header span, .workspace strong, .workspace span { display: block; }
header strong { font-size: 18px; } header span { font-size: 14px; color: var(--muted); }
section { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 36px; }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.13; letter-spacing: -.035em; margin: 18px 0; overflow-wrap: anywhere; }
p { color: var(--muted); margin: 0 0 22px; overflow-wrap: anywhere; }
.workspace { display: flex; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 24px 0; }
.workspace strong { font-size: 19px; overflow-wrap: anywhere; } .workspace span { color: var(--muted); font-size: 14px; }
.workspace .symbol { color: var(--ink); background: var(--green); border-radius: 12px; padding: 8px 16px; font-size: 25px; }
button, .primary { display: block; text-align: center; text-decoration: none; width: 100%; border: 0; border-radius: 12px; padding: 17px 18px; background: var(--green); color: #10291c; font: inherit; font-weight: 650; cursor: pointer; }
button:focus-visible, .primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; } button:hover, .primary:hover { filter: brightness(.96); }
.secondary { background: transparent; border: 1px solid var(--line); color: var(--ink); margin-bottom: 20px; }
.hint { font-size: 13px; margin-top: 14px; } .install { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
h2 { font-size: 16px; margin: 0 0 10px; } .install p { font-size: 14px; margin-bottom: 12px; }
footer { color: var(--muted); text-align: center; font-size: 13px; margin-top: 24px; }
[hidden] { display: none !important; }
@media (max-width: 480px) { main { width: calc(100% - 28px); margin-top: 28px; } section { padding: 25px; border-radius: 20px; } }
@media (prefers-color-scheme: dark) { :root { --canvas: #101914; --card: #19231d; --ink: #edf6ef; --muted: #b4c3b8; --line: #33473a; } .workspace .symbol { color: #10291c; } }