* { box-sizing: border-box; }
body { margin: 0px; }
main { max-width: 760px; margin: auto; padding: 44px 24px; }
.brand { display: flex; gap: 14px; align-items: center; text-decoration: none; font-size: 28px; font-weight: 800; }
.brand span { font-size: 22px; }
.eyebrow { margin-top: 52px; font-size: 12px; letter-spacing: 2px; }
h1 { font-size: clamp(36px, 8vw, 62px); line-height: 1.1; margin: 18px 0px; }
p { line-height: 1.6; }
.intro { max-width: 520px; font-size: 18px; }
.features { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0px 32px; }
.features span { padding: 10px 14px; border-radius: 12px; }
section { border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
h2 { margin: 0px; font-size: 22px; }
button, #bot { display: block; border: 0px; border-radius: 12px; padding: 15px 20px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; width: 100%; min-height: 48px; }
button:disabled { opacity: 0.6; }
#code { display: block; letter-spacing: 8px; font-size: 32px; }
#pending { margin: 20px 0px; }
.small, footer { font-size: 13px; }
footer { margin-top: 28px; display: flex; justify-content: space-between; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 4px; }
[hidden] { display: none !important; }
:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--bg); }
body { margin: 0px; min-height: 100dvh; background: none; }
main { max-width: 850px; margin: auto; padding: 52px 28px; }
.brand { color: var(--accent); }
.brand span { color: var(--text); }
.eyebrow { color: var(--accent); }
.intro, p { color: var(--muted); line-height: 1.6; }
h1 { font-weight: 500; letter-spacing: -1.4px; overflow-wrap: anywhere; }
h2 { font-weight: 500; line-height: 1.4; }
.features span { background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--card); border-width: 1px; border-style: solid; border-top-color: var(--line); border-right-color: var(--line); border-bottom-color: var(--line); border-left-color: var(--line); border-image: none; border-radius: 8px; color: var(--muted) !important; }
section { background: none; border-width: 1px; border-style: solid; border-top-color: var(--line); border-right-color: var(--line); border-bottom-color: var(--line); border-left-color: var(--line); border-image: none; box-shadow: none; border-radius: 16px; padding: 26px; }
button, #bot { background: none; color: var(--text); border-width: 1px; border-style: solid; border-top-color: var(--line); border-right-color: var(--line); border-bottom-color: var(--line); border-left-color: var(--line); border-image: none; border-radius: 8px; font-weight: 500; min-height: 46px; }
button:disabled { opacity: 0.5; }
#code { color: var(--text); overflow-wrap: anywhere; }
#status { color: var(--warn); }
.small, footer { font-size: 12px; }
footer { color: var(--muted); flex-wrap: wrap; gap: 10px; }
footer a { color: var(--accent); }
:focus-visible { outline-color: var(--line); outline-style: solid; outline-width: 2px; outline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 420px) {
  main { padding: 35px 20px; }
  section { padding: 21px; }
  h1 { font-size: 38px; }
  .features { gap: 6px; }
  .features span { padding: 9px 11px; font-size: 12px; }
  footer { line-height: 1.6; }
}
/* WEBASE_THEME_START */
/* Calm WeBase: shared color tokens for every screen and both appearances. */
:root{
  --bg:#f6f8f7;--card:#ffffff;--card2:#f1f5f3;--surface:var(--card);
  --text:#253b3b;--muted:#647b72;--accent:#006e68;--accent2:#285cad;--accent3:var(--accent);--accentText:#ffffff;
  --line:#e3eae5;--control:#768297;--focus-soft:#e6f5ee;--backdrop:#11182780;
  --good:#216849;--good-soft:#e6f3eb;--bad:#a42c42;--bad-soft:#fbecef;--warn:#805318;--warn-soft:#fff2db;--info:#285cad;--info-soft:#e8effa;
  --radius:16px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  color-scheme:light;background:var(--bg);color:var(--text)
}
:root[data-theme=dark]{
  --bg:#182622;--card:#20332c;--card2:#263d32;--surface:var(--card);
  --text:#e2ece5;--muted:#9eb4a5;--accent:#63d7c7;--accent2:#a0c4ff;--accent3:var(--accent);--accentText:#072d28;
  --line:#30473b;--control:#8191a6;--focus-soft:#294b3b;--backdrop:#00000099;
  --good:#9bdfba;--good-soft:#1b3329;--bad:#ffabb9;--bad-soft:#3c222d;--warn:#f2cd8b;--warn-soft:#362c1c;--info:#a0c4ff;--info-soft:#1b2c46;
  color-scheme:dark
}

/* WEBASE_THEME_END */

html,body{background:var(--bg);color:var(--text);font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
body{background-image:none}section{background:var(--card);border-color:var(--line);border-radius:20px;box-shadow:none}
.brand,.intro,.features span,footer{color:var(--muted)}.brand span,h1,h2,#code{color:var(--text)}
h1{font-weight:650;letter-spacing:-1px}h2{font-weight:600}.eyebrow{color:var(--accent);letter-spacing:.06em}
.features span{background:var(--card);border:1px solid var(--line);border-radius:10px}
button{min-height:48px;border:1px solid var(--control);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-weight:500;padding:12px 16px}
button#start{background:var(--accent);color:var(--accentText);border-color:var(--accent)}button:disabled{opacity:.5}
a,footer a{color:var(--accent)}#status{color:var(--warn)}#pending{background:var(--card2);border-color:var(--line);border-radius:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}