:root {
  color-scheme: light dark;
  --page: #fff; --surface: #fff; --subtle: #f5f5f7; --selected: #f5f5f7;
  --ink: #202124; --muted: #686970; --line: #e4e4e8; --control-line: #92939b;
  --accent: #245bcc; --positive: #286143; --positive-bg: #eef5ef;
  --warning: #79531d; --warning-bg: #fff6e6; --danger: #a43232; --danger-bg: #fff0ef;
  --button: #202124; --on-button: #fff; --button-hover: #3a3c41; --scrim: #16171b55;
  --radius: 1.25rem; --fast: 160ms; --ease: cubic-bezier(.2,.7,.2,1);
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); }
button,input,select,textarea { font: inherit; }
button,a,input,select,summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button,summary,select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-underline-offset: .22em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
input:focus-visible,select:focus-visible { outline-offset: 2px; }
h1,h2,h3,p { margin: 0; }
h1,h2 { text-wrap: balance; }
h1 { font-size: clamp(2.75rem,5vw,3.5rem); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; }
h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
svg { flex: none; vertical-align: middle; }
code,pre { font-family: "SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size: .8125rem; }
code { overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: .875rem; line-height: 1.6; }
.full { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .8rem 1rem; background: var(--surface); border-radius: .5rem; }
.skip:focus { top: 1rem; }
.site-header { max-width: 72rem; margin: auto; padding: 1.25rem 2rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; min-height: 2.75rem; text-decoration: none; font-size: 1rem; font-weight: 650; letter-spacing: -.025em; white-space: nowrap; }
.brand img { width: 1.625rem; height: 1.625rem; }
.brand span { font-weight: 400; color: var(--muted); }
.audience { display: flex; gap: .125rem; padding: .25rem; border-radius: 99px; background: var(--subtle); }
.audience button { min-height: 2.75rem; padding: .5rem 1.25rem; border: 0; background: transparent; color: var(--muted); border-radius: 99px; font-size: .875rem; font-weight: 500; min-width: 0; transition: color var(--fast),background var(--fast),box-shadow var(--fast); }
.audience button[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 4px #10111412; }
.header-actions { display: flex; justify-content: end; align-items: center; gap: .5rem; min-width: 0; }
.text-btn,.link-btn { display: inline-flex; gap: .4rem; align-items: center; justify-content: center; border: 0; background: none; padding: .625rem .75rem; min-height: 2.75rem; text-decoration: none; font-size: .875rem; font-weight: 500; border-radius: .625rem; transition: background var(--fast); }
.text-btn:hover,.link-btn:hover,.text-btn:active,.link-btn:active { background: var(--subtle); }
.link-btn { color: var(--accent); }
.account-menu { position: relative; }
.account-menu>summary { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; width: 2.75rem; height: 2.75rem; font-size: .875rem; font-weight: 600; list-style: none; }
.account-menu>summary::-webkit-details-marker { display: none; }
.account-menu[open]>summary { background: var(--subtle); }
.account-popover { position: absolute; right: 0; top: 3.25rem; width: min(18rem,calc(100vw - 2rem)); z-index: 10; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: 0 .75rem 3rem #10111414; padding: .75rem; }
.account-popover p { padding: .5rem .75rem; font-size: .875rem; overflow-wrap: anywhere; color: var(--muted); }
.account-popover button { width: 100%; justify-content: start; text-align: left; }
.mode-note { text-align: center; font-size: .8125rem; color: var(--muted); padding: .5rem 1.5rem 0; }
.mode-note .dot { display: inline-block; margin-right: .4rem; background: var(--warning); }
.dot { width: .35rem; height: .35rem; border-radius: 50%; background: currentColor; flex: none; }
.main { width: min(100% - 3rem,39rem); margin: auto; padding: 2.5rem 0 3rem; min-height: calc(100dvh - 10rem); }
.main:focus { outline: none; }
.main.wide { width: min(100% - 3rem,46rem); }
.hero { text-align: center; margin: 0 auto 2.25rem; }
.hero h1 span { color: var(--muted); }
.hero p { margin: 1.125rem auto 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 31rem; text-wrap: pretty; }
.composer { padding: 0; }
.field-caption { font-weight: 550; font-size: .875rem; margin-bottom: .875rem; }
.purpose-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.purpose-set legend { padding: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,5.5rem),1fr)); gap: .625rem; }
.choice { position: relative; padding: 1.125rem .5rem; min-height: 6rem; display: flex; gap: .75rem; align-items: center; justify-content: center; flex-direction: column; border: 1px solid var(--control-line); border-radius: .875rem; color: var(--muted); cursor: pointer; transition: background var(--fast),border-color var(--fast),color var(--fast); }
.choice input,.payment-option input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.choice:has(input:focus-visible),.payment-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--selected); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
.choice-check { position: absolute; right: .5rem; top: .5rem; opacity: 0; }
.choice:has(input:checked) .choice-check { opacity: 1; }
.choice-title { font-size: .875rem; font-weight: 500; text-align: center; line-height: 1.4; }
.purpose-description { color: var(--muted); font-size: .875rem; line-height: 1.55; margin: 1rem 0 1.5rem; min-height: 2.75rem; text-wrap: pretty; }
.purchase { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.payment-set { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.payment-set legend { float: left; padding: 0; margin: 0; color: var(--muted); font-weight: 400; }
.payment-options { max-width: 100%; display: flex; align-items: center; gap: .25rem; padding: .1875rem; border-radius: .625rem; background: var(--subtle); }
.payment-option { display: flex; align-items: center; justify-content: center; position: relative; min-height: 2.75rem; min-width: 0; flex: 1; padding: .4rem .875rem; font-size: .875rem; color: var(--muted); border-radius: .4375rem; cursor: pointer; border: 1px solid transparent; transition: background var(--fast),color var(--fast); }
.payment-option:has(input:checked) { background: var(--surface); color: var(--ink); border-color: var(--control-line); }
.purchase-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr)); align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: 2.25rem; letter-spacing: -.04em; font-weight: 550; line-height: 1.2; font-variant-numeric: tabular-nums; }
.price span { font-size: .875rem; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.price-caption { color: var(--muted); font-size: .8125rem; text-align: right; line-height: 1.6; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: .625rem; min-height: 3.125rem; padding: .875rem 1.25rem; border: 1px solid var(--button); border-radius: .75rem; background: var(--button); color: var(--on-button); font-size: .9375rem; font-weight: 550; text-decoration: none; transition: background var(--fast),transform 100ms,border-color var(--fast); }
.btn:hover { background: var(--button-hover); border-color: var(--button-hover); }
.btn:active { transform: scale(.99); }
.btn.secondary { color: var(--ink); background: var(--surface); border-color: var(--control-line); }
.btn.secondary:hover { background: var(--subtle); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn.danger:hover { background: var(--danger-bg); }
.consent-block { margin-bottom: 1.25rem; }
.consent { display: flex; align-items: center; gap: .625rem; font-size: .875rem; color: var(--ink); line-height: 1.5; min-height: 2.75rem; cursor: pointer; }
.consent input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ink); flex: none; }
.consent:has(input:focus-visible) { border-radius: .25rem; outline: 3px solid var(--accent); outline-offset: 2px; }
.consent input:focus-visible { outline: none; }
.rental-note { padding-left: 1.75rem; color: var(--muted); font-size: .8125rem; line-height: 1.6; max-width: 38rem; }
.inline-error { color: var(--danger); margin: .5rem 0 0 1.75rem; font-size: .8125rem; }
.next-step { text-align: center; font-size: .8125rem; color: var(--muted); margin: .75rem 0 0; }
.details { border-top: 1px solid var(--line); margin-top: 1.5rem; font-size: .875rem; color: var(--muted); }
.details summary { min-height: 3.5rem; display: flex; align-items: center; gap: .75rem; justify-content: space-between; list-style: none; font-size: .875rem; color: var(--ink); }
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; flex: none; color: var(--muted); }
.details[open] summary::after { content: '−'; }
.details p { padding: .25rem 0 .875rem; line-height: 1.7; }
.spec-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.5rem; margin: .5rem 0 1.25rem; }
.spec-grid dt { overflow-wrap: anywhere; font-size: .8125rem; color: var(--muted); }
.spec-grid dd { overflow-wrap: anywhere; margin: .25rem 0 0; color: var(--ink); font-size: .875rem; }
.footnote { text-align: center; color: var(--muted); font-size: .8125rem; margin-top: 1.25rem; }
.site-footer { width: min(100% - 3rem,68rem); margin: 0 auto; padding: 1rem 0 max(1.5rem,env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; color: var(--muted); font-size: .8125rem; }
.footer-links { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.site-footer .text-btn { font-size: .8125rem; font-weight: 400; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.page-head h1 { font-size: clamp(2rem,4vw,2.75rem); }
.page-head p { color: var(--muted); font-size: .9375rem; margin-top: .75rem; }
.page-head .text-btn { flex: none; }
.server-list { display: grid; gap: 1rem; }
.server-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.server-card h2,.order-row h2 { font-size: 1.1rem; line-height: 1.4; letter-spacing: -.015em; }
.server-top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.server-sub { color: var(--muted); font-size: .8125rem; margin-top: .375rem; }
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 500; color: var(--positive); background: var(--positive-bg); border-radius: 99px; padding: .375rem .625rem; flex: none; }
.status.wait { background: var(--subtle); color: var(--muted); }
.status.warn { background: var(--warning-bg); color: var(--warning); }
.server-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.server-address { color: var(--muted); font-size: .8125rem; min-width: 0; }
.server-address code { display: block; margin-top: .25rem; color: var(--ink); font-size: .9375rem; }
.server-card .details { margin-top: 1.5rem; }
.server-card .details:last-child { margin-bottom: -.5rem; }
.server-actions { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: .25rem 0; }
.danger-text { color: var(--danger); }
.progress { margin: 1.5rem 0 1rem; display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; list-style: none; padding: 0; }
.progress li { border-top: 2px solid var(--line); padding-top: .75rem; color: var(--muted); font-size: .75rem; }
.progress .done { border-color: var(--positive); }
.progress .current { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.status-copy { color: var(--muted); font-size: .875rem; margin-top: 1rem; line-height: 1.7; }
.notice { border-radius: .75rem; padding: 1rem; margin: 1rem 0; background: var(--subtle); color: var(--muted); font-size: .875rem; line-height: 1.6; }
.notice.warn { background: var(--warning-bg); color: var(--warning); }
.notice.error { background: var(--danger-bg); color: var(--danger); }
.notice a { font-weight: 550; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.order-row p { font-size: .875rem; color: var(--muted); margin-top: .25rem; }
.order-row .btn { min-height: 2.75rem; padding: .625rem 1rem; font-size: .875rem; flex: none; }
.empty { padding: 3rem 1.5rem; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); text-align: center; }
.empty>svg { color: var(--muted); margin-bottom: 1.5rem; }
.empty p { margin: .75rem auto 1.5rem; color: var(--muted); max-width: 24rem; font-size: .9375rem; }
.archive { margin-top: 2rem; }
.archive .server-list { padding: .5rem 0 1rem; }
.archive .server-card { background: transparent; }
.agent-hero { margin-bottom: 1.5rem; }
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin-top: 1.5rem; }
.docs-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.25rem; margin: 1rem 0 1.75rem; }
.docs-links a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .875rem; text-decoration: none; }
.docs-links a:hover { color: var(--accent); }
.code-panel { border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: var(--subtle); }
.code-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
.code-header span { color: var(--muted); font-size: .8125rem; }
.code-header button { font-size: .8125rem; }
.code-block { margin: 0; padding: 1.25rem; line-height: 1.9; color: var(--ink); overflow-x: auto; tab-size: 2; }
.api-explain { display: flex; gap: 1.5rem; margin: 1.25rem 0; font-size: .875rem; color: var(--muted); }
.api-explain p { flex: 1; min-width: 0; }
.api-flow { margin: .25rem 0 1rem; padding-left: 1.25rem; }
.api-flow li { padding: .5rem 0; line-height: 1.7; }
.key-row { padding: 1rem 0; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; align-items: center; }
.key-row:first-child { border-top: 0; }
.key-row h3 { font-size: .9375rem; }
.key-row p { padding: .25rem 0 0; font-size: .8125rem; overflow-wrap: anywhere; }
.key-row button { flex: none; }
.article { max-width: 39rem; margin: auto; }
.article h1 { font-size: clamp(2.25rem,4vw,3rem); margin-bottom: 1rem; }
.article>p { color: var(--muted); margin-bottom: 2rem; }
.article .details { margin-top: 0; }
.article .details summary { font-size: 1rem; min-height: 4rem; font-weight: 500; }
.article .details p { font-size: .9375rem; }
.checkout { width: min(100% - 2rem,30rem); margin: 4rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.checkout .brand { margin-bottom: 2rem; }
.checkout h1 { font-size: 2rem; letter-spacing: -.035em; margin-top: 1rem; }
.checkout p { color: var(--muted); font-size: .9375rem; margin-top: 1rem; }
.checkout .price { margin: 1.5rem 0; font-size: 2.75rem; }
.checkout-actions { display: grid; gap: .75rem; margin-top: 1.25rem; }
.checkout .text-btn { width: 100%; }
dialog { padding: 2rem; width: min(31rem,calc(100% - 2rem)); max-height: min(90dvh,48rem); border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); color: var(--ink); box-shadow: 0 1.5rem 5rem #10111420; }
dialog[open] { animation: dialog-in 160ms var(--ease); }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
dialog h2 { padding-right: 1.5rem; font-size: 1.5rem; }
dialog p { font-size: .9375rem; color: var(--muted); margin: .875rem 0 1.5rem; line-height: 1.65; }
.close { display: grid; place-items: center; position: absolute; top: .75rem; right: .75rem; border: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: transparent; }
.close:hover { background: var(--subtle); }
.field { display: block; font-size: .875rem; font-weight: 500; margin: 1.125rem 0; }
.field input,.field select { display: block; width: 100%; min-height: 3rem; border: 1px solid var(--control-line); padding: .75rem; border-radius: .625rem; background: var(--surface); color: var(--ink); margin-top: .5rem; font-size: 1rem; }
.field select { padding-right: 2rem; }
.field input::placeholder { color: var(--muted); }
.field-help { font-size: .8125rem; color: var(--muted); margin-top: -.5rem; }
dialog p.field-help { font-size: .8125rem; margin: .75rem 0; }
.dialog-error { color: var(--danger); font-size: .875rem; line-height: 1.6; margin: .75rem 0; }
.dialog-error:empty { margin: 1.25rem 0 0; }
.dialog-error:not(:empty) { padding: .5rem 0; }
.auth-switch { margin-top: 1rem; text-align: center; font-size: .875rem; color: var(--muted); }
.auth-switch button { color: var(--ink); font-size: .875rem; }
.secret { display: block; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--subtle); color: var(--ink); border: 1px solid var(--line); padding: 1rem; border-radius: .625rem; font-size: .8125rem; line-height: 1.7; }
.access-steps { padding-left: 1.25rem; color: var(--muted); font-size: .875rem; }
.access-steps li { padding: .5rem 0; }
.access-steps code { color: var(--ink); }
.token-input { width: 100%; font-family: "SFMono-Regular",Consolas,monospace!important; font-size: .8125rem!important; }
#toast { position: fixed; z-index: 50; bottom: max(1.5rem,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); padding: .875rem 1.25rem; border-radius: .875rem; background: var(--button); color: var(--on-button); font-size: .875rem; box-shadow: 0 .5rem 1.5rem #10111416; }
#toast:empty { display: none; }
.loading { min-height: 75dvh; display: grid; place-content: center; gap: 1rem; text-align: center; color: var(--muted); font-size: .9375rem; }
.loading img { margin: auto; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(.25rem) scale(.99); } to { opacity: 1; transform: none; } }
@media(hover:hover) { .choice:hover { border-color: var(--ink); background: var(--subtle); } .payment-option:hover { color: var(--ink); } }
@media(max-width:720px) {
  .site-header { padding: 1rem 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
  .site-header .brand { margin-right: auto; }
  .audience { order: 3; width: fit-content; max-width: 100%; margin: .5rem auto 0; }
  .header-actions { margin-left: auto; }
  .main { padding-top: 2rem; }
  .hero { margin-bottom: 2rem; }
  .site-footer { align-items: start; flex-direction: column; }
  .api-explain { display: block; }
  .api-explain p+p { margin-top: .75rem; }
}
@media(max-width:480px) {
  .site-header { padding: .75rem 1.25rem; }
  .main,.main.wide { width: calc(100% - 2.5rem); padding-top: 1.75rem; }
  .hero h1 { font-size: clamp(2.5rem,10.5vw,3rem); }
  .hero p { font-size: .9375rem; max-width: 19rem; }
  .choices { gap: .5rem; }
  .choice { padding: 1rem .375rem; min-height: 6.25rem; }
  .choice-title { font-size: .8125rem; }
  .purpose-description { min-height: 4.125rem; margin-bottom: 1rem; }
  .purchase-row { align-items: start; }
  .price { font-size: 2rem; }
  .price span { flex-basis: 100%; }
  .price-caption { font-size: .8125rem; }
  .page-head { align-items: start; gap: .75rem; }
  .page-head .text-btn { max-width: 6.5rem; line-height: 1.4; }
  .server-card { padding: 1.125rem; border-radius: 1rem; }
  .server-top,.server-bottom { flex-wrap: wrap; gap: .75rem; }
  .server-bottom .btn { padding: .75rem 1rem; font-size: .875rem; }
  .order-row { flex-wrap: wrap; gap: .75rem; }
  .progress { gap: .375rem; }
  .progress li { font-size: .6875rem; }
  .code-block { padding: 1rem; font-size: .75rem; }
  .docs-links { gap: .75rem; }
  .site-footer { width: calc(100% - 2.5rem); }
  dialog { padding: 1.5rem; border-radius: 1.25rem; }
  .checkout { padding: 1.5rem; margin-top: 2rem; }
  .key-row { align-items: start; }
}
@media(prefers-color-scheme:dark) {
  :root { --page: #141416; --surface: #1e1e21; --subtle: #27272b; --selected: #27272b; --ink: #f1f1f3; --muted: #a3a3ad; --line: #38383e; --control-line: #797984; --accent: #8aaaff; --positive: #a1d5b4; --positive-bg: #23362a; --warning: #e8c287; --warning-bg: #382d1f; --danger: #ffaaa5; --danger-bg: #3d2525; --button: #ededf0; --on-button: #202124; --button-hover: #fff; --scrim: #0009; }
  .brand img { filter: invert(1); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } .btn:active { transform: none; } }
@media(prefers-reduced-transparency:reduce) { dialog::backdrop { backdrop-filter: none; background: #17181bb3; } }
@media(prefers-contrast:more) { :root { --muted: #45464d; --line: #898992; --control-line: #62636d; } .status { border: 1px solid currentColor; } }
@media(prefers-contrast:more) and (prefers-color-scheme:dark) { :root { --muted: #c5c5cd; --line: #898992; --control-line: #a5a5ae; } }