/* Hoshi ID — account centre and sign-in surfaces. * * The palette is written once, per token, with light-dark(): the first value is * the daylight one, the second the one this service has always had. Which of * the two a page uses is decided by color-scheme, and nothing else — so * following the system costs one declaration and overriding it costs one more. * No JavaScript is involved, which matters here: the Content-Security-Policy * on these pages allows no inline script, and a theme that flickers on every * load would be worse than one that cannot be chosen at all. */ :root { /* Auto: the system decides. The two rules below are the visitor overriding it, and are the whole of the appearance switch. */ color-scheme: light dark; --ink: light-dark(#101827, #eef5ff); --muted: light-dark(#55627a, #91a1bb); --faint: light-dark(#7d8798, #66758b); --bg-1: light-dark(#f5f8fd, #070b14); --bg-2: light-dark(#eef2fa, #050810); --bg-3: light-dark(#f7f5f1, #080b13); --glow: light-dark(rgba(120, 180, 210, .22), rgba(71, 126, 163, .19)); --panel: light-dark(rgba(255, 255, 255, .86), rgba(12, 18, 31, .88)); --card: light-dark(rgba(255, 255, 255, .94), rgba(10, 16, 28, .92)); --surface: light-dark(rgba(20, 45, 80, .035), rgba(255, 255, 255, .02)); --surface-2: light-dark(rgba(43, 127, 150, .07), rgba(136, 216, 232, .06)); --field: light-dark(rgba(255, 255, 255, .9), rgba(255, 255, 255, .035)); --line: light-dark(rgba(30, 58, 95, .14), rgba(161, 190, 224, .15)); --line-soft: light-dark(rgba(30, 58, 95, .08), rgba(157, 190, 220, .07)); --shadow: light-dark(rgba(31, 55, 90, .14), rgba(0, 0, 0, .34)); --accent: light-dark(#2b7f96, #88d8e8); --accent-strong: light-dark(#17627a, #baf4ff); --accent-soft: light-dark(rgba(43, 127, 150, .12), rgba(136, 216, 232, .09)); --accent-line: light-dark(rgba(43, 127, 150, .32), rgba(136, 216, 232, .35)); --gold: light-dark(#8f6c22, #e2c481); --gold-line: light-dark(rgba(143, 108, 34, .3), rgba(226, 196, 129, .35)); --primary-a: light-dark(#17627a, #a9e8f2); --primary-b: light-dark(#2b8298, #d1eff1); --primary-ink: light-dark(#ffffff, #071018); --danger: light-dark(#c23a4a, #ff8a92); --danger-ink: light-dark(#9d2b3a, #ffc2c6); --danger-line: light-dark(rgba(194, 58, 74, .3), rgba(255, 138, 146, .27)); --danger-bg: light-dark(rgba(194, 58, 74, .07), rgba(255, 138, 146, .07)); --success: light-dark(#1c7a55, #8ce0b3); --success-ink: light-dark(#136647, #b7f0cf); --success-line: light-dark(rgba(28, 122, 85, .28), rgba(140, 224, 179, .25)); --success-bg: light-dark(rgba(28, 122, 85, .07), rgba(140, 224, 179, .07)); --dev-ink: light-dark(#7a5c17, #d4c08f); --dev-line: light-dark(rgba(143, 108, 34, .28), rgba(226, 196, 129, .25)); --dev-bg: light-dark(rgba(143, 108, 34, .07), rgba(226, 196, 129, .06)); --star-a: light-dark(rgba(52, 86, 140, .3), rgba(255, 255, 255, .58)); --star-b: light-dark(rgba(43, 127, 150, .26), rgba(130, 216, 232, .35)); --blob-a: light-dark(rgba(80, 150, 190, .16), rgba(50, 131, 171, .11)); --blob-b: light-dark(rgba(200, 165, 110, .14), rgba(159, 127, 83, .08)); --radius: 20px; --serif: "Noto Serif TC", "Yu Mincho", "Times New Roman", serif; --sans: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; } @media print { .site-header, .site-preferences, .site-footer, .sky, .recovery-code-actions { display: none !important; } .auth-page, .result-shell, .result-card { background: #fff !important; color: #111 !important; box-shadow: none !important; } .result-shell { padding: 0 !important; } .recovery-code-list code { color: #000 !important; font-size: 14pt; } } /* The two overrides. data-theme is only on the element when a visitor has chosen; its absence is "follow the system". */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } /* The page background lives on rather than on so that it paints the whole canvas — a body background only covers the body's own box, and anything scrolled past it would show through. * * The first two declarations are the floor for browsers too old to resolve * light-dark(): every var() below is invalid to them and drops out, leaving the * dark page this service has always had — flatter, still legible. */ html { scroll-behavior: smooth; background-color: #050810; color: #eef5ff; background-image: radial-gradient(circle at 50% -10%, var(--glow), transparent 42%), linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%); } body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--sans); line-height: 1.6; } a { color: inherit; } button, input, select { font: inherit; } button { color: inherit; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sky { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; } .sky::before, .sky::after, .sky i { content: ""; position: absolute; inset: -20%; background-image: radial-gradient(circle, var(--star-a) 0 1px, transparent 1.5px), radial-gradient(circle, var(--star-b) 0 1px, transparent 1.5px); background-size: 137px 137px, 211px 211px; background-position: 13px 29px, 77px 101px; opacity: .24; } .sky::after { transform: rotate(25deg) scale(1.1); opacity: .12; } .sky i:nth-child(1) { inset: auto auto 11% 8%; width: 280px; height: 280px; border-radius: 50%; filter: blur(80px); background: var(--blob-a); } .sky i:nth-child(2) { inset: 6% 4% auto auto; width: 360px; height: 360px; border-radius: 50%; filter: blur(100px); background: var(--blob-b); } .sky-subtle { opacity: .6; } .site-header { width: min(1240px, calc(100% - 48px)); height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .site-header.compact { width: min(1120px, calc(100% - 48px)); height: 78px; } .site-header nav { display: flex; align-items: center; gap: 26px; } .brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; font-size: 20px; font-weight: 650; letter-spacing: .02em; } .brand-mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--accent-line); border-radius: 50%; box-shadow: inset 0 0 18px var(--accent-soft), 0 0 20px var(--accent-soft); } .brand-mark::after { content: ""; position: absolute; inset: 5px -5px; border: 1px solid var(--gold-line); border-radius: 50%; transform: rotate(-30deg); } .brand-mark b { color: var(--accent-strong); font-size: 15px; } .brand-mark.large { width: 64px; height: 64px; font-size: 24px; } .nav-link { color: var(--muted); text-decoration: none; font-size: 14px; background: none; border: 0; cursor: pointer; } .nav-link:hover { color: var(--ink); } .nav-button { padding: 8px; } .secure-label { color: var(--success); font-size: 13px; letter-spacing: .08em; } .inline-form { display: inline; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 0 24px; border: 1px solid var(--accent-line); border-radius: 999px; color: var(--ink); background: var(--accent-soft); font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; transition: .2s ease; } .button:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--surface-2); } .button-primary { color: var(--primary-ink); border-color: transparent; background: linear-gradient(105deg, var(--primary-a), var(--primary-b)); box-shadow: 0 12px 34px var(--shadow); } .button-primary:hover { filter: brightness(1.08); background: linear-gradient(105deg, var(--primary-a), var(--primary-b)); } .button-ghost { background: transparent; border-color: var(--line); } .button-danger { color: var(--danger-ink); border-color: var(--danger-line); background: var(--danger-bg); } .button-small { min-height: 38px; padding: 0 18px; font-size: 13px; } .button-wide { width: 100%; margin-top: 8px; } .button:disabled { opacity: .55; cursor: wait; transform: none; } .hero { min-height: 690px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 86px 24px 70px; } .eyebrow { margin: 0 0 18px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .27em; text-transform: uppercase; } .hero h1 { margin: 0; max-width: 960px; font: 500 clamp(50px, 7vw, 94px)/1.02 var(--serif); letter-spacing: -.04em; } /* The one gradient in the design, and the reason --ink is in the middle of it: it has to read against both backgrounds. */ .hero h1 span, .auth-intro h1 span { color: transparent; background: linear-gradient(90deg, var(--accent-strong), var(--ink) 55%, var(--gold)); background-clip: text; -webkit-background-clip: text; } .hero-copy { max-width: 620px; margin: 30px auto 0; color: var(--ink); font: 500 clamp(20px, 2.4vw, 26px)/1.5 var(--serif); } .hero-sub { max-width: 560px; margin: 12px auto 0; color: var(--muted); font-size: 16px; } .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-orbit { position: relative; width: 86px; height: 86px; margin-bottom: 32px; display: grid; place-items: center; } .hero-star { color: var(--accent-strong); font-size: 34px; } .orbit { position: absolute; inset: 7px -8px; border: 1px solid var(--accent-line); border-radius: 50%; transform: rotate(-25deg); } .orbit-b { inset: -3px 13px; border-color: var(--gold-line); transform: rotate(50deg); } .trust-row { width: min(720px, 90vw); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .trust-row b { color: var(--gold); margin-right: 8px; font-weight: 500; } .worlds { width: min(1040px, calc(100% - 48px)); margin: 0 auto 140px; } .section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; border-bottom: 1px solid var(--line); padding-bottom: 24px; } .section-heading h2 { margin: 0; font: 500 clamp(28px,4vw,42px)/1.2 var(--serif); } .world-card { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 26px; align-items: center; padding: 32px; margin-top: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; } .world-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(var(--accent), transparent); } .world-card h3 { margin: 6px 0 3px; font: 500 25px var(--serif); } .world-card p { color: var(--muted); margin: 5px 0; max-width: 680px; } .world-glyph, .service-icon { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--accent-line); border-radius: 16px; background: var(--accent-soft); color: var(--accent-strong); font: 500 24px var(--serif); } .service-icon.large { width: 64px; height: 64px; font-size: 25px; } .auth-shell { width: min(1080px, calc(100% - 48px)); min-height: calc(100vh - 150px); margin: auto; display: grid; grid-template-columns: 1fr 460px; gap: 90px; align-items: center; padding: 56px 0 88px; } .auth-intro h1 { margin: 0 0 24px; font: 500 clamp(44px,5vw,68px)/1.08 var(--serif); letter-spacing: -.035em; } .auth-intro > p:not(.eyebrow) { max-width: 480px; color: var(--muted); font-size: 16px; } .mini-promise { display: flex; gap: 16px; max-width: 450px; margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; } .mini-promise b { color: var(--gold); } .auth-card, .authorize-card, .result-card { position: relative; padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: 0 30px 90px var(--shadow); backdrop-filter: blur(18px); } .card-topline { position: absolute; inset: -1px 28% auto; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .card-kicker { margin: 0 0 8px; color: var(--gold); font: 600 10px var(--sans); letter-spacing: .3em; } .auth-card h2 { margin: 0 0 28px; font: 500 31px var(--serif); } .stack-form { display: grid; gap: 18px; } label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; } input, select { width: 100%; min-height: 48px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--field); outline: none; } input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } select { appearance: auto; } .form-foot { display: flex; justify-content: center; gap: 10px; margin-top: 24px; color: var(--muted); font-size: 12px; } .form-foot a { text-decoration: none; } .form-foot a:hover { color: var(--accent); } .fine-print { margin: 23px 0 0; color: var(--faint); font-size: 11px; text-align: center; } .fine-print a { color: var(--accent); } .or-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 26px 0 18px; color: var(--faint); font-size: 11px; letter-spacing: .16em; } .or-divider::before, .or-divider::after { content: ""; height: 1px; background: var(--line); } .provider-list { display: grid; gap: 10px; } .button-provider { gap: 11px; margin-top: 0; font-weight: 550; background: var(--surface); border-color: var(--line); } .button-provider:hover { background: var(--surface-2); } .button-provider .provider-mark { flex: 0 0 auto; } .provider-mark-generic { color: var(--gold); font-size: 15px; line-height: 1; } .service-icon .provider-mark { width: 22px; height: 22px; } .message { padding: 13px 15px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 11px; font-size: 13px; overflow-wrap: anywhere; } .message.error { color: var(--danger-ink); border-color: var(--danger-line); background: var(--danger-bg); } .message.success { color: var(--success-ink); border-color: var(--success-line); background: var(--success-bg); } .message.dev { color: var(--dev-ink); border-color: var(--dev-line); background: var(--dev-bg); } .account-shell { width: min(1120px, calc(100% - 48px)); margin: 60px auto 110px; display: grid; grid-template-columns: 245px 1fr; gap: 60px; align-items: start; } .profile-rail { position: sticky; top: 30px; } .avatar-orbit { position: relative; width: 86px; height: 86px; display: grid; place-items: center; margin-bottom: 27px; border: 1px solid var(--accent-line); border-radius: 50%; background: var(--accent-soft); } .avatar-orbit::after { content: ""; position: absolute; inset: 4px -10px; border: 1px solid var(--gold-line); border-radius: 50%; transform: rotate(-28deg); } .avatar-orbit span { font: 500 31px var(--serif); color: var(--accent-strong); } .profile-rail h1 { margin: 0 0 5px; font: 500 30px var(--serif); overflow-wrap: anywhere; } .profile-rail .email { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; } .verify-state { display: flex; align-items: center; gap: 8px; margin: 18px 0; color: var(--gold); font-size: 12px; } .verify-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .verify-state.verified { color: var(--success); } .verify-state.verified i { background: var(--success); } .profile-rail code { display: block; color: var(--faint); font-size: 10px; overflow-wrap: anywhere; } .side-nav { display: grid; gap: 2px; margin-top: 34px; padding-top: 19px; border-top: 1px solid var(--line); } .side-nav a { padding: 9px 0; color: var(--muted); text-decoration: none; font-size: 13px; } .side-nav a:hover { color: var(--accent-strong); } .account-content { display: grid; gap: 20px; min-width: 0; } .panel { scroll-margin-top: 20px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .panel-heading .eyebrow { margin-bottom: 6px; } .panel-heading h2 { margin: 0; font: 500 24px var(--serif); } .panel-heading > span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } /* A panel holds several separate things — keys, second factor, live sessions — and each is a labelled subsection. Without the rule between them they run together into one list, and whatever follows a heading is read as belonging to it: browser sessions under "Authenticator app", in the case that started this. */ .panel-section + .panel-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-soft); } /* Not `.section-heading`: the landing page's Worlds band already owns that name, borders and all, and reusing it drew a rule under every subsection heading here. */ .subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; margin-bottom: 8px; } .subsection-heading h3 { margin: 0; font: 550 15px/1.4 var(--sans); letter-spacing: .01em; } /* Left, like everything around it. `.fine-print` centres — that is right for the sign-in pages' footer and wrong everywhere in here. */ .section-note { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.65; max-width: 62ch; } .empty-note { padding: 6px 0 2px; color: var(--faint); } /* The rule sits beside the button rather than under it: it qualifies that button, and a line of small text on its own reads as a footnote to the whole subsection. */ .signout-all-form { display: flex; align-items: center; gap: 10px; } .signout-all-form > span { color: var(--faint); font-size: 11px; text-align: right; } .grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; } .verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 25px; border: 1px solid var(--dev-line); border-radius: var(--radius); background: var(--dev-bg); } .verify-banner b { color: var(--gold); } .verify-banner p { margin: 3px 0 0; color: var(--muted); font-size: 12px; } /* The banner now carries two controls — enter a handoff code, or ask for a new message — so it wraps rather than squeezing them onto one line. */ .verify-banner { flex-wrap: wrap; } .verify-banner > div { flex: 1 1 240px; } .handoff-form { display: flex; align-items: flex-end; gap: 10px; } .handoff-form label { display: grid; gap: 5px; } .handoff-form span { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .handoff-form input { width: 9ch; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .18em; text-align: center; } /* The code itself, on the page the link opens. It is read off one screen and typed into another, so it is set large, monospaced and widely tracked — telling 0 from O is the reader's problem otherwise. */ .handoff-code { margin: 22px 0 16px; font: 600 40px/1.1 var(--mono, ui-monospace, monospace); letter-spacing: .3em; text-indent: .3em; color: var(--gold); user-select: all; } .handoff-steps { margin: 0 0 16px; padding-left: 1.2em; text-align: left; color: var(--muted); font-size: 13px; } .handoff-steps li + li { margin-top: 6px; } .connection-list, .session-list { display: grid; gap: 10px; } .connection-row, .session-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 17px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); } /* Without this the middle column is sized by its longest unbreakable line — a user agent string, say — and pushes the whole page sideways instead of letting the ellipsis below do its job. */ .connection-row > div, .session-row > div { min-width: 0; } .connection-row h3, .session-row h4 { margin: 0; font-size: 14px; } .connection-row p, .session-row p { margin: 1px 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connection-row small, .session-row small { color: var(--faint); font-size: 10px; } /* A session row now carries two of these — how it was opened and where it was last seen. small is inline, so without this they read as one run-on line rather than as the two separate facts they are. */ .session-row small { display: block; } .service-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; } .device-icon { width: 36px; color: var(--accent); font-size: 25px; text-align: center; } /* Access requests. Laid out like a session row — icon, who is asking, the two controls — because it is the same question in a different tense: that list asks "is one of these not mine", this one asks it before the fact. */ .access-list { display: grid; gap: 10px; } .access-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; } .access-row > div:nth-child(2) { flex: 1; min-width: 0; } .access-row h4 { margin: 0; font-size: 14px; } .access-row p { margin: 1px 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .access-row small { color: var(--faint); font-size: 10px; } .access-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* The match code is the one thing on the row meant to be read character by character against another screen, so it gets the mono face the handoff code uses rather than the muted body treatment of the lines around it. */ .access-row .access-code { color: var(--text); } .access-row .access-code b { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .18em; color: var(--gold); } .passkey-list { display: grid; gap: 10px; } .passkey-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 17px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); } .passkey-row > * { min-width: 0; } .passkey-details { display: grid; gap: 10px; } .passkey-rename-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .passkey-rename-form label { gap: 5px; } .passkey-rename-form label span { color: var(--faint); font-size: 11px; } .passkey-name-input { min-height: 40px; } .passkey-meta { margin: 0; color: var(--faint); font-size: 11px; line-height: 1.6; } .passkey-dialog { width: min(540px, calc(100% - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; border: 1px solid var(--accent-line); border-radius: 22px; color: var(--ink); background: var(--card); box-shadow: 0 30px 100px var(--shadow); backdrop-filter: blur(20px); } .passkey-dialog::backdrop { background: rgba(3, 7, 14, .68); backdrop-filter: blur(4px); } .passkey-dialog-form { display: grid; gap: 20px; padding: 30px; } .passkey-dialog-heading { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .passkey-dialog-heading h3 { margin: 0; font: 500 25px/1.25 var(--serif); } .passkey-dialog-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; } .passkey-dialog-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--accent-line); border-radius: 13px; color: var(--accent-strong); background: var(--accent-soft); font-size: 23px; } .passkey-negotiation-note { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 14px 15px; border: 1px solid var(--gold-line); border-radius: 12px; background: var(--surface); } .passkey-negotiation-note > span { color: var(--gold); } .passkey-negotiation-note p { margin: 0; color: var(--muted); font-size: 12px; } .passkey-dialog .message { margin: 0; } .passkey-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; } .empty-state { padding: 35px 20px; text-align: center; color: var(--muted); } .empty-state > b { color: var(--accent); font-size: 24px; } .empty-state h3 { margin: 8px 0 3px; color: var(--ink); font-size: 16px; } .empty-state p { margin: 0 auto; max-width: 510px; font-size: 12px; } details { margin-bottom: 16px; border-bottom: 1px solid var(--line); } /* The last thing in a subsection needs no rule of its own: the next subsection already draws one, and two hairlines a few pixels apart read as an empty band rather than as a separator. */ .panel-section > details:last-child { margin-bottom: 0; border-bottom: 0; } summary { display: flex; justify-content: space-between; padding: 15px 4px 18px; cursor: pointer; font-size: 14px; } .panel summary { align-items: baseline; justify-content: flex-start; gap: 12px; } summary span { color: var(--faint); font-size: 11px; } /* A disclosure that flexes loses its marker in every browser that had one, so these had no affordance at all: a line of text that happens to open something. The chevron is drawn here and turns when it does. Scoped to panels — the cookie disclosure is a pill with its own shape. */ .panel summary::before { content: "\203A"; display: inline-block; color: var(--accent); font-size: 15px; line-height: 1; transition: transform .15s ease; } .panel details[open] > summary::before { transform: rotate(90deg); } .panel summary::-webkit-details-marker { display: none; } .inset-form { padding: 4px 4px 22px; } .audit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .audit-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .audit-list i { width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--accent); } .audit-list div { display: flex; justify-content: space-between; gap: 20px; } .audit-list b { font-size: 12px; font-weight: 550; } .audit-list span { color: var(--faint); font-size: 10px; } .authorize-shell, .result-shell { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 60px 24px 90px; } .authorize-card, .result-card { width: min(520px, 100%); text-align: center; } .connection-visual { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 28px; } .connection-visual > i { width: 70px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--gold)); opacity: .5; } .authorize-card h1, .result-card h1 { margin: 0 0 13px; font: 500 31px var(--serif); } .authorize-copy { color: var(--muted); font-size: 13px; } .permission-box { margin: 27px 0; padding: 21px; border: 1px solid var(--line); border-radius: 14px; text-align: left; background: var(--surface); } .permission-box h2 { margin: 0 0 14px; color: var(--ink); font-size: 12px; } .permission-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .permission-box li { display: flex; gap: 11px; color: var(--muted); font-size: 12px; } .permission-box li i { color: var(--success); font-style: normal; } .authorize-actions { display: flex; justify-content: center; gap: 11px; } .result-glyph { width: 66px; height: 66px; margin: 0 auto 26px; display: grid; place-items: center; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent-strong); font: 500 28px var(--serif); } footer { width: min(1120px, calc(100% - 48px)); min-height: 70px; margin: 0 auto; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } /* Language and appearance switch. Every option is its own submit button, so the whole control works with no script at all. The full-width bar keeps these global choices reachable before the page's own navigation. */ .preference-bar { position: relative; z-index: 1; min-height: 48px; display: flex; align-items: center; justify-content: flex-end; padding: 8px max(24px, calc((100% - 1240px) / 2)); border-bottom: 1px solid var(--line-soft); background: var(--surface); backdrop-filter: blur(14px); } .prefs { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; } .pref-group { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; } .pref-group legend { float: left; width: 28px; height: 32px; padding: 0 8px 0 0; display: grid; place-items: center; color: var(--faint); } .pref-icon-svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .pref-icon-fill { fill: currentColor; stroke: none; opacity: .55; } .pref { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 11px; line-height: 1.4; letter-spacing: normal; text-transform: none; cursor: pointer; transition: .15s ease; } .pref-icon { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; } .pref-icon .pref-icon-svg { width: 15px; height: 15px; } .pref:hover { color: var(--ink); border-color: var(--accent-line); } .pref-on { color: var(--accent-strong); border-color: var(--accent-line); background: var(--accent-soft); } /* Cookie disclosure and choice. Keep the summary anchored in both states and open the card above it without moving the page. No script is needed. */ .cookie-panel { --cookie-inset: 18px; --cookie-width: min(440px, calc(100% - 2 * var(--cookie-inset))); position: fixed; right: var(--cookie-inset); bottom: var(--cookie-inset); z-index: 40; width: var(--cookie-width); margin: 0; border: 0; color: var(--ink); pointer-events: none; } .cookie-panel > summary { width: max-content; max-width: 100%; margin-left: auto; padding: 8px 12px; min-height: 36px; line-height: 18px; pointer-events: auto; border: 1px solid var(--line); border-radius: 999px; list-style: none; color: var(--muted); background: var(--card); box-shadow: 0 10px 32px var(--shadow); font-size: 11px; cursor: pointer; } .cookie-panel > summary::-webkit-details-marker { display: none; } .cookie-panel[open] > summary { border-color: var(--accent-line); color: var(--accent-strong); } .cookie-card { position: fixed; right: var(--cookie-inset); bottom: calc(var(--cookie-inset) + 44px); width: var(--cookie-width); /* Percentages also exclude a horizontal scrollbar from the available height. */ max-height: calc(100% - 2 * var(--cookie-inset) - 44px); max-height: min(calc(100% - 2 * var(--cookie-inset) - 44px), calc(100dvh - 2 * var(--cookie-inset) - 44px)); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; padding: 20px; border: 1px solid var(--accent-line); border-radius: 16px; background: var(--card); box-shadow: 0 18px 60px var(--shadow); backdrop-filter: blur(18px); } .cookie-card h2 { margin: 0 0 7px; font: 500 19px var(--serif); } .cookie-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; } .cookie-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 16px; } .cookie-actions form { margin: 0; } .button-muted { color: var(--muted); border-color: var(--line); background: var(--surface); } @media (max-width: 820px) { .site-header, .site-header.compact { width: min(100% - 30px, 1120px); } .auth-shell { grid-template-columns: 1fr; gap: 38px; padding-top: 48px; } .auth-intro { text-align: center; } .auth-intro > p:not(.eyebrow), .mini-promise { margin-left: auto; margin-right: auto; } .account-shell { grid-template-columns: 1fr; margin-top: 38px; } .profile-rail { position: static; text-align: center; } .avatar-orbit { margin-left: auto; margin-right: auto; } .side-nav { grid-template-columns: repeat(2,1fr); } .world-card { grid-template-columns: 64px 1fr; } } @media (max-width: 560px) { .site-header { width: calc(100% - 28px); height: 70px; } .site-header nav { gap: 14px; } .nav-link { font-size: 12px; } .hero { padding-top: 60px; min-height: 650px; } .hero h1 { font-size: 47px; } .trust-row { grid-template-columns: 1fr; gap: 11px; } .section-heading { align-items: start; } .worlds { width: calc(100% - 28px); } .world-card { padding: 23px 19px; grid-template-columns: 1fr; } .world-glyph { width: 48px; height: 48px; } .auth-shell, .account-shell { width: calc(100% - 28px); } .auth-intro h1 { font-size: 42px; } .auth-card, .authorize-card, .result-card { padding: 29px 22px; } .account-shell { gap: 35px; } .panel { padding: 22px 17px; } .grid-form { grid-template-columns: 1fr; } .connection-row, .session-row { grid-template-columns: auto 1fr; } .connection-row form, .session-row form { grid-column: 1/-1; } .connection-row .button, .session-row .button { width: 100%; } /* A heading row carrying a control stacks rather than squeezing the heading into one word per line. This was `.passkey-heading`, which was the only such row; all three subsections have one now. */ /* The label and the rule that qualifies it each get a line rather than two cramped columns of wrapped text. */ .panel summary { flex-wrap: wrap; gap: 6px 12px; } .panel summary span { flex: 1 0 100%; } .subsection-heading { align-items: stretch; flex-direction: column; gap: 10px; } .subsection-heading .button { width: 100%; } .signout-all-form { flex-direction: column-reverse; align-items: stretch; gap: 8px; } .signout-all-form > span { text-align: center; } .passkey-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .passkey-rename-form { grid-template-columns: 1fr; } .passkey-rename-form .button, .passkey-remove-form .button { width: 100%; } .passkey-remove-form { grid-column: 1/-1; } .verify-banner { align-items: stretch; flex-direction: column; } .verify-banner .button { width: 100%; } .passkey-dialog-form { padding: 24px 20px; } .passkey-dialog-actions { flex-direction: column-reverse; } .passkey-dialog-actions .button { width: 100%; } .audit-list div { display: grid; gap: 2px; } .authorize-actions { flex-direction: column-reverse; } .preference-bar { justify-content: center; padding: 10px 14px; } footer { width: calc(100% - 28px); justify-content: center; text-align: center; } .prefs { justify-content: center; gap: 10px 14px; } .cookie-panel { --cookie-inset: 10px; --cookie-width: calc(100% - 20px); } .cookie-actions, .cookie-actions form, .cookie-actions .button { width: 100%; } } @media (prefers-reduced-motion: no-preference) { .hero-star { animation: star-pulse 4s ease-in-out infinite; } .orbit-a { animation: orbit-a 18s linear infinite; } .orbit-b { animation: orbit-b 23s linear infinite reverse; } @keyframes star-pulse { 50% { opacity: .65; transform: scale(.92); } } @keyframes orbit-a { to { transform: rotate(335deg); } } @keyframes orbit-b { to { transform: rotate(410deg); } } }