/* Dark, neutral surfaces with blue actions. */
:root { color-scheme: dark; --bg:#101012; --panel:#19191c; --panel-2:#232326; --border:#333338; --text:#f5f5f7; --muted:#98989f; --primary:#007aff; --primary-2:#409cff; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
button { font:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--primary-2); outline-offset:4px; }
.wrap { max-width:880px; padding:28px 32px; }
header { padding-bottom:24px; border-bottom:1px solid var(--border); }
.brand-link { display:flex; align-items:center; gap:10px; }
header .wordmark { font-size:19px; }
.spaces-label { color:var(--muted); font-weight:400; }
nav { font-size:14px; }
.avatar { background:#38383d; }
.page-intro { padding:84px 0 96px; }
h1 { font-size:40px; line-height:1.15; letter-spacing:-.04em; font-weight:600; }
.page-intro p { margin-top:30px; color:var(--text); font-size:17px; }
.page-intro p span { color:var(--text); overflow-wrap:anywhere; }
.flow-step { padding:28px 0 32px; border-top:1px solid var(--border); scroll-margin-top:24px; }
.step-heading { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.step-number { font:12px ui-monospace,monospace; color:var(--muted); }
h2 { font-size:20px; letter-spacing:-.025em; font-weight:600; }
.flow-step p { color:var(--muted); font-size:14px; line-height:1.7; }
.optional { margin-left:auto; color:var(--muted); font-size:12px; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:9px; padding:11px 17px; background:var(--primary); color:white; font-size:14px; font-weight:600; margin-top:18px; }
.primary-button:hover { background:#1686ff; }
.readiness { display:flex; gap:8px; margin:16px 0; }
.readiness button { padding:8px 28px; background:var(--panel); border:1px solid var(--border); color:var(--text); border-radius:8px; font-size:14px; }
.readiness button[aria-pressed="true"] { background:#007aff20; color:var(--primary-2); border-color:var(--primary); }
#website-no { max-width:580px; }
#copy-build-prompt { margin-top:12px; font-size:14px; }
#build-copy-status,#sdk-copy-status { color:var(--muted); margin-left:12px; font-size:12px; }
.sdk-snippet { margin:16px 0; }
.sdk-snippet pre { background:var(--panel); padding:18px; margin-bottom:10px; }
.sdk-snippet .linkish,.flow-step > a { font-size:14px; }
.sdk-note { margin-bottom:12px; }
footer { border-top:1px solid var(--border); padding-top:20px; font-size:12px; }
footer a { color:var(--muted); }
.space-error { color:#ffb4a8!important; margin:12px 0; }
.claimed-address { margin:12px 0; }
.claimed-address strong { font-size:clamp(19px,4vw,28px); font-weight:500; overflow-wrap:anywhere; }
.connection-badge { margin-left:auto; color:var(--primary-2); background:#007aff18; padding:3px 9px; border-radius:6px; font-size:12px; }
#space-status:empty { display:none; }
#new-address-note { margin-top:12px; }
#refresh-space { margin-top:18px; font-size:12px; color:var(--muted); }
#space-manager button:disabled { opacity:.5; cursor:wait; }
.agent-setup { margin-top:20px; }
summary { cursor:pointer; font-size:14px; }
.agent-setup > summary { font-weight:600; }
.agent-setup-body > p { margin:12px 0; }
.prompt-details { margin-top:12px; }
.prompt-details summary { color:var(--muted); font-size:12px; }
.setup-prompt { white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; margin-top:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); font:12px/1.7 monospace; }
.setup-token-line code { color:var(--primary-2); }
#setup-countdown { margin-left:12px; color:var(--muted); font:12px sans-serif; }
.dns-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin:16px 0; font-size:13px; }
.dns-actions .primary-button { margin:0; }
.manual-setup { margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.setup-steps { padding-left:20px; margin:20px 0; font-size:13px; color:var(--muted); }
.setup-steps li { margin-bottom:8px; }
.your-hostname { overflow-wrap:anywhere; }
.dns-row { display:grid; grid-template-columns:90px 130px minmax(100px,1fr) auto; gap:12px; align-items:end; margin:18px 0; }
.dns-row label,#address-picker { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.dns-row input,.dns-row select,#select-space { min-width:0; width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font:inherit; font-size:13px; }
#address-picker { margin:16px 0; }
.remove-record { font-size:12px; padding:10px 0; }
.add-record { font-size:13px; margin-bottom:12px; }
.flow-step .dns-help { font-size:12px; }
.setup-progress { display:flex; align-items:center; gap:10px; }
.setup-spinner { width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--primary-2); border-radius:50%; animation:setup-spin 1s linear infinite; }
@keyframes setup-spin { to { transform:rotate(360deg); } }
.site-preview { display:grid; grid-template-columns:140px minmax(0,1fr); margin-top:20px; border:1px solid var(--border); border-radius:12px; overflow:hidden; color:var(--text); background:var(--panel); }
.site-preview:hover { border-color:var(--primary-2); }
.site-preview-art { position:relative; display:grid; place-items:center; background:#242428; min-height:140px; }
.preview-placeholder { font-size:36px; color:#686870; }
.site-preview-art img { position:absolute; width:100%; height:100%; object-fit:cover; }
.site-preview-copy { padding:18px; }
.preview-connected { display:none; }
.site-preview h3 { font-size:18px; margin-bottom:4px; overflow-wrap:anywhere; }
.site-preview p { font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#site-preview-host { display:block; font-size:12px; color:var(--muted); overflow-wrap:anywhere; margin-top:8px; }
.preview-open { display:block; color:var(--primary-2); margin-top:8px; font-size:13px; }
.profile-menu { position:relative; }
.profile-toggle { display:flex; padding:0; border:0; border-radius:50%; background:transparent; }
.profile-dropdown { position:absolute; z-index:10; top:calc(100% + 12px); right:0; min-width:150px; padding:6px; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px #0006; }
.profile-dropdown button { width:100%; padding:10px 14px; text-align:left; border-radius:6px; color:var(--text); }
.profile-dropdown button:hover { background:var(--panel-2); }
.signin h1 { font-size:22px; }
.signin .signup-note { font-size:12px; margin:20px 0 0; text-align:center; }
.auth-status { font-size:12px!important; text-align:center; }
.auth-status:empty { display:none; }
.btn-apple img { filter:brightness(0) invert(1); }
.btn:disabled { opacity:.55; cursor:wait; }
#login-dialog { overflow:visible; }
.dialog-close { position:absolute; right:12px; top:8px; border:0; background:transparent; color:var(--muted); font-size:24px; }
.back-home { display:block; text-align:center; margin-top:22px; font-size:13px; color:var(--muted); }
@media(max-width:600px) { .wrap { padding:20px; } .page-intro { padding:56px 0 64px; } h1 { font-size:34px; } h2 { font-size:18px; } .optional { margin-left:0; } .dns-row { grid-template-columns:90px minmax(0,1fr); } .dns-row label:nth-child(3) { grid-column:1/-1; } .remove-record { grid-column:2; justify-self:end; } .site-preview { grid-template-columns:1fr; } .site-preview-art { min-height:120px; } .sdk-snippet pre { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .setup-spinner { animation:none; } }

.spaces-flow { min-height:65vh; padding-bottom:32px; }

.page-intro h1 { font-size:clamp(42px,7.2vw,86px); line-height:1.08; letter-spacing:-.06em; font-weight:600; color:#f5f5f7; }
.page-intro .primary-button { margin-top:32px; padding:15px 22px; gap:32px; font-size:16px; }
.space-shimmer { display:inline-block; padding-right:.08em; margin-right:-.08em; color:#90c5ff; background:repeating-linear-gradient(110deg,#e1eeff 0%,#b9d9ff 12%,#409cff 23%,#90c5ff 32%,#e1eeff 50%); background-size:200% 100%; background-position:100% 0; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:space-shimmer 3.5s linear infinite; }
@keyframes space-shimmer { from { background-position:100% 0; } to { background-position:0% 0; } }
@media(prefers-reduced-motion:reduce) { .space-shimmer { animation:none; background:none; -webkit-text-fill-color:currentColor; } }

.settings-link { color:var(--text); display:flex; align-items:center; padding:6px; border-radius:8px; }
.settings-link:hover { background:var(--panel-2); }
.settings-heading { padding:40px 0 28px; }
.settings-heading h1 { font-size:30px; }
.mode-toggle { display:inline-flex; gap:3px; padding:4px; border:1px solid var(--border); border-radius:10px; background:var(--panel); margin:20px 0 16px; }
.mode-toggle button { background:transparent; border:0; border-radius:6px; padding:7px 16px; color:var(--muted); font-size:13px; }
.mode-toggle button[aria-pressed="true"] { background:#38383d; color:var(--text); }
#dns-manual .manual-setup { border:0; margin-top:0; padding-top:0; }
#dns-agent .agent-setup { margin-top:0; }
.signin-previews { display:flex; flex-wrap:wrap; gap:24px; margin:22px 0 4px; }
.signin-previews > div { display:flex; flex-direction:column; gap:9px; }
.signin-previews > div > span:first-child { font-size:12px; color:var(--muted); }
.hangjam-pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #444; border-radius:999px; padding:10px 18px; font-size:14px; font-weight:600; }
.hangjam-pill img { width:28px; height:28px; }
.pill-light { color:#161618; background:#f5f5f7; border-color:#ddd; }
.pill-dark { color:#f5f5f7; background:#242426; }
#sdk-agent-prompt,.sdk-guide { white-space:pre-wrap; overflow-wrap:anywhere; max-height:400px; overflow:auto; margin-top:12px; }
#sdk-agent-copy-status { font-size:12px; margin-left:12px; color:var(--muted); }

#signin-test-status[data-result="missing"] { color:#ffb4a8; }
#signin-test-status[data-result="detected"] { color:var(--primary-2); }

.chapter > summary { list-style:none; margin-bottom:0; cursor:pointer; }
.chapter > summary::-webkit-details-marker { display:none; }
.chapter > summary::after { content:'+'; margin-left:auto; color:var(--muted); font-size:20px; }
.chapter[open] > summary::after { content:'−'; }
.chapter-body { padding-top:16px; }
.chapter > summary .connection-badge { margin-left:0; }