.jamdole-page {
    --jd-blue: var(--blue);
    --jd-blue-deep: var(--blue-dark);
    --jd-action-bg: var(--blue);
    --jd-action-hover: var(--blue-dark);
    --jd-action-ink: #fff;
    --jd-action-hover-ink: #fff;
    --jd-hero-bg: color-mix(in srgb, var(--blue-dark) 94%, var(--bg) 6%);
    --jd-dates-bg: color-mix(in srgb, var(--blue-dark) 68%, var(--bg) 32%);
    --jd-hero-ink: color-mix(in srgb, #fff 92%, var(--blue-light) 8%);
    --jd-hero-muted: color-mix(in srgb, var(--jd-hero-ink) 68%, var(--jd-hero-bg) 32%);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

.jamdole-page .site-footer { margin-top: 0; }
.jd-hero {
    position: relative;
    display: flex;
    overflow-x: clip;
    min-height: min(550px, calc(100svh - 64px));
    align-items: flex-start;
    padding: 48px max(1.2rem, calc((100vw - 1120px) / 2)) 1.25rem;
    background: var(--jd-hero-bg);
    color: var(--jd-hero-ink);
}
.jd-hero-inner { width: min(100%, 1120px); margin: 0 auto; }
.jd-partners { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 0 0 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.jd-wordmark { display: flex; align-items: center; gap: 0.65rem; min-width: 0; color: var(--jd-hero-ink); text-decoration: none; }
.jd-wordmark:hover { color: var(--jd-hero-ink); text-decoration: none; }
.jd-wordmark > span { display: grid; gap: 0.22rem; }
.jd-wordmark img { display: block; flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; }
.jd-wordmark--bluesky img { width: 50px; height: 50px; }
.jd-wordmark--bluesky img { filter: var(--jd-bluesky-logo-filter, none); }
.jd-wordmark--playtopia img { width: 116px; height: 52px; }
.jd-wordmark--atmosphere svg { display: block; flex: 0 0 auto; width: 56px; height: 32px; color: var(--jd-hero-ink); }
.jd-wordmark b { font-size: 0.82rem; font-weight: 800; line-height: 1.1; }
.jd-wordmark small { color: var(--jd-hero-muted); font-size: 0.58rem; font-weight: 750; line-height: 1.2; }
.jd-wordmark--bluesky b { font-size: 0.95rem; }
.jd-partner-divider { width: 1px; height: 30px; background: rgba(255, 255, 255, 0.35); }
.jd-kicker { margin: 0 0 0.6rem; color: var(--blue); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.jd-hero .jd-kicker { color: var(--jd-hero-ink); }
.jd-hero .jd-kicker { margin-top: 1.25rem; }
.jd-title-row { position: relative; }
.jd-hero h1 { margin: 0; color: var(--jd-hero-ink); font-size: clamp(4.5rem, 11vw, 7.2rem); font-weight: 850; line-height: 0.98; }
.jd-title-floater { position: absolute; top: 0.5rem; right: 0; display: block; width: clamp(96px, 16vw, 150px); height: auto; aspect-ratio: 2 / 1; opacity: 0.14; transform-origin: 50% 50%; animation: jd-title-bounceabout 14s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate; will-change: transform; }
/* Percent offsets keep the bounce proportional to the floater's size. */
@keyframes jd-title-bounceabout {
    0%   { transform: translate3d(-17%, -22%, 0) rotate(-4.5deg); }
    20%  { transform: translate3d(19%, -32%, 0) rotate(4deg); }
    40%  { transform: translate3d(15%, 14%, 0) rotate(1.8deg); }
    60%  { transform: translate3d(-18%, 22%, 0) rotate(-3.6deg); }
    80%  { transform: translate3d(8%, -35%, 0) rotate(3.4deg); }
    100% { transform: translate3d(-12%, -10%, 0) rotate(-2.6deg); }
}
.jd-protocol-callout { position: absolute; top: calc(4rem + 125px + 0.75rem); right: 0; z-index: 1; width: min(360px, 100%); margin: 0; padding: 1.1rem 1.25rem 1.2rem; outline: 1px solid color-mix(in srgb, var(--jd-hero-ink) 42%, transparent); outline-offset: 5px; border: 1px solid color-mix(in srgb, var(--jd-hero-ink) 72%, transparent); background: color-mix(in srgb, var(--jd-hero-ink) 8%, transparent); text-align: center; }
.jd-protocol-callout h2 { margin: 0; color: var(--jd-hero-ink); font-size: 1.05rem; font-weight: 850; line-height: 1.2; }
.jd-protocol-callout p { margin: 0.3rem 0 0.85rem; color: var(--jd-hero-muted); font-size: 0.78rem; line-height: 1.4; }
.jd-protocol-button { min-height: 38px; padding: 0.55rem 1rem; border: 2px solid var(--jd-hero-ink); border-radius: 0; background: transparent; color: var(--jd-hero-ink); font: inherit; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.jd-protocol-button:hover { background: var(--jd-hero-ink); color: var(--jd-hero-bg); transform: translateY(-2px); }
.jd-protocol-button:focus-visible, .jd-protocol-dialog__close:focus-visible { outline: 3px solid var(--jd-hero-ink); outline-offset: 3px; }
.jd-protocol-dialog { width: min(680px, calc(100% - 2rem)); max-height: min(720px, calc(100dvh - 2rem)); margin: auto; padding: 0; border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--border)); border-top: 6px solid color-mix(in srgb, var(--blue) 72%, var(--white)); background: color-mix(in srgb, var(--white) 92%, var(--bg) 8%); box-shadow: 0 24px 70px color-mix(in srgb, var(--text) 22%, transparent); color: var(--text); }
.jd-protocol-dialog::backdrop { background: color-mix(in srgb, var(--text) 42%, transparent); backdrop-filter: blur(3px); }
.jd-protocol-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); background: color-mix(in srgb, var(--blue-light) 42%, var(--white) 58%); }
.jd-protocol-dialog__head .jd-kicker { margin: 0 0 0.35rem; color: var(--blue); }
.jd-protocol-dialog__head h2 { margin: 0; color: var(--text); font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1.05; }
.jd-protocol-dialog__close { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--border) 78%, transparent); border-radius: 0; background: color-mix(in srgb, var(--white) 72%, var(--bg) 28%); color: var(--text-muted); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.jd-protocol-dialog__close:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue-light) 70%, var(--white)); color: var(--text); }
.jd-protocol-dialog__body { max-height: min(590px, calc(100dvh - 10rem)); overflow-y: auto; padding: 0 1.25rem 1.25rem; background: color-mix(in srgb, var(--white) 94%, var(--bg) 6%); scrollbar-color: color-mix(in srgb, var(--blue) 38%, transparent) transparent; }
.jd-protocol-section { border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
.jd-protocol-section summary { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0.25rem; color: color-mix(in srgb, var(--blue) 78%, var(--text) 22%); font-size: 0.88rem; font-weight: 850; line-height: 1.3; cursor: pointer; list-style: none; }
.jd-protocol-section summary::-webkit-details-marker { display: none; }
.jd-protocol-section summary > span { min-width: 0; }
.jd-protocol-section summary::before { box-sizing: border-box; display: block; width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 0.55rem 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 0.55rem no-repeat; color: var(--blue); content: ''; flex: 0 0 auto; }
.jd-protocol-section[open] summary { color: var(--text); }
.jd-protocol-section[open] summary::before { border-color: color-mix(in srgb, var(--blue) 72%, var(--border)); background-color: color-mix(in srgb, var(--blue-light) 72%, var(--white)); background-image: linear-gradient(var(--blue), var(--blue)); background-position: center; background-size: 0.55rem 1px; background-repeat: no-repeat; color: var(--blue); }
.jd-protocol-section summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.jd-protocol-section__content { padding: 0.1rem 2.25rem 1.1rem; }
.jd-protocol-section__content p { margin: 0 0 1rem; color: color-mix(in srgb, var(--text-muted) 86%, var(--text) 14%); font-size: 0.86rem; line-height: 1.7; }
.jd-protocol-section__content p:last-child { margin-bottom: 0; }
.jd-protocol-dialog__body a { color: var(--blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.jd-protocol-section__content strong { color: color-mix(in srgb, var(--text) 88%, var(--blue) 12%); font-weight: 800; }
.jd-protocol-section__content strong a { color: var(--blue); }
.jd-protocol-dialog__body .jd-protocol-dialog__more { padding-top: 0.85rem; border-top: 1px solid var(--border); }
.jd-success-dialog { width: min(500px, calc(100% - 2rem)); margin: auto; padding: 0; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border)); border-top: 7px solid var(--blue); background: var(--white); box-shadow: 0 24px 70px color-mix(in srgb, var(--text) 26%, transparent); color: var(--text); }
.jd-success-dialog::backdrop { background: color-mix(in srgb, var(--text) 48%, transparent); backdrop-filter: blur(4px); }
.jd-success-dialog__inner { padding: 2rem clamp(1.25rem, 5vw, 2.5rem) 2.25rem; text-align: center; }
.jd-success-dialog__icons { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 1.25rem; }
.jd-success-dialog__brand, .jd-success-dialog__discord { display: grid; place-items: center; color: var(--blue); text-decoration: none; }
.jd-success-dialog__brand { width: 84px; height: 52px; }
.jd-success-dialog__discord { width: 40px; height: 34px; }
.jd-success-dialog__brand svg { width: 78px; height: 39px; }
.jd-success-dialog__discord svg { width: 32px; height: 32px; }
.jd-success-dialog__eyebrow { margin: 0 0 0.55rem; color: var(--blue); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.12em; }
.jd-success-dialog h2 { margin: 0; color: var(--text); font-size: clamp(1.8rem, 6vw, 2.55rem); line-height: 1; }
.jd-success-dialog__copy, .jd-success-dialog__invite { max-width: 30rem; margin: 1rem auto 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
.jd-success-dialog__invite { margin-top: 0.65rem; }
.jd-success-dialog__invite strong { color: var(--text); }
.jd-success-dialog__actions { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-top: 1.5rem; }
.jd-success-dialog__discord-button { min-height: 42px; padding: 0.7rem 1rem; border: 1px solid var(--blue); border-radius: 3px; font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; }
.jd-success-dialog__discord-button { background: var(--blue); color: #fff; text-decoration: none; }
.jd-success-dialog__discord-button:hover { background: var(--blue-dark); color: #fff; text-decoration: none; }
.jd-success-dialog__brand:focus-visible, .jd-success-dialog__discord:focus-visible, .jd-success-dialog__discord-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
body.jd-protocol-dialog-open, body.jd-success-dialog-open { overflow: hidden; }
.jd-hero-copy { width: min(800px, 100%); margin-top: 1.35rem; }
.jd-hero-copy-mobile,
.jd-hero-detail-mobile,
.jd-hero-note-mobile { display: none; }
.jd-hero-copy > p:first-child,
.jd-hero-copy-mobile { max-width: 780px; color: var(--jd-hero-ink); font-size: 1.55rem; font-weight: 650; line-height: 1.3; }
.jd-hero-copy .jd-hero-detail { max-width: 740px; margin-top: 0.85rem; color: var(--jd-hero-muted); font-size: 0.95rem; line-height: 1.6; }
.jd-hero-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 1.6rem; }
.jd-hero-note { max-width: 510px; color: var(--jd-hero-muted); font-size: 0.75rem; line-height: 1.55; }
.jd-start-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.8rem 1.45rem; border: 1px solid var(--jd-hero-ink); border-radius: 4px; background: var(--jd-hero-ink); color: var(--jd-hero-bg); font-size: 0.95rem; font-weight: 800; text-decoration: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--jd-hero-bg) 35%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.jd-start-link:hover { border-color: var(--jd-hero-ink); background: var(--jd-hero-ink); color: var(--jd-hero-bg); text-decoration: none; transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jd-hero-ink) 24%, transparent), 0 8px 18px rgba(0, 20, 48, 0.26); }
.jd-start-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }


.jd-timeline { padding: 1.5rem 1.25rem 2rem; background: var(--jd-dates-bg); color: var(--jd-hero-ink); }
.jd-timeline-inner { width: min(1160px, 100%); margin: 0 auto; }
.jd-timeline h2 { margin: 0; color: var(--jd-hero-ink); font-size: 2rem; font-weight: 850; line-height: 1.15; text-align: left; }
.jd-timeline-intro { max-width: 700px; margin: 0.45rem 0 1.15rem; color: var(--jd-hero-muted); font-size: 0.82rem; line-height: 1.5; }
.jd-timeline-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; list-style: none; border-top: 3px solid color-mix(in srgb, var(--jd-hero-ink) 55%, transparent); }
.jd-timeline-list li { display: grid; align-content: start; gap: 0.5rem; min-width: 0; min-height: 118px; padding: 1rem 0.9rem; border-right: 1px solid color-mix(in srgb, var(--jd-hero-ink) 18%, transparent); background: color-mix(in srgb, var(--jd-hero-ink) 7%, transparent); }
.jd-timeline-list li:last-child { border-right: 0; }
.jd-timeline-list li.is-complete { opacity: 0.38; }
.jd-timeline-date { color: var(--jd-hero-ink); font-size: 0.92rem; font-weight: 850; }
.jd-timeline-list strong { color: var(--jd-hero-ink); font-size: 0.8rem; line-height: 1.5; }
.jd-timeline-list small { color: var(--jd-hero-muted); font-size: 0.7rem; font-weight: 450; line-height: 1.45; }

.jd-application { width: min(1040px, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(0.75rem, 1.5vw, 1.25rem) 0; scroll-margin-top: 5rem; }
.jd-smallprint h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.08; }
.jd-auth-stage { display: grid; place-items: center; width: 100%; padding: 1rem 0; }
.jd-auth-message, .jd-auth-loading, .jd-auth-error, .jd-auth-closed { display: grid; grid-area: 1 / 1; align-content: center; justify-items: center; gap: 0.85rem; width: min(100%, 460px); aspect-ratio: 1 / 1; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid color-mix(in srgb, var(--blue) 38%, var(--border)); border-top: 6px solid var(--blue); background: var(--white); box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); text-align: center; }
.jd-auth-selected { display: grid; grid-area: 1 / 1; gap: 1.4rem; width: 100%; padding: 0; color: var(--text); }
.jd-auth-message[hidden], .jd-auth-loading[hidden], .jd-auth-error[hidden], .jd-auth-closed[hidden], .jd-auth-selected[hidden] { display: none; }
.jd-auth-logo { display: block; width: 136px; height: 68px; margin-bottom: 0.3rem; color: var(--blue); }
.jd-auth-eyebrow { margin: 0; color: var(--blue); font-size: 0.72rem; font-weight: 850; }
.jd-auth-message h2, .jd-auth-loading h2, .jd-auth-error h2 { max-width: 340px; margin: 0; color: var(--text); font-size: 1.8rem; font-weight: 850; line-height: 1.15; }
.jd-auth-copy { max-width: 335px; margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
.jd-login-form { display: grid; width: min(100%, 335px); gap: 0.42rem; text-align: left; }
.jd-login-form label { color: var(--text); font-size: 0.82rem; font-weight: 650; }
.jd-login-handle-wrapper { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--white); }
.jd-login-handle-wrapper:focus-within { border-color: var(--blue); }
.jd-login-handle-prefix { padding: 0.65rem 0.7rem; background: color-mix(in srgb, var(--bg) 44%, var(--white) 56%); border-right: 1px solid var(--border); color: var(--text-muted); font-size: 0.95rem; user-select: none; }
.jd-login-handle-wrapper input { flex: 1; min-width: 0; border: 0; padding: 0.65rem; background: transparent; color: var(--text); font: inherit; font-size: 0.95rem; }
.jd-login-handle-wrapper input:focus { outline: none; }
.jd-login-handle-wrapper input::placeholder { color: color-mix(in srgb, var(--text) 68%, var(--white) 32%); opacity: 1; }
.jd-login-error { display: none; margin: 0; padding: 0.55rem; border: 1px solid #fecaca; border-radius: 6px; background: #fef2f2; color: #dc2626; font-size: 0.78rem; }
.jd-login-error.is-visible { display: block; }
.jd-login-submit { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; padding: 0.7rem; border: 0; border-radius: 6px; background: var(--jd-action-bg); color: var(--jd-action-ink); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.jd-login-submit:hover { background: var(--jd-action-hover); color: var(--jd-action-hover-ink); }
.jd-login-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.jd-login-submit svg { width: 18px; height: 18px; stroke: currentColor; }
.jd-auth-footnote { max-width: 330px; margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.76rem; line-height: 1.5; }
.jd-auth-loading { color: var(--text-muted); font-size: 0.85rem; }
.jd-auth-spinner { width: 28px; height: 28px; margin-top: 0.4rem; border: 3px solid color-mix(in srgb, var(--jd-blue) 18%, transparent); border-top-color: var(--jd-blue); border-radius: 50%; animation: jd-spin 0.8s linear infinite; }
@keyframes jd-spin { to { transform: rotate(360deg); } }
.jd-auth-error { border-top-color: #ad2f2c; }
.jd-auth-error .jd-auth-eyebrow { color: #ad2f2c; }
.jd-auth-error .jd-auth-retry { margin: 0.2rem 0 0; }
.jd-auth-closed { border-top-color: var(--blue); }
.jd-auth-closed .jd-auth-eyebrow { color: var(--blue); }
.jd-button.jd-closed-explore { margin-top: 0.2rem; color: #fff; text-decoration: none; }
.jd-button.jd-closed-explore:hover { color: #fff; text-decoration: none; }
.jd-selected-heading { display: grid; gap: 0.55rem; max-width: 760px; text-align: left; }
.jd-selected-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 850; line-height: 1.05; }
.jd-selected-intro { max-width: 680px; margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.55; }
.jd-selected-view-toggle { display: inline-grid; grid-auto-flow: column; justify-self: start; margin-top: 0.15rem; border: 1px solid var(--border); background: var(--white); }
.jd-selected-view-toggle button { min-height: 32px; padding: 0.42rem 0.75rem; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 0.7rem; font-weight: 800; cursor: pointer; }
.jd-selected-view-toggle button:last-child { border-right: 0; }
.jd-selected-view-toggle button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.jd-selected-view-toggle button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--blue); outline-offset: 2px; }
.jd-selected-empty { width: min(100%, 760px); margin: 1.5rem auto 0; padding: 2.5rem 1.25rem; border: 1px dashed color-mix(in srgb, var(--blue) 35%, var(--border)); background: color-mix(in srgb, var(--blue) 4%, var(--white)); color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; text-align: center; }
.jd-selected-empty[hidden] { display: none; }
.jd-selected-carousel { --jd-card-width: min(860px, calc(100% - 4rem)); min-width: 0; }
.jd-selected-track { display: flex; grid-column: 1 / -1; gap: 1.25rem; min-width: 0; overflow-x: auto; padding: 0.2rem max(1rem, calc((100% - var(--jd-card-width)) / 2)) 0.4rem; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.jd-selected-track::-webkit-scrollbar { display: none; }
.jd-selected-card { position: relative; display: grid; flex: 0 0 var(--jd-card-width); align-content: start; gap: 0.65rem; height: min(520px, calc(100vh - 230px)); min-height: 480px; overflow: visible; padding: clamp(1.15rem, 3vw, 2.2rem); padding-bottom: 0.15rem; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border)); border-top: 6px solid var(--blue); background: color-mix(in srgb, var(--blue) 5%, var(--white)); box-shadow: 0 12px 26px color-mix(in srgb, var(--text) 12%, transparent); scroll-snap-align: start; }
.jd-selected-card-topline { position: absolute; top: clamp(1.15rem, 3vw, 2.2rem); right: clamp(1.15rem, 3vw, 2.2rem); color: var(--text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.jd-selected-project-heading { display: flex; align-items: center; gap: 1rem; }
.jd-selected-project-avatar { width: 72px; height: 72px; flex: 0 0 auto; border: 2px solid var(--blue); border-radius: 50%; background: var(--blue-light); object-fit: cover; }
.jd-selected-handle { width: fit-content; color: var(--blue); font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.jd-selected-handle:hover { color: var(--blue-dark); text-decoration: underline; }
.jd-selected-card h3 { margin: 0.25rem 0 0; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 0.98; }
.jd-selected-copy { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 0.75rem; max-width: 780px; padding-top: 0.7rem; border-top: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border)); }
.jd-selected-copy > span, .jd-selected-team > span { color: var(--blue); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.jd-selected-card p { max-height: 8.5rem; margin: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.65rem; color: var(--text-muted); font-size: 0.82rem; line-height: 1.55; scrollbar-color: color-mix(in srgb, var(--blue) 55%, transparent) transparent; scrollbar-width: thin; }
.jd-selected-card p::-webkit-scrollbar { width: 5px; }
.jd-selected-card p::-webkit-scrollbar-thumb { border-radius: 5px; background: color-mix(in srgb, var(--blue) 55%, transparent); }
.jd-selected-team { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 0.45rem; align-items: center; margin-top: auto; padding-top: 0.25rem; border-top: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border)); }
.jd-selected-team > div { display: flex; flex-wrap: nowrap; gap: 0.7rem; min-width: 0; overflow-x: auto; }
.jd-selected-team a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text); font-size: 0.78rem; font-weight: 750; text-decoration: none; }
.jd-selected-team a:hover { color: var(--blue); text-decoration: underline; }
.jd-selected-team img { width: 28px; height: 28px; border: 1px solid var(--blue); border-radius: 50%; object-fit: cover; }
.jd-game-view { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0.75rem 1.35rem; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.jd-game-view[hidden], .jd-auth-selected:not(.is-games-view) .jd-game-view { display: none; }
.jd-game-visual { display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 0.55rem; min-width: 0; min-height: 0; }
.jd-game-developer { display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--text); text-decoration: none; }
.jd-game-developer:hover { color: var(--blue); }
.jd-game-developer img { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--blue); border-radius: 50%; object-fit: cover; }
.jd-game-developer > span { display: grid; gap: 0.2rem; min-width: 0; overflow-wrap: anywhere; }
.jd-game-developer strong { font-size: 0.75rem; line-height: 1.2; }
.jd-game-developer small { color: var(--blue); font-size: 0.66rem; line-height: 1.2; }
.jd-game-cover-link { display: block; align-self: start; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border); background: var(--blue-light); }
.jd-game-cover { display: block; width: 100%; height: 100%; object-fit: contain; }
.jd-game-content { display: grid; grid-template-rows: auto auto auto 4.8rem minmax(0, 1fr); align-content: start; gap: 0.5rem; min-width: 0; min-height: 0; }
.jd-selected-card .jd-game-name { margin: 0; font-size: 2rem; line-height: 1.1; overflow-wrap: anywhere; }
.jd-game-name a { color: var(--text); text-decoration: none; }
.jd-game-name a:hover { color: var(--blue); text-decoration: underline; }
.jd-selected-card .jd-game-tagline { min-width: 0; max-height: none; overflow: hidden; color: var(--text); font-size: 1.05rem; font-style: italic; font-weight: 500; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.jd-selected-card .jd-game-description { height: 4.8rem; max-height: none; overflow-y: auto; padding-right: 0.45rem; font-size: 0.78rem; line-height: 1.5; }
.jd-game-tags { display: flex; flex-wrap: wrap; gap: 0.42rem; margin: 0.25rem 0; }
.jd-game-tags > span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.58rem; border: 1px solid color-mix(in srgb, var(--tile-cat-accent) 48%, var(--border) 52%); border-radius: 10px; background: color-mix(in srgb, var(--tile-cat-accent) 22%, var(--white) 78%); color: color-mix(in srgb, var(--tile-cat-accent) 84%, var(--text) 16%); font-size: 0.7rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere; }
.jd-game-tags svg { width: 14px; height: 14px; flex: 0 0 14px; }
.jd-game-records { display: grid; gap: 0.7rem; min-width: 0; min-height: 0; overflow-y: auto; padding: 0.5rem 0.45rem 0.5rem 0.65rem; border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--blue) 4%, var(--white)); scrollbar-color: color-mix(in srgb, var(--blue) 55%, transparent) transparent; scrollbar-width: thin; }
.jd-game-record-group { min-width: 0; }
.jd-game-record-group h4 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.15rem; color: var(--blue); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; }
.jd-game-record-group h4::after { content: ''; height: 1px; flex: 1; background: currentColor; opacity: 0.22; }
.jd-game-record-group--optional h4 { color: var(--action-explore); }
.jd-game-record-list { display: grid; min-width: 0; }
.jd-game-record { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.6rem; align-items: start; min-width: 0; padding: 0.48rem 0; border-bottom: 1px solid var(--border); }
.jd-game-record:last-child { border-bottom: 0; }
.jd-game-record-icon { position: relative; width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--blue-light) 38%, var(--white) 62%); color: var(--blue); font-size: 0.9rem; font-weight: 850; text-decoration: none; }
.jd-game-record--optional .jd-game-record-icon { color: var(--action-explore); }
.jd-game-record-icon img { position: absolute; inset: 3px; width: 24px; height: 24px; object-fit: contain; opacity: 0; }
.jd-game-record-icon.has-image img { opacity: 1; }
.jd-game-record-icon.has-image > span { visibility: hidden; }
.jd-game-record-copy { min-width: 0; }
.jd-game-record-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.4rem; min-width: 0; }
.jd-game-record-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
.jd-game-record-title strong, .jd-game-record-name { min-width: 0; color: var(--text); font-size: 0.78rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; text-decoration: none; }
.jd-game-record-name:hover { color: var(--blue); text-decoration: underline; }
.jd-game-record-type { padding-left: 0.35rem; border-left: 1px solid var(--border); color: var(--text-muted); font-size: 0.65rem; font-weight: 700; line-height: 1.2; }
.jd-game-record-copy > small { display: block; margin-top: 0.2rem; color: var(--text-muted); font-size: 0.68rem; line-height: 1.35; }
.jd-game-verifier { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.4rem; align-items: center; margin-top: 0.42rem; padding-top: 0.38rem; border-top: 1px solid color-mix(in srgb, var(--action-play) 28%, var(--border)); color: var(--text); text-decoration: none; }
.jd-game-verifier:hover { color: var(--action-play); }
.jd-game-verifier-icon { width: 20px; height: 20px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--action-play); color: #fff; font-size: 0.72rem; font-weight: 850; }
.jd-game-verifier-icon img { width: 100%; height: 100%; object-fit: cover; }
.jd-game-verifier-copy { display: grid; min-width: 0; }
.jd-game-verifier-copy small { color: var(--action-play); font-size: 0.57rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.jd-game-verifier-copy strong { margin-top: 0.08rem; color: var(--text); font-size: 0.65rem; line-height: 1.2; overflow-wrap: anywhere; }
.jd-game-team { display: grid; align-content: start; gap: 0.4rem; min-width: 0; min-height: 0; }
.jd-game-team h3 { margin: 0; color: var(--blue); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; }
.jd-game-team-list { display: grid; gap: 0.4rem; max-height: 8rem; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-color: color-mix(in srgb, var(--blue) 55%, transparent) transparent; scrollbar-width: thin; }
.jd-game-team-member { display: flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--text); text-decoration: none; }
.jd-game-team-member:hover { color: var(--blue); }
.jd-game-team-member img { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--blue); border-radius: 50%; object-fit: cover; }
.jd-game-team-member > span { display: grid; min-width: 0; }
.jd-game-team-member strong { font-size: 0.75rem; line-height: 1.2; overflow-wrap: anywhere; }
.jd-game-team-member small { margin-top: 0.12rem; color: var(--blue); font-size: 0.66rem; line-height: 1.2; overflow-wrap: anywhere; }
.jd-game-team-list > small { color: var(--text-muted); font-size: 0.7rem; }
.jd-game-actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 0.55rem; width: 100%; margin-top: 0; padding-top: 0.35rem; border-top: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border)); }
.jd-game-actions a { display: inline-flex; justify-content: center; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.65rem 0.85rem; border-radius: 6px; color: var(--blue); font-size: 0.83rem; font-weight: 800; text-decoration: none; }
.jd-game-actions .jd-game-play { --jd-play-color: var(--action-play); min-width: min(220px, 100%); background: var(--jd-play-color); color: #fff; }
.jd-game-play[data-state="login"] { --jd-play-color: var(--blue); }
.jd-game-play[data-state="review"] { --jd-play-color: var(--action-check); }
.jd-game-play[data-state="explore"] { --jd-play-color: var(--action-explore); }
.jd-game-actions .jd-game-play:hover { background: color-mix(in srgb, var(--jd-play-color) 84%, #000 16%); }
.jd-game-play img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.jd-game-actions a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.jd-auth-selected.is-games-view .jd-selected-card-topline,
.jd-auth-selected.is-games-view .jd-selected-project-heading,
.jd-auth-selected.is-games-view .jd-selected-copy,
.jd-auth-selected.is-games-view .jd-selected-team { display: none; }
.jd-auth-selected.is-games-view .jd-selected-card { align-content: stretch; grid-template-rows: minmax(0, 1fr); padding-bottom: 1.1rem; }
.jd-selected-scrollbar { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 0.55rem; width: min(100%, 760px); margin: 0 auto; }
.jd-selected-scrollbar-edge { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: 0.65; }
.jd-selected-scrollbar-edge:last-child { justify-self: end; }
.jd-selected-scrollbar input { width: 100%; height: 24px; margin: 0; appearance: none; background: transparent; cursor: grab; }
.jd-selected-scrollbar input:active { cursor: grabbing; }
.jd-selected-scrollbar input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--blue) 18%, var(--border)); }
.jd-selected-scrollbar input::-webkit-slider-thumb { width: 42px; height: 12px; margin-top: -4px; appearance: none; border: 0; border-radius: 8px; background: var(--blue); box-shadow: 0 2px 7px color-mix(in srgb, var(--blue) 35%, transparent); }
.jd-selected-scrollbar input::-moz-range-track { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--blue) 18%, var(--border)); }
.jd-selected-scrollbar input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--blue); }
.jd-selected-scrollbar input::-moz-range-thumb { width: 42px; height: 12px; border: 0; border-radius: 8px; background: var(--blue); box-shadow: 0 2px 7px color-mix(in srgb, var(--blue) 35%, transparent); }
.jd-carousel-control { position: static; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); background: var(--white); color: var(--blue); cursor: pointer; }
.jd-carousel-control:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.jd-carousel-control svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.jd-auth-stage > [hidden] { display: none; }
.jd-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 44px; padding: 0.65rem 1rem; border: 1px solid var(--jd-blue); background: var(--jd-blue); color: var(--white); font: inherit; font-size: 0.83rem; font-weight: 850; text-decoration: none; cursor: pointer; }
.jd-button[hidden] { display: none; }
.jd-button:hover { background: var(--jd-blue-deep); color: var(--white); }
.jd-button--submit { min-width: 240px; min-height: 52px; border-color: var(--jd-blue); background: var(--jd-blue); color: #fff; }
.jd-button--submit:hover { border-color: var(--jd-blue-deep); background: var(--jd-blue-deep); color: #fff; }
.jd-button--explore { min-width: 240px; min-height: 52px; border-color: #2f7d4f; background: #2f7d4f; color: #fff; }
.jd-button--explore:hover { border-color: #24643e; background: #24643e; color: #fff; text-decoration: none; }
.jd-form[hidden], .jd-auth-message[hidden] { display: none; }
.jd-form-account { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; margin: 0 0 1rem; padding: 0.65rem 0.85rem; border-left: 3px solid var(--blue); background: color-mix(in srgb, var(--blue-light) 65%, var(--white)); font-size: 0.77rem; }
.jd-form-account span { color: var(--text-muted); }
.jd-form-account strong { overflow-wrap: anywhere; }
.jd-form-account a { margin-left: auto; }
.jd-account-avatar { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%; object-fit: cover; background: var(--blue-light); }
.jd-section { min-width: 0; margin: 0 0 1.4rem; padding: 1.5rem 0 1.7rem; border: 0; border-top: 1px solid var(--border); }
.jd-section > legend { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.8rem 0 0; font-size: 1.18rem; font-weight: 850; }
.jd-section > legend span { color: var(--blue); font-size: 0.7rem; }
.jd-section-intro { max-width: 730px; margin: 0.15rem 0 1.3rem; color: var(--text-muted); font-size: 0.8rem; line-height: 1.55; }
.jd-grid { display: grid; gap: 1rem 1.2rem; }
.jd-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-field { display: grid; align-content: start; gap: 0.38rem; min-width: 0; color: var(--text); font-size: 0.79rem; font-weight: 750; }
.jd-field[hidden] { display: none; }
.jd-field > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.jd-field b { color: var(--blue); }
.jd-field em { color: var(--text-muted); font-size: 0.68rem; font-style: normal; font-weight: 550; }
.jd-field small { color: var(--text-muted); font-size: 0.7rem; font-weight: 450; line-height: 1.45; }
.jd-field input, .jd-field select, .jd-field textarea { width: 100%; min-width: 0; min-height: 42px; padding: 0.62rem 0.7rem; border: 1px solid color-mix(in srgb, var(--text-muted) 33%, var(--border)); border-radius: 3px; background: var(--white); color: var(--text); font: inherit; font-size: 0.83rem; font-weight: 500; }
.jd-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.jd-field input:focus, .jd-field select:focus, .jd-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--jd-blue) 70%, transparent); outline-offset: 1px; border-color: var(--jd-blue); }
.jd-field--wide, .jd-check--wide { grid-column: 1 / -1; }
.jd-word-count { text-align: right; }
.jd-word-count.is-over { color: #cf4b3e; font-weight: 850; }
.jd-team-list { display: grid; gap: 0.9rem; }
.jd-team-member { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-top: 2px solid var(--jd-blue); background: var(--white); }
.jd-member-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.85rem; }
.jd-member-heading h3 { font-size: 0.88rem; }
.jd-remove-member, .jd-add-member { border: 0; background: transparent; color: var(--blue); font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.jd-add-member { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 0.75rem; width: 100%; margin-top: 0.7rem; padding: 0.8rem 0.9rem; border: 1px dashed color-mix(in srgb, var(--blue) 45%, var(--border)); background: color-mix(in srgb, var(--blue) 3%, var(--white)); color: var(--text); text-align: left; }
.jd-add-member[hidden] { display: none; }
.jd-add-member:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--white)); }
.jd-add-member:disabled { border-style: solid; color: var(--text-muted); cursor: not-allowed; opacity: 0.72; }
.jd-add-member-icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; padding-bottom: 2px; border-radius: 3px; background: var(--blue); color: #fff; font-size: 1.25rem; font-weight: 500; line-height: 1; }
.jd-add-member-copy { display: grid; gap: 0.12rem; }
.jd-add-member-copy strong { font-size: 0.8rem; }
.jd-add-member-copy small { color: var(--text-muted); font-size: 0.71rem; font-weight: 500; line-height: 1.4; }
.jd-check { display: flex; align-items: flex-start; gap: 0.65rem; min-width: 0; color: var(--text); font-size: 0.79rem; font-weight: 600; line-height: 1.5; }
.jd-team-controls + .jd-check { margin-top: 1.1rem; }
.jd-check + .jd-generative-ai-field { margin-top: 0.7rem; }
.jd-check input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 0.1rem; accent-color: var(--jd-blue); }
.jd-submit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; margin-top: 1.7rem; padding: 1.2rem 0 0; border-top: 2px solid var(--jd-blue); }
.jd-submit-note { max-width: 590px; font-size: 0.79rem; line-height: 1.5; }
.jd-submit-note strong { overflow-wrap: anywhere; }
.jd-submit-status { min-height: 1rem; margin-top: 0.35rem; color: var(--text-muted); font-size: 0.74rem; }
.jd-form .jd-auth-error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.85rem 0; padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, #ad2f2c 28%, var(--border)); background: color-mix(in srgb, #ad2f2c 5%, var(--white)); color: #ad2f2c; font-size: 0.82rem; }
.jd-form .jd-auth-error[hidden] { display: none; }
.jd-form .jd-auth-retry { margin-left: auto; border: 1px solid var(--jd-blue); background: var(--white); color: var(--jd-blue); font: inherit; font-size: 0.75rem; font-weight: 800; padding: 0.5rem 0.7rem; cursor: pointer; }
.jd-form .jd-auth-retry:hover { background: var(--jd-blue); color: #fff; }
.jd-submission-view { margin: 0.3rem 0 1.4rem; padding: 1.3rem; border: 1px solid var(--border); border-top: 3px solid var(--blue); background: color-mix(in srgb, var(--blue) 3%, var(--white)); }
.jd-submission-view[hidden] { display: none; }
.jd-submission-confirm { display: flex; align-items: center; gap: 0.8rem; }
.jd-confirm-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.15rem; font-weight: 800; }
.jd-submission-confirm .jd-kicker { margin-bottom: 0.15rem; color: var(--blue); }
.jd-submission-confirm h3 { font-size: 1.05rem; }
.jd-submission-confirm p:last-child, .jd-submission-readonly { color: var(--text-muted); font-size: 0.76rem; }
.jd-submission-readonly { margin: 0.8rem 0 0.45rem; }
.jd-submission-text { max-height: 680px; overflow: auto; padding: 1rem; border: 1px solid var(--border); background: var(--white); color: var(--text); font: inherit; font-size: 0.78rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

.jd-smallprint { display: grid; grid-template-columns: minmax(210px, 0.75fr) minmax(0, 1.6fr); gap: 2rem; padding: 2.5rem max(1.25rem, calc((100vw - 1040px) / 2)); background: color-mix(in srgb, var(--blue-dark) 78%, var(--bg) 22%); color: var(--jd-hero-ink); }
.jd-smallprint .jd-kicker { color: var(--blue); }
.jd-smallprint-copy { display: grid; gap: 0.8rem; }
.jd-smallprint-copy p { color: var(--jd-hero-muted); font-size: 0.74rem; line-height: 1.65; }
.jd-smallprint-copy a { color: var(--jd-hero-ink); text-decoration-color: var(--blue); }

[data-theme="bluesky"] .jamdole-page,
[data-theme="blacksky"] .jamdole-page,
[data-theme="northsky"] .jamdole-page,
[data-theme="teal.fm"] .jamdole-page,
[data-theme="plyr.fm"] .jamdole-page,
[data-theme="fujocoded"] .jamdole-page { --jd-bluesky-logo-filter: brightness(0) invert(1); }

[data-theme="blacksky"] .jamdole-page,
[data-theme="reddwarf"] .jamdole-page,
[data-theme="northsky"] .jamdole-page,
[data-theme="teal.fm"] .jamdole-page,
[data-theme="plyr.fm"] .jamdole-page,
[data-theme="spark"] .jamdole-page,
[data-theme="laelaps"] .jamdole-page,
[data-theme="rpg.actor"] .jamdole-page { --jd-action-ink: #fff; --jd-action-hover-ink: #fff; }

[data-theme="fujocoded"] .jamdole-page { --jd-action-ink: #4d2e91; --jd-action-hover-ink: #fff; }
[data-theme="reverie"] .jamdole-page { --jd-action-ink: #fff; --jd-action-hover-ink: #fff; }

.jamdole-page .login-btn { background: var(--jd-action-bg); color: var(--jd-action-ink); }
.jamdole-page .login-btn:hover { background: var(--jd-action-hover); color: var(--jd-action-hover-ink); }

@media (max-width: 760px) {
    .jd-hero { min-height: 0; padding: 48px 1.25rem 1.5rem; }
    .jd-partners { gap: 1rem; }
    .jd-wordmark b { font-size: 0.72rem; }
    .jd-wordmark small { font-size: 0.52rem; }
    .jd-wordmark > span,
    .jd-wordmark b,
    .jd-wordmark small { white-space: nowrap; }
    .jd-hero h1 { font-size: clamp(4rem, 15vw, 5rem); }
    .jd-protocol-callout { position: static; }
    .jd-hero-copy > p:first-child { font-size: 1.35rem; }
    .jd-timeline-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.5rem; }
    .jd-timeline-list li:nth-child(3), .jd-timeline-list li:nth-child(6) { border-right: 0; }
    .jd-smallprint { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 1023px) {
    .jd-hero-copy-full,
    .jd-hero-detail-full,
    .jd-hero-note-full { display: none; }
    .jd-hero-copy-mobile,
    .jd-hero-detail-mobile,
    .jd-hero-note-mobile { display: block; }
}
@media (max-width: 760px) {
    .jd-title-floater { display: none; }
}
/* Below 1024px the hero is one stacked column; the callout becomes a compact bar. */
@media (min-width: 561px) {
    .jd-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
    .jd-partners { grid-row: 1; }
    .jd-hero .jd-kicker { grid-row: 2; }
    .jd-title-row { display: contents; }
    .jd-hero h1 { grid-row: 3; grid-column: 1; }
    .jd-title-floater { position: relative; top: auto; right: auto; grid-row: 3; grid-column: 1; justify-self: end; align-self: center; width: clamp(110px, 18vw, 170px); }
    .jd-hero-copy { grid-row: 4; }
    .jd-hero-bottom { grid-row: 5; }
    .jd-protocol-callout { position: static; grid-row: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading action" "text action"; column-gap: 1.25rem; align-items: center; width: 100%; margin: 1.5rem 0 0; text-align: left; }
    .jd-protocol-callout h2 { grid-area: heading; }
    .jd-protocol-callout p { grid-area: text; margin-bottom: 0; }
    .jd-protocol-button { grid-area: action; }
}
@media (min-width: 561px) and (max-width: 1023px) {
    .jd-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
    .jd-partner-divider { display: none; }
    .jd-wordmark > span, .jd-wordmark b, .jd-wordmark small { white-space: normal; }
}
@media (min-width: 1024px) {
    .jd-hero-inner { grid-template-columns: minmax(0, 1fr) clamp(280px, 30vw, 360px); column-gap: 1.5rem; }
    .jd-partners, .jd-hero .jd-kicker, .jd-hero h1 { grid-column: 1 / -1; }
    .jd-title-floater { grid-column: 2; width: clamp(150px, 20vw, 250px); }
    .jd-hero-copy, .jd-hero-bottom { grid-column: 1; }
    .jd-protocol-callout { display: block; grid-column: 2; grid-row: 4 / span 2; align-self: start; margin-top: 1.25rem; text-align: center; }
    .jd-protocol-callout p { margin-bottom: 0.85rem; }
}
@media (max-width: 560px) {
    .jd-hero { padding: 36px 1rem 1.25rem; }
    .jd-hero-inner { display: flex; flex-direction: column; }
    .jd-partners { order: 1; }
    .jd-hero .jd-kicker { order: 2; }
    .jd-title-row { display: contents; }
    .jd-hero h1 { order: 3; }
    .jd-hero-copy { order: 4; }
    .jd-hero-bottom { order: 5; }
    .jd-protocol-callout { order: 6; }
    .jd-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.3rem; padding-bottom: 0.75rem; }
    .jd-partner-divider { display: none; }
    .jd-wordmark img { width: 42px; height: 42px; }
    .jd-wordmark--playtopia img { width: 44px; height: 25px; }
    .jd-wordmark--atmosphere svg { width: 44px; height: 25px; }
    .jd-wordmark--playtopia,
    .jd-wordmark--atmosphere { transform: translateX(-0.3rem); }
    .jd-wordmark b, .jd-wordmark--bluesky b { font-size: 0.64rem; }
    .jd-wordmark small { font-size: 0.48rem; }
    .jd-hero .jd-kicker { margin-top: 1.2rem; }
    .jd-hero h1 { max-width: none; font-size: clamp(2.8rem, 13vw, 3.8rem); white-space: nowrap; }
    .jd-title-floater { display: none; }
    .jd-protocol-callout { width: 100%; margin-top: 1.25rem; }
    .jd-hero-copy { margin-top: 1rem; }
    .jd-hero-copy > p:first-child,
    .jd-hero-copy-mobile { font-size: 1.15rem; }
    .jd-hero-bottom { align-items: flex-start; flex-direction: column; gap: 0.9rem; }
    .jd-start-link { align-self: center; }
    .jd-timeline { padding: 1.4rem 1rem 1.7rem; }
    .jd-timeline h2 { margin-bottom: 1rem; font-size: 1.35rem; }
    .jd-timeline-intro { display: none; }
    .jd-timeline-list {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 0;
    }
    .jd-timeline-list::before {
        content: '';
        position: absolute;
        top: 0.65rem;
        bottom: 0.65rem;
        left: 5.9rem;
        width: 2px;
        background: linear-gradient(to bottom, color-mix(in srgb, var(--jd-hero-ink) 52%, transparent), color-mix(in srgb, var(--jd-hero-ink) 18%, transparent));
    }
    .jd-timeline-list li {
        position: relative;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
        min-height: 0;
        padding: 0.75rem 0.2rem;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--jd-hero-ink) 12%, transparent);
        background: color-mix(in srgb, var(--jd-hero-ink) 4%, transparent);
    }
    .jd-timeline-list li:last-child {
        border-bottom: 0;
    }
    .jd-timeline-list li > * {
        position: relative;
        z-index: 1;
    }
    .jd-timeline-list li > strong {
        padding-left: 0.15rem;
        color: var(--jd-hero-ink);
        font-size: 0.88rem;
        font-weight: 850;
        letter-spacing: 0.01em;
    }
    .jd-timeline-date {
        color: var(--jd-hero-muted);
        font-size: 0.66rem;
        font-weight: 750;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-align: center;
        text-transform: uppercase;
    }
    .jd-timeline-year { display: none; }
    .jd-timeline-list small { display: none; }
    .jd-grid--two { grid-template-columns: minmax(0, 1fr); }
    .jd-field--wide, .jd-check--wide { grid-column: auto; }
    .jd-auth-stage { padding: 2rem 0; }
    .jd-auth-message, .jd-auth-loading, .jd-auth-error {
        width: 100%;
        max-width: 360px;
        min-height: 0;
        aspect-ratio: auto;
        padding: clamp(1rem, 5vw, 1.4rem);
    }
    .jd-auth-selected { width: 100%; padding: 0; }
    .jd-selected-carousel { --jd-card-width: calc(100% - 1.25rem); }
    .jd-selected-track { padding-inline: 0.625rem; }
    .jd-selected-scrollbar { grid-template-columns: 28px minmax(0, 1fr) 28px; width: 100%; }
    .jd-carousel-control { width: 26px; height: 26px; }
    .jd-selected-card { flex-basis: calc(100% - 1.25rem); height: 620px; min-height: 620px; padding: 1.1rem; padding-bottom: 0.2rem; }
    .jd-selected-card p { max-height: 8.25rem; }
    .jd-selected-project-avatar { width: 58px; height: 58px; }
    .jd-selected-copy { grid-template-columns: 1fr; gap: 0.35rem; }
    .jd-selected-team { grid-template-columns: 82px minmax(0, 1fr); gap: 0.45rem; }
    .jd-game-view { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; align-content: start; gap: 0.75rem; overflow-y: auto; }
    .jd-game-cover-link { aspect-ratio: 16 / 7; }
    .jd-game-content { grid-template-rows: auto auto auto 4.2rem minmax(0, 1fr); gap: 0.35rem; }
    .jd-selected-card .jd-game-name { font-size: 1.75rem; }
    .jd-selected-card .jd-game-description { height: 4.2rem; }
    .jd-game-team-list { max-height: 8rem; }
    .jd-auth-logo { width: 112px; height: 56px; }
    .jd-auth-message h2, .jd-auth-loading h2, .jd-auth-error h2 { font-size: 1.4rem; }
    .jd-submit-row { grid-template-columns: minmax(0, 1fr); }
    .jd-button--submit { width: 100%; }
    .jd-form-account a { margin-left: 0; }
}