/* 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; } /* 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; } .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; } .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); } } }