/* Keep the desktop frame and its contents in the same proportions at every width. */
.app-window { container-type: inline-size; border-radius: 8px; }
.window-bar { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; height: 2.9cqw; overflow: hidden; padding: 0 0 0 1.35cqw; background: #15171a; border-bottom: .07746cqw solid #282c30; }
.window-title { display: flex; align-items: center; height: 100%; gap: .67cqw; font-family: "Segoe UI", sans-serif; font-size: 1.12cqw; line-height: normal; font-weight: 400; letter-spacing: 0; color: #d4d7dc; }
.window-title img { display: block; width: 1.35cqw; height: 1.35cqw; object-fit: contain; flex: 0 0 auto; }
.window-controls { align-self: stretch; display: flex; color: #bec3ca; }
.window-controls > span { width: 3.8cqw; flex: 0 0 3.8cqw; display: flex; align-items: center; justify-content: center; }
.window-controls svg { display: block; width: 1.12cqw; height: 1.12cqw; fill: none; stroke: currentColor; stroke-width: 1; }


/* Navigation styling belongs to the alternative pages. */



/* Three reasons: neutral surfaces, mint accents, and the shared desktop previews. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { background: #080a0b; color: #eef1f3; }
.study-main { overflow: clip; }
.study-main *, .study-main *::before, .study-main *::after { box-sizing: border-box; }
.study-container { width: min(1060px, calc(100% - 48px)); margin-inline: auto; }
.study-skip { position: fixed; z-index: 100; top: 12px; left: 16px; padding: 12px 20px; border-radius: 8px; background: #6fe3b9; color: #092016; transform: translateY(-180%); }
.study-skip:focus { transform: translateY(0); }
.study-hero { padding-top: 90px; padding-bottom: 76px; text-align: center; }
.study-hero h1 { margin: 0; font-size: clamp(2.1rem, 4.8vw, 4.1rem); letter-spacing: -.045em; font-weight: 700; line-height: 1.14; }
.study-reason { max-width: 940px; padding-top: 26px; margin-bottom: 110px; }
.study-reason + .study-reason { padding-top: 70px; }
.study-preview { width: 100%; min-width: 0; margin: 0; }
.study-preview .app-window { border: 1px solid #343a40; background: #090a0b; box-shadow: 0 24px 80px #0004; }
.study-fallback { padding: 36px; text-align: center; color: #9eaab4; font-size: .9rem; }
.study-main a:focus-visible, .study-main button:focus-visible { outline: 2px solid #8ceac6; outline-offset: 5px; }
@media (max-width: 800px) {
 .study-hero { padding-top: 65px; padding-bottom: 50px; }
}
@media (max-width: 600px) {
 html { scroll-padding-top: 90px; }
 .study-container { width: calc(100% - 32px); }
 .study-hero { padding-top: 48px; padding-bottom: 32px; }
 .study-hero h1 { font-size: 2.1rem; }
 .study-reason + .study-reason { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.study-blocked-preview img { display: block; width: 100%; height: auto; border: 1px solid #343a40; border-radius: 8px; }

/* The focus guard introduces each point in the alternative guide's message style. */
.study-reason-heading { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 24px; margin-bottom: 36px; }
.study-guide-mascot { display: block; width: 100%; height: auto; }
.study-message { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px; position: relative; min-width: 0; padding: 24px; border: 1px solid #414650; border-radius: 16px; background: #101114; box-shadow: 0 12px 36px #0006; }
.study-message::before { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; border-left: 1px solid #414650; border-bottom: 1px solid #414650; background: #101114; transform: translateY(-50%) rotate(45deg); }
.study-message-title { display: contents; }
.study-number { flex-shrink: 0; color: #65dcb0; font-size: 1.25rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.study-message h2 { margin: 0; color: #5ee0bd; font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.study-message .study-description { grid-column: 2; margin: 0; max-width: none; color: #aeb8c3; font-size: .9rem; line-height: 1.7; }
@media (max-width: 700px) {
 .study-reason-heading { grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 16px; margin-bottom: 28px; }
 .study-guide-mascot { margin-top: 28px; }
 .study-message { padding: 18px; border-radius: 12px; }
 .study-message::before { top: 60px; }
 .study-message { column-gap: 10px; }
 .study-number, .study-message h2 { font-size: 1.1rem; }
 .study-message .study-description { font-size: .85rem; }
}
@media (max-width: 420px) {
 .study-reason-heading { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
 .study-message { padding: 16px; }
 .study-guide-mascot { margin-top: 36px; }
}

/* On this page the clan preview owns the quests/activity navigation. */
#study-together fokasu-clan { position: relative; }
#study-together .study-clan-overview { height: var(--dash-view-height); }
#progress-preview .dash-scroll-toggle { display: none; }

/* Intro and final download action use the shared homepage picker. */
.study-intro { max-width: 640px; margin: 24px auto 0; color: #aeb8c3; font-size: 1rem; line-height: 1.7; }
.study-download-section { margin-bottom: 0; padding-bottom: clamp(76px, 12vh, 160px); text-align: center; }
.study-download-section h2 { margin: 0; color: #eef1f3; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -.025em; }
.study-download-section > p { max-width: 480px; margin: 14px auto 26px; color: #aeb8c3; font-size: 1rem; line-height: 1.7; }
.study-download-actions { margin: 0 auto; }
.study-download-actions > .download-picker { flex: 0 0 auto; width: auto; }
.study-download-actions .download-picker-menu { top: auto; bottom: calc(100% + 12px); }

/* Follow the existing site FAQ rows beneath the closing download section. */
.study-faq { width: min(800px, calc(100% - 48px)); margin: 0 auto 100px; padding-top: clamp(72px, 11vh, 148px); }
.study-faq > h2 { margin: 0 0 36px; color: #eef1f3; text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; letter-spacing: -.025em; }
.study-faq-more { margin: 24px 0 0; text-align: center; font-size: .9rem; line-height: 1.6; }
.study-faq-more a { text-decoration: none; }
@media (max-width: 700px) {
 .study-download-section { padding-bottom: 106px; }
 .study-faq { padding-top: 106px; }
}
@media (max-width: 600px) {
 .study-faq { width: calc(100% - 32px); margin-bottom: 60px; }
}